diff --git a/.changeset/khaki-parrots-tap.md b/.changeset/khaki-parrots-tap.md
new file mode 100644
index 0000000..fc9c146
--- /dev/null
+++ b/.changeset/khaki-parrots-tap.md
@@ -0,0 +1,11 @@
+---
+'eslint-config-custom': major
+'tailwind-config': major
+'tsconfig': major
+'utils': major
+'ui': major
+'cms': major
+'web': major
+---
+
+Primitive storybooks and code gen tools
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 5424939..cd2ef69 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -22,5 +22,5 @@ jobs:
- name: Install
run: pnpm install --no-frozen-lockfile
- - name: Lint
- run: pnpm test:run
+ - name: Test
+ run: pnpm test:run --passWithNoTests
diff --git a/README.md b/README.md
index 9dbcda1..fe3893d 100644
--- a/README.md
+++ b/README.md
@@ -48,6 +48,22 @@ packages
└─ utility functions
```
+## Contributing
+
+All commit messages must adhere the gitmoji commitlint conventions
+
+```base
+:sparkles: feat(changelog): support chinese title
+
+:bug: fix(config): fix a subject bug
+
+:memo: docs: update README.md
+
+:bulb: docs(plugin): update comments
+```
+
+[More emoji here](https://gitmoji.dev/)
+
### Sanity
Includes live preview, singletons, nested documents [via Sanity page tree](https://github.com/Q42/sanity-plugin-page-tree)
diff --git a/commitlint.config.js b/commitlint.config.js
index 98ee7df..41b0da9 100644
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -1,3 +1 @@
-module.exports = {
- extends: ['@commitlint/config-conventional'],
-}
+module.exports = { extends: ['gitmoji'] }
diff --git a/package.json b/package.json
index 7a2a679..27c48df 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
"@commitlint/config-conventional": "^19.2.2",
"@manypkg/cli": "^0.21.4",
"commitlint": "^19.3.0",
+ "commitlint-config-gitmoji": "^2.3.1",
"husky": "^9.0.11",
"hygen": "^6.2.11",
"lint-staged": "^15.2.2",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 95b1487..d59a116 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -13,10 +13,12 @@
"@babel/preset-env": "^7.24.5",
"@babel/preset-react": "^7.24.1",
"@babel/preset-typescript": "^7.24.1",
+ "@chromatic-com/storybook": "^1.3.3",
"@storybook/addon-essentials": "^8.1.1",
"@storybook/addon-interactions": "^8.1.1",
"@storybook/addon-links": "^8.1.1",
"@storybook/addon-onboarding": "^8.1.1",
+ "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
"@storybook/blocks": "^8.1.1",
"@storybook/nextjs": "^8.1.1",
"@storybook/react": "^8.1.1",
diff --git a/packages/ui/src/componenets/Footer/Footer.spec.tsx b/packages/ui/src/componenets/Footer/Footer.spec.tsx
deleted file mode 100644
index be52927..0000000
--- a/packages/ui/src/componenets/Footer/Footer.spec.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import { expect, it, describe } from 'vitest'
-import { render } from '@testing-library/react'
-import { Footer } from './Footer'
-
-describe('Footer ', async () => {
- it('should render', async () => {
- const { getByTestId } = render()
- expect(getByTestId('Footer')).toBeDefined()
- })
-})
diff --git a/packages/ui/src/componenets/Footer/Footer.tsx b/packages/ui/src/componenets/Footer/Footer.tsx
deleted file mode 100644
index 43ee1f4..0000000
--- a/packages/ui/src/componenets/Footer/Footer.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as React from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-const variants = cva('', {
- variants: {
- variant: {
- default: '',
- secondary: '',
- },
- },
- compoundVariants: [],
- defaultVariants: {
- variant: 'default',
- },
-})
-
-export type FooterVariants = VariantProps
-
-type TElementProps = React.ComponentProps<'div'>
-
-export type TFooterProps = TElementProps &
- FooterVariants & {
- //
- }
-
-export const Footer = React.forwardRef, TFooterProps>(
- function Footer({ className, variant, ...props }, ref) {
- console.info(``, props)
- return (
-
- )
- },
-)
diff --git a/packages/ui/src/componenets/Footer/index.ts b/packages/ui/src/componenets/Footer/index.ts
deleted file mode 100644
index 7e87b67..0000000
--- a/packages/ui/src/componenets/Footer/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// export { default } from './Footer'
-export * from './Footer'
diff --git a/packages/ui/src/hooks/usePrevious/index.ts b/packages/ui/src/hooks/usePrevious/index.ts
new file mode 100644
index 0000000..349ef05
--- /dev/null
+++ b/packages/ui/src/hooks/usePrevious/index.ts
@@ -0,0 +1 @@
+export * from './usePrevious'
diff --git a/packages/ui/src/hooks/usePrevious/usePrevious.tsx b/packages/ui/src/hooks/usePrevious/usePrevious.tsx
new file mode 100644
index 0000000..4541d23
--- /dev/null
+++ b/packages/ui/src/hooks/usePrevious/usePrevious.tsx
@@ -0,0 +1,9 @@
+import * as React from 'react'
+
+export function usePrevious(value: T): T | undefined {
+ const ref = React.useRef()
+ React.useEffect(() => {
+ ref.current = value
+ }, [value])
+ return ref.current
+}
diff --git a/packages/ui/src/primitives/Accordion/Accordion.stories.tsx b/packages/ui/src/primitives/Accordion/Accordion.stories.tsx
new file mode 100644
index 0000000..81609e2
--- /dev/null
+++ b/packages/ui/src/primitives/Accordion/Accordion.stories.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import * as Accordion from '.'
+
+const meta = {
+ title: 'primitives/Accordion',
+ component: Accordion.Root,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+ layout: 'centered',
+ },
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+ tags: ['autodocs'],
+ // More on argTypes: https://storybook.js.org/docs/api/argtypes
+ argTypes: {},
+ // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+ args: {},
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Primary: Story = {
+ args: {
+ type: 'single',
+ },
+ render: () => (
+
+
+ Item
+ Hello
+
+
+ Item
+ Hello
+
+
+ ),
+}
diff --git a/packages/ui/src/primitives/Alert/Alert.stories.tsx b/packages/ui/src/primitives/Alert/Alert.stories.tsx
new file mode 100644
index 0000000..2f5f1e4
--- /dev/null
+++ b/packages/ui/src/primitives/Alert/Alert.stories.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import * as Alert from '.'
+
+const meta = {
+ title: 'primitives/Alert',
+ component: Alert.Root,
+ parameters: {
+ layout: 'centered',
+ },
+ tags: ['autodocs'],
+ argTypes: {},
+ args: {},
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Primary: Story = {
+ args: {},
+ render: () => (
+
+ Hello
+
+
Ah chucks
+
+
+ ),
+}
diff --git a/packages/ui/src/primitives/AlertDialog/AlertDialog.stories.tsx b/packages/ui/src/primitives/AlertDialog/AlertDialog.stories.tsx
new file mode 100644
index 0000000..36e4c9b
--- /dev/null
+++ b/packages/ui/src/primitives/AlertDialog/AlertDialog.stories.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import * as AlertDialog from '.'
+
+const meta = {
+ title: 'primitives/AlertDialog',
+ component: AlertDialog.Root,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+ layout: 'centered',
+ },
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+ tags: ['autodocs'],
+ // More on argTypes: https://storybook.js.org/docs/api/argtypes
+ argTypes: {},
+ // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+ args: {},
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Primary: Story = {
+ args: {},
+ render: () => (
+
+ Item
+
+ Item
+ Hello
+ Cancel
+ Action
+
+
+ ),
+}
diff --git a/packages/ui/src/primitives/Badge/Badge.stories.tsx b/packages/ui/src/primitives/Badge/Badge.stories.tsx
new file mode 100644
index 0000000..4f622aa
--- /dev/null
+++ b/packages/ui/src/primitives/Badge/Badge.stories.tsx
@@ -0,0 +1,28 @@
+import { Badge } from '.'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta = {
+ title: 'primitives/Badge',
+ component: Badge,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+ layout: 'centered',
+ },
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+ tags: ['autodocs'],
+ // More on argTypes: https://storybook.js.org/docs/api/argtypes
+ argTypes: {},
+ // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+ args: {},
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Primary: Story = {
+ args: {
+ children: 'Hello world',
+ variant: 'default',
+ // type: 'Badge',
+ },
+}
diff --git a/packages/ui/src/primitives/Button/Button.stories.tsx b/packages/ui/src/primitives/Button/Button.stories.tsx
index 63bf6f2..b7fc66f 100644
--- a/packages/ui/src/primitives/Button/Button.stories.tsx
+++ b/packages/ui/src/primitives/Button/Button.stories.tsx
@@ -3,10 +3,19 @@ import React from 'react'
import { Button } from '.'
const meta = {
- component: Button,
title: 'primitives/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',
+ },
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+ tags: ['autodocs'],
+ // More on argTypes: https://storybook.js.org/docs/api/argtypes
+ argTypes: {},
+ // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+ args: {},
} satisfies Meta
-
export default meta
type Story = StoryObj
diff --git a/packages/ui/src/primitives/Carousel/Carousel.stories.tsx b/packages/ui/src/primitives/Carousel/Carousel.stories.tsx
new file mode 100644
index 0000000..7556833
--- /dev/null
+++ b/packages/ui/src/primitives/Carousel/Carousel.stories.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import * as Carousel from '.'
+
+const meta = {
+ title: 'primitives/Carousel',
+ component: Carousel.Root,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+ layout: 'centered',
+ },
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+ tags: ['autodocs'],
+ // More on argTypes: https://storybook.js.org/docs/api/argtypes
+ argTypes: {},
+ // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+ args: {},
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Primary: Story = {
+ args: {
+ options: {},
+ },
+ render: () => (
+
+ Prev
+ Next
+
+ A
+ B
+ C
+ D
+
+
+ Dot
+ Dot
+ Dot
+ Dot
+
+
+ ),
+}
diff --git a/packages/ui/src/primitives/Carousel/Carousel.tsx b/packages/ui/src/primitives/Carousel/Carousel.tsx
index 041c9cb..e2fac3b 100644
--- a/packages/ui/src/primitives/Carousel/Carousel.tsx
+++ b/packages/ui/src/primitives/Carousel/Carousel.tsx
@@ -144,7 +144,7 @@ export const usePrevNextButtons = (
export type TCarouselProps = {
options?: EmblaOptionsType
plugins?: EmblaPluginType
- children: React.ReactNode
+ children?: React.ReactNode
}
export function Root({ options, plugins, children }: TCarouselProps) {
diff --git a/packages/ui/src/primitives/Collapsible/Collapsible.stories.tsx b/packages/ui/src/primitives/Collapsible/Collapsible.stories.tsx
new file mode 100644
index 0000000..1a150ec
--- /dev/null
+++ b/packages/ui/src/primitives/Collapsible/Collapsible.stories.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import * as Collapsible from '.'
+
+const meta = {
+ title: 'primitives/Collapsible',
+ component: Collapsible.Root,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+ layout: 'centered',
+ },
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+ tags: ['autodocs'],
+ // More on argTypes: https://storybook.js.org/docs/api/argtypes
+ argTypes: {},
+ // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+ args: {},
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Primary: Story = {
+ args: {},
+ render: () => (
+
+ Item
+ Hello
+
+ ),
+}
diff --git a/packages/ui/src/primitives/Command/Command.tsx b/packages/ui/src/primitives/Command/Command.tsx
deleted file mode 100644
index 2a8e60b..0000000
--- a/packages/ui/src/primitives/Command/Command.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-/* eslint-disable react/no-unknown-property */
-'use client'
-
-import * as React from 'react'
-import { type DialogProps } from '@radix-ui/react-dialog'
-import { MagnifyingGlassIcon } from '@radix-ui/react-icons'
-import { Command as CommandPrimitive } from 'cmdk'
-
-import * as DialogPrimitive from '../Dialog'
-import clsx from 'clsx'
-
-export const Root = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(function Root({ className, ...props }, ref) {
- return (
-
- )
-})
-
-interface CommandDialogProps extends DialogProps {}
-
-export const Dialog = ({ children, ...props }: CommandDialogProps) => {
- return (
-
-
-
- {children}
-
-
-
- )
-}
-
-export const Input = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(function Input({ className, ...props }, ref) {
- return (
-
-
-
-
- )
-})
-
-export const List = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(function List({ className, ...props }, ref) {
- return (
-
- )
-})
-
-export const Empty = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(function Empty(props, ref) {
- return (
-
- )
-})
-
-export const Group = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(function Group({ className, ...props }, ref) {
- return (
-
- )
-})
-
-export const Separator = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(function Separator({ className, ...props }, ref) {
- return (
-
- )
-})
-
-export const Item = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(function Item({ className, ...props }, ref) {
- return (
-
- )
-})
-
-export function Shortcut({
- className,
- ...props
-}: React.HTMLAttributes) {
- return (
-
- )
-}
diff --git a/packages/ui/src/primitives/Command/index.ts b/packages/ui/src/primitives/Command/index.ts
deleted file mode 100644
index cd744eb..0000000
--- a/packages/ui/src/primitives/Command/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// export { default } from './Command'
-export * from './Command'
diff --git a/packages/ui/src/primitives/Container/Container.stories.tsx b/packages/ui/src/primitives/Container/Container.stories.tsx
new file mode 100644
index 0000000..4360380
--- /dev/null
+++ b/packages/ui/src/primitives/Container/Container.stories.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { Container } from '.'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta = {
+ title: 'primitives/Container',
+ component: Container,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+ layout: 'centered',
+ },
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+ tags: ['autodocs'],
+ // More on argTypes: https://storybook.js.org/docs/api/argtypes
+ argTypes: {},
+ // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+ args: {},
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Primary: Story = {
+ args: {
+ // type: 'Container',
+ },
+ render: () => Hello,
+}
diff --git a/packages/ui/src/primitives/Dialog/Dialog.stories.tsx b/packages/ui/src/primitives/Dialog/Dialog.stories.tsx
new file mode 100644
index 0000000..3f494f1
--- /dev/null
+++ b/packages/ui/src/primitives/Dialog/Dialog.stories.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import * as Dialog from '.'
+
+const meta = {
+ title: 'primitives/Dialog',
+ component: Dialog.Root,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+ layout: 'centered',
+ },
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+ tags: ['autodocs'],
+ // More on argTypes: https://storybook.js.org/docs/api/argtypes
+ argTypes: {},
+ // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+ args: {},
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Primary: Story = {
+ args: {},
+ render: () => (
+
+ Item
+
+ Item
+ Hello
+
+
+ ),
+}
diff --git a/packages/ui/src/primitives/DropdownMenu/DropdownMenu.stories.tsx b/packages/ui/src/primitives/DropdownMenu/DropdownMenu.stories.tsx
new file mode 100644
index 0000000..d17a746
--- /dev/null
+++ b/packages/ui/src/primitives/DropdownMenu/DropdownMenu.stories.tsx
@@ -0,0 +1,99 @@
+import * as React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import * as DropdownMenu from '.'
+import { Button } from '../Button'
+
+const meta = {
+ title: 'primitives/DropdownMenu',
+ component: DropdownMenu.Root,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+ layout: 'centered',
+ },
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+ tags: ['autodocs'],
+ // More on argTypes: https://storybook.js.org/docs/api/argtypes
+ argTypes: {},
+ // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+ args: {},
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Primary: Story = {
+ args: {},
+ render: () => (
+
+
+
+
+
+ My Account
+
+
+
+ Profile
+ ⇧⌘P
+
+
+ Billing
+ ⌘B
+
+
+ Settings
+ ⌘S
+
+
+ Keyboard shortcuts
+ ⌘K
+
+
+
+
+
+ Team
+
+
+
+ Invite users
+
+
+
+
+ Email
+
+
+ Message
+
+
+
+ More...
+
+
+
+
+
+ New Team
+ ⌘+T
+
+
+
+
+ GitHub
+
+
+ Support
+
+
+ API
+
+
+
+ Log out
+ ⇧⌘Q
+
+
+
+ ),
+}
diff --git a/packages/ui/src/primitives/Flex/Flex.stories.tsx b/packages/ui/src/primitives/Flex/Flex.stories.tsx
new file mode 100644
index 0000000..8883304
--- /dev/null
+++ b/packages/ui/src/primitives/Flex/Flex.stories.tsx
@@ -0,0 +1,33 @@
+import { Flex } from '.'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta = {
+ title: 'primitives/Flex',
+ component: Flex,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+ layout: 'centered',
+ },
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+ tags: ['autodocs'],
+ // More on argTypes: https://storybook.js.org/docs/api/argtypes
+ argTypes: {},
+ // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+ args: {},
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Primary: Story = {
+ args: {
+ // type: 'Flex',
+ },
+ render: () => (
+
+
A
+
B
+
C
+
+ ),
+}
diff --git a/packages/ui/src/primitives/Heading/Heading.stories.tsx b/packages/ui/src/primitives/Heading/Heading.stories.tsx
index 5a1dc61..feb100b 100644
--- a/packages/ui/src/primitives/Heading/Heading.stories.tsx
+++ b/packages/ui/src/primitives/Heading/Heading.stories.tsx
@@ -1,10 +1,19 @@
import type { Meta, StoryObj } from '@storybook/react'
-import React from 'react'
import { Heading } from '.'
const meta = {
- component: Heading,
title: 'primitives/Heading',
+ component: Heading,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+ layout: 'centered',
+ },
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+ tags: ['autodocs'],
+ // More on argTypes: https://storybook.js.org/docs/api/argtypes
+ argTypes: {},
+ // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+ args: {},
} satisfies Meta
export default meta
@@ -12,12 +21,6 @@ type Story = StoryObj
export const Primary: Story = {
args: {
- children: (
-
- Hello world
-
- ),
- // type: 'button',
- asChild: true,
+ children: 'Hello world',
},
}
diff --git a/packages/ui/src/primitives/Inline/Inline.stories.tsx b/packages/ui/src/primitives/Inline/Inline.stories.tsx
new file mode 100644
index 0000000..4de845e
--- /dev/null
+++ b/packages/ui/src/primitives/Inline/Inline.stories.tsx
@@ -0,0 +1,33 @@
+import { Inline } from '.'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta = {
+ title: 'primitives/Inline',
+ component: Inline,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+ layout: 'centered',
+ },
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+ tags: ['autodocs'],
+ // More on argTypes: https://storybook.js.org/docs/api/argtypes
+ argTypes: {},
+ // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+ args: {},
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Primary: Story = {
+ args: {
+ // type: 'Inline',
+ },
+ render: () => (
+
+
A
+
B
+
C
+
+ ),
+}
diff --git a/packages/ui/src/primitives/Input/Input.stories.tsx b/packages/ui/src/primitives/Input/Input.stories.tsx
new file mode 100644
index 0000000..0c8ff6f
--- /dev/null
+++ b/packages/ui/src/primitives/Input/Input.stories.tsx
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Input } from '.'
+
+const meta = {
+ title: 'primitives/Input',
+ component: Input,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+ layout: 'centered',
+ },
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+ tags: ['autodocs'],
+ // More on argTypes: https://storybook.js.org/docs/api/argtypes
+ argTypes: {},
+ // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+ args: {},
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Primary: Story = {
+ args: {},
+}
diff --git a/packages/ui/src/componenets/Footer/Footer.stories.tsx b/packages/ui/src/primitives/Label/Label.stories.tsx
similarity index 84%
rename from packages/ui/src/componenets/Footer/Footer.stories.tsx
rename to packages/ui/src/primitives/Label/Label.stories.tsx
index 8440fca..31edf84 100644
--- a/packages/ui/src/componenets/Footer/Footer.stories.tsx
+++ b/packages/ui/src/primitives/Label/Label.stories.tsx
@@ -1,9 +1,9 @@
import type { Meta, StoryObj } from '@storybook/react'
-import { Footer } from '.'
+import { Label } from '.'
const meta = {
- title: 'Example/Footer',
- component: Footer,
+ title: 'primitives/Label',
+ component: Label,
parameters: {
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
layout: 'centered',
@@ -14,13 +14,13 @@ const meta = {
argTypes: {},
// Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
args: {},
-} satisfies Meta
+} satisfies Meta
export default meta
type Story = StoryObj
export const Primary: Story = {
args: {
- variant: 'default',
+ children: 'Email address',
},
}
diff --git a/packages/ui/src/primitives/NavButton/NavButton.stories.tsx b/packages/ui/src/primitives/NavButton/NavButton.stories.tsx
index 8be61ca..a066964 100644
--- a/packages/ui/src/primitives/NavButton/NavButton.stories.tsx
+++ b/packages/ui/src/primitives/NavButton/NavButton.stories.tsx
@@ -1,17 +1,27 @@
import * as React from 'react'
-import { Meta } from '@storybook/react'
-
+import { Meta, StoryObj } from '@storybook/react'
import { NavButton } from '.'
-export default {
+const meta = {
+ title: 'primitives/NavButton',
component: NavButton,
- title: 'global/NavButton',
-} as Meta
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+ layout: 'centered',
+ },
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+ tags: ['autodocs'],
+ // More on argTypes: https://storybook.js.org/docs/api/argtypes
+ argTypes: {},
+ // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+ args: {},
+} satisfies Meta
-type Args = React.ComponentProps
+export default meta
+type Story = StoryObj
-export const Open = {
- render: (args: Args) => {
+export const Open: Story = {
+ render: (args) => {
return
},
@@ -20,8 +30,8 @@ export const Open = {
},
}
-export const Closed = {
- render: (args: Args) => {
+export const Closed: Story = {
+ render: (args) => {
return
},
diff --git a/packages/ui/src/primitives/RadioGroup/RadioGroup.stories.tsx b/packages/ui/src/primitives/RadioGroup/RadioGroup.stories.tsx
new file mode 100644
index 0000000..88d631f
--- /dev/null
+++ b/packages/ui/src/primitives/RadioGroup/RadioGroup.stories.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import * as RadioGroup from '.'
+import { Label } from '../Label'
+
+const meta = {
+ title: 'primitives/RadioGroup',
+ component: RadioGroup.Root,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+ layout: 'centered',
+ },
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+ tags: ['autodocs'],
+ // More on argTypes: https://storybook.js.org/docs/api/argtypes
+ argTypes: {},
+ // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+ args: {},
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Primary: Story = {
+ args: {},
+ render: () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ),
+}
diff --git a/packages/ui/src/primitives/Select/Select.stories.tsx b/packages/ui/src/primitives/Select/Select.stories.tsx
new file mode 100644
index 0000000..e627f2f
--- /dev/null
+++ b/packages/ui/src/primitives/Select/Select.stories.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import * as Select from '.'
+
+const meta = {
+ title: 'primitives/Select',
+ component: Select.Root,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+ layout: 'centered',
+ },
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+ tags: ['autodocs'],
+ // More on argTypes: https://storybook.js.org/docs/api/argtypes
+ argTypes: {},
+ // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+ args: {},
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Primary: Story = {
+ args: {},
+ render: () => (
+
+
+
+
+
+
+ Fruits
+ Apple
+ Banana
+ Blueberry
+ Grapes
+ Pineapple
+
+
+
+ ),
+}
diff --git a/packages/ui/src/primitives/Separator/Separator.stories.tsx b/packages/ui/src/primitives/Separator/Separator.stories.tsx
new file mode 100644
index 0000000..2fd8f98
--- /dev/null
+++ b/packages/ui/src/primitives/Separator/Separator.stories.tsx
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Separator } from '.'
+
+const meta = {
+ title: 'primitives/Separator',
+ component: Separator,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+ layout: 'centered',
+ },
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+ tags: ['autodocs'],
+ // More on argTypes: https://storybook.js.org/docs/api/argtypes
+ argTypes: {},
+ // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+ args: {},
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Primary: Story = {
+ args: {},
+}
diff --git a/packages/ui/src/primitives/Sheet/Sheet.stories.tsx b/packages/ui/src/primitives/Sheet/Sheet.stories.tsx
new file mode 100644
index 0000000..434a949
--- /dev/null
+++ b/packages/ui/src/primitives/Sheet/Sheet.stories.tsx
@@ -0,0 +1,62 @@
+import * as React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import * as Sheet from '.'
+import { Button } from '../Button'
+import { Label } from '../Label'
+import { Input } from '../Input'
+
+const meta = {
+ title: 'primitives/Sheet',
+ component: Sheet.Root,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+ layout: 'centered',
+ },
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+ tags: ['autodocs'],
+ // More on argTypes: https://storybook.js.org/docs/api/argtypes
+ argTypes: {},
+ // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+ args: {},
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Primary: Story = {
+ args: {},
+ render: () => (
+
+
+
+
+
+
+ Edit profile
+
+ Make changes to your profile here. Click save when you're done.
+
+
+
+ ),
+}
diff --git a/packages/ui/src/primitives/Stack/Stack.stories.tsx b/packages/ui/src/primitives/Stack/Stack.stories.tsx
new file mode 100644
index 0000000..1552076
--- /dev/null
+++ b/packages/ui/src/primitives/Stack/Stack.stories.tsx
@@ -0,0 +1,33 @@
+import { Stack } from '.'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta = {
+ title: 'primitives/Stack',
+ component: Stack,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+ layout: 'centered',
+ },
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+ tags: ['autodocs'],
+ // More on argTypes: https://storybook.js.org/docs/api/argtypes
+ argTypes: {},
+ // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+ args: {},
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Primary: Story = {
+ args: {
+ // type: 'Stack',
+ },
+ render: () => (
+
+