chore: resolve conflict

2025-04-03 05:04:51 +08:00 · 2019-12-27 21:57:21 +08:00 · 2019-12-27 21:57:21 +08:00 · 6a4524d54c
commit 6a4524d54c
parent 8fabc7d25b caa153a1fb
14 changed files with 30350 additions and 17 deletions
--- a/addons/docs/package.json
+++ b/addons/docs/package.json
@ -22,6 +22,7 @@
    "docs/**/*",
    "angular/**/*",
    "common/**/*",
+    "ember/**/*",
    "html/**/*",
    "postinstall/**/*",
    "react/**/*",
--- a/addons/info/package.json
+++ b/addons/info/package.json
@ -34,7 +34,7 @@
    "@storybook/theming": "5.3.0-rc.1",
    "core-js": "^3.0.1",
    "global": "^4.3.2",
-    "marksy": "^7.0.0",
+    "marksy": "^8.0.0",
    "nested-object-assign": "^1.0.3",
    "prop-types": "^15.7.2",
    "react": "^16.8.3",
--- a/app/react/README.md
+++ b/app/react/README.md
@ -35,7 +35,9 @@ This preset enables support for all Create React App features, including Sass/SC

 ## Typescript

-If you are using Typescript, make sure you have the type definitions installed via `yarn add @types/node @types/react @types/storybook__react --dev`.
+`@storybook/react` is now exporting its own types to use with Typescript.
+You don't need to have `@types/storybook__react` installed anymore if it was your case.
+But you probably also need to use types from `@types/node @types/react`.

 ## Docs

--- a/examples/standalone-preview/stories/Component1.stories.tsx
+++ b/examples/standalone-preview/stories/Component1.stories.tsx
@ -0,0 +1,7 @@
+import * as React from 'react';
+
+export default {
+  title: 'Component 1',
+};
+
+export const Story1 = () => <div>Component 1 - Story 1</div>;
--- a/examples/standalone-preview/stories/Component2.stories.tsx
+++ b/examples/standalone-preview/stories/Component2.stories.tsx
@ -0,0 +1,8 @@
+import * as React from 'react';
+
+export default {
+  title: 'Component 2',
+};
+
+export const Story1 = () => <div>Component 2 - Story 1</div>;
+export const Story2 = () => <div>Component 2 - Story 2</div>;
--- a/examples/standalone-preview/storybook.html
+++ b/examples/standalone-preview/storybook.html
@ -8,7 +8,7 @@
  </head>
  <body>
    <div id="root"></div>
-    <script src="./storybook.tsx"></script>
+    <script src="./storybook.ts"></script>
    <div class="sb-errordisplay sb-wrapper">
      <div id="error-message" class="sb-heading"></div>
      <pre class="sb-errordisplay_code"><code id="error-stack"></code></pre>
--- a/examples/standalone-preview/storybook.ts
+++ b/examples/standalone-preview/storybook.ts
@ -0,0 +1,5 @@
+import { configure } from '@storybook/react';
+import * as Comp1 from './stories/Component1.stories';
+import * as Comp2 from './stories/Component2.stories';
+
+configure(() => [Comp1, Comp2], module);
--- a/examples/standalone-preview/storybook.tsx
+++ b/examples/standalone-preview/storybook.tsx
@ -1,10 +0,0 @@
-import * as React from 'react';
-import { configure, storiesOf } from '@storybook/react';
-
-configure(() => {
-  storiesOf('Component 1', module).add('Story 1', () => <div>Component 1 - Story 1</div>);
-
-  storiesOf('Component 2', module)
-    .add('Story 1', () => <div>Category 2 - Story 1</div>)
-    .add('Story 2', () => <div>Category 2 - Story 2</div>);
-}, module);
--- a/lib/components/src/Loader/Loader.stories.tsx
+++ b/lib/components/src/Loader/Loader.stories.tsx
@ -0,0 +1,5 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { Loader } from './Loader';
+
+storiesOf('Basics/Loader', module).add('infinite state', () => <Loader role="progressbar" />);
--- a/lib/components/src/Loader/Loader.tsx
+++ b/lib/components/src/Loader/Loader.tsx
@ -0,0 +1,24 @@
+import { keyframes, styled } from '@storybook/theming';
+
+const spin = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+`;
+
+export const Loader = styled.div(({ theme }) => ({
+  animation: `${spin} 1s linear infinite`,
+  borderRadius: '50%',
+  height: 48,
+  left: 'calc(50% - 24px)',
+  position: 'absolute',
+  top: 'calc(50% - 24px)',
+  width: 48,
+  zIndex: 4,
+  border: `3px solid ${theme.color.secondary}`,
+  borderTop: '3px solid transparent',
+}));
--- a/lib/components/src/index.ts
+++ b/lib/components/src/index.ts
@ -35,3 +35,6 @@ export { StorybookIcon } from './brand/StorybookIcon';

 // Doc blocks
 export * from './blocks';
+
+// Loader
+export { Loader } from './Loader/Loader';
--- a/lib/ui/src/app.stories.js
+++ b/lib/ui/src/app.stories.js
@ -34,8 +34,15 @@ class FakeProvider extends Provider {
  }
 }

+class FakeLoadingProvider extends FakeProvider {
+  renderPreview() {
+    return <p>Switch between Desktop and Mobile viewport to see how the loading state behaves.</p>;
+  }
+}
+
 storiesOf('UI/Layout/App', module)
  .addParameters({
    component: App,
  })
-  .add('default', () => <App provider={new FakeProvider()} />);
+  .add('default', () => <App provider={new FakeProvider()} />)
+  .add('loading state', () => <App provider={new FakeLoadingProvider()} />);
--- a/lib/ui/src/components/preview/preview.js
+++ b/lib/ui/src/components/preview/preview.js
@ -5,9 +5,10 @@ import memoize from 'memoizerific';
 import copy from 'copy-to-clipboard';

 import { styled } from '@storybook/theming';
+import { Consumer } from '@storybook/api';
 import { SET_CURRENT_STORY } from '@storybook/core-events';
 import { types } from '@storybook/addons';
-import { Icons, IconButton, TabButton, TabBar, Separator } from '@storybook/components';
+import { Icons, IconButton, Loader, TabButton, TabBar, Separator } from '@storybook/components';

 import { Helmet } from 'react-helmet-async';

@ -217,6 +218,10 @@ const getDocumentTitle = description => {
  return description ? `${description} ⋅ Storybook` : 'Storybook';
 };

+const mapper = ({ state }) => ({
+  loading: !state.storiesConfigured,
+});
+
 class Preview extends Component {
  shouldComponentUpdate({ storyId, viewMode, docsOnly, options, queryParams }) {
    const { props } = this;
@ -277,7 +282,14 @@ class Preview extends Component {
                customCanvas,
              };

-              return <ActualPreview {...props} />;
+              return (
+                <>
+                  <Consumer filter={mapper}>
+                    {state => state.loading && <Loader role="progressbar" />}
+                  </Consumer>
+                  <ActualPreview {...props} />
+                </>
+              );
            }}
          </ZoomConsumer>
        ),
--- a/yarn.lock
+++ b/yarn.lock