From 3899ea89c2703d87401e2a07112e2717574e6e6a Mon Sep 17 00:00:00 2001 From: Alexandre Le Lain Date: Thu, 12 Dec 2019 17:57:23 +0100 Subject: [PATCH 1/8] feat(ui, mobile): add loader to mobile canvas tab during stories loading time --- lib/components/src/Loader/Loader.stories.tsx | 5 ++++ lib/components/src/Loader/Loader.tsx | 26 ++++++++++++++++++++ lib/components/src/index.ts | 3 +++ lib/ui/src/components/preview/preview.js | 16 ++++++++++-- 4 files changed, 48 insertions(+), 2 deletions(-) create mode 100644 lib/components/src/Loader/Loader.stories.tsx create mode 100644 lib/components/src/Loader/Loader.tsx diff --git a/lib/components/src/Loader/Loader.stories.tsx b/lib/components/src/Loader/Loader.stories.tsx new file mode 100644 index 00000000000..33e4cca3b6f --- /dev/null +++ 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', () => ); diff --git a/lib/components/src/Loader/Loader.tsx b/lib/components/src/Loader/Loader.tsx new file mode 100644 index 00000000000..26f095541f4 --- /dev/null +++ b/lib/components/src/Loader/Loader.tsx @@ -0,0 +1,26 @@ +import { keyframes, styled } from '@storybook/theming'; + +const spin = keyframes` + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +`; + +export const Loader = styled.div` + animation: ${spin} 1s linear infinite; + border-radius: 50%; + height: 48px; + left: calc(50% - 24px); + position: absolute; + top: calc(50% - 24px); + width: 48px; + z-index: 4; + ${({ theme }) => ` + border: 3px solid ${theme.color.secondary}; + `} + border-top: 3px solid transparent; +`; diff --git a/lib/components/src/index.ts b/lib/components/src/index.ts index 8768052d31c..b13c3d7adec 100644 --- 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'; diff --git a/lib/ui/src/components/preview/preview.js b/lib/ui/src/components/preview/preview.js index 22d703ea924..008fb34358f 100644 --- 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'; @@ -198,6 +199,10 @@ const getDocumentTitle = description => { return description ? `${description} ⋅ Storybook` : 'Storybook'; }; +const mapper = ({ state }) => ({ + loading: !state.storiesConfigured, +}); + class Preview extends Component { shouldComponentUpdate({ storyId, viewMode, options, queryParams }) { const { props } = this; @@ -256,7 +261,14 @@ class Preview extends Component { customCanvas, }; - return ; + return ( + <> + + {state => state.loading && } + + + + ); }} ), From 18dd0edff282f1233f19e328c4575011a9733158 Mon Sep 17 00:00:00 2001 From: Alexandre Le Lain Date: Tue, 17 Dec 2019 14:43:52 +0100 Subject: [PATCH 2/8] docs(ui, preview): added loading state story --- lib/ui/src/app.stories.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/lib/ui/src/app.stories.js b/lib/ui/src/app.stories.js index 121409f3868..86486c830a1 100644 --- 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

Switch between Desktop and Mobile viewport to see how the loading state behaves.

