From ef146f9896d827998e814a6bf5bc9ddeb800213e Mon Sep 17 00:00:00 2001 From: Javi Aguilar <122741+itsjavi@users.noreply.github.com> Date: Sun, 1 Sep 2024 01:10:59 +0200 Subject: [PATCH] feat(ui): add stories for all components --- .../toggle-dark-mode/addon-constants.ts | 2 +- .storybook/preview.css | 24 +++++++++++ .storybook/preview.ts | 1 + src/components/ui/menubar.tsx | 20 ++++++++-- src/stories/accordion.stories.tsx | 30 ++++++++++++++ src/stories/alert-dialog.stories.tsx | 34 ++++++++++++++++ src/stories/alert.stories.tsx | 29 ++++++++++++++ src/stories/aspect-ratio.stories.tsx | 23 +++++++++++ src/stories/avatar.stories.tsx | 20 ++++++++++ src/stories/badge.stories.tsx | 27 +++++++++++++ src/stories/breadcrumb.stories.tsx | 31 ++++++++++++++ .../{button.stories.ts => button.stories.tsx} | 20 +++++++++- src/stories/card.stories.tsx | 28 +++++++++++++ src/stories/checkbox.stories.tsx | 29 ++++++++++++++ src/stories/collapsible.stories.tsx | 27 +++++++++++++ src/stories/command.stories.tsx | 27 +++++++++++++ src/stories/context-menu.stories.tsx | 27 +++++++++++++ src/stories/dialog.stories.tsx | 31 ++++++++++++++ src/stories/drawer.stories.tsx | 28 +++++++++++++ src/stories/dropdown-menu.stories.tsx | 30 ++++++++++++++ src/stories/hover-card.stories.tsx | 25 ++++++++++++ src/stories/input-otp.stories.tsx | 26 ++++++++++++ src/stories/input.stories.tsx | 19 +++++++++ src/stories/label.stories.tsx | 15 +++++++ src/stories/menubar.stories.tsx | 27 +++++++++++++ src/stories/navigation-menu.stories.tsx | 26 ++++++++++++ src/stories/pagination.stories.tsx | 40 +++++++++++++++++++ src/stories/popover.stories.tsx | 28 +++++++++++++ src/stories/progress.stories.tsx | 15 +++++++ src/stories/radio-group.stories.tsx | 27 +++++++++++++ src/stories/resizable.stories.tsx | 32 +++++++++++++++ src/stories/scroll-area.stories.tsx | 26 ++++++++++++ src/stories/select.stories.tsx | 26 ++++++++++++ src/stories/separator.stories.tsx | 30 ++++++++++++++ src/stories/sheet.stories.tsx | 31 ++++++++++++++ src/stories/skeleton.stories.tsx | 23 +++++++++++ src/stories/slider.stories.tsx | 15 +++++++ src/stories/switch.stories.tsx | 21 ++++++++++ src/stories/table.stories.tsx | 35 ++++++++++++++++ src/stories/tabs.stories.tsx | 24 +++++++++++ src/stories/textarea.stories.tsx | 15 +++++++ src/stories/toast.stories.tsx | 35 ++++++++++++++++ src/stories/toggle-group.stories.tsx | 21 ++++++++++ src/stories/toggle.stories.tsx | 15 +++++++ src/stories/tooltip.stories.tsx | 27 +++++++++++++ tsconfig.app.json | 3 +- vite.config.ts | 2 +- 47 files changed, 1107 insertions(+), 10 deletions(-) create mode 100644 .storybook/preview.css create mode 100644 src/stories/accordion.stories.tsx create mode 100644 src/stories/alert-dialog.stories.tsx create mode 100644 src/stories/alert.stories.tsx create mode 100644 src/stories/aspect-ratio.stories.tsx create mode 100644 src/stories/avatar.stories.tsx create mode 100644 src/stories/badge.stories.tsx create mode 100644 src/stories/breadcrumb.stories.tsx rename src/stories/{button.stories.ts => button.stories.tsx} (75%) create mode 100644 src/stories/card.stories.tsx create mode 100644 src/stories/checkbox.stories.tsx create mode 100644 src/stories/collapsible.stories.tsx create mode 100644 src/stories/command.stories.tsx create mode 100644 src/stories/context-menu.stories.tsx create mode 100644 src/stories/dialog.stories.tsx create mode 100644 src/stories/drawer.stories.tsx create mode 100644 src/stories/dropdown-menu.stories.tsx create mode 100644 src/stories/hover-card.stories.tsx create mode 100644 src/stories/input-otp.stories.tsx create mode 100644 src/stories/input.stories.tsx create mode 100644 src/stories/label.stories.tsx create mode 100644 src/stories/menubar.stories.tsx create mode 100644 src/stories/navigation-menu.stories.tsx create mode 100644 src/stories/pagination.stories.tsx create mode 100644 src/stories/popover.stories.tsx create mode 100644 src/stories/progress.stories.tsx create mode 100644 src/stories/radio-group.stories.tsx create mode 100644 src/stories/resizable.stories.tsx create mode 100644 src/stories/scroll-area.stories.tsx create mode 100644 src/stories/select.stories.tsx create mode 100644 src/stories/separator.stories.tsx create mode 100644 src/stories/sheet.stories.tsx create mode 100644 src/stories/skeleton.stories.tsx create mode 100644 src/stories/slider.stories.tsx create mode 100644 src/stories/switch.stories.tsx create mode 100644 src/stories/table.stories.tsx create mode 100644 src/stories/tabs.stories.tsx create mode 100644 src/stories/textarea.stories.tsx create mode 100644 src/stories/toast.stories.tsx create mode 100644 src/stories/toggle-group.stories.tsx create mode 100644 src/stories/toggle.stories.tsx create mode 100644 src/stories/tooltip.stories.tsx diff --git a/.storybook/addons/toggle-dark-mode/addon-constants.ts b/.storybook/addons/toggle-dark-mode/addon-constants.ts index ad45845..5e85f9b 100644 --- a/.storybook/addons/toggle-dark-mode/addon-constants.ts +++ b/.storybook/addons/toggle-dark-mode/addon-constants.ts @@ -6,6 +6,6 @@ export const TOOL_TITLE = "Toggle Dark Mode (D)"; export const globalTypes = { darkMode: { description: "Global dark mode for components", - defaultValue: "", + defaultValue: "true", }, }; diff --git a/.storybook/preview.css b/.storybook/preview.css new file mode 100644 index 0000000..d3166c1 --- /dev/null +++ b/.storybook/preview.css @@ -0,0 +1,24 @@ +.dark .sbdocs { + background: #000 !important; + color: #fff !important; +} + +.dark .sbdocs-title, +.dark .sb-anchor h2, +.dark .sb-anchor h3, +.dark .sb-anchor h4, +.dark .docblock-argstable thead, +.dark [class^="css-"] thead th { + color: #fff !important; +} + +.sbdocs-preview, +.dark .sbdocs-preview { + background: var(--background) !important; + color: var(--foreground) !important; +} + +.sb-bar { + background: var(--background) !important; + color: var(--foreground) !important; +} diff --git a/.storybook/preview.ts b/.storybook/preview.ts index cf3db2e..5eb9c91 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -1,4 +1,5 @@ import "../src/globals.css"; +import "./preview.css"; import type { Preview } from "@storybook/react"; import * as darkModeConstants from "./addons/toggle-dark-mode/addon-constants"; diff --git a/src/components/ui/menubar.tsx b/src/components/ui/menubar.tsx index 41baf9e..51dd1bc 100644 --- a/src/components/ui/menubar.tsx +++ b/src/components/ui/menubar.tsx @@ -218,8 +218,20 @@ const MenubarShortcut = ({ MenubarShortcut.displayname = "MenubarShortcut"; export { - Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, - MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, - MenubarSubTrigger, MenubarTrigger + Menubar, + MenubarCheckboxItem, + MenubarContent, + MenubarGroup, + MenubarItem, + MenubarLabel, + MenubarMenu, + MenubarPortal, + MenubarRadioGroup, + MenubarRadioItem, + MenubarSeparator, + MenubarShortcut, + MenubarSub, + MenubarSubContent, + MenubarSubTrigger, + MenubarTrigger, }; - diff --git a/src/stories/accordion.stories.tsx b/src/stories/accordion.stories.tsx new file mode 100644 index 0000000..2e70374 --- /dev/null +++ b/src/stories/accordion.stories.tsx @@ -0,0 +1,30 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../components/ui/accordion'; + +const meta: Meta = { + title: 'UI/Accordion', + component: Accordion, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + + Is it accessible? + + Yes. It adheres to the WAI-ARIA design pattern. + + + + Is it styled? + + Yes. It comes with default styles that matches the other components' aesthetic. + + + + ), +}; diff --git a/src/stories/alert-dialog.stories.tsx b/src/stories/alert-dialog.stories.tsx new file mode 100644 index 0000000..d955f62 --- /dev/null +++ b/src/stories/alert-dialog.stories.tsx @@ -0,0 +1,34 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '../components/ui/alert-dialog'; +import { Button } from '../components/ui/button'; + +const meta: Meta = { + title: 'UI/AlertDialog', + component: AlertDialog, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + + + + + + Are you absolutely sure? + + This action cannot be undone. This will permanently delete your account and remove your data from our servers. + + + + Cancel + Continue + + + + ), +}; diff --git a/src/stories/alert.stories.tsx b/src/stories/alert.stories.tsx new file mode 100644 index 0000000..5710f3d --- /dev/null +++ b/src/stories/alert.stories.tsx @@ -0,0 +1,29 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Alert, AlertDescription, AlertTitle } from '../components/ui/alert'; + +const meta: Meta = { + title: 'UI/Alert', + component: Alert, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + Alert Title + This is an alert description. + + ), +}; + +export const Destructive: Story = { + render: () => ( + + Error + This is a destructive alert. + + ), +}; diff --git a/src/stories/aspect-ratio.stories.tsx b/src/stories/aspect-ratio.stories.tsx new file mode 100644 index 0000000..0cfec9b --- /dev/null +++ b/src/stories/aspect-ratio.stories.tsx @@ -0,0 +1,23 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { AspectRatio } from '../components/ui/aspect-ratio'; + +const meta: Meta = { + title: 'UI/AspectRatio', + component: AspectRatio, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + by Drew Beamer + + ), +}; diff --git a/src/stories/avatar.stories.tsx b/src/stories/avatar.stories.tsx new file mode 100644 index 0000000..ea239f1 --- /dev/null +++ b/src/stories/avatar.stories.tsx @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Avatar, AvatarFallback, AvatarImage } from '../components/ui/avatar'; + +const meta: Meta = { + title: 'UI/Avatar', + component: Avatar, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + + CN + + ), +}; diff --git a/src/stories/badge.stories.tsx b/src/stories/badge.stories.tsx new file mode 100644 index 0000000..2829cbc --- /dev/null +++ b/src/stories/badge.stories.tsx @@ -0,0 +1,27 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Badge } from '../components/ui/badge'; + +const meta: Meta = { + title: 'UI/Badge', + component: Badge, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => Default, +}; + +export const Secondary: Story = { + render: () => Secondary, +}; + +export const Destructive: Story = { + render: () => Destructive, +}; + +export const Outline: Story = { + render: () => Outline, +}; diff --git a/src/stories/breadcrumb.stories.tsx b/src/stories/breadcrumb.stories.tsx new file mode 100644 index 0000000..6b2b9b0 --- /dev/null +++ b/src/stories/breadcrumb.stories.tsx @@ -0,0 +1,31 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from '../components/ui/breadcrumb'; + +const meta: Meta = { + title: 'UI/Breadcrumb', + component: Breadcrumb, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + + + Home + + + + Docs + + + + Breadcrumb + + + + ), +}; diff --git a/src/stories/button.stories.ts b/src/stories/button.stories.tsx similarity index 75% rename from src/stories/button.stories.ts rename to src/stories/button.stories.tsx index 1ea4730..fec5e70 100644 --- a/src/stories/button.stories.ts +++ b/src/stories/button.stories.tsx @@ -4,11 +4,11 @@ import { Button } from "../components/ui/button"; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = { - title: "Example/Button", + title: "UI/Button", component: Button, parameters: { // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout - layout: "centered", + // layout: "centered", }, // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs tags: ["autodocs"], @@ -39,3 +39,19 @@ export const Secondary: Story = { children: "Secondary", }, }; + +export const Destructive: Story = { + render: () => , +}; + +export const Outline: Story = { + render: () => , +}; + +export const Ghost: Story = { + render: () => , +}; + +export const Link: Story = { + render: () => , +}; diff --git a/src/stories/card.stories.tsx b/src/stories/card.stories.tsx new file mode 100644 index 0000000..11fe9fb --- /dev/null +++ b/src/stories/card.stories.tsx @@ -0,0 +1,28 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../components/ui/card'; + +const meta: Meta = { + title: 'UI/Card', + component: Card, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + + Card Title + Card Description + + +

Card Content

+ + +

Card Footer

+ + + ), +}; diff --git a/src/stories/checkbox.stories.tsx b/src/stories/checkbox.stories.tsx new file mode 100644 index 0000000..6207e21 --- /dev/null +++ b/src/stories/checkbox.stories.tsx @@ -0,0 +1,29 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Checkbox } from '../components/ui/checkbox'; + +const meta: Meta = { + title: 'UI/Checkbox', + component: Checkbox, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => , +}; + +export const WithLabel: Story = { + render: () => ( +
+ + +
+ ), +}; diff --git a/src/stories/collapsible.stories.tsx b/src/stories/collapsible.stories.tsx new file mode 100644 index 0000000..7a2a9d8 --- /dev/null +++ b/src/stories/collapsible.stories.tsx @@ -0,0 +1,27 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../components/ui/collapsible'; +import { Button } from '../components/ui/button'; + +const meta: Meta = { + title: 'UI/Collapsible', + component: Collapsible, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + + + + +
+ Content that can be collapsed +
+ + + ), +}; diff --git a/src/stories/command.stories.tsx b/src/stories/command.stories.tsx new file mode 100644 index 0000000..28afefd --- /dev/null +++ b/src/stories/command.stories.tsx @@ -0,0 +1,27 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../components/ui/command'; + +const meta: Meta = { + title: 'UI/Command', + component: Command, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + + + No results found. + + Calendar + Search Emoji + Calculator + + + + ), +}; diff --git a/src/stories/context-menu.stories.tsx b/src/stories/context-menu.stories.tsx new file mode 100644 index 0000000..f6b8016 --- /dev/null +++ b/src/stories/context-menu.stories.tsx @@ -0,0 +1,27 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '../components/ui/context-menu'; + +const meta: Meta = { + title: 'UI/ContextMenu', + component: ContextMenu, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + + Right click here + + + Profile + Billing + Team + Subscription + + + ), +}; diff --git a/src/stories/dialog.stories.tsx b/src/stories/dialog.stories.tsx new file mode 100644 index 0000000..005cddf --- /dev/null +++ b/src/stories/dialog.stories.tsx @@ -0,0 +1,31 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '../components/ui/dialog'; +import { Button } from '../components/ui/button'; + +const meta: Meta = { + title: 'UI/Dialog', + component: Dialog, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + + + + + + Are you sure absolutely sure? + + This action cannot be undone. This will permanently delete your account + and remove your data from our servers. + + + + + ), +}; diff --git a/src/stories/drawer.stories.tsx b/src/stories/drawer.stories.tsx new file mode 100644 index 0000000..ae1e2ba --- /dev/null +++ b/src/stories/drawer.stories.tsx @@ -0,0 +1,28 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from '../components/ui/drawer'; +import { Button } from '../components/ui/button'; + +const meta: Meta = { + title: 'UI/Drawer', + component: Drawer, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + + + + + + Are you absolutely sure? + This action cannot be undone. + + + + ), +}; diff --git a/src/stories/dropdown-menu.stories.tsx b/src/stories/dropdown-menu.stories.tsx new file mode 100644 index 0000000..0b3f306 --- /dev/null +++ b/src/stories/dropdown-menu.stories.tsx @@ -0,0 +1,30 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '../components/ui/dropdown-menu'; +import { Button } from '../components/ui/button'; + +const meta: Meta = { + title: 'UI/DropdownMenu', + component: DropdownMenu, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + + + + + My Account + + Profile + Billing + Team + Subscription + + + ), +}; diff --git a/src/stories/hover-card.stories.tsx b/src/stories/hover-card.stories.tsx new file mode 100644 index 0000000..a4887bc --- /dev/null +++ b/src/stories/hover-card.stories.tsx @@ -0,0 +1,25 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { HoverCard, HoverCardContent, HoverCardTrigger } from '../components/ui/hover-card'; +import { Button } from '../components/ui/button'; + +const meta: Meta = { + title: 'UI/HoverCard', + component: HoverCard, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + + + + + The React Framework – created and maintained by @vercel. + + + ), +}; diff --git a/src/stories/input-otp.stories.tsx b/src/stories/input-otp.stories.tsx new file mode 100644 index 0000000..6ef22e3 --- /dev/null +++ b/src/stories/input-otp.stories.tsx @@ -0,0 +1,26 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { InputOTP, InputOTPGroup, InputOTPSlot } from '../components/ui/input-otp'; + +const meta: Meta = { + title: 'UI/InputOTP', + component: InputOTP, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + + + + + + + + + + ), +}; diff --git a/src/stories/input.stories.tsx b/src/stories/input.stories.tsx new file mode 100644 index 0000000..62c3f2a --- /dev/null +++ b/src/stories/input.stories.tsx @@ -0,0 +1,19 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Input } from '../components/ui/input'; + +const meta: Meta = { + title: 'UI/Input', + component: Input, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => , +}; + +export const Disabled: Story = { + render: () => , +}; diff --git a/src/stories/label.stories.tsx b/src/stories/label.stories.tsx new file mode 100644 index 0000000..d99a62e --- /dev/null +++ b/src/stories/label.stories.tsx @@ -0,0 +1,15 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Label } from '../components/ui/label'; + +const meta: Meta = { + title: 'UI/Label', + component: Label, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => , +}; diff --git a/src/stories/menubar.stories.tsx b/src/stories/menubar.stories.tsx new file mode 100644 index 0000000..2fa9e7f --- /dev/null +++ b/src/stories/menubar.stories.tsx @@ -0,0 +1,27 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarTrigger } from '../components/ui/menubar'; + +const meta: Meta = { + title: 'UI/Menubar', + component: Menubar, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + + File + + New Tab + New Window + Open... + Save + + + + ), +}; diff --git a/src/stories/navigation-menu.stories.tsx b/src/stories/navigation-menu.stories.tsx new file mode 100644 index 0000000..90eca5d --- /dev/null +++ b/src/stories/navigation-menu.stories.tsx @@ -0,0 +1,26 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from '../components/ui/navigation-menu'; + +const meta: Meta = { + title: 'UI/NavigationMenu', + component: NavigationMenu, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + + + Item One + + Link + + + + + ), +}; diff --git a/src/stories/pagination.stories.tsx b/src/stories/pagination.stories.tsx new file mode 100644 index 0000000..6277753 --- /dev/null +++ b/src/stories/pagination.stories.tsx @@ -0,0 +1,40 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from '../components/ui/pagination'; + +const meta: Meta = { + title: 'UI/Pagination', + component: Pagination, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + + + + + + 1 + + + + 2 + + + + 3 + + + + + + + + + + ), +}; diff --git a/src/stories/popover.stories.tsx b/src/stories/popover.stories.tsx new file mode 100644 index 0000000..19083f0 --- /dev/null +++ b/src/stories/popover.stories.tsx @@ -0,0 +1,28 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Popover, PopoverContent, PopoverTrigger } from '../components/ui/popover'; +import { Button } from '../components/ui/button'; + +const meta: Meta = { + title: 'UI/Popover', + component: Popover, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + + + + +
+

