Skip to content

Commit

Permalink
Add theming-addon
Browse files Browse the repository at this point in the history
  • Loading branch information
@usulpro
usulpro committed Apr 3, 2020
1 parent 0645ff7 commit 9087f0c
Show file tree
Hide file tree
Showing 4 changed files with 114 additions and 4 deletions.
1 change: 1 addition & 0 deletions .storybook/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,5 @@ addParameters({
},
});


configure(() => require('./index.stories'), module);
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
9 changes: 7 additions & 2 deletions src/content.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => (
<React.Fragment>{children}</React.Fragment>
);

const AwaitForData = ({ content }) => {
if (!content) return 'Loading data from GraphCMS';
return <ReactJson src={content} name="content" collapsed={2} />;
Expand All @@ -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', () => <AwaitForData content={content} />)
.add('tag colors', () => {
const { tagColors } = content.conferenceSettings;
const tags = Object.keys(tagColors);
return (
<div>
Expand Down
107 changes: 105 additions & 2 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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/[email protected]":
version "1.8.5"
resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359"
Expand Down Expand Up @@ -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==

[email protected]:
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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -8709,7 +8771,7 @@ [email protected]:
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==
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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==

[email protected]:
version "0.6.2"
resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
Expand Down Expand Up @@ -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==
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit 9087f0c

Please sign in to comment.