From 8532a61056a2728cb1be89d87ee230acf6e0fe47 Mon Sep 17 00:00:00 2001 From: aidanCQ Date: Mon, 18 Dec 2023 16:57:58 +0000 Subject: [PATCH] Clean up. --- .storybook/preview-head.html | 7 + components.json | 2 +- src/styles.css | 1 + stories/atoms/accordion.stories.tsx | 6 +- stories/atoms/alert-dialog.stories.tsx | 6 +- stories/atoms/alert.stories.tsx | 8 +- stories/atoms/aspect-ratio.stories.tsx | 12 +- stories/atoms/avatar.stories.tsx | 4 +- stories/atoms/badge.stories.tsx | 28 +-- stories/atoms/button.stories.tsx | 8 +- stories/atoms/calendar.stories.tsx | 11 +- stories/atoms/card.stories.tsx | 89 +++++---- stories/atoms/checkbox.stories.tsx | 52 +++--- stories/atoms/collapsible.stories.tsx | 7 +- stories/atoms/colors.stories.tsx | 69 ++++--- stories/atoms/combobox.stories.tsx | 105 +++++------ stories/atoms/command.stories.tsx | 92 +++++----- stories/atoms/context-menu.stories.tsx | 108 +++++------ stories/atoms/date-picker.stories.tsx | 64 ++++--- stories/atoms/dialog.stories.tsx | 45 +++-- stories/atoms/dropdown-menu.stories.tsx | 38 ++-- stories/atoms/form.stories.tsx | 81 +++++---- stories/atoms/hover-card.stories.tsx | 63 ++++--- stories/atoms/navigation-menu.stories.tsx | 180 +++++++++++++++++++ stories/atoms/popover.stories.tsx | 8 +- stories/atoms/progress.stories.tsx | 8 +- stories/atoms/radio.stories.tsx | 45 +++-- stories/atoms/scroll-area.stories.tsx | 12 +- stories/atoms/select.stories.tsx | 47 +++-- stories/atoms/separator.stories.tsx | 3 +- stories/atoms/sheet.stories.tsx | 39 ++-- stories/atoms/skeleton.stories.tsx | 8 +- stories/atoms/slider.stories.tsx | 12 +- stories/atoms/switch.stories.tsx | 10 +- stories/atoms/table.stories.tsx | 8 +- stories/atoms/tabs.stories.tsx | 10 +- stories/atoms/text-area.stories.tsx | 10 +- stories/atoms/toast.stories.tsx | 11 +- stories/atoms/toggle-group.stories.tsx | 5 +- stories/atoms/toggle.stories.tsx | 4 +- stories/atoms/tooltip.stories.tsx | 6 +- stories/atoms/typography.stories.tsx | 103 +++++++++-- stories/molecules/navbar.stories.tsx | 177 ++++++++++++++++++ stories/molecules/slide-in.stories.tsx | 4 +- stories/molecules/theme-selector.stories.tsx | 3 +- tailwind.config.ts | 5 +- 46 files changed, 996 insertions(+), 628 deletions(-) create mode 100644 stories/atoms/navigation-menu.stories.tsx create mode 100644 stories/molecules/navbar.stories.tsx diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 20802af..d90b569 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -7,3 +7,10 @@ src="dist/src/utils/syncTheme.js" type="application/javascript" > + + + + diff --git a/components.json b/components.json index db1bb2d..b1ac0f6 100644 --- a/components.json +++ b/components.json @@ -4,7 +4,7 @@ "rsc": true, "tsx": true, "tailwind": { - "config": "src/tailwind.config.ts", + "config": "tailwind.config.ts", "css": "src/globals.css", "baseColor": "zinc", "cssVariables": true diff --git a/src/styles.css b/src/styles.css index 6011ac2..4064cb0 100644 --- a/src/styles.css +++ b/src/styles.css @@ -8,5 +8,6 @@ } body { @apply bg-background text-foreground; + @apply font-sans; } } diff --git a/stories/atoms/accordion.stories.tsx b/stories/atoms/accordion.stories.tsx index 917888c..ada91a5 100644 --- a/stories/atoms/accordion.stories.tsx +++ b/stories/atoms/accordion.stories.tsx @@ -1,12 +1,11 @@ import { Meta, StoryObj } from "@storybook/react"; -import React from "react"; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "src/atoms/accordion"; -export function AccordionDemo() { +function AccordionDemo() { return ( @@ -37,8 +36,7 @@ const meta: Meta = { }; export default meta; -type Story = StoryObj; -export const Default: Story = { +export const Default: StoryObj = { args: {}, }; diff --git a/stories/atoms/alert-dialog.stories.tsx b/stories/atoms/alert-dialog.stories.tsx index 68f88d8..422743d 100644 --- a/stories/atoms/alert-dialog.stories.tsx +++ b/stories/atoms/alert-dialog.stories.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { AlertDialog, AlertDialogAction, @@ -11,7 +10,7 @@ import { AlertDialogTrigger, } from "src/atoms/alert-dialog"; import { Button } from "src/atoms/button"; -export function AlertDialogDemo() { +function AlertDialogDemo() { return ( @@ -41,8 +40,7 @@ const meta: Meta = { }; export default meta; -type Story = StoryObj; -export const Default: Story = { +export const Default: StoryObj = { args: {}, }; diff --git a/stories/atoms/alert.stories.tsx b/stories/atoms/alert.stories.tsx index 5da49f6..7656641 100644 --- a/stories/atoms/alert.stories.tsx +++ b/stories/atoms/alert.stories.tsx @@ -1,7 +1,7 @@ import { RocketIcon } from "@radix-ui/react-icons"; -import { Meta, StoryObj } from "@storybook/react"; +import { Meta } from "@storybook/react"; -import React from "react"; +import type { StoryObj } from "@storybook/react"; import { Alert, AlertDescription, AlertTitle } from "src/atoms/alert"; export function AlertDemo() { @@ -15,13 +15,13 @@ export function AlertDemo() { ); } + const meta: Meta = { component: AlertDemo, }; export default meta; -type Story = StoryObj; -export const Default: Story = { +export const Default: StoryObj = { args: {}, }; diff --git a/stories/atoms/aspect-ratio.stories.tsx b/stories/atoms/aspect-ratio.stories.tsx index 0e113b7..213a359 100644 --- a/stories/atoms/aspect-ratio.stories.tsx +++ b/stories/atoms/aspect-ratio.stories.tsx @@ -1,5 +1,4 @@ -import type { Meta, StoryObj } from "@storybook/react"; -import React from "react"; +import type { Meta } from "@storybook/react"; import { AspectRatio } from "src/atoms/aspect-ratio"; export function AspectRatioDemo() { return ( @@ -13,13 +12,14 @@ export function AspectRatioDemo() { ); } -const meta: Meta = { - component: AspectRatio, +import type { StoryObj } from "@storybook/react"; + +const meta: Meta = { + component: AspectRatioDemo, }; export default meta; -type Story = StoryObj; -export const Default: Story = { +export const Default: StoryObj = { args: {}, }; diff --git a/stories/atoms/avatar.stories.tsx b/stories/atoms/avatar.stories.tsx index e3a16ce..73dbc0e 100644 --- a/stories/atoms/avatar.stories.tsx +++ b/stories/atoms/avatar.stories.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { Avatar, AvatarFallback, AvatarImage } from "src/atoms/avatar"; export function AvatarDemo() { return ( @@ -16,8 +15,7 @@ const meta: Meta = { }; export default meta; -type Story = StoryObj; -export const Default: Story = { +export const Default: StoryObj = { args: {}, }; diff --git a/stories/atoms/badge.stories.tsx b/stories/atoms/badge.stories.tsx index ea8d9f6..db19cc9 100644 --- a/stories/atoms/badge.stories.tsx +++ b/stories/atoms/badge.stories.tsx @@ -1,23 +1,23 @@ import type { Meta, StoryObj } from "@storybook/react"; -import React from "react"; import { Badge } from "src/atoms/badge"; -const meta: Meta = { - component: () => { - return ( -
- Default - Destructive - Outlined - Secondary -
- ); - }, +export function BadgeDemo() { + return ( +
+ Default + Destructive + Outlined + Secondary +
+ ); +} + +const meta: Meta = { + component: BadgeDemo, }; export default meta; -type Story = StoryObj; -export const Default: Story = { +export const Default: StoryObj = { args: {}, }; diff --git a/stories/atoms/button.stories.tsx b/stories/atoms/button.stories.tsx index 2e8b6e8..214625e 100644 --- a/stories/atoms/button.stories.tsx +++ b/stories/atoms/button.stories.tsx @@ -6,11 +6,7 @@ const meta: Meta = { }; export default meta; -type Story = StoryObj; -export const Default: Story = { - args: { - children: "default", - value: 50, - }, +export const Default: StoryObj = { + args: {}, }; diff --git a/stories/atoms/calendar.stories.tsx b/stories/atoms/calendar.stories.tsx index 44531bc..3b33d02 100644 --- a/stories/atoms/calendar.stories.tsx +++ b/stories/atoms/calendar.stories.tsx @@ -19,18 +19,17 @@ export function CalendarDemo() { ); } -import type { Meta, StoryObj } from "@storybook/react"; +import type { Meta } from "@storybook/react"; import { DateRange } from "react-day-picker"; +import type { StoryObj } from "@storybook/react"; + const meta: Meta = { component: CalendarDemo, }; export default meta; -type Story = StoryObj; -export const Default: Story = { - args: { - children: "default", - }, +export const Default: StoryObj = { + args: {}, }; diff --git a/stories/atoms/card.stories.tsx b/stories/atoms/card.stories.tsx index e98aab7..4e21576 100644 --- a/stories/atoms/card.stories.tsx +++ b/stories/atoms/card.stories.tsx @@ -1,5 +1,4 @@ import type { Meta, StoryObj } from "@storybook/react"; -import React from "react"; import { Button } from "src/atoms/button"; import { Card, @@ -19,55 +18,51 @@ import { SelectValue, } from "src/atoms/select"; -const meta: Meta = { - component: () => { - return ( - - - Create project - - Deploy your new project in one-click. - - - -
-
-
- - -
-
- - -
+const CardDemo = () => { + return ( + + + Create project + Deploy your new project in one-click. + + + +
+
+ +
- - - - - - - - ); - }, +
+ + +
+
+ + + + + + + + ); +}; + +const meta: Meta = { + component: CardDemo, }; export default meta; -type Story = StoryObj; -export const Default: Story = { - args: { - variant: "default", - children: "default", - }, +export const Default: StoryObj = { + args: {}, }; diff --git a/stories/atoms/checkbox.stories.tsx b/stories/atoms/checkbox.stories.tsx index 5f118da..8b9c22f 100644 --- a/stories/atoms/checkbox.stories.tsx +++ b/stories/atoms/checkbox.stories.tsx @@ -1,35 +1,33 @@ -import type { Meta, StoryObj } from "@storybook/react"; -import React from "react"; -import { Button } from "src/atoms/button"; +import type { Meta } from "@storybook/react"; import { Checkbox } from "src/atoms/checkbox"; -const meta: Meta = { - component: () => { - return ( -
- -
- -

- You agree to our Terms of Service and Privacy Policy. -

-
+const CheckboxDemo = () => { + return ( +
+ +
+ +

+ You agree to our Terms of Service and Privacy Policy. +

- ); - }, +
+ ); +}; + +import type { StoryObj } from "@storybook/react"; + +const meta: Meta = { + component: CheckboxDemo, }; export default meta; -type Story = StoryObj; -export const Default: Story = { - args: { - variant: "default", - children: "default", - }, +export const Default: StoryObj = { + args: {}, }; diff --git a/stories/atoms/collapsible.stories.tsx b/stories/atoms/collapsible.stories.tsx index 850a232..672dd02 100644 --- a/stories/atoms/collapsible.stories.tsx +++ b/stories/atoms/collapsible.stories.tsx @@ -45,15 +45,16 @@ export function CollapsibleDemo() { ); } -import type { Meta, StoryObj } from "@storybook/react"; +import type { Meta } from "@storybook/react"; + +import type { StoryObj } from "@storybook/react"; const meta: Meta = { component: CollapsibleDemo, }; export default meta; -type Story = StoryObj; -export const Default: Story = { +export const Default: StoryObj = { args: {}, }; diff --git a/stories/atoms/colors.stories.tsx b/stories/atoms/colors.stories.tsx index ca5aa24..51d20f1 100644 --- a/stories/atoms/colors.stories.tsx +++ b/stories/atoms/colors.stories.tsx @@ -1,45 +1,40 @@ import type { Meta, StoryObj } from "@storybook/react"; -import React from "react"; -import { Input } from "src/atoms/input"; -const meta: Meta = { - component: () => { - return ( -
-
Muted
-
Muted Foreground
-
Primary
-
- Primary Foreground -
-
Secondary
-
- Secondary Foreground -
-
Destructive
-
- Destructive Foreground -
-
Accent
-
- Accent Foreground -
-
Popover
-
- Popover Foreground -
-
Card
-
Card Foreground
+const ColorDemo = () => { + return ( +
+
Muted
+
Muted Foreground
+
Primary
+
+ Primary Foreground
- ); - }, +
Secondary
+
+ Secondary Foreground +
+
Destructive
+
+ Destructive Foreground +
+
Accent
+
Accent Foreground
+
Popover
+
+ Popover Foreground +
+
Card
+
Card Foreground
+
+ ); +}; + +const meta: Meta = { + component: ColorDemo, }; export default meta; -type Story = StoryObj; -export const Text: Story = { - args: { - type: "text", - }, +export const Default: StoryObj = { + args: {}, }; diff --git a/stories/atoms/combobox.stories.tsx b/stories/atoms/combobox.stories.tsx index 595a52c..d2be0d9 100644 --- a/stories/atoms/combobox.stories.tsx +++ b/stories/atoms/combobox.stories.tsx @@ -1,6 +1,6 @@ "use client"; -import type { Meta, StoryObj } from "@storybook/react"; +import type { Meta } from "@storybook/react"; import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"; import * as React from "react"; @@ -39,60 +39,63 @@ const frameworks = [ }, ]; -const meta: Meta = { - component: () => { - const [open, setOpen] = React.useState(false); - const [value, setValue] = React.useState(""); +const ComboboxDemo = () => { + 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} - - - ))} - - - - - ); - }, + return ( + + + + + + + + No framework found. + + {frameworks.map((framework) => ( + { + setValue(currentValue === value ? "" : currentValue); + setOpen(false); + }} + > + {framework.label} + + + ))} + + + + + ); +}; + +import type { StoryObj } from "@storybook/react"; + +const meta: Meta = { + component: ComboboxDemo, }; export default meta; -type Story = StoryObj; -export const Default: Story = { +export const Default: StoryObj = { args: {}, }; diff --git a/stories/atoms/command.stories.tsx b/stories/atoms/command.stories.tsx index c68a9a4..e030690 100644 --- a/stories/atoms/command.stories.tsx +++ b/stories/atoms/command.stories.tsx @@ -6,7 +6,6 @@ import { PersonIcon, RocketIcon, } from "@radix-ui/react-icons"; -import React from "react"; import { Command, CommandEmpty, @@ -20,54 +19,55 @@ import { 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 - - - - - ); - }, +const CommandDemo = () => { + return ( + + + + No results found. + + + + Calendar + + + + Search Emoji + + + + Launch + + + + + + + Profile + ⌘P + + + + Mail + ⌘B + + + + Settings + ⌘S + + + + + ); +}; + +const meta: Meta = { + component: CommandDemo, }; export default meta; -type Story = StoryObj; -export const Default: Story = { +export const Default: StoryObj = { args: {}, }; diff --git a/stories/atoms/context-menu.stories.tsx b/stories/atoms/context-menu.stories.tsx index 4d88433..a8c608b 100644 --- a/stories/atoms/context-menu.stories.tsx +++ b/stories/atoms/context-menu.stories.tsx @@ -1,5 +1,4 @@ import type { Meta, StoryObj } from "@storybook/react"; -import React from "react"; import { ContextMenu, ContextMenuCheckboxItem, @@ -16,63 +15,64 @@ import { ContextMenuTrigger, } from "src/atoms/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 +const ContextMenuDemo = () => { + return ( + + + Right click here + + + + Back + ⌘[ + + + Forward + ⌘] + + + Reload + ⌘R + + + More Tools + + + Save Page As... + ⇧⌘S + + Create Shortcut... + Name Window... - - Pedro Duarte - - Colm Tuite - - - - ); - }, + Developer Tools + + + + + Show Bookmarks Bar + ⌘⇧B + + Show Full URLs + + + People + + + Pedro Duarte + + Colm Tuite + + + + ); +}; + +const meta: Meta = { + component: ContextMenuDemo, }; export default meta; -type Story = StoryObj; -export const Default: Story = { +export const Default: StoryObj = { args: {}, }; diff --git a/stories/atoms/date-picker.stories.tsx b/stories/atoms/date-picker.stories.tsx index 25d9591..6f234e2 100644 --- a/stories/atoms/date-picker.stories.tsx +++ b/stories/atoms/date-picker.stories.tsx @@ -8,42 +8,40 @@ import { Calendar } from "src/atoms/calendar"; import { Popover, PopoverContent, PopoverTrigger } from "src/atoms/popover"; import { cn } from "src/utils"; -const meta: Meta = { - component: () => { - const [date, setDate] = React.useState(); +const DatePickerDemo = () => { + const [date, setDate] = React.useState(); - return ( - - - - - - - - - ); - }, + return ( + + + + + + + + + ); +}; +const meta: Meta = { + component: DatePickerDemo, }; export default meta; -type Story = StoryObj; -export const Default: Story = { - args: { - children: "default", - }, +export const Default: StoryObj = { + args: {}, }; diff --git a/stories/atoms/dialog.stories.tsx b/stories/atoms/dialog.stories.tsx index 9fe00f4..b030d60 100644 --- a/stories/atoms/dialog.stories.tsx +++ b/stories/atoms/dialog.stories.tsx @@ -1,6 +1,4 @@ import type { Meta, StoryObj } from "@storybook/react"; -import React from "react"; -import { Button } from "src/atoms/button"; import { Dialog, DialogContent, @@ -10,31 +8,28 @@ import { DialogTrigger, } from "src/atoms/dialog"; -const meta: Meta = { - component: () => { - return ( - - Open - - - Are you sure absolutely sure? - - This action cannot be undone. This will permanently delete your - account and remove your data from our servers. - - - - - ); - }, +const DialogDemo = () => { + return ( + + Open + + + Are you sure absolutely sure? + + This action cannot be undone. This will permanently delete your + account and remove your data from our servers. + + + + + ); +}; +const meta: Meta = { + component: DialogDemo, }; export default meta; -type Story = StoryObj; -export const Default: Story = { - args: { - variant: "default", - children: "default", - }, +export const Default: StoryObj = { + args: {}, }; diff --git a/stories/atoms/dropdown-menu.stories.tsx b/stories/atoms/dropdown-menu.stories.tsx index 353f817..f040cd7 100644 --- a/stories/atoms/dropdown-menu.stories.tsx +++ b/stories/atoms/dropdown-menu.stories.tsx @@ -1,5 +1,4 @@ "use client"; -import React from "react"; import { DropdownMenu, DropdownMenuContent, @@ -11,27 +10,28 @@ import { import type { Meta, StoryObj } from "@storybook/react"; -const meta: Meta = { - component: () => { - return ( - - Open - - My Account - - Profile - Billing - Team - Subscription - - - ); - }, +const DropdownDemo = () => { + return ( + + Open + + My Account + + Profile + Billing + Team + Subscription + + + ); +}; + +const meta: Meta = { + component: DropdownDemo, }; export default meta; -type Story = StoryObj; -export const Default: Story = { +export const Default: StoryObj = { args: {}, }; diff --git a/stories/atoms/form.stories.tsx b/stories/atoms/form.stories.tsx index 67ed6db..6c1257e 100644 --- a/stories/atoms/form.stories.tsx +++ b/stories/atoms/form.stories.tsx @@ -1,6 +1,5 @@ "use client"; import { zodResolver } from "@hookform/resolvers/zod"; -import React from "react"; import { useForm } from "react-hook-form"; import { Button } from "src/atoms/button"; import { @@ -23,49 +22,49 @@ const formSchema = z.object({ }), }); -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. - - - - )} - /> - - - - ); - }, +const Demo = () => { + 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. + + + + )} + /> + + + + ); +}; + +const meta: Meta = { + component: Demo, }; export default meta; -type Story = StoryObj; -export const Default: Story = { +export const Default: StoryObj = { args: {}, }; diff --git a/stories/atoms/hover-card.stories.tsx b/stories/atoms/hover-card.stories.tsx index 47124b3..91ac2b3 100644 --- a/stories/atoms/hover-card.stories.tsx +++ b/stories/atoms/hover-card.stories.tsx @@ -1,5 +1,4 @@ import { CalendarIcon } from "@radix-ui/react-icons"; -import React from "react"; import { Avatar, AvatarFallback, AvatarImage } from "src/atoms/avatar"; import { Button } from "src/atoms/button"; import { @@ -9,42 +8,42 @@ import { } from "src/atoms/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 - -
+const Demo = () => { + return ( + + + + + +
+ + + VC + +
+

@nextjs

+

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

+
+ {" "} + + Joined December 2021 +
- - - ); - }, +
+ + + ); +}; + +const meta: Meta = { + component: Demo, }; export default meta; -type Story = StoryObj; -export const Text: Story = { +export const Default: StoryObj = { args: {}, }; diff --git a/stories/atoms/navigation-menu.stories.tsx b/stories/atoms/navigation-menu.stories.tsx new file mode 100644 index 0000000..7279785 --- /dev/null +++ b/stories/atoms/navigation-menu.stories.tsx @@ -0,0 +1,180 @@ +"use client"; + +import * as React from "react"; +// import Link from "next/link" + +import { cn } from "src/utils"; + +import { IconJarLogoIcon } from "@radix-ui/react-icons"; +import { + NavigationMenu, + NavigationMenuContent, + NavigationMenuItem, + NavigationMenuLink, + NavigationMenuList, + NavigationMenuTrigger, + navigationMenuTriggerStyle, +} from "src/atoms/navigation-menu"; + +const components: { title: string; href: string; description: string }[] = [ + { + title: "Alert Dialog", + href: "/docs/primitives/alert-dialog", + description: + "A modal dialog that interrupts the user with important content and expects a response.", + }, + { + title: "Hover Card", + href: "/docs/primitives/hover-card", + description: + "For sighted users to preview content available behind a link.", + }, + { + title: "Progress", + href: "/docs/primitives/progress", + description: + "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.", + }, + { + title: "Scroll-area", + href: "/docs/primitives/scroll-area", + description: "Visually or semantically separates content.", + }, + { + title: "Tabs", + href: "/docs/primitives/tabs", + description: + "A set of layered sections of content—known as tab panels—that are displayed one at a time.", + }, + { + title: "Tooltip", + href: "/docs/primitives/tooltip", + description: + "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.", + }, +]; + +function NavigationMenuDemo() { + return ( + + + + Getting started + + + + + + Components + +
    + {components.map((component) => ( + + {component.description} + + ))} +
+ + + + + Documentation + + + + + + + + + + ); +} + +const ListItem = React.forwardRef< + React.ElementRef<"a">, + React.ComponentPropsWithoutRef<"a"> +>(({ className, title, children, ...props }, ref) => { + return ( +
  • + + +
    {title}
    +

    + {children} +

    +     +     +
    • + ); +}); +ListItem.displayName = "ListItem"; + +import type { Meta, StoryObj } from "@storybook/react"; +import { Input } from "src"; +import { Button } from "src/atoms/button"; + +const meta: Meta = { + component: NavigationMenuDemo, +}; + +export default meta; + +export const Default: StoryObj = { + args: {}, +}; diff --git a/stories/atoms/popover.stories.tsx b/stories/atoms/popover.stories.tsx index 5cb1760..bd6a8dd 100644 --- a/stories/atoms/popover.stories.tsx +++ b/stories/atoms/popover.stories.tsx @@ -3,8 +3,7 @@ import { Input } from "src/atoms/input"; import { Label } from "src/atoms/label"; import { Popover, PopoverContent, PopoverTrigger } from "src/atoms/popover"; -import type { Meta, StoryObj } from "@storybook/react"; -import React from "react"; +import type { Meta } from "@storybook/react"; const meta: Meta = { component: (args) => { @@ -63,8 +62,3 @@ const meta: Meta = { }; export default meta; -type Story = StoryObj; - -export const Default: Story = { - args: {}, -}; diff --git a/stories/atoms/progress.stories.tsx b/stories/atoms/progress.stories.tsx index bfa8263..4fd81a9 100644 --- a/stories/atoms/progress.stories.tsx +++ b/stories/atoms/progress.stories.tsx @@ -6,11 +6,7 @@ const meta: Meta = { }; export default meta; -type Story = StoryObj; -export const Default: Story = { - args: { - children: "default", - value: 25, - }, +export const Default: StoryObj = { + args: {}, }; diff --git a/stories/atoms/radio.stories.tsx b/stories/atoms/radio.stories.tsx index d8885c9..7ff99dc 100644 --- a/stories/atoms/radio.stories.tsx +++ b/stories/atoms/radio.stories.tsx @@ -1,32 +1,31 @@ import type { Meta, StoryObj } from "@storybook/react"; -import React from "react"; +import React, { ComponentProps } from "react"; import { Label } from "src/atoms/label"; import { RadioGroup, RadioGroupItem } from "src/atoms/radio-group"; -const meta: Meta = { - component: (args) => { - const [value, setValue] = React.useState(args.value); - return ( -
    - - {["apples", "bananas", "oranges"].map((item) => ( -
    - - -
    - ))} -     -

    Selected Value: {value}

    -
    - ); - }, +const Demo = (args: ComponentProps) => { + const [value, setValue] = React.useState(args.value); + return ( +
    + + {["apples", "bananas", "oranges"].map((item) => ( +
    + + +
    + ))} +     +

    Selected Value: {value}

    +
    + ); +}; + +const meta: Meta = { + component: Demo, }; export default meta; -type Story = StoryObj; -export const Search: Story = { - args: { - value: "apples", - }, +export const Default: StoryObj = { + args: {}, }; diff --git a/stories/atoms/scroll-area.stories.tsx b/stories/atoms/scroll-area.stories.tsx index 979e55d..692dc08 100644 --- a/stories/atoms/scroll-area.stories.tsx +++ b/stories/atoms/scroll-area.stories.tsx @@ -4,12 +4,6 @@ import { ScrollArea } from "src/atoms/scroll-area"; const meta: Meta = { component: ScrollArea, -}; - -export default meta; -type Story = StoryObj; - -export const Default: Story = { args: { children: ` Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the king's pillow, in his soup, @@ -20,3 +14,9 @@ export const Default: Story = { className: "h-[200px] w-[350px] rounded-md border p-4", }, }; + +export default meta; + +export const Default: StoryObj = { + args: {}, +}; diff --git a/stories/atoms/select.stories.tsx b/stories/atoms/select.stories.tsx index fa068ee..d221854 100644 --- a/stories/atoms/select.stories.tsx +++ b/stories/atoms/select.stories.tsx @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from "@storybook/react"; -import React from "react"; +import React, { ComponentProps } from "react"; import { Select, @@ -9,31 +9,30 @@ import { SelectValue, } from "src/atoms/select"; -const meta: Meta = { - component: (args) => { - const [value, setValue] = React.useState(args.value); - return ( -
    - -
    - ); - }, +const Demo = (args: ComponentProps) => { + const [value, setValue] = React.useState(args.value); + return ( +
    + +
    + ); +}; + +const meta: Meta = { + component: Demo, }; export default meta; -type Story = StoryObj; -export const Search: Story = { - args: { - value: "light", - }, +export const Default: StoryObj = { + args: {}, }; diff --git a/stories/atoms/separator.stories.tsx b/stories/atoms/separator.stories.tsx index 89b3f7b..11c8117 100644 --- a/stories/atoms/separator.stories.tsx +++ b/stories/atoms/separator.stories.tsx @@ -7,8 +7,7 @@ const meta: Meta = { }; export default meta; -type Story = StoryObj; -export const Default: Story = { +export const Default: StoryObj = { args: {}, }; diff --git a/stories/atoms/sheet.stories.tsx b/stories/atoms/sheet.stories.tsx index c09dc61..d6fb576 100644 --- a/stories/atoms/sheet.stories.tsx +++ b/stories/atoms/sheet.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from "@storybook/react"; -import React from "react"; +import { ComponentProps } from "react"; import { Sheet, SheetContent, @@ -9,28 +9,29 @@ import { SheetTrigger, } from "src/atoms/sheet"; +const Demo = (args: ComponentProps) => { + return ( + + Open + + + Are you sure absolutely sure? + + This action cannot be undone. This will permanently delete your + account and remove your data from our servers. + + + + + ); +}; + const meta: Meta = { - component: (args) => { - return ( - - Open - - - Are you sure absolutely sure? - - This action cannot be undone. This will permanently delete your - account and remove your data from our servers. - - - - - ); - }, + component: Demo, }; export default meta; -type Story = StoryObj; -export const Search: Story = { +export const Default: StoryObj = { args: {}, }; diff --git a/stories/atoms/skeleton.stories.tsx b/stories/atoms/skeleton.stories.tsx index deb5ed2..d3f9e1d 100644 --- a/stories/atoms/skeleton.stories.tsx +++ b/stories/atoms/skeleton.stories.tsx @@ -3,13 +3,11 @@ import { Skeleton } from "src/atoms/skeleton"; const meta: Meta = { component: Skeleton, + args: { className: "h-10 w-full" }, }; export default meta; -type Story = StoryObj; -export const Default: Story = { - args: { - className: "h-10 w-full", - }, +export const Default: StoryObj = { + args: {}, }; diff --git a/stories/atoms/slider.stories.tsx b/stories/atoms/slider.stories.tsx index aca818e..76c9527 100644 --- a/stories/atoms/slider.stories.tsx +++ b/stories/atoms/slider.stories.tsx @@ -3,15 +3,15 @@ import { Slider } from "src/atoms/slider"; const meta: Meta = { component: Slider, -}; - -export default meta; -type Story = StoryObj; - -export const Default: Story = { args: { defaultValue: [33], max: 100, step: 1, }, }; + +export default meta; + +export const Default: StoryObj = { + args: {}, +}; diff --git a/stories/atoms/switch.stories.tsx b/stories/atoms/switch.stories.tsx index 32cd4ce..928e96a 100644 --- a/stories/atoms/switch.stories.tsx +++ b/stories/atoms/switch.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from "@storybook/react"; +import type { Meta } from "@storybook/react"; import React from "react"; import { Switch } from "src/atoms/switch"; @@ -14,13 +14,9 @@ const meta: Meta = {
    ); }, -}; - -export default meta; -type Story = StoryObj; - -export const Default: Story = { args: { checked: true, }, }; + +export default meta; diff --git a/stories/atoms/table.stories.tsx b/stories/atoms/table.stories.tsx index a5321da..1b52777 100644 --- a/stories/atoms/table.stories.tsx +++ b/stories/atoms/table.stories.tsx @@ -1,5 +1,4 @@ -import type { Meta, StoryObj } from "@storybook/react"; -import React from "react"; +import type { Meta } from "@storybook/react"; import { Table, TableBody, @@ -93,8 +92,3 @@ const meta: Meta = { }; export default meta; -type Story = StoryObj; - -export const Default: Story = { - args: {}, -}; diff --git a/stories/atoms/tabs.stories.tsx b/stories/atoms/tabs.stories.tsx index d8dd797..e51db49 100644 --- a/stories/atoms/tabs.stories.tsx +++ b/stories/atoms/tabs.stories.tsx @@ -1,5 +1,4 @@ -import type { Meta, StoryObj } from "@storybook/react"; -import React from "react"; +import type { Meta } from "@storybook/react"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "src/atoms/tabs"; const meta: Meta = { @@ -20,10 +19,3 @@ const meta: Meta = { }; export default meta; -type Story = StoryObj; - -export const Default: Story = { - args: { - children: "default", - }, -}; diff --git a/stories/atoms/text-area.stories.tsx b/stories/atoms/text-area.stories.tsx index 300b3e6..70bd4c1 100644 --- a/stories/atoms/text-area.stories.tsx +++ b/stories/atoms/text-area.stories.tsx @@ -1,15 +1,11 @@ -import type { Meta, StoryObj } from "@storybook/react"; +import type { Meta } from "@storybook/react"; import { Textarea } from "src/atoms/textarea"; const meta: Meta = { component: Textarea, -}; - -export default meta; -type Story = StoryObj; - -export const Default: Story = { args: { placeholder: "Type your message here.", }, }; + +export default meta; diff --git a/stories/atoms/toast.stories.tsx b/stories/atoms/toast.stories.tsx index 9a9f017..633663e 100644 --- a/stories/atoms/toast.stories.tsx +++ b/stories/atoms/toast.stories.tsx @@ -1,5 +1,4 @@ import type { Meta, StoryObj } from "@storybook/react"; -import React from "react"; import { Button } from "src/atoms/button"; import { Toaster } from "src/atoms/toaster"; import { useToast } from "src/atoms/use-toast"; @@ -16,13 +15,13 @@ const meta: Meta = {
    ); }, + args: { + color: "red", + }, }; export default meta; -type Story = StoryObj; -export const Toasty: Story = { - args: { - color: "red", - }, +export const Default: StoryObj = { + args: {}, }; diff --git a/stories/atoms/toggle-group.stories.tsx b/stories/atoms/toggle-group.stories.tsx index e7077c4..5dd3104 100644 --- a/stories/atoms/toggle-group.stories.tsx +++ b/stories/atoms/toggle-group.stories.tsx @@ -1,6 +1,4 @@ import type { Meta, StoryObj } from "@storybook/react"; -import React from "react"; -import { Button } from "src/atoms/button"; import { FontBoldIcon, @@ -32,8 +30,7 @@ const meta: Meta = { }; export default meta; -type Story = StoryObj; -export const Default: Story = { +export const Default: StoryObj = { args: {}, }; diff --git a/stories/atoms/toggle.stories.tsx b/stories/atoms/toggle.stories.tsx index bd6b184..a013cd3 100644 --- a/stories/atoms/toggle.stories.tsx +++ b/stories/atoms/toggle.stories.tsx @@ -1,6 +1,5 @@ import { FontBoldIcon } from "@radix-ui/react-icons"; import type { Meta, StoryObj } from "@storybook/react"; -import React from "react"; import { Toggle } from "src/atoms/toggle"; @@ -15,8 +14,7 @@ const meta: Meta = { }; export default meta; -type Story = StoryObj; -export const Default: Story = { +export const Default: StoryObj = { args: {}, }; diff --git a/stories/atoms/tooltip.stories.tsx b/stories/atoms/tooltip.stories.tsx index a29f454..687768b 100644 --- a/stories/atoms/tooltip.stories.tsx +++ b/stories/atoms/tooltip.stories.tsx @@ -1,5 +1,4 @@ import { Meta, StoryObj } from "@storybook/react"; -import React from "react"; import { Button } from "src/atoms/button"; import { Tooltip, @@ -7,7 +6,7 @@ import { TooltipProvider, TooltipTrigger, } from "src/atoms/tooltip"; -export function TooltipDemo() { +function TooltipDemo() { return ( @@ -27,8 +26,7 @@ const meta: Meta = { }; export default meta; -type Story = StoryObj; -export const Default: Story = { +export const Default: StoryObj = { args: {}, }; diff --git a/stories/atoms/typography.stories.tsx b/stories/atoms/typography.stories.tsx index 71374ba..0d4232e 100644 --- a/stories/atoms/typography.stories.tsx +++ b/stories/atoms/typography.stories.tsx @@ -1,11 +1,97 @@ import type { Meta, StoryObj } from "@storybook/react"; -import React from "react"; import { Button } from "src/atoms/button"; const meta: Meta = { component: () => { return (
    +
    +
    +

    The Joke Tax Chronicles

    +

    + Once upon a time, in a far-off land, there was a very lazy king + who spent all day lounging on his throne. One day, his advisors + came to him with a problem: the kingdom was running out of money. +

    +

    The King's Plan

    +

    + The king thought long and hard, and finally came up with{" "} + a brilliant plan: he would tax the jokes in the + kingdom. +

    +
    + "After all," he said, "everyone enjoys a good joke, so it's only + fair that they should pay for the privilege." +
    +

    The Joke Tax

    +

    + The king's subjects were not amused. They grumbled and complained, + but the king was firm: +

    +
      +
    • 1st level of puns: 5 gold coins
      • +
    • 2nd level of jokes: 10 gold coins
      • +
    • 3rd level of one-liners : 20 gold coins
      • +
    +

    + As a result, people stopped telling jokes, and the kingdom fell + into a gloom. But there was one person who refused to let the + king's foolishness get him down: a court jester named Jokester. +

    +

    Jokester's Revolt

    +

    + Jokester began sneaking into the castle in the middle of the night + and leaving jokes all over the place: under the king's pillow, in + his soup, even in the royal toilet. The king was furious, but he + couldn't seem to stop Jokester. +

    +

    + And then, one day, the people of the kingdom discovered that the + jokes left by Jokester were so funny that they couldn't help but + laugh. And once they started laughing, they couldn't stop. +

    +

    The People's Rebellion

    +

    + The people of the kingdom, feeling uplifted by the laughter, + started to tell jokes and puns again, and soon the entire kingdom + was in on the joke. +

    + + + + + + + + + + + + + + + + + + + + + + +
    King's TreasuryPeople's happiness
    EmptyOverflowing
    ModestSatisfied
    FullEcstatic
    + +

    + The king, seeing how much happier his subjects were, realized the + error of his ways and repealed the joke tax. Jokester was declared + a hero, and the kingdom lived happily ever after. +

    +

    + The moral of the story is: never underestimate the power of a good + laugh and always be careful of bad ideas. +

    +
    +
    +

    9XL

    8XL

    7XL

    @@ -20,24 +106,13 @@ const meta: Meta = {

    Base

    SM

    XS

    - -
    -

    Heading 1

    -

    Heading 2

    -

    Heading 3

    -

    Heading 4

    -
    ); }, }; export default meta; -type Story = StoryObj; -export const Default: Story = { - args: { - variant: "default", - children: "default", - }, +export const Default: StoryObj = { + args: {}, }; diff --git a/stories/molecules/navbar.stories.tsx b/stories/molecules/navbar.stories.tsx new file mode 100644 index 0000000..3b100c9 --- /dev/null +++ b/stories/molecules/navbar.stories.tsx @@ -0,0 +1,177 @@ +import { IconJarLogoIcon } from "@radix-ui/react-icons"; +import { Meta, StoryObj } from "@storybook/react"; +import React from "react"; +import { Input, cn } from "src"; +import { Button } from "src/atoms/button"; +import { + NavigationMenu, + NavigationMenuContent, + NavigationMenuItem, + NavigationMenuLink, + NavigationMenuList, + NavigationMenuTrigger, + navigationMenuTriggerStyle, +} from "src/atoms/navigation-menu"; +import { ThemeSelector, useTheme } from "src/molecules/theme-selector"; + +const components: { title: string; href: string; description: string }[] = [ + { + title: "Alert Dialog", + href: "/docs/primitives/alert-dialog", + description: + "A modal dialog that interrupts the user with important content and expects a response.", + }, + { + title: "Hover Card", + href: "/docs/primitives/hover-card", + description: + "For sighted users to preview content available behind a link.", + }, + { + title: "Progress", + href: "/docs/primitives/progress", + description: + "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.", + }, + { + title: "Scroll-area", + href: "/docs/primitives/scroll-area", + description: "Visually or semantically separates content.", + }, + { + title: "Tabs", + href: "/docs/primitives/tabs", + description: + "A set of layered sections of content—known as tab panels—that are displayed one at a time.", + }, + { + title: "Tooltip", + href: "/docs/primitives/tooltip", + description: + "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.", + }, +]; + +function NavigationDemo() { + const { theme, setMode } = useTheme(); + return ( + + + + Getting started + + + + + + + + Components + +
      + {components.map((component) => ( + + {component.description} + + ))} +
    +     +     + + + Documentation + + + + + + + +     +     + ); +} + +const ListItem = React.forwardRef< + React.ElementRef<"a">, + React.ComponentPropsWithoutRef<"a"> +>(({ className, title, children, ...props }, ref) => { + return ( +
  • + + +
    {title}
    +

    + {children} +

    +     +     +
    • + ); +}); +ListItem.displayName = "ListItem"; + +const meta: Meta = { + component: NavigationDemo, +}; + +export default meta; + +export const Default: StoryObj = { + args: {}, +}; diff --git a/stories/molecules/slide-in.stories.tsx b/stories/molecules/slide-in.stories.tsx index ac43ffd..6ba2138 100644 --- a/stories/molecules/slide-in.stories.tsx +++ b/stories/molecules/slide-in.stories.tsx @@ -1,5 +1,4 @@ import type { Meta, StoryObj } from "@storybook/react"; -import React from "react"; import { SlideIn } from "src/molecules/slide-in"; const meta: Meta = { @@ -15,8 +14,7 @@ const meta: Meta = { }; export default meta; -type Story = StoryObj; -export const Default: Story = { +export const Default: StoryObj = { args: {}, }; diff --git a/stories/molecules/theme-selector.stories.tsx b/stories/molecules/theme-selector.stories.tsx index 72b2c8c..239d1ff 100644 --- a/stories/molecules/theme-selector.stories.tsx +++ b/stories/molecules/theme-selector.stories.tsx @@ -11,8 +11,7 @@ const meta: Meta = { }; export default meta; -type Story = StoryObj; -export const Default: Story = { +export const Default: StoryObj = { args: {}, }; diff --git a/tailwind.config.ts b/tailwind.config.ts index 88d2309..feebf77 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,6 +1,6 @@ import { Config } from "tailwindcss"; export default { - darkMode: ["class", "theme-mode-dark"], + darkMode: ["class", ".theme-mode-dark"], content: ["./src/**/*.{ts,tsx}", "./stories/**/*.{ts,tsx}"], theme: { container: { @@ -11,6 +11,9 @@ export default { }, }, extend: { + fontFamily: { + sans: ["Inter"], + }, colors: { border: "hsl(var(--border))", input: "hsl(var(--input))",