Upgrades to Storybook v4 and adds new theme + background

This commit is contained in:
Andy Tudhope 2018-11-29 09:52:26 +02:00
parent 4e411c2e7b
commit 7a560c6074
No known key found for this signature in database
GPG Key ID: 02A3DFA93BF26AD2
4 changed files with 11884 additions and 6659 deletions

View File

@ -3,3 +3,4 @@ import '@storybook/addon-links/register';
import '@storybook/addon-viewport/register';
import '@storybook/addon-knobs/register';
import '@storybook/addon-options/register';
import '@storybook/addon-backgrounds/register';

View File

@ -1,7 +1,43 @@
import { addDecorator, configure } from '@storybook/react';
import { withOptions } from '@storybook/addon-options';
import withBackgrounds from "@storybook/addon-backgrounds"
addDecorator(
withOptions({
theme: {
mainBackground: '#112 linear-gradient(to right, #112, #333)',
mainBorder: '1px solid rgba(255,255,255,0.1)',
mainBorderColor: 'rgba(255,255,255,0.1)',
mainBorderRadius: 4,
mainFill: 'rgba(255,255,255,0.1)',
barFill: 'rgba(0,0,0,1)',
barSelectedColor: 'rgba(255,255,255,0.4)',
inputFill: 'rgba(0,0,0,1)',
mainTextFace: 'Inter-UI, sans-serif',
mainTextColor: '#efefef',
dimmedTextColor: 'rgba(255,255,255,0.4)',
highlightColor: '#9fdaff',
successColor: '#0edf62',
failColor: '#ff3f3f',
warnColor: 'orange',
mainTextSize: 13,
monoTextFace: 'roboto-mono',
layoutMargin: 10,
overlayBackground:
'linear-gradient(to bottom right, rgba(17, 17, 34, 0.6), rgba(51, 51, 51, 0.8))',
}
})
)
addDecorator(
withBackgrounds([
{ name: 'default', value: '#eef2f5', default: true },
{ name: 'white', value: 'white' }
])
)
function loadStories() {
require('../src/stories');
require('../src/stories')
}
configure(loadStories, module);
configure(loadStories, module)

18484
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -5,12 +5,13 @@
"dependencies": {
"@material-ui/core": "^3.1.0",
"@material-ui/icons": "^3.0.1",
"babel-loader": "^8.0.4",
"classnames": "^2.2.6",
"material-ui": "^0.20.2",
"polished": "^2.2.0",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-scripts": "1.1.5",
"react-scripts": "2.0.3",
"styled-components": "^3.4.9",
"typeface-roboto": "0.0.54",
"web3": "^1.0.0-beta.36"
@ -25,13 +26,14 @@
"deploy-storybook": "storybook-to-ghpages"
},
"devDependencies": {
"@storybook/addon-actions": "^3.4.11",
"@storybook/addon-knobs": "^3.4.11",
"@storybook/addon-links": "^3.4.11",
"@storybook/addon-options": "^3.4.11",
"@storybook/addon-viewport": "^3.4.11",
"@storybook/addons": "^3.4.11",
"@storybook/react": "^3.4.11",
"@storybook/addon-actions": "^4.0.8",
"@storybook/addon-backgrounds": "^4.0.8",
"@storybook/addon-knobs": "^4.0.8",
"@storybook/addon-links": "^4.0.8",
"@storybook/addon-options": "^4.0.8",
"@storybook/addon-viewport": "^4.0.8",
"@storybook/addons": "^4.0.8",
"@storybook/react": "^4.0.8",
"@storybook/storybook-deployer": "^2.3.0",
"babel-core": "^6.26.3",
"babel-runtime": "^6.26.0"