hotfix: bug loop with persist data

raulmelo · Dec 2, 2023 · f4ea9c7 · f4ea9c7
1 parent ae95953
commit f4ea9c7
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 11 deletions.
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>
   );
 });
diff --git a/src/components/styles.ts b/src/components/styles.ts
@@ -34,6 +34,10 @@ export const ButtonItem = styled(Button)({
     width: 16,
     height: 16,
     objectFit: 'contain',
+  },
+  '&.selected': {
+    color: convert(themes.normal).color.secondary,
+    fontWeight: 'bold'
   }
 });
 

diff --git a/src/withGlobals.ts b/src/withGlobals.ts
@@ -8,6 +8,7 @@ import { GeneratorId } from "./utils";
 import { DisplayToolState } from "./utils/actions";
 import { GetDataStorage, SetDataStorage } from "./utils/persist";
 import { ThemeType } from "./utils/types";
+import React from "react";
 
 export const withGlobals = (
   StoryFn: StoryFunction<Renderer>,
@@ -19,15 +20,26 @@ export const withGlobals = (
   const persist = context.parameters.designTokensCss?.persistData || false;
   const themes = context.parameters.designTokensCss?.themes || [];
 
+  console.log('context', context)
+  console.log('themeVariableCss', themeVariableCss)
+  console.log('themes', themes)
+
+
   useEffect(() => {
     const dataLocal: any = GetDataStorage();
     if(dataLocal && dataLocal.themes && dataLocal.selected) {
-      updateGlobals({themeVariableCss: dataLocal.selected});
       const selectorId = isInDocs ? `#anchor--${context.id} .docs-story` : `#root`;
       DisplayToolState(selectorId, { isInDocs, themeVariableCss: dataLocal.selected.name, themeSelected: dataLocal.selected })
     }
   }, [])
 
+  // function setTheme(selected: any) {
+  //   if(themeVariableCss) {
+  //     console.log('selected', selected)
+  //     updateGlobals({themeVariableCss: selected});
+  //   }
+  // }
+
   useEffect(() => {
     let themeSelected = null
     if(!!themeVariableCss && !!themes) {
@@ -38,7 +50,7 @@ export const withGlobals = (
     }
     const selectorId = isInDocs ? `#anchor--${context.id} .docs-story` : `#root`;
     DisplayToolState(selectorId, { isInDocs, themeVariableCss, themeSelected})
-  }, [themeVariableCss]);
+    }, [themeVariableCss]);
 
   return StoryFn();
 };