Merge branch 'future/base' into future/add-renderers

.circleci/config.yml

@@ -266,31 +266,32 @@ jobs:
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
-      - attach_workspace:
-          at: .
-      - run:
-          name: Running local registry
-          command: yarn local-registry --port 6000 --open
-          background: true
-      - run:
-          name: Wait for registry
-          command: yarn wait-on http://localhost:6000
-      - run:
-          name: run e2e tests cra
-          command: yarn test:e2e-framework --pnp cra
-      - run:
-          name: run e2e tests vue
-          command: yarn test:e2e-framework --pnp sfcVue
-      - run:
-          name: prep artifacts
-          when: always
-          command: zip -r /tmp/storybook-e2e-testing-out.zip /tmp/storybook-e2e-testing
-      - store_artifacts:
-          path: /tmp/cypress-record
-          destination: cypress
-      - store_artifacts:
-          path: /tmp/storybook-e2e-testing-out.zip
-          destination: e2e
+      # TODO: we disabled this one because it keeps failing, we should fix it, and enable it again!
+      # - attach_workspace:
+      #     at: .
+      # - run:
+      #     name: Running local registry
+      #     command: yarn local-registry --port 6000 --open
+      #     background: true
+      # - run:
+      #     name: Wait for registry
+      #     command: yarn wait-on http://localhost:6000
+      # - run:
+      #     name: run e2e tests cra
+      #     command: yarn test:e2e-framework --pnp cra
+      # - run:
+      #     name: run e2e tests vue
+      #     command: yarn test:e2e-framework --pnp sfcVue
+      # - run:
+      #     name: prep artifacts
+      #     when: always
+      #     command: zip -r /tmp/storybook-e2e-testing-out.zip /tmp/storybook-e2e-testing
+      # - store_artifacts:
+      #     path: /tmp/cypress-record
+      #     destination: cypress
+      # - store_artifacts:
+      #     path: /tmp/storybook-e2e-testing-out.zip
+      #     destination: e2e
   e2e-tests-examples:
     executor:
       class: small

SECURITY.md

@@ -2,9 +2,9 @@
 
 ## Supported Versions
 
-| Version    | Supported          |
-| ---------- | ------------------ |
-| 6.3, 6.4   | :white_check_mark: |
+| Version         | Supported          |
+| --------------- | ------------------ |
+| 6.3, 6.4, 6.5   | :white_check_mark: |
 
 ## Reporting a Vulnerability
 

addons/a11y/src/components/VisionSimulator.test.tsx

@@ -30,7 +30,7 @@ describe('Vision Simulator', () => {
     await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());
   });
 
