GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 09:51:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: resolve conflict

Browse Source
This commit is contained in:
fushen 2019-12-27 21:57:21 +08:00
commit 6a4524d54c
14 changed files with 30350 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
addons/docs/package.json
View File

@ -22,6 +22,7 @@
"docs/**/*", "docs/**/*",
"angular/**/*", "angular/**/*",
"common/**/*", "common/**/*",
"ember/**/*",
"html/**/*", "html/**/*",
"postinstall/**/*", "postinstall/**/*",
"react/**/*", "react/**/*",

2
addons/info/package.json
View File

@ -34,7 +34,7 @@
"@storybook/theming": "5.3.0-rc.1", "@storybook/theming": "5.3.0-rc.1",
"core-js": "^3.0.1", "core-js": "^3.0.1",
"global": "^4.3.2", "global": "^4.3.2",
"marksy": "^7.0.0", "marksy": "^8.0.0",
"nested-object-assign": "^1.0.3", "nested-object-assign": "^1.0.3",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react": "^16.8.3", "react": "^16.8.3",

4
app/react/README.md
View File

@ -35,7 +35,9 @@ This preset enables support for all Create React App features, including Sass/SC
## Typescript ## 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 ## Docs

7
examples/standalone-preview/stories/Component1.stories.tsx Normal file
View File

@ -0,0 +1,7 @@
import * as React from 'react';
export default {
title: 'Component 1',
};
export const Story1 = () => <div>Component 1 - Story 1</div>;

8
examples/standalone-preview/stories/Component2.stories.tsx Normal file
View File

@ -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>;

2
examples/standalone-preview/storybook.html
View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script src="./storybook.tsx"></script> <script src="./storybook.ts"></script>
<div class="sb-errordisplay sb-wrapper"> <div class="sb-errordisplay sb-wrapper">
<div id="error-message" class="sb-heading"></div> <div id="error-message" class="sb-heading"></div>
<pre class="sb-errordisplay_code"><code id="error-stack"></code></pre> <pre class="sb-errordisplay_code"><code id="error-stack"></code></pre>

5
examples/standalone-preview/storybook.ts Normal file
View File

@ -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);

10
examples/standalone-preview/storybook.tsx
View File

@ -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);

5
lib/components/src/Loader/Loader.stories.tsx Normal file
View File

@ -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" />);

24
lib/components/src/Loader/Loader.tsx Normal file
View File

@ -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',
}));

3
lib/components/src/index.ts
View File

@ -35,3 +35,6 @@ export { StorybookIcon } from './brand/StorybookIcon';
// Doc blocks // Doc blocks
export * from './blocks'; export * from './blocks';
// Loader
export { Loader } from './Loader/Loader';

9
lib/ui/src/app.stories.js
View File

@ -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) storiesOf('UI/Layout/App', module)
.addParameters({ .addParameters({
component: App, component: App,
}) })
.add('default', () => <App provider={new FakeProvider()} />); .add('default', () => <App provider={new FakeProvider()} />)
.add('loading state', () => <App provider={new FakeLoadingProvider()} />);

16
lib/ui/src/components/preview/preview.js
View File

@ -5,9 +5,10 @@ import memoize from 'memoizerific';
import copy from 'copy-to-clipboard'; import copy from 'copy-to-clipboard';
import { styled } from '@storybook/theming'; import { styled } from '@storybook/theming';
import { Consumer } from '@storybook/api';
import { SET_CURRENT_STORY } from '@storybook/core-events'; import { SET_CURRENT_STORY } from '@storybook/core-events';
import { types } from '@storybook/addons'; 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'; import { Helmet } from 'react-helmet-async';
@ -217,6 +218,10 @@ const getDocumentTitle = description => {
return description ? `${description} ⋅ Storybook` : 'Storybook'; return description ? `${description} ⋅ Storybook` : 'Storybook';
}; };
const mapper = ({ state }) => ({
loading: !state.storiesConfigured,
});
class Preview extends Component { class Preview extends Component {
shouldComponentUpdate({ storyId, viewMode, docsOnly, options, queryParams }) { shouldComponentUpdate({ storyId, viewMode, docsOnly, options, queryParams }) {
const { props } = this; const { props } = this;
@ -277,7 +282,14 @@ class Preview extends Component {
customCanvas, customCanvas,
}; };
return <ActualPreview {...props} />; return (
<>
<Consumer filter={mapper}>
{state => state.loading && <Loader role="progressbar" />}
</Consumer>
<ActualPreview {...props} />
</>
);
}} }}
</ZoomConsumer> </ZoomConsumer>
), ),

30271
yarn.lock
View File

File diff suppressed because it is too large Load Diff