Merge branch 'next' into tech/tsup-core-server-v2

storybookjs · Dec 23, 2022 · 57b14d4 · 57b14d4
2 parents 57ead10 + b95c3b7
commit 57b14d4
Show file tree

Hide file tree

Showing 214 changed files with 2,840 additions and 3,392 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -43,7 +43,7 @@ executors:
         default: 'small'
     working_directory: /tmp/storybook
     docker:
-      - image: mcr.microsoft.com/playwright:v1.29.0-focal
+      - image: mcr.microsoft.com/playwright:v1.29.1-focal
         environment:
           NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>
@@ -91,12 +91,21 @@ jobs:
       - restore_cache:
           name: Restore Yarn cache
           keys:
-            - build-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
+            - prettydocs-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
+      - run:
+          name: Install
+          command: |
+            cd scripts
+            yarn install
+      - save_cache:
+          name: Save Yarn cache
+          key: prettydocs-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
+          paths:
+            - ~/.yarn/berry/cache
       - run:
           name: Prettier
           command: |
             cd scripts
-            yarn
             yarn docs:prettier:check
   build:
     executor:
@@ -637,3 +646,5 @@ workflows:
           parallelism: 26
           requires:
             - build-sandboxes
+
+# VS Code Extension Version: 1.5.0
diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,7 @@ node_modules
 .idea
 *.iml
 *.sw*
