From a908ac8ed53f71ce24165624d38b3774a1b23ce9 Mon Sep 17 00:00:00 2001 From: Mateusz Wojczal Date: Mon, 12 Feb 2024 11:19:33 +0100 Subject: [PATCH 1/5] dev mode && styleguidit --- package.json | 2 +- src/styleguide/Logo.tsx | 14 ++++++++------ src/styleguide/ThemeTester.tsx | 25 +++++++++++++++++++++++++ src/styleguide/useLocalTheme.ts | 23 +++++++++++++---------- src/theme/provider.tsx | 6 +++++- webpack.config.js | 2 +- 6 files changed, 53 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index a975d759..88d15f35 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "postcss-styled": "^0.34.0", "postcss-syntax": "^0.36.2", "react-docgen-typescript": "^2.2.2", - "react-styleguidist": "^11.2.0", + "react-styleguidist": "^13.1.2", "source-map-loader": "^3.0.1", "start-server-and-test": "1.14.0", "style-loader": "^3.3.1", diff --git a/src/styleguide/Logo.tsx b/src/styleguide/Logo.tsx index a030eacd..29c8bb46 100644 --- a/src/styleguide/Logo.tsx +++ b/src/styleguide/Logo.tsx @@ -41,12 +41,14 @@ export const Logo: React.FC = () => { return ( - { - setTheme(theme); - }} - /> + {process.env.NODE_ENV !== "development" && ( + { + setTheme(theme); + }} + /> + )} = (props) => { const { children, childrenListStyle, flexDirection, alignItems } = props; const [localTheme] = useLocalTheme(); + if (process.env.NODE_ENV === "development") { + return ( +
+ {Object.entries(themes).map((theme) => + modes.map((mode) => ( + + + {children} + + + )) + )} +
+ ); + } + return (
{localTheme.theme === "all" && diff --git a/src/styleguide/useLocalTheme.ts b/src/styleguide/useLocalTheme.ts index 5103ee04..a4bdd5b4 100644 --- a/src/styleguide/useLocalTheme.ts +++ b/src/styleguide/useLocalTheme.ts @@ -35,21 +35,21 @@ export const setThemeToLocalStorage = ( window.dispatchEvent(new Event("themeChange")); }; -console.log(Object.keys(themes).includes(window.location.hash.substr(1))); - // Hook export function useLocalTheme( initialValue: DefaultTheme = defaultTheme ): [DefaultTheme, (value: DefaultTheme) => void] { const [localTheme, setLocalTheme] = useState( - getThemeFromLocalStorage( - Object.keys(themes).includes(window.location.hash.substr(1)) - ? { - ...(themes[window.location.hash.substr(1)] as DefaultTheme), - theme: window.location.hash.substr(1), - } - : initialValue - ) + process.env.NODE_ENV === "development" + ? themes.redTheme + : getThemeFromLocalStorage( + Object.keys(themes).includes(window.location.hash.substr(1)) + ? { + ...(themes[window.location.hash.substr(1)] as DefaultTheme), + theme: window.location.hash.substr(1), + } + : initialValue + ) ); const setTheme = useCallback((theme: DefaultTheme) => { @@ -57,6 +57,9 @@ export function useLocalTheme( }, []); useEffect(() => { + if (process.env.NODE_ENV === "development") { + return; + } if (typeof window !== "undefined") { const listener = () => { const value = getThemeFromLocalStorage(initialValue); diff --git a/src/theme/provider.tsx b/src/theme/provider.tsx index 8134f843..7aa850c3 100644 --- a/src/theme/provider.tsx +++ b/src/theme/provider.tsx @@ -4,6 +4,8 @@ import React from "react"; import { useLocalTheme } from "../styleguide/useLocalTheme"; +import themes from "../theme"; + export interface SharedDefaultTheme { theme?: string; background: string; @@ -107,7 +109,9 @@ export const GlobalThemeProvider: React.FC<{ defaultTheme?: DefaultTheme; children?: React.ReactNode; }> = ({ defaultTheme, children }) => { - const [theme] = useLocalTheme(); + //const [theme] = useLocalTheme(); + + const theme = themes.redTheme; const font = Fonts[theme.font]; return ( diff --git a/webpack.config.js b/webpack.config.js index 77170015..c1cc812c 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -6,7 +6,7 @@ module.exports = { }, // Enable sourcemaps for debugging webpack"s output. - devtool: "source-map", + //devtool: "source-map", resolve: { // Add ".ts" and ".tsx" as resolvable extensions. From 34e45a8a590268559c1596d5e1fc7635fdd93008 Mon Sep 17 00:00:00 2001 From: Mateusz Wojczal Date: Mon, 12 Feb 2024 11:20:33 +0100 Subject: [PATCH 2/5] dev mode && styleguidit --- src/theme/provider.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/theme/provider.tsx b/src/theme/provider.tsx index 7aa850c3..104ed94d 100644 --- a/src/theme/provider.tsx +++ b/src/theme/provider.tsx @@ -109,9 +109,8 @@ export const GlobalThemeProvider: React.FC<{ defaultTheme?: DefaultTheme; children?: React.ReactNode; }> = ({ defaultTheme, children }) => { - //const [theme] = useLocalTheme(); + const [theme] = useLocalTheme(); - const theme = themes.redTheme; const font = Fonts[theme.font]; return ( From f3e4eccb24de0a7c9f8fd0dfc5ce9a29a1593013 Mon Sep 17 00:00:00 2001 From: Mateusz Wojczal Date: Mon, 12 Feb 2024 11:22:20 +0100 Subject: [PATCH 3/5] dev mode && styleguidit --- src/theme/provider.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/theme/provider.tsx b/src/theme/provider.tsx index 104ed94d..fd4222a9 100644 --- a/src/theme/provider.tsx +++ b/src/theme/provider.tsx @@ -4,8 +4,6 @@ import React from "react"; import { useLocalTheme } from "../styleguide/useLocalTheme"; -import themes from "../theme"; - export interface SharedDefaultTheme { theme?: string; background: string; From 02789984107f75883044cf31ea5513543b1e3b86 Mon Sep 17 00:00:00 2001 From: Mateusz Qunabu Date: Tue, 13 Feb 2024 14:19:07 +0100 Subject: [PATCH 4/5] Update publish.yml --- .github/workflows/publish.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 36f671d3..47712b99 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -12,7 +12,7 @@ jobs: # Setup .npmrc file to publish to npm - uses: actions/setup-node@v2 with: - node-version: "16.x" + node-version: "10.x" registry-url: "https://registry.npmjs.org" - run: git config --global user.email "github@escolalms.com" && git config --global user.name "Github" - run: npm i --legacy-peer-deps From 615be326f458b81bc6ee3c311c66129c4e292ee9 Mon Sep 17 00:00:00 2001 From: Mateusz Qunabu Date: Tue, 13 Feb 2024 14:19:30 +0100 Subject: [PATCH 5/5] Update tests.yaml --- .github/workflows/tests.yaml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/tests.yaml b/.github/workflows/tests.yaml index 514fb5ba..07e4afa3 100644 --- a/.github/workflows/tests.yaml +++ b/.github/workflows/tests.yaml @@ -12,7 +12,7 @@ jobs: strategy: matrix: - node-version: [16.x] + node-version: [20.x] steps: - uses: actions/checkout@v2 @@ -30,7 +30,7 @@ jobs: strategy: matrix: - node-version: [16.x] + node-version: [20.x] steps: - uses: actions/checkout@v2 @@ -48,7 +48,7 @@ jobs: strategy: matrix: - node-version: [16.x] + node-version: [20.x] steps: - uses: actions/checkout@v2