Dev

.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

.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

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)

commitlint.config.js

@@ -1,3 +1 @@
-module.exports = {
-  extends: ['@commitlint/config-conventional'],
-}
+module.exports = { extends: ['gitmoji'] }

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",

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",

packages/ui/src/hooks/usePrevious/index.ts

@@ -0,0 +1 @@
+export * from './usePrevious'

packages/ui/src/hooks/usePrevious/usePrevious.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react'
+
+export function usePrevious<T>(value: T): T | undefined {
+  const ref = React.useRef<T>()
+  React.useEffect(() => {
+    ref.current = value
+  }, [value])
+  return ref.current
+}

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<typeof Accordion.Root>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    type: 'single',
+  },
+  render: () => (
+    <Accordion.Root type="single">
+      <Accordion.Item value="a">
+        <Accordion.Trigger>Item</Accordion.Trigger>
+        <Accordion.Content>Hello</Accordion.Content>
+      </Accordion.Item>
+      <Accordion.Item value="b">
+        <Accordion.Trigger>Item</Accordion.Trigger>
+        <Accordion.Content>Hello</Accordion.Content>
+      </Accordion.Item>
+    </Accordion.Root>
+  ),
+}

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<typeof Alert.Root>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {},
+  render: () => (
+    <Alert.Root>
+      <Alert.Title>Hello</Alert.Title>
+      <Alert.Description>
+        <p>Ah chucks</p>
+      </Alert.Description>
+    </Alert.Root>
+  ),
+}

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<typeof AlertDialog.Root>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {},
+  render: () => (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger>Item</AlertDialog.Trigger>
+      <AlertDialog.Content>
+        <AlertDialog.Title>Item</AlertDialog.Title>
+        <AlertDialog.Description>Hello</AlertDialog.Description>
+        <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+        <AlertDialog.Action>Action</AlertDialog.Action>
+      </AlertDialog.Content>
+    </AlertDialog.Root>
+  ),
+}

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<typeof Badge>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    children: 'Hello world',
+    variant: 'default',
+    // type: 'Badge',
+  },
+}

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<typeof Button>
-
 export default meta
 type Story = StoryObj<typeof meta>
 

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<typeof Carousel.Root>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    options: {},
+  },
+  render: () => (
+    <Carousel.Root
+      options={{
+        active: true,
+        axis: 'x',
+        align: 'center',
+        slidesToScroll: 1,
+      }}
+    >
+      <Carousel.Prev>Prev</Carousel.Prev>
+      <Carousel.Next>Next</Carousel.Next>
+      <Carousel.Viewport>
+        <Carousel.Item className="w-full flex-shrink-0">A</Carousel.Item>
+        <Carousel.Item className="w-full flex-shrink-0">B</Carousel.Item>
+        <Carousel.Item className="w-full flex-shrink-0">C</Carousel.Item>
+        <Carousel.Item className="w-full flex-shrink-0">D</Carousel.Item>
+      </Carousel.Viewport>
+      <Carousel.Dots>
+        <Carousel.Dot index={0}>Dot</Carousel.Dot>
+        <Carousel.Dot index={1}>Dot</Carousel.Dot>
+        <Carousel.Dot index={2}>Dot</Carousel.Dot>
+        <Carousel.Dot index={3}>Dot</Carousel.Dot>
+      </Carousel.Dots>
+    </Carousel.Root>
+  ),
+}

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) {

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<typeof Collapsible.Root>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {},
+  render: () => (
+    <Collapsible.Root>
+      <Collapsible.Trigger>Item</Collapsible.Trigger>
+      <Collapsible.Content>Hello</Collapsible.Content>
+    </Collapsible.Root>
+  ),
+}