@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/textarea/Textarea.stories.tsx

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Textarea } from './index'
+import { Label } from '../label'
+import { Button } from '../button'
+
+const meta: Meta<typeof Textarea> = {
+  title: 'Components/Textarea',
+  component: Textarea,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Displays a form textarea or a component that looks like a textarea.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'When true, prevents the user from interacting with the textarea',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Textarea>
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Type your message here.',
+    className: 'w-[300px]',
+  },
+}
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="grid w-full max-w-sm gap-1.5">
+      <Label htmlFor="message">Your message</Label>
+      <Textarea placeholder="Type your message here." id="message" />
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <Textarea
+      placeholder="This textarea is disabled."
+      disabled
+      className="w-[300px]"
+    />
+  ),
+}
+
+export const WithText: Story = {
+  render: () => (
+    <div className="grid w-full max-w-sm gap-1.5">
+      <Label htmlFor="bio">Bio</Label>
+      <Textarea placeholder="Tell us about yourself" id="bio" />
+      <p className="text-sm text-muted-foreground">
+        Your bio will be visible to other users.
+      </p>
+    </div>
+  ),
+}
+
+export const WithButton: Story = {
+  render: () => (
+    <div className="grid w-full max-w-sm gap-2">
+      <Textarea placeholder="Type your message here." />
+      <Button>Send message</Button>
+    </div>
+  ),
+}
+
+export const FormExample: Story = {
+  render: () => (
+    <form className="w-[400px] space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="feedback">Feedback</Label>
+        <Textarea
+          id="feedback"
+          placeholder="Share your feedback with us..."
+          className="min-h-[120px]"
+        />
+      </div>
+      <div className="flex justify-end gap-2">
+        <Button variant="outline">Cancel</Button>
+        <Button>Submit</Button>
+      </div>
+    </form>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-[300px]">
+      <div className="space-y-1">
+        <Label>Small</Label>
+        <Textarea placeholder="Small textarea" className="min-h-[60px]" />
+      </div>
+      <div className="space-y-1">
+        <Label>Default</Label>
+        <Textarea placeholder="Default textarea" />
+      </div>
+      <div className="space-y-1">
+        <Label>Large</Label>
+        <Textarea placeholder="Large textarea" className="min-h-[150px]" />
+      </div>
+    </div>
+  ),
+}

package/src/components/toast/Toast.stories.tsx

