Skip to content

Commit

Permalink
feat(storybook): version 7 generators
Browse files Browse the repository at this point in the history
  • Loading branch information
mandarini committed Jan 13, 2023
1 parent abfa864 commit 66106fc
Show file tree
Hide file tree
Showing 42 changed files with 5,282 additions and 238 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,11 @@
"configureTestRunner": {
"type": "boolean",
"description": "Add a Storybook Test-Runner target."
},
"storybook7betaConfiguration": {
"description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.",
"type": "boolean",
"default": false
}
},
"additionalProperties": false,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,12 @@
"description": "The Storybook builder to use.",
"enum": ["vite", "webpack"],
"x-priority": "important"
},
"storybook7betaConfiguration": {
"description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.",
"type": "boolean",
"default": false,
"x-priority": "important"
}
},
"required": ["name"],
Expand Down
30 changes: 29 additions & 1 deletion docs/generated/packages/storybook/generators/configuration.json
Original file line number Diff line number Diff line change
Expand Up @@ -76,10 +76,38 @@
"x-prompt": "Which Storybook builder do you want to use?",
"default": "webpack",
"x-priority": "important"
},
"storybook7betaConfiguration": {
"description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.",
"type": "boolean",
"default": false,
"x-priority": "important"
},
"storybook7UiFramework": {
"type": "string",
"description": "Storybook UI Framework to use.",
"enum": [
"@storybook/angular",
"@storybook/html-webpack5",
"@storybook/nextjs",
"@storybook/preact-webpack5",
"@storybook/react-webpack5",
"@storybook/react-vite",
"@storybook/server-webpack5",
"@storybook/svelte-webpack5",
"@storybook/svelte-vite",
"@storybook/sveltekit",
"@storybook/vue-webpack5",
"@storybook/vue-vite",
"@storybook/vue3-webpack5",
"@storybook/vue3-vite",
"@storybook/web-components-webpack5",
"@storybook/web-components-vite"
]
}
},
"required": ["name"],
"examplesFile": "This is a framework-agnostic generator for setting up Storybook configuration for a project.\n\n```bash\nnx g @nrwl/storybook:configuration\n```\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `name` of the project you want to generate the configuration for.\n- The `uiFramework` you want to use. Supported values are: `\"@storybook/angular\"`, `\"@storybook/react\"`, `\"@storybook/react-native\"`, `\"@storybook/html\"`, `\"@storybook/web-components\"`, `\"@storybook/vue\"`, `\"@storybook/vue3\"` and `\"@storybook/svelte\"`.\n- Whether you want to `configureCypress`. If you choose `yes`, a Cypress e2e app will be created (or configured) to run against the project's Storybook instance.\n- Whether you want to `configureTestRunner`. If you choose `yes`, a `test-storybook` target will be generated in your project's `project.json`, with a command to invoke the [Storybook `test-runner`](https://storybook.js.org/docs/react/writing-tests/test-runner).\n\nYou must provide a `name` and a `uiFramework` for the generator to work.\n\nYou can read more about how this generator works, in the [Storybook package overview page](https://nx.dev/packages/storybook#generating-storybook-configuration).\n\nIf you are using Angular, React, React Native or Next.js in your project, it's best to use the framework specific generator:\n\n- [React Storybook Configuration Generator](/packages/react/generators/storybook-configuration) (React and Next.js projects)\n\n- [Angular Storybook Configuration Generator](/packages/angular/generators/storybook-configuration)\n\n- [React Native Storybook Configuration Generator](/packages/react-native/generators/storybook-configuration)\n\n## Examples\n\n### Generate Storybook configuration using TypeScript\n\n```bash\nnx g @nrwl/storybook:configuration ui --uiFramework=@storybook/web-components --tsConfiguration=true\n```\n\nThis will generate a Storybook configuration for the `ui` project using TypeScript for the Storybook configuration files (the files inside the `.storybook` directory).\n",
"examplesFile": "This is a framework-agnostic generator for setting up Storybook configuration for a project.\n\n```bash\nnx g @nrwl/storybook:configuration\n```\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `name` of the project you want to generate the configuration for.\n- The `uiFramework` you want to use. Supported values are: `\"@storybook/angular\"`, `\"@storybook/react\"`, `\"@storybook/react-native\"`, `\"@storybook/html\"`, `\"@storybook/web-components\"`, `\"@storybook/vue\"`, `\"@storybook/vue3\"` and `\"@storybook/svelte\"`.\n- Whether you want to `configureCypress`. If you choose `yes`, a Cypress e2e app will be created (or configured) to run against the project's Storybook instance.\n- Whether you want to `configureTestRunner`. If you choose `yes`, a `test-storybook` target will be generated in your project's `project.json`, with a command to invoke the [Storybook `test-runner`](https://storybook.js.org/docs/react/writing-tests/test-runner).\n\nYou must provide a `name` and a `uiFramework` for the generator to work.\n\nYou can read more about how this generator works, in the [Storybook package overview page](https://nx.dev/packages/storybook#generating-storybook-configuration).\n\nIf you are using Angular, React, React Native or Next.js in your project, it's best to use the framework specific generator:\n\n- [React Storybook Configuration Generator](/packages/react/generators/storybook-configuration) (React and Next.js projects)\n\n- [Angular Storybook Configuration Generator](/packages/angular/generators/storybook-configuration)\n\n- [React Native Storybook Configuration Generator](/packages/react-native/generators/storybook-configuration)\n\n## Examples\n\n### Generate Storybook configuration using TypeScript\n\n```bash\nnx g @nrwl/storybook:configuration ui --uiFramework=@storybook/web-components --tsConfiguration=true\n```\n\nThis will generate a Storybook configuration for the `ui` project using TypeScript for the Storybook configuration files (the files inside the `.storybook` directory).\n\n### Generate Storybook configuration for Storybook version 7\n\n```bash\nnx g @nrwl/storybook:configuration ui --uiFramework=@storybook/react --storybook7betaConfiguration=true\n```\n\nOR\n\n```bash\nnx g @nrwl/storybook:configuration ui --storybook7UiFramework=@storybook/react-vite --storybook7betaConfiguration=true\n```\n\nThis will generate a Storybook configuration for the `ui` project using Storybook version 7. It will install the Storybook version 7 dependencies and configure the Storybook configuration files (the files inside the `.storybook` directory) to use Storybook version 7.\n",
"presets": []
},
"description": "Add Storybook configuration to a UI library or an application.",
Expand Down
20 changes: 20 additions & 0 deletions docs/generated/packages/storybook/generators/init.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,21 @@
"description": "Storybook UI Framework to use.",
"enum": [
"@storybook/angular",
"@storybook/html-webpack5",
"@storybook/nextjs",
"@storybook/preact-webpack5",
"@storybook/react-webpack5",
"@storybook/react-vite",
"@storybook/server-webpack5",
"@storybook/svelte-webpack5",
"@storybook/svelte-vite",
"@storybook/sveltekit",
"@storybook/vue-webpack5",
"@storybook/vue-vite",
"@storybook/vue3-webpack5",
"@storybook/vue3-vite",
"@storybook/web-components-webpack5",
"@storybook/web-components-vite",
"@storybook/react",
"@storybook/html",
"@storybook/web-components",
Expand All @@ -31,6 +46,11 @@
"x-prompt": "Which bundler do you want to use?",
"default": "webpack",
"x-priority": "important"
},
"storybook7betaConfiguration": {
"description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.",
"type": "boolean",
"default": false
}
},
"presets": []
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,6 @@ export async function generateStorybookConfiguration(
cypressDirectory: options.cypressDirectory,
tsConfiguration: options.tsConfiguration,
configureTestRunner: options.configureTestRunner,
storybook7betaConfiguration: options.storybook7betaConfiguration,
});
}
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,5 @@ export interface StorybookConfigurationOptions {
skipFormat?: boolean;
ignorePaths?: string[];
configureTestRunner?: boolean;
storybook7betaConfiguration?: boolean;
}
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,11 @@
"configureTestRunner": {
"type": "boolean",
"description": "Add a Storybook Test-Runner target."
},
"storybook7betaConfiguration": {
"description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.",
"type": "boolean",
"default": false
}
},
"additionalProperties": false,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,11 @@ export async function storybookConfigurationGenerator(
tsConfiguration: schema.tsConfiguration,
configureTestRunner: schema.configureTestRunner,
bundler,
storybook7betaConfiguration: schema.storybook7betaConfiguration,
storybook7UiFramework:
bundler === 'vite'
? '@storybook/react-vite'
: '@storybook/react-webpack5',
});

