@stencil/storybook-plugin 0.5.5 → 0.5.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/entry-preview-argtypes.cjs +36 -4
  2. package/dist/entry-preview-argtypes.cjs.map +1 -1
  3. package/dist/entry-preview-argtypes.js +36 -4
  4. package/dist/entry-preview-argtypes.js.map +1 -1
  5. package/package.json +1 -1
package/dist/entry-preview-argtypes.cjs CHANGED
@@ -54,10 +54,42 @@ const inferControlType = (prop) => {
54
54
 
55
55
  //#endregion
56
56
  //#region src/docs/custom-elements.ts
57
+ /**
58
+ * Formats docsTags (@deprecated, @see, @since) and appends them to the description
59
+ */
60
+ const formatDocsTags = (docs, docsTags) => {
61
+ if (!docsTags || docsTags.length === 0) return docs;
62
+ const tagSections = [];
63
+ const deprecationSections = [];
64
+ const deprecatedTags = docsTags.filter((tag) => tag.name === "deprecated");
65
+ if (deprecatedTags.length > 0) deprecatedTags.forEach((tag) => {
66
+ if (tag.text) deprecationSections.push(`**⚠️ DEPRECATED:** ${tag.text}`);
67
+ else deprecationSections.push(`**⚠️ DEPRECATED**`);
68
+ });
69
+ const seeTags = docsTags.filter((tag) => tag.name === "see");
70
+ if (seeTags.length > 0) {
71
+ const seeLinks = seeTags.map((tag) => {
72
+ const url = tag.text?.trim();
73
+ return url ? `[${url}](${url})` : "";
74
+ }).filter(Boolean).join(", ");
75
+ if (seeLinks) tagSections.push(`**See:** ${seeLinks}`);
76
+ }
77
+ const sinceTags = docsTags.filter((tag) => tag.name === "since");
78
+ if (sinceTags.length > 0) {
79
+ const sinceText = sinceTags.map((tag) => tag.text).filter(Boolean).join(", ");
80
+ if (sinceText) tagSections.push(`**Since:** ${sinceText}`);
81
+ }
82
+ const allSections = [
83
+ ...deprecationSections,
84
+ docs,
85
+ ...tagSections
86
+ ].filter(Boolean);
87
+ return allSections.join("\n\n");
88
+ };
57
89
  const mapData = (data, category) => data.reduce((acc, item) => {
58
90
  acc[item.name] = {
59
91
  name: item.name,
60
- description: item.docs,
92
+ description: formatDocsTags(item.docs, item.docsTags),
61
93
  control: false,
62
94
  table: { category }
63
95
  };
@@ -66,7 +98,7 @@ const mapData = (data, category) => data.reduce((acc, item) => {
66
98
  const mapMethods = (methods) => methods.reduce((acc, method) => {
67
99
  acc[method.name] = {
68
100
  name: method.name,
69
- description: method.docs,
101
+ description: formatDocsTags(method.docs, method.docsTags),
70
102
  control: null,
71
103
  type: { name: "function" },
72
104
  table: {
@@ -83,7 +115,7 @@ const mapEvent = (events) => events.reduce((acc, event) => {
83
115
  name = `on${name.charAt(0).toUpperCase() + name.slice(1)}`;
84
116
  acc[name] = {
85
117
  name,
86
- description: event.docs,
118
+ description: formatDocsTags(event.docs, event.docsTags),
87
119
  control: null,
88
120
  table: {
89
121
  category: "events",
@@ -96,7 +128,7 @@ const mapEvent = (events) => events.reduce((acc, event) => {
96
128
  const mapProps = (props) => props.reduce((acc, prop) => {
97
129
  acc[prop.name] = {
98
130
  name: prop.attr || prop.name,
99
- description: prop.docs,
131
+ description: formatDocsTags(prop.docs, prop.docsTags),
100
132
  control: inferControlType(prop),
101
133
  table: {
102
134
  category: "properties",
package/dist/entry-preview-argtypes.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"entry-preview-argtypes.cjs","names":["prop: JsonDocsProp","scalarTypes: SBScalarType['name'][]","data: T[]","category: string","methods: JsonDocsMethod[]","events: JsonDocsEvent[]","chr: string","props: JsonDocsProp[]","tagName: string","manifest: JsonDocs","customElements: JsonDocs","component: any","argTypesEnhancers: ArgTypesEnhancer<StencilRenderer<unknown>>[]","enhanceArgTypes"],"sources":["../src/docs/infer-type.ts","../src/docs/custom-elements.ts","../src/entry-preview-argtypes.ts"],"sourcesContent":["import type { JsonDocsProp } from '@stencil/core/internal';\nimport type { InputType, SBScalarType, SBType } from 'storybook/internal/types';\n\nexport const inferSBType = (prop: JsonDocsProp): SBType => {\n const scalarTypes: SBScalarType['name'][] = ['string', 'number', 'boolean', 'symbol'];\n if (prop.type.toLowerCase() in scalarTypes) {\n return { name: prop.type.toLowerCase(), raw: prop.type, required: prop.required } as SBScalarType;\n }\n\n if (/^\\(.*\\)\\s*=>\\s*.*$/.test(prop.type)) {\n return { name: 'function', raw: prop.type, required: prop.required };\n }\n\n return { name: 'other', value: prop.type, raw: prop.type, required: prop.required };\n};\n\nexport const mapPropOptions = (prop: JsonDocsProp) =>\n prop.values.filter((value) => ['string', 'number'].includes(value.type)).map(({ value }) => value);\n\nexport const inferControlType = (prop: JsonDocsProp): InputType['control'] => {\n switch (prop.type) {\n case 'string':\n case 'string | undefined':\n return { type: 'text' };\n case 'number':\n case 'number | undefined':\n return { type: 'number' };\n case 'boolean':\n case 'boolean | undefined':\n return { type: 'boolean' };\n case 'Date':\n case 'Date | string':\n return { type: 'date' };\n case 'function':\n case 'function | undefined':\n case 'void':\n case 'void | undefined':\n return null;\n default:\n const values = mapPropOptions(prop);\n\n if (values.length === 0) {\n return { type: 'object' };\n }\n if (values.length < 5) {\n return { type: 'radio' };\n }\n return { type: 'select' };\n }\n};\n","import type {\n JsonDocs,\n JsonDocsEvent,\n JsonDocsMethod,\n JsonDocsPart,\n JsonDocsProp,\n JsonDocsSlot,\n JsonDocsStyle,\n} from '@stencil/core/internal';\nimport { logger } from 'storybook/internal/client-logger';\nimport type { ArgTypes } from 'storybook/internal/types';\n\nimport { getCustomElements, isValidComponent, isValidMetaData } from '..';\nimport { inferControlType, inferSBType, mapPropOptions } from './infer-type';\n\nconst mapData = <T extends JsonDocsPart>(data: T[], category: string): ArgTypes =>\n data.reduce<ArgTypes>((acc, item) => {\n acc[item.name] = {\n name: item.name,\n description: item.docs,\n control: false,\n table: {\n category,\n },\n };\n return acc;\n }, {});\n\nconst mapMethods = (methods: JsonDocsMethod[]): ArgTypes =>\n methods.reduce<ArgTypes>((acc, method) => {\n acc[method.name] = {\n name: method.name,\n description: method.docs,\n control: null,\n type: { name: 'function' },\n table: {\n category: 'methods',\n type: { summary: method.signature },\n },\n };\n return acc;\n }, {});\n\nconst mapEvent = (events: JsonDocsEvent[]): ArgTypes =>\n events.reduce<ArgTypes>((acc, event) => {\n let name = event.event\n .replace(/(-|_|:|\\.|\\s)+(.)?/g, (_match, _separator, chr: string) => {\n return chr ? chr.toUpperCase() : '';\n })\n .replace(/^([A-Z])/, (match) => match.toLowerCase());\n\n name = `on${name.charAt(0).toUpperCase() + name.slice(1)}`;\n\n acc[name] = {\n name,\n description: event.docs,\n control: null,\n table: {\n category: 'events',\n type: { summary: event.detail },\n },\n type: { name: 'function' },\n };\n\n return acc;\n }, {});\n\nconst mapProps = (props: JsonDocsProp[]): ArgTypes =>\n props.reduce<ArgTypes>((acc, prop) => {\n acc[prop.name] = {\n name: prop.attr || prop.name,\n description: prop.docs,\n control: inferControlType(prop),\n table: {\n category: 'properties',\n type: { summary: prop.complexType?.original },\n defaultValue: { summary: prop.default },\n },\n options: mapPropOptions(prop),\n type: inferSBType(prop),\n };\n\n return acc;\n }, {});\n\nconst getMetaData = (tagName: string, manifest: JsonDocs) => {\n if (!isValidComponent(tagName) || !isValidMetaData(manifest)) {\n return null;\n }\n const metaData = manifest.components.find((component) => component.tag.toUpperCase() === tagName.toUpperCase());\n if (!metaData) {\n logger.warn(`Component not found in custom-elements.json: ${tagName}`);\n }\n return metaData;\n};\n\nexport const extractArgTypesFromElements = (tagName: string, customElements: JsonDocs) => {\n const metaData = getMetaData(tagName, customElements);\n return (\n metaData && {\n ...mapProps(metaData.props),\n ...mapEvent(metaData.events),\n ...mapMethods(metaData.methods),\n ...mapData<JsonDocsSlot>(metaData.slots, 'slots'),\n ...mapData<JsonDocsPart>(metaData.parts, 'parts'),\n ...mapData<JsonDocsStyle>(metaData.styles, 'styles'),\n }\n );\n};\n\nexport const extractArgTypes = (component: any) => {\n const cem = getCustomElements();\n // Handle both string references (lazy loading) and class references (auto-define)\n const tagName = typeof component === 'string' ? component : component?.is;\n return extractArgTypesFromElements(tagName, cem);\n};\n\nexport const extractComponentDescription = (component: any) => {\n // Handle both string references (lazy loading) and class references (auto-define)\n const tagName = typeof component === 'string' ? component : component?.is;\n const metaData = getMetaData(tagName, getCustomElements());\n return metaData && metaData.docs;\n};\n","import { enhanceArgTypes } from 'storybook/internal/docs-tools';\nimport type { ArgTypesEnhancer } from 'storybook/internal/types';\n\nimport { extractArgTypes, extractComponentDescription } from './docs/custom-elements';\nimport type { StencilRenderer } from './types';\n\nexport const parameters = {\n docs: {\n extractArgTypes,\n extractComponentDescription,\n },\n};\n\nexport const argTypesEnhancers: ArgTypesEnhancer<StencilRenderer<unknown>>[] = [enhanceArgTypes];"],"mappings":"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"}
1
+ {"version":3,"file":"entry-preview-argtypes.cjs","names":["prop: JsonDocsProp","scalarTypes: SBScalarType['name'][]","docs: string","docsTags?: DocsTag[]","tagSections: string[]","deprecationSections: string[]","data: T[]","category: string","methods: JsonDocsMethod[]","events: JsonDocsEvent[]","chr: string","props: JsonDocsProp[]","tagName: string","manifest: JsonDocs","customElements: JsonDocs","component: any","argTypesEnhancers: ArgTypesEnhancer<StencilRenderer<unknown>>[]","enhanceArgTypes"],"sources":["../src/docs/infer-type.ts","../src/docs/custom-elements.ts","../src/entry-preview-argtypes.ts"],"sourcesContent":["import type { JsonDocsProp } from '@stencil/core/internal';\nimport type { InputType, SBScalarType, SBType } from 'storybook/internal/types';\n\nexport const inferSBType = (prop: JsonDocsProp): SBType => {\n const scalarTypes: SBScalarType['name'][] = ['string', 'number', 'boolean', 'symbol'];\n if (prop.type.toLowerCase() in scalarTypes) {\n return { name: prop.type.toLowerCase(), raw: prop.type, required: prop.required } as SBScalarType;\n }\n\n if (/^\\(.*\\)\\s*=>\\s*.*$/.test(prop.type)) {\n return { name: 'function', raw: prop.type, required: prop.required };\n }\n\n return { name: 'other', value: prop.type, raw: prop.type, required: prop.required };\n};\n\nexport const mapPropOptions = (prop: JsonDocsProp) =>\n prop.values.filter((value) => ['string', 'number'].includes(value.type)).map(({ value }) => value);\n\nexport const inferControlType = (prop: JsonDocsProp): InputType['control'] => {\n switch (prop.type) {\n case 'string':\n case 'string | undefined':\n return { type: 'text' };\n case 'number':\n case 'number | undefined':\n return { type: 'number' };\n case 'boolean':\n case 'boolean | undefined':\n return { type: 'boolean' };\n case 'Date':\n case 'Date | string':\n return { type: 'date' };\n case 'function':\n case 'function | undefined':\n case 'void':\n case 'void | undefined':\n return null;\n default:\n const values = mapPropOptions(prop);\n\n if (values.length === 0) {\n return { type: 'object' };\n }\n if (values.length < 5) {\n return { type: 'radio' };\n }\n return { type: 'select' };\n }\n};\n","import type {\n JsonDocs,\n JsonDocsEvent,\n JsonDocsMethod,\n JsonDocsPart,\n JsonDocsProp,\n JsonDocsSlot,\n JsonDocsStyle,\n} from '@stencil/core/internal';\nimport { logger } from 'storybook/internal/client-logger';\nimport type { ArgTypes } from 'storybook/internal/types';\n\nimport { getCustomElements, isValidComponent, isValidMetaData } from '..';\nimport { inferControlType, inferSBType, mapPropOptions } from './infer-type';\n\ninterface DocsTag {\n name: string;\n text?: string;\n}\n\n/**\n * Formats docsTags (@deprecated, @see, @since) and appends them to the description\n */\nconst formatDocsTags = (docs: string, docsTags?: DocsTag[]): string => {\n if (!docsTags || docsTags.length === 0) {\n return docs;\n }\n\n const tagSections: string[] = [];\n const deprecationSections: string[] = [];\n\n // Handle @deprecated tags - show at the top with emphasis\n const deprecatedTags = docsTags.filter((tag) => tag.name === 'deprecated');\n if (deprecatedTags.length > 0) {\n deprecatedTags.forEach((tag) => {\n if (tag.text) {\n deprecationSections.push(`**⚠️ DEPRECATED:** ${tag.text}`);\n } else {\n deprecationSections.push(`**⚠️ DEPRECATED**`);\n }\n });\n }\n\n // Handle @see tags - create links\n const seeTags = docsTags.filter((tag) => tag.name === 'see');\n if (seeTags.length > 0) {\n const seeLinks = seeTags\n .map((tag) => {\n const url = tag.text?.trim();\n return url ? `[${url}](${url})` : '';\n })\n .filter(Boolean)\n .join(', ');\n if (seeLinks) {\n tagSections.push(`**See:** ${seeLinks}`);\n }\n }\n\n // Handle @since tags\n const sinceTags = docsTags.filter((tag) => tag.name === 'since');\n if (sinceTags.length > 0) {\n const sinceText = sinceTags\n .map((tag) => tag.text)\n .filter(Boolean)\n .join(', ');\n if (sinceText) {\n tagSections.push(`**Since:** ${sinceText}`);\n }\n }\n\n // Combine all sections - deprecation first, then docs, then other tags\n const allSections = [...deprecationSections, docs, ...tagSections].filter(Boolean);\n\n return allSections.join('\\n\\n');\n};\n\nconst mapData = <T extends JsonDocsPart>(data: T[], category: string): ArgTypes =>\n data.reduce<ArgTypes>((acc, item) => {\n acc[item.name] = {\n name: item.name,\n description: formatDocsTags(item.docs, (item as any).docsTags as DocsTag[]),\n control: false,\n table: {\n category,\n },\n };\n return acc;\n }, {});\n\nconst mapMethods = (methods: JsonDocsMethod[]): ArgTypes =>\n methods.reduce<ArgTypes>((acc, method) => {\n acc[method.name] = {\n name: method.name,\n description: formatDocsTags(method.docs, method.docsTags as DocsTag[]),\n control: null,\n type: { name: 'function' },\n table: {\n category: 'methods',\n type: { summary: method.signature },\n },\n };\n return acc;\n }, {});\n\nconst mapEvent = (events: JsonDocsEvent[]): ArgTypes =>\n events.reduce<ArgTypes>((acc, event) => {\n let name = event.event\n .replace(/(-|_|:|\\.|\\s)+(.)?/g, (_match, _separator, chr: string) => {\n return chr ? chr.toUpperCase() : '';\n })\n .replace(/^([A-Z])/, (match) => match.toLowerCase());\n\n name = `on${name.charAt(0).toUpperCase() + name.slice(1)}`;\n\n acc[name] = {\n name,\n description: formatDocsTags(event.docs, event.docsTags as DocsTag[]),\n control: null,\n table: {\n category: 'events',\n type: { summary: event.detail },\n },\n type: { name: 'function' },\n };\n\n return acc;\n }, {});\n\nconst mapProps = (props: JsonDocsProp[]): ArgTypes =>\n props.reduce<ArgTypes>((acc, prop) => {\n acc[prop.name] = {\n name: prop.attr || prop.name,\n description: formatDocsTags(prop.docs, prop.docsTags as DocsTag[]),\n control: inferControlType(prop),\n table: {\n category: 'properties',\n type: { summary: prop.complexType?.original },\n defaultValue: { summary: prop.default },\n },\n options: mapPropOptions(prop),\n type: inferSBType(prop),\n };\n\n return acc;\n }, {});\n\nconst getMetaData = (tagName: string, manifest: JsonDocs) => {\n if (!isValidComponent(tagName) || !isValidMetaData(manifest)) {\n return null;\n }\n const metaData = manifest.components.find((component) => component.tag.toUpperCase() === tagName.toUpperCase());\n if (!metaData) {\n logger.warn(`Component not found in custom-elements.json: ${tagName}`);\n }\n return metaData;\n};\n\nexport const extractArgTypesFromElements = (tagName: string, customElements: JsonDocs) => {\n const metaData = getMetaData(tagName, customElements);\n return (\n metaData && {\n ...mapProps(metaData.props),\n ...mapEvent(metaData.events),\n ...mapMethods(metaData.methods),\n ...mapData<JsonDocsSlot>(metaData.slots, 'slots'),\n ...mapData<JsonDocsPart>(metaData.parts, 'parts'),\n ...mapData<JsonDocsStyle>(metaData.styles, 'styles'),\n }\n );\n};\n\nexport const extractArgTypes = (component: any) => {\n const cem = getCustomElements();\n // Handle both string references (lazy loading) and class references (auto-define)\n const tagName = typeof component === 'string' ? component : component?.is;\n return extractArgTypesFromElements(tagName, cem);\n};\n\nexport const extractComponentDescription = (component: any) => {\n // Handle both string references (lazy loading) and class references (auto-define)\n const tagName = typeof component === 'string' ? component : component?.is;\n const metaData = getMetaData(tagName, getCustomElements());\n return metaData && metaData.docs;\n};\n","import { enhanceArgTypes } from 'storybook/internal/docs-tools';\nimport type { ArgTypesEnhancer } from 'storybook/internal/types';\n\nimport { extractArgTypes, extractComponentDescription } from './docs/custom-elements';\nimport type { StencilRenderer } from './types';\n\nexport const parameters = {\n docs: {\n extractArgTypes,\n extractComponentDescription,\n },\n};\n\nexport const argTypesEnhancers: ArgTypesEnhancer<StencilRenderer<unknown>>[] = [enhanceArgTypes];"],"mappings":"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"}
package/dist/entry-preview-argtypes.js CHANGED
@@ -54,10 +54,42 @@ const inferControlType = (prop) => {
54
54
 
55
55
  //#endregion
56
56
  //#region src/docs/custom-elements.ts
57
+ /**
58
+ * Formats docsTags (@deprecated, @see, @since) and appends them to the description
59
+ */
60
+ const formatDocsTags = (docs, docsTags) => {
61
+ if (!docsTags || docsTags.length === 0) return docs;
62
+ const tagSections = [];
63
+ const deprecationSections = [];
64
+ const deprecatedTags = docsTags.filter((tag) => tag.name === "deprecated");
65
+ if (deprecatedTags.length > 0) deprecatedTags.forEach((tag) => {
66
+ if (tag.text) deprecationSections.push(`**⚠️ DEPRECATED:** ${tag.text}`);
67
+ else deprecationSections.push(`**⚠️ DEPRECATED**`);
68
+ });
69
+ const seeTags = docsTags.filter((tag) => tag.name === "see");
70
+ if (seeTags.length > 0) {
71
+ const seeLinks = seeTags.map((tag) => {
72
+ const url = tag.text?.trim();
73
+ return url ? `[${url}](${url})` : "";
74
+ }).filter(Boolean).join(", ");
75
+ if (seeLinks) tagSections.push(`**See:** ${seeLinks}`);
76
+ }
77
+ const sinceTags = docsTags.filter((tag) => tag.name === "since");
78
+ if (sinceTags.length > 0) {
79
+ const sinceText = sinceTags.map((tag) => tag.text).filter(Boolean).join(", ");
80
+ if (sinceText) tagSections.push(`**Since:** ${sinceText}`);
81
+ }
82
+ const allSections = [
83
+ ...deprecationSections,
84
+ docs,
85
+ ...tagSections
86
+ ].filter(Boolean);
87
+ return allSections.join("\n\n");
88
+ };
57
89
  const mapData = (data, category) => data.reduce((acc, item) => {
58
90
  acc[item.name] = {
59
91
  name: item.name,
60
- description: item.docs,
92
+ description: formatDocsTags(item.docs, item.docsTags),
61
93
  control: false,
62
94
  table: { category }
63
95
  };
@@ -66,7 +98,7 @@ const mapData = (data, category) => data.reduce((acc, item) => {
66
98
  const mapMethods = (methods) => methods.reduce((acc, method) => {
67
99
  acc[method.name] = {
68
100
  name: method.name,
69
- description: method.docs,
101
+ description: formatDocsTags(method.docs, method.docsTags),
70
102
  control: null,
71
103
  type: { name: "function" },
72
104
  table: {
@@ -83,7 +115,7 @@ const mapEvent = (events) => events.reduce((acc, event) => {
83
115
  name = `on${name.charAt(0).toUpperCase() + name.slice(1)}`;
84
116
  acc[name] = {
85
117
  name,
86
- description: event.docs,
118
+ description: formatDocsTags(event.docs, event.docsTags),
87
119
  control: null,
88
120
  table: {
89
121
  category: "events",
@@ -96,7 +128,7 @@ const mapEvent = (events) => events.reduce((acc, event) => {
96
128
  const mapProps = (props) => props.reduce((acc, prop) => {
97
129
  acc[prop.name] = {
98
130
  name: prop.attr || prop.name,
99
- description: prop.docs,
131
+ description: formatDocsTags(prop.docs, prop.docsTags),
100
132
  control: inferControlType(prop),
101
133
  table: {
102
134
  category: "properties",
package/dist/entry-preview-argtypes.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"entry-preview-argtypes.js","names":["prop: JsonDocsProp","scalarTypes: SBScalarType['name'][]","data: T[]","category: string","methods: JsonDocsMethod[]","events: JsonDocsEvent[]","chr: string","props: JsonDocsProp[]","tagName: string","manifest: JsonDocs","customElements: JsonDocs","component: any","argTypesEnhancers: ArgTypesEnhancer<StencilRenderer<unknown>>[]"],"sources":["../src/docs/infer-type.ts","../src/docs/custom-elements.ts","../src/entry-preview-argtypes.ts"],"sourcesContent":["import type { JsonDocsProp } from '@stencil/core/internal';\nimport type { InputType, SBScalarType, SBType } from 'storybook/internal/types';\n\nexport const inferSBType = (prop: JsonDocsProp): SBType => {\n const scalarTypes: SBScalarType['name'][] = ['string', 'number', 'boolean', 'symbol'];\n if (prop.type.toLowerCase() in scalarTypes) {\n return { name: prop.type.toLowerCase(), raw: prop.type, required: prop.required } as SBScalarType;\n }\n\n if (/^\\(.*\\)\\s*=>\\s*.*$/.test(prop.type)) {\n return { name: 'function', raw: prop.type, required: prop.required };\n }\n\n return { name: 'other', value: prop.type, raw: prop.type, required: prop.required };\n};\n\nexport const mapPropOptions = (prop: JsonDocsProp) =>\n prop.values.filter((value) => ['string', 'number'].includes(value.type)).map(({ value }) => value);\n\nexport const inferControlType = (prop: JsonDocsProp): InputType['control'] => {\n switch (prop.type) {\n case 'string':\n case 'string | undefined':\n return { type: 'text' };\n case 'number':\n case 'number | undefined':\n return { type: 'number' };\n case 'boolean':\n case 'boolean | undefined':\n return { type: 'boolean' };\n case 'Date':\n case 'Date | string':\n return { type: 'date' };\n case 'function':\n case 'function | undefined':\n case 'void':\n case 'void | undefined':\n return null;\n default:\n const values = mapPropOptions(prop);\n\n if (values.length === 0) {\n return { type: 'object' };\n }\n if (values.length < 5) {\n return { type: 'radio' };\n }\n return { type: 'select' };\n }\n};\n","import type {\n JsonDocs,\n JsonDocsEvent,\n JsonDocsMethod,\n JsonDocsPart,\n JsonDocsProp,\n JsonDocsSlot,\n JsonDocsStyle,\n} from '@stencil/core/internal';\nimport { logger } from 'storybook/internal/client-logger';\nimport type { ArgTypes } from 'storybook/internal/types';\n\nimport { getCustomElements, isValidComponent, isValidMetaData } from '..';\nimport { inferControlType, inferSBType, mapPropOptions } from './infer-type';\n\nconst mapData = <T extends JsonDocsPart>(data: T[], category: string): ArgTypes =>\n data.reduce<ArgTypes>((acc, item) => {\n acc[item.name] = {\n name: item.name,\n description: item.docs,\n control: false,\n table: {\n category,\n },\n };\n return acc;\n }, {});\n\nconst mapMethods = (methods: JsonDocsMethod[]): ArgTypes =>\n methods.reduce<ArgTypes>((acc, method) => {\n acc[method.name] = {\n name: method.name,\n description: method.docs,\n control: null,\n type: { name: 'function' },\n table: {\n category: 'methods',\n type: { summary: method.signature },\n },\n };\n return acc;\n }, {});\n\nconst mapEvent = (events: JsonDocsEvent[]): ArgTypes =>\n events.reduce<ArgTypes>((acc, event) => {\n let name = event.event\n .replace(/(-|_|:|\\.|\\s)+(.)?/g, (_match, _separator, chr: string) => {\n return chr ? chr.toUpperCase() : '';\n })\n .replace(/^([A-Z])/, (match) => match.toLowerCase());\n\n name = `on${name.charAt(0).toUpperCase() + name.slice(1)}`;\n\n acc[name] = {\n name,\n description: event.docs,\n control: null,\n table: {\n category: 'events',\n type: { summary: event.detail },\n },\n type: { name: 'function' },\n };\n\n return acc;\n }, {});\n\nconst mapProps = (props: JsonDocsProp[]): ArgTypes =>\n props.reduce<ArgTypes>((acc, prop) => {\n acc[prop.name] = {\n name: prop.attr || prop.name,\n description: prop.docs,\n control: inferControlType(prop),\n table: {\n category: 'properties',\n type: { summary: prop.complexType?.original },\n defaultValue: { summary: prop.default },\n },\n options: mapPropOptions(prop),\n type: inferSBType(prop),\n };\n\n return acc;\n }, {});\n\nconst getMetaData = (tagName: string, manifest: JsonDocs) => {\n if (!isValidComponent(tagName) || !isValidMetaData(manifest)) {\n return null;\n }\n const metaData = manifest.components.find((component) => component.tag.toUpperCase() === tagName.toUpperCase());\n if (!metaData) {\n logger.warn(`Component not found in custom-elements.json: ${tagName}`);\n }\n return metaData;\n};\n\nexport const extractArgTypesFromElements = (tagName: string, customElements: JsonDocs) => {\n const metaData = getMetaData(tagName, customElements);\n return (\n metaData && {\n ...mapProps(metaData.props),\n ...mapEvent(metaData.events),\n ...mapMethods(metaData.methods),\n ...mapData<JsonDocsSlot>(metaData.slots, 'slots'),\n ...mapData<JsonDocsPart>(metaData.parts, 'parts'),\n ...mapData<JsonDocsStyle>(metaData.styles, 'styles'),\n }\n );\n};\n\nexport const extractArgTypes = (component: any) => {\n const cem = getCustomElements();\n // Handle both string references (lazy loading) and class references (auto-define)\n const tagName = typeof component === 'string' ? component : component?.is;\n return extractArgTypesFromElements(tagName, cem);\n};\n\nexport const extractComponentDescription = (component: any) => {\n // Handle both string references (lazy loading) and class references (auto-define)\n const tagName = typeof component === 'string' ? component : component?.is;\n const metaData = getMetaData(tagName, getCustomElements());\n return metaData && metaData.docs;\n};\n","import { enhanceArgTypes } from 'storybook/internal/docs-tools';\nimport type { ArgTypesEnhancer } from 'storybook/internal/types';\n\nimport { extractArgTypes, extractComponentDescription } from './docs/custom-elements';\nimport type { StencilRenderer } from './types';\n\nexport const parameters = {\n docs: {\n extractArgTypes,\n extractComponentDescription,\n },\n};\n\nexport const argTypesEnhancers: ArgTypesEnhancer<StencilRenderer<unknown>>[] = [enhanceArgTypes];"],"mappings":"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"}
1
+ {"version":3,"file":"entry-preview-argtypes.js","names":["prop: JsonDocsProp","scalarTypes: SBScalarType['name'][]","docs: string","docsTags?: DocsTag[]","tagSections: string[]","deprecationSections: string[]","data: T[]","category: string","methods: JsonDocsMethod[]","events: JsonDocsEvent[]","chr: string","props: JsonDocsProp[]","tagName: string","manifest: JsonDocs","customElements: JsonDocs","component: any","argTypesEnhancers: ArgTypesEnhancer<StencilRenderer<unknown>>[]"],"sources":["../src/docs/infer-type.ts","../src/docs/custom-elements.ts","../src/entry-preview-argtypes.ts"],"sourcesContent":["import type { JsonDocsProp } from '@stencil/core/internal';\nimport type { InputType, SBScalarType, SBType } from 'storybook/internal/types';\n\nexport const inferSBType = (prop: JsonDocsProp): SBType => {\n const scalarTypes: SBScalarType['name'][] = ['string', 'number', 'boolean', 'symbol'];\n if (prop.type.toLowerCase() in scalarTypes) {\n return { name: prop.type.toLowerCase(), raw: prop.type, required: prop.required } as SBScalarType;\n }\n\n if (/^\\(.*\\)\\s*=>\\s*.*$/.test(prop.type)) {\n return { name: 'function', raw: prop.type, required: prop.required };\n }\n\n return { name: 'other', value: prop.type, raw: prop.type, required: prop.required };\n};\n\nexport const mapPropOptions = (prop: JsonDocsProp) =>\n prop.values.filter((value) => ['string', 'number'].includes(value.type)).map(({ value }) => value);\n\nexport const inferControlType = (prop: JsonDocsProp): InputType['control'] => {\n switch (prop.type) {\n case 'string':\n case 'string | undefined':\n return { type: 'text' };\n case 'number':\n case 'number | undefined':\n return { type: 'number' };\n case 'boolean':\n case 'boolean | undefined':\n return { type: 'boolean' };\n case 'Date':\n case 'Date | string':\n return { type: 'date' };\n case 'function':\n case 'function | undefined':\n case 'void':\n case 'void | undefined':\n return null;\n default:\n const values = mapPropOptions(prop);\n\n if (values.length === 0) {\n return { type: 'object' };\n }\n if (values.length < 5) {\n return { type: 'radio' };\n }\n return { type: 'select' };\n }\n};\n","import type {\n JsonDocs,\n JsonDocsEvent,\n JsonDocsMethod,\n JsonDocsPart,\n JsonDocsProp,\n JsonDocsSlot,\n JsonDocsStyle,\n} from '@stencil/core/internal';\nimport { logger } from 'storybook/internal/client-logger';\nimport type { ArgTypes } from 'storybook/internal/types';\n\nimport { getCustomElements, isValidComponent, isValidMetaData } from '..';\nimport { inferControlType, inferSBType, mapPropOptions } from './infer-type';\n\ninterface DocsTag {\n name: string;\n text?: string;\n}\n\n/**\n * Formats docsTags (@deprecated, @see, @since) and appends them to the description\n */\nconst formatDocsTags = (docs: string, docsTags?: DocsTag[]): string => {\n if (!docsTags || docsTags.length === 0) {\n return docs;\n }\n\n const tagSections: string[] = [];\n const deprecationSections: string[] = [];\n\n // Handle @deprecated tags - show at the top with emphasis\n const deprecatedTags = docsTags.filter((tag) => tag.name === 'deprecated');\n if (deprecatedTags.length > 0) {\n deprecatedTags.forEach((tag) => {\n if (tag.text) {\n deprecationSections.push(`**⚠️ DEPRECATED:** ${tag.text}`);\n } else {\n deprecationSections.push(`**⚠️ DEPRECATED**`);\n }\n });\n }\n\n // Handle @see tags - create links\n const seeTags = docsTags.filter((tag) => tag.name === 'see');\n if (seeTags.length > 0) {\n const seeLinks = seeTags\n .map((tag) => {\n const url = tag.text?.trim();\n return url ? `[${url}](${url})` : '';\n })\n .filter(Boolean)\n .join(', ');\n if (seeLinks) {\n tagSections.push(`**See:** ${seeLinks}`);\n }\n }\n\n // Handle @since tags\n const sinceTags = docsTags.filter((tag) => tag.name === 'since');\n if (sinceTags.length > 0) {\n const sinceText = sinceTags\n .map((tag) => tag.text)\n .filter(Boolean)\n .join(', ');\n if (sinceText) {\n tagSections.push(`**Since:** ${sinceText}`);\n }\n }\n\n // Combine all sections - deprecation first, then docs, then other tags\n const allSections = [...deprecationSections, docs, ...tagSections].filter(Boolean);\n\n return allSections.join('\\n\\n');\n};\n\nconst mapData = <T extends JsonDocsPart>(data: T[], category: string): ArgTypes =>\n data.reduce<ArgTypes>((acc, item) => {\n acc[item.name] = {\n name: item.name,\n description: formatDocsTags(item.docs, (item as any).docsTags as DocsTag[]),\n control: false,\n table: {\n category,\n },\n };\n return acc;\n }, {});\n\nconst mapMethods = (methods: JsonDocsMethod[]): ArgTypes =>\n methods.reduce<ArgTypes>((acc, method) => {\n acc[method.name] = {\n name: method.name,\n description: formatDocsTags(method.docs, method.docsTags as DocsTag[]),\n control: null,\n type: { name: 'function' },\n table: {\n category: 'methods',\n type: { summary: method.signature },\n },\n };\n return acc;\n }, {});\n\nconst mapEvent = (events: JsonDocsEvent[]): ArgTypes =>\n events.reduce<ArgTypes>((acc, event) => {\n let name = event.event\n .replace(/(-|_|:|\\.|\\s)+(.)?/g, (_match, _separator, chr: string) => {\n return chr ? chr.toUpperCase() : '';\n })\n .replace(/^([A-Z])/, (match) => match.toLowerCase());\n\n name = `on${name.charAt(0).toUpperCase() + name.slice(1)}`;\n\n acc[name] = {\n name,\n description: formatDocsTags(event.docs, event.docsTags as DocsTag[]),\n control: null,\n table: {\n category: 'events',\n type: { summary: event.detail },\n },\n type: { name: 'function' },\n };\n\n return acc;\n }, {});\n\nconst mapProps = (props: JsonDocsProp[]): ArgTypes =>\n props.reduce<ArgTypes>((acc, prop) => {\n acc[prop.name] = {\n name: prop.attr || prop.name,\n description: formatDocsTags(prop.docs, prop.docsTags as DocsTag[]),\n control: inferControlType(prop),\n table: {\n category: 'properties',\n type: { summary: prop.complexType?.original },\n defaultValue: { summary: prop.default },\n },\n options: mapPropOptions(prop),\n type: inferSBType(prop),\n };\n\n return acc;\n }, {});\n\nconst getMetaData = (tagName: string, manifest: JsonDocs) => {\n if (!isValidComponent(tagName) || !isValidMetaData(manifest)) {\n return null;\n }\n const metaData = manifest.components.find((component) => component.tag.toUpperCase() === tagName.toUpperCase());\n if (!metaData) {\n logger.warn(`Component not found in custom-elements.json: ${tagName}`);\n }\n return metaData;\n};\n\nexport const extractArgTypesFromElements = (tagName: string, customElements: JsonDocs) => {\n const metaData = getMetaData(tagName, customElements);\n return (\n metaData && {\n ...mapProps(metaData.props),\n ...mapEvent(metaData.events),\n ...mapMethods(metaData.methods),\n ...mapData<JsonDocsSlot>(metaData.slots, 'slots'),\n ...mapData<JsonDocsPart>(metaData.parts, 'parts'),\n ...mapData<JsonDocsStyle>(metaData.styles, 'styles'),\n }\n );\n};\n\nexport const extractArgTypes = (component: any) => {\n const cem = getCustomElements();\n // Handle both string references (lazy loading) and class references (auto-define)\n const tagName = typeof component === 'string' ? component : component?.is;\n return extractArgTypesFromElements(tagName, cem);\n};\n\nexport const extractComponentDescription = (component: any) => {\n // Handle both string references (lazy loading) and class references (auto-define)\n const tagName = typeof component === 'string' ? component : component?.is;\n const metaData = getMetaData(tagName, getCustomElements());\n return metaData && metaData.docs;\n};\n","import { enhanceArgTypes } from 'storybook/internal/docs-tools';\nimport type { ArgTypesEnhancer } from 'storybook/internal/types';\n\nimport { extractArgTypes, extractComponentDescription } from './docs/custom-elements';\nimport type { StencilRenderer } from './types';\n\nexport const parameters = {\n docs: {\n extractArgTypes,\n extractComponentDescription,\n },\n};\n\nexport const argTypesEnhancers: ArgTypesEnhancer<StencilRenderer<unknown>>[] = [enhanceArgTypes];"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stencil/storybook-plugin",
3
- "version": "0.5.5",
3
+ "version": "0.5.6",
4
4
  "description": "Storybook plugin for Stencil",
5
5
  "license": "MIT",
6
6
  "homepage": "https://github.com/stenciljs/storybook",