@@ -0,0 +1,160 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from './index'
+import { Button } from '../button'
+import * as React from 'react'
+
+const meta: Meta<typeof Toast> = {
+  title: 'Components/Toast',
+  component: Toast,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A succinct message that is displayed temporarily.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Toast>
+
+export const Default: Story = {
+  render: function ToastDemo() {
+    const [open, setOpen] = React.useState(false)
+
+    return (
+      <ToastProvider>
+        <Button
+          variant="outline"
+          onClick={() => setOpen(true)}
+        >
+          Show Toast
+        </Button>
+        <Toast open={open} onOpenChange={setOpen}>
+          <div className="grid gap-1">
+            <ToastTitle>Scheduled: Catch up</ToastTitle>
+            <ToastDescription>Friday, February 10, 2023 at 5:57 PM</ToastDescription>
+          </div>
+          <ToastClose />
+        </Toast>
+        <ToastViewport />
+      </ToastProvider>
+    )
+  },
+}
+
+export const WithAction: Story = {
+  render: function ToastWithAction() {
+    const [open, setOpen] = React.useState(false)
+
+    return (
+      <ToastProvider>
+        <Button
+          variant="outline"
+          onClick={() => setOpen(true)}
+        >
+          Add to Calendar
+        </Button>
+        <Toast open={open} onOpenChange={setOpen}>
+          <div className="grid gap-1">
+            <ToastTitle>Event Added</ToastTitle>
+            <ToastDescription>Your event has been added to the calendar.</ToastDescription>
+          </div>
+          <ToastAction altText="Undo">Undo</ToastAction>
+          <ToastClose />
+        </Toast>
+        <ToastViewport />
+      </ToastProvider>
+    )
+  },
+}
+
+export const Destructive: Story = {
+  render: function DestructiveToast() {
+    const [open, setOpen] = React.useState(false)
+
+    return (
+      <ToastProvider>
+        <Button
+          variant="destructive"
+          onClick={() => setOpen(true)}
+        >
+          Delete Item
+        </Button>
+        <Toast open={open} onOpenChange={setOpen} variant="destructive">
+          <div className="grid gap-1">
+            <ToastTitle>Error</ToastTitle>
+            <ToastDescription>Something went wrong. Please try again.</ToastDescription>
+          </div>
+          <ToastAction altText="Try again">Try again</ToastAction>
+          <ToastClose />
+        </Toast>
+        <ToastViewport />
+      </ToastProvider>
+    )
+  },
+}
+
+export const Variants: Story = {
+  render: function ToastVariants() {
+    const [defaultOpen, setDefaultOpen] = React.useState(false)
+    const [destructiveOpen, setDestructiveOpen] = React.useState(false)
+
+    return (
+      <ToastProvider>
+        <div className="flex gap-4">
+          <Button variant="outline" onClick={() => setDefaultOpen(true)}>
+            Default Toast
+          </Button>
+          <Button variant="destructive" onClick={() => setDestructiveOpen(true)}>
+            Destructive Toast
+          </Button>
+        </div>
+        <Toast open={defaultOpen} onOpenChange={setDefaultOpen}>
+          <div className="grid gap-1">
+            <ToastTitle>Success</ToastTitle>
+            <ToastDescription>Your changes have been saved.</ToastDescription>
+          </div>
+          <ToastClose />
+        </Toast>
+        <Toast open={destructiveOpen} onOpenChange={setDestructiveOpen} variant="destructive">
+          <div className="grid gap-1">
+            <ToastTitle>Error</ToastTitle>
+            <ToastDescription>Failed to save changes.</ToastDescription>
+          </div>
+          <ToastClose />
+        </Toast>
+        <ToastViewport />
+      </ToastProvider>
+    )
+  },
+}
+
+export const Simple: Story = {
+  render: function SimpleToast() {
+    const [open, setOpen] = React.useState(false)
+
+    return (
+      <ToastProvider>
+        <Button onClick={() => setOpen(true)}>
+          Show Simple Toast
+        </Button>
+        <Toast open={open} onOpenChange={setOpen}>
+          <ToastDescription>Your message has been sent.</ToastDescription>
+          <ToastClose />
+        </Toast>
+        <ToastViewport />
+      </ToastProvider>
+    )
+  },
+}

package/src/components/toggle/Toggle.stories.tsx

@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Toggle } from './index'
+import { Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight } from 'lucide-react'
+
+const meta: Meta<typeof Toggle> = {
+  title: 'Components/Toggle',
+  component: Toggle,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A two-state button that can be either on or off.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'outline'],
+      description: 'The visual style of the toggle',
+    },
+    size: {
+      control: 'select',
+      options: ['default', 'sm', 'lg'],
+      description: 'The size of the toggle',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'When true, prevents the user from interacting with the toggle',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Toggle>
+
+export const Default: Story = {
+  args: {
+    'aria-label': 'Toggle bold',
+  },
+  render: (args) => (
+    <Toggle {...args}>
+      <Bold className="h-4 w-4" />
+    </Toggle>
+  ),
+}
+
+export const Outline: Story = {
+  render: () => (
+    <Toggle variant="outline" aria-label="Toggle italic">
+      <Italic className="h-4 w-4" />
+    </Toggle>
+  ),
+}
+
+export const WithText: Story = {
+  render: () => (
+    <Toggle aria-label="Toggle underline">
+      <Underline className="h-4 w-4 mr-2" />
+      Underline
+    </Toggle>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Toggle size="sm" aria-label="Toggle small">
+        <Bold className="h-3 w-3" />
+      </Toggle>
+      <Toggle size="default" aria-label="Toggle default">
+        <Bold className="h-4 w-4" />
+      </Toggle>
+      <Toggle size="lg" aria-label="Toggle large">
+        <Bold className="h-5 w-5" />
+      </Toggle>
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <Toggle disabled aria-label="Disabled toggle">
+        <Bold className="h-4 w-4" />
+      </Toggle>
+      <Toggle disabled defaultPressed aria-label="Disabled pressed toggle">
+        <Italic className="h-4 w-4" />
+      </Toggle>
+    </div>
+  ),
+}
+
+export const ToggleGroup: Story = {
+  render: () => (
+    <div className="flex gap-1 rounded-md border p-1">
+      <Toggle size="sm" aria-label="Bold">
+        <Bold className="h-4 w-4" />
+      </Toggle>
+      <Toggle size="sm" aria-label="Italic">
+        <Italic className="h-4 w-4" />
+      </Toggle>
+      <Toggle size="sm" aria-label="Underline">
+        <Underline className="h-4 w-4" />
+      </Toggle>
+    </div>
+  ),
+}
+
+export const AlignmentGroup: Story = {
+  render: () => (
+    <div className="flex gap-1 rounded-md border p-1">
+      <Toggle size="sm" defaultPressed aria-label="Align left">
+        <AlignLeft className="h-4 w-4" />
+      </Toggle>
+      <Toggle size="sm" aria-label="Align center">
+        <AlignCenter className="h-4 w-4" />
+      </Toggle>
+      <Toggle size="sm" aria-label="Align right">
+        <AlignRight className="h-4 w-4" />
+      </Toggle>
+    </div>
+  ),
+}

package/src/components/tooltip/Tooltip.stories.tsx

@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './index'
+import { Button } from '../button'
+import { Plus, HelpCircle, Info } from 'lucide-react'
+
+const meta: Meta<typeof Tooltip> = {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <TooltipProvider>
+        <Story />
+      </TooltipProvider>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof Tooltip>
+
+export const Default: Story = {
+  args: {},
+  render: (args) => (
+    <Tooltip {...args}>
+      <TooltipTrigger asChild>
+        <Button variant="outline">Hover me</Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>Add to library</p>
+      </TooltipContent>
+    </Tooltip>
+  ),
+}
+
+export const WithIcon: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Plus className="h-4 w-4" />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>Add new item</p>
+      </TooltipContent>
+    </Tooltip>
+  ),
+}
+
+export const Positions: Story = {
+  render: () => (
+    <div className="flex gap-8">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Top</Button>
+        </TooltipTrigger>
+        <TooltipContent side="top">
+          <p>Top tooltip</p>
+        </TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Right</Button>
+        </TooltipTrigger>
+        <TooltipContent side="right">
+          <p>Right tooltip</p>
+        </TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Bottom</Button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          <p>Bottom tooltip</p>
+        </TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Left</Button>
+        </TooltipTrigger>
+        <TooltipContent side="left">
+          <p>Left tooltip</p>
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  ),
+}
+
+export const HelpTooltip: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <span className="text-sm">Need help?</span>
+      <Tooltip>
+        <TooltipTrigger>
+          <HelpCircle className="h-4 w-4 text-muted-foreground" />
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Click here for more information</p>
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  ),
+}
+
+export const WithRichContent: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="secondary">
+          <Info className="mr-2 h-4 w-4" />
+          Details
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent className="max-w-xs">
+        <div className="space-y-1">
+          <p className="font-medium">Additional Information</p>
+          <p className="text-xs text-muted-foreground">
+            This tooltip contains more detailed information that helps users understand the feature.
+          </p>
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  ),
+}