Popover Content

+

This is the content of the popover.

+
+ + + ), +}; diff --git a/src/stories/progress.stories.tsx b/src/stories/progress.stories.tsx new file mode 100644 index 0000000..89fbab1 --- /dev/null +++ b/src/stories/progress.stories.tsx @@ -0,0 +1,15 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Progress } from '../components/ui/progress'; + +const meta: Meta = { + title: 'UI/Progress', + component: Progress, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => , +}; diff --git a/src/stories/radio-group.stories.tsx b/src/stories/radio-group.stories.tsx new file mode 100644 index 0000000..519986b --- /dev/null +++ b/src/stories/radio-group.stories.tsx @@ -0,0 +1,27 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { RadioGroup, RadioGroupItem } from '../components/ui/radio-group'; +import { Label } from '../components/ui/label'; + +const meta: Meta = { + title: 'UI/RadioGroup', + component: RadioGroup, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + +
+ + +
+
+ + +
+ + ), +}; diff --git a/src/stories/resizable.stories.tsx b/src/stories/resizable.stories.tsx new file mode 100644 index 0000000..0dc952a --- /dev/null +++ b/src/stories/resizable.stories.tsx @@ -0,0 +1,32 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../components/ui/resizable'; + +const meta: Meta = { + title: 'UI/Resizable', + component: ResizablePanelGroup, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + +
+ One +
+ + + +
+ Two +
+ + + ), +}; diff --git a/src/stories/scroll-area.stories.tsx b/src/stories/scroll-area.stories.tsx new file mode 100644 index 0000000..2169e72 --- /dev/null +++ b/src/stories/scroll-area.stories.tsx @@ -0,0 +1,26 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { ScrollArea } from '../components/ui/scroll-area'; + +const meta: Meta = { + title: 'UI/ScrollArea', + component: ScrollArea, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + +
+

Tags

+ {Array.from({ length: 50 }).map((_, i) => ( +
+ Tag {i + 1} +
+ ))} +
+ + ), +}; diff --git a/src/stories/select.stories.tsx b/src/stories/select.stories.tsx new file mode 100644 index 0000000..062c60e --- /dev/null +++ b/src/stories/select.stories.tsx @@ -0,0 +1,26 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../components/ui/select'; + +const meta: Meta = { + title: 'UI/Select', + component: Select, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + ), +}; diff --git a/src/stories/separator.stories.tsx b/src/stories/separator.stories.tsx new file mode 100644 index 0000000..bf8bbfb --- /dev/null +++ b/src/stories/separator.stories.tsx @@ -0,0 +1,30 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Separator } from '../components/ui/separator'; + +const meta: Meta = { + title: 'UI/Separator', + component: Separator, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( +
+
+

