mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 06:41:17 +08:00
Merge branch 'next' into 6646-docs-mode-nav-ui
This commit is contained in:
Michael Shilman
commit
257315311d
@ -51,7 +51,55 @@ jobs:
|
||||
command: yarn chromatic --storybook-build-dir="built-storybooks/official-storybook" --exit-zero-on-changes --app-code="ab7m45tp9p"
|
||||
- run:
|
||||
name: Run chromatic on the pre-built angular example
|
||||
command: yarn chromatic --storybook-build-dir="built-storybooks/angular-cli" --exit-zero-on-changes --app-code="tl92yzsj6w"
|
||||
command: yarn chromatic --storybook-build-dir="built-storybooks/angular-cli" --app-code="tl92yzsj6w"
|
||||
- run:
|
||||
name: Run chromatic on the pre-built cra-kitchen-sink example
|
||||
command: yarn chromatic --storybook-build-dir="built-storybooks/cra-kitchen-sink" --app-code="tg55gajmdt"
|
||||
- run:
|
||||
name: Run chromatic on the pre-built cra-react15 example
|
||||
command: yarn chromatic --storybook-build-dir="built-storybooks/cra-react15" --app-code="gxk7iqej3wt"
|
||||
- run:
|
||||
name: Run chromatic on the pre-built cra-ts-essentials example
|
||||
command: yarn chromatic --storybook-build-dir="built-storybooks/cra-ts-essentials" --app-code="b311ypk6of"
|
||||
- run:
|
||||
name: Run chromatic on the pre-built cra-ts-kitchen-sink example
|
||||
command: yarn chromatic --storybook-build-dir="built-storybooks/cra-ts-kitchen-sink" --app-code="19whyj1tlac"
|
||||
- run:
|
||||
name: Run chromatic on the pre-built dev-kits example
|
||||
command: yarn chromatic --storybook-build-dir="built-storybooks/dev-kits" --app-code="7yykp9ifdxx"
|
||||
- run:
|
||||
name: Run chromatic on the pre-built ember-cli example
|
||||
command: yarn chromatic --storybook-build-dir="built-storybooks/ember-cli" --app-code="19z23qxndju"
|
||||
- run:
|
||||
name: Run chromatic on the pre-built html-kitchen-sink example
|
||||
command: yarn chromatic --storybook-build-dir="built-storybooks/html-kitchen-sink" --app-code="e8zolxoyg8o"
|
||||
- run:
|
||||
name: Run chromatic on the pre-built marko-cli example
|
||||
command: yarn chromatic --storybook-build-dir="built-storybooks/marko-cli" --app-code="qaegx64axu"
|
||||
- run:
|
||||
name: Run chromatic on the pre-built mithril-kitchen-sink example
|
||||
command: yarn chromatic --storybook-build-dir="built-storybooks/mithril-kitchen-sink" --app-code="8adgm46jzk8"
|
||||
- run:
|
||||
name: Run chromatic on the pre-built polymer-cli example
|
||||
command: yarn chromatic --storybook-build-dir="built-storybooks/polymer-cli" --app-code="o6jl9kmh0qd"
|
||||
- run:
|
||||
name: Run chromatic on the pre-built preact-kitchen-sink example
|
||||
command: yarn chromatic --storybook-build-dir="built-storybooks/preact-kitchen-sink" --app-code="ls0ikhnwqt"
|
||||
- run:
|
||||
name: Run chromatic on the pre-built rax-kitchen-sink example
|
||||
command: yarn chromatic --storybook-build-dir="built-storybooks/rax-kitchen-sink" --app-code="4co6vptx8qo"
|
||||
- run:
|
||||
name: Run chromatic on the pre-built riot-kitchen-sink example
|
||||
command: yarn chromatic --storybook-build-dir="built-storybooks/riot-kitchen-sink" --app-code="g2dp3lnr34a"
|
||||
- run:
|
||||
name: Run chromatic on the pre-built svelte-kitchen-sink example
|
||||
command: yarn chromatic --storybook-build-dir="built-storybooks/svelte-kitchen-sink" --app-code="8ob73wgl995"
|
||||
- run:
|
||||
name: Run chromatic on the pre-built vue-kitchen-sink example
|
||||
command: yarn chromatic --storybook-build-dir="built-storybooks/vue-kitchen-sink" --app-code="cyxj0e38bqj"
|
||||
- run:
|
||||
name: Run chromatic on the pre-built web-components-kitchen-sink example
|
||||
command: yarn chromatic --storybook-build-dir="built-storybooks/web-components-kitchen-sink" --app-code="npm5gsofwkf"
|
||||
|
||||
packtracker:
|
||||
<<: *defaults
|
||||
|
||||
@ -15,8 +15,9 @@ scripts/storage
|
||||
examples/ember-cli/.storybook/preview-head.html
|
||||
examples/official-storybook/tests/addon-jest.test.js
|
||||
examples/cra-ts-kitchen-sink/*.json
|
||||
examples/cra-ts-kitchen-sink/public/*.json
|
||||
examples/cra-ts-kitchen-sink/public/*.html
|
||||
examples/cra-ts-kitchen-sink/public/*
|
||||
examples/cra-ts-essentials/*.json
|
||||
examples/cra-ts-essentials/public/*
|
||||
|
||||
!.remarkrc.js
|
||||
!.babelrc.js
|
||||
|
||||
2
.github/automention.yml
vendored
2
.github/automention.yml
vendored
@ -7,7 +7,7 @@
|
||||
'app: react-native': ['benoitdion', 'gongreg']
|
||||
'app: react-native-server': ['benoitdion', 'gongreg']
|
||||
'app: svelte': ['rixo', 'cam-stitt', 'plumpNation']
|
||||
'app: vue': ['backbone87', 'elevatebart', 'pksunkara', 'Aaron-Pool']
|
||||
'app: vue': ['backbone87', 'elevatebart', 'pksunkara', 'Aaron-Pool', 'pocka']
|
||||
'app: web-components': ['daKmoR']
|
||||
'api: addons': ['ndelangen']
|
||||
'addon: a11y': ['CodeByAlex', 'Armanio', 'jsomsanith']
|
||||
|
||||
90
CHANGELOG.md
90
CHANGELOG.md
@ -1,3 +1,93 @@
|
||||
## 5.3.0-beta.22 (December 12, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* React: Fix CRA preset check ([#9142](https://github.com/storybookjs/storybook/pull/9142))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* Build: Change CI to chromatic on all examples ([#9114](https://github.com/storybookjs/storybook/pull/9114))
|
||||
* Web-components: Clean up example `custom-elements.json` and expose `defaultValue` ([#9107](https://github.com/storybookjs/storybook/pull/9107))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
* Restore main jscodeshift package ([#9140](https://github.com/storybookjs/storybook/pull/9140))
|
||||
|
||||
## 5.3.0-beta.21 (December 11, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* CLI: Add Yarn workspaces support for init command ([#9104](https://github.com/storybookjs/storybook/pull/9104))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-docs: Update MDX compiler to fix knobs ([#9118](https://github.com/storybookjs/storybook/pull/9118))
|
||||
* CLI: Add web-components to sb init ([#9106](https://github.com/storybookjs/storybook/pull/9106))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* UI: Remove css usage ([#9003](https://github.com/storybookjs/storybook/pull/9003))
|
||||
|
||||
## 5.3.0-beta.20 (December 9, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* Addon-essentials: Remove docs from essentials ([#9093](https://github.com/storybookjs/storybook/pull/9093))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Source-loader: Handle includeStories/excludeStories in CSF ([#9100](https://github.com/storybookjs/storybook/pull/9100))
|
||||
* Source-loader: Support function declaration story exports ([#9092](https://github.com/storybookjs/storybook/pull/9092))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* CSF: Refactor router utils into CSF library ([#9099](https://github.com/storybookjs/storybook/pull/9099))
|
||||
|
||||
## 5.3.0-beta.19 (December 7, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* Addon-essentials ([#9019](https://github.com/storybookjs/storybook/pull/9019))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-docs: Fix prop table default value for web-components ([#9086](https://github.com/storybookjs/storybook/pull/9086))
|
||||
|
||||
## 5.3.0-beta.18 (December 6, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* CLI: Change generators to Triconfig ([#9075](https://github.com/storybookjs/storybook/pull/9075))
|
||||
* Addon-docs: Add Props for Ember ([#9067](https://github.com/storybookjs/storybook/pull/9067))
|
||||
* MDX: Handle quotes / template literals in title ([#9069](https://github.com/storybookjs/storybook/pull/9069))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-docs: MDX Octicon anchors should not be tabbable ([#9063](https://github.com/storybookjs/storybook/pull/9063))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
* Addon-docs: Upgrade vue-docgen-loader ([#9082](https://github.com/storybookjs/storybook/pull/9082))
|
||||
|
||||
## 5.3.0-beta.17 (December 6, 2019)
|
||||
|
||||
NPM publish failed
|
||||
|
||||
## 5.3.0-beta.16 (December 5, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* Addon-docs: DocsPage Heading and Subheading anchor links ([#9060](https://github.com/storybookjs/storybook/pull/9060))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Core: Fix `api.selectStory` for component permalinks ([#9054](https://github.com/storybookjs/storybook/pull/9054))
|
||||
* Storyshots: Escape Windows fileNames ([#9061](https://github.com/storybookjs/storybook/pull/9061))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
* Addon-docs: Upgrade vue-docgen-api ([#9066](https://github.com/storybookjs/storybook/pull/9066))
|
||||
|
||||
## 5.3.0-beta.15 (December 4, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
69
MIGRATION.md
69
MIGRATION.md
@ -2,6 +2,7 @@
|
||||
|
||||
- [Migration](#migration)
|
||||
- [From version 5.2.x to 5.3.x](#from-version-52x-to-53x)
|
||||
- [To tri-config configuration](#to-triconfig-configuration)
|
||||
- [Create React App preset](#create-react-app-preset)
|
||||
- [Description doc block](#description-doc-block)
|
||||
- [React Native Async Storage](#react-native-async-storage)
|
||||
@ -74,8 +75,76 @@
|
||||
- [Packages renaming](#packages-renaming)
|
||||
- [Deprecated embedded addons](#deprecated-embedded-addons)
|
||||
|
||||
|
||||
## From version 5.2.x to 5.3.x
|
||||
|
||||
### To tri-config configuration
|
||||
|
||||
In storybook 5.3 3 new files for configuration were introduced, that replaced some previous files.
|
||||
|
||||
These files are now soft-deprecated, (*they still work, but over time we will promote users to migrate*):
|
||||
|
||||
- `config.js` has been renamed to `preview.js`.
|
||||
- `addons.js` has been renamed to `manager.js`.
|
||||
- `presets.js` has been renamed to `main.js`.
|
||||
|
||||
#### Using main.js
|
||||
|
||||
`main.js` is now the main point of configuration for Storybook. This is what a basic `main.js` looks like:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
stories: ['../**/*.stories.js'],
|
||||
addons: [
|
||||
'@storybook/addon-docs/register',
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
You remove all "register" import from `addons.js` and place them inside the array. If this means `addons.js` is now empty for you, it's safe to remove.
|
||||
|
||||
Next you remove the code that imports/requires all your stories from `config.js`, and change it to a glob-pattern and place that glob in the `stories` array. If this means `config.js` is empty, it's safe to remove.
|
||||
|
||||
If you had a `presets.js` file before you can add the array of presets to the main.js file and remove `presets.js` like so:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
stories: ['../**/*.stories.js'],
|
||||
presets: ['@storybook/addon-docs/preset'],
|
||||
};
|
||||
```
|
||||
|
||||
#### Using preview.js
|
||||
|
||||
If after migrating the imports/requires of your stories to `main.js` you're left with some code in `config.js` it's likely the usage of `addParameters` & `addDecorator`.
|
||||
|
||||
This is fine, rename `config.js` to `preview.js`.
|
||||
|
||||
This file can also be used to inject global stylesheets, fonts etc, into the preview bundle.
|
||||
|
||||
#### Using manager.js
|
||||
|
||||
If you are setting storybook options in `config.js`, especially `theme`, you should migrate it to `manager.js`:
|
||||
|
||||
```js
|
||||
import { addons } from '@storybook/addons';
|
||||
import { create } from '@storybook/theming/create';
|
||||
|
||||
const theme = create({
|
||||
base: 'light',
|
||||
brandTitle: 'My custom title',
|
||||
});
|
||||
|
||||
addons.setConfig({
|
||||
showRoots: true,
|
||||
panelPosition: 'bottom',
|
||||
theme,
|
||||
});
|
||||
```
|
||||
|
||||
This makes storybook load and use the theme in the manager directly.
|
||||
This allows for richer theming in the future, and has a much better performance!
|
||||
|
||||
### Create React App preset
|
||||
|
||||
You can now move to the new preset for [Create React App](https://create-react-app.dev/). The in-built preset for Create React App will be disabled in Storybook 6.0.
|
||||
|
||||
@ -3,7 +3,9 @@ import { action } from "@storybook/addon-actions";
|
||||
import { Button } from "@storybook/react/demo";
|
||||
|
||||
export default {
|
||||
title: "Button"
|
||||
title: "Button",
|
||||
excludeStories: ["text"],
|
||||
includeStories: /emoji.*/
|
||||
};
|
||||
|
||||
export const text = () => (
|
||||
@ -17,3 +19,13 @@ export const emoji = () => (
|
||||
</span>
|
||||
</Button>
|
||||
);
|
||||
|
||||
export function emojiFn() {
|
||||
return (
|
||||
<Button onClick={action("clicked")}>
|
||||
<span role="img" aria-label="so cool">
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
</Button>
|
||||
)
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "5.3.0-beta.15",
|
||||
"version": "5.3.0-beta.22",
|
||||
"description": "a11y addon for storybook",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -33,12 +33,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-beta.15",
|
||||
"@storybook/api": "5.3.0-beta.15",
|
||||
"@storybook/client-logger": "5.3.0-beta.15",
|
||||
"@storybook/components": "5.3.0-beta.15",
|
||||
"@storybook/core-events": "5.3.0-beta.15",
|
||||
"@storybook/theming": "5.3.0-beta.15",
|
||||
"@storybook/addons": "5.3.0-beta.22",
|
||||
"@storybook/api": "5.3.0-beta.22",
|
||||
"@storybook/client-logger": "5.3.0-beta.22",
|
||||
"@storybook/components": "5.3.0-beta.22",
|
||||
"@storybook/core-events": "5.3.0-beta.22",
|
||||
"@storybook/theming": "5.3.0-beta.22",
|
||||
"axe-core": "^3.3.2",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -22,9 +22,9 @@ export enum RuleType {
|
||||
|
||||
const Icon = styled(Icons)(
|
||||
{
|
||||
height: '12px',
|
||||
width: '12px',
|
||||
marginRight: '4px',
|
||||
height: 12,
|
||||
width: 12,
|
||||
marginRight: 4,
|
||||
},
|
||||
({ status, theme }: any) =>
|
||||
status === 'running'
|
||||
|
||||
@ -15,15 +15,15 @@ const ItemTitle = styled.span<{}>(({ theme }) => ({
|
||||
borderBottom: `1px solid ${theme.appBorderColor}`,
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
paddingBottom: '6px',
|
||||
marginBottom: '6px',
|
||||
paddingBottom: 6,
|
||||
marginBottom: 6,
|
||||
justifyContent: 'space-between',
|
||||
}));
|
||||
|
||||
const HighlightToggleElement = styled.span({
|
||||
fontWeight: 'normal',
|
||||
alignSelf: 'center',
|
||||
paddingRight: '15px',
|
||||
paddingRight: 15,
|
||||
input: { margin: 0 },
|
||||
});
|
||||
|
||||
|
||||
@ -4,14 +4,14 @@ import { styled } from '@storybook/theming';
|
||||
import { Result } from 'axe-core';
|
||||
|
||||
const Wrapper = styled.div({
|
||||
padding: '12px',
|
||||
marginBottom: '10px',
|
||||
padding: 12,
|
||||
marginBottom: 10,
|
||||
});
|
||||
const Help = styled.p({
|
||||
margin: '0 0 12px',
|
||||
});
|
||||
const Link = styled.a({
|
||||
marginTop: '12px',
|
||||
marginTop: 12,
|
||||
textDecoration: 'underline',
|
||||
color: 'inherit',
|
||||
display: 'block',
|
||||
|
||||
@ -24,7 +24,7 @@ const Icon = styled<any, any>(Icons)(({ theme }) => ({
|
||||
width: 10,
|
||||
minWidth: 10,
|
||||
color: theme.color.mediumdark,
|
||||
marginRight: '10px',
|
||||
marginRight: 10,
|
||||
transition: 'transform 0.1s ease-in-out',
|
||||
alignSelf: 'center',
|
||||
display: 'inline-flex',
|
||||
@ -49,7 +49,7 @@ const HeaderBar = styled.div<{}>(({ theme }) => ({
|
||||
const HighlightToggleElement = styled.span({
|
||||
fontWeight: 'normal',
|
||||
float: 'right',
|
||||
marginRight: '15px',
|
||||
marginRight: 15,
|
||||
alignSelf: 'center',
|
||||
input: { margin: 0 },
|
||||
});
|
||||
|
||||
@ -16,9 +16,9 @@ const impactColors = {
|
||||
const List = styled.div({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
paddingBottom: '4px',
|
||||
paddingRight: '4px',
|
||||
paddingTop: '4px',
|
||||
paddingBottom: 4,
|
||||
paddingRight: 4,
|
||||
paddingTop: 4,
|
||||
fontWeight: '400',
|
||||
} as any);
|
||||
|
||||
@ -26,23 +26,23 @@ const Item = styled.div(({ elementWidth }: { elementWidth: number }) => {
|
||||
const maxWidthBeforeBreak = 407;
|
||||
return {
|
||||
flexDirection: elementWidth > maxWidthBeforeBreak ? 'row' : 'inherit',
|
||||
marginBottom: elementWidth > maxWidthBeforeBreak ? '6px' : '12px',
|
||||
marginBottom: elementWidth > maxWidthBeforeBreak ? 6 : 12,
|
||||
display: elementWidth > maxWidthBeforeBreak ? 'flex' : 'block',
|
||||
};
|
||||
});
|
||||
|
||||
const StyledBadge = styled(Badge)(({ status }: { status: string }) => ({
|
||||
padding: '2px 8px',
|
||||
marginBottom: '3px',
|
||||
minWidth: '65px',
|
||||
marginBottom: 3,
|
||||
minWidth: 65,
|
||||
maxWidth: 'fit-content',
|
||||
width: '100%',
|
||||
textAlign: 'center',
|
||||
}));
|
||||
|
||||
const Message = styled.div({
|
||||
paddingLeft: '6px',
|
||||
paddingRight: '23px',
|
||||
paddingLeft: 6,
|
||||
paddingRight: 23,
|
||||
});
|
||||
|
||||
const Status = styled.div(({ passes, impact }: { passes: boolean; impact: string }) => ({
|
||||
@ -51,8 +51,8 @@ const Status = styled.div(({ passes, impact }: { passes: boolean; impact: string
|
||||
alignItems: 'center',
|
||||
color: passes ? impactColors.success : (impactColors as any)[impact],
|
||||
'& > svg': {
|
||||
height: '16px',
|
||||
width: '16px',
|
||||
height: 16,
|
||||
width: 16,
|
||||
},
|
||||
}));
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ const Wrapper = styled.div({
|
||||
|
||||
const Item = styled.div<{}>(({ theme }) => ({
|
||||
margin: '0 6px',
|
||||
padding: '5px',
|
||||
padding: 5,
|
||||
border: `1px solid ${theme.appBorderColor}`,
|
||||
borderRadius: theme.appBorderRadius,
|
||||
}));
|
||||
|
||||
@ -18,8 +18,8 @@ const Container = styled.div({
|
||||
const HighlightToggleLabel = styled.label<{}>(({ theme }) => ({
|
||||
cursor: 'pointer',
|
||||
userSelect: 'none',
|
||||
marginBottom: '3px',
|
||||
marginRight: '3px',
|
||||
marginBottom: 3,
|
||||
marginRight: 3,
|
||||
color: theme.color.dark,
|
||||
}));
|
||||
|
||||
@ -31,7 +31,7 @@ const GlobalToggle = styled.div(({ elementWidth }: { elementWidth: number }) =>
|
||||
padding: elementWidth > maxWidthBeforeBreak ? '12px 15px 10px 0' : '12px 0px 3px 12px',
|
||||
height: '40px',
|
||||
border: 'none',
|
||||
marginTop: elementWidth > maxWidthBeforeBreak ? '-40px' : '0px',
|
||||
marginTop: elementWidth > maxWidthBeforeBreak ? -40 : 0,
|
||||
float: elementWidth > maxWidthBeforeBreak ? 'right' : 'left',
|
||||
display: elementWidth > maxWidthBeforeBreak ? 'flex' : 'block',
|
||||
alignItems: 'center',
|
||||
@ -39,10 +39,10 @@ const GlobalToggle = styled.div(({ elementWidth }: { elementWidth: number }) =>
|
||||
borderBottom: elementWidth > maxWidthBeforeBreak ? 'none' : '1px solid rgba(0,0,0,.1)',
|
||||
|
||||
input: {
|
||||
marginLeft: '10',
|
||||
marginRight: '0',
|
||||
marginTop: '0',
|
||||
marginBottom: '0',
|
||||
marginLeft: 10,
|
||||
marginRight: 0,
|
||||
marginTop: 0,
|
||||
marginBottom: 0,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
@ -229,7 +229,6 @@ exports[`A11YPanel should render report 1`] = `
|
||||
"15paq49": true,
|
||||
"1977chw": true,
|
||||
"19mcg9j": true,
|
||||
"1ez3l8h": true,
|
||||
"1imo1gr": true,
|
||||
"1kbt4a0": true,
|
||||
"1l7fvsg": true,
|
||||
@ -239,6 +238,7 @@ exports[`A11YPanel should render report 1`] = `
|
||||
"6z0ulf": true,
|
||||
"animation-u07e3c": true,
|
||||
"aq4p19": true,
|
||||
"f68qle": true,
|
||||
"fg630j": true,
|
||||
"iau1th": true,
|
||||
"jb2puo": true,
|
||||
@ -620,13 +620,13 @@ exports[`A11YPanel should render report 1`] = `
|
||||
data-emotion="css"
|
||||
>
|
||||
|
||||
.css-1ez3l8h{cursor:pointer;font-size:14px;padding:12px 0px 3px 12px;height:40px;border:none;margin-top:0px;float:left;display:block;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;border-bottom:1px solid rgba(0,0,0,.1);}
|
||||
.css-f68qle{cursor:pointer;font-size:14px;padding:12px 0px 3px 12px;height:40px;border:none;margin-top:0;float:left;display:block;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;border-bottom:1px solid rgba(0,0,0,.1);}
|
||||
</style>
|
||||
<style
|
||||
data-emotion="css"
|
||||
>
|
||||
|
||||
.css-1ez3l8h input{margin-left:10;margin-right:0;margin-top:0;margin-bottom:0;}
|
||||
.css-f68qle input{margin-left:10px;margin-right:0;margin-top:0;margin-bottom:0;}
|
||||
</style>
|
||||
<style
|
||||
data-emotion="css"
|
||||
@ -846,13 +846,13 @@ exports[`A11YPanel should render report 1`] = `
|
||||
data-emotion="css"
|
||||
>
|
||||
|
||||
.css-1ez3l8h{cursor:pointer;font-size:14px;padding:12px 0px 3px 12px;height:40px;border:none;margin-top:0px;float:left;display:block;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;border-bottom:1px solid rgba(0,0,0,.1);}
|
||||
.css-f68qle{cursor:pointer;font-size:14px;padding:12px 0px 3px 12px;height:40px;border:none;margin-top:0;float:left;display:block;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;border-bottom:1px solid rgba(0,0,0,.1);}
|
||||
</style>,
|
||||
<style
|
||||
data-emotion="css"
|
||||
>
|
||||
|
||||
.css-1ez3l8h input{margin-left:10;margin-right:0;margin-top:0;margin-bottom:0;}
|
||||
.css-f68qle input{margin-left:10px;margin-right:0;margin-top:0;margin-bottom:0;}
|
||||
</style>,
|
||||
<style
|
||||
data-emotion="css"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "5.3.0-beta.15",
|
||||
"version": "5.3.0-beta.22",
|
||||
"description": "Action Logger addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -28,12 +28,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-beta.15",
|
||||
"@storybook/api": "5.3.0-beta.15",
|
||||
"@storybook/client-api": "5.3.0-beta.15",
|
||||
"@storybook/components": "5.3.0-beta.15",
|
||||
"@storybook/core-events": "5.3.0-beta.15",
|
||||
"@storybook/theming": "5.3.0-beta.15",
|
||||
"@storybook/addons": "5.3.0-beta.22",
|
||||
"@storybook/api": "5.3.0-beta.22",
|
||||
"@storybook/client-api": "5.3.0-beta.22",
|
||||
"@storybook/components": "5.3.0-beta.22",
|
||||
"@storybook/core-events": "5.3.0-beta.22",
|
||||
"@storybook/theming": "5.3.0-beta.22",
|
||||
"core-js": "^3.0.1",
|
||||
"fast-deep-equal": "^2.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -3,7 +3,7 @@ import { opacify } from 'polished';
|
||||
|
||||
export const Action = styled.div({
|
||||
display: 'flex',
|
||||
padding: '0',
|
||||
padding: 0,
|
||||
borderLeft: '5px solid transparent',
|
||||
borderBottom: '1px solid transparent',
|
||||
transition: 'all 0.1s',
|
||||
@ -17,7 +17,7 @@ export const Counter = styled.div<{}>(({ theme }) => ({
|
||||
fontWeight: theme.typography.weight.bold,
|
||||
lineHeight: 1,
|
||||
padding: '1px 5px',
|
||||
borderRadius: '20px',
|
||||
borderRadius: 20,
|
||||
margin: '2px 0px',
|
||||
}));
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "5.3.0-beta.15",
|
||||
"version": "5.3.0-beta.22",
|
||||
"description": "A storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -32,12 +32,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-beta.15",
|
||||
"@storybook/api": "5.3.0-beta.15",
|
||||
"@storybook/client-logger": "5.3.0-beta.15",
|
||||
"@storybook/components": "5.3.0-beta.15",
|
||||
"@storybook/core-events": "5.3.0-beta.15",
|
||||
"@storybook/theming": "5.3.0-beta.15",
|
||||
"@storybook/addons": "5.3.0-beta.22",
|
||||
"@storybook/api": "5.3.0-beta.22",
|
||||
"@storybook/client-logger": "5.3.0-beta.22",
|
||||
"@storybook/components": "5.3.0-beta.22",
|
||||
"@storybook/core-events": "5.3.0-beta.22",
|
||||
"@storybook/theming": "5.3.0-beta.22",
|
||||
"core-js": "^3.0.1",
|
||||
"memoizerific": "^1.11.3",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-centered",
|
||||
"version": "5.3.0-beta.15",
|
||||
"version": "5.3.0-beta.22",
|
||||
"description": "Storybook decorator to center components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,7 +29,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-beta.15",
|
||||
"@storybook/addons": "5.3.0-beta.22",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"util-deprecate": "^1.0.2"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-contexts",
|
||||
"version": "5.3.0-beta.15",
|
||||
"version": "5.3.0-beta.22",
|
||||
"description": "Storybook Addon Contexts",
|
||||
"keywords": [
|
||||
"preact",
|
||||
@ -27,10 +27,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-beta.15",
|
||||
"@storybook/api": "5.3.0-beta.15",
|
||||
"@storybook/components": "5.3.0-beta.15",
|
||||
"@storybook/core-events": "5.3.0-beta.15",
|
||||
"@storybook/addons": "5.3.0-beta.22",
|
||||
"@storybook/api": "5.3.0-beta.22",
|
||||
"@storybook/components": "5.3.0-beta.22",
|
||||
"@storybook/core-events": "5.3.0-beta.22",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"qs": "^6.6.0"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-cssresources",
|
||||
"version": "5.3.0-beta.15",
|
||||
"version": "5.3.0-beta.22",
|
||||
"description": "A storybook addon to switch between css resources at runtime for your story",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -32,10 +32,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-beta.15",
|
||||
"@storybook/api": "5.3.0-beta.15",
|
||||
"@storybook/components": "5.3.0-beta.15",
|
||||
"@storybook/core-events": "5.3.0-beta.15",
|
||||
"@storybook/addons": "5.3.0-beta.22",
|
||||
"@storybook/api": "5.3.0-beta.22",
|
||||
"@storybook/components": "5.3.0-beta.22",
|
||||
"@storybook/core-events": "5.3.0-beta.22",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-design-assets",
|
||||
"version": "5.3.0-beta.15",
|
||||
"version": "5.3.0-beta.22",
|
||||
"description": "Design asset preview for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -34,12 +34,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-beta.15",
|
||||
"@storybook/api": "5.3.0-beta.15",
|
||||
"@storybook/client-logger": "5.3.0-beta.15",
|
||||
"@storybook/components": "5.3.0-beta.15",
|
||||
"@storybook/core-events": "5.3.0-beta.15",
|
||||
"@storybook/theming": "5.3.0-beta.15",
|
||||
"@storybook/addons": "5.3.0-beta.22",
|
||||
"@storybook/api": "5.3.0-beta.22",
|
||||
"@storybook/client-logger": "5.3.0-beta.22",
|
||||
"@storybook/components": "5.3.0-beta.22",
|
||||
"@storybook/core-events": "5.3.0-beta.22",
|
||||
"@storybook/theming": "5.3.0-beta.22",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -111,7 +111,7 @@ Then add the following to your `.storybook/main.js`:
|
||||
```js
|
||||
module.exports = {
|
||||
presets: ['@storybook/addon-docs/preset'],
|
||||
stories: ['../src/**/*/stories.(js|mdx)'],
|
||||
stories: ['../src/**/*.stories.(js|mdx)'],
|
||||
};
|
||||
```
|
||||
|
||||
@ -131,8 +131,10 @@ Add the following to your Jest configuration:
|
||||
|
||||
### Be sure to check framework specific installation needs
|
||||
|
||||
- [Angular](./angular)
|
||||
- [React](./react) (covered here)
|
||||
- [Vue](./vue)
|
||||
- [Angular](./angular)
|
||||
- [Ember](./ember)
|
||||
- [Web Components](./web-components)
|
||||
|
||||
## Preset options
|
||||
@ -164,11 +166,10 @@ If you don't want to use the preset, and prefer to configure "the long way", fir
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
addons: ['@storybook/addon-docs/register']
|
||||
addons: ['@storybook/addon-docs/register'],
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
Then configure Storybook's webpack loader in `.storybook/main.js` to understand MDX story files and annotate TS/JS story files with source code using `source-loader`:
|
||||
|
||||
```js
|
||||
@ -201,7 +202,7 @@ module.exports = {
|
||||
enforce: 'pre',
|
||||
});
|
||||
return config;
|
||||
}
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
@ -22,10 +22,12 @@ First add the package. Make sure that the versions for your `@storybook/*` packa
|
||||
yarn add -D @storybook/addon-docs@next
|
||||
```
|
||||
|
||||
Then add the following to your `.storybook/presets.js` exports:
|
||||
Then add the following to your `.storybook/main.js` exports:
|
||||
|
||||
```js
|
||||
module.exports = ['@storybook/addon-docs/preset'];
|
||||
module.exports = {
|
||||
presets: ['@storybook/addon-docs/preset'],
|
||||
};
|
||||
```
|
||||
|
||||
## DocsPage
|
||||
@ -55,7 +57,7 @@ Then you'll need to configure Compodoc to generate a `documentation.json` file.
|
||||
|
||||
Unfortunately, it's not currently possible to update this dynamically as you edit your components, but [there's an open issue](https://github.com/storybookjs/storybook/issues/8672) to support this with improvements to Compodoc.
|
||||
|
||||
Next, add the following to your `.storybook/config.json` to load the Compodoc-generated file:
|
||||
Next, add the following to `.storybook/preview.ts` to load the Compodoc-generated file:
|
||||
|
||||
```js
|
||||
import { setCompodocJson } from '@storybook/addon-docs/angular';
|
||||
@ -95,10 +97,12 @@ Docs has peer dependencies on `react`, `react-is`, and `babel-loader`. If you wa
|
||||
yarn add -D react react-is babel-loader
|
||||
```
|
||||
|
||||
Then update your `.storybook/config.ts` to make sure you load MDX files:
|
||||
Then update your `.storybook/main.js` to make sure you load MDX files:
|
||||
|
||||
```ts
|
||||
configure(require.context('../src/stories', true, /\.stories\.(ts|mdx)$/), module);
|
||||
module.exports = {
|
||||
stories: ['../src/stories/**/*.stories.(js|mdx)'],
|
||||
};
|
||||
```
|
||||
|
||||
Finally, you can create MDX files like this:
|
||||
@ -131,7 +135,7 @@ Also, to use the `Props` doc block, you need to set up Compodoc, [as described a
|
||||
|
||||
Storybook Docs renders all Angular stories inside IFrames, with a default height of `60px`. You can update this default globally, or modify the IFrame height locally per story in `DocsPage` and `MDX`.
|
||||
|
||||
To update the global default, modify `.storybook/config.ts`:
|
||||
To update the global default, modify `.storybook/preview.ts`:
|
||||
|
||||
```ts
|
||||
import { addParameters } from '@storybook/angular';
|
||||
|
||||
150
addons/docs/ember/README.md
Normal file
150
addons/docs/ember/README.md
Normal file
@ -0,0 +1,150 @@
|
||||
# Storybook Docs for Ember
|
||||
|
||||
Storybook Docs transforms your Storybook stories into world-class component documentation. Storybook Docs for Ember supports [DocsPage](../docs/docspage.md) for auto-generated docs, and [MDX](../docs/mdx.md) for rich long-form docs.
|
||||
|
||||
To learn more about Storybook Docs, read the [general documentation](../README.md). To learn the Ember specifics, read on!
|
||||
|
||||
- [Installation](#installation)
|
||||
- [DocsPage](#docspage)
|
||||
- [MDX](#mdx)
|
||||
- [IFrame height](#iframe-height)
|
||||
- [More resources](#more-resources)
|
||||
|
||||
## Installation
|
||||
|
||||
First add the package. Make sure that the versions for your `@storybook/*` packages match:
|
||||
|
||||
```sh
|
||||
yarn add -D @storybook/addon-docs@next
|
||||
```
|
||||
|
||||
Then add the following to your `.storybook/main.js` presets:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
presets: ['@storybook/addon-docs/preset'],
|
||||
};
|
||||
```
|
||||
|
||||
## DocsPage
|
||||
|
||||
When you [install docs](#installation) you should get basic [DocsPage](../docs/docspage.md) documentation automagically for all your stories, available in the `Docs` tab of the Storybook UI.
|
||||
|
||||
Props tables for your components requires a few more steps. Docs for Ember relies on [@storybook/ember-cli-storybook addon](https://github.com/storybookjs/ember-cli-storybook), to extract documentation comments from your component source files. If you're using Storybook with Ember, you should already have this addon installed, you will just need to enable it by adding the following config block in your `ember-cli-build.js` file:
|
||||
|
||||
```js
|
||||
let app = new EmberApp(defaults, {
|
||||
'ember-cli-storybook': {
|
||||
enableAddonDocsIntegration: true,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
Now, running the ember-cli server will generate a JSON documentation file at `/storybook-docgen/index.json`. Since generation of this file is tied into the ember-cli build, it will get regenerated everytime component files are saved. For details on documenting your components, check out the examples in the addon that powers the generation [ember-cli-addon-docs-yuidoc](https://github.com/ember-learn/ember-cli-addon-docs-yuidoc#documenting-components).
|
||||
|
||||
Next, add the following to your `.storybook/preview.js` to load the generated json file:
|
||||
|
||||
```js
|
||||
import { setJSONDoc } from '@storybook/addon-docs/ember';
|
||||
import docJson from '../storybook-docgen/index.json';
|
||||
setJSONDoc(docJson);
|
||||
```
|
||||
|
||||
Finally, be sure to fill in the `component` field in your story metadata. This should be a string that matches the name of the `@class` used in your souce comments:
|
||||
|
||||
```ts
|
||||
export default {
|
||||
title: 'App Component',
|
||||
component: 'AppComponent',
|
||||
};
|
||||
```
|
||||
|
||||
If you haven't upgraded from `storiesOf`, you can use a parameter to do the same thing:
|
||||
|
||||
```ts
|
||||
import { storiesOf } from '@storybook/angular';
|
||||
|
||||
storiesOf('App Component', module)
|
||||
.addParameters({ component: 'AppComponent' })
|
||||
.add( ... );
|
||||
```
|
||||
|
||||
## MDX
|
||||
|
||||
[MDX](../docs/mdx.md) is a convenient way to document your components in Markdown and embed documentation components, such as stories and props tables, inline.
|
||||
|
||||
Docs has peer dependencies on `react`, `react-is`, and `babel-loader`. If you want to write stories in MDX, you'll need to add these dependencies as well:
|
||||
|
||||
```sh
|
||||
yarn add -D react react-is babel-loader
|
||||
```
|
||||
|
||||
Then update your `.storybook/main.js` to make sure you load MDX files:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
stories: ['../src/stories/**/*.stories.(js|mdx)'],
|
||||
};
|
||||
```
|
||||
|
||||
Finally, you can create MDX files like this:
|
||||
|
||||
```md
|
||||
import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
|
||||
import hbs from 'htmlbars-inline-precompile'
|
||||
|
||||
<Meta title='App Component' component='AppComponent' />
|
||||
|
||||
# App Component
|
||||
|
||||
Some **markdown** description, or whatever you want.
|
||||
|
||||
<Story name='basic' height='400px'>{{
|
||||
template: hbs`<AppComponent @title={{title}} />`,
|
||||
context: { title: "Title" },
|
||||
}}</Story>
|
||||
|
||||
## Props
|
||||
|
||||
<Props of='AppComponent' />
|
||||
```
|
||||
|
||||
Yes, it's redundant to declare `component` twice. [Coming soon](https://github.com/storybookjs/storybook/issues/8673).
|
||||
|
||||
Also, to use the `Props` doc block, you need to set up documentation generation, [as described above](#docspage).
|
||||
|
||||
## IFrame height
|
||||
|
||||
Storybook Docs renders all Ember stories inside `iframe`s, with a default height of `60px`. You can update this default globally, or modify the `iframe` height locally per story in `DocsPage` and `MDX`.
|
||||
|
||||
To update the global default, modify `.storybook/preview.js`:
|
||||
|
||||
```ts
|
||||
import { addParameters } from '@storybook/ember';
|
||||
|
||||
addParameters({ docs: { iframeHeight: 400 } });
|
||||
```
|
||||
|
||||
For `DocsPage`, you need to update the parameter locally in a story:
|
||||
|
||||
```ts
|
||||
export const basic = () => ...
|
||||
basic.story = {
|
||||
parameters: { docs: { iframeHeight: 400 } }
|
||||
}
|
||||
```
|
||||
|
||||
And for `MDX` you can modify it as an attribute on the `Story` element:
|
||||
|
||||
```md
|
||||
<Story name='basic' height='400px'>{...}</Story>
|
||||
```
|
||||
|
||||
## More resources
|
||||
|
||||
Want to learn more? Here are some more articles on Storybook Docs:
|
||||
|
||||
- References: [DocsPage](../docs/docspage.md) / [MDX](../docs/mdx.md) / [FAQ](../docs/faq.md) / [Recipes](../docs/recipes.md) / [Theming](../docs/theming.md)
|
||||
- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
|
||||
- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
|
||||
- Example: [Storybook Design System](https://github.com/storybookjs/design-system)
|
||||
1
addons/docs/ember/index.js
Normal file
1
addons/docs/ember/index.js
Normal file
@ -0,0 +1 @@
|
||||
module.exports = require('../dist/frameworks/ember');
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "5.3.0-beta.15",
|
||||
"version": "5.3.0-beta.22",
|
||||
"description": "Superior documentation for your components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,13 +45,13 @@
|
||||
"@mdx-js/loader": "^1.5.1",
|
||||
"@mdx-js/mdx": "^1.5.1",
|
||||
"@mdx-js/react": "^1.5.1",
|
||||
"@storybook/addons": "5.3.0-beta.15",
|
||||
"@storybook/api": "5.3.0-beta.15",
|
||||
"@storybook/components": "5.3.0-beta.15",
|
||||
"@storybook/postinstall": "5.3.0-beta.15",
|
||||
"@storybook/router": "5.3.0-beta.15",
|
||||
"@storybook/source-loader": "5.3.0-beta.15",
|
||||
"@storybook/theming": "5.3.0-beta.15",
|
||||
"@storybook/addons": "5.3.0-beta.22",
|
||||
"@storybook/api": "5.3.0-beta.22",
|
||||
"@storybook/components": "5.3.0-beta.22",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/postinstall": "5.3.0-beta.22",
|
||||
"@storybook/source-loader": "5.3.0-beta.22",
|
||||
"@storybook/theming": "5.3.0-beta.22",
|
||||
"acorn": "^7.1.0",
|
||||
"acorn-jsx": "^5.1.0",
|
||||
"acorn-walk": "^7.0.0",
|
||||
@ -68,8 +68,8 @@
|
||||
"remark-slug": "^5.1.2",
|
||||
"ts-dedent": "^1.1.0",
|
||||
"util-deprecate": "^1.0.2",
|
||||
"vue-docgen-api": "^3.26.0",
|
||||
"vue-docgen-loader": "^1.0.1"
|
||||
"vue-docgen-api": "^4.1.0",
|
||||
"vue-docgen-loader": "^1.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/doctrine": "^0.0.3",
|
||||
|
||||
120
addons/docs/react/README.md
Normal file
120
addons/docs/react/README.md
Normal file
@ -0,0 +1,120 @@
|
||||
<center>
|
||||
<img src="../docs/media/docspage-hero.png" width="100%" />
|
||||
</center>
|
||||
|
||||
# Storybook Docs for React
|
||||
|
||||
Storybook Docs transforms your Storybook stories into world-class component documentation. Storybook Docs for React supports [DocsPage](../docs/docspage.md) for auto-generated docs, and [MDX](../docs/mdx.md) for rich long-form docs.
|
||||
|
||||
To learn more about Storybook Docs, read the [general documentation](../README.md). To learn the React specifics, read on!
|
||||
|
||||
- [Installation](#installation)
|
||||
- [DocsPage](#docspage)
|
||||
- [MDX](#mdx)
|
||||
- [Inline stories](#inline-stories)
|
||||
- [More resources](#more-resources)
|
||||
|
||||
## Installation
|
||||
|
||||
First add the package. Make sure that the versions for your `@storybook/*` packages match:
|
||||
|
||||
```sh
|
||||
yarn add -D @storybook/addon-docs@next
|
||||
```
|
||||
|
||||
Then add the following to your `.storybook/main.js` list of `presets`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
// other settings
|
||||
presets: ['@storybook/addon-docs/preset'];
|
||||
}
|
||||
```
|
||||
|
||||
## DocsPage
|
||||
|
||||
When you [install docs](#installation) you should get basic [DocsPage](../docs/docspage.md) documentation automagically for all your stories, available in the `Docs` tab of the Storybook UI.
|
||||
|
||||
To show the props table for your component, be sure to fill in the `component` field in your story metadata:
|
||||
|
||||
```ts
|
||||
import { Button } from './Button';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
};
|
||||
```
|
||||
|
||||
If you haven't upgraded from `storiesOf`, you can use a parameter to do the same thing:
|
||||
|
||||
```ts
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { Button } from './Button';
|
||||
|
||||
storiesOf('InfoButton', module)
|
||||
.addParameters({ component: Button })
|
||||
.add( ... );
|
||||
```
|
||||
|
||||
## MDX
|
||||
|
||||
[MDX](../docs/mdx.md) is a convenient way to document your components in Markdown and embed documentation components, such as stories and props tables, inline.
|
||||
|
||||
Docs has peer dependencies on `react`, `react-is`, and `babel-loader`. If you want to write stories in MDX, you may need to add these dependencies as well:
|
||||
|
||||
```sh
|
||||
yarn add -D react react-is babel-loader
|
||||
```
|
||||
|
||||
Then update your `.storybook/main.js` to make sure you load MDX files:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
stories: ['../src/stories/**/*.stories.(js|mdx)'],
|
||||
};
|
||||
```
|
||||
|
||||
Finally, you can create MDX files like this:
|
||||
|
||||
```md
|
||||
import { Meta, Story, Props } from '@storybook/docs/blocks';
|
||||
import { Button } from './Button';
|
||||
|
||||
<Meta title='Button' component={Button} />
|
||||
|
||||
# Button
|
||||
|
||||
Some **markdown** description, or whatever you want.
|
||||
|
||||
<Story name='basic' height='400px'>
|
||||
<Button>Label</Button>
|
||||
</Story>
|
||||
|
||||
## Props
|
||||
|
||||
<Props of={Button} />
|
||||
```
|
||||
|
||||
## Inline Stories
|
||||
|
||||
Storybook Docs renders all React stories inline on the page by default. If you want to render stories in an `iframe` so that they are better isolated. To do this, update `.storybook/preview.js`:
|
||||
|
||||
```js
|
||||
import { addParameters } from '@storybook/react';
|
||||
|
||||
addParameters({
|
||||
docs: {
|
||||
inlineStories: false,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## More resources
|
||||
|
||||
Want to learn more? Here are some more articles on Storybook Docs:
|
||||
|
||||
- References: [DocsPage](../docs/docspage.md) / [MDX](../docs/mdx.md) / [FAQ](../docs/faq.md) / [Recipes](../docs/recipes.md) / [Theming](../docs/theming.md)
|
||||
- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
|
||||
- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
|
||||
- Example: [Storybook Design System](https://github.com/storybookjs/design-system)
|
||||
@ -1,7 +1,20 @@
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import { H2 } from '@storybook/components/html';
|
||||
import { HeaderMdx } from './mdx';
|
||||
|
||||
interface HeadingProps {
|
||||
export interface HeadingProps {
|
||||
children: JSX.Element | string;
|
||||
disableAnchor?: boolean;
|
||||
}
|
||||
export const Heading: FunctionComponent<HeadingProps> = ({ children }) => <H2>{children}</H2>;
|
||||
|
||||
export const Heading: FunctionComponent<HeadingProps> = ({ children, disableAnchor }) => {
|
||||
if (disableAnchor || typeof children !== 'string') {
|
||||
return <H2>{children}</H2>;
|
||||
}
|
||||
const tagID = children.toLowerCase().replace(/[^a-z0-9]/gi, '-');
|
||||
return (
|
||||
<HeaderMdx as="h2" id={tagID}>
|
||||
{children}
|
||||
</HeaderMdx>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,7 +1,16 @@
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import { H3 } from '@storybook/components/html';
|
||||
import { HeaderMdx } from './mdx';
|
||||
import { HeadingProps } from './Heading';
|
||||
|
||||
interface SubheadingProps {
|
||||
children: JSX.Element | string;
|
||||
}
|
||||
export const Subheading: FunctionComponent<SubheadingProps> = ({ children }) => <H3>{children}</H3>;
|
||||
export const Subheading: FunctionComponent<HeadingProps> = ({ children, disableAnchor }) => {
|
||||
if (disableAnchor || typeof children !== 'string') {
|
||||
return <H3>{children}</H3>;
|
||||
}
|
||||
const tagID = children.toLowerCase().replace(/[^a-z0-9]/gi, '-');
|
||||
return (
|
||||
<HeaderMdx as="h3" id={tagID}>
|
||||
{children}
|
||||
</HeaderMdx>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useContext, FunctionComponent } from 'react';
|
||||
import { parseKind } from '@storybook/router';
|
||||
import { parseKind } from '@storybook/csf';
|
||||
import { Title as PureTitle } from '@storybook/components';
|
||||
import { DocsContext } from './DocsContext';
|
||||
import { StringSlot } from './shared';
|
||||
|
||||
@ -7,8 +7,13 @@ import { styled } from '@storybook/theming';
|
||||
import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
import { scrollToElement } from './utils';
|
||||
|
||||
// Hacky utility for dealing with functions or values in MDX Story elements
|
||||
export const makeStoryFn = (val: any) => (typeof val === 'function' ? val : () => val);
|
||||
// Hacky utility for asserting identifiers in MDX Story elements
|
||||
export const assertIsFn = (val: any) => {
|
||||
if (typeof val !== 'function') {
|
||||
throw new Error(`Expected story function, got: ${val}`);
|
||||
}
|
||||
return val;
|
||||
};
|
||||
|
||||
// Hacky utilty for adding mdxStoryToId to the default context
|
||||
export const AddContext: FC<DocsContextProps> = props => {
|
||||
@ -150,6 +155,7 @@ const HeaderWithOcticonAnchor: FC<HeaderWithOcticonAnchorProps> = ({
|
||||
<OcticonAnchor
|
||||
aria-hidden="true"
|
||||
href={generateHrefWithHash(id)}
|
||||
tabIndex={-1}
|
||||
onClick={() => {
|
||||
const element = document.getElementById(id);
|
||||
if (!isNil(element)) {
|
||||
@ -174,7 +180,7 @@ interface HeaderMdxProps {
|
||||
id: string;
|
||||
}
|
||||
|
||||
const HeaderMdx: FC<HeaderMdxProps> = props => {
|
||||
export const HeaderMdx: FC<HeaderMdxProps> = props => {
|
||||
const { as, id, children, ...rest } = props;
|
||||
|
||||
// An id should have been added on every header by the "remark-slug" plugin.
|
||||
|
||||
11
addons/docs/src/frameworks/ember/config.js
Normal file
11
addons/docs/src/frameworks/ember/config.js
Normal file
@ -0,0 +1,11 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { addParameters } from '@storybook/client-api';
|
||||
import { extractProps, extractComponentDescription } from './jsondoc';
|
||||
|
||||
addParameters({
|
||||
docs: {
|
||||
iframeHeight: 80,
|
||||
extractProps,
|
||||
extractComponentDescription,
|
||||
},
|
||||
});
|
||||
1
addons/docs/src/frameworks/ember/index.js
Normal file
1
addons/docs/src/frameworks/ember/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { setJSONDoc } from './jsondoc';
|
||||
30
addons/docs/src/frameworks/ember/jsondoc.js
Normal file
30
addons/docs/src/frameworks/ember/jsondoc.js
Normal file
@ -0,0 +1,30 @@
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
/* global window */
|
||||
|
||||
export const setJSONDoc = jsondoc => {
|
||||
window.__EMBER_GENERATED_DOC_JSON__ = jsondoc;
|
||||
};
|
||||
export const getJSONDoc = () => {
|
||||
return window.__EMBER_GENERATED_DOC_JSON__;
|
||||
};
|
||||
|
||||
export const extractProps = componentName => {
|
||||
const json = getJSONDoc();
|
||||
const componentDoc = json.included.find(doc => doc.attributes.name === componentName);
|
||||
const rows = componentDoc.attributes.arguments.map(prop => {
|
||||
return {
|
||||
name: prop.name,
|
||||
type: prop.type,
|
||||
required: prop.tags.length ? prop.tags.some(tag => tag.name === 'required') : false,
|
||||
defaultValue: prop.defaultValue,
|
||||
description: prop.description,
|
||||
};
|
||||
});
|
||||
return { rows };
|
||||
};
|
||||
|
||||
export const extractComponentDescription = componentName => {
|
||||
const json = getJSONDoc();
|
||||
const componentDoc = json.included.find(doc => doc.attributes.name === componentName);
|
||||
return componentDoc.attributes.description;
|
||||
};
|
||||
@ -11,7 +11,7 @@ function mapData(data) {
|
||||
type: { summary: item.type },
|
||||
required: '',
|
||||
description: item.description,
|
||||
defaultValue: { summary: item.default },
|
||||
defaultValue: { summary: item.defaultValue },
|
||||
}));
|
||||
}
|
||||
|
||||
|
||||
@ -31,13 +31,16 @@ const getTypeSystem = (docgenInfo: DocgenInfo): TypeSystem => {
|
||||
return TypeSystem.UNKNOWN;
|
||||
};
|
||||
|
||||
export const extractComponentProps: ExtractProps = (component, section) => {
|
||||
const docgenSection = getDocgenSection(component, section);
|
||||
export const extractComponentSectionArray = (docgenSection: any) => {
|
||||
const typeSystem = getTypeSystem(docgenSection[0]);
|
||||
const createPropDef = getPropDefFactory(typeSystem);
|
||||
|
||||
if (!isValidDocgenSection(docgenSection)) {
|
||||
return [];
|
||||
}
|
||||
return docgenSection
|
||||
.map((item: any) => extractProp(item.name, item, typeSystem, createPropDef))
|
||||
.filter(Boolean);
|
||||
};
|
||||
|
||||
export const extractComponentSectionObject = (docgenSection: any) => {
|
||||
const docgenPropsKeys = Object.keys(docgenSection);
|
||||
const typeSystem = getTypeSystem(docgenSection[docgenPropsKeys[0]]);
|
||||
const createPropDef = getPropDefFactory(typeSystem);
|
||||
@ -50,7 +53,20 @@ export const extractComponentProps: ExtractProps = (component, section) => {
|
||||
? extractProp(propName, docgenInfo, typeSystem, createPropDef)
|
||||
: null;
|
||||
})
|
||||
.filter(x => x);
|
||||
.filter(Boolean);
|
||||
};
|
||||
|
||||
export const extractComponentProps: ExtractProps = (component, section) => {
|
||||
const docgenSection = getDocgenSection(component, section);
|
||||
|
||||
if (!isValidDocgenSection(docgenSection)) {
|
||||
return [];
|
||||
}
|
||||
|
||||
// vue-docgen-api has diverged from react-docgen and returns an array
|
||||
return Array.isArray(docgenSection)
|
||||
? extractComponentSectionArray(docgenSection)
|
||||
: extractComponentSectionObject(docgenSection);
|
||||
};
|
||||
|
||||
function extractProp(
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`docs-mdx-compiler-plugin component-id.mdx 1`] = `
|
||||
"/* @jsx mdx */
|
||||
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import { Button } from '@storybook/react/demo';
|
||||
import { Story, Meta } from '@storybook/addon-docs/blocks';
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`docs-mdx-compiler-plugin decorators.mdx 1`] = `
|
||||
"/* @jsx mdx */
|
||||
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import { Button } from '@storybook/react/demo';
|
||||
import { Story, Meta } from '@storybook/addon-docs/blocks';
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`docs-mdx-compiler-plugin docs-only.mdx 1`] = `
|
||||
"/* @jsx mdx */
|
||||
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import { Meta } from '@storybook/addon-docs/blocks';
|
||||
|
||||
|
||||
@ -0,0 +1,5 @@
|
||||
import { Meta } from '@storybook/addon-docs/blocks';
|
||||
|
||||
<Meta
|
||||
title="Addons/Docs/what's in a title?"
|
||||
/>
|
||||
@ -0,0 +1,53 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`docs-mdx-compiler-plugin meta-quotes-in-title.mdx 1`] = `
|
||||
"/* @jsx mdx */
|
||||
import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import { Meta } from '@storybook/addon-docs/blocks';
|
||||
|
||||
const makeShortcode = name =>
|
||||
function MDXDefaultShortcode(props) {
|
||||
console.warn(
|
||||
'Component ' +
|
||||
name +
|
||||
' was not imported, exported, or provided by MDXProvider as global scope'
|
||||
);
|
||||
return <div {...props} />;
|
||||
};
|
||||
|
||||
const layoutProps = {};
|
||||
const MDXLayout = 'wrapper';
|
||||
function MDXContent({ components, ...props }) {
|
||||
return (
|
||||
<MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
|
||||
<Meta title=\\"Addons/Docs/what's in a title?\\" mdxType=\\"Meta\\" />
|
||||
</MDXLayout>
|
||||
);
|
||||
}
|
||||
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const __page = () => {
|
||||
throw new Error('Docs-only story');
|
||||
};
|
||||
|
||||
__page.story = { parameters: { docsOnly: true } };
|
||||
|
||||
const componentMeta = { title: \\"Addons/Docs/what's in a title?\\", includeStories: ['__page'] };
|
||||
|
||||
const mdxStoryNameToId = {};
|
||||
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = {
|
||||
...(componentMeta.parameters.docs || {}),
|
||||
page: () => (
|
||||
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
|
||||
<MDXContent />
|
||||
</AddContext>
|
||||
),
|
||||
};
|
||||
|
||||
export default componentMeta;
|
||||
"
|
||||
`;
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`docs-mdx-compiler-plugin non-story-exports.mdx 1`] = `
|
||||
"/* @jsx mdx */
|
||||
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import { Button } from '@storybook/react/demo';
|
||||
import { Story, Meta } from '@storybook/addon-docs/blocks';
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`docs-mdx-compiler-plugin parameters.mdx 1`] = `
|
||||
"/* @jsx mdx */
|
||||
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import { Button } from '@storybook/react/demo';
|
||||
import { Story, Meta } from '@storybook/addon-docs/blocks';
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`docs-mdx-compiler-plugin previews.mdx 1`] = `
|
||||
"/* @jsx mdx */
|
||||
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import { Button } from '@storybook/react/demo';
|
||||
import { Preview, Story, Meta } from '@storybook/addon-docs/blocks';
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`docs-mdx-compiler-plugin story-current.mdx 1`] = `
|
||||
"/* @jsx mdx */
|
||||
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import { Story } from '@storybook/addon-docs/blocks';
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`docs-mdx-compiler-plugin story-def-text-only.mdx 1`] = `
|
||||
"/* @jsx mdx */
|
||||
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import { Story, Meta } from '@storybook/addon-docs/blocks';
|
||||
|
||||
@ -32,7 +32,7 @@ function MDXContent({ components, ...props }) {
|
||||
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const text = makeStoryFn('Plain text');
|
||||
export const text = () => 'Plain text';
|
||||
text.story = {};
|
||||
text.story.name = 'text';
|
||||
text.story.parameters = { mdxSource: \\"'Plain text'\\" };
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`docs-mdx-compiler-plugin story-definitions.mdx 1`] = `
|
||||
"/* @jsx mdx */
|
||||
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import { Button } from '@storybook/react/demo';
|
||||
import { Story, Meta } from '@storybook/addon-docs/blocks';
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`docs-mdx-compiler-plugin story-function-var.mdx 1`] = `
|
||||
"/* @jsx mdx */
|
||||
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import { Meta, Story } from '@storybook/addon-docs/blocks';
|
||||
export const basicFn = () => <Button mdxType=\\"Button\\" />;
|
||||
@ -36,7 +36,7 @@ function MDXContent({ components, ...props }) {
|
||||
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const basic = makeStoryFn(basicFn);
|
||||
export const basic = assertIsFn(basicFn);
|
||||
basic.story = {};
|
||||
basic.story.name = 'basic';
|
||||
basic.story.parameters = { mdxSource: 'basicFn' };
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`docs-mdx-compiler-plugin story-function.mdx 1`] = `
|
||||
"/* @jsx mdx */
|
||||
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
|
||||
const makeShortcode = name =>
|
||||
function MDXDefaultShortcode(props) {
|
||||
@ -33,12 +33,12 @@ function MDXContent({ components, ...props }) {
|
||||
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const functionStory = makeStoryFn(() => {
|
||||
export const functionStory = () => {
|
||||
const btn = document.createElement('button');
|
||||
btn.innerHTML = 'Hello Button';
|
||||
btn.addEventListener('click', action('Click'));
|
||||
return btn;
|
||||
});
|
||||
};
|
||||
functionStory.story = {};
|
||||
functionStory.story.name = 'function';
|
||||
functionStory.story.parameters = {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`docs-mdx-compiler-plugin story-object.mdx 1`] = `
|
||||
"/* @jsx mdx */
|
||||
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import { Story, Meta } from '@storybook/addon-docs/blocks';
|
||||
import { Welcome, Button } from '@storybook/angular/demo';
|
||||
@ -42,7 +42,7 @@ function MDXContent({ components, ...props }) {
|
||||
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const toStorybook = makeStoryFn({
|
||||
export const toStorybook = () => ({
|
||||
template: \`<storybook-welcome-component (showApp)=\\"showApp()\\"></storybook-welcome-component>\`,
|
||||
props: {
|
||||
showApp: linkTo('Button'),
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`docs-mdx-compiler-plugin story-references.mdx 1`] = `
|
||||
"/* @jsx mdx */
|
||||
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import { Story } from '@storybook/addon-docs/blocks';
|
||||
|
||||
|
||||
@ -0,0 +1,4 @@
|
||||
import { Meta, Story } from '@storybook/addon-docs/blocks';
|
||||
import { titleFunction } from '../title-generators';
|
||||
|
||||
<Meta title={`${titleFunction('template')}`} />
|
||||
@ -0,0 +1,54 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`docs-mdx-compiler-plugin title-template-string.mdx 1`] = `
|
||||
"/* @jsx mdx */
|
||||
import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import { Meta, Story } from '@storybook/addon-docs/blocks';
|
||||
import { titleFunction } from '../title-generators';
|
||||
|
||||
const makeShortcode = name =>
|
||||
function MDXDefaultShortcode(props) {
|
||||
console.warn(
|
||||
'Component ' +
|
||||
name +
|
||||
' was not imported, exported, or provided by MDXProvider as global scope'
|
||||
);
|
||||
return <div {...props} />;
|
||||
};
|
||||
|
||||
const layoutProps = {};
|
||||
const MDXLayout = 'wrapper';
|
||||
function MDXContent({ components, ...props }) {
|
||||
return (
|
||||
<MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
|
||||
<Meta title={\`\${titleFunction('template')}\`} mdxType=\\"Meta\\" />
|
||||
</MDXLayout>
|
||||
);
|
||||
}
|
||||
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const __page = () => {
|
||||
throw new Error('Docs-only story');
|
||||
};
|
||||
|
||||
__page.story = { parameters: { docsOnly: true } };
|
||||
|
||||
const componentMeta = { title: \`\${titleFunction('template')}\`, includeStories: ['__page'] };
|
||||
|
||||
const mdxStoryNameToId = {};
|
||||
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = {
|
||||
...(componentMeta.parameters.docs || {}),
|
||||
page: () => (
|
||||
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
|
||||
<MDXContent />
|
||||
</AddContext>
|
||||
),
|
||||
};
|
||||
|
||||
export default componentMeta;
|
||||
"
|
||||
`;
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`docs-mdx-compiler-plugin vanilla.mdx 1`] = `
|
||||
"/* @jsx mdx */
|
||||
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import { Button } from '@storybook/react/demo';
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ const parser = require('@babel/parser');
|
||||
const generate = require('@babel/generator').default;
|
||||
const camelCase = require('lodash/camelCase');
|
||||
const jsStringEscape = require('js-string-escape');
|
||||
const { toId, storyNameFromExport } = require('@storybook/router/utils');
|
||||
const { toId, storyNameFromExport } = require('@storybook/csf');
|
||||
|
||||
// Generate the MDX as is, but append named exports for every
|
||||
// story in the contents
|
||||
@ -55,7 +55,7 @@ function genStoryExport(ast, context) {
|
||||
|
||||
let body = ast.children.find(n => n.type !== 'JSXText');
|
||||
let storyCode = null;
|
||||
let isJsx = false;
|
||||
|
||||
if (!body) {
|
||||
// plain text node
|
||||
const { code } = generate(ast.children[0], {});
|
||||
@ -64,21 +64,29 @@ function genStoryExport(ast, context) {
|
||||
if (body.type === 'JSXExpressionContainer') {
|
||||
// FIXME: handle fragments
|
||||
body = body.expression;
|
||||
} else {
|
||||
isJsx = true;
|
||||
}
|
||||
const { code } = generate(body, {});
|
||||
storyCode = code;
|
||||
}
|
||||
if (isJsx) {
|
||||
statements.push(
|
||||
`export const ${storyKey} = () => (
|
||||
|
||||
let storyVal = null;
|
||||
switch (body && body.type) {
|
||||
// We don't know what type the identifier is, but this code
|
||||
// assumes it's a function from CSF. Let's see who complains!
|
||||
case 'Identifier':
|
||||
storyVal = `assertIsFn(${storyCode})`;
|
||||
break;
|
||||
case 'ArrowFunctionExpression':
|
||||
storyVal = `(${storyCode})`;
|
||||
break;
|
||||
default:
|
||||
storyVal = `() => (
|
||||
${storyCode}
|
||||
);`
|
||||
);
|
||||
} else {
|
||||
statements.push(`export const ${storyKey} = makeStoryFn(${storyCode});`);
|
||||
)`;
|
||||
break;
|
||||
}
|
||||
|
||||
statements.push(`export const ${storyKey} = ${storyVal};`);
|
||||
statements.push(`${storyKey}.story = {};`);
|
||||
|
||||
// always preserve the name, since CSF exports can get modified by displayName
|
||||
@ -128,12 +136,28 @@ function genPreviewExports(ast, context) {
|
||||
return previewExports;
|
||||
}
|
||||
|
||||
function genMeta(ast) {
|
||||
function genMeta(ast, options) {
|
||||
let title = getAttr(ast.openingElement, 'title');
|
||||
let id = getAttr(ast.openingElement, 'id');
|
||||
let parameters = getAttr(ast.openingElement, 'parameters');
|
||||
let decorators = getAttr(ast.openingElement, 'decorators');
|
||||
title = title && `'${title.value}'`;
|
||||
if (title) {
|
||||
if (title.type === 'StringLiteral') {
|
||||
title = "'".concat(jsStringEscape(title.value), "'");
|
||||
} else {
|
||||
try {
|
||||
// generate code, so the expression is evaluated by the CSF compiler
|
||||
const { code } = generate(title, {});
|
||||
// remove the curly brackets at start and end of code
|
||||
title = code.replace(/^\{(.+)\}$/, '$1');
|
||||
} catch (e) {
|
||||
// eat exception if title parsing didn't go well
|
||||
// eslint-disable-next-line no-console
|
||||
console.warn('Invalid title:', options.filepath);
|
||||
title = undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
id = id && `'${id.value}'`;
|
||||
if (parameters && parameters.expression) {
|
||||
const { code: params } = generate(parameters.expression, {});
|
||||
@ -151,7 +175,7 @@ function genMeta(ast) {
|
||||
};
|
||||
}
|
||||
|
||||
function getExports(node, counter) {
|
||||
function getExports(node, counter, options) {
|
||||
const { value, type } = node;
|
||||
if (type === 'jsx') {
|
||||
if (STORY_REGEX.exec(value)) {
|
||||
@ -168,7 +192,7 @@ function getExports(node, counter) {
|
||||
if (META_REGEX.exec(value)) {
|
||||
// Preview, possibly containing multiple stories
|
||||
const ast = parser.parseExpression(value, { plugins: ['jsx'] });
|
||||
return { meta: genMeta(ast) };
|
||||
return { meta: genMeta(ast, options) };
|
||||
}
|
||||
}
|
||||
return null;
|
||||
@ -270,7 +294,7 @@ function extractExports(node, options) {
|
||||
storyNameToKey: {},
|
||||
};
|
||||
node.children.forEach(n => {
|
||||
const exports = getExports(n, context);
|
||||
const exports = getExports(n, context, options);
|
||||
if (exports) {
|
||||
const { stories, meta } = exports;
|
||||
if (stories) {
|
||||
@ -310,7 +334,7 @@ function extractExports(node, options) {
|
||||
);
|
||||
|
||||
const fullJsx = [
|
||||
'import { makeStoryFn, AddContext } from "@storybook/addon-docs/blocks";',
|
||||
'import { assertIsFn, AddContext } from "@storybook/addon-docs/blocks";',
|
||||
defaultJsx,
|
||||
...storyExports,
|
||||
`const componentMeta = ${stringifyMeta(metaExport)};`,
|
||||
|
||||
1
addons/docs/src/mdx/title-generators.js
Normal file
1
addons/docs/src/mdx/title-generators.js
Normal file
@ -0,0 +1 @@
|
||||
export const titleFunction = title => `Addons/Docs/${title}`;
|
||||
@ -22,10 +22,12 @@ First add the package. Make sure that the versions for your `@storybook/*` packa
|
||||
yarn add -D @storybook/addon-docs@next
|
||||
```
|
||||
|
||||
Then add the following to your `.storybook/presets.js` exports:
|
||||
Then add the following to your `.storybook/main.js` presets:
|
||||
|
||||
```js
|
||||
module.exports = ['@storybook/addon-docs/preset'];
|
||||
module.exports = {
|
||||
presets: ['@storybook/addon-docs/preset'],
|
||||
};
|
||||
```
|
||||
|
||||
## DocsPage
|
||||
|
||||
54
addons/essentials/README.md
Normal file
54
addons/essentials/README.md
Normal file
@ -0,0 +1,54 @@
|
||||
# Storybook Essentials
|
||||
|
||||
Storybook Essentials is a curated collection of addons to bring out the best of Storybook.
|
||||
|
||||
Each addon is documented and maintained by the core team and will be upgraded alongside Storybook as the platform evolves. We will also do our best to maintain [framework support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md) for all of the officially supported frameworks.
|
||||
|
||||
## Contents
|
||||
|
||||
Storybook essentials includes the following addons. Addons can be disabled and re-configured as [described below](#configuration):
|
||||
|
||||
- [Actions](https://github.com/storybookjs/storybook/tree/next/addons/actions)
|
||||
- [Backgrounds](https://github.com/storybookjs/storybook/tree/next/addons/backgrounds)
|
||||
- [Knobs](https://github.com/storybookjs/storybook/tree/next/addons/knobs)
|
||||
- [Links](https://github.com/storybookjs/storybook/tree/next/addons/links)
|
||||
- [Viewport](https://github.com/storybookjs/storybook/tree/next/addons/viewport)
|
||||
|
||||
## Installation
|
||||
|
||||
You can add Essentials to your project with:
|
||||
|
||||
```
|
||||
npm install --save-dev @storybook/addon-essentials
|
||||
```
|
||||
|
||||
And then add the following line to your `.storybook/main.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
presets: ['@storybook/addon-essentials'],
|
||||
};
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
Essentials is "zero config." That means that comes with a recommended configuration out of the box.
|
||||
|
||||
If you want to reconfigure an addon, simply install that addon per that addon's installation instructions and configure it as normal. Essentials scans your project's `package.json` on startup and if detects one of its addons is already installed, it will skip that addon's configuration entirely.
|
||||
|
||||
## Disabling addons
|
||||
|
||||
Yuu can disable any of Essential's addons using the following configuration scheme in `.storybook/main.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
presets: [{
|
||||
name: '@storybook/addon-essentials'],
|
||||
options: {
|
||||
<addon-key>: false,
|
||||
}
|
||||
}]
|
||||
};
|
||||
```
|
||||
|
||||
Valid addon keys include: `actions`, `backgrounds`, `knobs`, `links`, `viewport`
|
||||
51
addons/essentials/package.json
Normal file
51
addons/essentials/package.json
Normal file
@ -0,0 +1,51 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "5.3.0-beta.22",
|
||||
"description": "Curated addons to bring out the best of Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"essentials",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/essentials",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/essentials"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "5.3.0-beta.22",
|
||||
"@storybook/addon-backgrounds": "5.3.0-beta.22",
|
||||
"@storybook/addon-knobs": "5.3.0-beta.22",
|
||||
"@storybook/addon-links": "5.3.0-beta.22",
|
||||
"@storybook/addon-viewport": "5.3.0-beta.22",
|
||||
"@storybook/addons": "5.3.0-beta.22",
|
||||
"@storybook/api": "5.3.0-beta.22",
|
||||
"@storybook/node-logger": "5.3.0-beta.22",
|
||||
"ts-dedent": "^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/jest": "^24.0.11"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"babel-loader": "^8.0.0",
|
||||
"react": "^16.8.0",
|
||||
"react-is": "^16.8.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
}
|
||||
44
addons/essentials/src/index.ts
Normal file
44
addons/essentials/src/index.ts
Normal file
@ -0,0 +1,44 @@
|
||||
import fs from 'fs';
|
||||
import { logger } from '@storybook/node-logger';
|
||||
|
||||
type PresetOptions = {
|
||||
actions?: any;
|
||||
backgrounds?: any;
|
||||
knobs?: any;
|
||||
links?: any;
|
||||
viewport?: any;
|
||||
};
|
||||
|
||||
let packageJson: any = {};
|
||||
if (fs.existsSync('./package.json')) {
|
||||
try {
|
||||
packageJson = JSON.parse(fs.readFileSync('./package.json').toString());
|
||||
} catch (err) {
|
||||
logger.error(`Error reading package.json: ${err.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
const isInstalled = (addon: string) => {
|
||||
const { dependencies, devDependencies } = packageJson;
|
||||
return (dependencies && dependencies[addon]) || (devDependencies && devDependencies[addon]);
|
||||
};
|
||||
|
||||
const makeAddon = (key: string) => `@storybook/addon-${key}`;
|
||||
|
||||
export function presets(options: PresetOptions = {}) {
|
||||
const presetAddons = ['knobs']
|
||||
.filter(key => (options as any)[key] !== false)
|
||||
.map(key => makeAddon(key))
|
||||
.filter(addon => !isInstalled(addon))
|
||||
.map(addon => `${addon}/preset`);
|
||||
return presetAddons;
|
||||
}
|
||||
|
||||
export function addons(entry: any[] = [], options: PresetOptions = {}) {
|
||||
const registerAddons = ['actions', 'backgrounds', 'links', 'viewport']
|
||||
.filter(key => (options as any)[key] !== false)
|
||||
.map(key => makeAddon(key))
|
||||
.filter(addon => !isInstalled(addon))
|
||||
.map(addon => `${addon}/register`);
|
||||
return [...entry, ...registerAddons];
|
||||
}
|
||||
1
addons/essentials/src/typings.d.ts
vendored
Normal file
1
addons/essentials/src/typings.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
declare module 'fs';
|
||||
9
addons/essentials/tsconfig.json
Normal file
9
addons/essentials/tsconfig.json
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": ["webpack-env", "jest"]
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["src/**.test.ts"]
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-events",
|
||||
"version": "5.3.0-beta.15",
|
||||
"version": "5.3.0-beta.22",
|
||||
"description": "Add events to your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -31,11 +31,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-beta.15",
|
||||
"@storybook/api": "5.3.0-beta.15",
|
||||
"@storybook/client-api": "5.3.0-beta.15",
|
||||
"@storybook/core-events": "5.3.0-beta.15",
|
||||
"@storybook/theming": "5.3.0-beta.15",
|
||||
"@storybook/addons": "5.3.0-beta.22",
|
||||
"@storybook/api": "5.3.0-beta.22",
|
||||
"@storybook/client-api": "5.3.0-beta.22",
|
||||
"@storybook/core-events": "5.3.0-beta.22",
|
||||
"@storybook/theming": "5.3.0-beta.22",
|
||||
"core-js": "^3.0.1",
|
||||
"format-json": "^1.0.3",
|
||||
"lodash": "^4.17.15",
|
||||
|
||||
@ -11,7 +11,7 @@ import { Event as EventType, OnEmitEvent } from '../index';
|
||||
const Wrapper = styled.div({
|
||||
width: '100%',
|
||||
boxSizing: 'border-box',
|
||||
padding: '10px',
|
||||
padding: 10,
|
||||
minHeight: '100%',
|
||||
});
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-google-analytics",
|
||||
"version": "5.3.0-beta.15",
|
||||
"version": "5.3.0-beta.22",
|
||||
"description": "Storybook addon for google analytics",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -20,8 +20,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-beta.15",
|
||||
"@storybook/core-events": "5.3.0-beta.15",
|
||||
"@storybook/addons": "5.3.0-beta.22",
|
||||
"@storybook/core-events": "5.3.0-beta.22",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react-ga": "^2.5.7"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-graphql",
|
||||
"version": "5.3.0-beta.15",
|
||||
"version": "5.3.0-beta.22",
|
||||
"description": "Storybook addon to display the GraphiQL IDE",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,8 +29,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-beta.15",
|
||||
"@storybook/api": "5.3.0-beta.15",
|
||||
"@storybook/addons": "5.3.0-beta.22",
|
||||
"@storybook/api": "5.3.0-beta.22",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"graphiql": "^0.16.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-info",
|
||||
"version": "5.3.0-beta.15",
|
||||
"version": "5.3.0-beta.22",
|
||||
"description": "A Storybook addon to show additional information for your stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -28,10 +28,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-beta.15",
|
||||
"@storybook/client-logger": "5.3.0-beta.15",
|
||||
"@storybook/components": "5.3.0-beta.15",
|
||||
"@storybook/theming": "5.3.0-beta.15",
|
||||
"@storybook/addons": "5.3.0-beta.22",
|
||||
"@storybook/client-logger": "5.3.0-beta.22",
|
||||
"@storybook/components": "5.3.0-beta.22",
|
||||
"@storybook/theming": "5.3.0-beta.22",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"marksy": "^7.0.0",
|
||||
|
||||
@ -118,7 +118,7 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
|
||||
"cursor": "pointer",
|
||||
"display": "block",
|
||||
"fontFamily": "sans-serif",
|
||||
"fontSize": "12px",
|
||||
"fontSize": 12,
|
||||
"padding": "5px 15px",
|
||||
"position": "fixed",
|
||||
"right": 0,
|
||||
@ -253,7 +253,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
|
||||
"cursor": "pointer",
|
||||
"display": "block",
|
||||
"fontFamily": "sans-serif",
|
||||
"fontSize": "12px",
|
||||
"fontSize": 12,
|
||||
"padding": "5px 15px",
|
||||
"position": "fixed",
|
||||
"right": 0,
|
||||
@ -386,7 +386,7 @@ exports[`addon Info should render <Info /> for memoized component 1`] = `
|
||||
"cursor": "pointer",
|
||||
"display": "block",
|
||||
"fontFamily": "sans-serif",
|
||||
"fontSize": "12px",
|
||||
"fontSize": 12,
|
||||
"padding": "5px 15px",
|
||||
"position": "fixed",
|
||||
"right": 0,
|
||||
|
||||
@ -18,7 +18,7 @@ const stylesheetBase = {
|
||||
button: {
|
||||
base: {
|
||||
fontFamily: 'sans-serif',
|
||||
fontSize: '12px',
|
||||
fontSize: 12,
|
||||
display: 'block',
|
||||
position: 'fixed',
|
||||
border: 'none',
|
||||
|
||||
@ -16,11 +16,11 @@ function CopyButton({ onClick, toggled }) {
|
||||
alignSelf: 'flex-start',
|
||||
flexShrink: '0',
|
||||
overflow: 'hidden',
|
||||
borderWidth: '1px',
|
||||
borderWidth: 1,
|
||||
borderStyle: 'solid',
|
||||
borderColor: 'rgb(238, 238, 238)',
|
||||
borderImage: 'initial',
|
||||
borderRadius: '3px',
|
||||
borderRadius: 3,
|
||||
padding: '3px 10px',
|
||||
}}
|
||||
>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "5.3.0-beta.15",
|
||||
"version": "5.3.0-beta.22",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -35,11 +35,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-beta.15",
|
||||
"@storybook/api": "5.3.0-beta.15",
|
||||
"@storybook/components": "5.3.0-beta.15",
|
||||
"@storybook/core-events": "5.3.0-beta.15",
|
||||
"@storybook/theming": "5.3.0-beta.15",
|
||||
"@storybook/addons": "5.3.0-beta.22",
|
||||
"@storybook/api": "5.3.0-beta.22",
|
||||
"@storybook/components": "5.3.0-beta.22",
|
||||
"@storybook/core-events": "5.3.0-beta.22",
|
||||
"@storybook/theming": "5.3.0-beta.22",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -22,27 +22,27 @@ class TestDetail {
|
||||
}
|
||||
const StackTrace = styled.pre<{}>(({ theme }) => ({
|
||||
background: theme.color.lighter,
|
||||
paddingTop: '4px',
|
||||
paddingBottom: '4px',
|
||||
paddingLeft: '6px',
|
||||
borderRadius: '2px',
|
||||
paddingTop: 4,
|
||||
paddingBottom: 4,
|
||||
paddingLeft: 6,
|
||||
borderRadius: 2,
|
||||
overflow: 'auto',
|
||||
margin: '10px 30px 10px 30px',
|
||||
whiteSpace: 'pre',
|
||||
}));
|
||||
|
||||
const Results = styled.div({
|
||||
paddingTop: '10px',
|
||||
marginLeft: '31px',
|
||||
marginRight: '30px',
|
||||
paddingTop: 10,
|
||||
marginLeft: 31,
|
||||
marginRight: 30,
|
||||
});
|
||||
|
||||
const Description = styled.div<{}>(({ theme }) => ({
|
||||
paddingBottom: '10px',
|
||||
paddingTop: '10px',
|
||||
paddingBottom: 10,
|
||||
paddingTop: 10,
|
||||
borderBottom: theme.appBorderColor,
|
||||
marginLeft: '31px',
|
||||
marginRight: '30px',
|
||||
marginLeft: 31,
|
||||
marginRight: 30,
|
||||
overflowWrap: 'break-word',
|
||||
}));
|
||||
|
||||
|
||||
@ -26,10 +26,10 @@ const Item = styled.li({
|
||||
|
||||
const ProgressWrapper = styled.div({
|
||||
position: 'relative',
|
||||
height: '10px',
|
||||
width: '30px',
|
||||
height: 10,
|
||||
width: 30,
|
||||
display: 'flex',
|
||||
top: '-2px',
|
||||
top: -2,
|
||||
});
|
||||
|
||||
const SuiteHead = styled.div({
|
||||
@ -37,8 +37,8 @@ const SuiteHead = styled.div({
|
||||
alignItems: 'baseline',
|
||||
position: 'absolute',
|
||||
zIndex: 2,
|
||||
right: '20px',
|
||||
marginTop: '15px',
|
||||
right: 20,
|
||||
marginTop: 15,
|
||||
});
|
||||
|
||||
const SuiteTotals = styled(({ result, className, width }) => (
|
||||
@ -62,7 +62,7 @@ const SuiteTotals = styled(({ result, className, width }) => (
|
||||
alignItems: 'center',
|
||||
color: theme.color.dark,
|
||||
fontSize: '14px',
|
||||
marginTop: '-5px',
|
||||
marginTop: -5,
|
||||
'& > *': {
|
||||
marginRight: 10,
|
||||
},
|
||||
@ -70,8 +70,8 @@ const SuiteTotals = styled(({ result, className, width }) => (
|
||||
|
||||
const SuiteProgressPortion = styled.div<{ color: any; progressPercent: number }>(
|
||||
({ theme, color, progressPercent }) => ({
|
||||
height: '6px',
|
||||
top: '3px',
|
||||
height: 6,
|
||||
top: 3,
|
||||
width: `${progressPercent}%`,
|
||||
backgroundColor: color,
|
||||
})
|
||||
|
||||
@ -34,7 +34,7 @@ const Icon = styled<any, any>(Icons)(({ theme }) => ({
|
||||
width: 10,
|
||||
minWidth: 10,
|
||||
color: theme.color.mediumdark,
|
||||
marginRight: '10px',
|
||||
marginRight: 10,
|
||||
transition: 'transform 0.1s ease-in-out',
|
||||
alignSelf: 'center',
|
||||
display: 'inline-flex',
|
||||
|
||||
@ -1,573 +0,0 @@
|
||||
import { document } from 'global';
|
||||
|
||||
const styles = `
|
||||
@font-face {
|
||||
font-family: octicons-link;
|
||||
src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAZwABAAAAAACFQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEU0lHAAAGaAAAAAgAAAAIAAAAAUdTVUIAAAZcAAAACgAAAAoAAQAAT1MvMgAAAyQAAABJAAAAYFYEU3RjbWFwAAADcAAAAEUAAACAAJThvmN2dCAAAATkAAAABAAAAAQAAAAAZnBnbQAAA7gAAACyAAABCUM+8IhnYXNwAAAGTAAAABAAAAAQABoAI2dseWYAAAFsAAABPAAAAZwcEq9taGVhZAAAAsgAAAA0AAAANgh4a91oaGVhAAADCAAAABoAAAAkCA8DRGhtdHgAAAL8AAAADAAAAAwGAACfbG9jYQAAAsAAAAAIAAAACABiATBtYXhwAAACqAAAABgAAAAgAA8ASm5hbWUAAAToAAABQgAAAlXu73sOcG9zdAAABiwAAAAeAAAAME3QpOBwcmVwAAAEbAAAAHYAAAB/aFGpk3jaTY6xa8JAGMW/O62BDi0tJLYQincXEypYIiGJjSgHniQ6umTsUEyLm5BV6NDBP8Tpts6F0v+k/0an2i+itHDw3v2+9+DBKTzsJNnWJNTgHEy4BgG3EMI9DCEDOGEXzDADU5hBKMIgNPZqoD3SilVaXZCER3/I7AtxEJLtzzuZfI+VVkprxTlXShWKb3TBecG11rwoNlmmn1P2WYcJczl32etSpKnziC7lQyWe1smVPy/Lt7Kc+0vWY/gAgIIEqAN9we0pwKXreiMasxvabDQMM4riO+qxM2ogwDGOZTXxwxDiycQIcoYFBLj5K3EIaSctAq2kTYiw+ymhce7vwM9jSqO8JyVd5RH9gyTt2+J/yUmYlIR0s04n6+7Vm1ozezUeLEaUjhaDSuXHwVRgvLJn1tQ7xiuVv/ocTRF42mNgZGBgYGbwZOBiAAFGJBIMAAizAFoAAABiAGIAznjaY2BkYGAA4in8zwXi+W2+MjCzMIDApSwvXzC97Z4Ig8N/BxYGZgcgl52BCSQKAA3jCV8CAABfAAAAAAQAAEB42mNgZGBg4f3vACQZQABIMjKgAmYAKEgBXgAAeNpjYGY6wTiBgZWBg2kmUxoDA4MPhGZMYzBi1AHygVLYQUCaawqDA4PChxhmh/8ODDEsvAwHgMKMIDnGL0x7gJQCAwMAJd4MFwAAAHjaY2BgYGaA4DAGRgYQkAHyGMF8NgYrIM3JIAGVYYDT+AEjAwuDFpBmA9KMDEwMCh9i/v8H8sH0/4dQc1iAmAkALaUKLgAAAHjaTY9LDsIgEIbtgqHUPpDi3gPoBVyRTmTddOmqTXThEXqrob2gQ1FjwpDvfwCBdmdXC5AVKFu3e5MfNFJ29KTQT48Ob9/lqYwOGZxeUelN2U2R6+cArgtCJpauW7UQBqnFkUsjAY/kOU1cP+DAgvxwn1chZDwUbd6CFimGXwzwF6tPbFIcjEl+vvmM/byA48e6tWrKArm4ZJlCbdsrxksL1AwWn/yBSJKpYbq8AXaaTb8AAHja28jAwOC00ZrBeQNDQOWO//sdBBgYGRiYWYAEELEwMTE4uzo5Zzo5b2BxdnFOcALxNjA6b2ByTswC8jYwg0VlNuoCTWAMqNzMzsoK1rEhNqByEyerg5PMJlYuVueETKcd/89uBpnpvIEVomeHLoMsAAe1Id4AAAAAAAB42oWQT07CQBTGv0JBhagk7HQzKxca2sJCE1hDt4QF+9JOS0nbaaYDCQfwCJ7Au3AHj+LO13FMmm6cl7785vven0kBjHCBhfpYuNa5Ph1c0e2Xu3jEvWG7UdPDLZ4N92nOm+EBXuAbHmIMSRMs+4aUEd4Nd3CHD8NdvOLTsA2GL8M9PODbcL+hD7C1xoaHeLJSEao0FEW14ckxC+TU8TxvsY6X0eLPmRhry2WVioLpkrbp84LLQPGI7c6sOiUzpWIWS5GzlSgUzzLBSikOPFTOXqly7rqx0Z1Q5BAIoZBSFihQYQOOBEdkCOgXTOHA07HAGjGWiIjaPZNW13/+lm6S9FT7rLHFJ6fQbkATOG1j2OFMucKJJsxIVfQORl+9Jyda6Sl1dUYhSCm1dyClfoeDve4qMYdLEbfqHf3O/AdDumsjAAB42mNgYoAAZQYjBmyAGYQZmdhL8zLdDEydARfoAqIAAAABAAMABwAKABMAB///AA8AAQAAAAAAAAAAAAAAAAABAAAAAA==) format('woff');
|
||||
}
|
||||
.markdown-body {
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
line-height: 1.5;
|
||||
color: #333;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.markdown-body .pl-c {
|
||||
color: #969896;
|
||||
}
|
||||
.markdown-body .pl-c1,
|
||||
.markdown-body .pl-s .pl-v {
|
||||
color: #0086b3;
|
||||
}
|
||||
.markdown-body .pl-e,
|
||||
.markdown-body .pl-en {
|
||||
color: #795da3;
|
||||
}
|
||||
.markdown-body .pl-smi,
|
||||
.markdown-body .pl-s .pl-s1 {
|
||||
color: #333;
|
||||
}
|
||||
.markdown-body .pl-ent {
|
||||
color: #63a35c;
|
||||
}
|
||||
.markdown-body .pl-k {
|
||||
color: #a71d5d;
|
||||
}
|
||||
.markdown-body .pl-s,
|
||||
.markdown-body .pl-pds,
|
||||
.markdown-body .pl-s .pl-pse .pl-s1,
|
||||
.markdown-body .pl-sr,
|
||||
.markdown-body .pl-sr .pl-cce,
|
||||
.markdown-body .pl-sr .pl-sre,
|
||||
.markdown-body .pl-sr .pl-sra {
|
||||
color: #183691;
|
||||
}
|
||||
.markdown-body .pl-v {
|
||||
color: #ed6a43;
|
||||
}
|
||||
.markdown-body .pl-id {
|
||||
color: #b52a1d;
|
||||
}
|
||||
.markdown-body .pl-ii {
|
||||
color: #f8f8f8;
|
||||
background-color: #b52a1d;
|
||||
}
|
||||
.markdown-body .pl-sr .pl-cce {
|
||||
font-weight: bold;
|
||||
color: #63a35c;
|
||||
}
|
||||
.markdown-body .pl-ml {
|
||||
color: #693a17;
|
||||
}
|
||||
.markdown-body .pl-mh,
|
||||
.markdown-body .pl-mh .pl-en,
|
||||
.markdown-body .pl-ms {
|
||||
font-weight: bold;
|
||||
color: #1d3e81;
|
||||
}
|
||||
.markdown-body .pl-mq {
|
||||
color: #008080;
|
||||
}
|
||||
.markdown-body .pl-mi {
|
||||
font-style: italic;
|
||||
color: #333;
|
||||
}
|
||||
.markdown-body .pl-mb {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.markdown-body .pl-md {
|
||||
color: #bd2c00;
|
||||
background-color: #ffecec;
|
||||
}
|
||||
.markdown-body .pl-mi1 {
|
||||
color: #55a532;
|
||||
background-color: #eaffea;
|
||||
}
|
||||
.markdown-body .pl-mdr {
|
||||
font-weight: bold;
|
||||
color: #795da3;
|
||||
}
|
||||
.markdown-body .pl-mo {
|
||||
color: #1d3e81;
|
||||
}
|
||||
.markdown-body .octicon {
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
fill: currentColor;
|
||||
}
|
||||
.markdown-body a {
|
||||
background-color: transparent;
|
||||
-webkit-text-decoration-skip: objects;
|
||||
}
|
||||
.markdown-body a:active,
|
||||
.markdown-body a:hover {
|
||||
outline-width: 0;
|
||||
}
|
||||
.markdown-body strong {
|
||||
font-weight: inherit;
|
||||
}
|
||||
.markdown-body strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
.markdown-body h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
.markdown-body img {
|
||||
border-style: none;
|
||||
}
|
||||
.markdown-body svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
.markdown-body code,
|
||||
.markdown-body kbd,
|
||||
.markdown-body pre {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
.markdown-body hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
.markdown-body input {
|
||||
font: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
.markdown-body input {
|
||||
overflow: visible;
|
||||
}
|
||||
.markdown-body [type="checkbox"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
.markdown-body * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.markdown-body input {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
.markdown-body a {
|
||||
color: #4078c0;
|
||||
text-decoration: none;
|
||||
}
|
||||
.markdown-body a:hover,
|
||||
.markdown-body a:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.markdown-body strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
.markdown-body hr {
|
||||
height: 0;
|
||||
margin: 15px 0;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.markdown-body hr::before {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
.markdown-body hr::after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
.markdown-body table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.markdown-body td,
|
||||
.markdown-body th {
|
||||
padding: 0;
|
||||
}
|
||||
.markdown-body h1,
|
||||
.markdown-body h2,
|
||||
.markdown-body h3,
|
||||
.markdown-body h4,
|
||||
.markdown-body h5,
|
||||
.markdown-body h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.markdown-body h1 {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.markdown-body h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.markdown-body h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.markdown-body h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.markdown-body h5 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.markdown-body h6 {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.markdown-body p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.markdown-body blockquote {
|
||||
margin: 0;
|
||||
}
|
||||
.markdown-body ul,
|
||||
.markdown-body ol {
|
||||
padding-left: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.markdown-body ol ol,
|
||||
.markdown-body ul ol {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
.markdown-body ul ul ol,
|
||||
.markdown-body ul ol ol,
|
||||
.markdown-body ol ul ol,
|
||||
.markdown-body ol ol ol {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
.markdown-body dd {
|
||||
margin-left: 0;
|
||||
}
|
||||
.markdown-body code {
|
||||
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
.markdown-body pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
}
|
||||
.markdown-body .octicon {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
.markdown-body input {
|
||||
-webkit-font-feature-settings: "liga" 0;
|
||||
font-feature-settings: "liga" 0;
|
||||
}
|
||||
.markdown-body::before {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
.markdown-body::after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
.markdown-body>*:first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
.markdown-body>*:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.markdown-body a:not([href]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.markdown-body .anchor {
|
||||
float: left;
|
||||
padding-right: 4px;
|
||||
margin-left: -20px;
|
||||
line-height: 1;
|
||||
}
|
||||
.markdown-body .anchor:focus {
|
||||
outline: none;
|
||||
}
|
||||
.markdown-body p,
|
||||
.markdown-body blockquote,
|
||||
.markdown-body ul,
|
||||
.markdown-body ol,
|
||||
.markdown-body dl,
|
||||
.markdown-body table,
|
||||
.markdown-body pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.markdown-body hr {
|
||||
height: 0.25em;
|
||||
padding: 0;
|
||||
margin: 24px 0;
|
||||
background-color: #e7e7e7;
|
||||
border: 0;
|
||||
}
|
||||
.markdown-body blockquote {
|
||||
padding: 0 1em;
|
||||
color: #777;
|
||||
border-left: 0.25em solid #ddd;
|
||||
}
|
||||
.markdown-body blockquote>:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.markdown-body blockquote>:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.markdown-body kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font-size: 11px;
|
||||
line-height: 10px;
|
||||
color: #555;
|
||||
vertical-align: middle;
|
||||
background-color: #fcfcfc;
|
||||
border: solid 1px #ccc;
|
||||
border-bottom-color: #bbb;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #bbb;
|
||||
}
|
||||
.markdown-body h1,
|
||||
.markdown-body h2,
|
||||
.markdown-body h3,
|
||||
.markdown-body h4,
|
||||
.markdown-body h5,
|
||||
.markdown-body h6 {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.markdown-body h1 .octicon-link,
|
||||
.markdown-body h2 .octicon-link,
|
||||
.markdown-body h3 .octicon-link,
|
||||
.markdown-body h4 .octicon-link,
|
||||
.markdown-body h5 .octicon-link,
|
||||
.markdown-body h6 .octicon-link {
|
||||
color: #000;
|
||||
vertical-align: middle;
|
||||
visibility: hidden;
|
||||
}
|
||||
.markdown-body h1:hover .anchor,
|
||||
.markdown-body h2:hover .anchor,
|
||||
.markdown-body h3:hover .anchor,
|
||||
.markdown-body h4:hover .anchor,
|
||||
.markdown-body h5:hover .anchor,
|
||||
.markdown-body h6:hover .anchor {
|
||||
text-decoration: none;
|
||||
}
|
||||
.markdown-body h1:hover .anchor .octicon-link,
|
||||
.markdown-body h2:hover .anchor .octicon-link,
|
||||
.markdown-body h3:hover .anchor .octicon-link,
|
||||
.markdown-body h4:hover .anchor .octicon-link,
|
||||
.markdown-body h5:hover .anchor .octicon-link,
|
||||
.markdown-body h6:hover .anchor .octicon-link {
|
||||
visibility: visible;
|
||||
}
|
||||
.markdown-body h1 {
|
||||
padding-bottom: 0.3em;
|
||||
font-size: 2em;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.markdown-body h2 {
|
||||
padding-bottom: 0.3em;
|
||||
font-size: 1.5em;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.markdown-body h3 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
.markdown-body h4 {
|
||||
font-size: 1em;
|
||||
}
|
||||
.markdown-body h5 {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
.markdown-body h6 {
|
||||
font-size: 0.85em;
|
||||
color: #777;
|
||||
}
|
||||
.markdown-body ul,
|
||||
.markdown-body ol {
|
||||
padding-left: 2em;
|
||||
}
|
||||
.markdown-body ul ul,
|
||||
.markdown-body ul ol,
|
||||
.markdown-body ol ol,
|
||||
.markdown-body ol ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.markdown-body li>p {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.markdown-body li+li {
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
.markdown-body dl {
|
||||
padding: 0;
|
||||
}
|
||||
.markdown-body dl dt {
|
||||
padding: 0;
|
||||
margin-top: 16px;
|
||||
font-size: 1em;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
}
|
||||
.markdown-body dl dd {
|
||||
padding: 0 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.markdown-body table {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.markdown-body table th {
|
||||
font-weight: bold;
|
||||
}
|
||||
.markdown-body table th,
|
||||
.markdown-body table td {
|
||||
padding: 6px 13px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
.markdown-body table tr {
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
.markdown-body table tr:nth-child(2n) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
.markdown-body img {
|
||||
max-width: 100%;
|
||||
box-sizing: content-box;
|
||||
background-color: #fff;
|
||||
}
|
||||
.markdown-body code {
|
||||
padding: 0;
|
||||
padding-top: 0.2em;
|
||||
padding-bottom: 0.2em;
|
||||
margin: 0;
|
||||
font-size: 85%;
|
||||
background-color: rgba(0,0,0,0.04);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.markdown-body code::before,
|
||||
.markdown-body code::after {
|
||||
letter-spacing: -0.2em;
|
||||
content: " ";
|
||||
}
|
||||
.markdown-body pre {
|
||||
word-wrap: normal;
|
||||
}
|
||||
.markdown-body pre>code {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 100%;
|
||||
word-break: normal;
|
||||
white-space: pre;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
.markdown-body .highlight {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.markdown-body .highlight pre {
|
||||
margin-bottom: 0;
|
||||
word-break: normal;
|
||||
}
|
||||
.markdown-body .highlight pre,
|
||||
.markdown-body pre {
|
||||
padding: 16px;
|
||||
overflow: auto;
|
||||
font-size: 85%;
|
||||
line-height: 1.45;
|
||||
background-color: #f7f7f7;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.markdown-body pre code {
|
||||
display: inline;
|
||||
max-width: auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
line-height: inherit;
|
||||
word-wrap: normal;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
.markdown-body pre code::before,
|
||||
.markdown-body pre code::after {
|
||||
content: normal;
|
||||
}
|
||||
.markdown-body .pl-0 {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
.markdown-body .pl-1 {
|
||||
padding-left: 3px !important;
|
||||
}
|
||||
.markdown-body .pl-2 {
|
||||
padding-left: 6px !important;
|
||||
}
|
||||
.markdown-body .pl-3 {
|
||||
padding-left: 12px !important;
|
||||
}
|
||||
.markdown-body .pl-4 {
|
||||
padding-left: 24px !important;
|
||||
}
|
||||
.markdown-body .pl-5 {
|
||||
padding-left: 36px !important;
|
||||
}
|
||||
.markdown-body .pl-6 {
|
||||
padding-left: 48px !important;
|
||||
}
|
||||
.markdown-body .full-commit .btn-outline:not(:disabled):hover {
|
||||
color: #4078c0;
|
||||
border: 1px solid #4078c0;
|
||||
}
|
||||
.markdown-body kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
line-height: 10px;
|
||||
color: #555;
|
||||
vertical-align: middle;
|
||||
background-color: #fcfcfc;
|
||||
border: solid 1px #ccc;
|
||||
border-bottom-color: #bbb;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #bbb;
|
||||
}
|
||||
.markdown-body :checked+.radio-label {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-color: #4078c0;
|
||||
}
|
||||
.markdown-body .task-list-item {
|
||||
list-style-type: none;
|
||||
}
|
||||
.markdown-body .task-list-item+.task-list-item {
|
||||
margin-top: 3px;
|
||||
}
|
||||
.markdown-body .task-list-item input {
|
||||
margin: 0 0.2em 0.25em -1.6em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.markdown-body hr {
|
||||
border-bottom-color: #eee;
|
||||
}
|
||||
`;
|
||||
|
||||
if (document && !document.getElementById('github-markdown-css')) {
|
||||
const styleNode = document.createElement('style');
|
||||
styleNode.id = 'github-markdown-css';
|
||||
styleNode.innerHTML = styles;
|
||||
|
||||
document.head.appendChild(styleNode);
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-knobs",
|
||||
"version": "5.3.0-beta.15",
|
||||
"version": "5.3.0-beta.22",
|
||||
"description": "Storybook Addon Prop Editor Component",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,12 +29,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-beta.15",
|
||||
"@storybook/api": "5.3.0-beta.15",
|
||||
"@storybook/client-api": "5.3.0-beta.15",
|
||||
"@storybook/components": "5.3.0-beta.15",
|
||||
"@storybook/core-events": "5.3.0-beta.15",
|
||||
"@storybook/theming": "5.3.0-beta.15",
|
||||
"@storybook/addons": "5.3.0-beta.22",
|
||||
"@storybook/api": "5.3.0-beta.22",
|
||||
"@storybook/client-api": "5.3.0-beta.22",
|
||||
"@storybook/components": "5.3.0-beta.22",
|
||||
"@storybook/core-events": "5.3.0-beta.22",
|
||||
"@storybook/theming": "5.3.0-beta.22",
|
||||
"@types/react-color": "^3.0.1",
|
||||
"copy-to-clipboard": "^3.0.8",
|
||||
"core-js": "^3.0.1",
|
||||
|
||||
1
addons/knobs/preset.js
Normal file
1
addons/knobs/preset.js
Normal file
@ -0,0 +1 @@
|
||||
module.exports = require('./dist/preset');
|
||||
@ -27,12 +27,12 @@ interface NumberTypeProps extends KnobControlProps<NumberTypeKnobValue | null> {
|
||||
const RangeInput = styled.input(
|
||||
{
|
||||
boxSizing: 'border-box',
|
||||
height: '25px',
|
||||
height: 25,
|
||||
outline: 'none',
|
||||
border: '1px solid #f7f4f4',
|
||||
borderRadius: 2,
|
||||
fontSize: 11,
|
||||
padding: '5px',
|
||||
padding: 5,
|
||||
color: '#444',
|
||||
},
|
||||
{
|
||||
|
||||
4
addons/knobs/src/preset/addDecorator.ts
Normal file
4
addons/knobs/src/preset/addDecorator.ts
Normal file
@ -0,0 +1,4 @@
|
||||
import { addDecorator } from '@storybook/client-api';
|
||||
import { withKnobs } from '../index';
|
||||
|
||||
addDecorator(withKnobs);
|
||||
15
addons/knobs/src/preset/index.ts
Normal file
15
addons/knobs/src/preset/index.ts
Normal file
@ -0,0 +1,15 @@
|
||||
type KnobsOptions = {
|
||||
addDecorator?: boolean;
|
||||
};
|
||||
|
||||
export function addons(entry: any[] = [], options: any) {
|
||||
return [...entry, require.resolve('../register')];
|
||||
}
|
||||
|
||||
export function config(entry: any[] = [], { addDecorator = true }: KnobsOptions = {}) {
|
||||
const knobsConfig = [];
|
||||
if (addDecorator) {
|
||||
knobsConfig.push(require.resolve('./addDecorator'));
|
||||
}
|
||||
return [...entry, ...knobsConfig];
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "5.3.0-beta.15",
|
||||
"version": "5.3.0-beta.22",
|
||||
"description": "Story Links addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,10 +29,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-beta.15",
|
||||
"@storybook/client-logger": "5.3.0-beta.15",
|
||||
"@storybook/core-events": "5.3.0-beta.15",
|
||||
"@storybook/router": "5.3.0-beta.15",
|
||||
"@storybook/addons": "5.3.0-beta.22",
|
||||
"@storybook/client-logger": "5.3.0-beta.22",
|
||||
"@storybook/core-events": "5.3.0-beta.22",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/router": "5.3.0-beta.22",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.7.2",
|
||||
|
||||
@ -7,7 +7,7 @@ import {
|
||||
import qs from 'qs';
|
||||
import addons from '@storybook/addons';
|
||||
import { STORY_CHANGED, SELECT_STORY } from '@storybook/core-events';
|
||||
import { toId } from '@storybook/router/utils';
|
||||
import { toId } from '@storybook/csf';
|
||||
import { logger } from '@storybook/client-logger';
|
||||
|
||||
interface ParamsId {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-notes",
|
||||
"version": "5.3.0-beta.15",
|
||||
"version": "5.3.0-beta.22",
|
||||
"description": "Write notes for your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -30,13 +30,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-beta.15",
|
||||
"@storybook/api": "5.3.0-beta.15",
|
||||
"@storybook/client-logger": "5.3.0-beta.15",
|
||||
"@storybook/components": "5.3.0-beta.15",
|
||||
"@storybook/core-events": "5.3.0-beta.15",
|
||||
"@storybook/router": "5.3.0-beta.15",
|
||||
"@storybook/theming": "5.3.0-beta.15",
|
||||
"@storybook/addons": "5.3.0-beta.22",
|
||||
"@storybook/api": "5.3.0-beta.22",
|
||||
"@storybook/client-logger": "5.3.0-beta.22",
|
||||
"@storybook/components": "5.3.0-beta.22",
|
||||
"@storybook/core-events": "5.3.0-beta.22",
|
||||
"@storybook/router": "5.3.0-beta.22",
|
||||
"@storybook/theming": "5.3.0-beta.22",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"markdown-to-jsx": "^6.10.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-actions",
|
||||
"version": "5.3.0-beta.15",
|
||||
"version": "5.3.0-beta.22",
|
||||
"description": "Action Logger addon for react-native storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -26,13 +26,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-beta.15",
|
||||
"@storybook/core-events": "5.3.0-beta.15",
|
||||
"@storybook/addons": "5.3.0-beta.22",
|
||||
"@storybook/core-events": "5.3.0-beta.22",
|
||||
"core-js": "^3.0.1",
|
||||
"fast-deep-equal": "^2.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "5.3.0-beta.15"
|
||||
"@storybook/addon-actions": "5.3.0-beta.22"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-actions": "*",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-backgrounds",
|
||||
"version": "5.3.0-beta.15",
|
||||
"version": "5.3.0-beta.22",
|
||||
"description": "A react-native storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -31,9 +31,9 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-beta.15",
|
||||
"@storybook/api": "5.3.0-beta.15",
|
||||
"@storybook/client-api": "5.3.0-beta.15",
|
||||
"@storybook/addons": "5.3.0-beta.22",
|
||||
"@storybook/api": "5.3.0-beta.22",
|
||||
"@storybook/client-api": "5.3.0-beta.22",
|
||||
"core-js": "^3.0.1",
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-knobs",
|
||||
"version": "5.3.0-beta.15",
|
||||
"version": "5.3.0-beta.22",
|
||||
"description": "Display storybook story knobs on your deviced.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -28,8 +28,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/native": "^10.0.14",
|
||||
"@storybook/addons": "5.3.0-beta.15",
|
||||
"@storybook/core-events": "5.3.0-beta.15",
|
||||
"@storybook/addons": "5.3.0-beta.22",
|
||||
"@storybook/core-events": "5.3.0-beta.22",
|
||||
"core-js": "^3.0.1",
|
||||
"deep-equal": "^1.0.1",
|
||||
"prop-types": "^15.7.2",
|
||||
@ -39,7 +39,7 @@
|
||||
"react-native-switch": "^1.5.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-knobs": "5.3.0-beta.15",
|
||||
"@storybook/addon-knobs": "5.3.0-beta.22",
|
||||
"react": "*",
|
||||
"react-native": "*"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-notes",
|
||||
"version": "5.3.0-beta.15",
|
||||
"version": "5.3.0-beta.22",
|
||||
"description": "Write notes for your react-native Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -28,11 +28,11 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/core": "^10.0.20",
|
||||
"@storybook/addons": "5.3.0-beta.15",
|
||||
"@storybook/api": "5.3.0-beta.15",
|
||||
"@storybook/client-api": "5.3.0-beta.15",
|
||||
"@storybook/client-logger": "5.3.0-beta.15",
|
||||
"@storybook/core-events": "5.3.0-beta.15",
|
||||
"@storybook/addons": "5.3.0-beta.22",
|
||||
"@storybook/api": "5.3.0-beta.22",
|
||||
"@storybook/client-api": "5.3.0-beta.22",
|
||||
"@storybook/client-logger": "5.3.0-beta.22",
|
||||
"@storybook/core-events": "5.3.0-beta.22",
|
||||
"core-js": "^3.0.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-native-simple-markdown": "^1.1.0"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-options",
|
||||
"version": "5.3.0-beta.15",
|
||||
"version": "5.3.0-beta.22",
|
||||
"description": "Options addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,7 +29,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-beta.15",
|
||||
"@storybook/addons": "5.3.0-beta.22",
|
||||
"core-js": "^3.0.1",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-queryparams",
|
||||
"version": "5.3.0-beta.15",
|
||||
"version": "5.3.0-beta.22",
|
||||
"description": "parameter addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -30,12 +30,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-beta.15",
|
||||
"@storybook/api": "5.3.0-beta.15",
|
||||
"@storybook/client-logger": "5.3.0-beta.15",
|
||||
"@storybook/components": "5.3.0-beta.15",
|
||||
"@storybook/core-events": "5.3.0-beta.15",
|
||||
"@storybook/theming": "5.3.0-beta.15",
|
||||
"@storybook/addons": "5.3.0-beta.22",
|
||||
"@storybook/api": "5.3.0-beta.22",
|
||||
"@storybook/client-logger": "5.3.0-beta.22",
|
||||
"@storybook/components": "5.3.0-beta.22",
|
||||
"@storybook/core-events": "5.3.0-beta.22",
|
||||
"@storybook/theming": "5.3.0-beta.22",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"qs": "^6.6.0",
|
||||
|
||||
@ -16,7 +16,7 @@ module.exports = {
|
||||
return `${code};
|
||||
if(exports.default != null) {
|
||||
exports.default.parameters = exports.default.parameters || {};
|
||||
exports.default.parameters.fileName = '${fileName}';
|
||||
exports.default.parameters.fileName = '${fileName.replace(/\\/g, '\\\\')}';
|
||||
}
|
||||
`;
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "5.3.0-beta.15",
|
||||
"version": "5.3.0-beta.22",
|
||||
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -33,9 +33,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@jest/transform": "^24.9.0",
|
||||
"@storybook/addons": "5.3.0-beta.15",
|
||||
"@storybook/client-api": "5.3.0-beta.15",
|
||||
"@storybook/core": "5.3.0-beta.15",
|
||||
"@storybook/addons": "5.3.0-beta.22",
|
||||
"@storybook/client-api": "5.3.0-beta.22",
|
||||
"@storybook/core": "5.3.0-beta.22",
|
||||
"@types/glob": "^7.1.1",
|
||||
"@types/jest": "^24.0.16",
|
||||
"@types/jest-specific-snapshot": "^0.5.3",
|
||||
@ -49,8 +49,8 @@
|
||||
"ts-dedent": "^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-docs": "5.3.0-beta.15",
|
||||
"@storybook/react": "5.3.0-beta.15",
|
||||
"@storybook/addon-docs": "5.3.0-beta.22",
|
||||
"@storybook/react": "5.3.0-beta.22",
|
||||
"babel-loader": "^8.0.6",
|
||||
"enzyme-to-json": "^3.4.1",
|
||||
"jest-emotion": "^10.0.17",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "5.3.0-beta.15",
|
||||
"version": "5.3.0-beta.22",
|
||||
"description": "Image snapshots addition to StoryShots based on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -30,8 +30,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@hypnosphi/jest-puppeteer-axe": "^1.4.0",
|
||||
"@storybook/node-logger": "5.3.0-beta.15",
|
||||
"@storybook/router": "5.3.0-beta.15",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/node-logger": "5.3.0-beta.22",
|
||||
"@types/jest-image-snapshot": "^2.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"jest-image-snapshot": "^2.8.2",
|
||||
@ -41,7 +41,7 @@
|
||||
"@types/puppeteer": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "5.3.0-beta.15",
|
||||
"@storybook/addon-storyshots": "5.3.0-beta.22",
|
||||
"puppeteer": "^1.12.2 || ^2.0.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { toId } from '@storybook/router/utils';
|
||||
import { toId } from '@storybook/csf';
|
||||
|
||||
import { URL } from 'url';
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "5.3.0-beta.15",
|
||||
"version": "5.3.0-beta.22",
|
||||
"description": "Stories addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -28,11 +28,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-beta.15",
|
||||
"@storybook/components": "5.3.0-beta.15",
|
||||
"@storybook/router": "5.3.0-beta.15",
|
||||
"@storybook/source-loader": "5.3.0-beta.15",
|
||||
"@storybook/theming": "5.3.0-beta.15",
|
||||
"@storybook/addons": "5.3.0-beta.22",
|
||||
"@storybook/components": "5.3.0-beta.22",
|
||||
"@storybook/router": "5.3.0-beta.22",
|
||||
"@storybook/source-loader": "5.3.0-beta.22",
|
||||
"@storybook/theming": "5.3.0-beta.22",
|
||||
"core-js": "^3.0.1",
|
||||
"estraverse": "^4.2.0",
|
||||
"loader-utils": "^1.2.3",
|
||||
|
||||
@ -24,8 +24,8 @@ within `.storybook/main.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
addons: ['@storybook/addon-viewport/register']
|
||||
}
|
||||
addons: ['@storybook/addon-viewport/register'],
|
||||
};
|
||||
```
|
||||
|
||||
You should now be able to see the viewport addon icon in the the toolbar at the top of the screen.
|
||||
@ -157,11 +157,14 @@ addParameters({
|
||||
|
||||
### Add New Device
|
||||
|
||||
This will add both `Kindle Fire 2` and `Kindle Fire HD` to the list of devices. This is achieved by making use of the exported [`INITIAL_VIEWPORTS`](src/defaults.ts) property, by merging it with the new viewports and pass the result as `viewports` to `configureViewport` function
|
||||
This will add both `Kindle Fire 2` and `Kindle Fire HD` to the list of devices. This is achieved by making use of the exported [`INITIAL_VIEWPORTS`](src/defaults.ts) or [`MINIMAL_VIEWPORTS`](src/defaults.ts) property, by merging it with the new viewports and pass the result as `viewports` to `configureViewport` function
|
||||
|
||||
```js
|
||||
import { addParameters } from '@storybook/react';
|
||||
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
|
||||
import {
|
||||
INITIAL_VIEWPORTS,
|
||||
// or MINIMAL_VIEWPORTS,
|
||||
} from '@storybook/addon-viewport';
|
||||
|
||||
const customViewports = {
|
||||
kindleFire2: {
|
||||
@ -184,6 +187,7 @@ addParameters({
|
||||
viewport: {
|
||||
viewports: {
|
||||
...INITIAL_VIEWPORTS,
|
||||
// or ...MINIMAL_VIEWPORTS,
|
||||
...customViewports,
|
||||
},
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "5.3.0-beta.15",
|
||||
"version": "5.3.0-beta.22",
|
||||
"description": "Storybook addon to change the viewport size to mobile",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,12 +29,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-beta.15",
|
||||
"@storybook/api": "5.3.0-beta.15",
|
||||
"@storybook/client-logger": "5.3.0-beta.15",
|
||||
"@storybook/components": "5.3.0-beta.15",
|
||||
"@storybook/core-events": "5.3.0-beta.15",
|
||||
"@storybook/theming": "5.3.0-beta.15",
|
||||
"@storybook/addons": "5.3.0-beta.22",
|
||||
"@storybook/api": "5.3.0-beta.22",
|
||||
"@storybook/client-logger": "5.3.0-beta.22",
|
||||
"@storybook/components": "5.3.0-beta.22",
|
||||
"@storybook/core-events": "5.3.0-beta.22",
|
||||
"@storybook/theming": "5.3.0-beta.22",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"memoizerific": "^1.11.3",
|
||||
|
||||
@ -84,10 +84,10 @@ const ActiveViewportSize = styled.div(() => ({
|
||||
const ActiveViewportLabel = styled.div<{}>(({ theme }) => ({
|
||||
display: 'inline-block',
|
||||
textDecoration: 'none',
|
||||
padding: '10px',
|
||||
padding: 10,
|
||||
fontWeight: theme.typography.weight.bold,
|
||||
fontSize: theme.typography.size.s2 - 1,
|
||||
lineHeight: 1,
|
||||
lineHeight: '1',
|
||||
height: 40,
|
||||
border: 'none',
|
||||
borderTop: '3px solid transparent',
|
||||
@ -102,7 +102,7 @@ const IconButtonWithLabel = styled(IconButton)(() => ({
|
||||
|
||||
const IconButtonLabel = styled.div<{}>(({ theme }) => ({
|
||||
fontSize: theme.typography.size.s2 - 1,
|
||||
marginLeft: '10px',
|
||||
marginLeft: 10,
|
||||
}));
|
||||
|
||||
interface ViewportToolState {
|
||||
@ -124,19 +124,23 @@ const getStyles = (
|
||||
|
||||
export const ViewportTool: FunctionComponent = memo(
|
||||
withTheme(({ theme }: { theme: Theme }) => {
|
||||
const { viewports, defaultViewport, disable } = useParameter<ViewportAddonParameter>(
|
||||
PARAM_KEY,
|
||||
{
|
||||
viewports: MINIMAL_VIEWPORTS,
|
||||
defaultViewport: responsiveViewport.id,
|
||||
}
|
||||
);
|
||||
const {
|
||||
viewports = MINIMAL_VIEWPORTS,
|
||||
defaultViewport = responsiveViewport.id,
|
||||
disable,
|
||||
} = useParameter<ViewportAddonParameter>(PARAM_KEY, {});
|
||||
const [state, setState] = useAddonState<ViewportToolState>(ADDON_ID, {
|
||||
selected: defaultViewport || responsiveViewport.id,
|
||||
selected: defaultViewport,
|
||||
isRotated: false,
|
||||
});
|
||||
const list = toList(viewports);
|
||||
|
||||
if (!list.find(i => i.id === defaultViewport)) {
|
||||
console.warn(
|
||||
`Cannot find "defaultViewport" of "${defaultViewport}" in addon-viewport configs, please check the "viewports" setting in the configuration.`
|
||||
);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setState({
|
||||
selected:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import deprecate from 'util-deprecate';
|
||||
|
||||
export { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT } from '../defaults';
|
||||
export { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT, MINIMAL_VIEWPORTS } from '../defaults';
|
||||
|
||||
export const configureViewport = deprecate(() => {},
|
||||
'configureViewport is no longer supported, use .addParameters({ viewport }) instead');
|
||||
|
||||
@ -3,7 +3,7 @@ import { ViewportMap } from './Viewport';
|
||||
export interface ViewportAddonParameter {
|
||||
disable?: boolean;
|
||||
defaultViewport?: string;
|
||||
viewports: ViewportMap;
|
||||
viewports?: ViewportMap;
|
||||
/*
|
||||
* @deprecated
|
||||
* The viewport parameter `onViewportChange` is no longer supported
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user