diff --git a/.storybook/main.js b/.storybook/main.js index 8611421..7fbd93d 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,5 +1,11 @@ export default { - stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx|mdx)'], - addons: [], - framework: '@storybook/web-components-vite', + stories: ['../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + addons: ['@storybook/addon-docs'], + framework: { + name: '@storybook/web-components-vite', + options: {}, + }, + docs: { + autodocs: 'tag', + }, }; diff --git a/package-lock.json b/package-lock.json index 348fbcf..4fe938e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "@open-wc/testing": "^4.0.0", "@semantic-release/changelog": "^6.0.0", "@semantic-release/git": "^10.0.0", + "@storybook/addon-docs": "^10.0.0", "@storybook/web-components-vite": "^10.0.0", "@types/mocha": "^10.0.6", "@types/node": "^24.0.0", @@ -1206,6 +1207,24 @@ "dev": true, "license": "CC0-1.0" }, + "node_modules/@mdx-js/react": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.1.tgz", + "integrity": "sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/mdx": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + }, + "peerDependencies": { + "@types/react": ">=16", + "react": ">=16" + } + }, "node_modules/@napi-rs/wasm-runtime": { "version": "0.2.12", "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz", @@ -2774,6 +2793,64 @@ "dev": true, "license": "(Unlicense OR Apache-2.0)" }, + "node_modules/@storybook/addon-docs": { + "version": "10.2.4", + "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-10.2.4.tgz", + "integrity": "sha512-FzscAmdBiOGnGrxiEM+8eTg43kjqgjLfObg+lbJVRR/a0DmZ3xfAPNB0+VKYQbN0FacNcWLM9LZ/7U0hRBPBnQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@mdx-js/react": "^3.0.0", + "@storybook/csf-plugin": "10.2.4", + "@storybook/icons": "^2.0.1", + "@storybook/react-dom-shim": "10.2.4", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "ts-dedent": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^10.2.4" + } + }, + "node_modules/@storybook/addon-docs/node_modules/@storybook/csf-plugin": { + "version": "10.2.4", + "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-10.2.4.tgz", + "integrity": "sha512-kupPQEV+4N9mzsZHYaokvhO/KHBjYdWda9PNmPQwy0TR7r2mzthgaNH72TjmgN1L6DIbsuyOG1wtczcPJn4+Jg==", + "dev": true, + "license": "MIT", + "dependencies": { + "unplugin": "^2.3.5" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "esbuild": "*", + "rollup": "*", + "storybook": "^10.2.4", + "vite": "*", + "webpack": "*" + }, + "peerDependenciesMeta": { + "esbuild": { + "optional": true + }, + "rollup": { + "optional": true + }, + "vite": { + "optional": true + }, + "webpack": { + "optional": true + } + } + }, "node_modules/@storybook/builder-vite": { "version": "10.2.0", "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-10.2.0.tgz", @@ -2847,6 +2924,22 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, + "node_modules/@storybook/react-dom-shim": { + "version": "10.2.4", + "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-10.2.4.tgz", + "integrity": "sha512-i22OtrZ7GeZPt/odLf0vqyDhRSKyaLsHkkKSBcANQfzRRnBZmiz2FchOtWm9uvoDWybQsTruZq7kTdtpEhwyGw==", + "dev": true, + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "storybook": "^10.2.4" + } + }, "node_modules/@storybook/web-components": { "version": "10.2.0", "resolved": "https://registry.npmjs.org/@storybook/web-components/-/web-components-10.2.0.tgz", @@ -3217,6 +3310,13 @@ "@types/koa": "*" } }, + "node_modules/@types/mdx": { + "version": "2.0.13", + "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.13.tgz", + "integrity": "sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/mocha": { "version": "10.0.10", "resolved": "https://registry.npmjs.org/@types/mocha/-/mocha-10.0.10.tgz", @@ -3263,6 +3363,17 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/react": { + "version": "19.2.10", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.10.tgz", + "integrity": "sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "csstype": "^3.2.2" + } + }, "node_modules/@types/resolve": { "version": "1.20.2", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz", @@ -5785,6 +5896,13 @@ "dev": true, "license": "MIT" }, + "node_modules/csstype": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", + "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==", + "dev": true, + "license": "MIT" + }, "node_modules/dargs": { "version": "8.1.0", "resolved": "https://registry.npmjs.org/dargs/-/dargs-8.1.0.tgz", @@ -15292,9 +15410,9 @@ } }, "node_modules/storybook": { - "version": "10.2.0", - "resolved": "https://registry.npmjs.org/storybook/-/storybook-10.2.0.tgz", - "integrity": "sha512-fIQnFtpksRRgHR1CO1onGX3djaog4qsW/c5U8arqYTkUEr2TaWpn05mIJDOBoPJFlOdqFrB4Ttv0PZJxV7avhw==", + "version": "10.2.4", + "resolved": "https://registry.npmjs.org/storybook/-/storybook-10.2.4.tgz", + "integrity": "sha512-LwF0VZsT4qkgx66Ad/q0QgZZrU2a5WftaADDEcJ3bGq3O2fHvwWPlSZjM1HiXD4vqP9U5JiMqQkV1gkyH0XJkw==", "dev": true, "license": "MIT", "peer": true, diff --git a/package.json b/package.json index 235f96c..caf4950 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,7 @@ "@open-wc/testing": "^4.0.0", "@semantic-release/changelog": "^6.0.0", "@semantic-release/git": "^10.0.0", + "@storybook/addon-docs": "^10.0.0", "@storybook/web-components-vite": "^10.0.0", "@types/mocha": "^10.0.6", "@types/node": "^24.0.0", diff --git a/stories/component.stories.js b/stories/component.stories.js deleted file mode 100644 index 6f5acb3..0000000 --- a/stories/component.stories.js +++ /dev/null @@ -1,25 +0,0 @@ -import { html } from 'lit-html'; -import '../src/component'; - -export default { - title: 'CosmozComponent', - component: 'cosmoz-component', - argTypes: { - greeting: { control: 'text' }, - }, -}; - -export const Default = { - args: { - greeting: 'Hello', - }, - render: (args) => html``, -}; - -export const CustomGreeting = { - render: () => html``, -}; - -export const NoGreeting = { - render: () => html``, -}; diff --git a/stories/component.stories.ts b/stories/component.stories.ts new file mode 100644 index 0000000..7e2ea5f --- /dev/null +++ b/stories/component.stories.ts @@ -0,0 +1,38 @@ +import { html } from '@pionjs/pion'; +import type { Meta, StoryObj } from '@storybook/web-components'; +import '../src/component'; + +interface StoryArgs { + greeting: string; +} + +const meta: Meta = { + title: 'CosmozComponent', + component: 'cosmoz-component', + tags: ['autodocs'], + argTypes: { + greeting: { control: 'text', description: 'Greeting text' }, + }, + args: { + greeting: 'Hello', + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: (args) => + html``, +}; + +export const CustomGreeting: Story = { + args: { greeting: 'Hi there' }, +}; + +export const NoGreeting: Story = { + args: { greeting: '' }, +}; diff --git a/tsconfig.json b/tsconfig.json index 0cbdd8e..b481148 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -7,7 +7,8 @@ "strict": true, "target": "esnext", "allowJs": true, - "baseUrl": "." + "baseUrl": ".", + "skipLibCheck": true }, "exclude": ["node_modules", "dist", "coverage", "storybook-static", "stories"] }