Skip to content

Commit

Permalink
docs(misc): add x-priority flag for generators and executors (#14336)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mandarini
mandarini authored Jan 13, 2023
1 parent 46b10c2 commit abfa864
Show file tree
Hide file tree
Showing 22 changed files with 127 additions and 178 deletions.
15 changes: 10 additions & 5 deletions docs/generated/packages/angular/generators/storybook-configuration.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,25 +15,29 @@
"description": "Project for which to generate Storybook configuration.",
"$default": { "$source": "argv", "index": 0 },
"x-prompt": "For which project do you want to generate Storybook configuration?",
"x-dropdown": "projects"
"x-dropdown": "projects",
"x-priority": "important"
},
"configureCypress": {
"type": "boolean",
"description": "Specifies whether to configure Cypress or not.",
"x-prompt": "Configure a Cypress e2e app to run against the storybook instance?",
"default": true
"default": true,
"x-priority": "important"
},
"generateStories": {
"type": "boolean",
"description": "Specifies whether to automatically generate `*.stories.ts` files for components declared in this project or not.",
"x-prompt": "Automatically generate *.stories.ts files for components declared in this project?",
"default": true
"default": true,
"x-priority": "important"
},
"generateCypressSpecs": {
"type": "boolean",
"description": "Specifies whether to automatically generate test files in the generated Cypress e2e app.",
"x-prompt": "Automatically generate test files in the generated Cypress e2e app?",
"default": true
"default": true,
"x-priority": "important"
},
"cypressDirectory": {
"type": "string",
Expand All @@ -48,7 +52,8 @@
"tsConfiguration": {
"type": "boolean",
"description": "Configure your project with TypeScript. Generate main.ts and preview.ts files, instead of main.js and preview.js.",
"default": false
"default": false,
"x-priority": "important"
},
"skipFormat": {
"description": "Skip formatting files.",
Expand Down
15 changes: 10 additions & 5 deletions docs/generated/packages/react/generators/storybook-configuration.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,25 +15,29 @@
"description": "Project for which to generate Storybook configuration.",
"$default": { "$source": "argv", "index": 0 },
"x-prompt": "For which project do you want to generate Storybook configuration?",
"x-dropdown": "projects"
"x-dropdown": "projects",
"x-priority": "important"
},
"configureCypress": {
"type": "boolean",
"description": "Run the cypress-configure generator.",
"x-prompt": "Configure a cypress e2e app to run against the storybook instance?",
"default": true
"default": true,
"x-priority": "important"
},
"generateStories": {
"type": "boolean",
"description": "Automatically generate `*.stories.ts` files for components declared in this project?",
"x-prompt": "Automatically generate *.stories.ts files for components declared in this project?",
"default": true
"default": true,
"x-priority": "important"
},
"generateCypressSpecs": {
"type": "boolean",
"description": "Automatically generate test files in the Cypress E2E app generated by the `cypress-configure` generator.",
"x-prompt": "Automatically generate test files in the Cypress E2E app generated by the cypress-configure generator?",
"default": true
"default": true,
"x-priority": "important"
},
"cypressDirectory": {
"type": "string",
Expand Down Expand Up @@ -77,7 +81,8 @@
},
"bundler": {
"description": "The Storybook builder to use.",
"enum": ["vite", "webpack"]
"enum": ["vite", "webpack"],
"x-priority": "important"
}
},
"required": ["name"],
Expand Down
29 changes: 5 additions & 24 deletions docs/generated/packages/storybook/executors/build.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"presets": [
{
"name": "Default minimum setup",
"keys": ["uiFramework", "outputPath", "config"]
"keys": ["uiFramework", "outputDir", "configDir"]
}
],
"properties": {
Expand All @@ -27,7 +27,7 @@
"@storybook/svelte"
],
"default": "@storybook/react",
"hidden": true
"x-priority": "important"
},
"outputDir": {
"type": "string",
Expand Down Expand Up @@ -76,26 +76,6 @@
}
}
},
"config": {
"type": "object",
"description": "`.storybook` file configuration",
"properties": {
"configFolder": {
"type": "string",
"description": "Directory where to load Storybook configurations from."
},
"pluginPath": {
"type": "string",
"description": "Path to storybook `plugin.js` file."
},
"configPath": {
"type": "string",
"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.",
Expand All @@ -110,7 +90,8 @@
"configDir": {
"type": "string",
"description": "Directory where to load Storybook configurations from.",
"x-completion-type": "directory"
"x-completion-type": "directory",
"x-priority": "important"
},
"loglevel": {
"type": "string",
Expand Down Expand Up @@ -159,7 +140,7 @@
},
"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"
"examplesFile": "`project.json`:\n\n```json\n//...\n\"ui\": {\n \"targets\": {\n //...\n \"build-storybook\": {\n \"executor\": \"@nrwl/storybook:build\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"uiFramework\": \"@storybook/react\",\n \"outputDir\": \"dist/storybook/ui\",\n \"configDir\": \"libs/ui/.storybook\"\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.outputDir}\"],\n \"options\": {\n \"uiFramework\": \"@storybook/web-components\",\n \"outputDir\": \"dist/storybook/ui\",\n \"configDir\": \"libs/ui/.storybook\"\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 \"configDir\": \"libs/ui/.storybook\",\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.",
"aliases": [],
Expand Down
Loading

0 comments on commit abfa864

Please sign in to comment.