@customafk/lunas-ui 0.0.25 → 0.0.27

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

@@ -1,59 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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>
-    )
-  },
-}

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

@@ -1,39 +0,0 @@
-import { useForm } from 'react-hook-form'
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
-import { SelectField } from '@/components/forms/select-field'
-import { Form } from '@/components/ui/form'
-
-const meta = {
-  tags: ['autodocs'],
-  title: 'Forms/SelectField',
-  component: SelectField,
-} satisfies Meta<typeof SelectField>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    name: 'country',
-    options: [
-      { value: 'us', label: 'United States' },
-      { value: 'ca', label: 'Canada' },
-      { value: 'mx', label: 'Mexico' },
-    ],
-  },
-  render: (args) => {
-    const form = useForm({
-      defaultValues: {
-        continue: '',
-      },
-    })
-    return (
-      <Form {...form}>
-        <div className="w-80">
-          <SelectField {...args} />
-        </div>
-      </Form>
-    )
-  },
-}

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

@@ -1,36 +0,0 @@
-import { useForm } from 'react-hook-form'
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
-import { SwitchField } from '@/components/forms/switch-field'
-import { Form } from '@/components/ui/form'
-
-const meta = {
-  tags: ['autodocs'],
-  title: 'Forms/SwitchField',
-  component: SwitchField,
-} satisfies Meta<typeof SwitchField>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    name: 'default',
-    label: 'Switch Field',
-    description: 'This is a switch field description',
-  },
-  render: (args) => {
-    const form = useForm({
-      defaultValues: {
-        default: true,
-      },
-    })
-    return (
-      <Form {...form}>
-        <div className="w-80">
-          <SwitchField {...args} />
-        </div>
-      </Form>
-    )
-  },
-}

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

@@ -1,41 +0,0 @@
-import { useForm } from 'react-hook-form'
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
-import { TextField } from '@/components/forms/text-field'
-import { Form } from '@/components/ui/form'
-
-const meta = {
-  tags: ['autodocs'],
-  title: 'Forms/TextField',
-  component: TextField,
-} satisfies Meta<typeof TextField>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    name: 'name',
-    isShowErrorMsg: true,
-  },
-  render: (args) => {
-    const form = useForm({
-      defaultValues: {
-        name: '',
-      },
-    })
-    const { handleSubmit } = form
-    return (
-      <Form {...form}>
-        <form
-          className="space-y-4"
-          onSubmit={handleSubmit((data) => {
-            console.log('Form submitted:', data)
-          })}
-        >
-          <TextField {...args} />
-        </form>
-      </Form>
-    )
-  },
-}

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

@@ -1,34 +0,0 @@
-import { useForm } from 'react-hook-form'
-
-import { TextareaField } from '@/components/forms/textarea-field'
-import { Form } from '@/components/ui/form'
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
-const meta = {
-  tags: ['autodocs'],
-  title: 'Forms/TextareaField',
-  component: TextareaField,
-} satisfies Meta<typeof TextareaField>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    name: 'textarea',
-  },
-  render: (args) => {
-    const form = useForm({
-      defaultValues: {
-        name: '',
-      },
-    })
-    return (
-      <div className="w-120">
-        <Form {...form}>
-          <TextareaField {...args} />
-        </Form>
-      </div>
-    )
-  },
-}

package/packages/stories/layouts/app-layout.stories.tsx

@@ -1,49 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import {
-  AppLayoutHeader,
-  AppLayoutMain,
-  AppLayoutMainGroup,
-  AppLayoutMainGroupContent,
-  AppLayoutSidebar,
-  AppLayoutWrapper,
-} from '@/components/layouts/app-layout'
-
-const meta = {
-  tags: ['autodocs'],
-  title: 'Layouts/App Layout',
-  component: AppLayoutWrapper,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} satisfies Meta<typeof AppLayoutWrapper>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {},
-  render: (args) => {
-    return (
-      <AppLayoutWrapper {...args}>
-        <AppLayoutHeader>Header</AppLayoutHeader>
-        <AppLayoutSidebar>Sidebar</AppLayoutSidebar>
-        <AppLayoutMain>
-          <AppLayoutMainGroup>
-            <AppLayoutMainGroupContent>Content</AppLayoutMainGroupContent>
-            <AppLayoutMainGroupContent>Content</AppLayoutMainGroupContent>
-            <AppLayoutMainGroupContent>Content</AppLayoutMainGroupContent>
-            <AppLayoutMainGroupContent>Content</AppLayoutMainGroupContent>
-            <AppLayoutMainGroupContent>Content</AppLayoutMainGroupContent>
-            <AppLayoutMainGroupContent>Content</AppLayoutMainGroupContent>
-            <AppLayoutMainGroupContent>Content</AppLayoutMainGroupContent>
-            <AppLayoutMainGroupContent>Content</AppLayoutMainGroupContent>
-            <AppLayoutMainGroupContent>Content</AppLayoutMainGroupContent>
-            <AppLayoutMainGroupContent>Content</AppLayoutMainGroupContent>
-            <AppLayoutMainGroupContent>Content</AppLayoutMainGroupContent>
-            <AppLayoutMainGroupContent>Content</AppLayoutMainGroupContent>
-          </AppLayoutMainGroup>
-        </AppLayoutMain>
-      </AppLayoutWrapper>
-    )
-  },
-}

