@customafk/lunas-ui 0.0.21 → 0.0.23

package/packages/stories/2.Colors.mdx

@@ -0,0 +1,145 @@
+import { Meta, Title, Subtitle, Description, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks'
+
+<Meta title="Colors" />
+
+<Title>Color Palette</Title>
+<Subtitle>Design System Colors</Subtitle>
+
+<ColorPalette>
+  <ColorItem title="background" colors={{ white: '#ffffff' }} />
+  <ColorItem title="foreground" colors={{ default: 'oklch(14% 0 0)' }} />
+  <ColorItem title="card" colors={{ white: '#ffffff' }} />
+  <ColorItem title="card-foreground" colors={{ default: 'oklch(14% 0 286)' }} />
+  <ColorItem title="popover" colors={{ white: '#ffffff' }} />
+  <ColorItem title="popover-foreground" colors={{ default: 'oklch(14% 0 286)' }} />
+  <ColorItem
+    title="primary"
+    colors={{
+      muted: 'oklch(0.94 0.03 295)',
+      weak: 'oklch(0.81 0.1 294)',
+      default: 'oklch(0.61 0.22 293)',
+      strong: 'oklch(0.49 0.24 293)',
+      intense: 'oklch(0.38 0.18 294)',
+    }}
+  />
+  <ColorItem
+    title="secondary"
+    colors={{
+      muted: 'oklch(0.97 0 265)',
+      weak: 'oklch(0.87 0.01 258)',
+      default: 'oklch(0.55 0.02 264)',
+      strong: 'oklch(0.28 0.03 257)',
+      intense: 'oklch(0.13 0.03 262)',
+    }}
+  />
+  <ColorItem
+    title="muted"
+    colors={{
+      muted: 'oklch(0.97 0 286)',
+      weak: 'oklch(0.87 0.01 286)',
+      default: 'oklch(0.55 0.01 286)',
+      strong: 'oklch(0.37 0.01 286)',
+      intense: 'oklch(0.21 0.01 286)',
+    }}
+  />
+  <ColorItem
+    title="accent"
+    colors={{
+      muted: 'oklch(0.97 0.01 248)',
+      weak: 'oklch(0.87 0.02 253)',
+      default: 'oklch(0.55 0.04 257)',
+      strong: 'oklch(0.37 0.04 257)',
+      intense: 'oklch(0.21 0.04 266)',
+    }}
+  />
+  <ColorItem
+    title="info"
+    colors={{
+      muted: 'oklch(0.93 0.03 256)',
+      weak: 'oklch(0.81 0.1 252)',
+      default: 'oklch(0.62 0.19 260)',
+      strong: 'oklch(0.49 0.22 264)',
+      intense: 'oklch(0.38 0.14 266)',
+    }}
+  />
+  <ColorItem
+    title="success"
+    colors={{
+      muted: 'oklch(0.96 0.04 157)',
+      weak: 'oklch(0.8 0.18 152)',
+      default: 'oklch(0.72 0.19 150)',
+      strong: 'oklch(0.63 0.17 149)',
+      intense: 'oklch(0.53 0.14 150)',
+    }}
+  />
+  <ColorItem
+    title="warning"
+    colors={{
+      muted: 'oklch(0.96 0.06 96)',
+      weak: 'oklch(0.84 0.16 84)',
+      default: 'oklch(0.77 0.16 70)',
+      strong: 'oklch(0.67 0.16 58)',
+      intense: 'oklch(0.56 0.15 49)',
+    }}
+  />
+  <ColorItem
+    title="danger"
+    colors={{
+      muted: 'oklch(0.94 0.03 18)',
+      weak: 'oklch(0.71 0.17 22)',
+      default: 'oklch(0.64 0.21 25)',
+      strong: 'oklch(0.58 0.22 27)',
+      intense: 'oklch(0.51 0.19 28)',
+    }}
+  />
+  <ColorItem
+    title="text-positive"
+    colors={{
+      muted: 'oklch(0.87 0.01 286)',
+      weak: 'oklch(0.55 0.01 286)',
+      default: 'oklch(0.27 0.01 286)',
+      strong: 'oklch(0.21 0.01 286)',
+      intense: 'oklch(0 0 0)',
+    }}
+  />
+  <ColorItem
+    title="text-negative"
+    colors={{
+      muted: 'oklch(0.55 0.01 286)',
+      weak: 'oklch(0.87 0.01 286)',
+      default: 'oklch(0.99 0 0)',
+      strong: 'oklch(0.99 0 0)',
+      intense: 'oklch(1 0 0)',
+    }}
+  />
+  <ColorItem
+    title="border"
+    colors={{
+      muted: 'oklch(0.99 0 0)',
+      weak: 'oklch(0.92 0 0)',
+      default: 'oklch(0.72 0 0)',
+      strong: 'oklch(0.37 0 0)',
+      intense: 'oklch(0.14 0 0)',
+    }}
+  />
+  <ColorItem title="input" colors={{ default: 'oklch(0.871 0.006 286.286)' }} />
+  <ColorItem title="ring" colors={{ default: 'oklch(0.81 0.1 294)' }} />
+  <ColorItem
+    title="chart"
+    colors={{
+      1: 'oklch(0.646 0.222 41.116)',
+      2: 'oklch(0.6 0.118 184.704)',
+      3: 'oklch(0.398 0.07 227.392)',
+      4: 'oklch(0.828 0.189 84.429)',
+      5: 'oklch(0.769 0.188 70.08)',
+    }}
+  />
+  <ColorItem title="sidebar" colors={{ default: 'oklch(0.97 0 286)' }} />
+  <ColorItem title="sidebar-foreground" colors={{ default: 'oklch(0.28 0.04 260.03)' }} />
+  <ColorItem title="sidebar-border" colors={{ default: 'oklch(0.92 0.004 286.32)' }} />
+  <ColorItem title="sidebar-ring" colors={{ default: 'oklch(0.871 0.006 286.286)' }} />
+  <ColorItem title="sidebar-primary" colors={{ default: 'oklch(0.59 0.2 277.12)' }} />
+  <ColorItem title="sidebar-primary-foreground" colors={{ default: 'oklch(1 0 0)' }} />
+  <ColorItem title="sidebar-accent" colors={{ default: 'oklch(0.967 0.001 286.375)' }} />
+  <ColorItem title="sidebar-accent-foreground" colors={{ default: 'oklch(0.21 0.006 285.885)' }} />
+</ColorPalette>

package/packages/stories/3.Pypography.mdx

@@ -0,0 +1,51 @@
+import { Meta, Typeset } from '@storybook/addon-docs/blocks';
+
+<Meta title="Typography" />
+
+export const typography = {
+  type: {
+    primary: '"Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif',
+  },
+  weight: {
+    regular: '400',
+    bold: '700',
+    extrabold: '800',
+    black: '900',
+  },
+  size: {
+    s1: 12,
+    s2: 14,
+    s3: 16,
+    m1: 20,
+    m2: 24,
+    m3: 28,
+    l1: 32,
+    l2: 40,
+    l3: 48,
+  },
+};
+
+export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+
+# Typography
+
+**Font:** Nunito Sans
+
+**Weights:** 400(regular), 700(bold), 800(extrabold), 900(black)
+
+<Typeset
+  fontSizes={[
+    Number(typography.size.s1),
+    Number(typography.size.s2),
+    Number(typography.size.s3),
+    Number(typography.size.m1),
+    Number(typography.size.m2),
+    Number(typography.size.m3),
+    Number(typography.size.l1),
+    Number(typography.size.l2),
+    Number(typography.size.l3),
+  ]}
+  fontWeight={typography.weight.black}
+  sampleText={SampleText}
+  fontFamily={typography.type.primary}
+/>

package/packages/stories/cards/simple-card.stories.tsx

@@ -0,0 +1,24 @@
+import { SimpleCard } from '@/components/cards/simple-card'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  tags: ['autodocs'],
+  title: 'Cards/SimpleCard',
+  component: SimpleCard,
+} satisfies Meta<typeof SimpleCard>
+
+export default meta
+type Story = StoryObj<typeof SimpleCard>
+
+export const Default: Story = {
+  args: {
+    title: 'Card Title',
+    description: 'This is a simple card description.',
+    children: (
+      <div>
+        <p>This is the content of the card.</p>
+        <p>You can put any React elements here.</p>
+      </div>
+    ),
+  },
+}

