fix: remove theme configuration panel

The configuration panel requires duplicating logic of the NDSProvider and can cause unwanted bugs.
nulogy · Nov 18, 2024 · 1797f50 · 1797f50
1 parent d091ce0
commit 1797f50
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 80 deletions.
diff --git a/.storybook/nds-theme/index.tsx b/.storybook/nds-theme/index.tsx
@@ -15,14 +15,10 @@ const localeKnobOptions = ALL_NDS_LOCALES.reduce(
 );
 
 const StorybookNDSProvider = ({ children }) => {
-  const [theme] = useLocalStorage("nds-sb-theme", desktop, {
-    serializer: (value) => JSON.stringify(value),
-    deserializer: (value) => JSON.parse(value),
-  });
   const [themeVariant] = useLocalStorage<ComponentVariant>("nds-sb-theme-variant", "desktop");
 
   return (
-    <NDSProvider locale={select("NDSProvider Locale", localeKnobOptions, "en_US")} variant={themeVariant} theme={theme}>
+    <NDSProvider locale={select("NDSProvider Locale", localeKnobOptions, "en_US")} variant={themeVariant}>
       {children}
     </NDSProvider>
   );

diff --git a/.storybook/nds-theme/register.tsx b/.storybook/nds-theme/register.tsx
@@ -1,89 +1,31 @@
 // .storybook/my-addon/register.js
 
-import React, { useEffect } from "react";
+import React from "react";
 import { addons, types, RenderOptions } from "@storybook/addons";
 import { AddonPanel } from "@storybook/components";
 import { Box, Flex, NDSProvider, Heading3, Heading2, QuietButton } from "../../src";
-import { desktop, themes } from "../../src/theme";
 import { ComponentVariant } from "../../src/NDSProvider/ComponentVariantContext";
-import useMediaQuery from "../../src/hooks/useMediaQuery";
-import { getThemeByVariant } from "../../src/NDSProvider/useNDSTheme";
-import ThemeKey from "./ThemeKey";
-import { ThemeInput, ThemeOption, ThemeSelect } from "./ThemeInput";
-import ThemeColorInput from "./ThemeColorInput";
+import { ThemeOption, ThemeSelect } from "./ThemeInput";
 import { useLocalStorage } from "./useLocalStorage/useLocalStorage";
 
 const ADDON_ID = "ndsThemeAddon";
 const PANEL_ID = `${ADDON_ID}/panel`;
 
-const composeTheme = (data, theme) => {
-  const themeGroup = Object.keys(data)[0];
-  const key = Object.keys(data[themeGroup])[0];
-  const newValue = data[themeGroup][key];
-  return {
-    ...theme,
-    [themeGroup]: {
-      ...theme[themeGroup],
-      ...(newValue && data[themeGroup]),
-    },
-  };
-};
-
 const DEFAULT_THEME_VARIANT = "desktop";
 
 const ThemePanel = () => {
   const [themeVariant, setThemeVariant] = useLocalStorage<ComponentVariant>(
     "nds-sb-theme-variant",
     DEFAULT_THEME_VARIANT
   );
-  const [theme, setTheme] = useLocalStorage("nds-sb-theme", themes[themeVariant], {
-    serializer: (value) => JSON.stringify(value),
-    deserializer: (value) => JSON.parse(value),
-  });
-  const isTabletSize = useMediaQuery(`(min-width: ${desktop.breakpoints.small})`);
-
-  useEffect(() => {
-    const newTheme = getThemeByVariant(themeVariant, isTabletSize);
-    setTheme(newTheme);
-  }, [themeVariant, isTabletSize, setTheme]);
-
-  const onChange = (group, prop) => (e) => {
-    const value = e.target.value;
-    const nextTheme = composeTheme(
-      {
-        [group]: {
-          [prop]: value,
-        },
-      },
-      theme
-    );
-    setTheme(nextTheme);
-  };
-
-  const onChangeColor = (group, prop) => (e) => {
-    const value = e.hex;
-    const nextTheme = composeTheme(
-      {
-        [group]: {
-          [prop]: value,
-        },
-      },
-      theme
-    );
-    setTheme(nextTheme);
-  };
 
   const onVariantChange = (e) => {
     const variant = e.target.value;
     setThemeVariant(variant);
-
-    const theme = themes[variant];
-    setTheme(theme);
   };
 
   const reset = () => {
     setThemeVariant(DEFAULT_THEME_VARIANT);
-    setTheme(themes.desktop);
   };
 
   return (
@@ -103,21 +45,6 @@ const ThemePanel = () => {
           <ThemeOption value="touch">Touch</ThemeOption>
         </ThemeSelect>
       </Box>
-      {Object.keys(theme).map((group) => (
-        <Box m="x3" key={group} maxWidth="500px">
-          <Heading3 fontWeight="light">{group}</Heading3>
-          {Object.keys(theme[group]).map((prop) => (
-            <Flex alignItems="center" mb="x2" key={`${group}-${prop}`}>
-              <ThemeKey>{prop}</ThemeKey>
-              {group === "colors" ? (
-                <ThemeColorInput color={theme[group][prop]} onChange={onChangeColor(group, prop)} />
-              ) : (
-                <ThemeInput value={theme[group][prop]} onChange={onChange(group, prop)} />
-              )}
-            </Flex>
-          ))}
-        </Box>
-      ))}
     </NDSProvider>
   );
 };