Skip to content

Commit

Permalink
webStorybookColorScheme fix, storybook-dark-mode devDependency'd
Browse files Browse the repository at this point in the history
  • Loading branch information
@TimRoe
TimRoe committed Nov 15, 2023
1 parent 252de4a commit 68b132b
Show file tree
Hide file tree
Showing 4 changed files with 83 additions and 79 deletions.
2 changes: 1 addition & 1 deletion packages/components/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@
"@os-team/i18next-react-native-language-detector": "^1.0.28",
"i18next": "^23.4.3",
"react-i18next": "^13.0.3",
"storybook-dark-mode": "^3.0.1",
"styled-components": "^6.0.7"
},
"peerDependencies": {
Expand Down Expand Up @@ -102,6 +101,7 @@
"react-native-web": "~0.19.6",
"react-test-renderer": "^18.2.0",
"storybook-addon-designs": "^6.3.1",
"storybook-dark-mode": "^3.0.1",
"ts-jest": "^29.1.1",
"typescript": "^5.1.6"
},
Expand Down
12 changes: 8 additions & 4 deletions packages/components/src/utils/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,21 @@ import {
StyleProp,
ViewStyle,
} from 'react-native'
import { useSyncExternalStore } from 'react'

/** Function for web Storybook to override setting colorScheme based on UI toggle button */
export function webStorybookColorScheme(): ColorSchemeName {
// If not web Storybook, set with RN useColorScheme hook
if (!process.env.STORYBOOK_WEB) {
return null
}

// eslint-disable-next-line @typescript-eslint/no-var-requires
const storybookDarkMode = require('storybook-dark-mode')
return storybookDarkMode.useDarkMode() ? 'dark' : 'light'

// Mimicking RN's useColorScheme hook, but using storybook-dark-mode's setting of HTML top-body class to light/dark
return useSyncExternalStore(callback => {
window.top!.addEventListener("click", callback);
return () => window.top!.removeEventListener("click", callback);
},
(): ColorSchemeName => window.top ? window.top.document.body.className as ColorSchemeName : null,)
}

/**
Expand Down
2 changes: 1 addition & 1 deletion packages/components/tsconfig.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

/* Language and Environment */
// "target": "" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
// "lib": /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
"lib": ["DOM"] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
"jsx": "react-native" /* Specify what JSX code is generated. */,
// "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
Expand Down
146 changes: 73 additions & 73 deletions packages/components/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3628,14 +3628,14 @@ __metadata:
linkType: hard

"@floating-ui/react-dom@npm:^2.0.0":
version: 2.0.2
resolution: "@floating-ui/react-dom@npm:2.0.2"
version: 2.0.4
resolution: "@floating-ui/react-dom@npm:2.0.4"
dependencies:
"@floating-ui/dom": ^1.5.1
peerDependencies:
react: ">=16.8.0"
react-dom: ">=16.8.0"
checksum: 4797e1f7a19c1e531ed0d578ccdcbe58970743e5a480ba30424857fc953063f36d481f8c5d69248a8f1d521b739e94bf5e1ffb35506400dea3d914f166ed2f7f
checksum: 91b2369e25f84888486e48c1656117468248906034ed482d411bb9ed1061b908dd32435b4ca3d0cd0ca6083291510a98ce74d76c671d5cc25b0c41e5fa824bae
languageName: node
linkType: hard

Expand Down Expand Up @@ -5666,16 +5666,16 @@ __metadata:
linkType: hard

"@storybook/addons@npm:^7.0.0":
version: 7.5.0
resolution: "@storybook/addons@npm:7.5.0"
version: 7.5.3
resolution: "@storybook/addons@npm:7.5.3"
dependencies:
"@storybook/manager-api": 7.5.0
"@storybook/preview-api": 7.5.0
"@storybook/types": 7.5.0
"@storybook/manager-api": 7.5.3
"@storybook/preview-api": 7.5.3
"@storybook/types": 7.5.3
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
checksum: ad3ec93a3b22ca302b64c05fb8271b37329380d4b05f6be725326137f256df313866240811d3edefb9aa5d713c8fca121ba8b5e740c267cf4a77c5ba0b1a885d
checksum: 8f0ff3cbff14e5b05e6c2845c01d1c9e6f8aa3b4fe901fdec85a54ffd177f924557fdd3cdb2d1c26167ca001e379aa5107a041c7807fc7ed224072768af9c56e
languageName: node
linkType: hard

Expand Down Expand Up @@ -5708,11 +5708,11 @@ __metadata:
linkType: hard

