@k3-universe/react-kit 0.0.41 → 0.0.42

package/src/stories/kit/components/MonthRangePicker.stories.tsx

@@ -1,117 +1,117 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import * as React from 'react';
-import { MonthRangePicker } from '../../../kit/components/monthpicker/MonthRangePicker';
-
-const meta: Meta<typeof MonthRangePicker> = {
-  title: 'Kit/Components/MonthRangePicker',
-  component: MonthRangePicker,
-  parameters: {
-    controls: { expanded: true },
-    backgrounds: { disable: true },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof MonthRangePicker>;
-
-export const Basic: Story = {
-  name: 'Basic',
-  render: () => {
-    const [range, setRange] = React.useState<
-      { start: Date; end: Date } | undefined
-    >({
-      start: new Date(new Date().getFullYear(), 0),
-      end: new Date(new Date().getFullYear(), 11),
-    });
-
-    return (
-      <div className="p-6 space-y-4">
-        <div>
-          <div className="text-sm text-muted-foreground">Selected range</div>
-          <div className="font-medium">
-            {range
-              ? `${range.start.toLocaleString(undefined, { month: 'short', year: 'numeric' })} → ${range.end.toLocaleString(undefined, { month: 'short', year: 'numeric' })}`
-              : '—'}
-          </div>
-        </div>
-        <MonthRangePicker
-          selectedMonthRange={range}
-          onMonthRangeSelect={(r) => setRange(r)}
-        />
-      </div>
-    );
-  },
-};
-
-export const WithQuickSelectorsAndConstraints: Story = {
-  name: 'With quick selectors + constraints',
-  render: () => {
-    const [range, setRange] = React.useState<
-      { start: Date; end: Date } | undefined
-    >();
-
-    const now = new Date();
-    const minDate = new Date(now.getFullYear() - 1, 0); // Jan last year
-    const maxDate = new Date(now.getFullYear() + 1, 11); // Dec next year
-
-    const customSelectors = [
-      {
-        label: 'This year',
-        startMonth: new Date(now.getFullYear(), 0),
-        endMonth: new Date(now.getFullYear(), 11),
-      },
-      {
-        label: 'YTD',
-        startMonth: new Date(now.getFullYear(), 0),
-        endMonth: new Date(now.getFullYear(), now.getMonth()),
-      },
-      {
-        label: 'Last 6 months',
-        startMonth: new Date(
-          now.getFullYear(),
-          Math.max(0, now.getMonth() - 5),
-        ),
-        endMonth: new Date(now.getFullYear(), now.getMonth()),
-      },
-    ];
-
-    return (
-      <div className="p-6 space-y-4">
-        <div>
-          <div className="text-sm text-muted-foreground">Selected range</div>
-          <div className="font-medium">
-            {range
-              ? `${range.start.toLocaleString(undefined, { month: 'short', year: 'numeric' })} → ${range.end.toLocaleString(undefined, { month: 'short', year: 'numeric' })}`
-              : '—'}
-          </div>
-        </div>
-        <MonthRangePicker
-          selectedMonthRange={range}
-          onMonthRangeSelect={(r) => setRange(r)}
-          minDate={minDate}
-          maxDate={maxDate}
-          quickSelectors={customSelectors}
-          showQuickSelectors
-          callbacks={{ yearLabel: (y) => `${y}` }}
-          variant={{
-            calendar: { main: 'ghost', selected: 'default' },
-            chevrons: 'outline',
-          }}
-        />
-        <div className="text-xs text-muted-foreground">
-          Allowed:{' '}
-          {minDate.toLocaleString(undefined, {
-            month: 'short',
-            year: 'numeric',
-          })}{' '}
-          →{' '}
-          {maxDate.toLocaleString(undefined, {
-            month: 'short',
-            year: 'numeric',
-          })}
-        </div>
-      </div>
-    );
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import * as React from 'react';
+import { MonthRangePicker } from '../../../kit/components/monthpicker/MonthRangePicker';
+
+const meta: Meta<typeof MonthRangePicker> = {
+  title: 'Kit/Components/MonthRangePicker',
+  component: MonthRangePicker,
+  parameters: {
+    controls: { expanded: true },
+    backgrounds: { disable: true },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MonthRangePicker>;
+
+export const Basic: Story = {
+  name: 'Basic',
+  render: () => {
+    const [range, setRange] = React.useState<
+      { start: Date; end: Date } | undefined
+    >({
+      start: new Date(new Date().getFullYear(), 0),
+      end: new Date(new Date().getFullYear(), 11),
+    });
+
+    return (
+      <div className="p-6 space-y-4">
+        <div>
+          <div className="text-sm text-muted-foreground">Selected range</div>
+          <div className="font-medium">
+            {range
+              ? `${range.start.toLocaleString(undefined, { month: 'short', year: 'numeric' })} → ${range.end.toLocaleString(undefined, { month: 'short', year: 'numeric' })}`
+              : '—'}
+          </div>
+        </div>
+        <MonthRangePicker
+          selectedMonthRange={range}
+          onMonthRangeSelect={(r) => setRange(r)}
+        />
+      </div>
+    );
+  },
+};
+
+export const WithQuickSelectorsAndConstraints: Story = {
+  name: 'With quick selectors + constraints',
+  render: () => {
+    const [range, setRange] = React.useState<
+      { start: Date; end: Date } | undefined
+    >();
+
+    const now = new Date();
+    const minDate = new Date(now.getFullYear() - 1, 0); // Jan last year
+    const maxDate = new Date(now.getFullYear() + 1, 11); // Dec next year
+
+    const customSelectors = [
+      {
+        label: 'This year',
+        startMonth: new Date(now.getFullYear(), 0),
+        endMonth: new Date(now.getFullYear(), 11),
+      },
+      {
+        label: 'YTD',
+        startMonth: new Date(now.getFullYear(), 0),
+        endMonth: new Date(now.getFullYear(), now.getMonth()),
+      },
+      {
+        label: 'Last 6 months',
+        startMonth: new Date(
+          now.getFullYear(),
+          Math.max(0, now.getMonth() - 5),
+        ),
+        endMonth: new Date(now.getFullYear(), now.getMonth()),
+      },
+    ];
+
+    return (
+      <div className="p-6 space-y-4">
+        <div>
+          <div className="text-sm text-muted-foreground">Selected range</div>
+          <div className="font-medium">
+            {range
+              ? `${range.start.toLocaleString(undefined, { month: 'short', year: 'numeric' })} → ${range.end.toLocaleString(undefined, { month: 'short', year: 'numeric' })}`
+              : '—'}
+          </div>
+        </div>
+        <MonthRangePicker
+          selectedMonthRange={range}
+          onMonthRangeSelect={(r) => setRange(r)}
+          minDate={minDate}
+          maxDate={maxDate}
+          quickSelectors={customSelectors}
+          showQuickSelectors
+          callbacks={{ yearLabel: (y) => `${y}` }}
+          variant={{
+            calendar: { main: 'ghost', selected: 'default' },
+            chevrons: 'outline',
+          }}
+        />
+        <div className="text-xs text-muted-foreground">
+          Allowed:{' '}
+          {minDate.toLocaleString(undefined, {
+            month: 'short',
+            year: 'numeric',
+          })}{' '}
+          →{' '}
+          {maxDate.toLocaleString(undefined, {
+            month: 'short',
+            year: 'numeric',
+          })}
+        </div>
+      </div>
+    );
+  },
+};

package/src/stories/kit/components/Numpad.stories.tsx

@@ -1,195 +1,195 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import * as React from "react";
-import { Numpad } from "../../../kit/components/numpad/Numpad";
-import { Input } from "../../../shadcn/ui/input";
-
-const meta: Meta<typeof Numpad> = {
-  title: "Kit/Components/Numpad",
-  component: Numpad,
-  parameters: {
-    controls: { expanded: true },
-    backgrounds: { disable: true },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Numpad>;
-
-export const FullNumpad: Story = {
-  name: "Full Numpad",
-  render: (args) => {
-    const [value, setValue] = React.useState("");
-    const inputRef = React.useRef<HTMLInputElement>(null);
-
-    return (
-      <div className="p-6 space-y-4">
-        <div>
-          <div className="text-sm text-muted-foreground mb-2">Amount</div>
-          <Input
-            ref={inputRef}
-            type="text"
-            value={value ? Number(value).toLocaleString("id-ID") : ""}
-            onChange={(e) => {
-              const numValue = (e.target as any).value.replace(/[^\d]/g, "");
-              setValue(numValue);
-            }}
-            placeholder="0"
-            className="text-2xl font-bold text-right"
-          />
-        </div>
-        <Numpad
-          {...args}
-          value={value}
-          onChange={setValue}
-          inputRef={inputRef}
-          allowDoubleZero
-          showBackspaceButton
-          showSubmitButton
-          showClearButton
-        />
-      </div>
-    );
-  },
-};
-
-export const Disabled: Story = {
-  name: "Disabled",
-  render: (args) => {
-    const [value, setValue] = React.useState("12345");
-
-    return (
-      <div className="p-6 space-y-4">
-        <div>
-          <div className="text-sm text-muted-foreground mb-2">Amount</div>
-          <Input
-            type="text"
-            value={value ? Number(value).toLocaleString("id-ID") : ""}
-            onChange={(e) => {
-              const numValue = (e.target as any).value.replace(/[^\d]/g, "");
-              setValue(numValue);
-            }}
-            placeholder="0"
-            disabled
-            className="text-lg font-medium"
-          />
-        </div>
-        <Numpad
-          {...args}
-          value={value}
-          onChange={setValue}
-          showSubmitButton
-          disabled
-        />
-      </div>
-    );
-  },
-};
-
-export const CustomStyling: Story = {
-  name: "Custom Styling",
-  render: (args) => {
-    const [value, setValue] = React.useState("");
-
-    return (
-      <div className="p-6 space-y-4">
-        <div>
-          <div className="text-sm text-muted-foreground mb-2">Amount</div>
-          <Input
-            type="text"
-            value={value ? Number(value).toLocaleString("id-ID") : ""}
-            onChange={(e) => {
-              const numValue = (e.target as any).value.replace(/[^\d]/g, "");
-              setValue(numValue);
-            }}
-            placeholder="0"
-            className="text-lg font-medium"
-          />
-        </div>
-        <Numpad
-          {...args}
-          value={value}
-          onChange={setValue}
-          allowDoubleZero
-          customKeyStyle={{ width: "90px", height: "90px" }}
-          customKeyClassName="text-3xl font-bold"
-          showSubmitButton
-          customSubmitStyle={{ width: "90px" }}
-        />
-      </div>
-    );
-  },
-};
-
-export const MultipleInputs: Story = {
-  name: "Multiple Inputs (Focused)",
-  render: (args) => {
-    const [value1, setValue1] = React.useState("");
-    const [value2, setValue2] = React.useState("");
-    const [focusedInput, setFocusedInput] = React.useState<"input1" | "input2">("input1");
-    
-    const input1Ref = React.useRef<HTMLInputElement>(null);
-    const input2Ref = React.useRef<HTMLInputElement>(null);
-    
-    const refs = {
-      input1: input1Ref,
-      input2: input2Ref,
-    };
-
-    const currentValue = focusedInput === "input1" ? value1 : value2;
-    const setCurrentValue = focusedInput === "input1" ? setValue1 : setValue2;
-
-    return (
-      <div className="p-6 space-y-4">
-        <div className="space-y-2">
-          <div>
-            <div className="text-sm text-muted-foreground mb-2">Amount 1</div>
-            <Input
-              ref={input1Ref}
-              type="text"
-              value={value1 ? Number(value1).toLocaleString("id-ID") : ""}
-              onChange={(e) => {
-                const numValue = (e.target as any).value.replace(/[^\d]/g, "");
-                setValue1(numValue);
-              }}
-              placeholder="0"
-              className="text-lg font-medium"
-              onFocus={() => setFocusedInput("input1")}
-            />
-            {focusedInput === "input1" && (
-              <div className="text-xs text-teal-600 mt-1">✓ Connected</div>
-            )}
-          </div>
-          <div>
-            <div className="text-sm text-muted-foreground mb-2">Amount 2</div>
-            <Input
-              ref={input2Ref}
-              type="text"
-              value={value2 ? Number(value2).toLocaleString("id-ID") : ""}
-              onChange={(e) => {
-                const numValue = (e.target as any).value.replace(/[^\d]/g, "");
-                setValue2(numValue);
-              }}
-              placeholder="0"
-              className="text-lg font-medium"
-              onFocus={() => setFocusedInput("input2")}
-            />
-            {focusedInput === "input2" && (
-              <div className="text-xs text-teal-600 mt-1">✓ Connected</div>
-            )}
-          </div>
-        </div>
-        <Numpad
-          {...args}
-          value={currentValue}
-          onChange={setCurrentValue}
-          inputRef={refs[focusedInput]}
-          allowDoubleZero
-          showBackspaceButton
-          showClearButton
-          showSubmitButton
-        />
-      </div>
-    );
-  },
-};
+import type { Meta, StoryObj } from "@storybook/react";
+import * as React from "react";
+import { Numpad } from "../../../kit/components/numpad/Numpad";
+import { Input } from "../../../shadcn/ui/input";
+
+const meta: Meta<typeof Numpad> = {
+  title: "Kit/Components/Numpad",
+  component: Numpad,
+  parameters: {
+    controls: { expanded: true },
+    backgrounds: { disable: true },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Numpad>;
+
+export const FullNumpad: Story = {
+  name: "Full Numpad",
+  render: (args) => {
+    const [value, setValue] = React.useState("");
+    const inputRef = React.useRef<HTMLInputElement>(null);
+
+    return (
+      <div className="p-6 space-y-4">
+        <div>
+          <div className="text-sm text-muted-foreground mb-2">Amount</div>
+          <Input
+            ref={inputRef}
+            type="text"
+            value={value ? Number(value).toLocaleString("id-ID") : ""}
+            onChange={(e) => {
+              const numValue = (e.target as any).value.replace(/[^\d]/g, "");
+              setValue(numValue);
+            }}
+            placeholder="0"
+            className="text-2xl font-bold text-right"
+          />
+        </div>
+        <Numpad
+          {...args}
+          value={value}
+          onChange={setValue}
+          inputRef={inputRef}
+          allowDoubleZero
+          showBackspaceButton
+          showSubmitButton
+          showClearButton
+        />
+      </div>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  name: "Disabled",
+  render: (args) => {
+    const [value, setValue] = React.useState("12345");
+
+    return (
+      <div className="p-6 space-y-4">
+        <div>
+          <div className="text-sm text-muted-foreground mb-2">Amount</div>
+          <Input
+            type="text"
+            value={value ? Number(value).toLocaleString("id-ID") : ""}
+            onChange={(e) => {
+              const numValue = (e.target as any).value.replace(/[^\d]/g, "");
+              setValue(numValue);
+            }}
+            placeholder="0"
+            disabled
+            className="text-lg font-medium"
+          />
+        </div>
+        <Numpad
+          {...args}
+          value={value}
+          onChange={setValue}
+          showSubmitButton
+          disabled
+        />
+      </div>
+    );
+  },
+};
+
+export const CustomStyling: Story = {
+  name: "Custom Styling",
+  render: (args) => {
+    const [value, setValue] = React.useState("");
+
+    return (
+      <div className="p-6 space-y-4">
+        <div>
+          <div className="text-sm text-muted-foreground mb-2">Amount</div>
+          <Input
+            type="text"
+            value={value ? Number(value).toLocaleString("id-ID") : ""}
+            onChange={(e) => {
+              const numValue = (e.target as any).value.replace(/[^\d]/g, "");
+              setValue(numValue);
+            }}
+            placeholder="0"
+            className="text-lg font-medium"
+          />
+        </div>
+        <Numpad
+          {...args}
+          value={value}
+          onChange={setValue}
+          allowDoubleZero
+          customKeyStyle={{ width: "90px", height: "90px" }}
+          customKeyClassName="text-3xl font-bold"
+          showSubmitButton
+          customSubmitStyle={{ width: "90px" }}
+        />
+      </div>
+    );
+  },
+};
+
+export const MultipleInputs: Story = {
+  name: "Multiple Inputs (Focused)",
+  render: (args) => {
+    const [value1, setValue1] = React.useState("");
+    const [value2, setValue2] = React.useState("");
+    const [focusedInput, setFocusedInput] = React.useState<"input1" | "input2">("input1");
+    
+    const input1Ref = React.useRef<HTMLInputElement>(null);
+    const input2Ref = React.useRef<HTMLInputElement>(null);
+    
+    const refs = {
+      input1: input1Ref,
+      input2: input2Ref,
+    };
+
+    const currentValue = focusedInput === "input1" ? value1 : value2;
+    const setCurrentValue = focusedInput === "input1" ? setValue1 : setValue2;
+
+    return (
+      <div className="p-6 space-y-4">
+        <div className="space-y-2">
+          <div>
+            <div className="text-sm text-muted-foreground mb-2">Amount 1</div>
+            <Input
+              ref={input1Ref}
+              type="text"
+              value={value1 ? Number(value1).toLocaleString("id-ID") : ""}
+              onChange={(e) => {
+                const numValue = (e.target as any).value.replace(/[^\d]/g, "");
+                setValue1(numValue);
+              }}
+              placeholder="0"
+              className="text-lg font-medium"
+              onFocus={() => setFocusedInput("input1")}
+            />
+            {focusedInput === "input1" && (
+              <div className="text-xs text-teal-600 mt-1">✓ Connected</div>
+            )}
+          </div>
+          <div>
+            <div className="text-sm text-muted-foreground mb-2">Amount 2</div>
+            <Input
+              ref={input2Ref}
+              type="text"
+              value={value2 ? Number(value2).toLocaleString("id-ID") : ""}
+              onChange={(e) => {
+                const numValue = (e.target as any).value.replace(/[^\d]/g, "");
+                setValue2(numValue);
+              }}
+              placeholder="0"
+              className="text-lg font-medium"
+              onFocus={() => setFocusedInput("input2")}
+            />
+            {focusedInput === "input2" && (
+              <div className="text-xs text-teal-600 mt-1">✓ Connected</div>
+            )}
+          </div>
+        </div>
+        <Numpad
+          {...args}
+          value={currentValue}
+          onChange={setCurrentValue}
+          inputRef={refs[focusedInput]}
+          allowDoubleZero
+          showBackspaceButton
+          showClearButton
+          showSubmitButton
+        />
+      </div>
+    );
+  },
+};