From aedcb58d535a4bba5f1ba6632d3034f5bbc7a235 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20DUNGLER?= Date: Sun, 15 Nov 2020 22:31:47 +0100 Subject: [PATCH 001/122] Args: Add capacity to sort ArgsTable --- .../src/blocks/ArgsTable/ArgsTable.tsx | 53 +++++++++++++++++-- 1 file changed, 50 insertions(+), 3 deletions(-) diff --git a/lib/components/src/blocks/ArgsTable/ArgsTable.tsx b/lib/components/src/blocks/ArgsTable/ArgsTable.tsx index 98c1fcad9f71..36a0052c13ce 100644 --- a/lib/components/src/blocks/ArgsTable/ArgsTable.tsx +++ b/lib/components/src/blocks/ArgsTable/ArgsTable.tsx @@ -226,6 +226,8 @@ export enum ArgsTableError { ARGS_UNSUPPORTED = 'Args unsupported. See Args documentation for your framework.', } +type SortType = 'ascending' | 'descending' | 'requiredFirst'; + export interface ArgsTableRowProps { rows: ArgTypes; args?: Args; @@ -234,6 +236,7 @@ export interface ArgsTableRowProps { compact?: boolean; inAddonPanel?: boolean; initialExpandedArgs?: boolean; + sort?: SortType; } export interface ArgsTableErrorProps { @@ -254,7 +257,7 @@ type Sections = { sections: Record; }; -const groupRows = (rows: ArgType) => { +const groupRows = (rows: ArgType, sort: SortType) => { const sections: Sections = { ungrouped: [], ungroupedSubsections: {}, sections: {} }; if (!rows) return sections; @@ -278,7 +281,47 @@ const groupRows = (rows: ArgType) => { sections.ungrouped.push({ key, ...row }); } }); - return sections; + + // apply sort + const sortFn = (a: ArgType, b: ArgType) => { + const sortFns: Record number> = { + ascending: () => a.name.localeCompare(b.name), + descending: () => b.name.localeCompare(a.name), + requiredFirst: () => { + return ( + Number(!!b.type?.required) - Number(!!a.type?.required) || a.name.localeCompare(b.name) + ); + }, + }; + return sortFns[sort](); + }; + + const sortSubsection = (record: Record) => { + return Object.keys(record).reduce>( + (acc, cur) => ({ + ...acc, + [cur]: record[cur].sort(sortFn), + }), + {} + ); + }; + + const sorted = { + ungrouped: sections.ungrouped.sort(sortFn), + ungroupedSubsections: sortSubsection(sections.ungroupedSubsections), + sections: Object.keys(sections.sections).reduce>( + (acc, cur) => ({ + ...acc, + [cur]: { + ungrouped: sections.sections[cur].ungrouped.sort(sortFn), + subsections: sortSubsection(sections.sections[cur].subsections), + }, + }), + {} + ), + }; + + return sorted; }; /** @@ -306,9 +349,13 @@ export const ArgsTable: FC = (props) => { compact, inAddonPanel, initialExpandedArgs, + sort = 'ascending', } = props as ArgsTableRowProps; - const groups = groupRows(pickBy(rows, (row) => !row?.table?.disable)); + const groups = groupRows( + pickBy(rows, (row) => !row?.table?.disable), + sort + ); if ( groups.ungrouped.length === 0 && From f9d1223718e4ced5fe248a3ea0b7d8916d84eb4e Mon Sep 17 00:00:00 2001 From: Philippe Sawicki Date: Wed, 9 Dec 2020 10:15:14 -0500 Subject: [PATCH 002/122] Provide more precise usage of `npm sb extract` --- docs/workflows/storybook-composition.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/workflows/storybook-composition.md b/docs/workflows/storybook-composition.md index 67864886bf02..632c23f53bb3 100644 --- a/docs/workflows/storybook-composition.md +++ b/docs/workflows/storybook-composition.md @@ -67,10 +67,10 @@ Once you add a reference to a Storybook deployed using this method, almost immed If required, you can also add additional arguments to this command. You can use the following to generate the `stories.json` file to a custom directory: ```shell -npx sb extract my-built-storybook-directory my-other-directory +npx sb extract my-built-storybook-directory my-other-directory/stories.json ``` -Once the command executes it will look for a built Storybook in the `my-built-storybook-directory` and create the file in `my-other-directory`. +Once the command executes it will look for a built Storybook in the `my-built-storybook-directory` and create the `stories.json` file in `my-other-directory`.
@@ -79,4 +79,4 @@ If you need to use arguments, you'll need to use both of them, or the command wi
- \ No newline at end of file + From 47e2962e27122dea6ffdd92203d3a863c91105e3 Mon Sep 17 00:00:00 2001 From: Philippe Sawicki Date: Wed, 9 Dec 2020 10:18:13 -0500 Subject: [PATCH 003/122] Remove extraneous line endings --- docs/workflows/storybook-composition.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/docs/workflows/storybook-composition.md b/docs/workflows/storybook-composition.md index 632c23f53bb3..b7dadd3fb5c8 100644 --- a/docs/workflows/storybook-composition.md +++ b/docs/workflows/storybook-composition.md @@ -77,6 +77,3 @@ Once the command executes it will look for a built Storybook in the `my-built-st If you need to use arguments, you'll need to use both of them, or the command will not be executed properly. - - - From 2279a7933ccf39e702565462b05ca81e7a4fac65 Mon Sep 17 00:00:00 2001 From: Oscar Dominguez Date: Fri, 26 Feb 2021 16:54:40 +0100 Subject: [PATCH 004/122] fix(standalone): do not allow root directory as static dir --- lib/core-server/src/build-static.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/lib/core-server/src/build-static.ts b/lib/core-server/src/build-static.ts index cb43a3061b0e..96ecf5647401 100644 --- a/lib/core-server/src/build-static.ts +++ b/lib/core-server/src/build-static.ts @@ -29,6 +29,10 @@ export async function buildStaticStandalone(options: CLIOptions & LoadOptions & throw new Error("Won't remove current directory. Check your outputDir!"); } + if (options.staticDir?.includes('/')) { + throw new Error("Won't copy root directory. Check your staticDirs!"); + } + options.outputDir = path.isAbsolute(options.outputDir) ? options.outputDir : path.join(process.cwd(), options.outputDir); From a5ebfc2bc800cac15968d7cab75fc80af0d88c8f Mon Sep 17 00:00:00 2001 From: Oscar Dominguez Date: Fri, 26 Feb 2021 16:55:21 +0100 Subject: [PATCH 005/122] test(standalone): add test coverage to assure root dir for staticDir throws --- lib/core-server/src/core-presets.test.ts | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/lib/core-server/src/core-presets.test.ts b/lib/core-server/src/core-presets.test.ts index 6dcdd62557d6..276440613176 100644 --- a/lib/core-server/src/core-presets.test.ts +++ b/lib/core-server/src/core-presets.test.ts @@ -203,4 +203,21 @@ describe('dev cli flags', () => { ); }); }); + + describe('Invalid staticDir must throw: root directory /', () => { + const optionsWithInvalidStaticDir = { + ...cliOptions, + staticDir: ['/'], + }; + beforeEach(() => { + jest.clearAllMocks(); + cache.clear(); + }); + it('production mode', async () => { + expect.assertions(1); + await expect(buildStaticStandalone(optionsWithInvalidStaticDir)).rejects.toThrow( + "Won't copy root directory. Check your staticDirs!" + ); + }); + }); }); From ea8e9d64ad04a890cc6240baca6863b9e751d927 Mon Sep 17 00:00:00 2001 From: j3rem1e Date: Sun, 7 Mar 2021 14:32:55 +0100 Subject: [PATCH 006/122] Improve sb init for svelte --- lib/cli/src/generators/SVELTE/index.ts | 40 +++++++++++++++++++++++++- 1 file changed, 39 insertions(+), 1 deletion(-) diff --git a/lib/cli/src/generators/SVELTE/index.ts b/lib/cli/src/generators/SVELTE/index.ts index e30d7875c9ba..d84b031f8b3b 100644 --- a/lib/cli/src/generators/SVELTE/index.ts +++ b/lib/cli/src/generators/SVELTE/index.ts @@ -1,9 +1,47 @@ +import fse from 'fs-extra'; +import { logger } from '@storybook/node-logger'; + import { baseGenerator, Generator } from '../baseGenerator'; const generator: Generator = async (packageManager, npmOptions, options) => { - baseGenerator(packageManager, npmOptions, options, 'svelte', { + await baseGenerator(packageManager, npmOptions, options, 'svelte', { extraPackages: ['svelte', 'svelte-loader'], + extraAddons: ['@storybook/addon-svelte-csf'], }); + + let conf = fse.readFileSync('./.storybook/main.js').toString(); + + // add *.stories.svelte + conf = conf.replace(/js\|jsx/g, 'js|jsx|svelte'); + + let requirePreprocessor; + let preprocessStatement = 'undefined'; + + // svelte.config.js ? + if (fse.existsSync('./svelte.config.js')) { + logger.info("Configuring preprocessor from 'svelte.config.js'"); + + requirePreprocessor = `const preprocess = require("../svelte.config.js").preprocess;`; + preprocessStatement = 'preprocess'; + } else { + // svelte-preprocess dependencies ? + const packageJson = packageManager.retrievePackageJson(); + if (packageJson.devDependencies && packageJson.devDependencies['svelte-preprocess']) { + logger.info("Configuring preprocessor with 'svelte-preprocess'"); + + requirePreprocessor = 'const sveltePreprocess = require("svelte-preprocess");'; + preprocessStatement = 'sveltePreprocess()'; + } + } + + const svelteOptions = ` "svelteOptions": {\n preprocess: ${preprocessStatement},\n },`; + + if (requirePreprocessor) { + conf = `${requirePreprocessor}\n\n${conf}`; + } + + conf = conf.replace(/\],/, `],\n${svelteOptions}`); + fse.writeFileSync('./.storybook/main.js', conf); }; export default generator; From c99156419dda4becbb3d57bc66ba157157beb7b3 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Tue, 9 Mar 2021 15:26:53 +0000 Subject: [PATCH 007/122] Updates Angular snippets for 6.2 --- docs/snippets/angular/app-story-with-mock.ts.mdx | 1 - docs/snippets/angular/button-group-story.ts.mdx | 3 ++- .../angular/button-story-default-docs-code.ts.mdx | 8 +++++--- docs/snippets/angular/button-story-using-args.ts.mdx | 4 ++-- .../angular/button-story-with-addon-example.ts.mdx | 1 + docs/snippets/angular/button-story-with-args.ts.mdx | 3 ++- docs/snippets/angular/button-story-with-blue-args.ts.mdx | 2 +- docs/snippets/angular/button-test.ts.mdx | 1 + docs/snippets/angular/list-story-reuse-data.ts.mdx | 1 + docs/snippets/angular/list-story-template.ts.mdx | 2 +- docs/snippets/angular/list-story-unchecked.ts.mdx | 2 +- .../snippets/angular/list-story-with-subcomponents.ts.mdx | 2 +- .../angular/my-component-story-configure-viewports.ts.mdx | 8 ++++---- .../angular/my-component-with-env-variables.ts.mdx | 1 - .../angular/page-story-with-args-composition.ts.mdx | 3 +-- docs/snippets/angular/page-story.ts.mdx | 1 - .../angular/table-story-fully-customize-controls.ts.mdx | 5 ++--- docs/snippets/angular/your-component.ts.mdx | 8 ++++---- 18 files changed, 29 insertions(+), 27 deletions(-) diff --git a/docs/snippets/angular/app-story-with-mock.ts.mdx b/docs/snippets/angular/app-story-with-mock.ts.mdx index 62ebba012397..f08ccb4db776 100644 --- a/docs/snippets/angular/app-story-with-mock.ts.mdx +++ b/docs/snippets/angular/app-story-with-mock.ts.mdx @@ -10,7 +10,6 @@ export default { } as Meta; const Template: Story = (args) => ({ - component: AppComponent, props: args, }); diff --git a/docs/snippets/angular/button-group-story.ts.mdx b/docs/snippets/angular/button-group-story.ts.mdx index 98ad6269cfd8..ddebe9cc562c 100644 --- a/docs/snippets/angular/button-group-story.ts.mdx +++ b/docs/snippets/angular/button-group-story.ts.mdx @@ -8,6 +8,8 @@ import { CommonModule } from '@angular/common'; import ButtonGroup from './ButtonGroup.component'; import Button from './button.component'; + +//πŸ‘‡ Imports the Button stories import * as ButtonStories from './Button.stories'; export default { @@ -22,7 +24,6 @@ export default { } as Meta; const Template: Story = (args) => ({ - component: ButtonGroup, props: args, }); diff --git a/docs/snippets/angular/button-story-default-docs-code.ts.mdx b/docs/snippets/angular/button-story-default-docs-code.ts.mdx index 1183769151d1..b8e9d235ecfc 100644 --- a/docs/snippets/angular/button-story-default-docs-code.ts.mdx +++ b/docs/snippets/angular/button-story-default-docs-code.ts.mdx @@ -8,22 +8,24 @@ import Button from './button.component'; export default { title: 'Button', component: Button, + //πŸ‘‡ Creates specific argTypes argTypes: { backgroundColor: { control: 'color' } } } as Meta; -// some function to demonstrate the behavior +//πŸ‘‡ Some function to demonstrate the behavior const someFunction = (someValue: string) => { return `i am a ${someValue}`; }; export const ExampleStory: Story