-  it('should display tooltip on click', async () => {
+  it.skip('should display tooltip on click', async () => {
     // given
     render(<ThemedVisionSimulator />);
     await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());
@@ -45,7 +45,7 @@ describe('Vision Simulator', () => {
     );
   });
 
-  it('should set filter', async () => {
+  it.skip('should set filter', async () => {
     // given
     render(<ThemedVisionSimulator />);
     await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());

addons/docs/src/preset.ts

@@ -1,10 +1,12 @@
+import fs from 'fs-extra';
 import path from 'path';
 import remarkSlug from 'remark-slug';
 import remarkExternalLinks from 'remark-external-links';
 import global from 'global';
 
-import type { Options } from '@storybook/core-common';
+import type { IndexerOptions, Options, StoryIndexer } from '@storybook/core-common';
 import { logger } from '@storybook/node-logger';
+import { loadCsf } from '@storybook/csf-tools';
 
 // for frameworks that are not working with react, we need to configure
 // the jsx to transpile mdx, for now there will be a flag for that
@@ -147,3 +149,22 @@ export async function webpack(
 
   return result;
 }
+
+export const storyIndexers = async (indexers?: StoryIndexer[]) => {
+  const mdxIndexer = async (fileName: string, opts: IndexerOptions) => {
+    let code = (await fs.readFile(fileName, 'utf-8')).toString();
+    // @ts-ignore
+    const { compile } = global.FEATURES?.previewMdx2
+      ? await import('@storybook/mdx2-csf')
+      : await import('@storybook/mdx1-csf');
+    code = await compile(code, {});
+    return loadCsf(code, { ...opts, fileName }).parse();
+  };
+  return [
+    {
+      test: /(stories|story)\.mdx$/,
+      indexer: mdxIndexer,
+    },
+    ...(indexers || []),
+  ];
+};

docs/addons/writing-addons.md

@@ -50,13 +50,22 @@ Once you've gone through the prompts, your `package.json` should look like:
 
 ### Build system
 
-We'll need to add the necessary dependencies and make some adjustments. Run the following commands:
+We'll need to add the necessary dependencies and make some adjustments. Run the following command to install the required dependencies:
 
-```shell
-# Installs React and Babel CLI
-yarn add react react-dom @babel/cli
+<!-- prettier-ignore-start -->
 
-# Adds Storybook:
+<CodeSnippets
+  paths={[
+    'common/storybook-write-addon-install-dependencies.yarn.js.mdx',
+    'common/storybook-write-addon-install-dependencies.npm.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+Initialize a local Storybook instance to allow you to test your addon.
+
+```shell
 npx sb init
 ```
 
@@ -246,4 +255,4 @@ To dive deeper, we recommend Storybook's [creating an addon](https://storybook.j
 
 ### Addon kit
 
-To help you jumpstart the addon development, the Storybook maintainers created an [`addon-kit`](https://github.com/storybookjs/addon-kit), use it to bootstrap your next addon.
+To help you jumpstart the addon development, the Storybook maintainers created an [`addon-kit`](https://github.com/storybookjs/addon-kit), use it to bootstrap your next addon.

docs/builders/webpack.md

@@ -40,16 +40,34 @@ You can import `.json` files and have them expanded to a JavaScript object:
 
 <!-- prettier-ignore-end -->
 
-If you want to know the exact details of the Webpack config, the best way is to run either of the following:
+If you want to know the exact details of the Webpack config, the best way is to run either of the following commands:
 
-```shell
+For development mode:
 
-## Development mode
-yarn start-storybook --debug-webpack
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-debug-webpack-dev.yarn.js.mdx',
+    'common/storybook-debug-webpack-dev.npm.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+For production mode:
 
-## Production mode
-yarn build-storybook --debug-webpack
-```
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-debug-webpack-prod.yarn.js.mdx',
+    'common/storybook-debug-webpack-prod.npm.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
 
 ### Code splitting
 
@@ -199,5 +217,5 @@ When working with TypeScript projects, the default Webpack configuration may fai
 #### Learn more about builders
 
 - [Vite builder](./vite.md) for bundling with Vite
-- [Webpack builder](./webpack.md) for bundling with Webpack
+- Webpack builder for bundling with Webpack
 - [Builder API](./builder-api.md) for building a Storybook builder

docs/contribute/code.md

@@ -6,13 +6,16 @@ Contribute a new feature or bug fix to [Storybook's monorepo](https://github.com
 
 ## Initial setup
 
-First [fork](https://docs.github.com/en/github/getting-started-with-github/quickstart/fork-a-repo) the Storybook repository then clone and build your fork locally. Run the following commands:
+Start by [forking](https://docs.github.com/en/github/getting-started-with-github/quickstart/fork-a-repo) the Storybook monorepo and cloning it locally. 
 
 ```shell
 git clone https://github.com/your-username/storybook.git
-cd storybook
-yarn
-yarn bootstrap --core
+```
+
+Navigate to the `storybook` directory and install the required dependencies with the following commands:
+
+```shell
+yarn && yarn bootstrap --core
 ```
 
 ## Run tests & examples
@@ -28,8 +31,7 @@ yarn test
 Once the tests finish, check if the examples are working with the following commands:
 
 ```shell
-cd examples/cra-ts-essentials
-yarn storybook
+cd examples/cra-ts-essentials && yarn storybook
 ```
 
 <div class="aside">
@@ -106,7 +108,7 @@ Storybook's monorepo is set up to rely on end-to-end testing with [Cypress](http
 
 Before submitting your contribution, run the test suite one last time with:
 
-```sh
+```shell
 yarn test
 ```
 
@@ -133,15 +135,15 @@ We encourage bug reports to include reproductions. In the same way that it's pos
 
 To do so, run the following command in the root of the monorepo:
 
-```sh
+```shell
 npx sb@next link https://github.com/your-username/your-project.git
 ```
 
 This command creates a project `../storybook-repros/your-project`, and automatically links it to your local Storybook code. After connecting it, you should be able to run Storybook and develop as mentioned [above](#start-developing).
 
 If you already have a reproduction on your local machine, you can similarly link it to your monorepo dev setup with the `--local` flag:
 
-```sh
+```shell
 npx sb@next link --local /path/to/local-repro-directory
 ```
 

docs/contribute/new-snippets.md

@@ -89,11 +89,15 @@ Go through the rest of the documentation and repeat the process.
 
 Before submitting your contribution, we advise you to check your work against the Storybook website. Doing this prevents last-minute issues with the documentation and is also an excellent way for the maintainers to merge faster once you submit the pull request. However, failing to do so will lead one of the maintainers to notify you that your contribution has an issue.
 
-Start by forking [frontpage repo](https://github.com/storybookjs/frontpage). Then, clone and install the dependencies with the following commands:
+Start by forking [frontpage repo](https://github.com/storybookjs/frontpage) and cloning it locally. 
 
 ```shell
 git clone https://github.com/your-username/frontpage.git
-cd frontpage
+```
+
+Navigate to the `frontpage` directory and install the required dependencies with the following command:
+
+```shell
 yarn
 ```
 

docs/essentials/interactions.md

@@ -18,13 +18,16 @@ The interactions are written using a Storybook-instrumented version of [Testing
 
 Since Interactions is still experimental, it doesn't yet ship with Storybook by default. As such, you'll have to install it. You may also want to add our wrappers for Testing Library and Jest.
 
-```shell
-# With npm
-npm install @storybook/addon-interactions @storybook/jest @storybook/testing-library --save-dev
+<!-- prettier-ignore-start -->
 
-# With yarn
-yarn add --dev @storybook/addon-interactions @storybook/jest @storybook/testing-library
-```
+<CodeSnippets
+  paths={[
+    'common/storybook-addon-interactions-addon-full-install.yarn.js.mdx',
+    'common/storybook-addon-interactions-addon-full-install.npm.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
 
 Next, update [`.storybook/main.js`](../configure/overview.md#configure-story-rendering) to the following:
 

docs/essentials/introduction.md

@@ -18,13 +18,16 @@ If you ran `sb init` to include Storybook in your project, the Essentials addon
 
 If you're upgrading from a previous Storybook version, you'll need to run the following command in your terminal:
 
-```shell
-#With npm
-npm install -D @storybook/addon-essentials
+<!-- prettier-ignore-start -->
 
-#With yarn
-yarn add -D @storybook/addon-essentials
-```
+<CodeSnippets
+  paths={[
+    'common/storybook-addon-essentials-install.yarn.js.mdx',
+    'common/storybook-addon-essentials-install.npm.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
 
 Update your Storybook configuration (in [`.storybook/main.js`](../configure/overview.md#configure-story-rendering)) to include the Essentials addon.
 
@@ -44,14 +47,16 @@ Essentials is "zero-config”. It comes with a recommended configuration out of
 
 If you need to reconfigure any of the [individual Essentials addons](https://storybook.js.org/addons/tag/essentials), install them manually by following the installation instructions, register them in your Storybook configuration file (i.e., [`.storybook/main.js`](../configure/overview.md#configure-story-rendering)) and adjust the configuration to suit your needs. For example:
 
-```shell
-#With npm
-npm install -D @storybook/addon-actions
+<!-- prettier-ignore-start -->
 
+<CodeSnippets
+  paths={[
+    'common/storybook-addon-actions-install.yarn.js.mdx',
+    'common/storybook-addon-actions-install.npm.js.mdx',
+  ]}
+/>
 
-#With yarn
-yarn add -D @storybook/addon-actions
-```
+<!-- prettier-ignore-end -->
 
 <!-- prettier-ignore-start -->
 

docs/get-started/install.md

@@ -90,7 +90,9 @@ Below are some of the most common installation issues and instructions on how to
 <!-- prettier-ignore-end -->
 
 <div class="aside">
+
 Storybook collects completely anonymous data to help us improve user experience. Participation is optional, and you may [opt-out](../configure/telemetry.md#how-to-opt-out) if you'd not like to share any information.
+
 </div>
 
 If all else fails, try asking for [help](https://storybook.js.org/support)

docs/sharing/publish-storybook.md

@@ -21,7 +21,8 @@ First, we'll need to build Storybook as a static web application. The functional
   paths={[
     'angular/custom-build-script-production.script-for-builder.js.mdx',
     'angular/build-storybook-production-mode.with-builder.js.mdx',
-    'common/build-storybook-production-mode.js.mdx',
+    'common/build-storybook-production-mode.yarn.js.mdx',
+    'common/build-storybook-production-mode.npm.js.mdx',
   ]}
 />
 
@@ -49,13 +50,16 @@ To get started, sign up with your GitHub, GitLab, Bitbucket, or email and genera
 
 Next, install the [Chromatic CLI](https://www.npmjs.com/package/chromatic) package from npm:
 
-```shell
-# With npm
-npm install --save-dev chromatic
+<!-- prettier-ignore-start -->
 
-# With yarn
-yarn add --dev chromatic
-```
+<CodeSnippets
+  paths={[
+    'common/chromatic-install.yarn.js.mdx',
+    'common/chromatic-install.npm.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
 
 Run the following command after the package finishes installing. Make sure that you replace `your-project-token` with your own project token.