diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 7dccc38c..72048948 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -16,7 +16,7 @@ permissions: jobs: - pr: + pr_title_check: runs-on: ubuntu-latest if: github.actor != 'dependabot[bot]' steps: @@ -51,22 +51,18 @@ jobs: - uses: actions/checkout@v3 - uses: ./.github/actions/setup-node + - name: Build Setup + run: nr -C scripts ci:env-copy + - name: Build - run: | - nr -r ci:env-copy - nr build - nr -r ci:env-delete - nr -r build:check + run: nr build - coverage: - runs-on: ubuntu-latest - needs: [build] - steps: - - uses: actions/checkout@v3 - - uses: ./.github/actions/setup-node + - name: Build Check + run: | + nr build:check - - name: Coverage - run: nr coverage + - name: Cleanup + run: nr -C scripts ci:env-delete lint: runs-on: ubuntu-latest @@ -95,9 +91,9 @@ jobs: - name: Test run: nr test + + # - name: Storybook test + # run: nr test-storybook:ci - action-timeline: - needs: [build, lint, pr, test, trivy_scan, triage] - runs-on: ubuntu-latest - steps: - - uses: Kesin11/actions-timeline@v1 + - name: Coverage + run: nr test:coverage diff --git a/eslint.config.js b/eslint.config.js index 1e0e02f2..509575c3 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -2,9 +2,14 @@ import antfu from '@antfu/eslint-config' export default antfu({ stylistic: true, + javascript: true, typescript: true, + json: true, jsonc: true, + html: true, markdown: true, + yaml: true, + toml: true, }, { ignores: ['**/app/{docs,web}', '**/fixtures', '**/templates'], rules: { diff --git a/generator/package.json b/generator/package.json index 652f35f2..23a6497f 100644 --- a/generator/package.json +++ b/generator/package.json @@ -36,7 +36,7 @@ "giget": "^1.2.1", "globby": "^14.0.1", "latest-version": "^9.0.0", - "recast": "^0.23.4", + "recast": "^0.23.5", "replace-string": "^4.0.0", "slash": "^5.1.0" }, diff --git a/knip.config.ts b/knip.config.ts index 2ad87a66..29ff4930 100644 --- a/knip.config.ts +++ b/knip.config.ts @@ -1,17 +1,22 @@ -const config = { +import type { KnipConfig } from 'knip' + +const config: KnipConfig = { + 'rules': { + dependencies: 'off', + }, 'ignoreBinaries': ['templ-cli', 'test-storybook'], 'ignoreDependencies': ['typecheck'], 'workspaces': { '.': { entry: ['eslint.config.js'], - ignore: ['**/templates/**', '**/example/**', '**/.config/**'], + ignore: ['**/.config/**', '**/generator/**', '**/templates/**'], }, 'packages/*': { - entry: ['src/**/*.{ts,tsx}', 'test/**/*.test.{ts,tsx}', '**/*.load.ts', '**/.storybook/*.{js,ts}'], + entry: ['src/**/*.{ts,tsx}', 'test/**/*.test.{ts,tsx}', '**/*.load.ts', '**/.storybook/*.{js,ts}', '**/*.config.{js,ts}', '**/*setupTests.{js,ts}'], ignore: ['**/test/**', '**/*.story.{ts,tsx}'], }, 'apps/*': { - entry: ['src/**/*.{ts,tsx}', 'test/**/*.test.{ts,tsx}', '**/*.config.js'], + entry: ['src/**/*.{ts,tsx}', 'test/**/*.test.{ts,tsx}', '**/*.config.{js,ts}'], }, }, 'eslint': { @@ -26,15 +31,6 @@ const config = { 'github-actions': { config: ['.github/workflows/*.{yml,yaml}', '.github/**/action.{yml,yaml}'], }, - 'lefthook': { - config: [ - 'lefthook.yml', - '.git/hooks/prepare-commit-msg', - '.git/hooks/commit-msg', - '.git/hooks/pre-{applypatch,commit,merge-commit,push,rebase,receive}', - '.git/hooks/post-{checkout,commit,merge,rewrite}', - ], - }, 'next': { entry: [ 'next.config.{js,ts,cjs,mjs}', diff --git a/package.json b/package.json index 762a102e..04e1cd07 100644 --- a/package.json +++ b/package.json @@ -26,23 +26,26 @@ }, "scripts": { "prepare": "husky", - "all": "ni && nr deps:update && nr build && nr lint && nr test", - "build": "nr clean && turbo run build && knip && nr -C scripts build:check && nr -r typecheck", + "all": "ni && nr deps:update && nr clean && nr build && nr lint && nr test", + "build": "turbo run build", + "build:check": "knip --production && nr -C scripts build:check", "clean": "nr -C scripts clean", - "coverage": "vitest run --coverage", "deps:update": "taze -r -w -i -f -l", - "lint": "eslint . --fix && nr -C scripts automd", + "lint": "eslint . --fix && nr -C scripts automd && nr typecheck", "release": "changeset version && npm publish && git push --follow-tags", - "test": "turbo run test" + "test": "turbo run test", + "test:coverage": "vitest run --coverage", + "typecheck": "nr -C scripts typecheck" }, "devDependencies": { "@antfu/eslint-config": "2.7.0", "@antfu/ni": "^0.21.12", "@changesets/cli": "^2.27.1", + "@storybook/blocks": "^7.6.17", "@vitest/coverage-v8": "^1.3.1", "eslint": "^8.57.0", "husky": "^9.0.11", - "knip": "^5.0.2", + "knip": "^5.0.3", "pnpm": "^8.15.4", "taze": "^0.13.3", "turbo": "^1.12.4", diff --git a/packages/api/package.json b/packages/api/package.json index d7be4d0d..65fb24e9 100644 --- a/packages/api/package.json +++ b/packages/api/package.json @@ -40,9 +40,9 @@ "dependencies": { "@hono/node-server": "^1.8.2", "@hono/zod-openapi": "^0.9.6", - "@scalar/hono-api-reference": "^0.3.64", + "@scalar/hono-api-reference": "^0.3.66", "consola": "^3.2.3", - "hono": "^4.0.8" + "hono": "^4.0.9" }, "devDependencies": { "@templ/config": "workspace:*", diff --git a/packages/config/example/index.ts b/packages/config/example/index.ts deleted file mode 100644 index 2b388116..00000000 --- a/packages/config/example/index.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { cwd } from 'node:process' -import { resolve } from 'node:path' -import consola from 'consola' - -import { loadConfig } from '../src' - -async function main() { - const result = await loadConfig({ - cwd: resolve(cwd(), '..', '..', '.config'), - config: true, - env: true, - flag: true, - }) - - consola.log({ result }) -} - -main().catch(consola.error) diff --git a/packages/ui/.storybook/main.ts b/packages/ui/.storybook/main.ts index 434eab3b..5dd40e7e 100644 --- a/packages/ui/.storybook/main.ts +++ b/packages/ui/.storybook/main.ts @@ -5,13 +5,16 @@ const config: StorybookConfig = { stories: ['../stories/**/*.mdx', '../registry/**/*.stories.@(js|jsx|mjs|ts|tsx)'], addons: [ '@geometricpanda/storybook-addon-badges', + '@storybook/addon-a11y', + '@storybook/addon-coverage', '@storybook/addon-essentials', // '@storybook/addon-interactions', '@storybook/addon-links', '@storybook/addon-storysource', - 'storybook-dark-mode', + 'storybook-addon-rtl', 'storybook-addon-performance', 'storybook-addon-pseudo-states', + 'storybook-dark-mode', ], framework: '@storybook/react-vite', async viteFinal(config) { diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts index 52866bb9..56e66e93 100644 --- a/packages/ui/.storybook/preview.ts +++ b/packages/ui/.storybook/preview.ts @@ -9,6 +9,28 @@ import '../styles/global.css' export const preview: Preview = { parameters: { actions: { argTypesRegex: '^on[A-Z].*' }, + a11y: { + // Optional selector to inspect + element: '#storybook-root', + config: { + rules: [ + { + // The autocomplete rule will not run based on the CSS selector provided + id: 'autocomplete-valid', + selector: '*:not([autocomplete="nope"])', + }, + { + // Setting the enabled option to false will disable checks for this particular rule on all stories. + id: 'image-alt', + enabled: false, + }, + ], + }, + // Axe's options parameter + options: {}, + // Optional flag to prevent the automatic check + manual: true, + }, controls: { matchers: { color: /(background|color)$/i, diff --git a/packages/ui/esbuild.config.ts b/packages/ui/esbuild.config.ts index ed4501c2..37c4c51e 100644 --- a/packages/ui/esbuild.config.ts +++ b/packages/ui/esbuild.config.ts @@ -4,8 +4,8 @@ import type { BuildOptions } from 'esbuild' import { getBuildConfig } from '@templ/config' import { globby } from 'globby' -const entryPoints = await globby(['index.ts', 'components/**/*.{ts,tsx}', 'lib/**/*.ts', 'registry/**/*.{ts,tsx}'], { - ignore: ['registry/**/*.stories.tsx'], +const entryPoints = await globby(['index.ts', 'components/**/*.{ts,tsx,js,jsx}', 'lib/**/*.ts', 'registry/**/*.{ts,tsx,js,jsx}'], { + ignore: ['registry/**/*.stories.{ts,tsx,js,jsx}', 'registry/**/*.test.{ts,tsx,js,jsx}'], }) const config: BuildOptions = { diff --git a/packages/ui/package.json b/packages/ui/package.json index d98a2870..d08bd1bd 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -52,14 +52,13 @@ "npm": ">=8" }, "scripts": { - "postinstall": "pnpm exec playwright install", "build": "tsx esbuild.config.ts", - "build-storybook": "storybook build", + "build:storybook": "storybook build -o dist/storybook", "dev": "tsx esbuild.config.ts --watch", "storybook": "storybook dev -p 6006", "test": "vitest run", "test:storybook": "test-storybook", - "test:storybook:ci": "test-storybook --ci", + "test-storybook:ci": "concurrently -k -s first -n \"Storybook,Test\" -c \"magenta,blue\" \"nr build:storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && nr test:storybook --ci\"", "typecheck": "tsc --noEmit" }, "dependencies": { @@ -102,7 +101,7 @@ "postcss": "^8.4.35", "react": "^18.2.0", "react-day-picker": "^8.10.0", - "react-hook-form": "^7.50.1", + "react-hook-form": "^7.51.0", "sonner": "^1.4.3", "tailwind-merge": "^2.2.1", "tailwindcss": "^3.4.1", @@ -111,35 +110,46 @@ "devDependencies": { "@geometricpanda/storybook-addon-badges": "^2.0.2", "@hookform/resolvers": "^3.3.4", + "@storybook/addon-a11y": "^7.6.17", "@storybook/addon-actions": "^7.6.17", + "@storybook/addon-coverage": "^1.0.1", "@storybook/addon-essentials": "^7.6.17", "@storybook/addon-highlight": "^7.6.17", + "@storybook/addon-interactions": "^7.6.17", "@storybook/addon-links": "^7.6.17", "@storybook/addon-storysource": "^7.6.17", + "@storybook/addon-themes": "^7.6.17", "@storybook/blocks": "^7.6.17", "@storybook/manager-api": "^7.6.17", "@storybook/preview-api": "^7.6.17", "@storybook/react": "^7.6.17", "@storybook/react-vite": "^7.6.17", "@storybook/test-runner": "^0.16.0", + "@storybook/testing-library": "^0.2.2", "@storybook/theming": "^7.6.17", "@templ/config": "workspace:*", "@templ/tsconfig": "workspace:*", + "@testing-library/react": "^14.2.1", "@types/node": "^20.11.24", "@types/react": "^18.2.61", + "concurrently": "^8.2.2", "date-fns": "^3.3.1", "esbuild": "^0.20.1", "globby": "^14.0.1", + "happy-dom": "^13.6.2", + "http-server": "^14.1.1", "lucide-react": "0.344.0", - "playwright": "^1.42.0", "storybook": "^7.6.17", "storybook-addon-performance": "^0.17.3", - "storybook-addon-pseudo-states": "^2.1.2", + "storybook-addon-pseudo-states": "^2.2.0", + "storybook-addon-rtl": "^1.0.0", "storybook-dark-mode": "^3.0.3", "tsx": "^4.7.1", "typescript": "^5.3.3", "vite": "^5.1.4", "vitest": "^1.3.1", + "vitest-axe": "^0.1.0", + "wait-on": "^7.2.0", "zod": "^3.22.4" }, "size-limit": "65 KB" diff --git a/packages/ui/registry/accordion/__snapshots__/accordion.test.tsx.snap b/packages/ui/registry/accordion/__snapshots__/accordion.test.tsx.snap new file mode 100644 index 00000000..5b6caac3 --- /dev/null +++ b/packages/ui/registry/accordion/__snapshots__/accordion.test.tsx.snap @@ -0,0 +1,157 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`accordion component > should render properly 1`] = ` +
+
+
+

