diff --git a/package-lock.json b/package-lock.json index 23dc1d4..58e1fb1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38,6 +38,7 @@ "@radix-ui/react-toggle": "^1.0.3", "@radix-ui/react-toggle-group": "^1.0.4", "@radix-ui/react-tooltip": "^1.0.7", + "@tanstack/react-table": "^8.11.0", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "cmdk": "^0.2.0", @@ -45,8 +46,7 @@ "react-day-picker": "^8.9.1", "react-hook-form": "^7.49.2", "tailwind-merge": "^2.1.0", - "tailwindcss-animate": "^1.0.7", - "zod": "^3.22.4" + "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@rollup/plugin-commonjs": "^22.0.0", @@ -62,6 +62,7 @@ "@storybook/test": "^7.6.5", "@tailwindcss/typography": "^0.5.10", "autoprefixer": "^10.4.16", + "lucide-react": "^0.298.0", "postcss": "^8.4.32", "prop-types": "^15.8.1", "react": "^18.2.0", @@ -77,7 +78,8 @@ "serve": "^14.2.1", "storybook": "^7.6.5", "styled-components": "^6.1.1", - "tailwindcss": "^3.3.6" + "tailwindcss": "^3.3.6", + "zod": "^3.22.4" } }, "node_modules/@adobe/css-tools": { @@ -6457,6 +6459,37 @@ "node": ">=4" } }, + "node_modules/@tanstack/react-table": { + "version": "8.11.0", + "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.11.0.tgz", + "integrity": "sha512-47wdYFlsbJlR6qt4F38nTGo93E6wNkXlN8t1TUI5SpSGiewx+KzBayMjfud3LgqbPLYYcpHby/tGkIF3tR8Upg==", + "dependencies": { + "@tanstack/table-core": "8.11.0" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": ">=16", + "react-dom": ">=16" + } + }, + "node_modules/@tanstack/table-core": { + "version": "8.11.0", + "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.11.0.tgz", + "integrity": "sha512-7SC8/v6cXbUriOs2UISN8Jho3ttnA8cRZgusLn15b8meb28prHnWg4t4oNSHIR3rYn0g7iiIg+pax2CtBnyffg==", + "engines": { + "node": ">=12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, "node_modules/@testing-library/dom": { "version": "9.3.3", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.3.tgz", @@ -12022,6 +12055,15 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "0.298.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.298.0.tgz", + "integrity": "sha512-tWoxZ663Zf/n8VxXTHnTJsU/w1ysWT1LORnIL1pzqElFdSqBhWbZeJ3sLdCZ5FpzpbkpkYEtluhuTyG2BTDYNQ==", + "dev": true, + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/lz-string": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz", @@ -16740,6 +16782,7 @@ "version": "3.22.4", "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz", "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==", + "dev": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } @@ -20979,6 +21022,19 @@ } } }, + "@tanstack/react-table": { + "version": "8.11.0", + "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.11.0.tgz", + "integrity": "sha512-47wdYFlsbJlR6qt4F38nTGo93E6wNkXlN8t1TUI5SpSGiewx+KzBayMjfud3LgqbPLYYcpHby/tGkIF3tR8Upg==", + "requires": { + "@tanstack/table-core": "8.11.0" + } + }, + "@tanstack/table-core": { + "version": "8.11.0", + "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.11.0.tgz", + "integrity": "sha512-7SC8/v6cXbUriOs2UISN8Jho3ttnA8cRZgusLn15b8meb28prHnWg4t4oNSHIR3rYn0g7iiIg+pax2CtBnyffg==" + }, "@testing-library/dom": { "version": "9.3.3", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.3.tgz", @@ -25154,6 +25210,13 @@ "yallist": "^3.0.2" } }, + "lucide-react": { + "version": "0.298.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.298.0.tgz", + "integrity": "sha512-tWoxZ663Zf/n8VxXTHnTJsU/w1ysWT1LORnIL1pzqElFdSqBhWbZeJ3sLdCZ5FpzpbkpkYEtluhuTyG2BTDYNQ==", + "dev": true, + "requires": {} + }, "lz-string": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz", @@ -28531,7 +28594,8 @@ "zod": { "version": "3.22.4", "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz", - "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==" + "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==", + "dev": true } } } diff --git a/package.json b/package.json index 3da7595..d5b53af 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "@storybook/test": "^7.6.5", "@tailwindcss/typography": "^0.5.10", "autoprefixer": "^10.4.16", + "lucide-react": "^0.298.0", "postcss": "^8.4.32", "prop-types": "^15.8.1", "react": "^18.2.0", @@ -51,7 +52,8 @@ "serve": "^14.2.1", "storybook": "^7.6.5", "styled-components": "^6.1.1", - "tailwindcss": "^3.3.6" + "tailwindcss": "^3.3.6", + "zod": "^3.22.4" }, "dependencies": { "@hookform/resolvers": "^3.3.2", @@ -83,6 +85,7 @@ "@radix-ui/react-toggle": "^1.0.3", "@radix-ui/react-toggle-group": "^1.0.4", "@radix-ui/react-tooltip": "^1.0.7", + "@tanstack/react-table": "^8.11.0", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "cmdk": "^0.2.0", @@ -90,7 +93,6 @@ "react-day-picker": "^8.9.1", "react-hook-form": "^7.49.2", "tailwind-merge": "^2.1.0", - "tailwindcss-animate": "^1.0.7", - "zod": "^3.22.4" + "tailwindcss-animate": "^1.0.7" } } diff --git a/stories/accordion.stories.tsx b/stories/accordion.stories.tsx new file mode 100644 index 0000000..8568bce --- /dev/null +++ b/stories/accordion.stories.tsx @@ -0,0 +1,44 @@ +import { Meta, StoryObj } from "@storybook/react"; +import React from "react"; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "src/components/ui/accordion"; +export function AccordionDemo() { + return ( + + + 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. + + + + Is it animated? + + Yes. It's animated by default, but you can disable it if you prefer. + + + + ); +} + +const meta: Meta = { + component: AccordionDemo, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/stories/alert-dialog.stories.tsx b/stories/alert-dialog.stories.tsx new file mode 100644 index 0000000..962c55e --- /dev/null +++ b/stories/alert-dialog.stories.tsx @@ -0,0 +1,48 @@ +import React from "react"; +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, + AlertDialogTrigger, +} from "src/components/ui/alert-dialog"; +import { Button } from "src/components/ui/button"; +export function AlertDialogDemo() { + return ( + + + + + + + Are you absolutely sure? + + This action cannot be undone. This will permanently delete your + account and remove your data from our servers. + + + + Cancel + Continue + + + + ); +} + +import type { Meta, StoryObj } from "@storybook/react"; + +const meta: Meta = { + component: AlertDialogDemo, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/stories/alert.stories.tsx b/stories/alert.stories.tsx new file mode 100644 index 0000000..5f209a9 --- /dev/null +++ b/stories/alert.stories.tsx @@ -0,0 +1,26 @@ +import { RocketIcon } from "@radix-ui/react-icons"; +import { Meta, StoryObj } from "@storybook/react"; + +import React from "react"; +import { Alert, AlertDescription, AlertTitle } from "src/components/ui/alert"; +export function AlertDemo() { + return ( + + + Heads up! + + You can add components to your app using the cli. + + + ); +} +const meta: Meta = { + component: AlertDemo, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/stories/aspect-ratio.stories.tsx b/stories/aspect-ratio.stories.tsx new file mode 100644 index 0000000..7da5694 --- /dev/null +++ b/stories/aspect-ratio.stories.tsx @@ -0,0 +1,25 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import React from "react"; +import { AspectRatio } from "src/components/ui/aspect-ratio"; +export function AspectRatioDemo() { + return ( + + Photo by Drew Beamer + + ); +} + +const meta: Meta = { + component: AspectRatio, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/stories/avatar.stories.tsx b/stories/avatar.stories.tsx new file mode 100644 index 0000000..95ed042 --- /dev/null +++ b/stories/avatar.stories.tsx @@ -0,0 +1,23 @@ +import React from "react"; +import { Avatar, AvatarFallback, AvatarImage } from "src/components/ui/avatar"; +export function AvatarDemo() { + return ( + + + CN + + ); +} + +import type { Meta, StoryObj } from "@storybook/react"; + +const meta: Meta = { + component: AvatarDemo, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/stories/badge.stories.tsx b/stories/badge.stories.tsx new file mode 100644 index 0000000..b5ce695 --- /dev/null +++ b/stories/badge.stories.tsx @@ -0,0 +1,23 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import React from "react"; +import { Badge } from "src/components/ui/badge"; + +const meta: Meta = { + component: () => { + return ( +
+ Default + Destructive + Outlined + Secondary +
+ ); + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/stories/calendar.stories.tsx b/stories/calendar.stories.tsx new file mode 100644 index 0000000..a566a80 --- /dev/null +++ b/stories/calendar.stories.tsx @@ -0,0 +1,36 @@ +"use client"; + +import * as React from "react"; + +import { Calendar } from "src/components/ui/calendar"; + +export function CalendarDemo() { + const [dateRange, setDateRange] = React.useState({ + from: new Date(), + }); + + return ( + + ); +} + +import type { Meta, StoryObj } from "@storybook/react"; +import { DateRange } from "react-day-picker"; + +const meta: Meta = { + component: CalendarDemo, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + children: "default", + }, +}; diff --git a/stories/collapsible.stories.tsx b/stories/collapsible.stories.tsx new file mode 100644 index 0000000..f0863ae --- /dev/null +++ b/stories/collapsible.stories.tsx @@ -0,0 +1,59 @@ +"use client"; + +import { CaretSortIcon } from "@radix-ui/react-icons"; +import * as React from "react"; + +import { Button } from "src/components/ui/button"; +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "src/components/ui/collapsible"; + +export function CollapsibleDemo() { + const [isOpen, setIsOpen] = React.useState(false); + + return ( + +
+

+ @peduarte starred 3 repositories +

+ + + +
+
+ @radix-ui/primitives +
+ +
+ @radix-ui/colors +
+
+ @stitches/react +
+ + + ); +} + +import type { Meta, StoryObj } from "@storybook/react"; + +const meta: Meta = { + component: CollapsibleDemo, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/stories/combobox.stories.tsx b/stories/combobox.stories.tsx new file mode 100644 index 0000000..cab3484 --- /dev/null +++ b/stories/combobox.stories.tsx @@ -0,0 +1,102 @@ +"use client"; + +import type { Meta, StoryObj } from "@storybook/react"; + +import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"; +import * as React from "react"; + +import { Button } from "src/components/ui/button"; +import { + Command, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, +} from "src/components/ui/command"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "src/components/ui/popover"; +import { cn } from "src/utils"; + +const frameworks = [ + { + value: "next.js", + label: "Next.js", + }, + { + value: "sveltekit", + label: "SvelteKit", + }, + { + value: "nuxt.js", + label: "Nuxt.js", + }, + { + value: "remix", + label: "Remix", + }, + { + value: "astro", + label: "Astro", + }, +]; + +const meta: Meta = { + component: () => { + const [open, setOpen] = React.useState(false); + const [value, setValue] = React.useState(""); + + return ( + + + + + + + + No framework found. + + {frameworks.map((framework) => ( + { + setValue(currentValue === value ? "" : currentValue); + setOpen(false); + }} + > + {framework.label} + + + ))} + + + + + ); + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/stories/command.stories.tsx b/stories/command.stories.tsx new file mode 100644 index 0000000..2901fd2 --- /dev/null +++ b/stories/command.stories.tsx @@ -0,0 +1,73 @@ +import { + CalendarIcon, + EnvelopeClosedIcon, + FaceIcon, + GearIcon, + PersonIcon, + RocketIcon, +} from "@radix-ui/react-icons"; +import React from "react"; +import { + Command, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList, + CommandSeparator, + CommandShortcut, +} from "src/components/ui/command"; + +import type { Meta, StoryObj } from "@storybook/react"; + +const meta: Meta = { + component: () => { + return ( + + + + No results found. + + + + Calendar + + + + Search Emoji + + + + Launch + + + + + + + Profile + ⌘P + + + + Mail + ⌘B + + + + Settings + ⌘S + + + + + ); + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/stories/context-menu.stories.tsx b/stories/context-menu.stories.tsx new file mode 100644 index 0000000..e77c88f --- /dev/null +++ b/stories/context-menu.stories.tsx @@ -0,0 +1,78 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import React from "react"; +import { + ContextMenu, + ContextMenuCheckboxItem, + ContextMenuContent, + ContextMenuItem, + ContextMenuLabel, + ContextMenuRadioGroup, + ContextMenuRadioItem, + ContextMenuSeparator, + ContextMenuShortcut, + ContextMenuSub, + ContextMenuSubContent, + ContextMenuSubTrigger, + ContextMenuTrigger, +} from "src/components/ui/context-menu"; + +const meta: Meta = { + component: () => { + return ( + + + Right click here + + + + Back + ⌘[ + + + Forward + ⌘] + + + Reload + ⌘R + + + More Tools + + + Save Page As... + ⇧⌘S + + Create Shortcut... + Name Window... + + Developer Tools + + + + + Show Bookmarks Bar + ⌘⇧B + + Show Full URLs + + + People + + + Pedro Duarte + + Colm Tuite + + + + ); + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/stories/date-picker.stories.tsx b/stories/date-picker.stories.tsx new file mode 100644 index 0000000..051a907 --- /dev/null +++ b/stories/date-picker.stories.tsx @@ -0,0 +1,53 @@ +"use client"; +import type { Meta, StoryObj } from "@storybook/react"; +import { format } from "date-fns"; +import { Calendar as CalendarIcon } from "lucide-react"; +import * as React from "react"; +import { Button } from "src/components/ui/button"; +import { Calendar } from "src/components/ui/calendar"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "src/components/ui/popover"; +import { cn } from "src/utils"; + +const meta: Meta = { + component: () => { + const [date, setDate] = React.useState(); + + return ( + + + + + + + + + ); + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + children: "default", + }, +}; diff --git a/stories/dropdown-menu.stories.tsx b/stories/dropdown-menu.stories.tsx new file mode 100644 index 0000000..76344bf --- /dev/null +++ b/stories/dropdown-menu.stories.tsx @@ -0,0 +1,37 @@ +"use client"; +import React from "react"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "src/components/ui/dropdown-menu"; + +import type { Meta, StoryObj } from "@storybook/react"; + +const meta: Meta = { + component: () => { + return ( + + Open + + My Account + + Profile + Billing + Team + Subscription + + + ); + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/stories/form.stories.tsx b/stories/form.stories.tsx new file mode 100644 index 0000000..f24af00 --- /dev/null +++ b/stories/form.stories.tsx @@ -0,0 +1,71 @@ +"use client"; +import { zodResolver } from "@hookform/resolvers/zod"; +import React from "react"; +import { useForm } from "react-hook-form"; +import { Button } from "src/components/ui/button"; +import { + Form, + FormControl, + FormDescription, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "src/components/ui/form"; +import { Input } from "src/components/ui/input"; +import { z } from "zod"; + +import type { Meta, StoryObj } from "@storybook/react"; + +const formSchema = z.object({ + username: z.string().min(2, { + message: "Username must be at least 2 characters.", + }), +}); + +const meta: Meta = { + component: () => { + // ... + const form = useForm>({ + resolver: zodResolver(formSchema), + defaultValues: { + username: "", + }, + }); + function onSubmit(values: z.infer) { + // Do something with the form values. + // ✅ This will be type-safe and validated. + console.log(values); + } + return ( +
+ + ( + + Username + + + + + This is your public display name. + + + + )} + /> + + + + ); + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/stories/hover-card.stories.tsx b/stories/hover-card.stories.tsx new file mode 100644 index 0000000..34b3da6 --- /dev/null +++ b/stories/hover-card.stories.tsx @@ -0,0 +1,50 @@ +import { CalendarIcon } from "@radix-ui/react-icons"; +import React from "react"; +import { Avatar, AvatarFallback, AvatarImage } from "src/components/ui/avatar"; +import { Button } from "src/components/ui/button"; +import { + HoverCard, + HoverCardContent, + HoverCardTrigger, +} from "src/components/ui/hover-card"; + +import type { Meta, StoryObj } from "@storybook/react"; + +const meta: Meta = { + component: () => { + return ( + + + + + +
+ + + VC + +
+

@nextjs

+

+ The React Framework – created and maintained by @vercel. +

+
+ {" "} + + Joined December 2021 + +
+
+
+ + + ); + }, +}; + +export default meta; +type Story = StoryObj; + +export const Text: Story = { + args: {}, +}; diff --git a/stories/popover.stories.tsx b/stories/popover.stories.tsx new file mode 100644 index 0000000..f07ad13 --- /dev/null +++ b/stories/popover.stories.tsx @@ -0,0 +1,74 @@ +import { Button } from "src/components/ui/button"; +import { Input } from "src/components/ui/input"; +import { Label } from "src/components/ui/label"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "src/components/ui/popover"; + +import type { Meta, StoryObj } from "@storybook/react"; +import React from "react"; + +const meta: Meta = { + component: (args) => { + return ( + + + + + +
+
+

Dimensions

+

+ Set the dimensions for the layer. +

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + + ); + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/stories/switch.stories.tsx b/stories/switch.stories.tsx index 8802713..653b92f 100644 --- a/stories/switch.stories.tsx +++ b/stories/switch.stories.tsx @@ -19,7 +19,7 @@ const meta: Meta = { export default meta; type Story = StoryObj; -export const Search: Story = { +export const Default: Story = { args: { checked: true, }, diff --git a/stories/table.stories.tsx b/stories/table.stories.tsx new file mode 100644 index 0000000..08ff789 --- /dev/null +++ b/stories/table.stories.tsx @@ -0,0 +1,100 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import React from "react"; +import { + Table, + TableBody, + TableCaption, + TableCell, + TableFooter, + TableHead, + TableHeader, + TableRow, +} from "src/components/ui/table"; + +const invoices = [ + { + invoice: "INV001", + paymentStatus: "Paid", + totalAmount: "$250.00", + paymentMethod: "Credit Card", + }, + { + invoice: "INV002", + paymentStatus: "Pending", + totalAmount: "$150.00", + paymentMethod: "PayPal", + }, + { + invoice: "INV003", + paymentStatus: "Unpaid", + totalAmount: "$350.00", + paymentMethod: "Bank Transfer", + }, + { + invoice: "INV004", + paymentStatus: "Paid", + totalAmount: "$450.00", + paymentMethod: "Credit Card", + }, + { + invoice: "INV005", + paymentStatus: "Paid", + totalAmount: "$550.00", + paymentMethod: "PayPal", + }, + { + invoice: "INV006", + paymentStatus: "Pending", + totalAmount: "$200.00", + paymentMethod: "Bank Transfer", + }, + { + invoice: "INV007", + paymentStatus: "Unpaid", + totalAmount: "$300.00", + paymentMethod: "Credit Card", + }, +]; + +const meta: Meta = { + component: () => { + return ( + + A list of your recent invoices. + + + Invoice + Status + Method + Amount + + + + {invoices.map((invoice) => ( + + {invoice.invoice} + {invoice.paymentStatus} + {invoice.paymentMethod} + + {invoice.totalAmount} + + + ))} + + + + Total + $2,500.00 + + +
+ ); + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/stories/toggle-group.stories.tsx b/stories/toggle-group.stories.tsx new file mode 100644 index 0000000..4fb9eaf --- /dev/null +++ b/stories/toggle-group.stories.tsx @@ -0,0 +1,39 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import React from "react"; +import { Button } from "src/components/ui/button"; + +import { + FontBoldIcon, + FontItalicIcon, + UnderlineIcon, +} from "@radix-ui/react-icons"; + +import { ToggleGroup, ToggleGroupItem } from "src/components/ui/toggle-group"; + +const meta: Meta = { + component: () => { + return ( + + + + + + + + + + + + ); + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/stories/toggle.stories.tsx b/stories/toggle.stories.tsx new file mode 100644 index 0000000..62ee29f --- /dev/null +++ b/stories/toggle.stories.tsx @@ -0,0 +1,22 @@ +import { FontBoldIcon } from "@radix-ui/react-icons"; +import type { Meta, StoryObj } from "@storybook/react"; +import React from "react"; + +import { Toggle } from "src/components/ui/toggle"; + +const meta: Meta = { + component: () => { + return ( + + + + ); + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/stories/tooltip.stories.tsx b/stories/tooltip.stories.tsx new file mode 100644 index 0000000..4e409de --- /dev/null +++ b/stories/tooltip.stories.tsx @@ -0,0 +1,34 @@ +import { Meta, StoryObj } from "@storybook/react"; +import React from "react"; +import { Button } from "src/components/ui/button"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "src/components/ui/tooltip"; +export function TooltipDemo() { + return ( + + + + + + +

Add to library

+ + + + ); +} + +const meta: Meta = { + component: TooltipDemo, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: {}, +};