@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/skeleton/Skeleton.stories.tsx

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Skeleton } from './index'
+
+const meta: Meta<typeof Skeleton> = {
+  title: 'Components/Skeleton',
+  component: Skeleton,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Used to show a placeholder while content is loading.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Skeleton>
+
+export const Default: Story = {
+  args: {
+    className: 'w-[200px] h-[20px]',
+  },
+  render: (args) => <Skeleton {...args} />,
+}
+
+export const Card: Story = {
+  render: () => (
+    <div className="flex flex-col space-y-3">
+      <Skeleton className="h-[125px] w-[250px] rounded-xl" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-[250px]" />
+        <Skeleton className="h-4 w-[200px]" />
+      </div>
+    </div>
+  ),
+}
+
+export const Avatar: Story = {
+  render: () => (
+    <div className="flex items-center space-x-4">
+      <Skeleton className="h-12 w-12 rounded-full" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-[250px]" />
+        <Skeleton className="h-4 w-[200px]" />
+      </div>
+    </div>
+  ),
+}
+
+export const List: Story = {
+  render: () => (
+    <div className="space-y-4 w-[300px]">
+      {[1, 2, 3].map((i) => (
+        <div key={i} className="flex items-center space-x-4">
+          <Skeleton className="h-10 w-10 rounded-full" />
+          <div className="space-y-2 flex-1">
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-3/4" />
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+export const Table: Story = {
+  render: () => (
+    <div className="space-y-4 w-[500px]">
+      <div className="flex gap-4">
+        <Skeleton className="h-8 w-24" />
+        <Skeleton className="h-8 flex-1" />
+        <Skeleton className="h-8 w-20" />
+      </div>
+      {[1, 2, 3, 4].map((i) => (
+        <div key={i} className="flex gap-4">
+          <Skeleton className="h-6 w-24" />
+          <Skeleton className="h-6 flex-1" />
+          <Skeleton className="h-6 w-20" />
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+export const Article: Story = {
+  render: () => (
+    <div className="space-y-4 w-[400px]">
+      <Skeleton className="h-8 w-3/4" />
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-2/3" />
+      <Skeleton className="h-[200px] w-full rounded-lg" />
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-1/2" />
+    </div>
+  ),
+}
+
+export const Dashboard: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-4 w-[500px]">
+      {[1, 2, 3, 4].map((i) => (
+        <div key={i} className="p-4 border rounded-lg space-y-3">
+          <Skeleton className="h-4 w-20" />
+          <Skeleton className="h-8 w-24" />
+          <Skeleton className="h-2 w-full" />
+        </div>
+      ))}
+    </div>
+  ),
+}

package/src/components/slider/Slider.stories.tsx

@@ -0,0 +1,157 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Slider } from './index'
+import { Label } from '../label'
+import * as React from 'react'
+
+const meta: Meta<typeof Slider> = {
+  title: 'Components/Slider',
+  component: Slider,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'An input where the user selects a value from within a given range.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    defaultValue: {
+      control: { type: 'object' },
+      description: 'The default value of the slider',
+    },
+    max: {
+      control: { type: 'number' },
+      description: 'The maximum value of the slider',
+    },
+    step: {
+      control: { type: 'number' },
+      description: 'The step increment',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'When true, prevents the user from interacting with the slider',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Slider>
+
+export const Default: Story = {
+  args: {
+    defaultValue: [50],
+    max: 100,
+    step: 1,
+    className: 'w-[300px]',
+  },
+}
+
+export const WithLabel: Story = {
+  render: function SliderWithLabel() {
+    const [value, setValue] = React.useState([50])
+
+    return (
+      <div className="w-[300px] space-y-4">
+        <div className="flex justify-between">
+          <Label>Volume</Label>
+          <span className="text-sm text-muted-foreground">{value}%</span>
+        </div>
+        <Slider
+          value={value}
+          onValueChange={setValue}
+          max={100}
+          step={1}
+        />
+      </div>
+    )
+  },
+}
+
+export const Range: Story = {
+  render: function SliderRange() {
+    const [value, setValue] = React.useState([25, 75])
+
+    return (
+      <div className="w-[300px] space-y-4">
+        <div className="flex justify-between">
+          <Label>Price Range</Label>
+          <span className="text-sm text-muted-foreground">
+            ${value[0]} - ${value[1]}
+          </span>
+        </div>
+        <Slider
+          value={value}
+          onValueChange={setValue}
+          max={100}
+          step={1}
+        />
+      </div>
+    )
+  },
+}
+
+export const Steps: Story = {
+  render: () => (
+    <div className="w-[300px] space-y-6">
+      <div className="space-y-2">
+        <Label>Step: 1</Label>
+        <Slider defaultValue={[50]} max={100} step={1} />
+      </div>
+      <div className="space-y-2">
+        <Label>Step: 10</Label>
+        <Slider defaultValue={[50]} max={100} step={10} />
+      </div>
+      <div className="space-y-2">
+        <Label>Step: 25</Label>
+        <Slider defaultValue={[50]} max={100} step={25} />
+      </div>
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <Slider
+      defaultValue={[50]}
+      max={100}
+      step={1}
+      disabled
+      className="w-[300px]"
+    />
+  ),
+}
+
+export const FormExample: Story = {
+  render: function FormSlider() {
+    const [brightness, setBrightness] = React.useState([70])
+    const [contrast, setContrast] = React.useState([50])
+    const [saturation, setSaturation] = React.useState([100])
+
+    return (
+      <div className="w-[300px] space-y-6">
+        <div className="space-y-2">
+          <div className="flex justify-between">
+            <Label>Brightness</Label>
+            <span className="text-sm text-muted-foreground">{brightness}%</span>
+          </div>
+          <Slider value={brightness} onValueChange={setBrightness} max={100} />
+        </div>
+        <div className="space-y-2">
+          <div className="flex justify-between">
+            <Label>Contrast</Label>
+            <span className="text-sm text-muted-foreground">{contrast}%</span>
+          </div>
+          <Slider value={contrast} onValueChange={setContrast} max={100} />
+        </div>
+        <div className="space-y-2">
+          <div className="flex justify-between">
+            <Label>Saturation</Label>
+            <span className="text-sm text-muted-foreground">{saturation}%</span>
+          </div>
+          <Slider value={saturation} onValueChange={setSaturation} max={200} />
+        </div>
+      </div>
+    )
+  },
+}

package/src/components/switch/Switch.stories.tsx

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Switch } from './index'
+import { Label } from '../label'
+
+const meta: Meta<typeof Switch> = {
+  title: 'Components/Switch',
+  component: Switch,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A control that allows the user to toggle between checked and not checked.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    checked: {
+      control: 'boolean',
+      description: 'The controlled checked state of the switch',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'When true, prevents the user from interacting with the switch',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Switch>
+
+export const Default: Story = {
+  args: {
+    id: 'airplane-mode',
+    disabled: false,
+  },
+  render: (args) => (
+    <div className="flex items-center space-x-2">
+      <Switch {...args} />
+      <Label htmlFor="airplane-mode">Airplane Mode</Label>
+    </div>
+  ),
+}
+
+export const Checked: Story = {
+  render: () => (
+    <div className="flex items-center space-x-2">
+      <Switch id="checked" defaultChecked />
+      <Label htmlFor="checked">Enabled by default</Label>
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center space-x-2">
+        <Switch id="disabled" disabled />
+        <Label htmlFor="disabled" className="text-muted-foreground">Disabled</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <Switch id="disabled-checked" disabled defaultChecked />
+        <Label htmlFor="disabled-checked" className="text-muted-foreground">Disabled (checked)</Label>
+      </div>
+    </div>
+  ),
+}
+
+export const FormExample: Story = {
+  render: () => (
+    <form className="w-[400px] space-y-6">
+      <div className="space-y-4">
+        <h4 className="font-medium">Email Notifications</h4>
+        <div className="flex items-center justify-between">
+          <div className="space-y-0.5">
+            <Label htmlFor="marketing">Marketing emails</Label>
+            <p className="text-sm text-muted-foreground">
+              Receive emails about new products, features, and more.
+            </p>
+          </div>
+          <Switch id="marketing" />
+        </div>
+        <div className="flex items-center justify-between">
+          <div className="space-y-0.5">
+            <Label htmlFor="security">Security emails</Label>
+            <p className="text-sm text-muted-foreground">
+              Receive emails about your account security.
+            </p>
+          </div>
+          <Switch id="security" defaultChecked />
+        </div>
+      </div>
+    </form>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center space-x-2">
+        <Switch id="small" className="h-5 w-9 [&>span]:h-4 [&>span]:w-4 [&>span]:data-[state=checked]:translate-x-4" />
+        <Label htmlFor="small">Small</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <Switch id="default" />
+        <Label htmlFor="default">Default</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <Switch id="large" className="h-7 w-14 [&>span]:h-6 [&>span]:w-6 [&>span]:data-[state=checked]:translate-x-7" />
+        <Label htmlFor="large">Large</Label>
+      </div>
+    </div>
+  ),
+}

package/src/components/table/Table.stories.tsx

@@ -0,0 +1,153 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from './index'
+
+const meta: Meta<typeof Table> = {
+  title: 'Components/Table',
+  component: Table,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A responsive table component for displaying data.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Table>
+
+const invoices = [
+  { invoice: "INV001", status: "Paid", method: "Credit Card", amount: "$250.00" },
+  { invoice: "INV002", status: "Pending", method: "PayPal", amount: "$150.00" },
+  { invoice: "INV003", status: "Unpaid", method: "Bank Transfer", amount: "$350.00" },
+  { invoice: "INV004", status: "Paid", method: "Credit Card", amount: "$450.00" },
+  { invoice: "INV005", status: "Paid", method: "PayPal", amount: "$550.00" },
+]
+
+export const Default: Story = {
+  args: {
+    className: 'w-[600px]',
+  },
+  render: (args) => (
+    <Table {...args}>
+      <TableCaption>A list of your recent invoices.</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-[100px]">Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead className="text-right">Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {invoices.map((invoice) => (
+          <TableRow key={invoice.invoice}>
+            <TableCell className="font-medium">{invoice.invoice}</TableCell>
+            <TableCell>{invoice.status}</TableCell>
+            <TableCell>{invoice.method}</TableCell>
+            <TableCell className="text-right">{invoice.amount}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  ),
+}
+
+export const WithFooter: Story = {
+  render: () => (
+    <Table className="w-[600px]">
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-[100px]">Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead className="text-right">Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {invoices.map((invoice) => (
+          <TableRow key={invoice.invoice}>
+            <TableCell className="font-medium">{invoice.invoice}</TableCell>
+            <TableCell>{invoice.status}</TableCell>
+            <TableCell>{invoice.method}</TableCell>
+            <TableCell className="text-right">{invoice.amount}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TableCell colSpan={3}>Total</TableCell>
+          <TableCell className="text-right">$1,750.00</TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  ),
+}
+
+const users = [
+  { id: 1, name: "John Doe", email: "john@example.com", role: "Admin" },
+  { id: 2, name: "Jane Smith", email: "jane@example.com", role: "User" },
+  { id: 3, name: "Bob Johnson", email: "bob@example.com", role: "User" },
+  { id: 4, name: "Alice Brown", email: "alice@example.com", role: "Editor" },
+]
+
+export const UsersTable: Story = {
+  render: () => (
+    <Table className="w-[600px]">
+      <TableHeader>
+        <TableRow>
+          <TableHead>Name</TableHead>
+          <TableHead>Email</TableHead>
+          <TableHead>Role</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {users.map((user) => (
+          <TableRow key={user.id}>
+            <TableCell className="font-medium">{user.name}</TableCell>
+            <TableCell>{user.email}</TableCell>
+            <TableCell>
+              <span className="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium bg-primary/10 text-primary">
+                {user.role}
+              </span>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  ),
+}
+
+export const Striped: Story = {
+  render: () => (
+    <Table className="w-[600px]">
+      <TableHeader>
+        <TableRow>
+          <TableHead>Name</TableHead>
+          <TableHead>Email</TableHead>
+          <TableHead>Role</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {users.map((user, index) => (
+          <TableRow key={user.id} className={index % 2 === 0 ? "bg-muted/50" : ""}>
+            <TableCell className="font-medium">{user.name}</TableCell>
+            <TableCell>{user.email}</TableCell>
+            <TableCell>{user.role}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  ),
+}

package/src/components/tabs/Tabs.stories.tsx

@@ -0,0 +1,155 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './index'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../card'
+import { Button } from '../button'
+import { Input } from '../input'
+import { Label } from '../label'
+
+const meta: Meta<typeof Tabs> = {
+  title: 'Components/Tabs',
+  component: Tabs,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A set of layered sections of content that are displayed one at a time.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Tabs>
+
+export const Default: Story = {
+  args: {
+    defaultValue: 'account',
+    className: 'w-[400px]',
+  },
+  render: (args) => (
+    <Tabs {...args}>
+      <TabsList className="grid w-full grid-cols-2">
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+      </TabsList>
+      <TabsContent value="account">
+        <Card>
+          <CardHeader>
+            <CardTitle>Account</CardTitle>
+            <CardDescription>
+              Make changes to your account here. Click save when you're done.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            <div className="space-y-1">
+              <Label htmlFor="name">Name</Label>
+              <Input id="name" defaultValue="Pedro Duarte" />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="username">Username</Label>
+              <Input id="username" defaultValue="@peduarte" />
+            </div>
+          </CardContent>
+        </Card>
+      </TabsContent>
+      <TabsContent value="password">
+        <Card>
+          <CardHeader>
+            <CardTitle>Password</CardTitle>
+            <CardDescription>
+              Change your password here. After saving, you'll be logged out.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            <div className="space-y-1">
+              <Label htmlFor="current">Current password</Label>
+              <Input id="current" type="password" />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="new">New password</Label>
+              <Input id="new" type="password" />
+            </div>
+          </CardContent>
+        </Card>
+      </TabsContent>
+    </Tabs>
+  ),
+}
+
+export const Simple: Story = {
+  render: () => (
+    <Tabs defaultValue="tab1" className="w-[400px]">
+      <TabsList>
+        <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+        <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+        <TabsTrigger value="tab3">Tab 3</TabsTrigger>
+      </TabsList>
+      <TabsContent value="tab1" className="p-4">
+        Content for Tab 1
+      </TabsContent>
+      <TabsContent value="tab2" className="p-4">
+        Content for Tab 2
+      </TabsContent>
+      <TabsContent value="tab3" className="p-4">
+        Content for Tab 3
+      </TabsContent>
+    </Tabs>
+  ),
+}
+
+export const WithDisabled: Story = {
+  render: () => (
+    <Tabs defaultValue="overview" className="w-[400px]">
+      <TabsList>
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="analytics">Analytics</TabsTrigger>
+        <TabsTrigger value="reports" disabled>Reports</TabsTrigger>
+        <TabsTrigger value="notifications" disabled>Notifications</TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview" className="p-4">
+        Overview content
+      </TabsContent>
+      <TabsContent value="analytics" className="p-4">
+        Analytics content
+      </TabsContent>
+    </Tabs>
+  ),
+}
+
+export const FullWidth: Story = {
+  render: () => (
+    <Tabs defaultValue="music" className="w-[500px]">
+      <TabsList className="grid w-full grid-cols-4">
+        <TabsTrigger value="music">Music</TabsTrigger>
+        <TabsTrigger value="podcasts">Podcasts</TabsTrigger>
+        <TabsTrigger value="live">Live</TabsTrigger>
+        <TabsTrigger value="settings">Settings</TabsTrigger>
+      </TabsList>
+      <TabsContent value="music" className="p-4 border rounded-b-md">
+        <h3 className="font-medium">Music Library</h3>
+        <p className="text-sm text-muted-foreground mt-1">
+          Browse your music collection
+        </p>
+      </TabsContent>
+      <TabsContent value="podcasts" className="p-4 border rounded-b-md">
+        <h3 className="font-medium">Podcasts</h3>
+        <p className="text-sm text-muted-foreground mt-1">
+          Listen to your favorite podcasts
+        </p>
+      </TabsContent>
+      <TabsContent value="live" className="p-4 border rounded-b-md">
+        <h3 className="font-medium">Live Radio</h3>
+        <p className="text-sm text-muted-foreground mt-1">
+          Tune in to live radio stations
+        </p>
+      </TabsContent>
+      <TabsContent value="settings" className="p-4 border rounded-b-md">
+        <h3 className="font-medium">Settings</h3>
+        <p className="text-sm text-muted-foreground mt-1">
+          Customize your experience
+        </p>
+      </TabsContent>
+    </Tabs>
+  ),
+}