From 52723eb11e4daea9ff6ff9a6e16d4cd38076b2ca Mon Sep 17 00:00:00 2001 From: Syntax <2079305+TheUltDev@users.noreply.github.com> Date: Sun, 21 Apr 2024 19:14:24 +0800 Subject: [PATCH] Tie vocs theme to unistyles --- .gitignore | 2 +- client/package.json | 1 - design/package.json | 2 +- guides/docs/index.mdx | 4 +- library/package.json | 1 - pnpm-lock.yaml | 124 ++++++++++++------ toolkit/storybook/web/package.json | 1 - toolkit/vocs/layout.tsx | 14 ++ toolkit/vocs/package.json | 1 - toolkit/vocs/utils/blocks.tsx | 35 ----- toolkit/vocs/utils/theme.tsx | 23 ++++ .../vocs/{vocs.config.tsx => vocs.config.ts} | 12 +- 12 files changed, 126 insertions(+), 94 deletions(-) create mode 100644 toolkit/vocs/layout.tsx create mode 100644 toolkit/vocs/utils/theme.tsx rename toolkit/vocs/{vocs.config.tsx => vocs.config.ts} (87%) diff --git a/.gitignore b/.gitignore index 27debaff..25f1bbf4 100644 --- a/.gitignore +++ b/.gitignore @@ -21,7 +21,7 @@ node_modules/ *.tsbuildinfo # Vocs -vocs.*.timestamp-* +vocs.config.ts.timestamp-* # RNUC rnuc.xcconfig diff --git a/client/package.json b/client/package.json index 5f1a46d4..e0f8c2c8 100644 --- a/client/package.json +++ b/client/package.json @@ -16,7 +16,6 @@ "react-exo": "workspace:*", "react-native": "^0.73.6", "react-native-svg": "^15.1.0", - "react-native-unistyles": "^2.6.0", "react-native-web": "^0.19.10", "react-redux": "^9.1.1", "vite-plugin-node-polyfills": "^0.21.0" diff --git a/design/package.json b/design/package.json index 8f3ef7e2..df52d594 100644 --- a/design/package.json +++ b/design/package.json @@ -32,7 +32,7 @@ "react-exo": "workspace:*", "react-native": "^0.73.6", "react-native-svg": "^15.1.0", - "react-native-unistyles": "^2.6.0", + "react-native-unistyles": "^2.7.1", "react-native-web": "^0.19.10", "react-redux": "^9.1.1", "vite-plugin-node-polyfills": "^0.21.0" diff --git a/guides/docs/index.mdx b/guides/docs/index.mdx index a7279e2c..374a962c 100644 --- a/guides/docs/index.mdx +++ b/guides/docs/index.mdx @@ -2,7 +2,7 @@ layout: landing --- -import {HomePage, Sponsors} from 'vocs/components'; +import {HomePage, Sponsors} from 'vocs/components' import config from 'config'; @@ -23,4 +23,4 @@ import config from 'config'; - + \ No newline at end of file diff --git a/library/package.json b/library/package.json index f034c537..87c3c1de 100644 --- a/library/package.json +++ b/library/package.json @@ -223,7 +223,6 @@ "react-native-skottie": "^2.1.0", "react-native-svg": "^15.1.0", "react-native-ui-lib": "^7.20.0", - "react-native-unistyles": "^2.7.1", "react-native-url-polyfill": "^2.0.0", "react-native-video": "5.2.1", "react-native-web": "^0.19.10", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cc7711d7..52673ba9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -47,9 +47,6 @@ importers: react-native-svg: specifier: ^15.1.0 version: 15.1.0(react-native@0.73.6)(react@18.2.0) - react-native-unistyles: - specifier: ^2.6.0 - version: 2.6.0(@react-native/normalize-colors@0.74.1)(react-native-web@0.19.10)(react-native@0.73.6)(react@18.2.0) react-native-web: specifier: ^0.19.10 version: 0.19.10(react-dom@18.2.0)(react@18.2.0) @@ -103,8 +100,8 @@ importers: specifier: ^15.1.0 version: 15.1.0(react-native@0.73.6)(react@18.2.0) react-native-unistyles: - specifier: ^2.6.0 - version: 2.6.0(@react-native/normalize-colors@0.74.1)(react-native-web@0.19.10)(react-native@0.73.6)(react@18.2.0) + specifier: ^2.7.1 + version: 2.7.1(@react-native/normalize-colors@0.74.1)(react-native-web@0.19.10)(react-native@0.73.6)(react@18.2.0) react-native-web: specifier: ^0.19.10 version: 0.19.10(react-dom@18.2.0)(react@18.2.0) @@ -311,9 +308,6 @@ importers: react-native-ui-lib: specifier: ^7.20.0 version: 7.20.0(react-native-gesture-handler@2.16.0)(react-native-reanimated@3.8.1)(react-native@0.73.6)(react@18.2.0) - react-native-unistyles: - specifier: ^2.7.1 - version: 2.7.1(@react-native/normalize-colors@0.74.1)(react-native-macos@0.73.24)(react-native-web@0.19.10)(react-native-windows@0.73.11)(react-native@0.73.6)(react@18.2.0) react-native-url-polyfill: specifier: ^2.0.0 version: 2.0.0(react-native@0.73.6) @@ -484,9 +478,6 @@ importers: react-native-svg: specifier: ^15.1.0 version: 15.1.0(react-native@0.73.6)(react@18.2.0) - react-native-unistyles: - specifier: ^2.7.1 - version: 2.7.1(@react-native/normalize-colors@0.74.1)(react-native-macos@0.73.24)(react-native-web@0.19.10)(react-native-windows@0.73.11)(react-native@0.73.6)(react@18.2.0) react-native-web: specifier: ^0.19.10 version: 0.19.10(react-dom@18.2.0)(react@18.2.0) @@ -581,9 +572,6 @@ importers: react-native-svg: specifier: ^15.1.0 version: 15.1.0(react-native@0.73.6)(react@18.2.0) - react-native-unistyles: - specifier: ^2.7.1 - version: 2.7.1(@react-native/normalize-colors@0.74.1)(react-native-macos@0.73.24)(react-native-web@0.19.10)(react-native-windows@0.73.11)(react-native@0.73.6)(react@18.2.0) react-native-web: specifier: ^0.19.10 version: 0.19.10(react-dom@18.2.0)(react@18.2.0) @@ -667,12 +655,14 @@ packages: engines: {node: '>=12.0.0'} dependencies: tslib: 2.6.2 + dev: true /@azure/abort-controller@2.1.1: resolution: {integrity: sha512-NhzeNm5zu2fPlwGXPUjzsRCRuPx5demaZyNcyNYJDqpa/Sbxzvo/RYt9IwUaAOnDW5+r7J9UOE6f22TQnb9nhQ==} engines: {node: '>=18.0.0'} dependencies: tslib: 2.6.2 + dev: true /@azure/core-auth@1.7.1: resolution: {integrity: sha512-dyeQwvgthqs/SlPVQbZQetpslXceHd4i5a7M/7z/lGEAVwnSluabnQOjF2/dk/hhWgMISusv1Ytp4mQ8JNy62A==} @@ -681,6 +671,7 @@ packages: '@azure/abort-controller': 2.1.1 '@azure/core-util': 1.2.0 tslib: 2.6.2 + dev: true /@azure/core-rest-pipeline@1.10.1: resolution: {integrity: sha512-Kji9k6TOFRDB5ZMTw8qUf2IJ+CeJtsuMdAHox9eqpTf1cefiNMpzrfnF6sINEBZJsaVaWgQ0o48B6kcUH68niA==} @@ -698,12 +689,14 @@ packages: uuid: 8.3.2 transitivePeerDependencies: - supports-color + dev: true /@azure/core-tracing@1.1.1: resolution: {integrity: sha512-qPbYhN1pE5XQ2jPKIHP33x8l3oBu1UqIWnYqZZ3OYnYjzY0xqIHjn49C+ptsPD9yC7uyWI9Zm7iZUZLs2R4DhQ==} engines: {node: '>=18.0.0'} dependencies: tslib: 2.6.2 + dev: true /@azure/core-util@1.2.0: resolution: {integrity: sha512-ffGIw+Qs8bNKNLxz5UPkz4/VBM/EZY07mPve1ZYFqYUdPwFqRj0RPk0U7LZMOfT7GCck9YjuT1Rfp1PApNl1ng==} @@ -711,12 +704,14 @@ packages: dependencies: '@azure/abort-controller': 1.1.0 tslib: 2.6.2 + dev: true /@azure/logger@1.1.1: resolution: {integrity: sha512-/+4TtokaGgC+MnThdf6HyIH9Wrjp+CnCn3Nx3ggevN7FFjjNyjqg0yLlc2i9S+Z2uAzI8GYOo35Nzb1MhQ89MA==} engines: {node: '>=18.0.0'} dependencies: tslib: 2.6.2 + dev: true /@azure/opentelemetry-instrumentation-azure-sdk@1.0.0-beta.5: resolution: {integrity: sha512-fsUarKQDvjhmBO4nIfaZkfNSApm1hZBzcvpNbSrXdcUBxu7lRvKsV5DnwszX7cnhLyVOW9yl1uigtRQ1yDANjA==} @@ -730,6 +725,7 @@ packages: tslib: 2.6.2 transitivePeerDependencies: - supports-color + dev: true /@babel/code-frame@7.10.4: resolution: {integrity: sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==} @@ -4003,6 +3999,7 @@ packages: /@microsoft/applicationinsights-web-snippet@1.1.2: resolution: {integrity: sha512-qPoOk3MmEx3gS6hTc1/x8JWQG5g4BvRdH7iqZMENBsKCL927b7D7Mvl19bh3sW9Ucrg1fVrF+4hqShwQNdqLxQ==} + dev: true /@microsoft/tsdoc-config@0.16.2: resolution: {integrity: sha512-OGiIzzoBLgWWR0UdRJX98oYO+XKGf7tiK4Zk6tQ/E4IJqGCe7dvkTvgDZV5cFJUzLGDOjeAXrnZoA6QkVySuxw==} @@ -4067,6 +4064,7 @@ packages: /@opentelemetry/api@1.8.0: resolution: {integrity: sha512-I/s6F7yKUDdtMsoBWXJe8Qz40Tui5vsuKCWJEWVL+5q9sSWRzzx6v2KeNsOBEwd94j0eWkpWCH4yB6rZg9Mf0w==} engines: {node: '>=8.0.0'} + dev: true /@opentelemetry/core@1.22.0(@opentelemetry/api@1.8.0): resolution: {integrity: sha512-0VoAlT6x+Xzik1v9goJ3pZ2ppi6+xd3aUfg4brfrLkDBHRIVjMP0eBHrKrhB+NKcDyMAg8fAbGL3Npg/F6AwWA==} @@ -4076,6 +4074,7 @@ packages: dependencies: '@opentelemetry/api': 1.8.0 '@opentelemetry/semantic-conventions': 1.22.0 + dev: true /@opentelemetry/instrumentation@0.41.2(@opentelemetry/api@1.8.0): resolution: {integrity: sha512-rxU72E0pKNH6ae2w5+xgVYZLzc5mlxAbGzF4shxMVK8YC2QQsfN38B2GPbj0jvrKWWNUElfclQ+YTykkNg/grw==} @@ -4091,6 +4090,7 @@ packages: shimmer: 1.2.1 transitivePeerDependencies: - supports-color + dev: true /@opentelemetry/resources@1.22.0(@opentelemetry/api@1.8.0): resolution: {integrity: sha512-+vNeIFPH2hfcNL0AJk/ykJXoUCtR1YaDUZM+p3wZNU4Hq98gzq+7b43xbkXjadD9VhWIUQqEwXyY64q6msPj6A==} @@ -4101,6 +4101,7 @@ packages: '@opentelemetry/api': 1.8.0 '@opentelemetry/core': 1.22.0(@opentelemetry/api@1.8.0) '@opentelemetry/semantic-conventions': 1.22.0 + dev: true /@opentelemetry/sdk-trace-base@1.22.0(@opentelemetry/api@1.8.0): resolution: {integrity: sha512-pfTuSIpCKONC6vkTpv6VmACxD+P1woZf4q0K46nSUvXFvOFqjBYKFaAMkKD3M1mlKUUh0Oajwj35qNjMl80m1Q==} @@ -4112,10 +4113,12 @@ packages: '@opentelemetry/core': 1.22.0(@opentelemetry/api@1.8.0) '@opentelemetry/resources': 1.22.0(@opentelemetry/api@1.8.0) '@opentelemetry/semantic-conventions': 1.22.0 + dev: true /@opentelemetry/semantic-conventions@1.22.0: resolution: {integrity: sha512-CAOgFOKLybd02uj/GhCdEeeBjOS0yeoDeo/CA7ASBSmenpZHAKGB3iDm/rv3BQLcabb/OprDEsSQ1y0P8A7Siw==} engines: {node: '>=14'} + dev: true /@pkgjs/parseargs@0.11.0: resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} @@ -6415,6 +6418,7 @@ packages: invariant: 2.2.4 nullthrows: 1.1.1 react-native: 0.73.6(@babel/core@7.23.9)(@babel/preset-env@7.23.6)(react@18.2.0) + dev: true /@react-native-picker/picker@2.7.5(react-native@0.73.6)(react@18.2.0): resolution: {integrity: sha512-vhMaOLkXSUb+YKVbukMJToU4g+89VMhBG2U9+cLYF8X8HtFRidrHjohGqT8/OyesDuKIXeLIP+UFYI9Q9CRA9Q==} @@ -6457,6 +6461,7 @@ packages: transitivePeerDependencies: - applicationinsights-native-metrics - supports-color + dev: true /@react-native-windows/codegen@0.73.0(react-native@0.73.6): resolution: {integrity: sha512-M+R8JzUEizAE23MkBOuSdyDGv9BeZx47L6gUWlXI4fyM9LjXpdYU0g6la8ZWleiLrDtHW0JIz95w8KkghpB6hg==} @@ -6472,6 +6477,7 @@ packages: react-native: 0.73.6(@babel/core@7.23.9)(@babel/preset-env@7.23.6)(react@18.2.0) source-map-support: 0.5.21 yargs: 16.2.0 + dev: true /@react-native-windows/find-repo-root@0.73.0: resolution: {integrity: sha512-ahEgLmFYNvXw5I1ETJDhNMyZ/iR+DK4iOZ9YaT4EQzEPGKgj8a/4kvStSyMa117m6yRPeM8hCrhsfsHoRCphBA==} @@ -6479,12 +6485,14 @@ packages: dependencies: '@react-native-windows/fs': 0.73.0 find-up: 4.1.0 + dev: true /@react-native-windows/fs@0.73.0: resolution: {integrity: sha512-Vg0gJavc6oO4TkTMK+s8V+1KhLlJgdtuwsUaBNRfhi+Dr/lWy7GKitV6rBn/UkG8DCt9LBmwdCZWpncxSs8CDA==} engines: {node: '>= 18'} dependencies: graceful-fs: 4.2.11 + dev: true /@react-native-windows/package-utils@0.73.0: resolution: {integrity: sha512-a3CuH8RPBfIwwPYi7gjyLmvRTzjFfXpePdLAC6afXHNbc5+VR6QJJ/VPhO9kQEvUxrQCXKXRXMGsUWrg0TNTEA==} @@ -6494,6 +6502,7 @@ packages: '@react-native-windows/fs': 0.73.0 get-monorepo-packages: 1.2.0 lodash: 4.17.21 + dev: true /@react-native-windows/telemetry@0.73.1: resolution: {integrity: sha512-xaZXwmxmIrmHrj39la8t0sTSDNs8h+oVyfACSGMvRvFLA5iniSOD4toP5Ag5skO7Z9+jROdULVv4wvi6yp4zvg==} @@ -6510,6 +6519,7 @@ packages: transitivePeerDependencies: - applicationinsights-native-metrics - supports-color + dev: true /@react-native/assets-registry@0.73.1: resolution: {integrity: sha512-2FgAbU7uKM5SbbW9QptPPZx8N9Ke2L7bsHb+EhAanZjFZunA9PaYtyjUQ1s7HD+zDVqOQIvjkpXSv7Kejd2tqg==} @@ -6790,6 +6800,7 @@ packages: /@react-native/normalize-colors@0.74.1: resolution: {integrity: sha512-r+bTRs6pImqE3fx4h7bPzH2sOWSrnSHF/RJ7d00pNUj2P6ws3DdhS7WV+/7YosZkloYQfkiIkK3pIHvcYn665w==} + dev: false /@react-native/virtualized-lists@0.73.4(react-native@0.73.6): resolution: {integrity: sha512-HpmLg1FrEiDtrtAbXiwCgXFYyloK/dOIPIuWW3fsqukwJEWAiTzm1nXGJ7xPU5XTHiWZ4sKup5Ebaj8z7iyWog==} @@ -8523,6 +8534,7 @@ packages: /@tootallnate/once@2.0.0: resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==} engines: {node: '>= 10'} + dev: true /@types/acorn@4.0.6: resolution: {integrity: sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==} @@ -8822,6 +8834,7 @@ packages: /@types/shimmer@1.0.5: resolution: {integrity: sha512-9Hp0ObzwwO57DpLFF0InUjUm/II8GmKAvzbefxQTihCb7KI6yc9yzf0nLc4mVdby5N4DRCgQM2wCup9KTieeww==} + dev: true /@types/stack-utils@2.0.3: resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==} @@ -9176,6 +9189,7 @@ packages: acorn: ^8 dependencies: acorn: 8.11.3 + dev: true /acorn-jsx@5.3.2(acorn@7.4.1): resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} @@ -9343,6 +9357,7 @@ packages: diagnostic-channel-publishers: 1.0.7(diagnostic-channel@1.1.1) transitivePeerDependencies: - supports-color + dev: true /arg@5.0.2: resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==} @@ -9398,6 +9413,7 @@ packages: engines: {node: '>=0.10.0'} dependencies: array-uniq: 1.0.3 + dev: true /array-union@2.1.0: resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==} @@ -9406,6 +9422,7 @@ packages: /array-uniq@1.0.3: resolution: {integrity: sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==} engines: {node: '>=0.10.0'} + dev: true /asap@2.0.6: resolution: {integrity: sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==} @@ -9456,6 +9473,7 @@ packages: engines: {node: ^4.7 || >=6.9 || >=7.3} dependencies: stack-chain: 1.3.7 + dev: true /async-limiter@1.0.1: resolution: {integrity: sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==} @@ -9466,6 +9484,7 @@ packages: dependencies: semver: 5.7.2 shimmer: 1.2.1 + dev: true /async@3.2.5: resolution: {integrity: sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==} @@ -10187,6 +10206,7 @@ packages: /cjs-module-lexer@1.2.3: resolution: {integrity: sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==} + dev: true /clean-stack@2.2.0: resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==} @@ -10249,6 +10269,7 @@ packages: string-width: 4.2.3 strip-ansi: 6.0.1 wrap-ansi: 7.0.0 + dev: true /cliui@8.0.1: resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==} @@ -10282,6 +10303,7 @@ packages: async-hook-jl: 1.7.6 emitter-listener: 1.1.2 semver: 5.7.2 + dev: true /clsx@2.1.0: resolution: {integrity: sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==} @@ -10486,6 +10508,7 @@ packages: dependencies: async-listener: 0.6.10 emitter-listener: 1.1.2 + dev: true /convert-source-map@2.0.0: resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==} @@ -10970,11 +10993,13 @@ packages: diagnostic-channel: '*' dependencies: diagnostic-channel: 1.1.1 + dev: true /diagnostic-channel@1.1.1: resolution: {integrity: sha512-r2HV5qFkUICyoaKlBEpLKHjxMXATUf/l+h8UZPGBHGLy4DDiY2sOLcIctax4eRnTw5wH2jTMExLntGPJ8eOJxw==} dependencies: semver: 7.5.4 + dev: true /didyoumean@1.2.2: resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==} @@ -10996,6 +11021,7 @@ packages: engines: {node: '>=4'} dependencies: path-type: 3.0.0 + dev: true /dir-glob@3.0.1: resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==} @@ -11110,6 +11136,7 @@ packages: resolution: {integrity: sha512-Bt1sBAGFHY9DKY+4/2cV6izcKJUf5T7/gkdmkxzX/qv9CcGH8xSwVRW5mtX03SWJtRTWSOpzCuWN9rBFYZepZQ==} dependencies: shimmer: 1.2.1 + dev: true /emoji-regex@10.3.0: resolution: {integrity: sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==} @@ -11478,6 +11505,7 @@ packages: onetime: 5.1.2 signal-exit: 3.0.7 strip-final-newline: 2.0.0 + dev: true /execa@5.1.1: resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==} @@ -11905,6 +11933,7 @@ packages: asynckit: 0.4.0 combined-stream: 1.0.8 mime-types: 2.1.35 + dev: true /format@0.2.2: resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==} @@ -12036,6 +12065,7 @@ packages: dependencies: globby: 7.1.1 load-json-file: 4.0.0 + dev: true /get-nonce@1.0.1: resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==} @@ -12063,6 +12093,7 @@ packages: requiresBuild: true dependencies: pump: 3.0.0 + dev: true /get-stream@6.0.1: resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==} @@ -12205,6 +12236,7 @@ packages: ignore: 3.3.10 pify: 3.0.0 slash: 1.0.0 + dev: true /globrex@0.1.2: resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==} @@ -12577,6 +12609,7 @@ packages: debug: 4.3.4 transitivePeerDependencies: - supports-color + dev: true /https-browserify@1.0.0: resolution: {integrity: sha512-J+FkSdyD+0mA0N+81tMotaRMfSL9SGi+xpD3T6YApKsc3bGSXJlfXri3VyFOeYkfLRQisDk1W+jIFFKBeUBbBg==} @@ -12603,6 +12636,7 @@ packages: /human-signals@1.1.1: resolution: {integrity: sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==} engines: {node: '>=8.12.0'} + dev: true /human-signals@2.1.0: resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==} @@ -12627,6 +12661,7 @@ packages: /ignore@3.3.10: resolution: {integrity: sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==} + dev: true /ignore@5.3.0: resolution: {integrity: sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==} @@ -12664,6 +12699,7 @@ packages: acorn-import-assertions: 1.9.0(acorn@8.11.3) cjs-module-lexer: 1.2.3 module-details-from-path: 1.0.3 + dev: true /import-lazy@4.0.0: resolution: {integrity: sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==} @@ -12747,6 +12783,7 @@ packages: /interpret@1.4.0: resolution: {integrity: sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==} engines: {node: '>= 0.10'} + dev: true /invariant@2.2.4: resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==} @@ -12756,6 +12793,7 @@ packages: /invert-kv@3.0.1: resolution: {integrity: sha512-CYdFeFexxhv/Bcny+Q0BfOV+ltRlJcd4BBZBYFX/O0u4npJrgZtIcjokegtiSMAvlMTJ+Koq0GBCc//3bueQxw==} engines: {node: '>=8'} + dev: true /ip-regex@2.1.0: resolution: {integrity: sha512-58yWmlHpp7VYfcdTwMTvwMmqx/Elfxjd9RXTDyMsbL7lLWmhMylLEqiYVLKuLzOZqVgiWXD9MfR62Vv89VRxkw==} @@ -13405,6 +13443,7 @@ packages: engines: {node: '>=8'} dependencies: invert-kv: 3.0.1 + dev: true /leven@3.1.0: resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==} @@ -13635,6 +13674,7 @@ packages: parse-json: 4.0.0 pify: 3.0.0 strip-bom: 3.0.0 + dev: true /local-pkg@0.5.0: resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==} @@ -13805,6 +13845,7 @@ packages: engines: {node: '>=6'} dependencies: p-defer: 1.0.0 + dev: true /map-or-similar@1.5.0: resolution: {integrity: sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg==} @@ -14131,6 +14172,7 @@ packages: map-age-cleaner: 0.1.3 mimic-fn: 2.1.0 p-is-promise: 2.1.0 + dev: true /mem@5.1.1: resolution: {integrity: sha512-qvwipnozMohxLXG1pOqoLiZKNkC4r4qqRucSoDwXowsNGDSULiqFTRUF05vcZWnwJSG22qTsynQhxbaMtnX9gw==} @@ -14139,6 +14181,7 @@ packages: map-age-cleaner: 0.1.3 mimic-fn: 2.1.0 p-is-promise: 2.1.0 + dev: true /memoize-one@5.2.1: resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==} @@ -14911,6 +14954,7 @@ packages: /module-details-from-path@1.0.3: resolution: {integrity: sha512-ySViT69/76t8VhE1xXHK6Ch4NcDd26gx0MzKXLO+F7NOtnqH68d9zF94nT8ZWSxXh8ELOERsnJO/sWt1xZYw5A==} + dev: true /moo@0.5.2: resolution: {integrity: sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==} @@ -14936,6 +14980,7 @@ packages: /mustache@4.2.0: resolution: {integrity: sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==} hasBin: true + dev: true /mute-stream@0.0.8: resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==} @@ -15316,6 +15361,7 @@ packages: execa: 4.1.0 lcid: 3.1.1 mem: 5.1.1 + dev: true /os-tmpdir@1.0.2: resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==} @@ -15336,6 +15382,7 @@ packages: /p-defer@1.0.0: resolution: {integrity: sha512-wB3wfAxZpk2AzOfUMJNL+d36xothRSyj8EXOa4f6GMqYDN9BJaaSISbsk+wS9abmnebVw95C2Kb5t85UmpCxuw==} engines: {node: '>=4'} + dev: true /p-finally@1.0.0: resolution: {integrity: sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==} @@ -15350,6 +15397,7 @@ packages: /p-is-promise@2.1.0: resolution: {integrity: sha512-Y3W0wlRPK8ZMRbNq97l4M5otioeA5lm1z7bkNkxCka8HSPjR0xRWmpCmc9utiaLP9Jb1eD8BgeIxTW4AIF45Pg==} engines: {node: '>=6'} + dev: true /p-limit@2.3.0: resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==} @@ -15514,6 +15562,7 @@ packages: engines: {node: '>=4'} dependencies: pify: 3.0.0 + dev: true /path-type@4.0.0: resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==} @@ -15572,6 +15621,7 @@ packages: /pify@3.0.0: resolution: {integrity: sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==} engines: {node: '>=4'} + dev: true /pify@4.0.1: resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==} @@ -16266,6 +16316,7 @@ packages: - react-native - supports-color - utf-8-validate + dev: true /react-native-mmkv@2.12.2(react-native@0.73.6)(react@18.2.0): resolution: {integrity: sha512-6058Aq0p57chPrUutLGe9fYoiDVDNMU2PKV+lLFUJ3GhoHvUrLdsS1PDSCLr00yqzL4WJQ7TTzH+V8cpyrNcfg==} @@ -16430,31 +16481,7 @@ packages: yargs: 17.7.2 dev: false - /react-native-unistyles@2.6.0(@react-native/normalize-colors@0.74.1)(react-native-web@0.19.10)(react-native@0.73.6)(react@18.2.0): - resolution: {integrity: sha512-fCJDCk4ZHhyE81jmbcN5FPFSHK8p1xUJSRKmoa7GP5XDB3IAlvXK6EVsUnIZ7oM9gEG5V8Hy7G0/sNU+T4PVeA==} - engines: {node: '>= 18.0.0'} - peerDependencies: - '@react-native/normalize-colors': '*' - react: '*' - react-native: '*' - react-native-macos: '*' - react-native-web: '*' - react-native-windows: '*' - peerDependenciesMeta: - react-native-macos: - optional: true - react-native-web: - optional: true - react-native-windows: - optional: true - dependencies: - '@react-native/normalize-colors': 0.74.1 - react: 18.2.0 - react-native: 0.73.6(@babel/core@7.23.9)(@babel/preset-env@7.23.6)(react@18.2.0) - react-native-web: 0.19.10(react-dom@18.2.0)(react@18.2.0) - dev: false - - /react-native-unistyles@2.7.1(@react-native/normalize-colors@0.74.1)(react-native-macos@0.73.24)(react-native-web@0.19.10)(react-native-windows@0.73.11)(react-native@0.73.6)(react@18.2.0): + /react-native-unistyles@2.7.1(@react-native/normalize-colors@0.74.1)(react-native-web@0.19.10)(react-native@0.73.6)(react@18.2.0): resolution: {integrity: sha512-sYaDBsoX+2dfgak4YPWXvy1Hr9QFpGumBavn5wYF5dT3/Yl8F1VFol8SrvxRFfcqjpa+ENuKR6ylvmQXtQAbGQ==} engines: {node: '>= 18.0.0'} peerDependencies: @@ -16475,9 +16502,8 @@ packages: '@react-native/normalize-colors': 0.74.1 react: 18.2.0 react-native: 0.73.6(@babel/core@7.23.9)(@babel/preset-env@7.23.6)(react@18.2.0) - react-native-macos: 0.73.24(@babel/core@7.23.9)(@babel/preset-env@7.23.6)(react-native@0.73.6)(react@18.2.0) react-native-web: 0.19.10(react-dom@18.2.0)(react@18.2.0) - react-native-windows: 0.73.11(@babel/core@7.23.9)(@babel/preset-env@7.23.6)(react-native@0.73.6)(react@18.2.0) + dev: false /react-native-url-polyfill@2.0.0(react-native@0.73.6): resolution: {integrity: sha512-My330Do7/DvKnEvwQc0WdcBnFPploYKp9CYlefDXzIdEaA+PAhDYllkvGeEroEzvc4Kzzj2O4yVdz8v6fjRvhA==} @@ -16582,6 +16608,7 @@ packages: - encoding - supports-color - utf-8-validate + dev: true /react-native@0.73.6(@babel/core@7.23.9)(@babel/preset-env@7.23.6)(react@18.2.0): resolution: {integrity: sha512-oqmZe8D2/VolIzSPZw+oUd6j/bEmeRHwsLn1xLA5wllEYsZ5zNuMsDus235ONOnCRwexqof/J3aztyQswSmiaA==} @@ -17024,6 +17051,7 @@ packages: engines: {node: '>= 0.10'} dependencies: resolve: 1.22.8 + dev: true /recyclerlistview@4.2.0(react-native@0.73.6)(react@18.2.0): resolution: {integrity: sha512-uuBCi0c+ggqHKwrzPX4Z/mJOzsBbjZEAwGGmlwpD/sD7raXixdAbdJ6BTcAmuWG50Cg4ru9p12M94Njwhr/27A==} @@ -17272,6 +17300,7 @@ packages: resolve: 1.22.8 transitivePeerDependencies: - supports-color + dev: true /require-like@0.1.2: resolution: {integrity: sha512-oyrU88skkMtDdauHDuKVrgR+zuItqr6/c//FXzvmxRGMexSDc6hNvJInGW3LL46n+8b50RykrvwSUIIQH2LQ5A==} @@ -17696,6 +17725,7 @@ packages: glob: 7.2.3 interpret: 1.4.0 rechoir: 0.6.2 + dev: true /shiki@0.14.7: resolution: {integrity: sha512-dNPAPrxSc87ua2sKJ3H5dQ/6ZaY8RNnaAqK+t0eG7p0Soi2ydiqbGOTaZCqaYvA/uZYfS1LJnemt3Q+mSfcPCg==} @@ -17714,6 +17744,7 @@ packages: /shimmer@1.2.1: resolution: {integrity: sha512-sQTKC1Re/rM6XyFM6fIAGHRPVGvyXfgzIDvzoq608vM+jeyVD0Tu1E6Np0Kc2zAIFWIj963V2800iF/9LPieQw==} + dev: true /side-channel@1.0.4: resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==} @@ -17760,6 +17791,7 @@ packages: /slash@1.0.0: resolution: {integrity: sha512-3TYDR7xWt4dIqV2JauJr+EJeW356RXijHeUlO+8djJ+uBXPn8/2dpzBc8yQhh583sVvc9CvFAeQVgijsH+PNNg==} engines: {node: '>=0.10.0'} + dev: true /slash@3.0.0: resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==} @@ -17873,6 +17905,7 @@ packages: /stack-chain@1.3.7: resolution: {integrity: sha512-D8cWtWVdIe/jBA7v5p5Hwl5yOSOrmZPWDPe2KxQ5UAGD+nxbxU0lKXA4h85Ta6+qgdKVL3vUxsbIZjc1kBG7ug==} + dev: true /stack-generator@2.0.10: resolution: {integrity: sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==} @@ -18054,6 +18087,7 @@ packages: /strip-bom@3.0.0: resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==} engines: {node: '>=4'} + dev: true /strip-bom@4.0.0: resolution: {integrity: sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==} @@ -18946,6 +18980,7 @@ packages: dependencies: execa: 1.0.0 mem: 4.3.0 + dev: true /util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} @@ -18967,6 +19002,7 @@ packages: resolution: {integrity: sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==} deprecated: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. hasBin: true + dev: true /uuid@7.0.3: resolution: {integrity: sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==} @@ -19675,6 +19711,7 @@ packages: engines: {node: '>= 10'} dependencies: xml-parser-xo: 3.2.0 + dev: true /xml-formatter@3.6.2: resolution: {integrity: sha512-enWhevZNOwffZFUhzl1WMcha8lFLZUgJ7NzFs5Ug4ZOFCoNheGYXz1J9Iz/e+cTn9rCkuT1GwTacz+YlmFHOGw==} @@ -19686,6 +19723,7 @@ packages: /xml-parser-xo@3.2.0: resolution: {integrity: sha512-8LRU6cq+d7mVsoDaMhnkkt3CTtAs4153p49fRo+HIB3I1FD1o5CeXRjRH29sQevIfVJIcPjKSsPU/+Ujhq09Rg==} engines: {node: '>= 10'} + dev: true /xml-parser-xo@4.1.1: resolution: {integrity: sha512-Ggf2y90+Y6e9IK5hoPuembVHJ03PhDSdhldEmgzbihzu9k0XBo0sfcFxaSi4W1PlUSSI1ok+MJ0JCXUn+U4Ilw==} @@ -19698,6 +19736,7 @@ packages: debug: 2.6.9 transitivePeerDependencies: - supports-color + dev: true /xml2js@0.6.0: resolution: {integrity: sha512-eLTh0kA8uHceqesPqSE+VvO1CDDJWMwlQfB6LuN6T8w6MaDJ8Txm8P7s5cHD0miF0V+GGTZrDQfxPZQVsur33w==} @@ -19721,6 +19760,7 @@ packages: /xpath@0.0.27: resolution: {integrity: sha512-fg03WRxtkCV6ohClePNAECYsmpKKTv5L8y/X3Dn1hQrec3POx2jHZ/0P2qQ6HvsrU1BmeqXcof3NGGueG6LxwQ==} engines: {node: '>=0.6.0'} + dev: true /xstate@4.38.3: resolution: {integrity: sha512-SH7nAaaPQx57dx6qvfcIgqKRXIh4L0A1iYEqim4s1u7c9VoCgzZc+63FY90AKU4ZzOC2cfJzTnpO4zK7fCUzzw==} @@ -19762,6 +19802,7 @@ packages: /yargs-parser@20.2.9: resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==} engines: {node: '>=10'} + dev: true /yargs-parser@21.1.1: resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==} @@ -19794,6 +19835,7 @@ packages: string-width: 4.2.3 y18n: 5.0.8 yargs-parser: 20.2.9 + dev: true /yargs@17.7.2: resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==} diff --git a/toolkit/storybook/web/package.json b/toolkit/storybook/web/package.json index bf0fa50f..a0ba467a 100644 --- a/toolkit/storybook/web/package.json +++ b/toolkit/storybook/web/package.json @@ -16,7 +16,6 @@ "react-exo": "workspace:*", "react-native": "^0.73.6", "react-native-svg": "^15.1.0", - "react-native-unistyles": "^2.7.1", "react-native-web": "^0.19.10", "react-redux": "^9.1.1", "vite-plugin-node-polyfills": "^0.21.0" diff --git a/toolkit/vocs/layout.tsx b/toolkit/vocs/layout.tsx new file mode 100644 index 00000000..f218f669 --- /dev/null +++ b/toolkit/vocs/layout.tsx @@ -0,0 +1,14 @@ +import {Suspense, lazy} from 'react'; + +export default function Layout(props: React.PropsWithChildren) { + const ThemeSwitcher = lazy(() => import('utils/theme') + .then((module) => ({default: module.ThemeSwitcher}))); + return ( + <> + + + + {props.children} + + ) +} diff --git a/toolkit/vocs/package.json b/toolkit/vocs/package.json index 79034614..60427454 100644 --- a/toolkit/vocs/package.json +++ b/toolkit/vocs/package.json @@ -18,7 +18,6 @@ "react-exo": "workspace:*", "react-native": "^0.73.6", "react-native-svg": "^15.1.0", - "react-native-unistyles": "^2.7.1", "react-native-web": "^0.19.10", "react-redux": "^9.1.1", "vite-plugin-node-polyfills": "^0.21.0" diff --git a/toolkit/vocs/utils/blocks.tsx b/toolkit/vocs/utils/blocks.tsx index 8f8fd7c9..729912a4 100644 --- a/toolkit/vocs/utils/blocks.tsx +++ b/toolkit/vocs/utils/blocks.tsx @@ -15,38 +15,3 @@ export function Shift(props: ShiftProps) { return <>{props.children(value)}; } - -export interface ThemeSwitcherProps { - onChange: (name: string) => true | undefined, -} - -export function ThemeSwitcher(props: ThemeSwitcherProps) { - const [theme, setTheme] = useState(() => { - const storedTheme = localStorage.getItem('vocs.theme'); - return storedTheme || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); - }); - - useEffect(() => { - const updateTheme = () => { - const newTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; - setTheme(newTheme); - localStorage.setItem('vocs.theme', newTheme); - document.documentElement.classList.add(newTheme); - }; - - updateTheme(); - window.addEventListener('storage', updateTheme); - window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme); - - return () => { - window.removeEventListener('storage', updateTheme); - window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', updateTheme); - }; - }, []); - - useEffect(() => { - props.onChange(theme); - }, [theme]); - - return <>; -} \ No newline at end of file diff --git a/toolkit/vocs/utils/theme.tsx b/toolkit/vocs/utils/theme.tsx new file mode 100644 index 00000000..6aacda7f --- /dev/null +++ b/toolkit/vocs/utils/theme.tsx @@ -0,0 +1,23 @@ +import {useEffect} from 'react'; +import {UnistylesRuntime} from 'design/styles'; + +export function ThemeSwitcher(): React.ReactNode { + useEffect(() => { + const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); + const pickerButton = document.querySelector('button:has(.vocs_utils_visibleDark)'); + const updateTheme = () => { + requestAnimationFrame(() => { + const isDark = document.documentElement.classList.contains('dark'); + UnistylesRuntime.setTheme(isDark ? 'dark' : 'light'); + }) + }; + updateTheme(); + mediaQuery.addEventListener('change', updateTheme); + pickerButton?.addEventListener('click', updateTheme); + return () => { + mediaQuery.removeEventListener('change', updateTheme); + pickerButton?.removeEventListener('click', updateTheme); + } + }, []); + return null; +} diff --git a/toolkit/vocs/vocs.config.tsx b/toolkit/vocs/vocs.config.ts similarity index 87% rename from toolkit/vocs/vocs.config.tsx rename to toolkit/vocs/vocs.config.ts index 8065b03b..0cb0c5e7 100644 --- a/toolkit/vocs/vocs.config.tsx +++ b/toolkit/vocs/vocs.config.ts @@ -1,7 +1,4 @@ -import React from 'react'; import {defineConfig} from 'vocs'; -import {ThemeSwitcher} from 'utils/blocks'; -import {UnistylesRuntime} from 'design/styles'; import {themes} from 'design/theme'; import viteDocs from 'builder/vite.docs'; import sidebar from 'config/docs.sidebar'; @@ -69,14 +66,9 @@ export default defineConfig({ }, } }, - head: ( - <> - - - ), vite: viteDocs({ - command: 'build', - mode: 'production', + command: 'serve', + mode: 'development', }), twoslash: { compilerOptions: {