+!.swcrc
 dist
 *.DS_Store
 .cache

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,33 @@
+## 7.0.0-beta.14 (December 23, 2022)
+
+#### Features
+
+-   CLI: Write into a log file if automigrations fail [#20310](https://github.com/storybooks/storybook/pull/20310)
+-   CLI: Add nodejs check in automigrations [#20342](https://github.com/storybooks/storybook/pull/20342)
+
+#### Bug Fixes
+
+-   UI: Disable React.strictmode to avoid findNode deprecation warnings [#20345](https://github.com/storybooks/storybook/pull/20345)
+-   Vite: Fix peerDep warning by updating `@joshwooding/vite-plugin-react-docgen-typescript` [#20359](https://github.com/storybooks/storybook/pull/20359)
+
+#### Maintenance
+
+-   Don't allow setting `Meta of={X}` if `X` is tagged with `'autodocs'` [#20373](https://github.com/storybooks/storybook/pull/20373)
+-   Rename `docsPage` => `autodocs` [#20364](https://github.com/storybooks/storybook/pull/20364)
+-   Rename `docsOptions.enabled` to `docsOptions.disable` [#20363](https://github.com/storybooks/storybook/pull/20363)
+-   Angular: Switch to default to inlineStories=true [#20118](https://github.com/storybooks/storybook/pull/20118)
+-   Types: Add Addon_OptionsParameterV7 type [#20384](https://github.com/storybooks/storybook/pull/20384)
+
+#### Build
+
+-   Build: regen lockfiles [#20386](https://github.com/storybooks/storybook/pull/20386)
+-   Build: fix prettydocs CI flakyness [#20385](https://github.com/storybooks/storybook/pull/20385)
+-   Build: Update Playwright to 1.29.1 [#20372](https://github.com/storybooks/storybook/pull/20372)
+-   Build: store extra metadata for each sandbox test [#20365](https://github.com/storybooks/storybook/pull/20365)
+-   Build: Remove the non-cross-platform dash-S option [#20360](https://github.com/storybooks/storybook/pull/20360)
+-   Build: sync issues of `next` packages [#20354](https://github.com/storybooks/storybook/pull/20354)
+
+
 ## 6.5.15 (December 20, 2022)
 
 #### Bug Fixes

diff --git a/MIGRATION.md b/MIGRATION.md
@@ -40,7 +40,7 @@
   - [Docs Changes](#docs-changes)
     - [Standalone docs files](#standalone-docs-files)
     - [Referencing stories in docs files](#referencing-stories-in-docs-files)
-    - [Docs Page](#docs-page)
+    - [Autodocs](#autodocs)
     - [Configuring the Docs Container](#configuring-the-docs-container)
     - [External Docs](#external-docs)
     - [MDX2 upgrade](#mdx2-upgrade)
@@ -754,32 +754,32 @@ import * as SecondComponentStories from './second-component.stories';
 <Story of={SecondComponentStories.standard} meta={SecondComponentStories} />
 ```
 
-#### Docs Page
+#### Autodocs
 
-In 7.0, rather than rendering each story in "docs view mode", Docs Page operates by adding additional sidebar entries for each component. By default it uses the same template as was used in 6.x, and the entries are entitled `Docs`.
+In 7.0, rather than rendering each story in "docs view mode", Autodocs (formerly known as "Docs Page") operates by adding additional sidebar entries for each component. By default it uses the same template as was used in 6.x, and the entries are entitled `Docs`.
 
-You can configure Docs Page in `main.js`:
+You can configure Autodocs in `main.js`:
 
 ```js
 module.exports = {
   docs: {
-    docsPage: 'automatic', // see below for alternatives
+    autodocs: true, // see below for alternatives
     defaultName: 'Docs', // set to change the name of generated docs entries
   },
 };
 ```
 
-If you are migrating from 6.x your `docs.docsPage` option will have been set to `'automatic'`, which has the effect of enabling docs page for _every_ CSF file. However, as of 7.0, the new default is `true`, which requires opting into DocsPage per-CSF file, with the `docsPage` **tag** on your component export:
+If you are migrating from 6.x your `docs.autodocs` option will have been set to `true`, which has the effect of enabling docs page for _every_ CSF file. However, as of 7.0, the new default is `'tag'`, which requires opting into Autodocs per-CSF file, with the `autodocs` **tag** on your component export:
 
 ```ts
 export default {
   component: MyComponent
   // Tags are a new feature coming in 7.1, that we are using to drive this behaviour.
-  tags: ['docsPage']
+  tags: ['autodocs']
 }
 ```
 
-You can also set `docsPage: false` to opt-out of docs page entirely.
+You can also set `autodocs: false` to opt-out of Autodocs entirely.
 
 You can change the default template in the same way as in 6.x, using the `docs.page` parameter.
 

diff --git a/code/.gitignore b/code/.gitignore
@@ -3,6 +3,7 @@ node_modules
 .idea
 *.iml
 *.sw*
+!.swcrc
 npm-shrinkwrap.json
 dist
 .tern-port

diff --git a/code/.swcrc b/code/.swcrc
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "classic",
+        "pragma": "React.createElement",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": false,
+        "development": false
+      }
+    },
+    "target": "es2020",
+    "loose": false,
+    "externalHelpers": false,
+    // Requires v1.2.50 or upper and requires target to be es2016 or upper.
+    "keepClassNames": false
+  },
+  "minify": false
+}
diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "7.0.0-beta.13",
+  "version": "7.0.0-beta.14",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",
@@ -63,16 +63,16 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addon-highlight": "7.0.0-beta.13",
-    "@storybook/channels": "7.0.0-beta.13",
-    "@storybook/client-logger": "7.0.0-beta.13",
-    "@storybook/components": "7.0.0-beta.13",
-    "@storybook/core-events": "7.0.0-beta.13",
+    "@storybook/addon-highlight": "7.0.0-beta.14",
+    "@storybook/channels": "7.0.0-beta.14",
+    "@storybook/client-logger": "7.0.0-beta.14",
+    "@storybook/components": "7.0.0-beta.14",
+    "@storybook/core-events": "7.0.0-beta.14",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.0.0-beta.13",
-    "@storybook/preview-api": "7.0.0-beta.13",
-    "@storybook/theming": "7.0.0-beta.13",
-    "@storybook/types": "7.0.0-beta.13",
+    "@storybook/manager-api": "7.0.0-beta.14",
+    "@storybook/preview-api": "7.0.0-beta.14",
+    "@storybook/theming": "7.0.0-beta.14",
+    "@storybook/types": "7.0.0-beta.14",
     "axe-core": "^4.2.0",
     "lodash": "^4.17.21",
     "react-resize-detector": "^7.1.2"
@@ -104,7 +104,7 @@
       "./src/preview.tsx"
     ]
   },
-  "gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908",
+  "gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6",
   "storybook": {
     "displayName": "Accessibility",
     "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",

diff --git a/code/addons/a11y/src/components/Report/Rules.tsx b/code/addons/a11y/src/components/Report/Rules.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { styled } from '@storybook/theming';
 import { Badge } from '@storybook/components';
 import type { CheckResult } from 'axe-core';
-import ReactResizeDetector from 'react-resize-detector';
+import { useResizeDetector } from 'react-resize-detector';
 
 const List = styled.div({
   display: 'flex',
@@ -53,6 +53,11 @@ const formatSeverityText = (severity: string) => {
 };
 
 const Rule: FC<RuleProps> = ({ rule }) => {
+  const { ref, width } = useResizeDetector({
+    refreshMode: 'debounce',
+    handleHeight: false,
+    handleWidth: true,
+  });
   let badgeType: any = null;
   switch (rule.impact) {
     case ImpactValue.CRITICAL:
@@ -71,14 +76,10 @@ const Rule: FC<RuleProps> = ({ rule }) => {
       break;
   }
   return (
-    <ReactResizeDetector handleWidth handleHeight refreshMode="debounce">
-      {(size) => (
-        <Item elementWidth={size.width || 0}>
-          <StyledBadge status={badgeType}>{formatSeverityText(rule.impact)}</StyledBadge>
-          <Message>{rule.message}</Message>
-        </Item>
-      )}
-    </ReactResizeDetector>
+    <Item ref={ref} elementWidth={width || 0}>
+      <StyledBadge status={badgeType}>{formatSeverityText(rule.impact)}</StyledBadge>
+      <Message>{rule.message}</Message>
+    </Item>
   );
 };
 

diff --git a/code/addons/a11y/src/components/Tabs.tsx b/code/addons/a11y/src/components/Tabs.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { styled } from '@storybook/theming';
 import type { NodeResult, Result } from 'axe-core';
-import ReactResizeDetector from 'react-resize-detector';
+import { useResizeDetector } from 'react-resize-detector';
 import HighlightToggle from './Report/HighlightToggle';
 
 import type { RuleType } from './A11YPanel';
@@ -99,6 +99,11 @@ function retrieveAllNodesFromResults(items: Result[]): NodeResult[] {
 }
 
 export const Tabs: React.FC<TabsProps> = ({ tabs }) => {
+  const { ref, width } = useResizeDetector({
+    refreshMode: 'debounce',
+    handleHeight: false,
+    handleWidth: true,
+  });
   const { tab: activeTab, setTab } = useA11yContext();
 
   const handleToggle = React.useCallback(
@@ -111,38 +116,32 @@ export const Tabs: React.FC<TabsProps> = ({ tabs }) => {
   const highlightToggleId = `${tabs[activeTab].type}-global-checkbox`;
   const highlightLabel = `Highlight results`;
   return (
-    <ReactResizeDetector handleWidth handleHeight refreshMode="debounce">
-      {(size) => (
-        <Container>
-          <List>
-            <TabsWrapper>
-              {tabs.map((tab, index) => (
-                <Item
-                  /* eslint-disable-next-line react/no-array-index-key */
-                  key={index}
-                  data-index={index}
-                  active={activeTab === index}
-                  onClick={handleToggle}
-                >
-                  {tab.label}
-                </Item>
-              ))}
-            </TabsWrapper>
-          </List>
-          {tabs[activeTab].items.length > 0 ? (
-            <GlobalToggle elementWidth={size.width || 0}>
-              <HighlightToggleLabel htmlFor={highlightToggleId}>
-                {highlightLabel}
-              </HighlightToggleLabel>
-              <HighlightToggle
-                toggleId={highlightToggleId}
-                elementsToHighlight={retrieveAllNodesFromResults(tabs[activeTab].items)}
-              />
-            </GlobalToggle>
-          ) : null}
-          {tabs[activeTab].panel}
-        </Container>
-      )}
-    </ReactResizeDetector>
+    <Container ref={ref}>
+      <List>
+        <TabsWrapper>
+          {tabs.map((tab, index) => (
+            <Item
+              /* eslint-disable-next-line react/no-array-index-key */
+              key={index}
+              data-index={index}
+              active={activeTab === index}
+              onClick={handleToggle}
+            >
+              {tab.label}
+            </Item>
+          ))}
+        </TabsWrapper>
+      </List>
+      {tabs[activeTab].items.length > 0 ? (
+        <GlobalToggle elementWidth={width || 0}>
+          <HighlightToggleLabel htmlFor={highlightToggleId}>{highlightLabel}</HighlightToggleLabel>
+          <HighlightToggle
+            toggleId={highlightToggleId}
+            elementsToHighlight={retrieveAllNodesFromResults(tabs[activeTab].items)}
+          />
+        </GlobalToggle>
+      ) : null}
+      {tabs[activeTab].panel}
+    </Container>
   );
 };
diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "7.0.0-beta.13",
+  "version": "7.0.0-beta.14",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",
@@ -77,14 +77,14 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.0-beta.13",
-    "@storybook/components": "7.0.0-beta.13",
-    "@storybook/core-events": "7.0.0-beta.13",
+    "@storybook/client-logger": "7.0.0-beta.14",
+    "@storybook/components": "7.0.0-beta.14",
+    "@storybook/core-events": "7.0.0-beta.14",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.0.0-beta.13",
-    "@storybook/preview-api": "7.0.0-beta.13",
-    "@storybook/theming": "7.0.0-beta.13",
-    "@storybook/types": "7.0.0-beta.13",
+    "@storybook/manager-api": "7.0.0-beta.14",
+    "@storybook/preview-api": "7.0.0-beta.14",
+    "@storybook/theming": "7.0.0-beta.14",
+    "@storybook/types": "7.0.0-beta.14",
     "dequal": "^2.0.2",
     "lodash": "^4.17.21",
     "polished": "^4.2.2",
@@ -121,7 +121,7 @@
       "./src/preview.ts"
     ]
   },
-  "gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908",
+  "gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6",
   "storybook": {
     "displayName": "Actions",
     "unsupportedFrameworks": [
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,6 +3,7 @@ node_modules @@
     .idea
     *.iml
     *.sw*
+    !.swcrc
     dist
     *.DS_Store
     .cache
@@ Expand Down @@