Feature/stylegudits update

.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

.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

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",

src/styleguide/Logo.tsx

@@ -41,12 +41,14 @@ export const Logo: React.FC = () => {
 
   return (
     <React.Fragment>
-      <ThemeCustomizer
-        // hasAll
-        onUpdate={(theme) => {
-          setTheme(theme);
-        }}
-      />
+      {process.env.NODE_ENV !== "development" && (
+        <ThemeCustomizer
+          // hasAll
+          onUpdate={(theme) => {
+            setTheme(theme);
+          }}
+        />
+      )}
       <svg
         version="1.0"
         id="Warstwa_1"

src/styleguide/ThemeTester.tsx

@@ -289,6 +289,31 @@ export const ThemeTester: React.FC<ThemeTesterProps> = (props) => {
   const { children, childrenListStyle, flexDirection, alignItems } = props;
   const [localTheme] = useLocalTheme();
 
+  if (process.env.NODE_ENV === "development") {
+    return (
+      <div>
+        {Object.entries(themes).map((theme) =>
+          modes.map((mode) => (
+            <ThemeProvider
+              theme={{ ...theme[1], mode }}
+              key={`${theme[0]}${mode}`}
+            >
+              <ThemeTesterWrapper
+                flexDirection={flexDirection}
+                alignItems={alignItems}
+                name={theme[0].split("Theme").join("")}
+                mode={mode}
+                childrenListStyle={childrenListStyle}
+              >
+                {children}
+              </ThemeTesterWrapper>
+            </ThemeProvider>
+          ))
+        )}
+      </div>
+    );
+  }
+
   return (
     <div>
       {localTheme.theme === "all" &&

src/styleguide/useLocalTheme.ts

@@ -35,28 +35,31 @@ 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<DefaultTheme>(
-    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) => {
     setThemeToLocalStorage(theme);
   }, []);
 
   useEffect(() => {
+    if (process.env.NODE_ENV === "development") {
+      return;
+    }
     if (typeof window !== "undefined") {
       const listener = () => {
         const value = getThemeFromLocalStorage(initialValue);

src/theme/provider.tsx

@@ -108,6 +108,7 @@ export const GlobalThemeProvider: React.FC<{
   children?: React.ReactNode;
 }> = ({ defaultTheme, children }) => {
   const [theme] = useLocalTheme();
+
   const font = Fonts[theme.font];
 
   return (

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.