From 9087f0c71e72ac399603751be29e0bf4bc3c90c1 Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Fri, 3 Apr 2020 17:43:13 +0300 Subject: [PATCH] Add theming-addon --- .storybook/config.js | 1 + package.json | 1 + src/content.stories.js | 9 +++- yarn.lock | 107 ++++++++++++++++++++++++++++++++++++++++- 4 files changed, 114 insertions(+), 4 deletions(-) diff --git a/.storybook/config.js b/.storybook/config.js index b477bb6..26c4570 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -16,4 +16,5 @@ addParameters({ }, }); + configure(() => require('./index.stories'), module); diff --git a/package.json b/package.json index 12870da..13454ea 100755 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@babel/core": "^7.7.7", "@babel/preset-env": "^7.7.7", "@babel/preset-react": "^7.7.4", + "@react-theming/storybook-addon": "^0.2.1", "@usulpro/package-prepare": "^1.2.1", "babel-eslint": "^7.2.3", "babel-jest": "^24.9.0", diff --git a/src/content.stories.js b/src/content.stories.js index d29c694..394cb2c 100644 --- a/src/content.stories.js +++ b/src/content.stories.js @@ -5,10 +5,15 @@ const { withGraphCMS, } = require('@focus-reactive/storybook-addon-graphcms'); const { storiesOf } = require('@storybook/react'); +const { withThemes } = require('@react-theming/storybook-addon'); const { credentials } = require('./config'); const { queriesData, getContent } = require('./index'); +const ThemeProvider = ({ children }) => ( + {children} +); + const AwaitForData = ({ content }) => { if (!content) return 'Loading data from GraphCMS'; return ; @@ -35,11 +40,11 @@ const TagColor = ({ title, tag }) => ( const passConferenceSettings = async conferenceSettings => { const { conferenceTitle, eventYear } = conferenceSettings; const content = await getContent(conferenceSettings); - + const { tagColors } = content.conferenceSettings; storiesOf('Content Layer', module) + .addDecorator(withThemes(ThemeProvider, [tagColors])) .add('content', () => ) .add('tag colors', () => { - const { tagColors } = content.conferenceSettings; const tags = Object.keys(tagColors); return (
diff --git a/yarn.lock b/yarn.lock index 66c8d5a..4472e53 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1246,6 +1246,11 @@ graphql-request "^1.8.2" react-json-view "^1.19.1" +"@icons/material@^0.2.4": + version "0.2.4" + resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8" + integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw== + "@jest/console@^24.7.1", "@jest/console@^24.9.0": version "24.9.0" resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.9.0.tgz#79b1bc06fb74a8cfb01cbdedf945584b1b9707f0" @@ -1525,6 +1530,29 @@ react-lifecycles-compat "^3.0.4" warning "^3.0.0" +"@react-theming/storybook-addon@^0.2.1": + version "0.2.1" + resolved "https://registry.yarnpkg.com/@react-theming/storybook-addon/-/storybook-addon-0.2.1.tgz#a399083c4d873480b44ca145fbb11bdd615cf0e0" + integrity sha512-23OW5uR3XJm79Hqt6oK7Oslsg4/I3hm0MxwS/nMrP8HX6uPuQx68yInDWIXtGXewPRNqG0UHE9t/yghZnKXy2Q== + dependencies: + "@react-theming/theme-name" "^1.0.2" + "@react-theming/theme-swatch" "^0.1.1" + "@usulpro/react-json-view" "^2.0.0" + react-color "^2.18.0" + +"@react-theming/theme-name@^1.0.2": + version "1.0.2" + resolved "https://registry.yarnpkg.com/@react-theming/theme-name/-/theme-name-1.0.2.tgz#41acb4d875c21950c98d23eb0f8a9d03f412fdc6" + integrity sha512-6YUXCRK/K0HMICwOm7GVOq9FD7u85yE1P8p5bIOFlUz1mzCQbn4GMSVR1iUiPMgKxwLJysekKaOJMPa5RheC9w== + dependencies: + color-name-list "^4.7.1" + nearest-color "^0.4.4" + +"@react-theming/theme-swatch@^0.1.1": + version "0.1.1" + resolved "https://registry.yarnpkg.com/@react-theming/theme-swatch/-/theme-swatch-0.1.1.tgz#3e17e19c48cad1db2369faecec0f6b6510765d7a" + integrity sha512-tArUE3Zz5vniNJ/XgeSGDSpdUe7ep8WlZFIGuSVf10LqaEddb6aKhpEbKwLEfhnTr1kLDx/ktLEUV84bmwj+PQ== + "@sindresorhus/is@^0.14.0": version "0.14.0" resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea" @@ -2232,6 +2260,17 @@ read-pkg-up "^7.0.0" shelljs "^0.8.3" +"@usulpro/react-json-view@^2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@usulpro/react-json-view/-/react-json-view-2.0.0.tgz#1bcbca365892f60ff2b94ef6cdaef40683ea3e39" + integrity sha512-0X8eSuoKWTqEehoHUcPrlkilBwXD0mk7OxOM66JGiUhRH34gJElG1jGU1kkS765IMgVk/gZyJdyd1B54dmUvEw== + dependencies: + color-string "^1.5.3" + flux "^3.1.3" + react-base16-styling "^0.6.0" + react-lifecycles-compat "^3.0.4" + react-textarea-autosize "^6.1.0" + "@webassemblyjs/ast@1.8.5": version "1.8.5" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359" @@ -4124,11 +4163,29 @@ color-convert@^1.9.0: dependencies: color-name "1.1.3" +color-name-list@^4.7.1: + version "4.15.0" + resolved "https://registry.yarnpkg.com/color-name-list/-/color-name-list-4.15.0.tgz#23a632bdb37fdad4c7f50303d0068c410fe3d601" + integrity sha512-4P3pFob8w6LNnku94oIacj8suCfhOLmY+25bmfoOwqFtuhLTD4Oux+/aUBdZLcvLK3fHrBe6XrzAU2IbwoWnQA== + color-name@1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU= +color-name@^1.0.0: + version "1.1.4" + resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" + integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== + +color-string@^1.5.3: + version "1.5.3" + resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.3.tgz#c9bbc5f01b58b5492f3d6857459cb6590ce204cc" + integrity sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw== + dependencies: + color-name "^1.0.0" + simple-swizzle "^0.2.2" + colors@^1.1.2: version "1.4.0" resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78" @@ -7317,6 +7374,11 @@ is-arrayish@^0.2.1: resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d" integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0= +is-arrayish@^0.3.1: + version "0.3.2" + resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03" + integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ== + is-binary-path@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898" @@ -8709,7 +8771,7 @@ lodash@4.17.5: resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511" integrity sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw== -lodash@^4.11.1, lodash@^4.16.4, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.2, lodash@^4.2.0: +lodash@^4.0.1, lodash@^4.11.1, lodash@^4.16.4, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.2, lodash@^4.2.0: version "4.17.15" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548" integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A== @@ -8861,6 +8923,11 @@ markdown-to-jsx@^6.10.3, markdown-to-jsx@^6.9.1, markdown-to-jsx@^6.9.3: prop-types "^15.6.2" unquote "^1.1.0" +material-colors@^1.2.1: + version "1.2.6" + resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46" + integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg== + md5.js@^1.3.4: version "1.3.5" resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f" @@ -9230,6 +9297,11 @@ natural-compare@^1.4.0: resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7" integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc= +nearest-color@^0.4.4: + version "0.4.4" + resolved "https://registry.yarnpkg.com/nearest-color/-/nearest-color-0.4.4.tgz#fb812072b511f4f09a0a316903332e09fa5d7f1d" + integrity sha512-orhcaIORC10tf41Ld2wwlcC+FaAavHG87JHWB3eHH5p7v2k9Tzym2XNEZzLAm5YJwGv6Q38WWc7SOb+Qfu/4NQ== + negotiator@0.6.2: version "0.6.2" resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb" @@ -10470,7 +10542,7 @@ prompts@^2.0.1: kleur "^3.0.3" sisteransi "^1.0.3" -prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -10715,6 +10787,18 @@ react-clientside-effect@^1.2.0: dependencies: "@babel/runtime" "^7.0.0" +react-color@^2.18.0: + version "2.18.0" + resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.18.0.tgz#34956f0bac394f6c3bc01692fd695644cc775ffd" + integrity sha512-FyVeU1kQiSokWc8NPz22azl1ezLpJdUyTbWL0LPUpcuuYDrZ/Y1veOk9rRK5B3pMlyDGvTk4f4KJhlkIQNRjEA== + dependencies: + "@icons/material" "^0.2.4" + lodash "^4.17.11" + material-colors "^1.2.1" + prop-types "^15.5.10" + reactcss "^1.2.0" + tinycolor2 "^1.4.1" + react-dev-utils@^9.0.0: version "9.1.0" resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-9.1.0.tgz#3ad2bb8848a32319d760d0a84c56c14bdaae5e81" @@ -10920,6 +11004,13 @@ react@^16.12.0, react@^16.8.3: object-assign "^4.1.1" prop-types "^15.6.2" +reactcss@^1.2.0: + version "1.2.3" + resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd" + integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A== + dependencies: + lodash "^4.0.1" + read-pkg-up@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be" @@ -11741,6 +11832,13 @@ simple-errors@^1.0.1: dependencies: errno "^0.1.1" +simple-swizzle@^0.2.2: + version "0.2.2" + resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a" + integrity sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo= + dependencies: + is-arrayish "^0.3.1" + simplebar-react@^1.0.0-alpha.6: version "1.2.3" resolved "https://registry.yarnpkg.com/simplebar-react/-/simplebar-react-1.2.3.tgz#bd81fa9827628470e9470d06caef6ece15e1c882" @@ -12420,6 +12518,11 @@ tiny-warning@^1.0.2: resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== +tinycolor2@^1.4.1: + version "1.4.1" + resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8" + integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g= + title-case@^2.1.0: version "2.1.1" resolved "https://registry.yarnpkg.com/title-case/-/title-case-2.1.1.tgz#3e127216da58d2bc5becf137ab91dae3a7cd8faa"