@rovula/ui 0.0.77 → 0.0.78

package/dist/index.js

@@ -4,6 +4,7 @@ import "./theme/global.css";
 import "./icons/iconConfig";
 export { default as Button } from "./components/Button/Button";
 export { default as TextInput } from "./components/TextInput/TextInput";
+export { default as MaskedTextInput } from "./components/MaskedTextInput";
 export { NumberInput } from "./components/NumberInput/NumberInput";
 export { default as TextArea } from "./components/TextArea/TextArea";
 export { default as Text } from "./components/Text/Text";

package/dist/src/theme/global.css

@@ -2348,6 +2348,10 @@ input[type=number] {
   z-index: 50;
 }
 
+.z-\[1000\] {
+  z-index: 1000;
+}
+
 .z-\[100\] {
   z-index: 100;
 }
@@ -2778,6 +2782,10 @@ input[type=number] {
   min-width: fit-content;
 }
 
+.max-w-2xl {
+  max-width: 42rem;
+}
+
 .max-w-\[300px\] {
   max-width: 300px;
 }
@@ -2790,6 +2798,10 @@ input[type=number] {
   max-width: 32rem;
 }
 
+.max-w-md {
+  max-width: 28rem;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -3891,6 +3903,11 @@ input[type=number] {
   background-color: color-mix(in srgb, var(--function-default-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+
 .bg-gray-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
@@ -5527,6 +5544,11 @@ input[type=number] {
   font-weight: var(--label-label2-weight, 400);
 }
 
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -5640,6 +5662,10 @@ input[type=number] {
   font-weight: 500;
 }
 
+.font-semibold {
+  font-weight: 600;
+}
+
 .uppercase {
   text-transform: uppercase;
 }
@@ -5893,6 +5919,11 @@ input[type=number] {
   color: rgb(107 114 128 / var(--tw-text-opacity, 1));
 }
 
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
+}
+
 .text-green-500 {
   --tw-text-opacity: 1;
   color: rgb(34 197 94 / var(--tw-text-opacity, 1));
@@ -8870,6 +8901,10 @@ input[type=number] {
   .md\:right-\[40px\] {
     right: 40px;
   }
+
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 
 .\[\&\:has\(\[role\=checkbox\]\)\]\:w-4:has([role=checkbox]) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.77",
+  "version": "0.0.78",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/MaskedTextInput/MaskedTextInput.stories.tsx

@@ -0,0 +1,414 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import MaskedTextInput, { MASK_PATTERNS } from "./MaskedTextInput";
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta = {
+  title: "Components/MaskedTextInput",
+  component: MaskedTextInput,
+  tags: ["autodocs"],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full bg-[rgb(var(--base-bg-2))] ">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof MaskedTextInput>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    label: "Phone Number",
+    mask: MASK_PATTERNS.PHONE,
+    fullwidth: true,
+  },
+  render: (args) => {
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <MaskedTextInput id="1" size="lg" {...args} />
+        <MaskedTextInput id="2" size="md" {...args} />
+        <MaskedTextInput id="3" size="sm" {...args} />
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const PhoneNumber = {
+  args: {
+    label: "Phone Number",
+    mask: MASK_PATTERNS.PHONE,
+    fullwidth: true,
+  },
+  render: (args) => {
+    return (
+      <div className="flex flex-col gap-4 w-full max-w-md">
+        <MaskedTextInput {...args} />
+        <MaskedTextInput
+          {...args}
+          label="International Phone"
+          mask={MASK_PATTERNS.PHONE_INTL}
+        />
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const CreditCard = {
+  args: {
+    label: "Credit Card Number",
+    mask: MASK_PATTERNS.CREDIT_CARD,
+    fullwidth: true,
+  },
+  render: (args) => {
+    return (
+      <div className="flex flex-col gap-4 w-full max-w-md">
+        <MaskedTextInput {...args} />
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const DateAndTime = {
+  args: {
+    label: "Date",
+    mask: MASK_PATTERNS.DATE,
+    fullwidth: true,
+  },
+  render: (args) => {
+    return (
+      <div className="flex flex-col gap-4 w-full max-w-md">
+        <MaskedTextInput {...args} />
+        <MaskedTextInput {...args} label="Time" mask={MASK_PATTERNS.TIME} />
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const SocialSecurityNumber = {
+  args: {
+    label: "Social Security Number",
+    mask: MASK_PATTERNS.SSN,
+    fullwidth: true,
+  },
+  render: (args) => {
+    return (
+      <div className="flex flex-col gap-4 w-full max-w-md">
+        <MaskedTextInput {...args} />
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const ZipCode = {
+  args: {
+    label: "ZIP Code",
+    mask: MASK_PATTERNS.ZIP_CODE,
+    fullwidth: true,
+  },
+  render: (args) => {
+    return (
+      <div className="flex flex-col gap-4 w-full max-w-md">
+        <MaskedTextInput {...args} />
+        <MaskedTextInput
+          {...args}
+          label="ZIP Code + 4"
+          mask={MASK_PATTERNS.ZIP_CODE_EXT}
+        />
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const Currency = {
+  args: {
+    label: "Amount",
+    mask: MASK_PATTERNS.CURRENCY,
+    fullwidth: true,
+  },
+  render: (args) => {
+    return (
+      <div className="flex flex-col gap-4 w-full max-w-md">
+        <MaskedTextInput {...args} />
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const CustomMask = {
+  args: {
+    label: "Custom Pattern",
+    mask: "AAA-999-AAA",
+    fullwidth: true,
+  },
+  render: (args) => {
+    return (
+      <div className="flex flex-col gap-4 w-full max-w-md">
+        <MaskedTextInput {...args} />
+        <MaskedTextInput {...args} label="License Plate" mask="999-AAA" />
+        <MaskedTextInput {...args} label="Product Code" mask="AA-9999-AA" />
+        <MaskedTextInput {...args} label="Time" mask="00:00:00" />
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const MaskOptions = {
+  args: {
+    label: "Phone with Options",
+    mask: MASK_PATTERNS.PHONE,
+    fullwidth: true,
+  },
+  render: (args) => {
+    return (
+      <div className="flex flex-col gap-4 w-full max-w-md">
+        <MaskedTextInput
+          {...args}
+          label="With Guide"
+          guide={true}
+          showMask={true}
+        />
+        <MaskedTextInput
+          {...args}
+          label="Without Guide"
+          guide={false}
+          showMask={true}
+        />
+        <MaskedTextInput
+          {...args}
+          label="Custom Mask Char"
+          maskChar="*"
+          guide={true}
+          showMask={true}
+        />
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const WithCallbacks = {
+  args: {
+    label: "Phone with Callbacks",
+    mask: MASK_PATTERNS.PHONE,
+    fullwidth: true,
+  },
+  render: (args) => {
+    const [maskedValue, setMaskedValue] = useState("");
+    const [rawValue, setRawValue] = useState("");
+
+    return (
+      <div className="flex flex-col gap-4 w-full max-w-md">
+        <MaskedTextInput
+          {...args}
+          onChange={(e) => {
+            setMaskedValue(e.target.value);
+            setRawValue(e.target.value);
+          }}
+          onMaskedChange={(masked: string, raw: string) => {
+            setMaskedValue(masked);
+            setRawValue(raw);
+          }}
+        />
+        <div className="p-4 bg-gray-100 rounded">
+          <p>
+            <strong>Masked Value:</strong> {maskedValue}
+          </p>
+          <p>
+            <strong>Raw Value:</strong> {rawValue}
+          </p>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const AllPatterns = {
+  args: {
+    fullwidth: true,
+  },
+  render: (args) => {
+    return (
+      <div className="flex flex-col gap-4 w-full max-w-2xl">
+        <h3 className="text-lg font-semibold">All Mask Patterns</h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <MaskedTextInput {...args} label="Phone" mask={MASK_PATTERNS.PHONE} />
+          <MaskedTextInput
+            {...args}
+            label="International Phone"
+            mask={MASK_PATTERNS.PHONE_INTL}
+          />
+          <MaskedTextInput
+            {...args}
+            label="Credit Card"
+            mask={MASK_PATTERNS.CREDIT_CARD}
+          />
+          <MaskedTextInput {...args} label="Date" mask={MASK_PATTERNS.DATE} />
+          <MaskedTextInput {...args} label="Time" mask={MASK_PATTERNS.TIME} />
+          <MaskedTextInput {...args} label="SSN" mask={MASK_PATTERNS.SSN} />
+          <MaskedTextInput
+            {...args}
+            label="ZIP Code"
+            mask={MASK_PATTERNS.ZIP_CODE}
+          />
+          <MaskedTextInput
+            {...args}
+            label="ZIP Code + 4"
+            mask={MASK_PATTERNS.ZIP_CODE_EXT}
+          />
+          <MaskedTextInput
+            {...args}
+            label="Currency"
+            mask={MASK_PATTERNS.CURRENCY}
+          />
+          <MaskedTextInput
+            {...args}
+            label="Percentage"
+            mask={MASK_PATTERNS.PERCENTAGE}
+          />
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const KendoRules = {
+  args: {
+    label: "Kendo UI Rules",
+    fullwidth: true,
+  },
+  render: (args) => {
+    return (
+      <div className="flex flex-col gap-4 w-full max-w-md">
+        <h3 className="text-sm font-semibold text-gray-700">
+          Kendo UI Mask Rules Examples
+        </h3>
+        <MaskedTextInput
+          {...args}
+          label="Rule: 0 (Digits Only)"
+          mask="000-000-0000"
+          helperText="0 = Required digit (0-9)"
+        />
+        <MaskedTextInput
+          {...args}
+          label="Rule: L (Letters Only)"
+          mask="LLL-LLLL"
+          helperText="L = Required letter (a-z, A-Z)"
+        />
+        <MaskedTextInput
+          {...args}
+          label="Rule: A (Alphanumeric)"
+          mask="AAAA-0000"
+          helperText="A = Letter or digit"
+        />
+        <MaskedTextInput
+          {...args}
+          label="Rule: # (Number with sign)"
+          mask="###"
+          helperText="# = Digit, space, + or -"
+        />
+        <MaskedTextInput
+          {...args}
+          label="Mixed Pattern Example"
+          mask="(000) LLL-0000"
+          helperText="Format: (123) ABC-4567"
+        />
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const OptionalRules = {
+  args: {
+    label: "Optional Rules (with space)",
+    fullwidth: true,
+  },
+  render: (args) => {
+    return (
+      <div className="flex flex-col gap-4 w-full max-w-md">
+        <h3 className="text-sm font-semibold text-gray-700">
+          Rules that accept space (optional input)
+        </h3>
+        <p className="text-xs text-gray-500">
+          Note: These rules allow space, making the position optional
+        </p>
+        <MaskedTextInput
+          {...args}
+          label="Rule: 9 (Digit or Space)"
+          mask="999-999-9999"
+          helperText="9 = Optional digit (press space to skip)"
+          guide={false}
+        />
+        <MaskedTextInput
+          {...args}
+          label="Rule: ? (Letter or Space)"
+          mask="???-????"
+          helperText="? = Optional letter (press space to skip)"
+          guide={false}
+        />
+        <MaskedTextInput
+          {...args}
+          label="Rule: a (Alphanumeric or Space)"
+          mask="aaaa-aaaa"
+          helperText="a = Optional alphanumeric (press space to skip)"
+          guide={false}
+        />
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const CustomRules = {
+  args: {
+    label: "Custom Rules",
+    fullwidth: true,
+  },
+  render: (args) => {
+    return (
+      <div className="flex flex-col gap-4 w-full max-w-md">
+        <h3 className="text-sm font-semibold text-gray-700">
+          Custom Validation Rules
+        </h3>
+        <div className="space-y-2">
+          <MaskedTextInput
+            {...args}
+            label="Custom Rule: Digits 3-9 only"
+            mask="~-~-~"
+            rules={{
+              "~": /[3-9]/,
+            }}
+            helperText="Type only digits 3, 4, 5, 6, 7, 8, or 9"
+          />
+        </div>
+        <div className="space-y-2">
+          <MaskedTextInput
+            {...args}
+            label="Custom Rule: Uppercase letters only"
+            mask="***"
+            rules={{
+              "*": (char: string) =>
+                char === char.toUpperCase() && /[A-Z]/.test(char),
+            }}
+            helperText="Type only uppercase letters (A-Z)"
+          />
+        </div>
+        <div className="space-y-2">
+          <MaskedTextInput
+            {...args}
+            label="Mixed Custom Rules"
+            mask="~*-~*"
+            rules={{
+              "~": /[0-9]/,
+              "*": /[A-Z]/,
+            }}
+            helperText="Format: Digit-Letter-Digit-Letter"
+          />
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;