From 68cbcb7ba2f01d9b95219596f1fc41c509b974fe Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Tue, 25 Oct 2022 16:34:47 +0100 Subject: [PATCH 1/4] fix: register should be used instead of manager React native's stable version uses 5.3 where register is still the correct import --- .../templates/react-native/template-csf/storybook/addons.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/code/lib/cli/templates/react-native/template-csf/storybook/addons.js b/code/lib/cli/templates/react-native/template-csf/storybook/addons.js index c3f195bdf9e..bc646c943eb 100644 --- a/code/lib/cli/templates/react-native/template-csf/storybook/addons.js +++ b/code/lib/cli/templates/react-native/template-csf/storybook/addons.js @@ -1,3 +1,3 @@ -import '@storybook/addon-actions/manager'; -import '@storybook/addon-links/manager'; -import '@storybook/addon-knobs/manager'; +import '@storybook/addon-actions/register'; +import '@storybook/addon-links/register'; +import '@storybook/addon-knobs/register'; From ad444a3832c8ae3fa41f8996087d99e97dc5a16f Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Wed, 26 Oct 2022 13:43:20 +1100 Subject: [PATCH 2/4] Ensure v6 store works even with no explicit renderer --- code/lib/core-common/src/utils/get-renderer-name.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/code/lib/core-common/src/utils/get-renderer-name.ts b/code/lib/core-common/src/utils/get-renderer-name.ts index 375190affb6..e0dacb269bc 100644 --- a/code/lib/core-common/src/utils/get-renderer-name.ts +++ b/code/lib/core-common/src/utils/get-renderer-name.ts @@ -1,5 +1,5 @@ -import { dedent } from 'ts-dedent'; import type { Options } from '@storybook/types'; +import { getFrameworkName } from './get-framework-name'; /** * Render is set as a string on core. It must be set by the framework @@ -8,11 +8,10 @@ export async function getRendererName(options: Options) { const { renderer } = await options.presets.apply('core', {}, options); if (!renderer) { - throw new Error(dedent` - You must specify a framework in '.storybook/main.js' config. - - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#framework-field-mandatory - `); + console.log('getting framework name'); + // At the moment some frameworks (Angular/Ember) do not define a renderer, but themselves + // serve the purpose (in particular exporting the symbols needed by entrypoints) + return getFrameworkName(options); } return renderer; From 1c91324a0c193e47f5fdb6a4d86a0821435fa14e Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Wed, 26 Oct 2022 15:00:34 +1100 Subject: [PATCH 3/4] Update code/lib/core-common/src/utils/get-renderer-name.ts --- code/lib/core-common/src/utils/get-renderer-name.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/code/lib/core-common/src/utils/get-renderer-name.ts b/code/lib/core-common/src/utils/get-renderer-name.ts index e0dacb269bc..35131f5e009 100644 --- a/code/lib/core-common/src/utils/get-renderer-name.ts +++ b/code/lib/core-common/src/utils/get-renderer-name.ts @@ -8,7 +8,6 @@ export async function getRendererName(options: Options) { const { renderer } = await options.presets.apply('core', {}, options); if (!renderer) { - console.log('getting framework name'); // At the moment some frameworks (Angular/Ember) do not define a renderer, but themselves // serve the purpose (in particular exporting the symbols needed by entrypoints) return getFrameworkName(options); From 1593be6602f326caa516892e2c4a5cff79e8ca96 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 26 Oct 2022 13:55:25 +0800 Subject: [PATCH 4/4] CSF tools: Add tags support --- code/lib/csf-tools/src/CsfFile.test.ts | 102 +++++++++++++++++++++++++ code/lib/csf-tools/src/CsfFile.ts | 26 ++++++- code/lib/types/src/modules/csf.ts | 4 + 3 files changed, 131 insertions(+), 1 deletion(-) diff --git a/code/lib/csf-tools/src/CsfFile.test.ts b/code/lib/csf-tools/src/CsfFile.test.ts index b813d82cd3a..68298961abf 100644 --- a/code/lib/csf-tools/src/CsfFile.test.ts +++ b/code/lib/csf-tools/src/CsfFile.test.ts @@ -1,3 +1,5 @@ +/// ; + /* eslint-disable no-underscore-dangle */ import { dedent } from 'ts-dedent'; import yaml from 'js-yaml'; @@ -690,4 +692,104 @@ describe('CsfFile', () => { expect(csf.imports).toMatchInlineSnapshot(); }); }); + + describe('tags', () => { + it('csf2', () => { + expect( + parse( + dedent` + export default { title: 'foo/bar', tags: ['X'] }; + export const A = () => {}; + A.tags = ['Y']; + ` + ) + ).toMatchInlineSnapshot(` + meta: + title: foo/bar + tags: + - X + stories: + - id: foo-bar--a + name: A + tags: + - 'Y' + `); + }); + + it('csf3', () => { + expect( + parse( + dedent` + export default { title: 'foo/bar', tags: ['X'] }; + export const A = { + render: () => {}, + tags: ['Y'], + }; + ` + ) + ).toMatchInlineSnapshot(` + meta: + title: foo/bar + tags: + - X + stories: + - id: foo-bar--a + name: A + tags: + - 'Y' + `); + }); + + it('variables', () => { + expect( + parse( + dedent` + const x = ['X']; + const y = ['Y']; + export default { title: 'foo/bar', tags: x }; + export const A = { + render: () => {}, + tags: y, + }; + ` + ) + ).toMatchInlineSnapshot(` + meta: + title: foo/bar + tags: + - X + stories: + - id: foo-bar--a + name: A + tags: + - 'Y' + `); + }); + + it('array error', () => { + expect(() => + parse( + dedent` + export default { title: 'foo/bar', tags: 'X' }; + export const A = { + render: () => {}, + }; + ` + ) + ).toThrow('CSF: Expected tags array'); + }); + + it('array element handling', () => { + expect(() => + parse( + dedent` + export default { title: 'foo/bar', tags: [10] }; + export const A = { + render: () => {}, + }; + ` + ) + ).toThrow('CSF: Expected tag to be string literal'); + }); + }); }); diff --git a/code/lib/csf-tools/src/CsfFile.ts b/code/lib/csf-tools/src/CsfFile.ts index 2cd82aef7be..755b89571d6 100644 --- a/code/lib/csf-tools/src/CsfFile.ts +++ b/code/lib/csf-tools/src/CsfFile.ts @@ -6,7 +6,7 @@ import * as t from '@babel/types'; import generate from '@babel/generator'; import traverse from '@babel/traverse'; import { toId, isExportStory, storyNameFromExport } from '@storybook/csf'; -import type { CSF_Meta, CSF_Story } from '@storybook/types'; +import type { CSF_Meta, CSF_Story, CSF_Tag } from '@storybook/types'; import { babelParse } from './babelParse'; const logger = console; @@ -26,6 +26,17 @@ function parseIncludeExclude(prop: t.Node) { throw new Error(`Unknown include/exclude: ${prop}`); } +function parseTags(prop: t.Node) { + if (!t.isArrayExpression(prop)) { + throw new Error('CSF: Expected tags array'); + } + + return prop.elements.map((e) => { + if (t.isStringLiteral(e)) return e.value; + throw new Error(`CSF: Expected tag to be string literal`); + }) as CSF_Tag[]; +} + const findVarInitialization = (identifier: string, program: t.Program) => { let init: t.Expression = null; let declarations: t.VariableDeclarator[] = null; @@ -184,6 +195,12 @@ export class CsfFile { } else if (p.key.name === 'component') { const { code } = generate(p.value, {}); meta.component = code; + } else if (p.key.name === 'tags') { + let node = p.value; + if (t.isIdentifier(node)) { + node = findVarInitialization(node.name, this._ast.program); + } + meta.tags = parseTags(node); } else if (p.key.name === 'id') { if (t.isStringLiteral(p.value)) { meta.id = p.value.value; @@ -404,6 +421,13 @@ export class CsfFile { parameters.docsOnly = true; } acc[key] = { ...story, id, parameters }; + const { tags } = self._storyAnnotations[key]; + if (tags) { + const node = t.isIdentifier(tags) + ? findVarInitialization(tags.name, this._ast.program) + : tags; + acc[key].tags = parseTags(node); + } } return acc; }, {} as Record); diff --git a/code/lib/types/src/modules/csf.ts b/code/lib/types/src/modules/csf.ts index c1f6e7c50c0..28272480209 100644 --- a/code/lib/types/src/modules/csf.ts +++ b/code/lib/types/src/modules/csf.ts @@ -114,18 +114,22 @@ export { StrictInputType, }; +export type CSF_Tag = string; + export interface CSF_Meta { id?: string; title?: string; component?: string; includeStories?: string[] | RegExp; excludeStories?: string[] | RegExp; + tags?: CSF_Tag[]; } export interface CSF_Story { id: string; name: string; parameters: Record; + tags?: CSF_Tag[]; } export type ViewMode = ViewModeFromCSF | 'story' | 'info' | 'settings' | string | undefined;