Merge pull request #5 from raulmelo/release/event-loop-persist-data

hotfix: bug loop in persist data
raulmelo · Dec 2, 2023 · 56ba441 · 56ba441
2 parents ae95953 + fcac9cc
commit 56ba441
Show file tree

Hide file tree

Showing 16 changed files with 109 additions and 474 deletions.
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -1,5 +1,5 @@
 import type { Preview } from "@storybook/react";
-import Themes from './themes.json'
+import Themes from '../EXAMPLES_THEMES.json';
 
 const preview: Preview = {
   parameters: {

diff --git a/.storybook/themes.json b/.storybook/themes.json
diff --git a/EXAMPLES_THEMES.json b/EXAMPLES_THEMES.json
@@ -0,0 +1,65 @@
+[
+    {
+      "name": "Theme one",
+      "tokens": {
+        "--font-family": "Roboto, sans-serif",
+        "--primary": "#fcfc30",
+        "--primary-text": "#00A8FF",
+        "--primary-container": "#fcf130",
+        "--primary-light": "#fcfc30",
+        "--primary-dark": "#FFFFFF",
+        "--primary-hover": "#fae128",
+        "--secondary": "#465eff",
+        "--secondary-text": "#fff",
+        "--secondary-container": "#2f4af8",
+        "--secondary-light": "#465eff",
+        "--secondary-dark": "#465eff",
+        "--secondary-hover": "#465eff",
+        "--background": "#fcfc30",
+        "--background-gradient": "linear-gradient(to right, var(--secondary), var(--secondary-dark))",
+        "--text": "#000"
+      }
+    },
+    {
+      "name": "Theme Two",
+      "miniLogo": "https://javisperez.github.io/tailwindcolorshades/img/icons/favicon-16x16.png",
+      "tokens": {
+        "--primary": "#c8c615",
+        "--primary-text": "#faf9e8",
+        "--primary-container": "#b4b213",
+        "--primary-light": "#e9e8a1",
+        "--primary-dark": "#62610a",
+        "--primary-hover": "#969510",
+        "--secondary": "#8a59a7",
+        "--secondary-text": "#f3eef6",
+        "--secondary-container": "#7c5096",
+        "--secondary-light": "#d0bddc",
+        "--secondary-dark": "#533564",
+        "--secondary-hover": "#533564",
+        "--background": "#fcfc30",
+        "--background-gradient": "linear-gradient(to right, var(--secondary), var(--secondary-dark))",
+        "--text": "#000"
+      }
+    },
+    {
+      "name": "Theme Three",
+      "miniLogo": "https://www.gclaims.com.br/assets/images/favicon/favicon-16x16.png",
+      "tokens": {
+        "--primary": "#00a8ff",
+        "--primary-text": "#e6f6ff",
+        "--primary-container": "#007ebf",
+        "--primary-light": "#99dcff",
+        "--primary-dark": "#006599",
+        "--primary-hover": "#007ebf",
+        "--secondary": "#00c9a8",
+        "--secondary-text": "#e6faf6",
+        "--secondary-container": "#00c9a8",
+        "--secondary-light": "#4dd9c2",
+        "--secondary-dark": "#00977e",
+        "--secondary-hover": "#00b597",
+        "--background": "#fcfc30",
+        "--background-gradient": "linear-gradient(to right, var(--primary), var(--primary-dark))",
+        "--text": "#000"
+      }
+    }
+  ]
diff --git a/README.md b/README.md
@@ -70,12 +70,12 @@ export const parameters = {
           "miniLogo": "",
           "tokens": {
             ## add all yours css variables here
-            "yours-primary": "#c8c615",
-            "yours-primary-text": "#faf9e8",
-            "yours-primary-container": "#b4b213",
-            "yours-primary-light": "#e9e8a1",
-            "yours-primary-dark": "#62610a",
-            "yours-primary-hover": "#969510" 
+            "--yours-primary": "#c8c615",
+            "--yours-primary-text": "#faf9e8",
+            "--yours-primary-container": "#b4b213",
+            "--yours-primary-light": "#e9e8a1",
+            "--yours-primary-dark": "#62610a",
+            "--yours-primary-hover": "#969510" 
             ## add all yours css variables here
           }
         },
@@ -84,12 +84,12 @@ export const parameters = {
           "miniLogo": "https://javisperez.github.io/tailwindcolorshades/img/icons/favicon-16x16.png",
           "tokens": {
             ## add all yours css variables here
-            "yours-primary": "#c8c615",
-            "yours-primary-text": "#faf9e8",
-            "yours-primary-container": "#b4b213",
-            "yours-primary-light": "#e9e8a1",
-            "yours-primary-dark": "#62610a",
-            "yours-primary-hover": "#969510"
+            "--yours-primary": "#c8c615",
+            "--yours-primary-text": "#faf9e8",
+            "--yours-primary-container": "#b4b213",
+            "--yours-primary-light": "#e9e8a1",
+            "--yours-primary-dark": "#62610a",
+            "--yours-primary-hover": "#969510"
             ## add all yours css variables here
            }
         },

diff --git a/src/Panel.tsx b/src/Panel.tsx
diff --git a/src/Tab.tsx b/src/Tab.tsx
diff --git a/src/Tool.tsx b/src/Tool.tsx
@@ -5,17 +5,19 @@ import {  PARAM_KEY, TOOL_ID } from "./constants";
 import { DropdownTool } from "./components/Dropdown";
 import { ThemeTokensType, ThemeType } from "./utils/types";
 import { DisplayToolState } from "./utils/actions";
+import { GetDataStorage } from "./utils/persist";
 
 export const Tool = memo(function MyAddonSelector() {
-  const [{ themeVariableCss }] = useGlobals();
+  const [ global, updateGlobals] = useGlobals();
   const tokensCss = useParameter<ThemeTokensType>(PARAM_KEY)
 
+
   useEffect( () => {
-    if(tokensCss && themeVariableCss) {
-      const themeSelected = tokensCss?.themes.filter((_theme: ThemeType) => _theme.name === themeVariableCss?.name)[0];
-      DisplayToolState('html', {isInDocs: false,  themeVariableCss: themeVariableCss.name, themeSelected: themeSelected} )
+    if(tokensCss && global.themeVariableCss) {
+      const themeSelected = tokensCss?.themes.filter((_theme: ThemeType) => _theme.name === global.themeVariableCss?.name)[0];
+      DisplayToolState('html', {isInDocs: false,  themeVariableCss: global.themeVariableCss.name, themeSelected: themeSelected} )
     }
-  }, [themeVariableCss])
+  }, [global.themeVariableCss])
 
   if (!tokensCss && !tokensCss?.themes?.length) {
     return null

diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
@@ -6,6 +6,7 @@ import { MountedOptions, ValidatorArrayTheme } from "../utils";
 import { OptionsThemeType, ThemeType } from "../utils/types";
 import { ButtonItem, ItemSelected, ViewToolTip } from "./styles";
 import { useGlobals } from "@storybook/manager-api";
+import { GetDataStorage } from "src/utils/persist";
 
 interface propsDropDown {
   list: ThemeType[]
@@ -19,13 +20,21 @@ export const DropdownTool = memo( function myDropdownMemo(props: propsDropDown)
   const [options, setOptions] = React.useState<OptionsThemeType[]>([]);
 
   React.useEffect(() => {
+    const dataLocal: any = GetDataStorage();
+     if(dataLocal?.selected) {
+      updateGlobals({
+        ...global,
+        themeVariableCss: dataLocal.selected
+      })
+    }
     setListOptionsItem()
   }, [])
 
+
   const LabelState = React.useCallback(() => {
     return <>
     {!!themeVariableCss && !!themeVariableCss?.name ? 
-      <ItemSelected shadow className={`button-` + PARAM_KEY}>
+      <ItemSelected shadow className={`button-` + PARAM_KEY + '-selected'}>
         {!!themeVariableCss?.miniLogo && 
           <img src={themeVariableCss.miniLogo} alt=""/>
         }
@@ -74,10 +83,15 @@ export const DropdownTool = memo( function myDropdownMemo(props: propsDropDown)
           return (
             <ButtonItem 
               key={index}  
+              className={
+                `button-` + PARAM_KEY
+                + (themeVariableCss?.name === item.name ? ' selected' : '')
+              }
               onClick={() => toggleMyTool(item)} 
+
             >
-              {item.type === 'icon' && <Icons icon="lightning" />  }
-              {item.type === 'image' && <img src={item.miniLogo} alt=""/> }
+              {item.type === 'icon' && <Icons icon="starhollow" />  }
+              {(item.type === 'image' && !!item.miniLogo) && <img src={item.miniLogo} alt=""/> }
               {item.name} 
             </ButtonItem>
           )
@@ -88,7 +102,7 @@ export const DropdownTool = memo( function myDropdownMemo(props: propsDropDown)
 
   return (
     <WithTooltip placement="top" trigger="click" tooltip={ () => ComponentItem() }>
-        {LabelState()}
+        <LabelState />
     </WithTooltip>
   );
 });