package/packages/stories/data-display/data-list.stories.tsx

@@ -0,0 +1,22 @@
+import { DataList, DataListItem } from '@/components/data-display/data-list'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  tags: ['autodocs'],
+  title: 'Data Display/Data List',
+  component: DataList,
+} satisfies Meta<typeof DataList>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <DataList title="Product Details">
+      <DataListItem label="Name" value="Sample Product" />
+      <DataListItem label="Description" value="This is a sample product description." />
+      <DataListItem label="Price" value="$19.99" />
+      <DataListItem label="Stock" value={100} />
+    </DataList>
+  ),
+}

package/packages/stories/data-display/empty.stories.tsx

@@ -0,0 +1,13 @@
+import { EmptyDisplay } from '@/components/data-display/empty'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  tags: ['autodocs'],
+  title: 'Data Display/Empty',
+  component: EmptyDisplay,
+} satisfies Meta<typeof EmptyDisplay>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

package/packages/stories/data-display/form-dialog.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { FormDialog } from '@/components/dialogs/form-dialog'
+
+const meta = {
+  tags: ['autodocs'],
+  title: 'Dialogs/FormDialog',
+  component: FormDialog,
+} satisfies Meta<typeof FormDialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    form: {
+      defaultValues: {},
+    },
+    open: false,
+    onOpenChange: (open: boolean) => {
+      console.log('Dialog open state changed:', open)
+    },
+    onSubmit: (data) => {
+      console.log('Form submitted with data:', data)
+    },
+    children: <div className="flex h-10 items-center justify-center">Content</div>,
+  },
+}

