Migrate to SCSS modules and add build-time theming

.eslintrc.cjs

@@ -2,6 +2,7 @@ module.exports = {
   env: {
     browser: true,
     es2020: true,
+    node: true,
   },
   extends: [
     "eslint:recommended",

.gitignore

@@ -7,3 +7,7 @@ storybook-static
 *.log
 **/.DS_Store
 vite.config.ts.timestamp*
+
+# Generated TypeScript declaration files for SCSS modules
+**/*.scss.d.ts
+**/*.css.d.ts

.prettierignore

@@ -1 +0,0 @@
-src/styles/types.ts

.storybook/main.ts

@@ -1,16 +1,20 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 const config: StorybookConfig = {
   core: {
-    disableTelemetry: true
+    disableTelemetry: true,
   },
   stories: [
     "../src/Introduction.mdx",
     "../src/components/icons/Icons.mdx",
     "../src/**/*.stories.@(js|jsx|ts|tsx)",
   ],
 
-  addons: ["@storybook/addon-links", //"@storybook/addon-interactions",
-  "storybook-addon-pseudo-states", "@storybook/addon-a11y", "@storybook/addon-docs"],
+  addons: [
+    "@storybook/addon-links", //"@storybook/addon-interactions",
+    "storybook-addon-pseudo-states",
+    "@storybook/addon-a11y",
+    "@storybook/addon-docs",
+  ],
 
   framework: {
     name: "@storybook/react-vite",
@@ -33,27 +37,36 @@ const config: StorybookConfig = {
   },
 
   async viteFinal(config, { configType }) {
+    if (config.css?.preprocessorOptions?.scss) {
+      config.css.preprocessorOptions.scss.api = "modern-compiler";
+    } else {
+      config.css = config.css || {};
+      config.css.preprocessorOptions = config.css.preprocessorOptions || {};
+      config.css.preprocessorOptions.scss = {
+        api: "modern-compiler",
+      };
+    }
     // Workaround for Storybook 10.0.7 bug where MDX files generate file:// imports
     // See: https://github.com/storybookjs/storybook/issues (mdx-react-shim resolution)
     config.plugins = config.plugins || [];
     config.plugins.push({
-      name: 'fix-storybook-mdx-shim',
+      name: "fix-storybook-mdx-shim",
       resolveId(source) {
         // Intercept the malformed file:// URL and resolve to the correct package
-        if (source.includes('mdx-react-shim')) {
-          return this.resolve('@mdx-js/react', undefined, { skipSelf: true });
+        if (source.includes("mdx-react-shim")) {
+          return this.resolve("@mdx-js/react", undefined, { skipSelf: true });
         }
         return null;
       },
     });
 
     // Suppress Rollup warnings for production builds
-    if (configType === 'PRODUCTION') {
+    if (configType === "PRODUCTION") {
       config.build = config.build || {};
       config.build.rollupOptions = config.build.rollupOptions || {};
       const originalOnWarn = config.build.rollupOptions.onwarn;
       config.build.rollupOptions.onwarn = (warning, warn) => {
-        if (warning.message?.includes('mdx-react-shim')) return;
+        if (warning.message?.includes("mdx-react-shim")) return;
         originalOnWarn ? originalOnWarn(warning, warn) : warn(warning);
       };
     }

.storybook/preview.module.scss

@@ -0,0 +1,25 @@
+.cuiThemeBlock {
+  position: absolute;
+  top: 0.5rem;
+  width: 96vw;
+  height: 100vh;
+  bottom: 0;
+  overflow: auto;
+  padding: 1rem;
+  background: var(--click-storybook-global-background);
+
+  &.cuiLeft {
+    left: 0;
+    right: 50vw;
+  }
+
+  &.cuiRight {
+    left: 50vw;
+    right: 0;
+  }
+
+  &.cuiFill {
+    left: 0;
+    right: 0;
+  }
+}

.storybook/preview.tsx

@@ -1,24 +1,28 @@
 import React from "react";
 import type { Preview } from "@storybook/react-vite";
-import "../src/styles/variables.css";
+import "@/styles/cui-default-theme.css";
 import { Decorator } from "@storybook/react-vite";
-import styled from "styled-components";
 import { themes } from "storybook/theming";
-import ClickUIProvider from "../src/components/ClickUIProvider/ClickUIProvider";
+import { ClickUIProvider } from "@/theme/ClickUIProvider";
+import clsx from "clsx";
+import styles from "./preview.module.scss";
 
-const ThemeBlock = styled.div<{ $left?: boolean; $bfill?: boolean }>(
-  ({ $left, $bfill: fill, theme }) => `
-      position: absolute;
-      top: 0.5rem;
-      left: ${$left || fill ? 0 : "50vw"};
-      right: ${$left ? "50vw" : 0};
-      width: 96vw;
-      height: 100vh;
-      bottom: 0;
-      overflow: auto;
-      padding: 1rem;
-      background: ${theme.click.storybook.global.background};
-    `
+interface ThemeBlockProps {
+  left?: boolean;
+  fill?: boolean;
+  children: React.ReactNode;
+}
+
+const ThemeBlock: React.FC<ThemeBlockProps> = ({ left, fill, children }) => (
+  <div
+    className={clsx(styles.cuiThemeBlock, {
+      [styles.cuiLeft]: left || fill,
+      [styles.cuiRight]: !left && !fill,
+      [styles.cuiFill]: fill,
+    })}
+  >
+    {children}
+  </div>
 );
 
 export const globalTypes = {
@@ -27,28 +31,38 @@ export const globalTypes = {
     description: "Global theme for components",
     defaultValue: "dark",
     toolbar: {
-      // The icon for the toolbar item
       icon: "circlehollow",
-      // Array of options
       items: [
-        { value: "dark", icon: "moon", title: "dark" },
-        { value: "light", icon: "sun", title: "light" },
-        { value: "classic", icon: "circle", title: "classic" },
+        { value: "light", icon: "sun", title: "Light" },
+        { value: "dark", icon: "moon", title: "Dark" },
+        { value: "system", icon: "browser", title: "System" },
       ],
-      // Property that specifies if the name of the item will be displayed
       showName: true,
+      dynamicTitle: true,
     },
   },
 };
 const withTheme: Decorator = (StoryFn, context) => {
   const parameters = context.parameters;
-  const theme = parameters?.theme || context.globals.theme;
+  const theme = parameters?.theme || context.globals.theme || "light";
+
   return (
     <ClickUIProvider
-      theme={theme}
-      config={{ tooltip: { delayDuration: 0 } }}
+      key={`storybook-theme-${theme}`}
+      theme={theme as any}
+      defaultTheme="light"
+      enableTransitions={true}
+      transitionDuration={200}
+      enableDevTools={true}
+      fallbackTheme="light"
+      config={{
+        tooltip: { delayDuration: 100 },
+        toast: { duration: 3000 },
+        preloadThemes: ["light", "dark"],
+        logThemeChanges: true,
+      }}
     >
-      <ThemeBlock $left>
+      <ThemeBlock fill>
         <StoryFn />
       </ThemeBlock>
     </ClickUIProvider>
@@ -83,7 +97,24 @@ const preview: Preview = {
     },
     docs: {
       theme: themes.dark,
-      codePanel: true
+      codePanel: true,
+    },
+    backgrounds: {
+      default: "click-ui",
+      values: [
+        {
+          name: "click-ui",
+          value: "var(--click-storybook-global-background)",
+        },
+        {
+          name: "light",
+          value: "var(--click-storybook-global-background)",
+        },
+        {
+          name: "dark",
+          value: "var(--click-storybook-global-background)",
+        },
+      ],
     },
   },
 };

.vscode/settings.json

@@ -1,2 +1,19 @@
 {
+  // TypeScript: Prioritize source files over declaration files
+  "typescript.preferences.autoImportFileExcludePatterns": [
+    "**/*.scss.d.ts",
+    "**/node_modules/**"
+  ],
+
+  // Hide generated .scss.d.ts files from search and file explorer
+  "files.exclude": {
+    "**/*.scss.d.ts": true
+  },
+
+  // Search settings to exclude generated files
+  "search.exclude": {
+    "**/*.scss.d.ts": true,
+    "**/node_modules": true,
+    "**/dist": true
+  }
 }