From 8a377f876d0883161f2df3c9f4d9358d4e7a4b49 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 17 Nov 2023 14:30:38 +0100 Subject: [PATCH 1/7] make it work with --test --- .../src/presets/common-override-preset.ts | 56 +++++-- code/package.json | 2 +- code/ui/.storybook/main.ts | 6 + .../typography/DocumentFormattingSample.mdx | 143 ------------------ .../typography/DocumentWrapper.stories.tsx | 7 - 5 files changed, 49 insertions(+), 165 deletions(-) delete mode 100644 code/ui/components/src/components/typography/DocumentFormattingSample.mdx diff --git a/code/lib/core-server/src/presets/common-override-preset.ts b/code/lib/core-server/src/presets/common-override-preset.ts index 5696701a88cd..35913f2265ce 100644 --- a/code/lib/core-server/src/presets/common-override-preset.ts +++ b/code/lib/core-server/src/presets/common-override-preset.ts @@ -1,6 +1,13 @@ -import type { Options, PresetProperty, StorybookConfig, TestBuildFlags } from '@storybook/types'; +import type { + NormalizedStoriesSpecifier, + Options, + PresetProperty, + StoriesEntry, + StorybookConfig, + TestBuildFlags, +} from '@storybook/types'; import { normalizeStories, commonGlobOptions } from '@storybook/core-common'; -import { isAbsolute, join } from 'path'; +import { isAbsolute, join, relative } from 'path'; import slash from 'slash'; import { glob } from 'glob'; @@ -19,30 +26,51 @@ export const framework: PresetProperty<'framework', StorybookConfig> = async (co export const stories: PresetProperty<'stories', StorybookConfig> = async (entries, options) => { if (options?.build?.test?.disableMDXEntries) { - return ( + const result = ( await Promise.all( normalizeStories(entries, { configDir: options.configDir, workingDir: options.configDir, - }).map(({ directory, files }) => { + }).map(async ({ directory, files, titlePrefix }) => { const pattern = join(directory, files); const absolutePattern = isAbsolute(pattern) ? pattern : join(options.configDir, pattern); + const absoluteDirectory = isAbsolute(directory) + ? directory + : join(options.configDir, directory); - return glob(slash(absolutePattern), { - ...commonGlobOptions(absolutePattern), - follow: true, - }); + return { + files: ( + await glob(slash(absolutePattern), { + ...commonGlobOptions(absolutePattern), + follow: true, + }) + ).map((f) => relative(absoluteDirectory, f)), + directory, + titlePrefix, + }; }) ) - ).flatMap((expanded, i) => { - const filteredEntries = expanded.filter((s) => !s.endsWith('.mdx')); + ).reduce((acc, expanded, i) => { + const filteredEntries = expanded.files.filter((s) => !s.endsWith('.mdx')); // only return the filtered entries when there is something to filter // as webpack is faster with unexpanded globs - if (filteredEntries.length < expanded.length) { - return filteredEntries; + let items = []; + if (filteredEntries.length < expanded.files.length) { + items = filteredEntries.map((k) => ({ + ...expanded, + files: `**/${k}`, + })); + console.log({ a: filteredEntries.length, b: expanded.files.length }); + acc.push(...items); + } else { + items = [entries[i]]; } - return entries[i]; - }); + console.log({ items }); + acc.push(...items); + + return acc; + }, []); + return result; } return entries; }; diff --git a/code/package.json b/code/package.json index 9c486f75ab69..d796c99a0741 100644 --- a/code/package.json +++ b/code/package.json @@ -47,7 +47,7 @@ "storybook:blocks:build": "STORYBOOK_BLOCKS_ONLY=true yarn storybook:ui:build", "storybook:blocks:chromatic": "STORYBOOK_BLOCKS_ONLY=true yarn storybook:ui:chromatic --project-token=${CHROMATIC_TOKEN_STORYBOOK_BLOCKS:-MISSING_PROJECT_TOKEN}", "storybook:ui": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js dev --port 6006 --config-dir ./ui/.storybook", - "storybook:ui:build": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js build --config-dir ./ui/.storybook", + "storybook:ui:build": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js build --config-dir ./ui/.storybook --test", "storybook:ui:chromatic": "yarn chromatic --build-script-name storybook:ui:build --storybook-config-dir ./ui/.storybook --storybook-base-dir ./code --project-token=${CHROMATIC_TOKEN_STORYBOOK_UI:-MISSING_PROJECT_TOKEN} --only-changed --exit-zero-on-changes --exit-once-uploaded", "task": "yarn --cwd ../scripts task", "test": "NODE_OPTIONS=--max_old_space_size=4096 jest --config ./jest.config.js", diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts index 347f21929530..4800dda1e181 100644 --- a/code/ui/.storybook/main.ts +++ b/code/ui/.storybook/main.ts @@ -8,6 +8,7 @@ const isBlocksOnly = process.env.STORYBOOK_BLOCKS_ONLY === 'true'; const allStories = [ { directory: '../manager/src', + files: '**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)', titlePrefix: '@manager', }, { @@ -53,6 +54,11 @@ const config: StorybookConfig = { '@storybook/addon-designs', '@chromaui/addon-visual-tests', ], + build: { + test: { + disableBlocks: false, + }, + }, framework: { name: '@storybook/react-vite', options: {}, diff --git a/code/ui/components/src/components/typography/DocumentFormattingSample.mdx b/code/ui/components/src/components/typography/DocumentFormattingSample.mdx deleted file mode 100644 index 65b5e6fbe2ce..000000000000 --- a/code/ui/components/src/components/typography/DocumentFormattingSample.mdx +++ /dev/null @@ -1,143 +0,0 @@ -# h1 Heading - -## h2 Heading - -### h3 Heading - -#### h4 Heading - -##### h5 Heading - -###### h6 Heading - -## Typographic replacements - -Enable typographer option to see result. - -(c) (C) (r) (R) (tm) (TM) (p) (P) +- - -test.. test... test..... test?..... test!.... - -!!!!!! ???? ,, -- --- - -"Smartypants, double quotes" and 'single quotes' - -## Emphasis - -**This is bold text** - -**This is bold text** - -_This is italic text_ - -_This is italic text_ - -_**This is bold italic text**_ - -~~Strikethrough~~ - -## Blockquotes - -> Blockquotes can also be nested... -> -> > ...by using additional greater-than signs right next to each other... -> > -> > > ...or with spaces between arrows. - -## Lists - -Unordered - -- Create a list by starting a line with `+`, `-`, or `*` -- Sub-lists are made by indenting 2 spaces: - - Marker character change forces new list start: - - Ac tristique libero volutpat at - * Facilisis in pretium nisl aliquet - - Nulla volutpat aliquam velit -- Hooray! - -Ordered - -1. Lorem ipsum dolor sit amet -2. Consectetur adipiscing elit -3. Integer molestie lorem at massa - -1) You can use sequential numbers... -1) ...or keep all the numbers as `1.` - -Start numbering with offset: - -57. foo -1. bar - -## Code - -Inline `code` - -Indented code - - // Some comments - line 1 of code - line 2 of code - line 3 of code - -Block code "fences" - -``` -Sample text here... -``` - -Syntax highlighting - -```js -var foo = function (bar) { - return bar++; -}; - -console.log(foo(5)); -``` - -## Horizontal Rule - ---- - -## Tables - -| Option | Description | -| ------ | ------------------------------------------------------------------------- | -| data | path to data files to supply the data that will be passed into templates. | -| engine | engine to be used for processing templates. Handlebars is the default. | -| ext | extension to be used for dest files. | - -Right aligned columns - -| Option | Description | -| -----: | ------------------------------------------------------------------------: | -| data | path to data files to supply the data that will be passed into templates. | -| engine | engine to be used for processing templates. Handlebars is the default. | -| ext | extension to be used for dest files. | - -## Links - -[link text](http://dev.nodeca.com) - -[link with title](http://nodeca.github.io/pica/demo/ 'title text!') - -Autoconverted link https://github.com/nodeca/pica (enable linkify to see) - -# [Link](https://storybook.js.org/) in heading - -## [Link](https://storybook.js.org/) in heading - -### [Link](https://storybook.js.org/) in heading - -#### [Link](https://storybook.js.org/) in heading - -##### [Link](https://storybook.js.org/) in heading - -###### [Link](https://storybook.js.org/) in heading - -## Images - -![Minion](https://octodex.github.com/images/minion.png) -![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg 'The Stormtroopocat') diff --git a/code/ui/components/src/components/typography/DocumentWrapper.stories.tsx b/code/ui/components/src/components/typography/DocumentWrapper.stories.tsx index f11de8ede5f5..4a886c31bc40 100644 --- a/code/ui/components/src/components/typography/DocumentWrapper.stories.tsx +++ b/code/ui/components/src/components/typography/DocumentWrapper.stories.tsx @@ -1,19 +1,12 @@ import React from 'react'; import { DocumentWrapper } from './DocumentWrapper'; -import MarkdownSample from './DocumentFormattingSample.mdx'; export default { component: DocumentWrapper, decorators: [(storyFn: any) =>
{storyFn()}
], }; -export const WithMarkdown = () => ( - - - -); - export const WithDOM = () => (

h1 Heading

From dc4786c7df9077d21fe82592e0db1bb26d54ed2c Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 17 Nov 2023 14:44:20 +0100 Subject: [PATCH 2/7] modify the default_files_pattern for normalizeStories to exclude mdx when --test flag is set --- code/lib/core-common/src/utils/normalize-stories.ts | 9 +++++---- .../core-server/src/presets/common-override-preset.ts | 1 + 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/code/lib/core-common/src/utils/normalize-stories.ts b/code/lib/core-common/src/utils/normalize-stories.ts index 9801fbeae307..3beabeae4c8c 100644 --- a/code/lib/core-common/src/utils/normalize-stories.ts +++ b/code/lib/core-common/src/utils/normalize-stories.ts @@ -9,7 +9,7 @@ import { normalizeStoryPath } from './paths'; import { globToRegexp } from './glob-to-regexp'; const DEFAULT_TITLE_PREFIX = ''; -const DEFAULT_FILES = '**/*.@(mdx|stories.@(js|jsx|mjs|ts|tsx))'; +const DEFAULT_FILES_PATTERN = '**/*.@(mdx|stories.@(js|jsx|mjs|ts|tsx))'; const isDirectory = (configDir: string, entry: string) => { try { @@ -34,7 +34,7 @@ export const getDirectoryFromWorkingDir = ({ export const normalizeStoriesEntry = ( entry: StoriesEntry, - { configDir, workingDir }: NormalizeOptions + { configDir, workingDir, default_files_pattern = DEFAULT_FILES_PATTERN }: NormalizeOptions ): NormalizedStoriesSpecifier => { let specifierWithoutMatcher: Omit; @@ -53,7 +53,7 @@ export const normalizeStoriesEntry = ( specifierWithoutMatcher = { titlePrefix: DEFAULT_TITLE_PREFIX, directory: entry, - files: DEFAULT_FILES, + files: default_files_pattern, }; } else { specifierWithoutMatcher = { @@ -65,7 +65,7 @@ export const normalizeStoriesEntry = ( } else { specifierWithoutMatcher = { titlePrefix: DEFAULT_TITLE_PREFIX, - files: DEFAULT_FILES, + files: default_files_pattern, ...entry, }; } @@ -99,6 +99,7 @@ export const normalizeStoriesEntry = ( interface NormalizeOptions { configDir: string; workingDir: string; + default_files_pattern?: string; } export const normalizeStories = (entries: StoriesEntry[], options: NormalizeOptions) => { diff --git a/code/lib/core-server/src/presets/common-override-preset.ts b/code/lib/core-server/src/presets/common-override-preset.ts index 35913f2265ce..46da6037e3dd 100644 --- a/code/lib/core-server/src/presets/common-override-preset.ts +++ b/code/lib/core-server/src/presets/common-override-preset.ts @@ -31,6 +31,7 @@ export const stories: PresetProperty<'stories', StorybookConfig> = async (entrie normalizeStories(entries, { configDir: options.configDir, workingDir: options.configDir, + default_files_pattern: '**/*.@(stories.@(js|jsx|mjs|ts|tsx))', }).map(async ({ directory, files, titlePrefix }) => { const pattern = join(directory, files); const absolutePattern = isAbsolute(pattern) ? pattern : join(options.configDir, pattern); From 861170e5391dca89cf8abb353eb9e45d7cafbbd0 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 17 Nov 2023 14:50:49 +0100 Subject: [PATCH 3/7] cleanup --- code/lib/core-server/src/presets/common-override-preset.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/code/lib/core-server/src/presets/common-override-preset.ts b/code/lib/core-server/src/presets/common-override-preset.ts index 46da6037e3dd..5e907deca646 100644 --- a/code/lib/core-server/src/presets/common-override-preset.ts +++ b/code/lib/core-server/src/presets/common-override-preset.ts @@ -61,12 +61,10 @@ export const stories: PresetProperty<'stories', StorybookConfig> = async (entrie ...expanded, files: `**/${k}`, })); - console.log({ a: filteredEntries.length, b: expanded.files.length }); acc.push(...items); } else { items = [entries[i]]; } - console.log({ items }); acc.push(...items); return acc; From c643d59abfad4ef43d65d8a082ef7880bb761794 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 17 Nov 2023 15:00:08 +0100 Subject: [PATCH 4/7] fix --- code/lib/core-server/src/presets/common-override-preset.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/code/lib/core-server/src/presets/common-override-preset.ts b/code/lib/core-server/src/presets/common-override-preset.ts index 5e907deca646..0566797e7cf7 100644 --- a/code/lib/core-server/src/presets/common-override-preset.ts +++ b/code/lib/core-server/src/presets/common-override-preset.ts @@ -1,5 +1,4 @@ import type { - NormalizedStoriesSpecifier, Options, PresetProperty, StoriesEntry, From 36d0747f4a6951651ad0f828d2327d657e968cd4 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 17 Nov 2023 15:22:07 +0100 Subject: [PATCH 5/7] ensure the changed default_files_pattern is applied to entries that didn't need filtering --- .../src/presets/common-override-preset.ts | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/code/lib/core-server/src/presets/common-override-preset.ts b/code/lib/core-server/src/presets/common-override-preset.ts index 0566797e7cf7..345dfa106850 100644 --- a/code/lib/core-server/src/presets/common-override-preset.ts +++ b/code/lib/core-server/src/presets/common-override-preset.ts @@ -25,13 +25,14 @@ export const framework: PresetProperty<'framework', StorybookConfig> = async (co export const stories: PresetProperty<'stories', StorybookConfig> = async (entries, options) => { if (options?.build?.test?.disableMDXEntries) { + const list = normalizeStories(entries, { + configDir: options.configDir, + workingDir: options.configDir, + default_files_pattern: '**/*.@(stories.@(js|jsx|mjs|ts|tsx))', + }); const result = ( await Promise.all( - normalizeStories(entries, { - configDir: options.configDir, - workingDir: options.configDir, - default_files_pattern: '**/*.@(stories.@(js|jsx|mjs|ts|tsx))', - }).map(async ({ directory, files, titlePrefix }) => { + list.map(async ({ directory, files, titlePrefix }) => { const pattern = join(directory, files); const absolutePattern = isAbsolute(pattern) ? pattern : join(options.configDir, pattern); const absoluteDirectory = isAbsolute(directory) @@ -62,7 +63,7 @@ export const stories: PresetProperty<'stories', StorybookConfig> = async (entrie })); acc.push(...items); } else { - items = [entries[i]]; + items = [list[i]]; } acc.push(...items); From 07374ccefdc8187b390e371c9983ca49f23415b8 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 17 Nov 2023 15:46:55 +0100 Subject: [PATCH 6/7] disable locally --- code/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/package.json b/code/package.json index d796c99a0741..9c486f75ab69 100644 --- a/code/package.json +++ b/code/package.json @@ -47,7 +47,7 @@ "storybook:blocks:build": "STORYBOOK_BLOCKS_ONLY=true yarn storybook:ui:build", "storybook:blocks:chromatic": "STORYBOOK_BLOCKS_ONLY=true yarn storybook:ui:chromatic --project-token=${CHROMATIC_TOKEN_STORYBOOK_BLOCKS:-MISSING_PROJECT_TOKEN}", "storybook:ui": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js dev --port 6006 --config-dir ./ui/.storybook", - "storybook:ui:build": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js build --config-dir ./ui/.storybook --test", + "storybook:ui:build": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js build --config-dir ./ui/.storybook", "storybook:ui:chromatic": "yarn chromatic --build-script-name storybook:ui:build --storybook-config-dir ./ui/.storybook --storybook-base-dir ./code --project-token=${CHROMATIC_TOKEN_STORYBOOK_UI:-MISSING_PROJECT_TOKEN} --only-changed --exit-zero-on-changes --exit-once-uploaded", "task": "yarn --cwd ../scripts task", "test": "NODE_OPTIONS=--max_old_space_size=4096 jest --config ./jest.config.js", From ddbb446dec65fa92ba836360a4708a01da412cc1 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 17 Nov 2023 16:28:23 +0100 Subject: [PATCH 7/7] simpler code --- .../lib/core-server/src/presets/common-override-preset.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/code/lib/core-server/src/presets/common-override-preset.ts b/code/lib/core-server/src/presets/common-override-preset.ts index 345dfa106850..d92dead5d8f4 100644 --- a/code/lib/core-server/src/presets/common-override-preset.ts +++ b/code/lib/core-server/src/presets/common-override-preset.ts @@ -51,7 +51,7 @@ export const stories: PresetProperty<'stories', StorybookConfig> = async (entrie }; }) ) - ).reduce((acc, expanded, i) => { + ).flatMap((expanded, i) => { const filteredEntries = expanded.files.filter((s) => !s.endsWith('.mdx')); // only return the filtered entries when there is something to filter // as webpack is faster with unexpanded globs @@ -61,14 +61,12 @@ export const stories: PresetProperty<'stories', StorybookConfig> = async (entrie ...expanded, files: `**/${k}`, })); - acc.push(...items); } else { items = [list[i]]; } - acc.push(...items); - return acc; - }, []); + return items; + }); return result; } return entries;