package/packages/stories/data-display/name.stories.tsx

@@ -0,0 +1,25 @@
+import { NameDisplay } from '@/components/data-display/name'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  tags: ['autodocs'],
+  title: 'Data Display/Name Display',
+  component: NameDisplay,
+} satisfies Meta<typeof NameDisplay>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    name: 'John Doe',
+  },
+  render: (args) => <NameDisplay {...args} />,
+}
+
+export const LongName: Story = {
+  args: {
+    name: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+  },
+  render: (args) => <NameDisplay {...args} />,
+}

package/packages/stories/data-display/phone-number.stories.tsx

@@ -0,0 +1,17 @@
+import { PhoneNumberDisplay } from '@/components/data-display/phone-number'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  tags: ['autodocs'],
+  title: 'Data Display/Phone Number',
+  component: PhoneNumberDisplay,
+} satisfies Meta<typeof PhoneNumberDisplay>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    value: '1234567890',
+  },
+}

package/packages/stories/data-display/statistic.stories.tsx

@@ -0,0 +1,41 @@
+import { Statistic } from '@/components/data-display/statistic'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  tags: ['autodocs'],
+  title: 'Data Display/Statistic',
+  component: Statistic,
+} satisfies Meta<typeof Statistic>
+
+export default meta
+type Story = StoryObj<typeof Statistic>
+
+export const Default: Story = {
+  args: {
+    value: 1234567.123,
+  },
+}
+
+export const WithPrefixAndSuffix: Story = {
+  args: {
+    value: 1234567.123,
+    prefix: '$',
+    suffix: 'USD',
+  },
+}
+
+export const WithRounding: Story = {
+  args: {
+    value: 1234.56789,
+    precision: 2,
+    roundingMode: 'floor',
+  },
+}
+
+export const WithCustomDecimalAndGroupSeparators: Story = {
+  args: {
+    value: 1234.5,
+    precision: 2,
+    showTrailingZeros: true,
+  },
+}