"@storybook/api@npm:^7.0.0":
version: 7.5.0
resolution: "@storybook/api@npm:7.5.0"
version: 7.5.3
resolution: "@storybook/api@npm:7.5.3"
dependencies:
"@storybook/client-logger": 7.5.0
"@storybook/manager-api": 7.5.0
"@storybook/client-logger": 7.5.3
"@storybook/manager-api": 7.5.3
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
Expand All @@ -5721,7 +5721,7 @@ __metadata:
optional: true
react-dom:
optional: true
checksum: 82fafa5963324d33f4860d2938dd8a4b6d70b810e5ec7678f676a0f288dfd9a5f1265a122d6341c9fff19be63cd2b0dcb0cc6549c840a1d6928290a3ffcda52f
checksum: 14c28a8564811001d82e2e8c4c2be0120d181bae9d8ad278c3b60f01d28857bcdf6e84c9c57d3efa1335173635346a212fac36d9cfb441622c0c556417b3e71d
languageName: node
linkType: hard

Expand Down Expand Up @@ -5877,17 +5877,17 @@ __metadata:
languageName: node
linkType: hard

"@storybook/channels@npm:7.5.0":
version: 7.5.0
resolution: "@storybook/channels@npm:7.5.0"
"@storybook/channels@npm:7.5.3":
version: 7.5.3
resolution: "@storybook/channels@npm:7.5.3"
dependencies:
"@storybook/client-logger": 7.5.0
"@storybook/core-events": 7.5.0
"@storybook/client-logger": 7.5.3
"@storybook/core-events": 7.5.3
"@storybook/global": ^5.0.0
qs: ^6.10.0
telejson: ^7.2.0
tiny-invariant: ^1.3.1
checksum: dd318b3ab8c615b63b7f1d1c1b05ca31fb4985ba527a0ebb47d02498c18a826c78241985c644deaeaab32a4869e1cf67d40b2c7638905c01cf9942d30c0eb16d
checksum: 1d354798d977b1f52dfa457e40352f38776016af7c6239dd6348cd80206df774401f9a7858bde72cb9f7be3d93e3bbc537eb3c07187a337559c60c65f962c1da
languageName: node
linkType: hard

Expand Down Expand Up @@ -5932,12 +5932,12 @@ __metadata:
languageName: node
linkType: hard

"@storybook/client-logger@npm:7.5.0":
version: 7.5.0
resolution: "@storybook/client-logger@npm:7.5.0"
"@storybook/client-logger@npm:7.5.3":
version: 7.5.3
resolution: "@storybook/client-logger@npm:7.5.3"
dependencies:
"@storybook/global": ^5.0.0
checksum: 00f976e0d71107f9f07d98d3c1741ebb647cb50f3448377be481633198742a335a7178414cad5cb30f8327cfc5842f2726fbe5e5a7eafeed999a6f7cdab77e41
checksum: 0931daa2274f93dc1921e0c48cfb3a938b4c88843327e832c49115ea0aaa48ee5ddaeb37dc51ba0c7daac84215d62a9101befbfbf0088ce272396eb6c3f1d046
languageName: node
linkType: hard

Expand All @@ -5961,23 +5961,23 @@ __metadata:
linkType: hard

"@storybook/components@npm:^7.0.0":
version: 7.5.0
resolution: "@storybook/components@npm:7.5.0"
version: 7.5.3
resolution: "@storybook/components@npm:7.5.3"
dependencies:
"@radix-ui/react-select": ^1.2.2
"@radix-ui/react-toolbar": ^1.0.4
"@storybook/client-logger": 7.5.0
"@storybook/client-logger": 7.5.3
"@storybook/csf": ^0.1.0
"@storybook/global": ^5.0.0
"@storybook/theming": 7.5.0
"@storybook/types": 7.5.0
"@storybook/theming": 7.5.3
"@storybook/types": 7.5.3
memoizerific: ^1.11.3
use-resize-observer: ^9.1.0
util-deprecate: ^1.0.2
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
checksum: 5c8e194c2a827e9bf48f4237d00b4875022f1ad12855031a76f069cb4a679bc3a53ae6dfd15fe779578de8fdcaf3fbc28f2e0d681a2d8a2581ee39a5a29a020e
checksum: a73dbc33e0767b3152fa075e632635ba3bb2ab41917969ebd6c82790e47bc414832f5bd50be7d0a9f9d598b6241b96226eb0fe3f0da4c98ea2d6ccf439a86875
languageName: node
linkType: hard

Expand Down Expand Up @@ -6089,12 +6089,12 @@ __metadata:
languageName: node
linkType: hard

