From 73195d87a21f31d4109f720aa8737f78c7fa85d0 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 4 May 2021 20:49:53 +0800 Subject: [PATCH 1/2] Delete .bettercodehub.yml --- .bettercodehub.yml | 16 ---------------- 1 file changed, 16 deletions(-) delete mode 100644 .bettercodehub.yml diff --git a/.bettercodehub.yml b/.bettercodehub.yml deleted file mode 100644 index 65ad2d8059ef..000000000000 --- a/.bettercodehub.yml +++ /dev/null @@ -1,16 +0,0 @@ -component_depth: 2 -languages: -- javascript - -- name: javascript - production: - exclude: - - .*\.test\.js - - .*\/__test__\/.*\.js - - .*\/__mock__\/.*\.js - - .*\.stories\.js - test: - include: - - .*\.test\.js - - .*\/__test__\/.*\.js - - .*\.storyshot From cff46530c0f4875b50b05432e1df0debbed11eb2 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 4 May 2021 21:13:06 +0800 Subject: [PATCH 2/2] Prefer npx sb init installation --- app/angular/README.md | 2 +- app/aurelia/README.md | 2 +- app/ember/README.md | 6 ++- app/html/README.md | 2 +- app/marionette/README.md | 6 +-- app/marko/README.md | 2 +- app/mithril/README.md | 2 +- app/preact/README.md | 2 +- app/rax/README.md | 2 +- app/react/README.md | 2 +- app/riot/README.md | 2 +- app/server/README.md | 48 ++++++++++--------- app/svelte/README.md | 2 +- app/vue/README.md | 2 +- app/vue3/README.md | 6 ++- app/web-components/README.md | 2 +- docs/addons/writing-addons.md | 2 +- .../installation-command-section/ember.mdx | 4 +- lib/cli/README.md | 8 ++-- 19 files changed, 56 insertions(+), 48 deletions(-) diff --git a/app/angular/README.md b/app/angular/README.md index 9a0ed4814e06..d2ab91fb387f 100644 --- a/app/angular/README.md +++ b/app/angular/README.md @@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi ```sh cd my-angular-app -npx -p @storybook/cli sb init +npx sb init ``` For more information visit: [storybook.js.org](https://storybook.js.org) diff --git a/app/aurelia/README.md b/app/aurelia/README.md index 95b664252cfd..d6acfb43b4ed 100644 --- a/app/aurelia/README.md +++ b/app/aurelia/README.md @@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi ```sh cd my-aurelia-app -npx -p @storybook/cli sb init +npx sb init ``` For more information visit: [storybook.js.org](https://storybook.js.org) diff --git a/app/ember/README.md b/app/ember/README.md index 635ead2f560a..dab5ef611bc1 100644 --- a/app/ember/README.md +++ b/app/ember/README.md @@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi ```sh cd my-ember-app -npx -p @storybook/cli sb init +npx sb init ``` For more information visit: [storybook.js.org](https://storybook.js.org) @@ -29,13 +29,15 @@ You can also build a [static version](https://storybook.js.org/docs/ember/workfl - [Addons](https://storybook.js.org/docs/ember/configure/storybook-addons) ## Working with polyfills + If you need to use a polyfill that is already in use in our Ember application, you will need to add some options to have Storybook working with them. In this example we'll use the [named-block-polyfill](https://github.com/ember-polyfills/ember-named-blocks-polyfill). This example also assume that you already have the package in your `package.json`. -In your `.storybook/main.js` you can add the following lines: +In your `.storybook/main.js` you can add the following lines: + ```javascript const namedBlockPolyfill = require('ember-named-blocks-polyfill/lib/named-blocks-polyfill-plugin'); diff --git a/app/html/README.md b/app/html/README.md index 8c3880dbfc6a..ca8330847ce7 100644 --- a/app/html/README.md +++ b/app/html/README.md @@ -14,7 +14,7 @@ So you can develop UI components in isolation without worrying about app specifi ```sh cd my-app -npx -p @storybook/cli sb init -t html +npx sb init -t html ``` For more information visit: [storybook.js.org](https://storybook.js.org) diff --git a/app/marionette/README.md b/app/marionette/README.md index 588aef1c0491..c4205d04e0e9 100644 --- a/app/marionette/README.md +++ b/app/marionette/README.md @@ -1,4 +1,4 @@ -# Storybook for Marionette.js +# Storybook for Marionette.js --- @@ -14,7 +14,7 @@ So you can develop UI components in isolation without worrying about app specifi ```sh cd my-app -npx -p @storybook/cli sb init +npx sb init ``` For more information visit: [storybook.js.org](https://storybook.js.org) @@ -22,4 +22,4 @@ For more information visit: [storybook.js.org](https://storybook.js.org) --- Storybook also comes with a lot of [addons](https://storybook.js.org/docs/marionette/configure/storybook-addons) and a great API to customize as you wish. -You can also build a [static version](https://storybook.js.org/docs/marionette/workflows/publish-storybook) of your storybook and deploy it anywhere you want. \ No newline at end of file +You can also build a [static version](https://storybook.js.org/docs/marionette/workflows/publish-storybook) of your storybook and deploy it anywhere you want. diff --git a/app/marko/README.md b/app/marko/README.md index 9e6f6a30afdc..1864e61a2cf7 100644 --- a/app/marko/README.md +++ b/app/marko/README.md @@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi ```sh cd my-marko-app -npx -p @storybook/cli sb init +npx sb init ``` For more information visit: [storybook.js.org](https://storybook.js.org) diff --git a/app/mithril/README.md b/app/mithril/README.md index cd088b8ec8ef..50187694a07a 100644 --- a/app/mithril/README.md +++ b/app/mithril/README.md @@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi ```sh cd my-mithril-app -npx -p @storybook/cli sb init +npx sb init ``` For more information visit: [storybook.js.org](https://storybook.js.org) diff --git a/app/preact/README.md b/app/preact/README.md index 601a07a3fb54..26cb3437906c 100644 --- a/app/preact/README.md +++ b/app/preact/README.md @@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi ```sh cd my-preact-app -npx -p @storybook/cli sb init +npx sb init ``` For more information visit: [storybook.js.org](https://storybook.js.org) diff --git a/app/rax/README.md b/app/rax/README.md index 137faed65c72..beb49c118a19 100644 --- a/app/rax/README.md +++ b/app/rax/README.md @@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi ```sh cd my-rax-app -npx -p @storybook/cli sb init +npx sb init ``` For more information visit: [storybook.js.org](https://storybook.js.org) diff --git a/app/react/README.md b/app/react/README.md index 0a8e9e74e00b..d81d363f40b7 100644 --- a/app/react/README.md +++ b/app/react/README.md @@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi ```sh cd my-react-app -npx -p @storybook/cli sb init +npx sb init ``` For more information visit: [storybook.js.org](https://storybook.js.org) diff --git a/app/riot/README.md b/app/riot/README.md index 3dbc9197222d..771ae289c5b8 100644 --- a/app/riot/README.md +++ b/app/riot/README.md @@ -14,7 +14,7 @@ So you can develop UI components in isolation without worrying about app specifi ```sh cd my-riot-app -npx -p @storybook/cli sb init +npx sb init ``` For more information visit: [storybook.js.org](https://storybook.js.org) diff --git a/app/server/README.md b/app/server/README.md index 0a315dc86e90..65e64d4ee386 100644 --- a/app/server/README.md +++ b/app/server/README.md @@ -14,7 +14,7 @@ So you can develop UI components in isolation without worrying about app specifi ```sh cd my-app -npx -p @storybook/cli sb init -t server +npx sb init -t server ``` To configure the server that Storybook will connect to, export a global parameter `parameters.server.url` in `.storybook/preview.js`: @@ -70,16 +70,16 @@ export default { parameters: { options: { component: 'my_widget', - } - } + }, + }, }; export const Default = (args) => {}; Default.storyName = 'Default'; Default.parameters = { server: { - id: 'path/of/your/story"' - } + id: 'path/of/your/story"', + }, }; ``` @@ -110,7 +110,7 @@ Static parameters can be defined using the `params` story parameter. For example { "name": "Red", "parameters": { - "server": { + "server": { "id": "button", "params": { "color": "red", "label": "Stop" } } @@ -119,7 +119,7 @@ Static parameters can be defined using the `params` story parameter. For example { "name": "Green", "parameters": { - "server": { + "server": { "id": "button", "params": { "color": "green", "label": "OK" } } @@ -137,7 +137,7 @@ Like all story parameters server params can be defined in the default export and { "title": "Buttons", "parameters": { - "server": { + "server": { "params": { "color": "red" } } }, @@ -145,7 +145,7 @@ Like all story parameters server params can be defined in the default export and { "name": "Default", "parameters": { - "server": { + "server": { "id": "button", "params": { "label": "Stop" } } @@ -154,7 +154,7 @@ Like all story parameters server params can be defined in the default export and { "name": "Green", "parameters": { - "server": { + "server": { "id": "button", "params": { "color": "green", "label": "OK" } } @@ -175,7 +175,7 @@ Dynamic parameters can be defined using args and the Controls addon { "name": "Red", "parameters": { - "server": { + "server": { "id": "button" } }, @@ -184,7 +184,7 @@ Dynamic parameters can be defined using args and the Controls addon { "name": "Green", "parameters": { - "server": { + "server": { "id": "button" } }, @@ -208,7 +208,7 @@ Just like CSF stories we can define `argTypes` to specify the controls used in t { "name": "Red", "parameters": { - "server": { + "server": { "id": "button" } }, @@ -217,7 +217,7 @@ Just like CSF stories we can define `argTypes` to specify the controls used in t { "name": "Green", "parameters": { - "server": { + "server": { "id": "button" } }, @@ -248,7 +248,7 @@ To configure controls, simple add `args` and `argTypes` keys to the story JSON m }, "args": { "button_text": "Push Me", "color": "red" }, "argTypes": { "button_text": { "control": { "type": "color" } } } - }, + } ] } ``` @@ -282,7 +282,6 @@ To use actions, use the `parameters.actions.handles` parameter: For control over how `@storybook/server` fetches Html from the server you can provide a `fetchStoryHtml` function as a parameter. You would typically set this in `.storybook/preview.js` but it's just a regular Storybook parameter so could be overridden at the stories or story level. - ```javascript // .storybook/preview.js @@ -295,7 +294,7 @@ const fetchStoryHtml = async (url, path, params, context) => { export const parameters = { server: { url: `http://localhost:${port}/storybook_preview`, - fetchStoryHtml + fetchStoryHtml, }, }; ``` @@ -303,10 +302,15 @@ export const parameters = { `fetchStoryHtml` should be an async function with the following signature ```javascript -type FetchStoryHtmlType = (url: string, id: string, params: any, context: StoryContext) => Promise; +type FetchStoryHtmlType = ( + url: string, + id: string, + params: any, + context: StoryContext +) => Promise; ``` - * url: Server url configured by the `parameters.server.url` - * id: Id of the story being rendered given by `parameters.server.id` - * params: Merged story params `parameters.server.params`and story args - * context: The context of the story +- url: Server url configured by the `parameters.server.url` +- id: Id of the story being rendered given by `parameters.server.id` +- params: Merged story params `parameters.server.params`and story args +- context: The context of the story diff --git a/app/svelte/README.md b/app/svelte/README.md index f77c0356f43b..7c748236ecda 100644 --- a/app/svelte/README.md +++ b/app/svelte/README.md @@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi ```sh cd my-svelte-app -npx -p @storybook/cli sb init +npx sb init ``` For more information visit: [storybook.js.org](https://storybook.js.org) diff --git a/app/vue/README.md b/app/vue/README.md index 0c45b6d19f41..ad95f1b0eb16 100644 --- a/app/vue/README.md +++ b/app/vue/README.md @@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi ```sh cd my-vue-app -npx -p @storybook/cli sb init +npx sb init ``` For more information visit: [storybook.js.org](https://storybook.js.org) diff --git a/app/vue3/README.md b/app/vue3/README.md index 73cb5e6768f4..f38db11cb8e1 100644 --- a/app/vue3/README.md +++ b/app/vue3/README.md @@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi ```sh cd my-vue3-app -npx -p @storybook/cli sb init +npx sb init ``` For more information visit: [storybook.js.org](https://storybook.js.org) @@ -37,5 +37,7 @@ import { app } from '@storybook/vue3'; app.use(MyPlugin); app.component('my-component', MyComponent); -app.mixin({ /* My mixin */ }); +app.mixin({ + /* My mixin */ +}); ``` diff --git a/app/web-components/README.md b/app/web-components/README.md index 24d844c716aa..3d4660a24fc7 100644 --- a/app/web-components/README.md +++ b/app/web-components/README.md @@ -14,7 +14,7 @@ So you can develop UI components in isolation without worrying about app specifi ```sh cd my-app -npx -p @storybook/cli sb init -t web_components +npx sb init -t web_components ``` For more information visit: [storybook.js.org](https://storybook.js.org) diff --git a/docs/addons/writing-addons.md b/docs/addons/writing-addons.md index f489f8f22907..7035182e66fd 100644 --- a/docs/addons/writing-addons.md +++ b/docs/addons/writing-addons.md @@ -53,7 +53,7 @@ We'll need to add the necessary dependencies and make some adjustments. Run the yarn add react react-dom @babel/cli # Adds Storybook: -npx -p @storybook/cli sb init +npx sb init ```
diff --git a/docs/get-started/installation-command-section/ember.mdx b/docs/get-started/installation-command-section/ember.mdx index 64c73fb41b86..dd2c96dae867 100644 --- a/docs/get-started/installation-command-section/ember.mdx +++ b/docs/get-started/installation-command-section/ember.mdx @@ -2,11 +2,11 @@ Use the Storybook CLI to install it with a couple of commands. Run this inside y ```shell # Add Storybook: -npx -p @storybook/cli sb init +npx sb init # Add Ember storybook adapter ember install @storybook/ember-cli-storybook ``` -If you run into issues with the installation, check the troubleshooting section below for guidance on how to solve it. \ No newline at end of file +If you run into issues with the installation, check the troubleshooting section below for guidance on how to solve it. diff --git a/lib/cli/README.md b/lib/cli/README.md index c8c0ceb3d054..b7d1d77820f5 100644 --- a/lib/cli/README.md +++ b/lib/cli/README.md @@ -8,7 +8,7 @@ Go to your project and run: ```sh cd my-app -npx -p @storybook/cli sb init +npx sb init ``` In addition to `init`, the CLI also has other commands: @@ -28,7 +28,7 @@ The CLI supports yarn. If you have installed yarn in your system and your projec If you don't want to use `yarn` always you can use the `--use-npm` option like this: ```sh -npx -p @storybook/cli sb init --use-npm +npx sb init --use-npm ``` --- @@ -38,7 +38,7 @@ npx -p @storybook/cli sb init --use-npm It also supports flow files. By default, [jscodeshift](https://github.com/facebook/jscodeshift), the tool used to transform the source files, uses babel to read the files. To be able to transform any flow annotated file, you need to use the flow parser. ```sh -npx -p @storybook/cli sb init --parser flow +npx sb init --parser flow ``` For more information visit: [storybook.js.org](https://storybook.js.org) @@ -50,7 +50,7 @@ For more information visit: [storybook.js.org](https://storybook.js.org) If the CLI cannot detect your project type, it will ask you. You can also force it to use a particular project type: ```sh -npx -p @storybook/cli sb init --type +npx sb init --type ``` Where type is one of the project types defined in [project_types.js](https://github.com/storybookjs/storybook/blob/next/lib/cli/src/project_types.ts)