package/packages/stories/dialogs/confirm-dialog.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { ConfirmDialog } from '@/components/dialogs/confirm-dialog'
+
+const meta = {
+  tags: ['autodocs'],
+  title: 'Dialogs/ConfirmDialog',
+  component: ConfirmDialog,
+} satisfies Meta<typeof ConfirmDialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    open: false,
+    isLoading: false,
+    title: 'Confirm Action',
+    description: 'Are you sure you want to proceed with this action?',
+    onOpenChange: (open) => console.log('Dialog open state:', open),
+  },
+  render: (args) => (
+    <ConfirmDialog {...args}>
+      <p>This is a custom content inside the dialog.</p>
+    </ConfirmDialog>
+  ),
+}

package/packages/stories/dialogs/detail-dialog.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { DetailDialog } from '@/components/dialogs/detail-dialog'
+
+const meta = {
+  tags: ['autodocs'],
+  title: 'Dialogs/DetailDialog',
+  component: DetailDialog,
+} satisfies Meta<typeof DetailDialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    open: true,
+    isLoading: false,
+    sidebar: (
+      <div className="p-4">
+        <h2 className="text-lg font-semibold">Sidebar Content</h2>
+        <p>This is some content in the sidebar.</p>
+      </div>
+    ),
+    title: 'Detail Dialog Title',
+    sidebarTitle: 'Sidebar Title',
+    createdAt: new Date(),
+    onOpenChange: (open: boolean) => console.log('Dialog open state changed:', open),
+    children: (
+      <>
+        <p className="p-4">This is the content of the detail dialog.</p>
+        <p className="p-4">You can add more content here as needed.</p>
+      </>
+    ),
+  },
+}

package/packages/stories/dialogs/error-dialog.stories.tsx

@@ -0,0 +1,27 @@
+import { ErrorDialog } from '@/components/dialogs/error-dialog'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  tags: ['autodocs'],
+  title: 'Dialogs/ErrorDialog',
+  component: ErrorDialog,
+} satisfies Meta<typeof ErrorDialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    open: false,
+    title: 'An error occurred',
+    description: 'An unexpected error has occurred. Please try again later.',
+    children: <p className="text-muted-foreground text-sm">If the problem persists, please contact support or check the system status for more information.</p>,
+  },
+  render: (args) => {
+    return (
+      <div className="grid w-full max-w-xl items-start gap-4">
+        <ErrorDialog {...args} />
+      </div>
+    )
+  },
+}

package/packages/stories/dialogs/loading-dialog.stories.tsx

@@ -0,0 +1,16 @@
+import { LoadingDialog } from '@/components/dialogs/loading-dialog'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Dialogs/LoadingDialog',
+  component: LoadingDialog,
+  tags: ['autodocs'],
+} satisfies Meta<typeof LoadingDialog>
+export default meta
+
+type Story = StoryObj<typeof meta>
+export const Default: Story = {
+  args: {
+    open: true,
+  },
+}

package/packages/stories/forms/combobox-field.stories.tsx

@@ -0,0 +1,38 @@
+import { useForm } from 'react-hook-form'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { ComboboxField } from '@/components/forms/combobox-field'
+import { Form } from '@/components/ui/form'
+
+const meta = {
+  tags: ['autodocs'],
+  title: 'Forms/ComboboxField',
+  component: ComboboxField,
+} satisfies Meta<typeof ComboboxField>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    name: 'combobox',
+    options: [
+      { value: 'option1', label: 'Option 1' },
+      { value: 'option2', label: 'Option 2' },
+      { value: 'option3', label: 'Option 3' },
+    ],
+  },
+  render: (args) => {
+    const form = useForm({
+      defaultValues: {
+        combobox: '',
+      },
+    })
+    return (
+      <div className="w-80">
+        <Form {...form}>
+          <ComboboxField {...args} />
+        </Form>
+      </div>
+    )
+  },
+}

