From 0c0a21b030ebf1329448a25d0a043a5c728de6a3 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 30 May 2022 09:42:03 +0200 Subject: [PATCH 1/8] chore: clean verdaccio cache when running locally --- scripts/run-registry.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/scripts/run-registry.ts b/scripts/run-registry.ts index 1c4a38078229..313c828afda8 100755 --- a/scripts/run-registry.ts +++ b/scripts/run-registry.ts @@ -1,4 +1,5 @@ import { exec } from 'child_process'; +import { remove, pathExists } from 'fs-extra'; import chalk from 'chalk'; import path from 'path'; import program from 'commander'; @@ -176,6 +177,16 @@ const run = async () => { logger.log(`๐Ÿ“ reading version of storybook`); logger.log(`๐Ÿš› listing storybook packages`); + + if (!process.env.CI) { + // when running e2e locally, clear cache to avoid EPUBLISHCONFLICT errors + const verdaccioCache = path.resolve(__dirname, '..', '.verdaccio-cache'); + if (await pathExists(verdaccioCache)) { + logger.log(`๐Ÿ—‘ cleaning up cache`); + await remove(verdaccioCache); + } + } + logger.log(`๐ŸŽฌ starting verdaccio (this takes ยฑ5 seconds, so be patient)`); const [verdaccioServer, packages, version] = await Promise.all([ From 0facbafafc12ff72630f3414ba111d4b6f9dd2dc Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 30 May 2022 18:19:40 +0200 Subject: [PATCH 2/8] docs(README): update version badges --- README.md | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 0472ab5a1acf..df9b875b9e3f 100644 --- a/README.md +++ b/README.md @@ -51,8 +51,8 @@ It allows you to browse a component library, view the different states of each c

View README for:
- latest - next + latest + next

## Table of contents @@ -92,19 +92,19 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story ### Supported Frameworks -| Framework | Demo | | -| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | -| [React](app/react) | [v6.4.x](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [![React](https://img.shields.io/npm/dm/@storybook/react.svg)](app/react) | -| [Vue](app/vue) | [v6.4.x](https://storybookjs.netlify.com/vue-kitchen-sink/) | [![Vue](https://img.shields.io/npm/dm/@storybook/vue.svg)](app/vue) | -| [Angular](app/angular) | [v6.4.x](https://storybookjs.netlify.com/angular-cli/) | [![Angular](https://img.shields.io/npm/dm/@storybook/angular.svg)](app/angular) | -| [Web components](app/web-components) | [v6.4.x](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components.svg)](app/web-components) | -| [React Native](https://github.com/storybookjs/react-native) | - | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native.svg)](https://github.com/storybookjs/react-native) | -| [HTML](app/html) | [v6.4.x](https://storybookjs.netlify.com/html-kitchen-sink/) | [![HTML](https://img.shields.io/npm/dm/@storybook/html.svg)](app/html) | -| [Ember](app/ember) | [v6.4.x](https://storybookjs.netlify.com/ember-cli/) | [![Ember](https://img.shields.io/npm/dm/@storybook/ember.svg)](app/ember) | -| [Svelte](app/svelte) | [v6.4.x](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte.svg)](app/svelte) | -| [Preact](app/preact) | [v6.4.x](https://storybookjs.netlify.com/preact-kitchen-sink/) | [![Preact](https://img.shields.io/npm/dm/@storybook/preact.svg)](app/preact) | -| [Marionette.js](https://github.com/storybookjs/marionette) | - | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette.svg)](https://github.com/storybookjs/marionette) | -| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [v6.4.x](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [![Native](https://img.shields.io/npm/dm/@storybook/native.svg)](https://github.com/storybookjs/native) | +| Framework | Demo | | +| -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | +| [React](app/react) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/react/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [![React](https://img.shields.io/npm/dm/@storybook/react?style=flat-square&color=eee)](app/react) | +| [Vue](app/vue) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/vue-kitchen-sink/) | [![Vue](https://img.shields.io/npm/dm/@storybook/vue?style=flat-square&color=eee)](app/vue) | +| [Angular](app/angular) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/angular/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/angular-cli/) | [![Angular](https://img.shields.io/npm/dm/@storybook/angular?style=flat-square&color=eee)](app/angular) | +| [Web components](app/web-components) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/web-components/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components?style=flat-square&color=eee)](app/web-components) | +| [React Native](https://github.com/storybookjs/react-native) | - | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native?style=flat-square&color=eee)](https://github.com/storybookjs/react-native) | +| [HTML](app/html) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/html/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/html-kitchen-sink/) | [![HTML](https://img.shields.io/npm/dm/@storybook/html?style=flat-square&color=eee)](app/html) | +| [Ember](app/ember) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/ember/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/ember-cli/) | [![Ember](https://img.shields.io/npm/dm/@storybook/ember?style=flat-square&color=eee)](app/ember) | +| [Svelte](app/svelte) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/svelte/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte?style=flat-square&color=eee)](app/svelte) | +| [Preact](app/preact) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/preact/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/preact-kitchen-sink/) | [![Preact](https://img.shields.io/npm/dm/@storybook/preact?style=flat-square&color=eee)](app/preact) | +| [Marionette.js](https://github.com/storybookjs/marionette) | - | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette?style=flat-square&color=eee)](https://github.com/storybookjs/marionette) | +| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/native/latest?style=flat-square&color=blue&label)](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [![Native](https://img.shields.io/npm/dm/@storybook/native?style=flat-square&color=eee)](https://github.com/storybookjs/native) | ### Sub Projects From 89e21e49018b9280901cbe1f18f1803f59364c73 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 2 Jun 2022 20:47:23 +0200 Subject: [PATCH 3/8] chore(repro): add additional files api to sb repro --- lib/cli/src/repro-generators/configs.ts | 5 +++++ lib/cli/src/repro-generators/scripts.ts | 21 ++++++++++++++++++++- 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/lib/cli/src/repro-generators/configs.ts b/lib/cli/src/repro-generators/configs.ts index 241819736707..1669b3f3aabb 100644 --- a/lib/cli/src/repro-generators/configs.ts +++ b/lib/cli/src/repro-generators/configs.ts @@ -13,6 +13,11 @@ export interface Parameters { autoDetect?: boolean; /** Dependencies to add before building Storybook */ additionalDeps?: string[]; + /** Files to add before building Storybook */ + additionalFiles?: { + path: string; + contents: string; + }[]; /** Add typescript dependency and creates a tsconfig.json file */ typescript?: boolean; /** Merge configurations to main.js before running the tests */ diff --git a/lib/cli/src/repro-generators/scripts.ts b/lib/cli/src/repro-generators/scripts.ts index 28efd6ce0d24..5ed6032fca1e 100644 --- a/lib/cli/src/repro-generators/scripts.ts +++ b/lib/cli/src/repro-generators/scripts.ts @@ -1,5 +1,5 @@ import path from 'path'; -import { readJSON, writeJSON } from 'fs-extra'; +import { readJSON, writeJSON, outputFile } from 'fs-extra'; import shell, { ExecOptions } from 'shelljs'; import chalk from 'chalk'; import { cra, cra_typescript } from './configs'; @@ -22,6 +22,11 @@ export interface Parameters { ensureDir?: boolean; /** Dependencies to add before building Storybook */ additionalDeps?: string[]; + /** Files to add before building Storybook */ + additionalFiles?: { + path: string; + contents: string; + }[]; /** Add typescript dependency and creates a tsconfig.json file */ typescript?: boolean; } @@ -136,6 +141,18 @@ const generate = async ({ cwd, name, appName, version, generator }: Options) => ); }; +const addAdditionalFiles = async ({ additionalFiles, cwd }: Options) => { + if (!additionalFiles || additionalFiles.length === 0) { + return; + } + + logger.info(`โคต๏ธ Adding required files`); + + additionalFiles.forEach(async (file) => { + await outputFile(path.resolve(cwd, file.path), file.contents, { encoding: 'UTF-8' }); + }); +}; + const initStorybook = async ({ cwd, autoDetect = true, name, e2e }: Options) => { const type = autoDetect ? '' : `--type ${name}`; const linkable = e2e ? '' : '--linkable'; @@ -228,6 +245,8 @@ export const createAndInit = async ( logger.log(); await doTask(generate, { ...options, cwd: options.creationPath }); + console.log({ options }); + await doTask(addAdditionalFiles, { ...options, cwd }); if (e2e) { await doTask(addPackageResolutions, options); } From 27c83576dfa62ef17cb222f880e1ee245cb1a5d5 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 2 Jun 2022 20:48:43 +0200 Subject: [PATCH 4/8] fix(CLI): fix skip-install flag for angular generator Seems like it changed in version 14. From --skipInstall to --skip-install --- lib/cli/src/repro-generators/configs.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/cli/src/repro-generators/configs.ts b/lib/cli/src/repro-generators/configs.ts index 1669b3f3aabb..0b3a39f69a4b 100644 --- a/lib/cli/src/repro-generators/configs.ts +++ b/lib/cli/src/repro-generators/configs.ts @@ -124,7 +124,7 @@ const baseAngular: Parameters = { framework: 'angular', name: 'angular', version: 'latest', - generator: `npx -p @angular/cli@{{version}} ng new {{appName}} --routing=true --minimal=true --style=scss --skipInstall=true --strict`, + generator: `npx -p @angular/cli@{{version}} ng new {{appName}} --routing=true --minimal=true --style=scss --skip-install=true --strict`, }; export const angular10: Parameters = { From 07ca2aa948c31bebb7052e99f28ead86ee6e4328 Mon Sep 17 00:00:00 2001 From: Trang Le Date: Mon, 6 Jun 2022 17:57:01 +0700 Subject: [PATCH 5/8] Docs: Update link to Initial Setup section --- docs/contribute/code.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/contribute/code.md b/docs/contribute/code.md index f25714e4e713..8b55caa63fe4 100644 --- a/docs/contribute/code.md +++ b/docs/contribute/code.md @@ -20,7 +20,7 @@ yarn && yarn bootstrap --core ## Run tests & examples -Once you've completed the [initial setup](#run-tests-&-examples), you should have a fully functional version of Storybook built on your local machine. Before making any code changes, it's helpful to verify that everything is working as it should. More specifically, the test suite and examples. +Once you've completed the [initial setup](#initial-setup), you should have a fully functional version of Storybook built on your local machine. Before making any code changes, it's helpful to verify that everything is working as it should. More specifically, the test suite and examples. Run the following command to execute the tests: From e695802103eb519d2b25aa1e8e4d710fe6e98372 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 6 Jun 2022 13:12:48 +0200 Subject: [PATCH 6/8] chore(repro): improve additional files logic --- lib/cli/src/repro-generators/scripts.ts | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/lib/cli/src/repro-generators/scripts.ts b/lib/cli/src/repro-generators/scripts.ts index 5ed6032fca1e..41d5cd94466c 100644 --- a/lib/cli/src/repro-generators/scripts.ts +++ b/lib/cli/src/repro-generators/scripts.ts @@ -142,15 +142,13 @@ const generate = async ({ cwd, name, appName, version, generator }: Options) => }; const addAdditionalFiles = async ({ additionalFiles, cwd }: Options) => { - if (!additionalFiles || additionalFiles.length === 0) { - return; - } - logger.info(`โคต๏ธ Adding required files`); - additionalFiles.forEach(async (file) => { - await outputFile(path.resolve(cwd, file.path), file.contents, { encoding: 'UTF-8' }); - }); + await Promise.all( + additionalFiles.map(async (file) => { + await outputFile(path.resolve(cwd, file.path), file.contents, { encoding: 'UTF-8' }); + }) + ); }; const initStorybook = async ({ cwd, autoDetect = true, name, e2e }: Options) => { @@ -245,8 +243,7 @@ export const createAndInit = async ( logger.log(); await doTask(generate, { ...options, cwd: options.creationPath }); - console.log({ options }); - await doTask(addAdditionalFiles, { ...options, cwd }); + await doTask(addAdditionalFiles, { ...options, cwd }, !!options.additionalFiles); if (e2e) { await doTask(addPackageResolutions, options); } From 4f5b90e897d36935ee797e0a70b5c12386317a12 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 6 Jun 2022 13:13:57 +0200 Subject: [PATCH 7/8] chore(repro): rewrite additionalFiles description --- lib/cli/src/repro-generators/configs.ts | 2 +- lib/cli/src/repro-generators/scripts.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/cli/src/repro-generators/configs.ts b/lib/cli/src/repro-generators/configs.ts index 0b3a39f69a4b..f1b5b10fcb26 100644 --- a/lib/cli/src/repro-generators/configs.ts +++ b/lib/cli/src/repro-generators/configs.ts @@ -13,7 +13,7 @@ export interface Parameters { autoDetect?: boolean; /** Dependencies to add before building Storybook */ additionalDeps?: string[]; - /** Files to add before building Storybook */ + /** Files to add before installing Storybook */ additionalFiles?: { path: string; contents: string; diff --git a/lib/cli/src/repro-generators/scripts.ts b/lib/cli/src/repro-generators/scripts.ts index 41d5cd94466c..21a608f5fea1 100644 --- a/lib/cli/src/repro-generators/scripts.ts +++ b/lib/cli/src/repro-generators/scripts.ts @@ -22,7 +22,7 @@ export interface Parameters { ensureDir?: boolean; /** Dependencies to add before building Storybook */ additionalDeps?: string[]; - /** Files to add before building Storybook */ + /** Files to add before installing Storybook */ additionalFiles?: { path: string; contents: string; From 17b8bf4250c4db5d72ed71345856b6edb97bff1d Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Mon, 6 Jun 2022 19:27:33 +0100 Subject: [PATCH 8/8] Minor tweaks around SB env vars --- docs/configure/environment-variables.md | 6 ++++++ docs/configure/overview.md | 3 ++- docs/faq.md | 11 ++++++++++- 3 files changed, 18 insertions(+), 2 deletions(-) diff --git a/docs/configure/environment-variables.md b/docs/configure/environment-variables.md index d6439226bb4d..1109db35c15b 100644 --- a/docs/configure/environment-variables.md +++ b/docs/configure/environment-variables.md @@ -9,6 +9,12 @@ If you supply an environment variable prefixed with `STORYBOOK_`, it will be ava STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook ``` +
+ + ๐Ÿ’ก Do not store any secrets (e.g., private API keys) or other types of sensitive information in your Storybook. Environment variables are embedded into the build, meaning anyone can view them by inspecting your files. + +
+ Then we can access these environment variables anywhere inside our preview JavaScript code like below: diff --git a/docs/configure/overview.md b/docs/configure/overview.md index 83eed8505c43..c2a7fa44c02c 100644 --- a/docs/configure/overview.md +++ b/docs/configure/overview.md @@ -178,7 +178,7 @@ You can also use Storybook's API to configure your project with TypeScript. Unde | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `stories` | The array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.ts` | | `staticDirs` | Sets a list of directories of [static files](./images-and-assets.md#serving-static-files-via-storybook-configuration) to be loaded by Storybook
`staticDirs:['../public']` | -| `addons` | Sets the list of [addons](https://storybook.js.org/addons/) loaded by Storybook
`addons:['@storybook/addon-essentials']` | +| `addons` | Sets the list of [addons](https://storybook.js.org/addons/) loaded by Storybook
`addons:['@storybook/addon-essentials']` | | `typescript` | Configures how Storybook handles [TypeScript files](./typescript.md)
`typescript: { check: false, checkOptions: {} }` | | `framework` | Configures Storybook based on a set of framework-specific settings
`framework:'@storybook/svelte'` | | `core` | Configures Storybook's internal features.
`core: { builder: 'webpack5' }` | @@ -186,6 +186,7 @@ You can also use Storybook's API to configure your project with TypeScript. Unde | `refs` | Configures [Storybook composition](../sharing/storybook-composition.md)
`refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }` | | `logLevel` | Configures Storybook's logs in the browser terminal. Useful for debugging
`logLevel: 'debug'` | | `webpackFinal` | Customize Storybook's [Webpack](./webpack.md) setup
`webpackFinal: async (config:any) => { return config; }` | +| `env` | Defines custom Storybook [environment variables](./environment-variables.md#using-storybook-configuration).
`env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),` | ## Configure story rendering diff --git a/docs/faq.md b/docs/faq.md index 766f29ed4adf..f05062edf05e 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -475,4 +475,13 @@ export default { ### Why isn't Storybook's test runner working? -There's an issue with Storybook's test runner and the latest version of Jest (i.e., version 28), which prevents it from running effectively. As a workaround, you can downgrade Jest to the previous stable version (i.e., version 27), and you'll be able to run it. See the following [issue](https://github.com/storybookjs/test-runner/issues/99) for more information. \ No newline at end of file +There's an issue with Storybook's test runner and the latest version of Jest (i.e., version 28), which prevents it from running effectively. As a workaround, you can downgrade Jest to the previous stable version (i.e., version 27), and you'll be able to run it. See the following [issue](https://github.com/storybookjs/test-runner/issues/99) for more information. + + +### How does Storybook handles enviroment variables? + +Storybook has built-in support for [environment variables](./configure/environment-variables.md). By default, environment variables are only available in Node.js code and are not available in the browser as some variables should be kept secret (e.g., API keys) and **not** exposed to anyone visiting the published Storybook. + +To expose a variable, you must preface its name with `STORYBOOK_`. So `STORYBOOK_API_URL` will be available in browser code but `API_KEY` will not. Additionally you can also customize which variables are exposed by setting the [`env`](./configure/environment-variables.md#using-storybook-configuration) field in the `.storybook/main.js` file. + +Variables are set when JavaScript is compiled so when the development server is started or you build your Storybook. Environment variable files should not be committed to Git as they often contain secrets which are not safe to add to Git. Instead, add `.env.*` to your `.gitignore` file and set up the environment variables manually on your hosting provider (e.g., [GitHub](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository)). \ No newline at end of file