diff --git a/.circleci/config.yml b/.circleci/config.yml
index bbd0147099b5..17c5b5b7c752 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -125,7 +125,7 @@ jobs:
executor:
class: medium+
name: sb_node_14_browsers
- parallelism: 9
+ parallelism: 8
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
diff --git a/code/examples/react-ts/.babelrc b/code/examples/react-ts/.babelrc
deleted file mode 100644
index 7a23dd2f0016..000000000000
--- a/code/examples/react-ts/.babelrc
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "presets": [
- ["@babel/preset-env", { "targets": { "chrome": "100" } }],
- "@babel/preset-react",
- "@babel/preset-typescript"
- ]
-}
diff --git a/code/examples/react-ts/.env b/code/examples/react-ts/.env
deleted file mode 100644
index 1566bb1d76a7..000000000000
--- a/code/examples/react-ts/.env
+++ /dev/null
@@ -1 +0,0 @@
-FOO=bar
\ No newline at end of file
diff --git a/code/examples/react-ts/.storybook/main.ts b/code/examples/react-ts/.storybook/main.ts
deleted file mode 100644
index 3329e0868074..000000000000
--- a/code/examples/react-ts/.storybook/main.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import type { StorybookConfig } from '@storybook/react-webpack5';
-
-const config: StorybookConfig = {
- stories: [
- {
- directory: '../src/title',
- titlePrefix: 'Custom Prefix',
- },
- {
- directory: '../src',
- titlePrefix: 'Demo',
- files: '*.stories.(js|ts|tsx)',
- },
- ],
- logLevel: 'debug',
- addons: [
- '@storybook/addon-essentials',
- '@storybook/addon-storysource',
- '@storybook/addon-storyshots',
- '@storybook/addon-a11y',
- ],
- docs: {
- // enabled: false,
- defaultName: 'Info',
- // docsPage: false,
- },
- typescript: {
- check: true,
- checkOptions: {},
- reactDocgenTypescriptOptions: {
- propFilter: (prop) => ['label', 'disabled'].includes(prop.name),
- },
- },
- core: {
- channelOptions: { allowFunction: false, maxDepth: 10 },
- disableTelemetry: true,
- },
- features: {
- postcss: false,
- storyStoreV7: !global.navigator?.userAgent?.match?.('jsdom'),
- buildStoriesJson: true,
- babelModeV7: true,
- warnOnLegacyHierarchySeparator: false,
- previewMdx2: true,
- breakingChangesV7: true,
- },
- framework: '@storybook/react-webpack5',
-};
-module.exports = config;
diff --git a/code/examples/react-ts/.storybook/manager.js b/code/examples/react-ts/.storybook/manager.js
deleted file mode 100644
index ece01ccdfaee..000000000000
--- a/code/examples/react-ts/.storybook/manager.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { addons } from '@storybook/addons';
-import startCase from 'lodash/startCase';
-
-addons.setConfig({
- sidebar: {
- renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)),
- },
-});
diff --git a/code/examples/react-ts/.storybook/preview.tsx b/code/examples/react-ts/.storybook/preview.tsx
deleted file mode 100644
index 47aa5c189bfe..000000000000
--- a/code/examples/react-ts/.storybook/preview.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import { ThemeProvider, convert, themes } from '@storybook/theming';
-
-export const parameters = {
- options: {
- // storySortV6: (a, b) => (
- // a[1].kind === b[1].kind
- // ? 0
- // : a[1].id.localeCompare(b[1].id, undefined, { numeric: true });
- // ),
- // storySortV7: (a, b) => (
- // a.title === b.title
- // ? 0
- // : a.id.localeCompare(b.id, undefined, { numeric: true });
- // ),
- storySort: {
- order: ['Examples', 'Docs', 'Demo'],
- },
- },
-};
-
-export const decorators = [
- (StoryFn) => (
-
-
-
- ),
-];
diff --git a/code/examples/react-ts/README.md b/code/examples/react-ts/README.md
deleted file mode 100644
index 70d4f2ccb02b..000000000000
--- a/code/examples/react-ts/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Storybook TS example
-
-This Storybook demonstrates support for TypeScript in Storybook without additional configuration.
diff --git a/code/examples/react-ts/package.json b/code/examples/react-ts/package.json
deleted file mode 100644
index 53f6320a55b9..000000000000
--- a/code/examples/react-ts/package.json
+++ /dev/null
@@ -1,41 +0,0 @@
-{
- "name": "@storybook/example-react-ts",
- "version": "7.0.0-alpha.35",
- "private": true,
- "scripts": {
- "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true storybook build",
- "debug": "cross-env NODE_OPTIONS=--inspect-brk STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true storybook dev -p 9011",
- "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true storybook dev --port=3044"
- },
- "dependencies": {
- "formik": "^2.2.9",
- "prop-types": "15.7.2",
- "react": "16.14.0",
- "react-dom": "16.14.0"
- },
- "devDependencies": {
- "@babel/preset-env": "^7.12.11",
- "@babel/preset-react": "^7.12.10",
- "@babel/preset-typescript": "^7.12.7",
- "@storybook/addon-essentials": "7.0.0-alpha.35",
- "@storybook/addon-storyshots": "7.0.0-alpha.35",
- "@storybook/addon-storysource": "7.0.0-alpha.35",
- "@storybook/addons": "7.0.0-alpha.35",
- "@storybook/cli": "7.0.0-alpha.35",
- "@storybook/components": "7.0.0-alpha.35",
- "@storybook/react": "7.0.0-alpha.35",
- "@storybook/react-webpack5": "7.0.0-alpha.35",
- "@storybook/theming": "7.0.0-alpha.35",
- "@testing-library/dom": "^7.31.2",
- "@testing-library/react": "12.1.2",
- "@testing-library/user-event": "^13.1.9",
- "@types/babel__preset-env": "^7",
- "@types/react": "^16.14.23",
- "@types/react-dom": "^16.9.14",
- "cross-env": "^7.0.3",
- "lodash": "^4.17.21",
- "storybook": "7.0.0-alpha.35",
- "typescript": "~4.6.3",
- "webpack": "5"
- }
-}
diff --git a/code/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap b/code/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap
deleted file mode 100644
index 056db72986e9..000000000000
--- a/code/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap
+++ /dev/null
@@ -1,292 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Custom Prefix/AutoTitle Basic 1`] = `
-.emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 8px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -moz-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #F5FBFF;
- color: #2E3438;
- box-shadow: #D9E8F2 0 0 0 1px inset;
- border-radius: 4px;
- padding: 10px 16px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 12px;
- width: 12px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: 0;
- margin-bottom: 0;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #ebf7ff;
-}
-
-.emotion-0:active {
- background: #F5FBFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(2,156,253,1) 0 0 0 1px inset;
- outline: none;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -moz-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
-`;
-
-exports[`Storyshots Custom Prefix/CustomTitle Basic 1`] = `
-.emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 8px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -moz-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #F5FBFF;
- color: #2E3438;
- box-shadow: #D9E8F2 0 0 0 1px inset;
- border-radius: 4px;
- padding: 10px 16px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 12px;
- width: 12px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: 0;
- margin-bottom: 0;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #ebf7ff;
-}
-
-.emotion-0:active {
- background: #F5FBFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(2,156,253,1) 0 0 0 1px inset;
- outline: none;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -moz-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
-`;
-
-exports[`Storyshots Demo/Examples / Button Basic 1`] = `
-
-`;
-
-exports[`Storyshots Demo/Examples / Button CSF 2 Story With Play 1`] = `
-
-`;
-
-exports[`Storyshots Demo/Examples / Button Process Env 1`] = `
-
-`;
-
-exports[`Storyshots Demo/Examples / Button Story No Render 1`] = `
-
-`;
-
-exports[`Storyshots Demo/Examples / Button Story Object 1`] = `"hahaha"`;
-
-exports[`Storyshots Demo/Examples / Button Story With Play 1`] = `
-
-`;
-
-exports[`Storyshots Demo/Examples / Button With Args 1`] = `
-
-`;
-
-exports[`Storyshots Demo/Examples / Emoji Button Basic 1`] = `
-
-`;
-
-exports[`Storyshots Demo/Examples / Emoji Button With Args 1`] = `
-
-`;
-
-exports[`Storyshots Demo/button2 One 1`] = `
-
-`;
-
-exports[`Storyshots Demo/button2 Three 1`] = `
-
-`;
-
-exports[`Storyshots Demo/button2 Two 1`] = `
-
-`;
-
-exports[`Storyshots Demo/button3 Five 1`] = `
-
-`;
-
-exports[`Storyshots Demo/button3 Four 1`] = `
-
-`;
diff --git a/code/examples/react-ts/src/button.stories.tsx b/code/examples/react-ts/src/button.stories.tsx
deleted file mode 100644
index 9586792e875d..000000000000
--- a/code/examples/react-ts/src/button.stories.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-/* eslint-disable storybook/await-interactions */
-/* eslint-disable storybook/use-storybook-testing-library */
-// @TODO: use addon-interactions and remove the rule disable above
-import React from 'react';
-import type { Meta, ComponentStoryFn } from '@storybook/react';
-import { screen } from '@testing-library/dom';
-import userEvent from '@testing-library/user-event';
-import { Button } from './button';
-
-const icons = {
- foo: () => <>Foo,
- bar: () => <>Bar,
-};
-
-export default {
- component: Button,
- title: 'Examples / Button',
- argTypes: {
- onClick: { action: 'click ' },
- icon: {
- description: 'An icon, displayed to the left of the title.',
- control: { type: 'select' },
- options: Object.keys(icons),
- mapping: icons,
- },
- },
- // render: () => <>hohoho,
-} as Meta;
-
-export const WithArgs: ComponentStoryFn = (args) => ;
-WithArgs.args = { label: 'With args' };
-
-export const Basic = () => ;
-
-export const StoryObject = {
- render: () => <>hahaha,
-};
-
-export const StoryNoRender = {
- args: { label: 'magic!' },
-};
-
-export const ProcessEnv = {
- args: { label: process.env.FOO },
- play: () => {
- process.env.BAZ = 'moo';
- },
-};
-
-export const StoryWithPlay = {
- args: { label: 'play' },
- play: () => {
- console.log('play!!');
- userEvent.click(screen.getByRole('button'));
- },
-};
-
-export const CSF2StoryWithPlay = WithArgs.bind({});
-CSF2StoryWithPlay.play = () => {
- console.log('play!!');
- userEvent.click(screen.getByRole('button'));
-};
diff --git a/code/examples/react-ts/src/button.tsx b/code/examples/react-ts/src/button.tsx
deleted file mode 100644
index 714b5db4e0f6..000000000000
--- a/code/examples/react-ts/src/button.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React, { ComponentType, ButtonHTMLAttributes, useEffect } from 'react';
-
-export interface ButtonProps extends ButtonHTMLAttributes {
- /**
- * A label to show on the button
- */
- label: string;
-
- /**
- * An icon to show on the left of the label
- */
- icon?: ComponentType;
-}
-
-export const Button = ({ label = 'Hello', icon: Icon, ...props }: ButtonProps) => {
- useEffect(() => {
- const fn = () => console.log(`click ${label}`);
- global.window.document.querySelector('body')?.addEventListener('click', fn);
- return () => global.window.document.querySelector('body')?.removeEventListener('click', fn);
- });
- return (
-
- );
-};
diff --git a/code/examples/react-ts/src/button2.stories.tsx b/code/examples/react-ts/src/button2.stories.tsx
deleted file mode 100644
index cfaa6df924d4..000000000000
--- a/code/examples/react-ts/src/button2.stories.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Button } from './button';
-
-export default {
- component: Button,
- title: 'button2',
-};
-
-export const one = { args: { label: 'one' } };
-export const two = { args: { label: 'two' } };
-export const three = { args: { label: 'three' } };
diff --git a/code/examples/react-ts/src/button3.stories.tsx b/code/examples/react-ts/src/button3.stories.tsx
deleted file mode 100644
index 941d8f436f3b..000000000000
--- a/code/examples/react-ts/src/button3.stories.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Button } from './button';
-
-export default {
- component: Button,
- title: 'button3',
-};
-
-export const four = { args: { label: 'four' } };
-export const five = { args: { label: 'five' } };
diff --git a/code/examples/react-ts/src/emoji-button.js b/code/examples/react-ts/src/emoji-button.js
deleted file mode 100644
index 716afa1238c0..000000000000
--- a/code/examples/react-ts/src/emoji-button.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export const EmojiButton = ({ label, ...props }) => (
-
-);
-
-EmojiButton.propTypes = {
- /**
- * A label to show on the button
- */
- label: PropTypes.string,
-};
-
-EmojiButton.defaultProps = {
- label: 'Hello',
-};
diff --git a/code/examples/react-ts/src/emoji-button.stories.js b/code/examples/react-ts/src/emoji-button.stories.js
deleted file mode 100644
index 1e0fd8061134..000000000000
--- a/code/examples/react-ts/src/emoji-button.stories.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import { EmojiButton } from './emoji-button';
-
-export default { component: EmojiButton, title: 'Examples / Emoji Button' };
-
-export const WithArgs = (args) => ;
-WithArgs.args = { label: 'With args' };
-export const Basic = () => ;
diff --git a/code/examples/react-ts/src/storyshots.test.ts b/code/examples/react-ts/src/storyshots.test.ts
deleted file mode 100644
index ac3f54f235b5..000000000000
--- a/code/examples/react-ts/src/storyshots.test.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import path from 'path';
-import initStoryshots from '@storybook/addon-storyshots';
-
-initStoryshots({
- framework: 'react',
- configPath: path.join(__dirname, '..', '.storybook'),
-});
diff --git a/code/examples/react-ts/src/title/AutoTitle.stories.js b/code/examples/react-ts/src/title/AutoTitle.stories.js
deleted file mode 100644
index a7fcbf4a4e82..000000000000
--- a/code/examples/react-ts/src/title/AutoTitle.stories.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { Form } from '@storybook/components';
-
-const { Button } = Form;
-
-export default {
- // Title not needed due to CSF3 auto-title
- // title: 'AutoTitle',
- component: Button,
-};
-
-export const Basic = () => ;
diff --git a/code/examples/react-ts/src/title/CustomTitle.stories.js b/code/examples/react-ts/src/title/CustomTitle.stories.js
deleted file mode 100644
index 12182a5d961e..000000000000
--- a/code/examples/react-ts/src/title/CustomTitle.stories.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import { Form } from '@storybook/components';
-
-const { Button } = Form;
-
-export default {
- title: 'CustomTitle',
- component: Button,
-};
-
-export const Basic = () => ;
diff --git a/code/examples/react-ts/tsconfig.json b/code/examples/react-ts/tsconfig.json
deleted file mode 100644
index 2fcaac37a471..000000000000
--- a/code/examples/react-ts/tsconfig.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
- "compilerOptions": {
- "baseUrl": ".",
- "target": "ES2020",
- "module": "CommonJS",
- "esModuleInterop": true,
- "jsx": "preserve",
- "skipLibCheck": true,
- "strict": true
- },
- "include": ["src/*", ".storybook/main.ts"]
-}
diff --git a/code/jest.config.js b/code/jest.config.js
index 2609907a2e99..bc6f13e83cbb 100644
--- a/code/jest.config.js
+++ b/code/jest.config.js
@@ -41,7 +41,6 @@ module.exports = {
'/lib',
'/renderers',
'/examples/official-storybook',
- '/examples/react-ts',
],
transform: {
'^.+\\.stories\\.[jt]sx?$': '@storybook/addon-storyshots/injectFileName',
diff --git a/code/jest.init.ts b/code/jest.init.ts
index 8c49f8647736..bf6a5ee3a9af 100644
--- a/code/jest.init.ts
+++ b/code/jest.init.ts
@@ -43,7 +43,7 @@ const ignoreList = [
(error: any) =>
error.message.includes('react-async-component-lifecycle-hooks') &&
error.stack.includes('addons/knobs/src/components/__tests__/Options.js'),
- // Storyshots blows up if your project includes a (non stories.) mdx file (react-ts does).
+ // Storyshots blows up if your project includes a (non stories.) mdx file.
(error: any) => error.message.match(/Unexpected error while loading .*(?