Fix missing react-demo

addons/storyshots/storyshots-core/stories/react-demo.js

@@ -0,0 +1,34 @@
+import React from 'react';
+
+const styles = {
+  border: '1px solid #eee',
+  borderRadius: 3,
+  backgroundColor: '#FFFFFF',
+  cursor: 'pointer',
+  fontSize: 15,
+  padding: '3px 10px',
+  margin: 10,
+};
+
+// eslint-disable-next-line react/prop-types
+export const Button = ({ children, onClick }) => (
+  <button onClick={onClick} style={styles} type="button">
+    {children}
+  </button>
+);
+
+Button.displayName = 'Button';
+Button.defaultProps = {
+  onClick: () => {},
+};
+
+// eslint-disable-next-line react/prop-types
+export const Welcome = ({ showApp }) => (
+  <button type="button" onClick={showApp}>
+    Welcome
+  </button>
+);
+Welcome.displayName = 'Welcome';
+Welcome.defaultProps = {
+  showApp: () => {},
+};

addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { action } from '@storybook/addon-actions';
-import { Button } from '@storybook/react/demo';
+import { Button } from '../react-demo';
 
 export default {
   title: 'Button',

addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { linkTo } from '@storybook/addon-links';
-import { Welcome } from '@storybook/react/demo';
+import { Welcome } from '../react-demo';
 
 export default {
   title: 'Welcome',

addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.mdx

@@ -1,5 +1,5 @@
 import { linkTo } from '@storybook/addon-links';
-import { Welcome } from '@storybook/react/demo';
+import { Welcome } from '../react-demo';
 import { Meta, Story } from '@storybook/addon-docs';
 
 <Meta

examples/cra-kitchen-sink/src/components/react-demo.js

@@ -0,0 +1,34 @@
+import React from 'react';
+
+const styles = {
+  border: '1px solid #eee',
+  borderRadius: 3,
+  backgroundColor: '#FFFFFF',
+  cursor: 'pointer',
+  fontSize: 15,
+  padding: '3px 10px',
+  margin: 10,
+};
+
+// eslint-disable-next-line react/prop-types
+export const Button = ({ children, onClick }) => (
+  <button onClick={onClick} style={styles} type="button">
+    {children}
+  </button>
+);
+
+Button.displayName = 'Button';
+Button.defaultProps = {
+  onClick: () => {},
+};
+
+// eslint-disable-next-line react/prop-types
+export const Welcome = ({ showApp }) => (
+  <button type="button" onClick={showApp}>
+    Welcome
+  </button>
+);
+Welcome.displayName = 'Welcome';
+Welcome.defaultProps = {
+  showApp: () => {},
+};

examples/cra-kitchen-sink/src/stories/button.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { Button } from '@storybook/react/demo';
+import { Button } from '../components/react-demo';
 
 export default {
   title: 'Button',

examples/cra-kitchen-sink/src/stories/cra-dynamic-import.stories.js

@@ -9,7 +9,7 @@ export default {
 
 export const Story1 = () => {
   if (!Component) {
-    import('@storybook/react/demo').then(({ Button }) => {
+    import('../components/react-demo').then(({ Button }) => {
       Component = Button;
       forceReRender();
     });

examples/cra-kitchen-sink/src/stories/decorators.stories.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { Button } from '@storybook/react/demo';
 import PropTypes from 'prop-types';
+import { Button } from '../components/react-demo';
 
 const Bold = ({ children }) => {
   return <b>{children}</b>;

examples/cra-kitchen-sink/src/stories/force-rerender.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { forceReRender } from '@storybook/react';
-import { Button } from '@storybook/react/demo';
+import { Button } from '../components/react-demo';
 
 let count = 0;
 const increment = () => {

examples/cra-kitchen-sink/src/stories/long-description.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { Button } from '@storybook/react/demo';
+import { Button } from '../components/react-demo';
 
 export default {
   title: 'Some really long story kind description',

examples/cra-kitchen-sink/src/stories/welcome.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Welcome } from '@storybook/react/demo';
 import { linkTo } from '@storybook/addon-links';
+import { Welcome } from '../components/react-demo';
 
 export default {
   title: 'Welcome',

examples/cra-react15/src/stories/button.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { Button } from '@storybook/react/demo';
+import { Button } from './react-demo';
 
 export default {
   title: 'Button',

examples/cra-react15/src/stories/react-demo.js

@@ -0,0 +1,34 @@
+import React from 'react';
+
+const styles = {
+  border: '1px solid #eee',
+  borderRadius: 3,
+  backgroundColor: '#FFFFFF',
+  cursor: 'pointer',
+  fontSize: 15,
+  padding: '3px 10px',
+  margin: 10,
+};
+
+// eslint-disable-next-line react/prop-types
+export const Button = ({ children, onClick }) => (
+  <button onClick={onClick} style={styles} type="button">
+    {children}
+  </button>
+);
+
+Button.displayName = 'Button';
+Button.defaultProps = {
+  onClick: () => {},
+};
+
+// eslint-disable-next-line react/prop-types
+export const Welcome = ({ showApp }) => (
+  <button type="button" onClick={showApp}>
+    Welcome
+  </button>
+);
+Welcome.displayName = 'Welcome';
+Welcome.defaultProps = {
+  showApp: () => {},
+};

examples/cra-react15/src/stories/welcome.stories.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { storiesOf, setAddon } from '@storybook/react';
 import { linkTo } from '@storybook/addon-links';
-import { Welcome } from '@storybook/react/demo';
+import { Welcome } from './react-demo';
 
 // Added deprecated setAddon tests
 setAddon({

examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { linkTo } from '@storybook/addon-links';
-import { Welcome } from '@storybook/react/demo';
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Welcome } from './react-demo';
 
 export default {
   title: 'Welcome',

examples/cra-ts-essentials/src/stories/1-Button.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Button } from '@storybook/react/demo';
 import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Button } from './react-demo';
 
 export default {
   title: 'Button',

examples/cra-ts-essentials/src/stories/react-demo.tsx

@@ -0,0 +1,37 @@
+import React, { FC, HTMLAttributes } from 'react';
+
+const styles = {
+  border: '1px solid #eee',
+  borderRadius: 3,
+  backgroundColor: '#FFFFFF',
+  cursor: 'pointer',
+  fontSize: 15,
+  padding: '3px 10px',
+  margin: 10,
+};
+
+type ButtonProps = Pick<HTMLAttributes<HTMLButtonElement>, 'onClick'>;
+export const Button: FC<ButtonProps> = ({ children, onClick }) => (
+  <button onClick={onClick} style={styles} type="button">
+    {children}
+  </button>
+);
+
+Button.displayName = 'Button';
+Button.defaultProps = {
+  onClick: () => {},
+};
+
+interface WelcomeProps {
+  showApp: () => void;
+}
+
+export const Welcome: FC<WelcomeProps> = ({ showApp }) => (
+  <button type="button" onClick={showApp}>
+    Welcome
+  </button>
+);
+Welcome.displayName = 'Welcome';
+Welcome.defaultProps = {
+  showApp: () => {},
+};

examples/cra-ts-kitchen-sink/src/components/react-demo.tsx

@@ -0,0 +1,37 @@
+import React, { FC, HTMLAttributes } from 'react';
+
+const styles = {
+  border: '1px solid #eee',
+  borderRadius: 3,
+  backgroundColor: '#FFFFFF',
+  cursor: 'pointer',
+  fontSize: 15,
+  padding: '3px 10px',
+  margin: 10,
+};
+
+type ButtonProps = Pick<HTMLAttributes<HTMLButtonElement>, 'onClick'>;
+export const Button: FC<ButtonProps> = ({ children, onClick }) => (
+  <button onClick={onClick} style={styles} type="button">
+    {children}
+  </button>
+);
+
+Button.displayName = 'Button';
+Button.defaultProps = {
+  onClick: () => {},
+};
+
+interface WelcomeProps {
+  showApp: () => void;
+}
+
+export const Welcome: FC<WelcomeProps> = ({ showApp }) => (
+  <button type="button" onClick={showApp}>
+    Welcome
+  </button>
+);
+Welcome.displayName = 'Welcome';
+Welcome.defaultProps = {
+  showApp: () => {},
+};

examples/cra-ts-kitchen-sink/src/stories/0-Welcome.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { linkTo } from '@storybook/addon-links';
-import { Welcome } from '@storybook/react/demo';
+import { Welcome } from '../components/react-demo';
 
 export default {
   title: 'Welcome',

examples/official-storybook/components/react-demo.tsx

@@ -0,0 +1,37 @@
+import React, { FC, HTMLAttributes } from 'react';
+
+const styles = {
+  border: '1px solid #eee',
+  borderRadius: 3,
+  backgroundColor: '#FFFFFF',
+  cursor: 'pointer',
+  fontSize: 15,
+  padding: '3px 10px',
+  margin: 10,
+};
+
+type ButtonProps = Pick<HTMLAttributes<HTMLButtonElement>, 'onClick'>;
+export const Button: FC<ButtonProps> = ({ children, onClick }) => (
+  <button onClick={onClick} style={styles} type="button">
+    {children}
+  </button>
+);
+
+Button.displayName = 'Button';
+Button.defaultProps = {
+  onClick: () => {},
+};
+
+interface WelcomeProps {
+  showApp: () => void;
+}
+
+export const Welcome: FC<WelcomeProps> = ({ showApp }) => (
+  <button type="button" onClick={showApp}>
+    Welcome
+  </button>
+);
+Welcome.displayName = 'Welcome';
+Welcome.defaultProps = {
+  showApp: () => {},
+};

examples/official-storybook/stories/addon-docs/addon-docs-mdx.stories.mdx

@@ -9,8 +9,8 @@ import {
   Meta,
 } from '@storybook/addon-docs';
 import { action } from '@storybook/addon-actions';
-import { Button } from '@storybook/react/demo';
 import styled from 'styled-components';
+import { Button } from '../../components/react-demo';
 import TsButton from '../../components/TsButton';
 import FlowTypeButton from '../../components/FlowTypeButton';
 import { DocgenButton } from '../../components/DocgenButton';

examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.js

@@ -1,6 +1,6 @@
 /* eslint-disable storybook/default-exports */
 import React from 'react';
-import { Button } from '@storybook/react/demo';
+import { Button } from '../../components/react-demo';
 
 // NOTE: commented out default since these stories are re-exported
 // in the primary file './csf-docs-with-mdx-docs.stories.mdx'

examples/official-storybook/stories/addon-docs/imported.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from '@storybook/react/demo';
+import { Button } from '../../components/react-demo';
 
 export default { title: 'Addons/Docs/Imported', component: Button };
 export const Basic = (args: any) => <Button {...args} />;

examples/official-storybook/stories/core/interleaved-exports.stories.js

@@ -7,10 +7,10 @@ export default {
   parameters: { chromatic: { disable: true } },
 };
 
-import { Welcome } from '@storybook/react/demo';
+import { Welcome } from '../../components/react-demo';
 
 export const First = () => <Welcome showApp={action('show')} />;
 
-import { Button } from '@storybook/react/demo';
+import { Button } from '../../components/react-demo';
 
 export const Second = () => <Button onClick={action('click')}>Second</Button>;

examples/official-storybook/stories/core/layout.stories.mdx

@@ -1,5 +1,5 @@
 import { Meta, Canvas, Story } from '@storybook/addon-docs';
-import { Button } from '@storybook/react/demo';
+import { Button } from '../../components/react-demo';
 
 <Meta
   title="Core/Layout MDX"

examples/official-storybook/stories/demo/button.stories.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import { Button } from '@storybook/react/demo';
+import { Button } from '../../components/react-demo';
 
 export default {
   title: 'Other/Demo/Button',

examples/official-storybook/stories/demo/button.stories.mdx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import { Button } from '@storybook/react/demo';
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { Button } from '../../compoenents/react-demo';
 
 <Meta title="Other/Demo/ButtonMdx" component={Button} />
 

examples/official-storybook/stories/demo/welcome.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { linkTo } from '@storybook/addon-links';
-import { Welcome } from '@storybook/react/demo';
+import { Welcome } from '../../components/react-demo';
 
 export default {
   title: 'Other/Demo/Welcome',