if (schema.generateStories) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,5 @@ export interface StorybookConfigureSchema {
ignorePaths?: string[];
bundler?: 'webpack' | 'vite';
configureTestRunner?: boolean;
storybook7betaConfiguration?: boolean;
}
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,12 @@
"description": "The Storybook builder to use.",
"enum": ["vite", "webpack"],
"x-priority": "important"
},
"storybook7betaConfiguration": {
"description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.",
"type": "boolean",
"default": false,
"x-priority": "important"
}
},
"required": ["name"],
Expand Down
14 changes: 14 additions & 0 deletions packages/storybook/docs/configuration-generator-examples.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,3 +32,17 @@ nx g @nrwl/storybook:configuration ui --uiFramework=@storybook/web-components --
```

This will generate a Storybook configuration for the `ui` project using TypeScript for the Storybook configuration files (the files inside the `.storybook` directory).

### Generate Storybook configuration for Storybook version 7

```bash
nx g @nrwl/storybook:configuration ui --uiFramework=@storybook/react --storybook7betaConfiguration=true
```

OR

```bash
nx g @nrwl/storybook:configuration ui --storybook7UiFramework=@storybook/react-vite --storybook7betaConfiguration=true
```

This will generate a Storybook configuration for the `ui` project using Storybook version 7. It will install the Storybook version 7 dependencies and configure the Storybook configuration files (the files inside the `.storybook` directory) to use Storybook version 7.
21 changes: 13 additions & 8 deletions packages/storybook/project.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,43 +11,48 @@
"assets": [
{
"input": "packages/storybook",
"glob": "**/project-files/.storybook/**",
"glob": "**/files/**",
"output": "/"
},
{
"input": "packages/storybook",
"glob": "**/files/**",
"glob": "**/project-files/.storybook/**",
"output": "/"
},
{
"input": "packages/storybook",
"glob": "**/root-files/.storybook/**",
"glob": "**/project-files-7/.storybook/**",
"output": "/"
},
{
"input": "packages/storybook",
"glob": "**/project-files-ts/.storybook/**",
"glob": "**/root-files/.storybook/**",
"output": "/"
},
{
"input": "packages/storybook",
"glob": "**/root-files-ts/.storybook/**",
"glob": "**/project-files-ts/.storybook/**",
"output": "/"
},
{
"input": "packages/storybook",
"glob": "**/root-files-nested/.storybook/**",
"glob": "**/project-files-7-ts/.storybook/**",
"output": "/"
},
{
"input": "packages/storybook",
"glob": "**/root-files-nested-ts/.storybook/**",
"glob": "**/root-files-ts/.storybook/**",
"output": "/"
},
{
"input": "packages/storybook",
"glob": "**/*.json",
"ignore": ["**/tsconfig*.json", "project.json", ".eslintrc.json"],
"ignore": [
"**/tsconfig*.json",
"project.json",
".eslintrc.json",
"**/test-configs/**"
],
"output": "/"
},
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ jest.mock('@storybook/core-server', () => {
});
import * as build from '@storybook/core-server';
import { CLIOptions } from '@storybook/types';
import { CommonNxStorybookConfig } from '../models';
import { CommonNxStorybookConfig } from '../../utils/models';

// TODO (katerina): Update when Storybook 7
// TODO(katerina): Update when Storybook 7
describe('Build storybook', () => {
let context: ExecutorContext;
let options: CLIOptions & CommonNxStorybookConfig;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import { ExecutorContext, logger } from '@nrwl/devkit';
import * as build from '@storybook/core-server';
import { CLIOptions } from '@storybook/types'; // TODO (katerina): Remove when Storybook 7
import { CLIOptions } from '@storybook/types'; // TODO(katerina): Remove when Storybook 7
import 'dotenv/config';
import { storybookConfigExistsCheck } from '../../utils/utilities';
import { CommonNxStorybookConfig } from '../models';
import {
getStorybookFrameworkPath,
isStorybookV7,
runStorybookSetupCheck,
} from '../utils';
storybookConfigExistsCheck,
} from '../../utils/utilities';
import { CommonNxStorybookConfig } from '../../utils/models';
import { getStorybookFrameworkPath, runStorybookSetupCheck } from '../utils';

export default async function buildStorybookExecutor(
options: CLIOptions & CommonNxStorybookConfig,
Expand All @@ -24,7 +23,7 @@ export default async function buildStorybookExecutor(
logger.info(`NX Storybook files available in ${buildOptions.outputDir}`);
return { success: true };
} else {
// TODO (katerina): Remove when Storybook 7
// TODO(katerina): Remove when Storybook 7
// print warnings
runStorybookSetupCheck(options);

Expand Down Expand Up @@ -55,11 +54,11 @@ function runInstance(options: CLIOptions, storybook7: boolean): Promise<void> {
return build['build']({
...options,
mode: 'static',
} as any); // TODO (katerina): Change to actual types when Storybook 7
} as any); // TODO(katerina): Change to actual types when Storybook 7
} else {
return build.buildStaticStandalone({
...options,
ci: true,
} as any); // TODO (katerina): Remove when Storybook 7
} as any); // TODO(katerina): Remove when Storybook 7
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ import storybookExecutor from './storybook.impl';
import { join } from 'path';
import { readFileSync } from 'fs-extra';
import { CLIOptions } from '@storybook/types';
import { CommonNxStorybookConfig } from '../models';
import { CommonNxStorybookConfig } from '../../utils/models';

// TODO (katerina): Update when Storybook 7
// TODO(katerina): Update when Storybook 7

describe('@nrwl/storybook:storybook', () => {
let context: ExecutorContext;
Expand Down
21 changes: 10 additions & 11 deletions packages/storybook/src/executors/storybook/storybook.impl.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import { ExecutorContext } from '@nrwl/devkit';
import * as build from '@storybook/core-server';
import 'dotenv/config';
import { storybookConfigExistsCheck } from '../../utils/utilities';
import {
getStorybookFrameworkPath,
runStorybookSetupCheck,
isStorybookV7,
} from '../utils';
import { CLIOptions } from '@storybook/types'; // TODO (katerina): Remove when Storybook 7
import { CommonNxStorybookConfig } from '../models';
storybookConfigExistsCheck,
} from '../../utils/utilities';
import { getStorybookFrameworkPath, runStorybookSetupCheck } from '../utils';
import { CLIOptions } from '@storybook/types'; // TODO(katerina): Remove when Storybook 7
import { CommonNxStorybookConfig } from '../../utils/models';

export default async function* storybookExecutor(
options: CLIOptions & CommonNxStorybookConfig,
Expand All @@ -28,15 +27,15 @@ export default async function* storybookExecutor(
yield {
success: true,
info: {
port: result.port,
port: result?.port,
baseUrl: `${options.https ? 'https' : 'http'}://${
options.host ?? 'localhost'
}:${result.port}`,
}:${result?.port}`,
},
};
await new Promise<{ success: boolean }>(() => {});
} else {
// TODO (katerina): Remove when Storybook 7
// TODO(katerina): Remove when Storybook 7
// print warnings
runStorybookSetupCheck(options);

Expand All @@ -62,9 +61,9 @@ function runInstance(options: CLIOptions, storybook7: boolean) {
return build['build']({
...options,
mode: 'dev',
} as any); // TODO (katerina): Change to actual types when Storybook 7
} as any); // TODO(katerina): Change to actual types when Storybook 7
} else {
// TODO (katerina): Remove when Storybook 7
// TODO(katerina): Remove when Storybook 7
return build.buildDev({
...options,
configType: env.toUpperCase(),
Expand Down
Loading

0 comments on commit 66106fc

Please sign in to comment.