"@storybook/core-events@npm:7.5.0, @storybook/core-events@npm:^7.0.0":
version: 7.5.0
resolution: "@storybook/core-events@npm:7.5.0"
"@storybook/core-events@npm:7.5.3, @storybook/core-events@npm:^7.0.0":
version: 7.5.3
resolution: "@storybook/core-events@npm:7.5.3"
dependencies:
ts-dedent: ^2.0.0
checksum: 829321419c5e5e21c17e72c4006004e73b24648e065ed5b278074317f5d57ce896a1a28deff51184ae44fd8a9d463519ab261bbe5a17736ca50ff7c5bbcb44f9
checksum: 7f59f1fe5b5389b7f022fb68a295c80a6bf737d3bdd9233923a2efb042fd966b0a7c980467edcc2e3d5cf451ba080be54b84353f645cd868bbad9868f3c28d92
languageName: node
linkType: hard

Expand Down Expand Up @@ -6249,18 +6249,18 @@ __metadata:
languageName: node
linkType: hard

"@storybook/manager-api@npm:7.5.0":
version: 7.5.0
resolution: "@storybook/manager-api@npm:7.5.0"
"@storybook/manager-api@npm:7.5.3":
version: 7.5.3
resolution: "@storybook/manager-api@npm:7.5.3"
dependencies:
"@storybook/channels": 7.5.0
"@storybook/client-logger": 7.5.0
"@storybook/core-events": 7.5.0
"@storybook/channels": 7.5.3
"@storybook/client-logger": 7.5.3
"@storybook/core-events": 7.5.3
"@storybook/csf": ^0.1.0
"@storybook/global": ^5.0.0
"@storybook/router": 7.5.0
"@storybook/theming": 7.5.0
"@storybook/types": 7.5.0
"@storybook/router": 7.5.3
"@storybook/theming": 7.5.3
"@storybook/types": 7.5.3
dequal: ^2.0.2
lodash: ^4.17.21
memoizerific: ^1.11.3
Expand All @@ -6271,7 +6271,7 @@ __metadata:
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
checksum: c651ed1594f7bd704a846c2ba782785a0fdf83779d10b400b034711e65e40975e67d8cc484d5753523d2341112dd7e63b49dc71b04803b7a718b793b08adabf7
checksum: 82bb352a4e39f1035d969c584ff2c97c693f9b392b402ce7010507788f06c9a0024d1c23909f501a6524db0b393c26eb2361ba1c0374c62fa84c2b8a5bf2a4d5
languageName: node
linkType: hard

Expand Down Expand Up @@ -6411,16 +6411,16 @@ __metadata:
languageName: node
linkType: hard

"@storybook/preview-api@npm:7.5.0":
version: 7.5.0
resolution: "@storybook/preview-api@npm:7.5.0"
"@storybook/preview-api@npm:7.5.3":
version: 7.5.3
resolution: "@storybook/preview-api@npm:7.5.3"
dependencies:
"@storybook/channels": 7.5.0
"@storybook/client-logger": 7.5.0
"@storybook/core-events": 7.5.0
"@storybook/channels": 7.5.3
"@storybook/client-logger": 7.5.3
"@storybook/core-events": 7.5.3
"@storybook/csf": ^0.1.0
"@storybook/global": ^5.0.0
"@storybook/types": 7.5.0
"@storybook/types": 7.5.3
"@types/qs": ^6.9.5
dequal: ^2.0.2
lodash: ^4.17.21
Expand All @@ -6429,7 +6429,7 @@ __metadata:
synchronous-promise: ^2.0.15
ts-dedent: ^2.0.0
util-deprecate: ^1.0.2
checksum: 43984ba7e3aafe3b32ac88adebb2dc898d5f96a991fe98a37524b02c2e8f887d4757d5b12ea5c5b812db173310076f2367e46f85ba21c4005591e87a100debc5
checksum: 9e75ad27a031c4b17200ffc815452d3379c6a3ef28c21ca4c389521d433be6a217f2a84ee7c38b5562c31783c31101d939233053e2634f62fe1f30e39fd1fcde
languageName: node
linkType: hard

Expand Down Expand Up @@ -6608,17 +6608,17 @@ __metadata:
languageName: node
linkType: hard

