@customafk/lunas-ui 0.0.21 → 0.0.23

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

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

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

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

@@ -0,0 +1,34 @@
+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/typography/paragraph.stories.tsx

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

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

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

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

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

package/packages/stories/ui/badge.stories.tsx

@@ -0,0 +1,170 @@
+import { Badge } from '@/components/ui/badge'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  tags: ['autodocs'],
+  title: 'Components/Badge',
+  component: Badge,
+} satisfies Meta<typeof Badge>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    pill: true,
+    children: 'Badge',
+  },
+}
+
+export const Pill: Story = {
+  args: {
+    pill: true,
+    children: 'Pill Badge',
+  },
+}
+
+export const Red: Story = {
+  args: {
+    ...Default.args,
+    color: 'red',
+    children: 'Red Badge',
+  },
+}
+
+export const Orange: Story = {
+  args: {
+    ...Default.args,
+    color: 'orange',
+    children: 'Orange Badge',
+  },
+}
+
+export const Amber: Story = {
+  args: {
+    ...Default.args,
+    color: 'amber',
+    children: 'Amber Badge',
+  },
+}
+
+export const Yellow: Story = {
+  args: {
+    ...Default.args,
+    color: 'yellow',
+    children: 'Yellow Badge',
+  },
+}
+
+export const Lime: Story = {
+  args: {
+    ...Default.args,
+    color: 'lime',
+    children: 'Lime Badge',
+  },
+}
+
+export const Green: Story = {
+  args: {
+    ...Default.args,
+    color: 'green',
+    children: 'Green Badge',
+  },
+}
+
+export const Emerald: Story = {
+  args: {
+    ...Default.args,
+    color: 'emerald',
+    children: 'Emerald Badge',
+  },
+}
+
+export const Teal: Story = {
+  args: {
+    ...Default.args,
+    color: 'teal',
+    children: 'Teal Badge',
+  },
+}
+
+export const Cyan: Story = {
+  args: {
+    ...Default.args,
+    color: 'cyan',
+    children: 'Cyan Badge',
+  },
+}
+
+export const Sky: Story = {
+  args: {
+    ...Default.args,
+    color: 'sky',
+    children: 'Sky Badge',
+  },
+}
+
+export const Blue: Story = {
+  args: {
+    ...Default.args,
+    color: 'blue',
+    children: 'Blue Badge',
+  },
+}
+
+export const Indigo: Story = {
+  args: {
+    ...Default.args,
+    color: 'indigo',
+    children: 'Indigo Badge',
+  },
+}
+
+export const Violet: Story = {
+  args: {
+    ...Default.args,
+    color: 'violet',
+    children: 'Violet Badge',
+  },
+}
+
+export const Purple: Story = {
+  args: {
+    ...Default.args,
+    color: 'purple',
+    children: 'Purple Badge',
+  },
+}
+
+export const Fuchsia: Story = {
+  args: {
+    ...Default.args,
+    color: 'fuchsia',
+    children: 'Fuchsia Badge',
+  },
+}
+
+export const Pink: Story = {
+  args: {
+    ...Default.args,
+    color: 'pink',
+    children: 'Pink Badge',
+  },
+}
+
+export const Rose: Story = {
+  args: {
+    ...Default.args,
+    color: 'rose',
+    children: 'Rose Badge',
+  },
+}
+
+export const Zinc: Story = {
+  args: {
+    ...Default.args,
+    color: 'zinc',
+    children: 'Zinc Badge',
+  },
+}