package/packages/stories/forms/form-wrapper.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { FormWrapper } from '@/components/forms/form-wrapper'
+import { NumberField } from '@/components/forms/number-field'
+import { TextField } from '@/components/forms/text-field'
+import { Flex } from '@/components/layouts/flex'
+import { Button } from '@/components/ui/button'
+import { Toaster } from '@/components/ui/sonner'
+
+type TSchema = {
+  code: string
+  name: string
+  exchangeRate: number
+}
+
+const meta: Meta<typeof FormWrapper<TSchema>> = {
+  tags: ['autodocs'],
+  title: 'Forms/FormWrapper',
+  component: FormWrapper,
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => {
+    return (
+      <>
+        <FormWrapper<TSchema>
+          form={{
+            defaultValues: {
+              code: '',
+              name: '',
+              exchangeRate: 1,
+            },
+          }}
+          isResetAfterSubmit={false}
+          onSubmit={(data) => {
+            console.log('Form submitted with data:', data)
+          }}
+          onError={(error) => {
+            console.error('Form submission error:', error)
+          }}
+        >
+          <Flex vertical gap="md">
+            <TextField<TSchema> name="code" label="Mã tiền tệ" placeholder="VND, USD, EUR..." />
+            <Flex padding="none" className="gap-2 *:flex-1">
+              <TextField<TSchema> name="name" label="Tên tiền tệ" placeholder="VND, USD, EUR..." />
+              <NumberField<TSchema> name="exchangeRate" label="Tỷ giá" placeholder="0" />
+            </Flex>
+            <Flex justify="end" width="full">
+              <Button type="submit">Submit</Button>
+            </Flex>
+          </Flex>
+        </FormWrapper>
+        <Toaster />
+      </>
+    )
+  },
+}

package/packages/stories/forms/multi-select-field.stories.tsx

@@ -0,0 +1,42 @@
+import { useForm } from 'react-hook-form'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { MultiSelectField } from '@/components/forms/multi-select-field'
+import { Form } from '@/components/ui/form'
+
+const meta = {
+  tags: ['autodocs'],
+  title: 'Forms/MultiSelectField',
+  component: MultiSelectField,
+} satisfies Meta<typeof MultiSelectField>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    name: 'tags',
+    label: 'Tags',
+    placeholder: 'Select tags',
+    options: [
+      { value: 'react', label: 'React' },
+      { value: 'javascript', label: 'JavaScript' },
+      { value: 'css', label: 'CSS' },
+      { value: 'html', label: 'HTML' },
+    ],
+  },
+  render: (args) => {
+    const form = useForm({
+      defaultValues: {
+        tags: [],
+      },
+    })
+    return (
+      <Form {...form}>
+        <div className="w-80">
+          <MultiSelectField {...args} />
+        </div>
+      </Form>
+    )
+  },
+}

package/packages/stories/forms/number-field.stories.tsx

@@ -0,0 +1,35 @@
+import { useForm } from 'react-hook-form'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { NumberField } from '@/components/forms/number-field'
+import { Form } from '@/components/ui/form'
+
+const meta = {
+  tags: ['autodocs'],
+  title: 'Forms/NumberField',
+  component: NumberField,
+} satisfies Meta<typeof NumberField>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    name: 'name',
+    onValueChange: (value) => {
+      console.log('Value changed:', value)
+    },
+  },
+  render: (args) => {
+    const form = useForm({
+      defaultValues: {
+        name: '',
+      },
+    })
+    return (
+      <Form {...form}>
+        <NumberField {...args} />
+      </Form>
+    )
+  },
+}