mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-23 22:32:52 +02:00
Code Issues Releases Wiki Activity

Add Storybook backgrounds (#231)

Browse Source 
* feat(storybook): Add backgrounds Storybook

I've added the Storybook backgrounds addon which allows users viewing the storybook to change the
background behind components, which will make it easier to see how the main NES.css theme looks in
various contexts.

* feat(storybook): Add backgrounds Storybook

I've added the Storybook backgrounds addon which allows users viewing the storybook to change the
background behind components, which will make it easier to see how the main NES.css theme looks in
various contexts.
This commit is contained in:
Trezy
2018-12-27 03:04:30 -06:00
committed by Abdullah Samman
parent 5d0b5babba
commit 3ab3cd5d9b
5 changed files with 96 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.storybook/addons.js
View File

@@ -1 +1,4 @@
import '@storybook/addon-knobs/register'; // eslint-disable-line import/no-extraneous-dependencies
/* eslint-disable import/no-extraneous-dependencies */
import '@storybook/addon-knobs/register';
import '@storybook/addon-backgrounds/register';
/* eslint-enable */

19
.storybook/config.js
View File

@@ -1,4 +1,10 @@
import { configure } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
/* eslint-disable import/no-extraneous-dependencies */
import {
addDecorator,
configure,
} from '@storybook/html';
import { withBackgrounds } from '@storybook/addon-backgrounds';
/* eslint-enable */
import '../scss/nes.scss'; // eslint-disable-line import/no-unresolved
@@ -8,4 +14,15 @@ function loadStories() {
req.keys().forEach(filename => req(filename));
}
addDecorator(withBackgrounds([
{ name: 'Blue', value: 'blue' },
{ name: 'Green', value: 'green' },
{ name: 'Yellow', value: 'yellow' },
{ name: 'Orange', value: 'orange' },
{ name: 'Red', value: 'red' },
{ name: 'Purple', value: 'purple' },
{ name: 'Black', value: 'black' },
{ name: 'White', value: 'white', default: true },
]));
configure(loadStories, module);

1
.storybook/preview-head.html
View File

@@ -2,6 +2,7 @@
<style>
html, body, #root {
align-items: center;
background-color: transparent !important;
display: flex;
height: 100vh;
justify-content: center;

66
package-lock.json generated
View File

@@ -1176,6 +1176,66 @@
}
}
},
"@storybook/addon-backgrounds": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-4.1.3.tgz",
"integrity": "sha512-cJZw5HYzNooWbp2bOL7kAnbY1Xx4bqB5r6mJoThaVHqQ/utLbbwsWhXNUjSVtmdipck0UJzZ/QaCcOZEAgTM7w==",
"dev": true,
"requires": {
"@emotion/styled": "^0.10.6",
"@storybook/addons": "4.1.3",
"@storybook/core-events": "4.1.3",
"core-js": "^2.5.7",
"eventemitter3": "^3.1.0",
"global": "^4.3.2",
"prop-types": "^15.6.2",
"util-deprecate": "^1.0.2"
},
"dependencies": {
"@storybook/addons": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-4.1.3.tgz",
"integrity": "sha512-6orT1pp0NCfqEABV8iVPkcIn/hIKHd5bA9JC0pQYz50LDIOPsohf1L5dvPwaJzaPVqLNexHUXOxxCRqyxhF21w==",
"dev": true,
"requires": {
"@storybook/channels": "4.1.3",
"@storybook/components": "4.1.3",
"global": "^4.3.2",
"util-deprecate": "^1.0.2"
}
},
"@storybook/channels": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-4.1.3.tgz",
"integrity": "sha512-SaxHlNbNO2yXwg7GI4k6TGWhYK+WdXEDLfDp9w2BigZQel5SCDZsuOCYtE3yG6ajrdBq4ehkhnLPE0wQcupp7A==",
"dev": true
},
"@storybook/components": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/@storybook/components/-/components-4.1.3.tgz",
"integrity": "sha512-Ik1j04pAw/i9wsxIQLSkbR1B5l7B23kMtzGtcVPRp1seunypxqNdX7o0sxg+xPFWNL7YDsrwP0FIP0HgUuriLQ==",
"dev": true,
"requires": {
"@emotion/core": "^0.13.1",
"@emotion/provider": "^0.11.2",
"@emotion/styled": "^0.10.6",
"global": "^4.3.2",
"lodash": "^4.17.11",
"prop-types": "^15.6.2",
"react-inspector": "^2.3.0",
"react-split-pane": "^0.1.84",
"react-textarea-autosize": "^7.0.4",
"render-fragment": "^0.1.1"
}
},
"@storybook/core-events": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-4.1.3.tgz",
"integrity": "sha512-mMHclba/+TCPdz+UXX0TYXN3SVe17p5n9OuZ6h0hZPdUPaqwN5xsi+UmYH6jGutHEzwkiVzw4cs5QvkcxuUzng==",
"dev": true
}
}
},
"@storybook/addon-knobs": {
"version": "4.0.12",
"resolved": "https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.12.tgz",
@@ -5037,6 +5097,12 @@
"integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
"dev": true
},
"eventemitter3": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.0.tgz",
"integrity": "sha512-ivIvhpq/Y0uSjcHDcOIccjmYjGLcP09MFGE7ysAwkAvkXfpZlC985pH2/ui64DKazbTW/4kN3yqozUxlXzI6cA==",
"dev": true
},
"events": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/events/-/events-3.0.0.tgz",

8
package.json
View File

@@ -38,6 +38,7 @@
"@commitlint/cli": "^7.2.1",
"@commitlint/config-conventional": "^7.1.2",
"@semantic-release/exec": "^3.3.0",
"@storybook/addon-backgrounds": "^4.1.3",
"@storybook/addon-knobs": "^4.0.11",
"@storybook/html": "^4.0.11",
"autoprefixer": "^9.1.5",
@@ -110,9 +111,12 @@
"@semantic-release/release-notes-generator",
"@semantic-release/npm",
"@semantic-release/github",
["@semantic-release/exec", {
[
"@semantic-release/exec",
{
"prepareCmd": "./scripts/updatePackageHeader.js ${nextRelease.version}"
}]
}
]
]
},
"stylelint": {