Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(storybook): fix the options for the builders #14279

Merged
merged 1 commit into from
Jan 12, 2023
Merged

feat(storybook): fix the options for the builders #14279

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 28 additions & 5 deletions docs/generated/packages/storybook/executors/build.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,9 @@
"default": "@storybook/react",
"hidden": true
},
"outputPath": {
"outputDir": {
"type": "string",
"description": "The output path of the generated files.",
"description": "Directory where to store built files.",
"x-completion-type": "directory"
},
"styles": {
Expand Down Expand Up @@ -93,17 +93,39 @@
"description": "Path to storybook `preview.js` file."
},
"srcRoot": { "type": "string", "description": "Project source path." }
}
},
"x-deprecated": "Prefer to use configDir to set the Storybook configuration directory."
},
"docsMode": {
"type": "boolean",
"description": "Build a documentation-only site using addon-docs.",
"default": false
},
"staticDir": {
"type": "array",
"description": "Directory where to load static files from, array of strings.",
"items": { "type": "string" },
"x-deprecated": "In Storybook 6.4 the `--static-dir` CLI flag has been replaced with the the `staticDirs` field in `.storybook/main.js`. It will be removed completely in Storybook 7.0."
},
"configDir": {
"type": "string",
"description": "Directory where to load Storybook configurations from.",
"x-completion-type": "directory"
},
"loglevel": {
"type": "string",
"description": "Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent].",
"pattern": "(silly|verbose|info|warn|silent)"
},
"quiet": {
"type": "boolean",
"description": "Suppress verbose build output.",
"default": true
"default": false
},
"docs": {
"type": "boolean",
"description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation.",
"default": false
}
},
"definitions": {
Expand Down Expand Up @@ -135,7 +157,8 @@
]
}
},
"required": ["uiFramework", "config"],
"additionalProperties": true,
"required": ["uiFramework", "configDir"],
"examplesFile": "`project.json`:\n\n```json\n//...\n\"ui\": {\n \"targets\": {\n //...\n \"build-storybook\": {\n \"executor\": \"@nrwl/storybook:build\",\n \"outputs\": [\"{options.outputPath}\"],\n \"options\": {\n \"uiFramework\": \"@storybook/react\",\n \"outputPath\": \"dist/storybook/ui\",\n \"config\": {\n \"configFolder\": \"libs/ui/.storybook\"\n }\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n }\n}\n```\n\n```bash\nnx run ui:build-storybook\n```\n\n## Examples\n\n### For non-Angular projects\n\n{% tabs %}\n{% tab label=\"Setting the uiFramework\" %}\n\nYou can change the `uiFramework` option, to correspond to the framework you are using for your project. Supported values are: `\"@storybook/react\"`, `\"@storybook/html\"`, `\"@storybook/web-components\"`, `\"@storybook/vue\"`, `\"@storybook/vue3\"` and `\"@storybook/svelte\"`. If you are using Angular, please check out the Angular-specific Storybook executor.\n\n```json\n\"build-storybook\": {\n \"executor\": \"@nrwl/storybook:build\",\n \"outputs\": [\"{options.outputPath}\"],\n \"options\": {\n \"uiFramework\": \"@storybook/web-components\",\n \"outputPath\": \"dist/storybook/ui\",\n \"config\": {\n \"configFolder\": \"libs/ui/.storybook\"\n }\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n{% tab label=\"Working in docsMode\" %}\n\nYou can work in docs mode, building a documentation-only site, by setting the `docsMode` option to `true` and using the `@storybook/addon-docs` addon.\n\nRead more on the [Storybook documentation page for `addon-docs`](https://storybook.js.org/addons/@storybook/addon-docs).\n\n```json\n\"storybook\": {\n \"executor\": \"@nrwl/storybook:build\",\n \"options\": {\n \"uiFramework\": \"@storybook/react\",\n \"port\": 4400,\n \"config\": {\n \"configFolder\": \"libs/ui/.storybook\"\n },\n \"docsMode\": true\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n\n### For Angular projects\n\n{% tabs %}\n{% tab label=\"Default configuration\" %}\n\nThis is the default configuration for Angular projects using Storybook. You can see that it uses the native `@storybook/angular:build-storybook` executor. You can read more about the configuration options at the relevant [Storybook documentation page](https://storybook.js.org/docs/angular/get-started/install).\n\n```json\n\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n{% tab label=\"Changing the browserTarget\" %}\n\nYou can set the [`browserTarget`](/packages/storybook/documents/angular-browser-target) to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target.\n\n```json\n\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build-storybook\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% tab label=\"Adding styles\" %}\n\nYou can add paths to stylesheets to be included in the Storybook build by using the `styles` array. You can also add `stylePreprocessorOptions`, much like you would do in the Angular builder. You can read more in our guide about [styles and preprocessor options for Storybook](/packages/storybook/documents/angular-configuring-styles).\n\n```json\n\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build-storybook\",\n \"compodoc\": false,\n \"styles\": [\"some-styles.css\"],\n \"stylePreprocessorOptions\": {\n \"includePaths\": [\"some-style-paths\"]\n }\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n"
},
"description": "Build Storybook.",
Expand Down
58 changes: 36 additions & 22 deletions docs/generated/packages/storybook/executors/storybook.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,34 +34,51 @@
"description": "Port to listen on.",
"default": 9009
},
"previewUrl": { "type": "string", "description": "Preview URL." },
"host": {
"type": "string",
"description": "Host to listen on.",
"default": "localhost"
},
"staticDir": {
"type": "array",
"description": "Directory where to load static files from, array of strings.",
"items": { "type": "string" },
"x-deprecated": "In Storybook 6.4 the `--static-dir` CLI flag has been replaced with the the `staticDirs` field in `.storybook/main.js`. It will be removed completely in Storybook 7.0."
},
"configDir": {
"type": "string",
"description": "Directory where to load Storybook configurations from.",
"x-completion-type": "directory"
},
"https": {
"type": "boolean",
"description": "Serve using HTTPS.",
"description": "Serve Storybook over HTTPS. Note: You must provide your own certificate information.",
"default": false
},
"sslKey": {
"type": "string",
"description": "SSL key to use for serving HTTPS."
"open": {
"type": "boolean",
"description": "Open browser window automatically."
},
"sslCert": {
"ci": {
"type": "boolean",
"description": "CI mode (skip interactive prompts, don't open browser).",
"default": false
},
"loglevel": {
"type": "string",
"description": "SSL certificate to use for serving HTTPS."
"description": "Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent].",
"pattern": "(silly|verbose|info|warn|silent)"
},
"watch": {
"quiet": {
"type": "boolean",
"description": "Watches for changes and rebuilds application.",
"default": true
"description": "Suppress verbose build output.",
"default": false
},
"staticDir": {
"type": "array",
"description": "Directory where to load static files from, array of strings.",
"items": { "type": "string" },
"x-deprecated": "In Storybook 6.4 the `--static-dir` CLI flag has been replaced with the the `staticDirs` field in `.storybook/main.js`. It will be removed completely in Storybook 7.0."
"docs": {
"type": "boolean",
"description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation.",
"default": false
},
"config": {
"type": "object",
Expand All @@ -84,21 +101,18 @@
"description": "Path to storybook .babelrc file."
},
"srcRoot": { "type": "string", "description": "Project source path." }
}
},
"x-deprecated": "Prefer to use configDir to set the Storybook configuration directory."
},
"docsMode": {
"type": "boolean",
"description": "Build a documentation-only site using addon-docs.",
"description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation.",
"default": false
},
"quiet": {
"type": "boolean",
"description": "Suppress verbose build output.",
"default": true
}
},
"additionalProperties": true,
"definitions": {},
"required": ["uiFramework", "config"],
"required": ["uiFramework", "configDir"],
"examplesFile": "`project.json`:\n\n```json\n//...\n\"ui\": {\n \"targets\": {\n //...\n \"storybook\": {\n \"executor\": \"@nrwl/storybook:storybook\",\n \"options\": {\n \"uiFramework\": \"@storybook/react\",\n \"port\": 4400,\n \"config\": {\n \"configFolder\": \"libs/ui/.storybook\"\n }\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n },\n }\n}\n```\n\n```bash\nnx run ui:storybook\n```\n\n## Examples\n\n### For non-Angular projects\n\n{% tabs %}\n{% tab label=\"Setting the uiFramework\" %}\n\nYou can change the `uiFramework` option, to correspond to the framework you are using for your project. Supported values are: `\"@storybook/react\"`, `\"@storybook/html\"`, `\"@storybook/web-components\"`, `\"@storybook/vue\"`, `\"@storybook/vue3\"` and `\"@storybook/svelte\"`. If you are using Angular, please check out the Angular-specific Storybook executor.\n\n```json\n\"storybook\": {\n \"executor\": \"@nrwl/storybook:storybook\",\n \"options\": {\n \"uiFramework\": \"@storybook/web-components\",\n \"port\": 4400,\n \"config\": {\n \"configFolder\": \"libs/ui/.storybook\"\n }\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n{% tab label=\"Working in docsMode\" %}\n\nYou can work in docs mode, building a documentation-only site, by setting the `docsMode` option to `true` and using the `@storybook/addon-docs` addon.\n\nRead more on the [Storybook documentation page for `addon-docs`](https://storybook.js.org/addons/@storybook/addon-docs).\n\n```json\n\"storybook\": {\n \"executor\": \"@nrwl/storybook:storybook\",\n \"options\": {\n \"uiFramework\": \"@storybook/react\",\n \"port\": 4400,\n \"config\": {\n \"configFolder\": \"libs/ui/.storybook\"\n },\n \"docsMode\": true\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n\n### For Angular projects\n\n{% tabs %}\n{% tab label=\"Default configuration\" %}\n\nThis is the default configuration for Angular projects using Storybook. You can see that it uses the native `@storybook/angular:start-storybook` executor. You can read more about the configuration options at the relevant [Storybook documentation page](https://storybook.js.org/docs/angular/get-started/install).\n\n```json\n\"storybook\": {\n \"executor\": \"@storybook/angular:start-storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n},\n```\n\n{% /tab %}\n{% tab label=\"Changing the browserTarget\" %}\n\nYou can set the [`browserTarget`](/packages/storybook/documents/angular-browser-target) to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target.\n\n```json\n\"storybook\": {\n \"executor\": \"@storybook/angular:start-storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build-storybook\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n},\n```\n\n{% /tab %}\n\n{% tab label=\"Adding styles\" %}\n\nYou can add paths to stylesheets to be included in the Storybook build by using the `styles` array. You can also add `stylePreprocessorOptions`, much like you would do in the Angular builder. You can read more in our guide about [styles and preprocessor options for Storybook](/packages/storybook/documents/angular-configuring-styles).\n\n```json\n\"storybook\": {\n \"executor\": \"@storybook/angular:start-storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build\",\n \"compodoc\": false,\n \"styles\": [\"some-styles.css\"],\n \"stylePreprocessorOptions\": {\n \"includePaths\": [\"some-style-paths\"]\n }\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n},\n```\n\n{% /tab %}\n\n{% /tabs %}\n"
},
"description": "Serve Storybook.",
Expand Down
55 changes: 25 additions & 30 deletions packages/angular/src/migrations/update-12-3-0/update-storybook.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {
import { lt } from 'semver';
import { join } from 'path';
import { forEachExecutorOptions } from '@nrwl/workspace/src/utilities/executor-options-utils';
import type { StorybookExecutorOptions } from '@nrwl/storybook/src/executors/storybook/storybook.impl';

export default async function (tree: Tree) {
let storybookVersion;
Expand All @@ -33,40 +32,36 @@ export default async function (tree: Tree) {
}

let updated;
forEachExecutorOptions<StorybookExecutorOptions>(
tree,
'@nrwl/storybook:storybook',
(options) => {
if (options.uiFramework !== '@storybook/angular') {
return;
}
forEachExecutorOptions(tree, '@nrwl/storybook:storybook', (options) => {
if (options['uiFramework'] !== '@storybook/angular') {
return;
}

const configFolder = options?.config?.configFolder;
const configFolder = options?.['config']?.configFolder;

if (!configFolder) {
return;
}
if (!configFolder) {
return;
}

const configPath = join(configFolder, 'main.js');
const configPath = join(configFolder, 'main.js');

if (!tree.exists(configPath)) {
logger.warn(
`Could not migrate ${configPath} to use webpack 5. The config.core.builder should be set to "webpack5". See https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324#upgrade`
);
return;
}

updated = true;
const originalContents = tree.read(configPath).toString();
const configureWebpack5 = `module.exports.core = { ...module.exports.core, builder: 'webpack5' };`;
try {
const config = require(join(tree.root, configPath));
if (config?.core?.builder !== 'webpack5') {
tree.write(configPath, originalContents + '\n' + configureWebpack5);
}
} catch {}
if (!tree.exists(configPath)) {
logger.warn(
`Could not migrate ${configPath} to use webpack 5. The config.core.builder should be set to "webpack5". See https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324#upgrade`
);
return;
}
);

updated = true;
const originalContents = tree.read(configPath).toString();
const configureWebpack5 = `module.exports.core = { ...module.exports.core, builder: 'webpack5' };`;
try {
const config = require(join(tree.root, configPath));
if (config?.core?.builder !== 'webpack5') {
tree.write(configPath, originalContents + '\n' + configureWebpack5);
}
} catch {}
});

const installTask = updated
? addDependenciesToPackageJson(
Expand Down
6 changes: 6 additions & 0 deletions packages/storybook/migrations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,12 @@
"version": "15.0.0-beta.0",
"description": "Stop hashing storybook config files and story files for build targets and dependent tasks",
"factory": "./src/migrations/update-15-0-0/add-storybook-inputs"
},
"update-15.5.0": {
"cli": "nx",
"version": "15.5.0-beta.0",
"description": "Refactor the Storybook target options",
"factory": "./src/migrations/update-15-5-0/refactor-executor-options"
}
},
"packageJsonUpdates": {
Expand Down
Loading