Added storybook with example in thw preview.tsx

This commit is contained in:
2026-07-12 15:44:12 +02:00
parent 54255b453a
commit 15b92fa27e
10 changed files with 2261 additions and 15 deletions
+5 -5
View File
@@ -1,8 +1,8 @@
// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
import storybook from "eslint-plugin-storybook";
import js from '@eslint/js';
export default [
js.configs.recommended,
{
export default [js.configs.recommended, {
ignores: ['**/dist/**', '**/www/**', '**/node_modules/**', '**/.stencil/**'],
},
];
}, ...storybook.configs["flat/recommended"]];
+9
View File
@@ -0,0 +1,9 @@
const config = {
stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: ['@storybook/addon-links', '@storybook/addon-docs'],
framework: {
name: '@stencil/storybook-plugin',
},
};
export default config;
@@ -0,0 +1,15 @@
// .storybook/preview.tsx
import { defineCustomElements } from '../loader/index.js';
import { setCustomElementsManifest } from '@stencil/storybook-plugin';
import customElements from '../custom-elements.json';
/**
* Registers all custom elements in the Storybook preview.
*/
defineCustomElements();
/**
* Loads and registers component metadata for Storybook.
* This enables automatic generation of props, methods, events, slots, shadow parts, and CSS variables tables.
*/
setCustomElementsManifest(customElements);
+480
View File
@@ -0,0 +1,480 @@
/**
* This is an autogenerated file created by the Stencil compiler.
* DO NOT MODIFY IT MANUALLY
*/
interface ComponentCompilerPropertyComplexType {
/**
* The string of the original type annotation in the Stencil source code
*/
original: string;
/**
* A 'resolved' type, where e.g. imported types have been resolved and inlined
*
* For instance, an annotation like `(foo: Foo) => string;` will be
* converted to `(foo: { foo: string }) => string;`.
*/
resolved: string;
/**
* A record of the types which were referenced in the assorted type
* annotation in the original source file.
*/
references: ComponentCompilerTypeReferences;
}
type ComponentCompilerTypeReferences = Record<string, ComponentCompilerTypeReference>;
interface ComponentCompilerTypeReference {
/**
* A type may be defined:
* - locally (in the same file as the component that uses it)
* - globally
* - by importing it into a file (and is defined elsewhere)
*/
location: "local" | "global" | "import";
/**
* The path to the type reference, if applicable (global types should not need a path associated with them)
*/
path?: string;
/**
* An ID for this type which is unique within a Stencil project.
*/
id: string;
/**
* Whether this type was imported as a default import (e.g., `import MyEnum from './my-enum'`)
* vs a named import (e.g., `import { MyType } from './my-type'`)
*/
isDefault?: boolean;
/**
* The name used in the import statement (before any user-defined alias).
* For `import { XAxisOption as moo }`, this would be "XAxisOption".
* This is the name exported by the source module.
*/
referenceLocation?: string;
}
interface ComponentCompilerReferencedType {
/**
* The path to the module where the type is declared.
*/
path: string;
/**
* The string of the original type annotation in the Stencil source code
*/
declaration: string;
/**
* An extracted docstring
*/
docstring: string;
}
interface ComponentCompilerEventComplexType {
original: string;
resolved: string;
references: ComponentCompilerTypeReferences;
}
interface ComponentCompilerMethodComplexType {
signature: string;
parameters: JsonDocMethodParameter[];
references: ComponentCompilerTypeReferences;
return: string;
}
/**
* The Type Library holds information about the types which are used in a
* Stencil project. During compilation, Stencil gathers information about the
* types which form part of a component's public API, such as properties
* decorated with `@Prop`, `@Event`, `@Watch`, etc. This type information is
* then added to the Type Library, where it can be accessed later on for
* generating documentation.
*
* This information is included in the file written by the `docs-json` output
* target (see {@link JsonDocs.typeLibrary}).
*/
export type JsonDocsTypeLibrary = Record<string, ComponentCompilerReferencedType>;
/**
* A container for JSDoc metadata for a project
*/
export interface JsonDocs {
/**
* The metadata for the JSDocs for each component in a Stencil project
*/
components: JsonDocsComponent[];
/**
* The timestamp at which the metadata was generated, in the format YYYY-MM-DDThh:mm:ss
*/
timestamp: string;
compiler: {
/**
* The name of the compiler that generated the metadata
*/
name: string;
/**
* The version of the Stencil compiler that generated the metadata
*/
version: string;
/**
* The version of TypeScript that was used to generate the metadata
*/
typescriptVersion: string;
};
typeLibrary: JsonDocsTypeLibrary;
}
/**
* Container for JSDoc metadata for a single Stencil component
*/
export interface JsonDocsComponent {
/**
* The directory containing the Stencil component, minus the file name.
*
* @example /workspaces/stencil-project/src/components/my-component
*/
dirPath?: string;
/**
* The name of the file containing the Stencil component, with no path
*
* @example my-component.tsx
*/
fileName?: string;
/**
* The full path of the file containing the Stencil component
*
* @example /workspaces/stencil-project/src/components/my-component/my-component.tsx
*/
filePath?: string;
/**
* The path to the component's `readme.md` file, including the filename
*
* @example /workspaces/stencil-project/src/components/my-component/readme.md
*/
readmePath?: string;
/**
* The path to the component's `usage` directory
*
* @example /workspaces/stencil-project/src/components/my-component/usage/
*/
usagesDir?: string;
/**
* The encapsulation strategy for a component
*/
encapsulation: "shadow" | "scoped" | "none";
/**
* The tag name for the component, for use in HTML
*/
tag: string;
/**
* The contents of a component's `readme.md` that are user generated.
*
* Auto-generated contents are not stored in this reference.
*/
readme: string;
/**
* The description of a Stencil component, found in the JSDoc that sits above the component's declaration
*/
docs: string;
/**
* JSDoc tags found in the JSDoc comment written atop a component's declaration
*/
docsTags: JsonDocsTag[];
/**
* The text from the class-level JSDoc for a Stencil component, if present.
*/
overview?: string;
/**
* A mapping of usage example file names to their contents for the component.
*/
usage: JsonDocsUsage;
/**
* Array of metadata for a component's `@Prop`s
*/
props: JsonDocsProp[];
/**
* Array of metadata for a component's `@Method`s
*/
methods: JsonDocsMethod[];
/**
* Array of metadata for a component's `@Event`s
*/
events: JsonDocsEvent[];
/**
* Array of metadata for a component's `@Listen` handlers
*/
listeners: JsonDocsListener[];
/**
* Array of metadata for a component's CSS styling information
*/
styles: JsonDocsStyle[];
/**
* Array of component Slot information, generated from `@slot` tags
*/
slots: JsonDocsSlot[];
/**
* Array of component Parts information, generate from `@part` tags
*/
parts: JsonDocsPart[];
/**
* Array of custom states defined via @AttachInternals({ states: {...} })
*/
customStates: JsonDocsCustomState[];
/**
* Array of metadata describing where the current component is used
*/
dependents: string[];
/**
* Array of metadata listing the components which are used in current component
*/
dependencies: string[];
/**
* Describes a tree of components coupling
*/
dependencyGraph: JsonDocsDependencyGraph;
/**
* A deprecation reason/description found following a `@deprecated` tag
*/
deprecation?: string;
}
export interface JsonDocsDependencyGraph {
[tagName: string]: string[];
}
/**
* A descriptor for a single JSDoc tag found in a block comment
*/
export interface JsonDocsTag {
/**
* The tag name (immediately following the '@')
*/
name: string;
/**
* The description that immediately follows the tag name
*/
text?: string;
}
export interface JsonDocsValue {
value?: string;
type: string;
}
/**
* A mapping of file names to their contents.
*
* This type is meant to be used when reading one or more usage markdown files associated with a component. For the
* given directory structure:
* ```
* src/components/my-component
* ├── my-component.tsx
* └── usage
* ├── bar.md
* └── foo.md
* ```
* an instance of this type would include the name of the markdown file, mapped to its contents:
* ```ts
* {
* 'bar': STRING_CONTENTS_OF_BAR.MD
* 'foo': STRING_CONTENTS_OF_FOO.MD
* }
* ```
*/
export interface JsonDocsUsage {
[key: string]: string;
}
/**
* An intermediate representation of a `@Prop` decorated member's JSDoc
*/
export interface JsonDocsProp {
/**
* the name of the prop
*/
name: string;
complexType?: ComponentCompilerPropertyComplexType;
/**
* the type of the prop, in terms of the TypeScript type system (as opposed to JavaScript's or HTML's)
*/
type: string;
/**
* `true` if the prop was configured as "mutable" where it was declared, `false` otherwise
*/
mutable: boolean;
/**
* The name of the attribute that is exposed to configure a compiled web component
*/
attr?: string;
/**
* `true` if the prop was configured to "reflect" back to HTML where it (the prop) was declared, `false` otherwise
*/
reflectToAttr: boolean;
/**
* the JSDoc description text associated with the prop
*/
docs: string;
/**
* JSDoc tags associated with the prop
*/
docsTags: JsonDocsTag[];
/**
* The default value of the prop
*/
default?: string;
/**
* Deprecation text associated with the prop. This is the text that immediately follows a `@deprecated` tag
*/
deprecation?: string;
values: JsonDocsValue[];
/**
* `true` if a component is declared with a '?', `false` otherwise
*
* @example
* ```tsx
* @Prop() componentProps?: any;
* ```
*/
optional: boolean;
/**
* `true` if a component is declared with a '!', `false` otherwise
*
* @example
* ```tsx
* @Prop() componentProps!: any;
* ```
*/
required: boolean;
/**
* `true` if the prop has a `get()`. `false` otherwise
*/
getter: boolean;
/**
* `true` if the prop has a `set()`. `false` otherwise
*/
setter: boolean;
}
export interface JsonDocsMethod {
name: string;
docs: string;
docsTags: JsonDocsTag[];
deprecation?: string;
signature: string;
returns: JsonDocsMethodReturn;
parameters: JsonDocMethodParameter[];
complexType: ComponentCompilerMethodComplexType;
}
export interface JsonDocsMethodReturn {
type: string;
docs: string;
}
export interface JsonDocMethodParameter {
name: string;
type: string;
docs: string;
}
export interface JsonDocsEvent {
event: string;
bubbles: boolean;
cancelable: boolean;
composed: boolean;
complexType: ComponentCompilerEventComplexType;
docs: string;
docsTags: JsonDocsTag[];
deprecation?: string;
detail: string;
}
/**
* Type describing a CSS Style, as described by a JSDoc-style comment
*/
export interface JsonDocsStyle {
/**
* The name of the style
*/
name: string;
/**
* The type/description associated with the style
*/
docs: string;
/**
* The annotation used in the JSDoc of the style (e.g. `@prop`)
*/
annotation: string;
/**
* The mode associated with the style
*/
mode: string | undefined;
}
export interface JsonDocsListener {
event: string;
target?: string;
capture: boolean;
passive: boolean;
}
/**
* A descriptor for a slot
*
* Objects of this type are translated from the JSDoc tag, `@slot`
*/
export interface JsonDocsSlot {
/**
* The name of the slot. Defaults to an empty string for an unnamed slot.
*/
name: string;
/**
* A textual description of the slot.
*/
docs: string;
}
/**
* A descriptor of a CSS Shadow Part
*
* Objects of this type are translated from the JSDoc tag, `@part`, or the 'part'
* attribute on a component in TSX
*/
export interface JsonDocsPart {
/**
* The name of the Shadow part
*/
name: string;
/**
* A textual description of the Shadow part.
*/
docs: string;
}
/**
* A descriptor for a Custom State defined via @AttachInternals({ states: {...} })
*
* Custom states are exposed via the ElementInternals.states CustomStateSet
* and can be targeted with the CSS `:state()` pseudo-class.
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet
*/
export interface JsonDocsCustomState {
/**
* The name of the custom state (without dashes)
*/
name: string;
/**
* The initial/default value of the state
*/
initialValue: boolean;
/**
* A textual description of the custom state
*/
docs: string;
}
/**
* Represents a parsed block comment in a CSS, Sass, etc. file for a custom property.
*/
export interface StyleDoc {
/**
* The name of the CSS property
*/
name: string;
/**
* The user-defined description of the CSS property
*/
docs: string;
/**
* The JSDoc-style annotation (e.g. `@prop`) that was used in the block comment to detect the comment.
* Used to inform Stencil where the start of a new property's description starts (and where the previous description
* ends).
*/
annotation: "prop";
/**
* The Stencil style-mode that is associated with this property.
*/
mode: string | undefined;
}
export {};
declare const _default: JsonDocs;
export default _default;
+101
View File
@@ -0,0 +1,101 @@
{
"timestamp": "2026-07-12T12:51:52",
"compiler": {
"name": "@stencil/core",
"version": "4.43.5",
"typescriptVersion": "5.8.3"
},
"components": [
{
"filePath": "src/components/my-component/my-component.tsx",
"encapsulation": "shadow",
"tag": "my-component",
"readme": "# my-component\n\n\n",
"docs": "",
"docsTags": [],
"usage": {},
"props": [
{
"name": "first",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": false,
"attr": "first",
"reflectToAttr": false,
"docs": "The first name",
"docsTags": [],
"values": [
{
"type": "string"
}
],
"optional": true,
"required": false,
"getter": false,
"setter": false
},
{
"name": "last",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": false,
"attr": "last",
"reflectToAttr": false,
"docs": "The last name",
"docsTags": [],
"values": [
{
"type": "string"
}
],
"optional": true,
"required": false,
"getter": false,
"setter": false
},
{
"name": "middle",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": false,
"attr": "middle",
"reflectToAttr": false,
"docs": "The middle name",
"docsTags": [],
"values": [
{
"type": "string"
}
],
"optional": true,
"required": false,
"getter": false,
"setter": false
}
],
"methods": [],
"events": [],
"listeners": [],
"styles": [],
"slots": [],
"parts": [],
"states": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
}
],
"typeLibrary": {}
}
+11 -5
View File
@@ -18,9 +18,9 @@
"types": "./dist/components/my-component.d.ts"
},
"./loader": {
"types": "./loader/index.d.ts",
"import": "./loader/index.js",
"require": "./loader/index.cjs",
"types": "./loader/index.d.ts"
"require": "./loader/index.cjs"
}
},
"repository": {
@@ -36,15 +36,21 @@
"start": "stencil build --dev --watch --serve",
"test": "stencil-test --prod",
"test:watch": "stencil-test --prod --watch",
"generate": "stencil generate"
"generate": "stencil generate",
"storybook": "storybook dev -p 6006 --no-open"
},
"devDependencies": {
"@stencil/core": "^4.27.1 || ^5.0.0-0",
"@stencil/core": "^4.43.5",
"@stencil/storybook-plugin": "^0.7.0",
"@stencil/vitest": "^1.8.3",
"@storybook/addon-links": "^10.5.0",
"@types/node": "^22.13.5",
"@vitest/browser-playwright": "^4.0.0",
"playwright": "^1.52.0",
"vitest": "^4.0.0"
"storybook": "^10.5.0",
"vitest": "^4.0.0",
"eslint-plugin-storybook": "10.5.0",
"@storybook/addon-docs": "^10.5.0"
},
"license": "MIT"
}
@@ -0,0 +1,41 @@
import type { Meta, StoryObj } from '@stencil/storybook-plugin';
import { h } from '@stencil/core';
import { MyComponent } from './my-component';
const meta: Meta<MyComponent> = {
title: 'MyComponent',
component: MyComponent,
parameters: {
layout: 'centered',
},
argTypes: {
first: { control: 'text' },
last: { control: 'text' },
middle: { control: 'text' },
},
args: { first: 'John', last: 'Doe', middle: 'Michael' },
};
export default meta;
type Story = StoryObj<MyComponent>;
export const Primary: Story = {
args: {
first: 'John',
last: 'Doe',
middle: 'Michael',
},
render: (props) => <my-component {...props} />,
};
/**
* Storybook story without custom render function
*/
export const Secondary: Story = {
args: {
first: 'Jane',
last: 'Smith',
middle: 'Marie',
},
};
+4
View File
@@ -19,5 +19,9 @@ export const config: Config = {
type: 'www',
serviceWorker: null, // disable service workers
},
{
type: 'docs-json',
file: './custom-elements.json',
},
],
};
+1591 -3
View File
File diff suppressed because it is too large Load Diff
+2
View File
@@ -1,3 +1,5 @@
packages:
- "packages/*"
- "apps/*"
allowBuilds:
esbuild: false