@rovula/ui 0.0.76 → 0.0.78

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;