From 72a38d16e59295649f07c484cf96d7f74a4641a7 Mon Sep 17 00:00:00 2001 From: Joydip Roy Date: Wed, 28 Feb 2024 21:38:36 +0530 Subject: [PATCH 01/12] chore: storybook modification and unit test added for accordion --- apps/desktop/package.json | 2 +- apps/docs/package.json | 2 +- apps/web/package.json | 2 +- eslint.config.js | 5 + generator/package.json | 2 +- generator/templates/basic-js/package.json | 2 +- generator/templates/basic-ts/package.json | 2 +- knip.config.ts | 4 +- packages/api/package.json | 6 +- packages/cli/package.json | 2 +- packages/config/package.json | 2 +- packages/core/package.json | 2 +- packages/flags/package.json | 2 +- packages/storage/package.json | 2 +- packages/ui/.storybook/main.ts | 20 +- packages/ui/.storybook/preview-body.html | 5 - packages/ui/.storybook/preview.ts | 22 + packages/ui/esbuild.config.ts | 4 +- packages/ui/package.json | 15 +- .../__snapshots__/accordion.test.tsx.snap | 157 ++++ packages/ui/registry/accordion/accordion.mdx | 20 + .../registry/accordion/accordion.stories.tsx | 17 +- .../ui/registry/accordion/accordion.test.tsx | 62 ++ .../registry/alert/alert-dialog.stories.tsx | 3 +- packages/ui/registry/alert/alert.stories.tsx | 3 +- .../registry/aspect/aspect-ratio.stories.tsx | 3 +- .../ui/registry/avatar/avatar.stories.tsx | 3 +- packages/ui/registry/badge/badge.stories.tsx | 3 +- .../ui/registry/button/button.stories.tsx | 1 - .../ui/registry/calendar/calendar.stories.tsx | 3 +- packages/ui/registry/card/card.stories.tsx | 3 +- .../ui/registry/carousel/carousel.stories.tsx | 3 +- .../ui/registry/checkbox/checkbox.stories.tsx | 3 +- .../collapsible/collapsible.stories.tsx | 3 +- .../ui/registry/command/command.stories.tsx | 3 +- .../registry/context/context-menu.stories.tsx | 3 +- .../ui/registry/dialog/dialog.stories.tsx | 3 +- .../dropdown/dropdown-menu.stories.tsx | 3 +- packages/ui/registry/form/form.stories.tsx | 3 +- .../hover-card/hover-card.stories.tsx | 3 +- packages/ui/registry/input/input.stories.tsx | 3 +- packages/ui/registry/label/label.stories.tsx | 3 +- packages/ui/registry/menu/menubar.stories.tsx | 3 +- .../ui/registry/menu/navigation.stories.tsx | 3 +- .../ui/registry/popover/popover.stories.tsx | 3 +- .../ui/registry/progress/progress.stories.tsx | 3 +- .../radio-group/radio-group.stories.tsx | 3 +- .../scroll-area/scroll-area.stories.tsx | 3 +- .../ui/registry/select/select.stories.tsx | 3 +- .../registry/separator/separator.stories.tsx | 1 - packages/ui/registry/sheet/sheet.stories.tsx | 3 +- .../ui/registry/skeleton/skeleton.stories.tsx | 3 +- .../ui/registry/slider/slider.stories.tsx | 3 +- .../ui/registry/sonner/sonner.stories.tsx | 3 +- .../ui/registry/switch/switch.stories.tsx | 3 +- packages/ui/registry/table/table.stories.tsx | 3 +- packages/ui/registry/tabs/tabs.stories.tsx | 3 +- .../ui/registry/textarea/textarea.stories.tsx | 3 +- packages/ui/registry/toast/toast.stories.tsx | 3 +- .../registry/toggle/toggle-group.stories.tsx | 3 +- .../ui/registry/toggle/toggle.stories.tsx | 3 +- .../ui/registry/tooltip/tooltip.stories.tsx | 3 +- packages/ui/setupTests.ts | 4 + packages/ui/ui.d.ts | 7 + packages/ui/vitest.config.js | 13 +- packages/utils/package.json | 2 +- pnpm-lock.yaml | 671 ++++++++++-------- scripts/package.json | 2 +- 68 files changed, 750 insertions(+), 421 deletions(-) delete mode 100644 packages/ui/.storybook/preview-body.html create mode 100644 packages/ui/registry/accordion/__snapshots__/accordion.test.tsx.snap create mode 100644 packages/ui/registry/accordion/accordion.mdx create mode 100644 packages/ui/registry/accordion/accordion.test.tsx create mode 100644 packages/ui/setupTests.ts diff --git a/apps/desktop/package.json b/apps/desktop/package.json index 6f4b50b8..7d01a8b7 100644 --- a/apps/desktop/package.json +++ b/apps/desktop/package.json @@ -39,7 +39,7 @@ "devDependencies": { "@templ/config": "workspace:*", "@templ/tsconfig": "workspace:*", - "@types/node": "^20.11.20", + "@types/node": "^20.11.21", "esbuild": "^0.20.1", "tsx": "^4.7.1", "typescript": "^5.3.3", diff --git a/apps/docs/package.json b/apps/docs/package.json index a065e7fb..da809752 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -39,7 +39,7 @@ "devDependencies": { "@templ/config": "workspace:*", "@templ/tsconfig": "workspace:*", - "@types/node": "^20.11.20", + "@types/node": "^20.11.21", "esbuild": "^0.20.1", "tsx": "^4.7.1", "typescript": "^5.3.3", diff --git a/apps/web/package.json b/apps/web/package.json index 38ffcb27..3ef2c393 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@templ/tsconfig": "workspace:*", - "@types/node": "^20.11.20", + "@types/node": "^20.11.21", "@types/react": "^18.2.60", "autoprefixer": "^10.4.17", "postcss": "^8.4.35", 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 904f6395..533f6479 100644 --- a/generator/package.json +++ b/generator/package.json @@ -42,7 +42,7 @@ }, "devDependencies": { "@templ/tsconfig": "workspace:*", - "@types/node": "^20.11.20", + "@types/node": "^20.11.21", "tsx": "^4.7.1", "typescript": "^5.3.3" } diff --git a/generator/templates/basic-js/package.json b/generator/templates/basic-js/package.json index c9b62f9b..b2d5b9c9 100644 --- a/generator/templates/basic-js/package.json +++ b/generator/templates/basic-js/package.json @@ -36,7 +36,7 @@ }, "devDependencies": { "@templ/config": "workspace:*", - "@types/node": "^20.11.20", + "@types/node": "^20.11.21", "vitest": "^1.3.1" } } diff --git a/generator/templates/basic-ts/package.json b/generator/templates/basic-ts/package.json index 8c35960c..f8363122 100644 --- a/generator/templates/basic-ts/package.json +++ b/generator/templates/basic-ts/package.json @@ -39,7 +39,7 @@ "devDependencies": { "@templ/config": "workspace:*", "@templ/tsconfig": "workspace:*", - "@types/node": "^20.11.20", + "@types/node": "^20.11.21", "esbuild": "^0.20.1", "tsx": "^4.7.1", "typescript": "^5.3.3", diff --git a/knip.config.ts b/knip.config.ts index ce512367..04a70276 100644 --- a/knip.config.ts +++ b/knip.config.ts @@ -1,6 +1,6 @@ const config = { 'ignoreBinaries': ['templ-cli'], - 'ignoreDependencies': ['typecheck'], + 'ignoreDependencies': ['typecheck', '@storybook/blocks'], 'workspaces': { '.': { entry: ['eslint.config.js'], @@ -8,7 +8,7 @@ const config = { }, 'packages/*': { entry: ['src/**/*.{ts,tsx}', 'test/**/*.test.{ts,tsx}', '**/*.load.ts'], - ignore: ['**/test/**', '**/*.story.{ts,tsx}'], + ignore: ['**/test/**'], }, 'apps/*': { entry: ['src/**/*.{ts,tsx}', 'test/**/*.test.{ts,tsx}', '**/*.config.js'], diff --git a/packages/api/package.json b/packages/api/package.json index 269d0f71..73733a72 100644 --- a/packages/api/package.json +++ b/packages/api/package.json @@ -40,15 +40,15 @@ "dependencies": { "@hono/node-server": "^1.8.2", "@hono/zod-openapi": "^0.9.6", - "@scalar/hono-api-reference": "^0.3.57", + "@scalar/hono-api-reference": "^0.3.61", "consola": "^3.2.3", - "hono": "^4.0.7" + "hono": "^4.0.8" }, "devDependencies": { "@templ/config": "workspace:*", "@templ/tsconfig": "workspace:*", "@types/autocannon": "^7.12.5", - "@types/node": "^20.11.20", + "@types/node": "^20.11.21", "autocannon": "^7.15.0", "esbuild": "^0.20.1", "tsx": "^4.7.1", diff --git a/packages/cli/package.json b/packages/cli/package.json index 708b511c..b8b638be 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -47,7 +47,7 @@ "devDependencies": { "@templ/config": "workspace:*", "@templ/tsconfig": "workspace:*", - "@types/node": "^20.11.20", + "@types/node": "^20.11.21", "esbuild": "^0.20.1", "tsx": "^4.7.1", "typescript": "^5.3.3" diff --git a/packages/config/package.json b/packages/config/package.json index 59c1ab56..a38b1211 100644 --- a/packages/config/package.json +++ b/packages/config/package.json @@ -48,7 +48,7 @@ }, "devDependencies": { "@templ/tsconfig": "workspace:*", - "@types/node": "^20.11.20", + "@types/node": "^20.11.21", "esbuild": "^0.20.1", "tsx": "^4.7.1", "typescript": "^5.3.3", diff --git a/packages/core/package.json b/packages/core/package.json index e316cf68..18a30091 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -38,7 +38,7 @@ "devDependencies": { "@templ/config": "workspace:*", "@templ/tsconfig": "workspace:*", - "@types/node": "^20.11.20", + "@types/node": "^20.11.21", "esbuild": "^0.20.1", "tsx": "^4.7.1", "typescript": "^5.3.3", diff --git a/packages/flags/package.json b/packages/flags/package.json index c28ad142..e2584639 100644 --- a/packages/flags/package.json +++ b/packages/flags/package.json @@ -42,7 +42,7 @@ "devDependencies": { "@templ/config": "workspace:*", "@templ/tsconfig": "workspace:*", - "@types/node": "^20.11.20", + "@types/node": "^20.11.21", "esbuild": "^0.20.1", "tsx": "^4.7.1", "typescript": "^5.3.3", diff --git a/packages/storage/package.json b/packages/storage/package.json index 93efbb58..09240cbd 100644 --- a/packages/storage/package.json +++ b/packages/storage/package.json @@ -44,7 +44,7 @@ "devDependencies": { "@templ/config": "workspace:*", "@templ/tsconfig": "workspace:*", - "@types/node": "^20.11.20", + "@types/node": "^20.11.21", "esbuild": "^0.20.1", "tsx": "^4.7.1", "typescript": "^5.3.3", diff --git a/packages/ui/.storybook/main.ts b/packages/ui/.storybook/main.ts index 5baf6890..21f8b980 100644 --- a/packages/ui/.storybook/main.ts +++ b/packages/ui/.storybook/main.ts @@ -1,20 +1,28 @@ +import { resolve } from 'node:path' import type { StorybookConfig } from '@storybook/react-vite' +import { mergeConfig } from 'vitest/config' const config: StorybookConfig = { - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + stories: ['../registry/**/*.mdx', '../registry/**/*.stories.@(js|jsx|mjs|ts|tsx)'], addons: [ - '@storybook/addon-onboarding', - '@storybook/addon-links', + '@storybook/addon-a11y', + '@storybook/addon-docs', '@storybook/addon-essentials', - '@chromatic-com/storybook', '@storybook/addon-interactions', + 'storybook-addon-rtl', ], framework: { name: '@storybook/react-vite', options: {}, }, - docs: { - autodocs: true, + async viteFinal(config) { + return mergeConfig(config, { + resolve: { + alias: { + '@': resolve('./'), + }, + }, + }) }, } export default config diff --git a/packages/ui/.storybook/preview-body.html b/packages/ui/.storybook/preview-body.html deleted file mode 100644 index 1d400e65..00000000 --- a/packages/ui/.storybook/preview-body.html +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts index 84df2bc9..cda685c8 100644 --- a/packages/ui/.storybook/preview.ts +++ b/packages/ui/.storybook/preview.ts @@ -17,6 +17,28 @@ export const decorators = [ 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 3193a9cf..9c3dfdd3 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -106,28 +106,33 @@ "tailwindcss-animate": "^1.0.7" }, "devDependencies": { - "@chromatic-com/storybook": "^1.1.12", "@hookform/resolvers": "^3.3.4", + "@storybook/addon-a11y": "^7.6.17", "@storybook/addon-actions": "^7.6.17", + "@storybook/addon-docs": "^7.6.17", "@storybook/addon-essentials": "^7.6.17", "@storybook/addon-interactions": "^7.6.17", - "@storybook/addon-links": "^7.6.17", - "@storybook/addon-onboarding": "^1.0.11", "@storybook/addon-themes": "^7.6.17", + "@storybook/blocks": "^7.6.17", "@storybook/react": "^7.6.17", "@storybook/react-vite": "^7.6.17", + "@storybook/testing-library": "^0.2.2", "@templ/config": "workspace:*", "@templ/tsconfig": "workspace:*", - "@types/node": "^20.11.20", + "@testing-library/react": "^14.2.1", + "@types/node": "^20.11.21", "@types/react": "^18.2.60", "date-fns": "^3.3.1", "esbuild": "^0.20.1", "globby": "^14.0.1", - "lucide-react": "0.340.0", + "happy-dom": "^13.6.2", + "lucide-react": "^0.340.0", "storybook": "^7.6.17", + "storybook-addon-rtl": "^1.0.0", "tsx": "^4.7.1", "typescript": "^5.3.3", "vitest": "^1.3.1", + "vitest-axe": "^0.1.0", "zod": "^3.22.4" }, "size-limit": "60 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.mdx b/packages/ui/registry/accordion/accordion.mdx new file mode 100644 index 00000000..1114aaf4 --- /dev/null +++ b/packages/ui/registry/accordion/accordion.mdx @@ -0,0 +1,20 @@ +import { Controls, Meta, Canvas } from '@storybook/blocks' +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from './accordion' + +import * as AccordionStories from './accordion.stories' + + + +# Accordion + +An `Accordion` is a vertically stacked set of interactive item, which contain a title or content snippet representing a section of content. It hides a lot of content and rolls it up. +It consists of two children components: `AccordionItem`, `AccordionTrigger` and `AccordionContent`, which are just wrapper components. You can pass any component as children to `AccordionItem` and `Accordion.Content`. + + + + diff --git a/packages/ui/registry/accordion/accordion.stories.tsx b/packages/ui/registry/accordion/accordion.stories.tsx index fc1671ea..a0fa311c 100644 --- a/packages/ui/registry/accordion/accordion.stories.tsx +++ b/packages/ui/registry/accordion/accordion.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react' - import type { Meta, StoryObj } from '@storybook/react' +import { within } from '@storybook/testing-library' import { Accordion, AccordionContent, @@ -15,7 +15,6 @@ import { const meta = { title: 'ui/Accordion', component: Accordion, - tags: ['autodocs'], argTypes: { type: { options: ['single', 'multiple'], @@ -26,6 +25,9 @@ const meta = { type: 'single', collapsible: true, }, + parameters: { + direction: 'ltr', + }, render: args => ( @@ -51,11 +53,16 @@ const meta = { ), } satisfies Meta -export default meta - type Story = StoryObj /** * The default behavior of the accordion allows only one item to be open. */ -export const Default: Story = {} +export const Base: Story = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement) + await canvas.getByText('Is it accessible?') + }, +} + +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/alert-dialog.stories.tsx b/packages/ui/registry/alert/alert-dialog.stories.tsx index e775dd90..c6004797 100644 --- a/packages/ui/registry/alert/alert-dialog.stories.tsx +++ b/packages/ui/registry/alert/alert-dialog.stories.tsx @@ -20,7 +20,6 @@ import { const meta = { title: 'ui/AlertDialog', component: AlertDialog, - tags: ['autodocs'], argTypes: {}, render: args => ( @@ -52,4 +51,4 @@ type Story = StoryObj /** * The default form of the alert dialog. */ -export const Default: Story = {} +export const Base: Story = {} diff --git a/packages/ui/registry/alert/alert.stories.tsx b/packages/ui/registry/alert/alert.stories.tsx index 2be733e3..f30e235e 100644 --- a/packages/ui/registry/alert/alert.stories.tsx +++ b/packages/ui/registry/alert/alert.stories.tsx @@ -15,7 +15,6 @@ import { const meta = { title: 'ui/Alert', component: Alert, - tags: ['autodocs'], argTypes: { variant: { options: ['default', 'destructive'], @@ -41,7 +40,7 @@ type Story = StoryObj /** * The default form of the alert. */ -export const Default: Story = {} +export const Base: Story = {} /** * Use the `destructive` alert to indicate a destructive action. diff --git a/packages/ui/registry/aspect/aspect-ratio.stories.tsx b/packages/ui/registry/aspect/aspect-ratio.stories.tsx index e6cf8299..20b85ba8 100644 --- a/packages/ui/registry/aspect/aspect-ratio.stories.tsx +++ b/packages/ui/registry/aspect/aspect-ratio.stories.tsx @@ -10,7 +10,6 @@ import { AspectRatio } from './aspect-ratio' const meta: Meta = { title: 'ui/AspectRatio', component: AspectRatio, - tags: ['autodocs'], argTypes: {}, render: args => ( @@ -37,7 +36,7 @@ type Story = StoryObj /** * The default form of the aspect ratio. */ -export const Default: Story = { +export const Base: Story = { args: { ratio: 16 / 9, }, diff --git a/packages/ui/registry/avatar/avatar.stories.tsx b/packages/ui/registry/avatar/avatar.stories.tsx index b1e55334..68cd5ebe 100644 --- a/packages/ui/registry/avatar/avatar.stories.tsx +++ b/packages/ui/registry/avatar/avatar.stories.tsx @@ -13,7 +13,6 @@ import { const meta = { title: 'ui/Avatar', component: Avatar, - tags: ['autodocs'], argTypes: {}, render: args => ( @@ -33,4 +32,4 @@ type Story = StoryObj /** * The default form of the avatar. */ -export const Default: Story = {} +export const Base: Story = {} diff --git a/packages/ui/registry/badge/badge.stories.tsx b/packages/ui/registry/badge/badge.stories.tsx index 06d5ed7e..7c20408c 100644 --- a/packages/ui/registry/badge/badge.stories.tsx +++ b/packages/ui/registry/badge/badge.stories.tsx @@ -8,7 +8,6 @@ import { Badge } from './badge' const meta = { title: 'ui/Badge', component: Badge, - tags: ['autodocs'], argTypes: { children: { control: 'text', @@ -29,7 +28,7 @@ type Story = StoryObj /** * The default form of the badge. */ -export const Default: Story = {} +export const Base: Story = {} /** * Use the `secondary` badge to call for less urgent information, blending diff --git a/packages/ui/registry/button/button.stories.tsx b/packages/ui/registry/button/button.stories.tsx index ecea5c9f..0fd49208 100644 --- a/packages/ui/registry/button/button.stories.tsx +++ b/packages/ui/registry/button/button.stories.tsx @@ -7,7 +7,6 @@ import { Button } from './button' const meta: Meta = { title: 'ui/Button', component: Button, - tags: ['autodocs'], argTypes: {}, } export default meta diff --git a/packages/ui/registry/calendar/calendar.stories.tsx b/packages/ui/registry/calendar/calendar.stories.tsx index a6651736..7a932388 100644 --- a/packages/ui/registry/calendar/calendar.stories.tsx +++ b/packages/ui/registry/calendar/calendar.stories.tsx @@ -10,7 +10,6 @@ import { Calendar } from './calendar' const meta = { title: 'ui/Calendar', component: Calendar, - tags: ['autodocs'], argTypes: {}, args: { mode: 'single', @@ -30,7 +29,7 @@ type Story = StoryObj /** * The default form of the calendar. */ -export const Default: Story = {} +export const Base: Story = {} /** * Use the `multiple` mode to select multiple dates. diff --git a/packages/ui/registry/card/card.stories.tsx b/packages/ui/registry/card/card.stories.tsx index d96a8be2..aa5c5c50 100644 --- a/packages/ui/registry/card/card.stories.tsx +++ b/packages/ui/registry/card/card.stories.tsx @@ -32,7 +32,6 @@ const notifications = [ const meta = { title: 'ui/Card', component: Card, - tags: ['autodocs'], argTypes: {}, args: { className: 'w-96', @@ -71,4 +70,4 @@ type Story = StoryObj /** * The default form of the card. */ -export const Default: Story = {} +export const Base: Story = {} diff --git a/packages/ui/registry/carousel/carousel.stories.tsx b/packages/ui/registry/carousel/carousel.stories.tsx index 7e04a949..a74629f3 100644 --- a/packages/ui/registry/carousel/carousel.stories.tsx +++ b/packages/ui/registry/carousel/carousel.stories.tsx @@ -15,7 +15,6 @@ import { const meta: Meta = { title: 'ui/Carousel', component: Carousel, - tags: ['autodocs'], argTypes: {}, args: { className: 'w-full max-w-xs', @@ -47,7 +46,7 @@ type Story = StoryObj /** * The default form of the carousel. */ -export const Default: Story = {} +export const Base: Story = {} /** * Use the `basis` utility class to change the size of the carousel. diff --git a/packages/ui/registry/checkbox/checkbox.stories.tsx b/packages/ui/registry/checkbox/checkbox.stories.tsx index 0a0f5722..9dc8f727 100644 --- a/packages/ui/registry/checkbox/checkbox.stories.tsx +++ b/packages/ui/registry/checkbox/checkbox.stories.tsx @@ -9,7 +9,6 @@ import { Checkbox } from './checkbox' const meta: Meta = { title: 'ui/Checkbox', component: Checkbox, - tags: ['autodocs'], argTypes: {}, args: { id: 'terms', @@ -38,7 +37,7 @@ type Story = StoryObj /** * The default form of the checkbox. */ -export const Default: Story = {} +export const Base: Story = {} /** * Use the `disabled` prop to disable the checkbox. diff --git a/packages/ui/registry/collapsible/collapsible.stories.tsx b/packages/ui/registry/collapsible/collapsible.stories.tsx index 783d6b9e..63f07fbb 100644 --- a/packages/ui/registry/collapsible/collapsible.stories.tsx +++ b/packages/ui/registry/collapsible/collapsible.stories.tsx @@ -14,7 +14,6 @@ import { const meta = { title: 'ui/Collapsible', component: Collapsible, - tags: ['autodocs'], argTypes: {}, args: { className: 'w-96', @@ -44,7 +43,7 @@ type Story = StoryObj /** * The default form of the collapsible. */ -export const Default: Story = {} +export const Base: Story = {} /** * Use the `disabled` prop to disable the interaction. diff --git a/packages/ui/registry/command/command.stories.tsx b/packages/ui/registry/command/command.stories.tsx index a15b7c8f..6d1b833b 100644 --- a/packages/ui/registry/command/command.stories.tsx +++ b/packages/ui/registry/command/command.stories.tsx @@ -17,7 +17,6 @@ import { const meta = { title: 'ui/Command', component: Command, - tags: ['autodocs'], argTypes: {}, args: { className: 'rounded-lg w-96 border shadow-md', @@ -53,4 +52,4 @@ type Story = StoryObj /** * The default form of the command. */ -export const Default: Story = {} +export const Base: Story = {} diff --git a/packages/ui/registry/context/context-menu.stories.tsx b/packages/ui/registry/context/context-menu.stories.tsx index 8f34ceef..48e87d43 100644 --- a/packages/ui/registry/context/context-menu.stories.tsx +++ b/packages/ui/registry/context/context-menu.stories.tsx @@ -24,7 +24,6 @@ import { const meta = { title: 'ui/ContextMenu', component: ContextMenu, - tags: ['autodocs'], argTypes: {}, args: {}, render: args => ( @@ -52,7 +51,7 @@ type Story = StoryObj /** * The default form of the context menu. */ -export const Default: Story = {} +export const Base: Story = {} /** * A context menu with shortcuts. diff --git a/packages/ui/registry/dialog/dialog.stories.tsx b/packages/ui/registry/dialog/dialog.stories.tsx index b7508064..f945f9b8 100644 --- a/packages/ui/registry/dialog/dialog.stories.tsx +++ b/packages/ui/registry/dialog/dialog.stories.tsx @@ -19,7 +19,6 @@ import { const meta = { title: 'ui/Dialog', component: Dialog, - tags: ['autodocs'], argTypes: {}, render: args => ( @@ -55,4 +54,4 @@ type Story = StoryObj /** * The default form of the dialog. */ -export const Default: Story = {} +export const Base: Story = {} diff --git a/packages/ui/registry/dropdown/dropdown-menu.stories.tsx b/packages/ui/registry/dropdown/dropdown-menu.stories.tsx index f90cfe31..e8340fd9 100644 --- a/packages/ui/registry/dropdown/dropdown-menu.stories.tsx +++ b/packages/ui/registry/dropdown/dropdown-menu.stories.tsx @@ -33,7 +33,6 @@ import { const meta = { title: 'ui/DropdownMenu', component: DropdownMenu, - tags: ['autodocs'], argTypes: {}, render: args => ( @@ -60,7 +59,7 @@ type Story = StoryObj /** * The default form of the dropdown menu. */ -export const Default: Story = {} +export const Base: Story = {} /** * A dropdown menu with shortcuts. diff --git a/packages/ui/registry/form/form.stories.tsx b/packages/ui/registry/form/form.stories.tsx index 7d5a5c6f..4915ebf9 100644 --- a/packages/ui/registry/form/form.stories.tsx +++ b/packages/ui/registry/form/form.stories.tsx @@ -21,7 +21,6 @@ import { const meta: Meta = { title: 'ui/Form', component: Form, - tags: ['autodocs'], argTypes: {}, render: args => , } satisfies Meta @@ -83,4 +82,4 @@ function ProfileForm(args: Story['args']) { /** * The default form of the form. */ -export const Default: Story = {} +export const Base: Story = {} diff --git a/packages/ui/registry/hover-card/hover-card.stories.tsx b/packages/ui/registry/hover-card/hover-card.stories.tsx index da4afb73..7145200c 100644 --- a/packages/ui/registry/hover-card/hover-card.stories.tsx +++ b/packages/ui/registry/hover-card/hover-card.stories.tsx @@ -13,7 +13,6 @@ import { const meta = { title: 'ui/HoverCard', component: HoverCard, - tags: ['autodocs'], argTypes: {}, args: {}, render: args => ( @@ -36,7 +35,7 @@ type Story = StoryObj /** * The default form of the hover card. */ -export const Default: Story = {} +export const Base: Story = {} /** * Use the `openDelay` and `closeDelay` props to control the delay before the diff --git a/packages/ui/registry/input/input.stories.tsx b/packages/ui/registry/input/input.stories.tsx index 61a41080..cc20ef10 100644 --- a/packages/ui/registry/input/input.stories.tsx +++ b/packages/ui/registry/input/input.stories.tsx @@ -9,7 +9,6 @@ import { Input } from './input' const meta = { title: 'ui/Input', component: Input, - tags: ['autodocs'], argTypes: {}, args: { className: 'w-96', @@ -29,7 +28,7 @@ type Story = StoryObj /** * The default form of the input field. */ -export const Default: Story = {} +export const Base: Story = {} /** * Use the `disabled` prop to make the input non-interactive and appears faded, diff --git a/packages/ui/registry/label/label.stories.tsx b/packages/ui/registry/label/label.stories.tsx index 95f01945..fb60fd30 100644 --- a/packages/ui/registry/label/label.stories.tsx +++ b/packages/ui/registry/label/label.stories.tsx @@ -8,7 +8,6 @@ import { Label } from './label' const meta = { title: 'ui/Label', component: Label, - tags: ['autodocs'], argTypes: { children: { control: { type: 'text' }, @@ -27,4 +26,4 @@ type Story = StoryObj /** * The default form of the label. */ -export const Default: Story = {} +export const Base: Story = {} diff --git a/packages/ui/registry/menu/menubar.stories.tsx b/packages/ui/registry/menu/menubar.stories.tsx index 931b5f17..ee078fe4 100644 --- a/packages/ui/registry/menu/menubar.stories.tsx +++ b/packages/ui/registry/menu/menubar.stories.tsx @@ -26,7 +26,6 @@ import { const meta = { title: 'ui/Menubar', component: Menubar, - tags: ['autodocs'], argTypes: {}, render: args => ( @@ -60,7 +59,7 @@ type Story = StoryObj /** * The default form of the menubar. */ -export const Default: Story = {} +export const Base: Story = {} /** * A menubar with a submenu. diff --git a/packages/ui/registry/menu/navigation.stories.tsx b/packages/ui/registry/menu/navigation.stories.tsx index 09c15ce0..99006a3d 100644 --- a/packages/ui/registry/menu/navigation.stories.tsx +++ b/packages/ui/registry/menu/navigation.stories.tsx @@ -17,7 +17,6 @@ import { const meta = { title: 'ui/NavigationMenu', component: NavigationMenu, - tags: ['autodocs'], argTypes: {}, render: args => ( @@ -77,4 +76,4 @@ type Story = StoryObj /** * The default form of the navigation menu. */ -export const Default: Story = {} +export const Base: Story = {} diff --git a/packages/ui/registry/popover/popover.stories.tsx b/packages/ui/registry/popover/popover.stories.tsx index 39ce22af..ff0184dd 100644 --- a/packages/ui/registry/popover/popover.stories.tsx +++ b/packages/ui/registry/popover/popover.stories.tsx @@ -13,7 +13,6 @@ import { const meta = { title: 'ui/Popover', component: Popover, - tags: ['autodocs'], argTypes: {}, render: args => ( @@ -34,4 +33,4 @@ type Story = StoryObj /** * The default form of the popover. */ -export const Default: Story = {} +export const Base: Story = {} diff --git a/packages/ui/registry/progress/progress.stories.tsx b/packages/ui/registry/progress/progress.stories.tsx index eb95ffd3..e347615e 100644 --- a/packages/ui/registry/progress/progress.stories.tsx +++ b/packages/ui/registry/progress/progress.stories.tsx @@ -9,7 +9,6 @@ import { Progress } from './progress' const meta = { title: 'ui/Progress', component: Progress, - tags: ['autodocs'], argTypes: {}, args: { value: 30, @@ -24,7 +23,7 @@ type Story = StoryObj /** * The default form of the progress. */ -export const Default: Story = {} +export const Base: Story = {} /** * When the progress is indeterminate. diff --git a/packages/ui/registry/radio-group/radio-group.stories.tsx b/packages/ui/registry/radio-group/radio-group.stories.tsx index 630736fa..9aa3c89d 100644 --- a/packages/ui/registry/radio-group/radio-group.stories.tsx +++ b/packages/ui/registry/radio-group/radio-group.stories.tsx @@ -10,7 +10,6 @@ import { RadioGroup, RadioGroupItem } from './radio-group' const meta = { title: 'ui/RadioGroup', component: RadioGroup, - tags: ['autodocs'], argTypes: {}, args: { defaultValue: 'comfortable', @@ -35,4 +34,4 @@ type Story = StoryObj /** * The default form of the radio group. */ -export const Default: Story = {} +export const Base: Story = {} diff --git a/packages/ui/registry/scroll-area/scroll-area.stories.tsx b/packages/ui/registry/scroll-area/scroll-area.stories.tsx index 4f377289..0a0f38be 100644 --- a/packages/ui/registry/scroll-area/scroll-area.stories.tsx +++ b/packages/ui/registry/scroll-area/scroll-area.stories.tsx @@ -8,7 +8,6 @@ import { ScrollArea } from './scroll-area' const meta = { title: 'ui/ScrollArea', component: ScrollArea, - tags: ['autodocs'], argTypes: { children: { control: 'text', @@ -32,7 +31,7 @@ type Story = StoryObj /** * The default form of the scroll area. */ -export const Default: Story = {} +export const Base: Story = {} /** * Use the `type` prop with `always` to always show the scroll area. diff --git a/packages/ui/registry/select/select.stories.tsx b/packages/ui/registry/select/select.stories.tsx index 913ffa5a..f7452b97 100644 --- a/packages/ui/registry/select/select.stories.tsx +++ b/packages/ui/registry/select/select.stories.tsx @@ -18,7 +18,6 @@ import { const meta: Meta = { title: 'ui/Select', component: Select, - tags: ['autodocs'], argTypes: {}, render: args => (