package/packages/stories/typography/paragraph.stories.tsx

@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { Paragraph } from '@/components/typography/paragraph'
-
-const meta = {
-  tags: ['autodocs'],
-  title: 'Typography/Paragraph',
-  component: Paragraph,
-} satisfies Meta<typeof Paragraph>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    variant: 'p',
-    children: 'This is a paragraph. It can contain text, links, and other inline elements.',
-  },
-}
-
-export const Muted: Story = {
-  args: {
-    variant: 'muted',
-    children: 'This is a muted paragraph. It has a lighter color to indicate less emphasis.',
-  },
-}
-export const Lead: Story = {
-  args: {
-    variant: 'lead',
-    children: 'This is a lead paragraph. It is typically used to introduce the content of a section.',
-  },
-}
-
-export const Small: Story = {
-  args: {
-    variant: 'sm',
-    children: 'This is a small paragraph. It is used for less important text.',
-  },
-}
-
-export const Large: Story = {
-  args: {
-    variant: 'lg',
-    children: 'This is a large paragraph. It is used for more emphasis and visibility.',
-  },
-}

package/packages/stories/typography/title.stories.tsx

@@ -1,39 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { Title } from '@/components/typography/title'
-
-const meta = {
-  tags: ['autodocs'],
-  title: 'Typography/Title',
-  component: Title,
-} satisfies Meta<typeof Title>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    level: 1,
-    children: 'H1. Heading 1',
-  },
-}
-
-export const H2: Story = {
-  args: {
-    level: 2,
-    children: 'H2. Heading 2',
-  },
-}
-
-export const H3: Story = {
-  args: {
-    level: 3,
-    children: 'H3. Heading 3',
-  },
-}
-
-export const H4: Story = {
-  args: {
-    level: 4,
-    children: 'H4. Heading 4',
-  },
-}

package/packages/stories/ui/alert-dialog.stories.tsx

@@ -1,49 +0,0 @@
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from '@/components/ui/alert-dialog'
-import { Button } from '@/components/ui/button'
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
-const meta = {
-  title: 'Components/AlertDialog',
-  component: AlertDialog,
-  tags: ['autodocs'],
-} satisfies Meta<typeof AlertDialog>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {},
-  render: () => {
-    return (
-      <AlertDialog>
-        <AlertDialogTrigger asChild>
-          <Button variant="outline" color="muted">
-            Show Dialog
-          </Button>
-        </AlertDialogTrigger>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-            <AlertDialogDescription>
-              This action cannot be undone. This will permanently delete your account and remove your data from our servers.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction>Continue</AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    )
-  },
-}

package/packages/stories/ui/alert.stories.tsx

@@ -1,63 +0,0 @@
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { AlertCircleIcon, CheckCircle2Icon, PopcornIcon } from 'lucide-react'
-
-const meta = {
-  title: 'Components/Alert',
-  component: Alert,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Alert>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {},
-  render: (args) => {
-    return (
-      <div className="grid w-full max-w-xl items-start gap-4">
-        <Alert>
-          <CheckCircle2Icon />
-          <AlertTitle>Success! Your changes have been saved</AlertTitle>
-          <AlertDescription>This is an alert with icon, title and description.</AlertDescription>
-        </Alert>
-        <Alert>
-          <PopcornIcon />
-          <AlertTitle>This Alert has a title and an icon. No description.</AlertTitle>
-        </Alert>
-        <Alert variant="destructive">
-          <AlertCircleIcon />
-          <AlertTitle>Unable to process your payment.</AlertTitle>
-          <AlertDescription>
-            <p>Please verify your billing information and try again.</p>
-            <ul className="list-inside list-disc text-sm">
-              <li>Check your card details</li>
-              <li>Ensure sufficient funds</li>
-              <li>Verify billing address</li>
-            </ul>
-          </AlertDescription>
-        </Alert>
-      </div>
-    )
-  },
-}
-
-export const TitleOnly: Story = {
-  args: {
-    variant: 'default',
-  },
-  render: (args) => {
-    return (
-      <div className="grid w-full max-w-xl items-start gap-4">
-        <Alert {...args}>
-          <CheckCircle2Icon />
-          <AlertTitle>Success! Your changes have been saved</AlertTitle>
-        </Alert>
-        <Alert {...args}>
-          <PopcornIcon />
-          <AlertTitle>This Alert has a title and an icon. No description.</AlertTitle>
-        </Alert>
-      </div>
-    )
-  },
-}

package/packages/stories/ui/aspect-ratio.stories.tsx

@@ -1,22 +0,0 @@
-import { AspectRatio } from '@/components/ui/aspect-ratio'
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
-const meta = {
-  title: 'Components/AspectRatio',
-  component: AspectRatio,
-  tags: ['autodocs'],
-} satisfies Meta<typeof AspectRatio>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {},
-  render: () => {
-    return (
-      <AspectRatio ratio={16 / 9}>
-        <div className="size-24">aa</div>
-      </AspectRatio>
-    )
-  },
-}