+ +

+ +
+

+ +

+ +
+

+ +

+ +
+
+`; diff --git a/packages/ui/registry/accordion/accordion.stories.tsx b/packages/ui/registry/accordion/accordion.stories.tsx index 502b7811..15bef45f 100644 --- a/packages/ui/registry/accordion/accordion.stories.tsx +++ b/packages/ui/registry/accordion/accordion.stories.tsx @@ -1,5 +1,6 @@ import * as React from 'react' import type { Meta, StoryObj } from '@storybook/react' +import { within } from '@storybook/testing-library' import { Accordion, AccordionContent, @@ -25,12 +26,11 @@ const meta = { collapsible: true, }, parameters: { + direction: 'ltr', badges: ['beta', 'stable'], }, } satisfies Meta -export default meta - type Story = StoryObj /** @@ -60,4 +60,10 @@ export const Default: Story = { ), -} + play: async ({ canvasElement }) => { + const canvas = within(canvasElement) + await canvas.getByText('Is it accessible?') + }, +} satisfies Meta + +export default meta diff --git a/packages/ui/registry/accordion/accordion.test.tsx b/packages/ui/registry/accordion/accordion.test.tsx new file mode 100644 index 00000000..5976c484 --- /dev/null +++ b/packages/ui/registry/accordion/accordion.test.tsx @@ -0,0 +1,62 @@ +import { cleanup, fireEvent, render, screen } from '@testing-library/react' +import React from 'react' +import { afterEach, beforeEach, describe, expect, it } from 'vitest' +import { axe } from 'vitest-axe' +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from './accordion' + +function renderAccordion({ args }: any) { + const { container } = render( + + + Is it accessible? + + Yes. It adheres to the WAI-ARIA design pattern. + + + + Is it styled? + + Yes. It comes with default styles that matches the other components' + aesthetic. + + + + Is it animated? + + Yes. It's animated by default, but you can disable it if you prefer. + + + , + ) + return container +} + +const { getByText } = screen + +describe('accordion component', () => { + let container: HTMLElement + + beforeEach(() => { + container = renderAccordion({}) + }) + + afterEach(() => cleanup()) + + it('should render properly', () => { + expect(container).toMatchSnapshot() + }) + it('should validate a11y violations for accordion', async () => { + expect(await axe(container)).toHaveNoViolations() + }) + + it('should render content when accordion element is clicked', async () => { + const ele = getByText(/Is it accessible?/) + expect(ele).toBeDefined() + fireEvent.click(ele) + }) +}) diff --git a/packages/ui/registry/alert-dialog/alert-dialog.stories.tsx b/packages/ui/registry/alert-dialog/alert-dialog.stories.tsx index 31d84927..b4c34a5a 100644 --- a/packages/ui/registry/alert-dialog/alert-dialog.stories.tsx +++ b/packages/ui/registry/alert-dialog/alert-dialog.stories.tsx @@ -26,8 +26,6 @@ const meta = { }, } satisfies Meta -export default meta - type Story = StoryObj /** @@ -52,4 +50,6 @@ export const Default: Story = { ), -} +} satisfies Meta + +export default meta diff --git a/packages/ui/registry/alert/alert.stories.tsx b/packages/ui/registry/alert/alert.stories.tsx index ac9e3963..a7ff0aa5 100644 --- a/packages/ui/registry/alert/alert.stories.tsx +++ b/packages/ui/registry/alert/alert.stories.tsx @@ -29,8 +29,6 @@ const meta = { }, } satisfies Meta -export default meta - type Story = StoryObj /** * The default form of the alert. @@ -63,3 +61,5 @@ export const Destructive: Story = { variant: 'destructive', }, } + +export default meta diff --git a/packages/ui/registry/aspect/aspect-ratio.stories.tsx b/packages/ui/registry/aspect/aspect-ratio.stories.tsx index f38d8ad7..1e2681e0 100644 --- a/packages/ui/registry/aspect/aspect-ratio.stories.tsx +++ b/packages/ui/registry/aspect/aspect-ratio.stories.tsx @@ -23,8 +23,6 @@ const meta: Meta = { ], } satisfies Meta -export default meta - type Story = StoryObj /** @@ -98,3 +96,5 @@ export const Cinemascope: Story = { ), } + +export default meta diff --git a/packages/ui/registry/avatar/avatar.stories.tsx b/packages/ui/registry/avatar/avatar.stories.tsx index 66b95ef3..8b082c0d 100644 --- a/packages/ui/registry/avatar/avatar.stories.tsx +++ b/packages/ui/registry/avatar/avatar.stories.tsx @@ -20,8 +20,6 @@ const meta = { }, } satisfies Meta -export default meta - type Story = StoryObj /** @@ -35,3 +33,5 @@ export const Default: Story = { ), } + +export default meta diff --git a/packages/ui/registry/badge/badge.stories.tsx b/packages/ui/registry/badge/badge.stories.tsx index aa09739c..3421a182 100644 --- a/packages/ui/registry/badge/badge.stories.tsx +++ b/packages/ui/registry/badge/badge.stories.tsx @@ -22,14 +22,11 @@ const meta = { }, } satisfies Meta -export default meta - type Story = StoryObj -/** - * The default form of the badge. - */ -export const Default: Story = {} +export const Default: Story = { + args: {}, +} /** * Use the `secondary` badge to call for less urgent information, blending @@ -60,3 +57,5 @@ export const Outline: Story = { variant: 'outline', }, } + +export default meta diff --git a/packages/ui/registry/button/button.stories.tsx b/packages/ui/registry/button/button.stories.tsx index c58df186..0b2aa886 100644 --- a/packages/ui/registry/button/button.stories.tsx +++ b/packages/ui/registry/button/button.stories.tsx @@ -12,7 +12,6 @@ const meta: Meta = { badges: ['beta', 'stable'], }, } -export default meta type Story = StoryObj @@ -67,3 +66,5 @@ export const WithIcon: Story = { variant: 'secondary', }, } + +export default meta diff --git a/packages/ui/registry/calendar/calendar.stories.tsx b/packages/ui/registry/calendar/calendar.stories.tsx index a1075019..7de9fa27 100644 --- a/packages/ui/registry/calendar/calendar.stories.tsx +++ b/packages/ui/registry/calendar/calendar.stories.tsx @@ -23,14 +23,13 @@ const meta = { }, } satisfies Meta -export default meta - type Story = StoryObj -/** - * The default form of the calendar. - */ -export const Default: Story = {} +export const Default: Story = { + args: { + min: 1, + }, +} /** * Use the `multiple` mode to select multiple dates. @@ -79,3 +78,5 @@ export const MultipleMonths: Story = { showOutsideDays: false, }, } + +export default meta diff --git a/packages/ui/registry/card/card.stories.tsx b/packages/ui/registry/card/card.stories.tsx index 60352180..f810b2aa 100644 --- a/packages/ui/registry/card/card.stories.tsx +++ b/packages/ui/registry/card/card.stories.tsx @@ -42,8 +42,6 @@ const meta = { }, } satisfies Meta -export default meta - type Story = StoryObj /** @@ -72,4 +70,6 @@ export const Default: Story = { ), -} +} satisfies Meta + +export default meta diff --git a/packages/ui/registry/carousel/carousel.stories.tsx b/packages/ui/registry/carousel/carousel.stories.tsx index 7aaaa35a..54f43df4 100644 --- a/packages/ui/registry/carousel/carousel.stories.tsx +++ b/packages/ui/registry/carousel/carousel.stories.tsx @@ -25,8 +25,6 @@ const meta: Meta = { }, } satisfies Meta -export default meta - type Story = StoryObj /** @@ -48,7 +46,7 @@ export const Default: Story = { ), -} +} satisfies Meta /** * Use the `basis` utility class to change the size of the carousel. @@ -73,3 +71,5 @@ export const Size: Story = { className: 'mx-12 w-full max-w-xs', }, } + +export default meta diff --git a/packages/ui/registry/checkbox/checkbox.stories.tsx b/packages/ui/registry/checkbox/checkbox.stories.tsx index e29b2d44..f13021fc 100644 --- a/packages/ui/registry/checkbox/checkbox.stories.tsx +++ b/packages/ui/registry/checkbox/checkbox.stories.tsx @@ -20,8 +20,6 @@ const meta: Meta = { }, } satisfies Meta -export default meta - type Story = StoryObj /** @@ -50,3 +48,4 @@ export const Disabled: Story = { disabled: true, }, } +export default meta diff --git a/packages/ui/registry/collapsible/collapsible.stories.tsx b/packages/ui/registry/collapsible/collapsible.stories.tsx index 99f965ea..89f614de 100644 --- a/packages/ui/registry/collapsible/collapsible.stories.tsx +++ b/packages/ui/registry/collapsible/collapsible.stories.tsx @@ -25,8 +25,6 @@ const meta = { }, } satisfies Meta -export default meta - type Story = StoryObj /** @@ -45,7 +43,7 @@ export const Default: Story = { ), -} +} satisfies Meta /** * Use the `disabled` prop to disable the interaction. @@ -55,3 +53,5 @@ export const Disabled: Story = { disabled: true, }, } + +export default meta diff --git a/packages/ui/registry/command/command.stories.tsx b/packages/ui/registry/command/command.stories.tsx index 9f223ce7..c8f55f7c 100644 --- a/packages/ui/registry/command/command.stories.tsx +++ b/packages/ui/registry/command/command.stories.tsx @@ -27,8 +27,6 @@ const meta = { }, } satisfies Meta -export default meta - type Story = StoryObj /** @@ -54,4 +52,6 @@ export const Default: Story = { ), -} +} satisfies Meta + +export default meta diff --git a/packages/ui/registry/context/context-menu.stories.tsx b/packages/ui/registry/context/context-menu.stories.tsx index 4149e38c..cb4b3f56 100644 --- a/packages/ui/registry/context/context-menu.stories.tsx +++ b/packages/ui/registry/context/context-menu.stories.tsx @@ -32,8 +32,6 @@ const meta = { }, } satisfies Meta -export default meta - type Story = StoryObj /** @@ -53,7 +51,7 @@ export const Default: Story = { ), -} +} satisfies Meta /** * A context menu with shortcuts. @@ -153,3 +151,5 @@ export const WithRadioGroup: Story = { ), } + +export default meta diff --git a/packages/ui/registry/dialog/dialog.stories.tsx b/packages/ui/registry/dialog/dialog.stories.tsx index a429ef84..94cceb94 100644 --- a/packages/ui/registry/dialog/dialog.stories.tsx +++ b/packages/ui/registry/dialog/dialog.stories.tsx @@ -26,8 +26,6 @@ const meta = { }, } satisfies Meta -export default meta - type Story = StoryObj /** @@ -56,4 +54,6 @@ export const Default: Story = { ), -} +} satisfies Meta + +export default meta diff --git a/packages/ui/registry/dropdown/dropdown-menu.stories.tsx b/packages/ui/registry/dropdown/dropdown-menu.stories.tsx index 795ca7fa..345e5fb8 100644 --- a/packages/ui/registry/dropdown/dropdown-menu.stories.tsx +++ b/packages/ui/registry/dropdown/dropdown-menu.stories.tsx @@ -40,8 +40,6 @@ const meta = { }, } satisfies Meta -export default meta - type Story = StoryObj /** @@ -61,7 +59,7 @@ export const Default: Story = { ), -} +} satisfies Meta /** * A dropdown menu with shortcuts. @@ -165,3 +163,5 @@ export const WithCheckboxes: Story = { ), } + +export default meta diff --git a/packages/ui/registry/form/form.stories.tsx b/packages/ui/registry/form/form.stories.tsx index 4ee81a4f..6b0f0101 100644 --- a/packages/ui/registry/form/form.stories.tsx +++ b/packages/ui/registry/form/form.stories.tsx @@ -27,8 +27,6 @@ const meta: Meta = { }, } satisfies Meta -export default meta - type Story = StoryObj const formSchema = z.object({ @@ -81,9 +79,8 @@ function ProfileForm(args: Story['args']) { ) } -/** - * The default form of the form. - */ export const Default: Story = { render: args => , } + +export default meta diff --git a/packages/ui/registry/hover-card/hover-card.stories.tsx b/packages/ui/registry/hover-card/hover-card.stories.tsx index 7b1003b4..9c916e9b 100644 --- a/packages/ui/registry/hover-card/hover-card.stories.tsx +++ b/packages/ui/registry/hover-card/hover-card.stories.tsx @@ -21,8 +21,6 @@ const meta = { }, } satisfies Meta -export default meta - type Story = StoryObj /** @@ -49,3 +47,5 @@ export const Instant: Story = { closeDelay: 0, }, } + +export default meta diff --git a/packages/ui/registry/input/input.stories.tsx b/packages/ui/registry/input/input.stories.tsx index 9f6fe0e1..66b49c4c 100644 --- a/packages/ui/registry/input/input.stories.tsx +++ b/packages/ui/registry/input/input.stories.tsx @@ -22,14 +22,11 @@ const meta = { }, } satisfies Meta -export default meta - type Story = StoryObj -/** - * The default form of the input field. - */ -export const Default: Story = {} +export const Default: Story = { + args: { }, +} /** * Use the `disabled` prop to make the input non-interactive and appears faded, @@ -83,3 +80,5 @@ export const WithButton: Story = {
), } + +export default meta diff --git a/packages/ui/registry/label/label.stories.tsx b/packages/ui/registry/label/label.stories.tsx index 31db41cd..4e23ca05 100644 --- a/packages/ui/registry/label/label.stories.tsx +++ b/packages/ui/registry/label/label.stories.tsx @@ -22,11 +22,11 @@ const meta = { }, } satisfies Meta -export default meta - type Story = StoryObj /** * The default form of the label. */ export const Default: Story = {} + +export default meta diff --git a/packages/ui/registry/menu/menubar.stories.tsx b/packages/ui/registry/menu/menubar.stories.tsx index fd6f1894..4971f564 100644 --- a/packages/ui/registry/menu/menubar.stories.tsx +++ b/packages/ui/registry/menu/menubar.stories.tsx @@ -33,8 +33,6 @@ const meta = { }, } satisfies Meta -export default meta - type Story = StoryObj /** @@ -60,7 +58,7 @@ export const Default: Story = { ), -} +} satisfies Meta /** * A menubar with a submenu. @@ -127,3 +125,5 @@ export const WithCheckboxItems: Story = { ), } + +export default meta diff --git a/packages/ui/registry/navigation/navigation.stories.tsx b/packages/ui/registry/navigation/navigation.stories.tsx index c8af9bbb..b6de8153 100644 --- a/packages/ui/registry/navigation/navigation.stories.tsx +++ b/packages/ui/registry/navigation/navigation.stories.tsx @@ -24,8 +24,6 @@ const meta = { }, } satisfies Meta -export default meta - type Story = StoryObj /** @@ -78,4 +76,6 @@ export const Default: Story = { ), -} +} satisfies Meta + +export default meta diff --git a/packages/ui/registry/popover/popover.stories.tsx b/packages/ui/registry/popover/popover.stories.tsx index 05fcd9be..fe7fbc71 100644 --- a/packages/ui/registry/popover/popover.stories.tsx +++ b/packages/ui/registry/popover/popover.stories.tsx @@ -20,8 +20,6 @@ const meta = { }, } satisfies Meta -export default meta - type Story = StoryObj /** @@ -35,3 +33,5 @@ export const Default: Story = { ), } + +export default meta diff --git a/packages/ui/registry/progress/progress.stories.tsx b/packages/ui/registry/progress/progress.stories.tsx index 30e741e0..75d2514b 100644 --- a/packages/ui/registry/progress/progress.stories.tsx +++ b/packages/ui/registry/progress/progress.stories.tsx @@ -19,14 +19,11 @@ const meta = { }, } satisfies Meta -export default meta - type Story = StoryObj -/** - * The default form of the progress. - */ -export const Default: Story = {} +export const Default: Story = { + args: {}, +} /** * When the progress is indeterminate. @@ -45,3 +42,5 @@ export const Completed: Story = { value: 100, }, } + +export default meta diff --git a/packages/ui/registry/radio-group/radio-group.stories.tsx b/packages/ui/registry/radio-group/radio-group.stories.tsx index 66e8fda9..1828e0b0 100644 --- a/packages/ui/registry/radio-group/radio-group.stories.tsx +++ b/packages/ui/registry/radio-group/radio-group.stories.tsx @@ -20,8 +20,6 @@ const meta = { }, } satisfies Meta -export default meta - type Story = StoryObj /** @@ -38,4 +36,6 @@ export const Default: Story = { ), -} +} satisfies Meta + +export default meta diff --git a/packages/ui/registry/scroll-area/scroll-area.stories.tsx b/packages/ui/registry/scroll-area/scroll-area.stories.tsx index 453236d8..b1a76f01 100644 --- a/packages/ui/registry/scroll-area/scroll-area.stories.tsx +++ b/packages/ui/registry/scroll-area/scroll-area.stories.tsx @@ -25,14 +25,13 @@ const meta = { }, } satisfies Meta -export default meta - type Story = StoryObj -/** - * The default form of the scroll area. - */ -export const Default: Story = {} +export const Default: Story = { + args: { + type: 'always', + }, +} /** * Use the `type` prop with `always` to always show the scroll area. @@ -60,3 +59,5 @@ export const Scroll: Story = { type: 'scroll', }, } + +export default meta diff --git a/packages/ui/registry/select/select.stories.tsx b/packages/ui/registry/select/select.stories.tsx index d0245132..7470b323 100644 --- a/packages/ui/registry/select/select.stories.tsx +++ b/packages/ui/registry/select/select.stories.tsx @@ -25,8 +25,6 @@ const meta: Meta = { }, } satisfies Meta -export default meta - type Story = StoryObj /** @@ -69,4 +67,6 @@ export const Default: Story = { ), -} +} satisfies Meta + +export default meta diff --git a/packages/ui/registry/separator/separator.stories.tsx b/packages/ui/registry/separator/separator.stories.tsx index 0f5e9225..d737dbdc 100644 --- a/packages/ui/registry/separator/separator.stories.tsx +++ b/packages/ui/registry/separator/separator.stories.tsx @@ -15,10 +15,18 @@ const meta = { }, } satisfies Meta -export default meta - type Story = StoryObj +export const Default: Story = { + render: () => ( +
+
Left
+ +
Right
+
+ ), +} + /** * The default form of the separator. */ @@ -44,3 +52,5 @@ export const Vertical: Story = {
), } + +export default meta diff --git a/packages/ui/registry/sheet/sheet.stories.tsx b/packages/ui/registry/sheet/sheet.stories.tsx index 31d74226..938f5416 100644 --- a/packages/ui/registry/sheet/sheet.stories.tsx +++ b/packages/ui/registry/sheet/sheet.stories.tsx @@ -36,8 +36,6 @@ const meta: Meta = { }, } satisfies Meta -export default meta - type Story = StoryObj /** @@ -66,4 +64,6 @@ export const Default: Story = { ), -} +} satisfies Meta + +export default meta diff --git a/packages/ui/registry/skeleton/skeleton.stories.tsx b/packages/ui/registry/skeleton/skeleton.stories.tsx index 3f91c252..8b532dd7 100644 --- a/packages/ui/registry/skeleton/skeleton.stories.tsx +++ b/packages/ui/registry/skeleton/skeleton.stories.tsx @@ -16,8 +16,6 @@ const meta = { }, } satisfies Meta -export default meta - type Story = StoryObj /** @@ -34,3 +32,5 @@ export const Default: Story = {
), } + +export default meta diff --git a/packages/ui/registry/slider/slider.stories.tsx b/packages/ui/registry/slider/slider.stories.tsx index 497ca03a..7391ae5c 100644 --- a/packages/ui/registry/slider/slider.stories.tsx +++ b/packages/ui/registry/slider/slider.stories.tsx @@ -19,14 +19,11 @@ const meta = { }, } satisfies Meta -export default meta - type Story = StoryObj -/** - * The default form of the slider. - */ -export const Default: Story = {} +export const Default: Story = { + args: {}, +} /** * Use the `inverted` prop to have the slider fill from right to left. @@ -45,3 +42,5 @@ export const Disabled: Story = { disabled: true, }, } + +export default meta diff --git a/packages/ui/registry/sonner/sonner.stories.tsx b/packages/ui/registry/sonner/sonner.stories.tsx index 0d67a2d5..b33d6a88 100644 --- a/packages/ui/registry/sonner/sonner.stories.tsx +++ b/packages/ui/registry/sonner/sonner.stories.tsx @@ -21,8 +21,6 @@ const meta: Meta = { }, } satisfies Meta -export default meta - type Story = StoryObj /** @@ -47,3 +45,5 @@ export const Default: Story = { ), } + +export default meta diff --git a/packages/ui/registry/switch/switch.stories.tsx b/packages/ui/registry/switch/switch.stories.tsx index 63bf5a33..e4880bcf 100644 --- a/packages/ui/registry/switch/switch.stories.tsx +++ b/packages/ui/registry/switch/switch.stories.tsx @@ -16,8 +16,6 @@ const meta = { }, } satisfies Meta -export default meta - type Story = StoryObj /** @@ -54,3 +52,5 @@ export const Disabled: Story = { ), } + +export default meta diff --git a/packages/ui/registry/table/table.stories.tsx b/packages/ui/registry/table/table.stories.tsx index f5f7adc8..9c18757d 100644 --- a/packages/ui/registry/table/table.stories.tsx +++ b/packages/ui/registry/table/table.stories.tsx @@ -50,8 +50,6 @@ const meta = { }, } satisfies Meta -export default meta - type Story = StoryObj /** @@ -81,4 +79,6 @@ export const Default: Story = { ), -} +} satisfies Meta + +export default meta diff --git a/packages/ui/registry/tabs/tabs.stories.tsx b/packages/ui/registry/tabs/tabs.stories.tsx index 42055fd5..7172900e 100644 --- a/packages/ui/registry/tabs/tabs.stories.tsx +++ b/packages/ui/registry/tabs/tabs.stories.tsx @@ -26,8 +26,6 @@ const meta = { }, } satisfies Meta -export default meta - type Story = StoryObj /** @@ -46,4 +44,6 @@ export const Default: Story = { Change your password here. ), -} +} satisfies Meta + +export default meta diff --git a/packages/ui/registry/textarea/textarea.stories.tsx b/packages/ui/registry/textarea/textarea.stories.tsx index ca4f34a7..b6444177 100644 --- a/packages/ui/registry/textarea/textarea.stories.tsx +++ b/packages/ui/registry/textarea/textarea.stories.tsx @@ -19,14 +19,17 @@ const meta = { }, } satisfies Meta -export default meta - type Story = StoryObj -/** - * The default form of the textarea. - */ -export const Default: Story = {} +export const Default: Story = { + args: {}, + render: args => ( +
+ +