mirror of
https://github.com/nostalgic-css/NES.css.git
synced 2025-08-19 04:21:22 +02:00
Add Storybook backgrounds (#231)
* 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:
@@ -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 */
|
||||
|
@@ -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);
|
||||
|
@@ -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
66
package-lock.json
generated
@@ -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",
|
||||
|
@@ -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": {
|
||||
|
Reference in New Issue
Block a user