Radix Primitives

+

An open-source UI component library.

+
+ +
+
Blog
+ +
Docs
+ +
Source
+
+
+ ), +}; diff --git a/src/stories/sheet.stories.tsx b/src/stories/sheet.stories.tsx new file mode 100644 index 0000000..53b400e --- /dev/null +++ b/src/stories/sheet.stories.tsx @@ -0,0 +1,31 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '../components/ui/sheet'; +import { Button } from '../components/ui/button'; + +const meta: Meta = { + title: 'UI/Sheet', + component: Sheet, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + + + + + + Are you sure absolutely sure? + + This action cannot be undone. This will permanently delete your account + and remove your data from our servers. + + + + + ), +}; diff --git a/src/stories/skeleton.stories.tsx b/src/stories/skeleton.stories.tsx new file mode 100644 index 0000000..397f4fb --- /dev/null +++ b/src/stories/skeleton.stories.tsx @@ -0,0 +1,23 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Skeleton } from '../components/ui/skeleton'; + +const meta: Meta = { + title: 'UI/Skeleton', + component: Skeleton, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( +
+ +
+ + +
+
+ ), +}; diff --git a/src/stories/slider.stories.tsx b/src/stories/slider.stories.tsx new file mode 100644 index 0000000..948b1f0 --- /dev/null +++ b/src/stories/slider.stories.tsx @@ -0,0 +1,15 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Slider } from '../components/ui/slider'; + +const meta: Meta = { + title: 'UI/Slider', + component: Slider, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => , +}; diff --git a/src/stories/switch.stories.tsx b/src/stories/switch.stories.tsx new file mode 100644 index 0000000..7f432bc --- /dev/null +++ b/src/stories/switch.stories.tsx @@ -0,0 +1,21 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Switch } from '../components/ui/switch'; +import { Label } from '../components/ui/label'; + +const meta: Meta = { + title: 'UI/Switch', + component: Switch, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( +
+ + +
+ ), +}; diff --git a/src/stories/table.stories.tsx b/src/stories/table.stories.tsx new file mode 100644 index 0000000..7ab132b --- /dev/null +++ b/src/stories/table.stories.tsx @@ -0,0 +1,35 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '../components/ui/table'; + +const meta: Meta = { + title: 'UI/Table', + component: Table, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + A list of your recent invoices. + + + Invoice + Status + Method + Amount + + + + + INV001 + Paid + Credit Card + $250.00 + + +
+ ), +}; diff --git a/src/stories/tabs.stories.tsx b/src/stories/tabs.stories.tsx new file mode 100644 index 0000000..afcc8fd --- /dev/null +++ b/src/stories/tabs.stories.tsx @@ -0,0 +1,24 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Tabs, TabsContent, TabsList, TabsTrigger } from '../components/ui/tabs'; + +const meta: Meta = { + title: 'UI/Tabs', + component: Tabs, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + + Account + Password + + Make changes to your account here. + Change your password here. + + ), +}; diff --git a/src/stories/textarea.stories.tsx b/src/stories/textarea.stories.tsx new file mode 100644 index 0000000..8e8fa24 --- /dev/null +++ b/src/stories/textarea.stories.tsx @@ -0,0 +1,15 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Textarea } from '../components/ui/textarea'; + +const meta: Meta = { + title: 'UI/Textarea', + component: Textarea, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () =>