diff --git a/.gitignore b/.gitignore index 8fd10627c9..21fec1251a 100644 --- a/.gitignore +++ b/.gitignore @@ -56,3 +56,6 @@ packages/devtools/README.md clones packages/devtools/client/public/discovery/index.html + +*storybook.log +storybook-static diff --git a/package.json b/package.json index bb6ec7e3c3..ab3ee81927 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,8 @@ "docs:build": "CI=true nuxi generate docs", "typecheck": "vue-tsc --noEmit", "postinstall": "npx simple-git-hooks && pnpm -C docs install", - "prepare": "pnpm -r --filter=\"./packages/*\" run dev:prepare" + "prepare": "pnpm -r --filter=\"./packages/*\" run dev:prepare", + "ui-kit:storybook": "pnpm --filter=@nuxt/devtools-ui-kit storybook" }, "devDependencies": { "@antfu/eslint-config": "catalog:cli", diff --git a/packages/devtools-ui-kit/.storybook/main.ts b/packages/devtools-ui-kit/.storybook/main.ts new file mode 100644 index 0000000000..e419477808 --- /dev/null +++ b/packages/devtools-ui-kit/.storybook/main.ts @@ -0,0 +1,22 @@ +import type { StorybookConfig } from '@storybook-vue/nuxt' +import { dirname } from 'node:path' +import { fileURLToPath } from 'node:url' + +const currentDir = dirname(fileURLToPath(import.meta.url)) + +const config = { + stories: [ + '../src/components/**/*.mdx', + '../src/components/**/*.stories.@(js|jsx|ts|tsx|mdx)', + ], + + addons: [ + ('@chromatic-com/storybook'), + ('@storybook/addon-docs'), + ('@storybook/addon-a11y'), + ('@storybook/addon-vitest'), + ], + framework: '@storybook-vue/nuxt', +} satisfies StorybookConfig + +export default config diff --git a/packages/devtools-ui-kit/.storybook/preview.ts b/packages/devtools-ui-kit/.storybook/preview.ts new file mode 100644 index 0000000000..a73f1503dc --- /dev/null +++ b/packages/devtools-ui-kit/.storybook/preview.ts @@ -0,0 +1,14 @@ +import type { Preview } from '@storybook-vue/nuxt' + +const preview: Preview = { + parameters: { + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i, + }, + }, + }, +} + +export default preview diff --git a/packages/devtools-ui-kit/nuxt.config.ts b/packages/devtools-ui-kit/nuxt.config.ts new file mode 100644 index 0000000000..7620831ff5 --- /dev/null +++ b/packages/devtools-ui-kit/nuxt.config.ts @@ -0,0 +1,23 @@ +import { defineNuxtConfig } from 'nuxt/config' +import { createResolver } from 'nuxt/kit' +import DevtoolsUIKit from './src/module' +import '@unocss/nuxt' + +const resolver = createResolver(import.meta.url) + +export default defineNuxtConfig({ + modules: [ + DevtoolsUIKit, + '@nuxtjs/storybook', + ], + devtoolsUIKit: { + dev: true, + }, + unocss: { + preflight: true, + configFile: resolver.resolve('./unocss.config.ts'), + }, + alias: { + '@nuxt/devtools-kit/iframe-client': resolver.resolve('./playground/stub/iframe-client.ts'), + }, +}) diff --git a/packages/devtools-ui-kit/package.json b/packages/devtools-ui-kit/package.json index 3a62cff1c2..89cf934942 100644 --- a/packages/devtools-ui-kit/package.json +++ b/packages/devtools-ui-kit/package.json @@ -32,7 +32,9 @@ "stub": "nuxt-build-module build --stub", "dev": "nuxi dev playground", "prepack": "pnpm build", - "playground:build": "nuxi generate playground" + "playground:build": "nuxi generate playground", + "storybook": "storybook dev -p 6006", + "build-storybook": "storybook build" }, "peerDependencies": { "@nuxt/devtools": "workspace:*" @@ -61,7 +63,13 @@ }, "devDependencies": { "@nuxt/devtools": "workspace:*", - "nuxt": "catalog:buildtools" + "@nuxtjs/storybook": "catalog:", + "@storybook-vue/nuxt": "catalog:", + "@storybook/addon-a11y": "catalog:", + "@storybook/addon-docs": "catalog:", + "eslint-plugin-storybook": "catalog:", + "nuxt": "catalog:buildtools", + "storybook": "catalog:" }, "publishConfig": { "access": "public" diff --git a/packages/devtools-ui-kit/src/components/NBadge.stories.ts b/packages/devtools-ui-kit/src/components/NBadge.stories.ts new file mode 100644 index 0000000000..81f3f49df4 --- /dev/null +++ b/packages/devtools-ui-kit/src/components/NBadge.stories.ts @@ -0,0 +1,48 @@ +import type { Meta, StoryObj } from '@storybook-vue/nuxt' +import NBadge from './NBadge.vue' + +const meta = { + title: 'UI Kit/Data Display/NBadge', + component: NBadge, + tags: ['autodocs'], + parameters: { + docs: { + description: { + component: 'A simple badge component for displaying short labels or status indicators.', + }, + }, + }, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + render: args => ({ + components: { NBadge }, + setup() { + return { args } + }, + template: 'Badge', + }), +} + +export const WithText: Story = { + render: () => ({ + components: { NBadge }, + template: 'New', + }), +} + +export const MultipleBadges: Story = { + render: () => ({ + components: { NBadge }, + template: ` +
+ Info + Warning + Success +
+ `, + }), +} diff --git a/packages/devtools-ui-kit/src/components/NBadgeHashed.stories.ts b/packages/devtools-ui-kit/src/components/NBadgeHashed.stories.ts new file mode 100644 index 0000000000..3870f22325 --- /dev/null +++ b/packages/devtools-ui-kit/src/components/NBadgeHashed.stories.ts @@ -0,0 +1,50 @@ +import type { Meta, StoryObj } from '@storybook-vue/nuxt' +import NBadgeHashed from './NBadgeHashed.vue' + +const meta = { + title: 'UI Kit/Data Display/NBadgeHashed', + component: NBadgeHashed, + tags: ['autodocs'], + parameters: { + docs: { + description: { + component: 'A badge that automatically generates a unique color based on string hash. Useful for distinguishing items visually.', + }, + }, + }, + argTypes: { + text: { control: 'text', description: 'Text to display and hash for color generation' }, + }, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: { + text: 'nuxt', + }, +} + +export const DifferentTexts: Story = { + render: () => ({ + components: { NBadgeHashed }, + template: ` +
+ + + + + + +
+ `, + }), +} + +export const WithSlotContent: Story = { + render: () => ({ + components: { NBadgeHashed }, + template: ' v1.2.3', + }), +} diff --git a/packages/devtools-ui-kit/src/components/NButton.stories.ts b/packages/devtools-ui-kit/src/components/NButton.stories.ts new file mode 100644 index 0000000000..0689bb439d --- /dev/null +++ b/packages/devtools-ui-kit/src/components/NButton.stories.ts @@ -0,0 +1,80 @@ +import type { Meta, StoryObj } from '@storybook-vue/nuxt' +import NButton from './NButton' + +const meta = { + title: 'UI Kit/Forms/NButton', + component: NButton, + tags: ['autodocs'], + parameters: { + docs: { + description: { + component: 'A versatile button component supporting icons, links, and disabled state. Renders as `