@rovula/ui 0.0.76 → 0.0.78

package/src/components/NumberInput/NumberInput.stories.tsx

@@ -0,0 +1,350 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { NumberInput, type NumberInputProps } from "@/index";
+
+const meta: Meta<typeof NumberInput> = {
+  title: "Components/NumberInput",
+  component: NumberInput,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex h-screen w-full bg-base-bg2">
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    size: {
+      control: { type: "radio" },
+      options: ["sm", "md", "lg"],
+    },
+    rounded: {
+      control: { type: "radio" },
+      options: ["none", "normal", "full"],
+    },
+    variant: {
+      control: { type: "radio" },
+      options: ["flat", "outline", "underline"],
+    },
+    isFloatingLabel: { control: "boolean" },
+    fullwidth: { control: "boolean" },
+    disabled: { control: "boolean" },
+    error: { control: "boolean" },
+    required: { control: "boolean" },
+    hideControls: { control: "boolean" },
+    allowDecimal: { control: "boolean" },
+    allowNegative: { control: "boolean" },
+  },
+  args: {
+    label: "Number",
+    placeholder: "Enter a number",
+    size: "md",
+    rounded: "normal",
+    variant: "outline",
+    isFloatingLabel: true,
+    fullwidth: true,
+    disabled: false,
+    error: false,
+    required: true,
+    hideControls: false,
+    allowDecimal: true,
+    allowNegative: true,
+  } satisfies Partial<NumberInputProps>,
+};
+
+export default meta;
+type Story = StoryObj<typeof NumberInput>;
+
+export const Default: Story = {
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <NumberInput id="1" {...props} size="lg" />
+        <NumberInput id="2" {...props} size="md" />
+        <NumberInput id="3" {...props} size="sm" />
+      </div>
+    );
+  },
+};
+
+export const WithMinMax: Story = {
+  args: {
+    label: "Age",
+    min: 0,
+    max: 120,
+    helperText: "Age must be between 0 and 120",
+  },
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+    };
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <NumberInput id="1" {...props} size="lg" />
+        <NumberInput id="2" {...props} size="md" />
+        <NumberInput id="3" {...props} size="sm" />
+      </div>
+    );
+  },
+};
+
+export const WithStep: Story = {
+  args: {
+    label: "Rating",
+    min: 0,
+    max: 5,
+    step: 0.5,
+    defaultValue: 2.5,
+    helperText: "Use 0.5 increments",
+  },
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+    };
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <NumberInput id="1" {...props} size="lg" />
+        <NumberInput id="2" {...props} size="md" />
+        <NumberInput id="3" {...props} size="sm" />
+      </div>
+    );
+  },
+};
+
+export const IntegerOnly: Story = {
+  args: {
+    label: "Quantity",
+    allowDecimal: false,
+    min: 1,
+    defaultValue: 1,
+    helperText: "Integer values only",
+  },
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+    };
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <NumberInput id="1" {...props} size="lg" />
+        <NumberInput id="2" {...props} size="md" />
+        <NumberInput id="3" {...props} size="sm" />
+      </div>
+    );
+  },
+};
+
+export const ControllWithOutLine: Story = {
+  args: {
+    label: "Quantity",
+    allowDecimal: false,
+    iconMode: "flat",
+    min: 1,
+    defaultValue: 1,
+    helperText: "Integer values only",
+  },
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+    };
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <NumberInput id="1" {...props} size="lg" />
+        <NumberInput id="2" {...props} size="md" />
+        <NumberInput id="3" {...props} size="sm" />
+      </div>
+    );
+  },
+};
+
+export const WithoutControls: Story = {
+  args: {
+    label: "Custom Number",
+    hideControls: true,
+    helperText: "No increment/decrement buttons",
+  },
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+    };
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <NumberInput id="1" {...props} size="lg" />
+        <NumberInput id="2" {...props} size="md" />
+        <NumberInput id="3" {...props} size="sm" />
+      </div>
+    );
+  },
+};
+
+export const ErrorState: Story = {
+  args: {
+    error: true,
+    errorMessage: "Value exceeds maximum allowed",
+    defaultValue: 150,
+  },
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+    };
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <NumberInput id="1" {...props} size="lg" />
+        <NumberInput id="2" {...props} size="md" />
+        <NumberInput id="3" {...props} size="sm" />
+      </div>
+    );
+  },
+};
+
+export const HelperText: Story = {
+  args: {
+    helperText: "Enter a number between 0 and 100",
+    min: 0,
+    max: 100,
+  },
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+    };
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <NumberInput id="1" {...props} size="lg" />
+        <NumberInput id="2" {...props} size="md" />
+        <NumberInput id="3" {...props} size="sm" />
+      </div>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    defaultValue: 50,
+  },
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+    };
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <NumberInput id="1" {...props} size="lg" />
+        <NumberInput id="2" {...props} size="md" />
+        <NumberInput id="3" {...props} size="sm" />
+      </div>
+    );
+  },
+};
+
+export const FormattedNumber: Story = {
+  args: {
+    label: "Amount",
+    formatDisplay: true,
+    precision: 2,
+    defaultValue: 1234567.89,
+    helperText: "Number with thousand separator",
+  },
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+    };
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <NumberInput id="1" {...props} size="lg" />
+        <NumberInput id="2" {...props} size="md" />
+        <NumberInput id="3" {...props} size="sm" />
+      </div>
+    );
+  },
+};
+
+export const CurrencyFormat: Story = {
+  args: {
+    label: "Price",
+    formatDisplay: true,
+    precision: 2,
+    prefix: "$",
+    defaultValue: 1230.0,
+    min: 0,
+    helperText: "Currency format with $ prefix",
+  },
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+    };
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <NumberInput id="1" {...props} size="lg" />
+        <NumberInput id="2" {...props} size="md" />
+        <NumberInput id="3" {...props} size="sm" />
+      </div>
+    );
+  },
+};
+
+export const CurrencyThailand: Story = {
+  args: {
+    label: "ราคา",
+    formatDisplay: true,
+    precision: 2,
+    suffix: " ฿",
+    defaultValue: 15000.5,
+    min: 0,
+    helperText: "Thai Baht format",
+  },
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+    };
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <NumberInput id="1" {...props} size="lg" />
+        <NumberInput id="2" {...props} size="md" />
+        <NumberInput id="3" {...props} size="sm" />
+      </div>
+    );
+  },
+};
+
+export const CustomSeparators: Story = {
+  args: {
+    label: "European Format",
+    formatDisplay: true,
+    precision: 2,
+    thousandSeparator: ".",
+    decimalSeparator: ",",
+    defaultValue: 9999.99,
+    helperText: "European number format (9.999,99)",
+  },
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+    };
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <NumberInput id="1" {...props} size="lg" />
+        <NumberInput id="2" {...props} size="md" />
+        <NumberInput id="3" {...props} size="sm" />
+      </div>
+    );
+  },
+};