; + } +} + storiesOf('UI/Layout/App', module) .addParameters({ component: App, }) - .add('default', () => ); + .add('default', () => ) + .add('loading state', () => ); From 6dc0bdee00dbd2e86f247c773282f1905f415e1f Mon Sep 17 00:00:00 2001 From: Alexandre Le Lain Date: Sat, 21 Dec 2019 17:55:17 +0100 Subject: [PATCH 3/8] refactor(ui, loader): use object style --- lib/components/src/Loader/Loader.tsx | 26 ++++++++++++-------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/lib/components/src/Loader/Loader.tsx b/lib/components/src/Loader/Loader.tsx index 26f095541f4..5d06b32424f 100644 --- a/lib/components/src/Loader/Loader.tsx +++ b/lib/components/src/Loader/Loader.tsx @@ -10,17 +10,15 @@ const spin = keyframes` } `; -export const Loader = styled.div` - animation: ${spin} 1s linear infinite; - border-radius: 50%; - height: 48px; - left: calc(50% - 24px); - position: absolute; - top: calc(50% - 24px); - width: 48px; - z-index: 4; - ${({ theme }) => ` - border: 3px solid ${theme.color.secondary}; - `} - border-top: 3px solid transparent; -`; +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', +})); From 6296650317f6ba500e673aa28cf092e571088364 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 23 Dec 2019 14:42:01 +0800 Subject: [PATCH 4/8] Port standalone example to CSF --- .../stories/Component1.stories.tsx | 7 +++++++ .../stories/Component2.stories.tsx | 8 ++++++++ examples/standalone-preview/storybook.tsx | 12 ++++-------- 3 files changed, 19 insertions(+), 8 deletions(-) create mode 100644 examples/standalone-preview/stories/Component1.stories.tsx create mode 100644 examples/standalone-preview/stories/Component2.stories.tsx diff --git a/examples/standalone-preview/stories/Component1.stories.tsx b/examples/standalone-preview/stories/Component1.stories.tsx new file mode 100644 index 00000000000..03736b01f08 --- /dev/null +++ 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 = () =>
Component 1 - Story 1
; diff --git a/examples/standalone-preview/stories/Component2.stories.tsx b/examples/standalone-preview/stories/Component2.stories.tsx new file mode 100644 index 00000000000..f9ba700e48d --- /dev/null +++ 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 = () =>
Component 2 - Story 1
; +export const Story2 = () =>
Component 2 - Story 2
; diff --git a/examples/standalone-preview/storybook.tsx b/examples/standalone-preview/storybook.tsx index 8c0e649e168..ceebaa84710 100644 --- a/examples/standalone-preview/storybook.tsx +++ b/examples/standalone-preview/storybook.tsx @@ -1,10 +1,6 @@ import * as React from 'react'; -import { configure, storiesOf } from '@storybook/react'; +import { configure } from '@storybook/react'; +import * as Comp1 from './stories/Component1.stories'; +import * as Comp2 from './stories/Component2.stories'; -configure(() => { - storiesOf('Component 1', module).add('Story 1', () =>
Component 1 - Story 1
); - - storiesOf('Component 2', module) - .add('Story 1', () =>
Category 2 - Story 1
) - .add('Story 2', () =>
Category 2 - Story 2
); -}, module); +configure(() => [Comp1, Comp2], module); From 6c9758829dcec8a70b50f6ef84d4203b97b1d8ee Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 23 Dec 2019 14:43:15 +0800 Subject: [PATCH 5/8] Cleanup standalone CSF --- examples/standalone-preview/storybook.html | 2 +- examples/standalone-preview/{storybook.tsx => storybook.ts} | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) rename examples/standalone-preview/{storybook.tsx => storybook.ts} (86%) diff --git a/examples/standalone-preview/storybook.html b/examples/standalone-preview/storybook.html index ee1a10affe6..302bfe485f6 100644 --- a/examples/standalone-preview/storybook.html +++ b/examples/standalone-preview/storybook.html @@ -8,7 +8,7 @@
- +
diff --git a/examples/standalone-preview/storybook.tsx b/examples/standalone-preview/storybook.ts similarity index 86% rename from examples/standalone-preview/storybook.tsx rename to examples/standalone-preview/storybook.ts index ceebaa84710..6480e83e1f2 100644 --- a/examples/standalone-preview/storybook.tsx +++ b/examples/standalone-preview/storybook.ts @@ -1,4 +1,3 @@ -import * as React from 'react'; import { configure } from '@storybook/react'; import * as Comp1 from './stories/Component1.stories'; import * as Comp2 from './stories/Component2.stories'; From 7b712b5e674270fac881906c22696e14c70d1fde Mon Sep 17 00:00:00 2001 From: CPatchane Date: Mon, 23 Dec 2019 16:12:16 +0100 Subject: [PATCH 6/8] Update README about @storybook/react typescript part --- app/react/README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/react/README.md b/app/react/README.md index 5576862408b..c3958dd0032 100644 --- 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 From 9e31e3d91398ec248eaf17c35bd3a7a4c4d6e73a Mon Sep 17 00:00:00 2001 From: Matthew Irish Date: Mon, 23 Dec 2019 15:08:54 -0600 Subject: [PATCH 7/8] include ember files when publishing addon-docs --- addons/docs/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/addons/docs/package.json b/addons/docs/package.json index fcbcba822ca..a55466ed946 100644 --- a/addons/docs/package.json +++ b/addons/docs/package.json @@ -22,6 +22,7 @@ "docs/**/*", "angular/**/*", "common/**/*", + "ember/**/*", "html/**/*", "postinstall/**/*", "react/**/*", From efbee26aae8a5ea48de375f9ccec891eaf53214d Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 24 Dec 2019 11:49:17 +0800 Subject: [PATCH 8/8] Addon-info: Upgrade marksy for security --- addons/info/package.json | 2 +- yarn.lock | 32 ++++++++++++++++---------------- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/addons/info/package.json b/addons/info/package.json index 3ec2e066abd..1e283f4685d 100644 --- 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", diff --git a/yarn.lock b/yarn.lock index 5a6de0d29ac..8b1a179f4b9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1512,6 +1512,11 @@ dependencies: regenerator-runtime "^0.13.2" +"@babel/standalone@^7.4.5": + version "7.7.7" + resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.7.7.tgz#4ab48826641e696bcd3902236b4f7bbb4b611630" + integrity sha512-nlhwSzfCVWFxIfY0wL1DJkHyyDbqHNTldCAaAljzPHJ/ppYziziSoM0HJn919e54uUxtO3AAdp8CWqOn8CON/w== + "@babel/template@^7.0.0", "@babel/template@^7.4.0", "@babel/template@^7.4.4", "@babel/template@^7.6.0", "@babel/template@^7.7.4": version "7.7.4" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.7.4.tgz#428a7d9eecffe27deac0a98e23bf8e3675d2a77b" @@ -6949,11 +6954,6 @@ babel-runtime@6, babel-runtime@6.26.0, babel-runtime@^6.11.6, babel-runtime@^6.1 core-js "^2.4.0" regenerator-runtime "^0.11.0" -babel-standalone@^6.26.0: - version "6.26.0" - resolved "https://registry.yarnpkg.com/babel-standalone/-/babel-standalone-6.26.0.tgz#15fb3d35f2c456695815ebf1ed96fe7f015b6886" - integrity sha1-Ffs9NfLEVmlYFevx7Zb+fwFbaIY= - babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02" @@ -20054,10 +20054,10 @@ markdown-to-jsx@^6.10.3, markdown-to-jsx@^6.9.1, markdown-to-jsx@^6.9.3: prop-types "^15.6.2" unquote "^1.1.0" -marked@^0.6.2: - version "0.6.3" - resolved "https://registry.yarnpkg.com/marked/-/marked-0.6.3.tgz#79babad78af638ba4d522a9e715cdfdd2429e946" - integrity sha512-Fqa7eq+UaxfMriqzYLayfqAE40WN03jf+zHjT18/uXNuzjq3TY0XTbrAoPeqSJrAmPz11VuUA+kBPYOhHt9oOQ== +marked@^0.3.12: + version "0.3.19" + resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.19.tgz#5d47f709c4c9fc3c216b6d46127280f40b39d790" + integrity sha512-ea2eGWOqNxPcXv8dyERdSr/6FmzvWwzjMxpfGB/sbMccXoct+xY+YukPD+QTUZwyvK7BZwcr4m21WBOW41pAkg== marked@^0.7.0: version "0.7.0" @@ -20156,14 +20156,14 @@ marko@^4.1.1, marko@^4.10.0, marko@^4.18.25: try-require "^1.2.1" warp10 "^2.0.1" -marksy@^7.0.0: - version "7.0.1" - resolved "https://registry.yarnpkg.com/marksy/-/marksy-7.0.1.tgz#fb26f780ce56bf5ca48fc137efdef1f97dd4c7ef" - integrity sha512-tB4cQxIY7f8PWTcIouJO/V60rl9JVVOmCDjmukYVO7mdpGM1JWl4qIP98iDYItexSXZ0DkEqk6yXFxgdmZRMxA== +marksy@^8.0.0: + version "8.0.0" + resolved "https://registry.yarnpkg.com/marksy/-/marksy-8.0.0.tgz#b595f121fd47058df9dda1448f6ee156ab48810a" + integrity sha512-mmHcKZojCQAGuKTuu3153viXdCuxUmsSxomFaSOBTkOlfWFOZBmDhmJkOp0CsPMNRQ7m6oN2wflvAHLpBNZVPw== dependencies: - babel-standalone "^6.26.0" - he "^1.1.1" - marked "^0.6.2" + "@babel/standalone" "^7.4.5" + he "^1.2.0" + marked "^0.3.12" match-require@2.1.0: version "2.1.0"