"@storybook/router@npm:7.5.0":
version: 7.5.0
resolution: "@storybook/router@npm:7.5.0"
"@storybook/router@npm:7.5.3":
version: 7.5.3
resolution: "@storybook/router@npm:7.5.3"
dependencies:
"@storybook/client-logger": 7.5.0
"@storybook/client-logger": 7.5.3
memoizerific: ^1.11.3
qs: ^6.10.0
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
checksum: be37e8e525c1c2d7ad6da883a1d588dbf3fe182143dc02222f10a43baaed3b7259e8c7c7bf32ac54e26bdc58cfb040bb418d898d8d97e8107a83a9d3c7ccd139
checksum: 7c7c9a6f6e0ff6a46ab284c94e33398364115f6c4e06bbab89df770efeb654819fced83e5f37c627af91b620134c9c09fcdc112bc24698350dd8f6e2fbeaeaf4
languageName: node
linkType: hard

Expand Down Expand Up @@ -6716,30 +6716,30 @@ __metadata:
languageName: node
linkType: hard

"@storybook/theming@npm:7.5.0, @storybook/theming@npm:^7.0.0":
version: 7.5.0
resolution: "@storybook/theming@npm:7.5.0"
"@storybook/theming@npm:7.5.3, @storybook/theming@npm:^7.0.0":
version: 7.5.3
resolution: "@storybook/theming@npm:7.5.3"
dependencies:
"@emotion/use-insertion-effect-with-fallbacks": ^1.0.0
"@storybook/client-logger": 7.5.0
"@storybook/client-logger": 7.5.3
"@storybook/global": ^5.0.0
memoizerific: ^1.11.3
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
checksum: d7e94fb094daf3a064ab5ad65104f60d82ccf3cf7a9b194174725d9e96f888f1c3378e59a3c7dfc4a7e745354f504fd6f5e3145e69e315470ca6c004c3a7fdc5
checksum: e9769d0ad9144d47755d89fad0788ca6fa990116e2c8a3ab7c491357d71adea9feb248d1a5d6a81f4981720feaf80f42373a9ed4adb85906babc14422824fae9
languageName: node
linkType: hard

"@storybook/types@npm:7.5.0":
version: 7.5.0
resolution: "@storybook/types@npm:7.5.0"
"@storybook/types@npm:7.5.3":
version: 7.5.3
resolution: "@storybook/types@npm:7.5.3"
dependencies:
"@storybook/channels": 7.5.0
"@storybook/channels": 7.5.3
"@types/babel__core": ^7.0.0
"@types/express": ^4.7.0
file-system-cache: 2.3.0
checksum: e74f807660eb9a626c3aea1822d7eb412b4ea129e5254e4e2b8e6f2af292d4ea797ad73e1b64e36ba44fdd3015297f2fde095fdc80690f56f5e050fc1d5576f7
checksum: f9c14fc4579260fdc014e9f759c89b2214c90b9c75a31f7bf6e11d404d47d5d350650258febf8c13467615aeabab8ac4008af8cec5fc90959639bed68ce78408
languageName: node
linkType: hard

Expand Down Expand Up @@ -6802,15 +6802,15 @@ __metadata:
linkType: hard

"@types/babel__core@npm:^7.0.0":
version: 7.20.2
resolution: "@types/babel__core@npm:7.20.2"
version: 7.20.4
resolution: "@types/babel__core@npm:7.20.4"
dependencies:
"@babel/parser": ^7.20.7
"@babel/types": ^7.20.7
"@types/babel__generator": "*"
"@types/babel__template": "*"
"@types/babel__traverse": "*"
checksum: 564fbaa8ff1305d50807ada0ec227c3e7528bebb2f8fe6b2ed88db0735a31511a74ad18729679c43eeed8025ed29d408f53059289719e95ab1352ed559a100bd
checksum: 75ed6072213423d2b827740d68bbf96f5a7050ce8bd842dde0ceec8d352d06e847166bac757df4beba55525b65f8727c0432adeb5cb4f83aa42e155ac555767e
languageName: node
linkType: hard

Expand Down Expand Up @@ -6952,14 +6952,14 @@ __metadata:
linkType: hard

"@types/express@npm:^4.7.0":
version: 4.17.19
resolution: "@types/express@npm:4.17.19"
version: 4.17.21
resolution: "@types/express@npm:4.17.21"
dependencies:
"@types/body-parser": "*"
"@types/express-serve-static-core": ^4.17.33
"@types/qs": "*"
"@types/serve-static": "*"
checksum: 3d39d0655eb0825d96fec100985a38737767ddd6da2dbda1e330a3adf36c98a9b7cd8d9539db32876d1fbb47a09343cad7b38c30c8dd7c291271fcb9b85cb21b
checksum: fb238298630370a7392c7abdc80f495ae6c716723e114705d7e3fb67e3850b3859bbfd29391463a3fb8c0b32051847935933d99e719c0478710f8098ee7091c5
languageName: node
linkType: hard

Expand Down

0 comments on commit 68b132b

Please sign in to comment.