Refactor theme structure and update imports

.storybook/preview.tsx

@@ -4,7 +4,7 @@ import "../src/styles/variables.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 "../src/theme/ClickUIProvider/ClickUIProvider";
 
 const ThemeBlock = styled.div<{ $left?: boolean; $bfill?: boolean }>(
   ({ $left, $bfill: fill, theme }) => `

build-tokens.js

@@ -38,9 +38,15 @@ StyleDictionary.registerFormat({
   formatter: function ({ dictionary, platform, options, file }) {
     const theme = generateThemeFromDictionary(dictionary, (value) => typeof value);
 
-    return `
-      export interface Theme ${JSON.stringify(theme, null, 2).replaceAll("\"string\"", "string").replaceAll("\"number\"", "number")}
-    `
+    // Convert the theme object to a TypeScript interface string
+    // Prettier will format this automatically via the generate-tokens script
+    let jsonString = JSON.stringify(theme, null, 2);
+
+    // Replace type strings with TypeScript types
+    jsonString = jsonString.replaceAll('"string"', 'string');
+    jsonString = jsonString.replaceAll('"number"', 'number');
+
+    return `export interface Theme ${jsonString}\n`;
   }
 });
 
@@ -62,7 +68,7 @@ StyleDictionary.extend({
     },
     js: {
       transforms: [...transforms, "name/cti/dot"],
-      buildPath: "src/styles/",
+      buildPath: "src/theme/tokens/",
       files: [
         {
           destination: "variables.json",
@@ -75,7 +81,7 @@ StyleDictionary.extend({
     },
     ts: {
       transforms: [...transforms, "name/cti/dot"],
-      buildPath: "src/styles/",
+      buildPath: "src/theme/tokens/",
       files: [
         {
           destination: "types.ts",
@@ -112,7 +118,7 @@ themes.forEach(theme =>
       },
       js: {
         transforms: [...transforms, "name/cti/dot"],
-        buildPath: "src/styles/",
+        buildPath: "src/theme/tokens/",
         files: [
           {
             destination: `variables.${theme}.json`,

package.json

@@ -39,7 +39,7 @@
     "build:watch": "watch 'yarn build' ./src",
     "chromatic": "npx chromatic",
     "dev": "vite",
-    "generate-tokens": "node build-tokens.js",
+    "generate-tokens": "node build-tokens.js && prettier --write src/theme/tokens/types.ts",
     "lint": "eslint src --report-unused-disable-directives --max-warnings 0",
     "prettify": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\" --config .prettierrc",
     "prettier:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\" --config .prettierrc",
@@ -107,7 +107,7 @@
     "eslint-plugin-storybook": "^10.0.7",
     "globals": "^16.5.0",
     "jsdom": "^24.0.0",
-    "prettier": "3.6.2",
+    "prettier": "3.7.4",
     "prop-types": "^15.8.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",

src/components/Accordion/Accordion.tsx

@@ -9,7 +9,8 @@ type Gap = "sm" | "md" | "lg";
 type Color = "default" | "link";
 
 export interface AccordionProps
-  extends SizeProp,
+  extends
+    SizeProp,
     Omit<RadixAccordion.AccordionSingleProps, "type" | "collapsible" | "title"> {
   /** The title text or element displayed in the accordion header */
   title: ReactNode;

src/components/AutoComplete/AutoComplete.stories.tsx

@@ -3,8 +3,10 @@ import { Meta, StoryObj } from "@storybook/react-vite";
 import { AutoComplete, AutoCompleteProps } from "./AutoComplete";
 import { selectOptions } from "../Select/selectOptions";
 
-interface AutoCompleteExampleProps
-  extends Omit<AutoCompleteProps, "options" | "children"> {
+interface AutoCompleteExampleProps extends Omit<
+  AutoCompleteProps,
+  "options" | "children"
+> {
   childrenType: "children" | "options";
 }
 

src/components/AutoComplete/AutoComplete.tsx

@@ -32,8 +32,10 @@ import { getTextFromNodes } from "@/lib/getTextFromNodes";
 import AutoCompleteOptionList from "./AutoCompleteOptionList";
 
 type DivProps = HTMLAttributes<HTMLDivElement>;
-interface SelectItemComponentProps
-  extends Omit<DivProps, "disabled" | "onSelect" | "value" | "children"> {
+interface SelectItemComponentProps extends Omit<
+  DivProps,
+  "disabled" | "onSelect" | "value" | "children"
+> {
   separator?: boolean;
   disabled?: boolean;
   onSelect?: (value: string) => void;
@@ -51,8 +53,10 @@ type SelectItemLabel = {
   children?: never;
   label: ReactNode;
 };
-export interface SelectGroupProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, "heading"> {
+export interface SelectGroupProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "heading"
+> {
   heading: ReactNode;
   value?: never;
   onSelect?: never;
@@ -86,8 +90,7 @@ type SelectChildrenType = {
 type SelectOptionProp = SelectOptionType | SelectChildrenType;
 
 interface Props
-  extends PopoverProps,
-    Omit<DivProps, "onChange" | "dir" | "onSelect" | "children"> {
+  extends PopoverProps, Omit<DivProps, "onChange" | "dir" | "onSelect" | "children"> {
   onSelect?: (value: string) => void;
   value?: string;
   placeholder?: string;

src/components/ButtonGroup/ButtonGroup.tsx

@@ -3,16 +3,20 @@ import { DefaultTheme, styled } from "styled-components";
 
 type ButtonGroupType = "default" | "borderless";
 
-export interface ButtonGroupElementProps
-  extends Omit<HTMLAttributes<HTMLButtonElement>, "children"> {
+export interface ButtonGroupElementProps extends Omit<
+  HTMLAttributes<HTMLButtonElement>,
+  "children"
+> {
   /** The unique value for this button */
   value: string;
   /** The label text to display */
   label?: ReactNode;
 }
 
-export interface ButtonGroupProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, "onClick"> {
+export interface ButtonGroupProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "onClick"
+> {
   /** Array of button options to display */
   options: Array<ButtonGroupElementProps>;
   /** The currently selected button value */

src/components/CardHorizontal/CardHorizontal.tsx

@@ -13,8 +13,10 @@ import {
 type CardColor = "default" | "muted";
 export type CardSize = "sm" | "md";
 
-export interface CardHorizontalProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+export interface CardHorizontalProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "title"
+> {
   /** The title text displayed in the card */
   title?: ReactNode;
   /** Icon to display in the card */

src/components/CardPrimary/CardPrimary.tsx

@@ -8,8 +8,7 @@ import { WithTopBadgeProps, withTopBadge } from "@/components/CardPrimary/withTo
 export type CardPrimarySize = "sm" | "md";
 type ContentAlignment = "start" | "center" | "end";
 export interface CardPrimaryProps
-  extends HTMLAttributes<HTMLDivElement>,
-    WithTopBadgeProps {
+  extends HTMLAttributes<HTMLDivElement>, WithTopBadgeProps {
   /** The title text displayed in the card */
   title?: string;
   /** Icon name to display in the card header */

src/components/FileTabs/FileTabs.tsx

@@ -80,8 +80,10 @@ export interface FileTabProps extends Omit<HTMLAttributes<HTMLDivElement>, "chil
   /** Whether the tab is in preview mode (italic text) */
   preview?: boolean;
 }
-export interface FileTabsProps
-  extends Omit<ReactSortableProps<ItemInterface>, "onSelect" | "list" | "setList"> {
+export interface FileTabsProps extends Omit<
+  ReactSortableProps<ItemInterface>,
+  "onSelect" | "list" | "setList"
+> {
   /** Index of the currently selected tab */
   selectedIndex?: number;
   /** The tab elements to render */

src/components/Flyout/Flyout.tsx

@@ -199,8 +199,10 @@ const FlyoutElement = styled(Container)<{
   `}
 `;
 
-interface ElementProps
-  extends Omit<ContainerProps, "component" | "padding" | "gap" | "orientation"> {
+interface ElementProps extends Omit<
+  ContainerProps,
+  "component" | "padding" | "gap" | "orientation"
+> {
   type?: FlyoutType;
 }
 
@@ -217,18 +219,17 @@ const Element = ({ type, ...props }: ElementProps) => (
 Element.displayName = "Flyout.Element";
 Flyout.Element = Element;
 
-interface TitleHeaderProps
-  extends Omit<
-    ContainerProps,
-    | "orientaion"
-    | "justifyContent"
-    | "alignItems"
-    | "component"
-    | "padding"
-    | "gap"
-    | "children"
-    | "fillWidth"
-  > {
+interface TitleHeaderProps extends Omit<
+  ContainerProps,
+  | "orientaion"
+  | "justifyContent"
+  | "alignItems"
+  | "component"
+  | "padding"
+  | "gap"
+  | "children"
+  | "fillWidth"
+> {
   title: string;
   description?: string;
   type?: FlyoutType;
@@ -237,17 +238,16 @@ interface TitleHeaderProps
   showSeparator?: boolean;
 }
 
-interface ChildrenHeaderProps
-  extends Omit<
-    ContainerProps,
-    | "orientaion"
-    | "justifyContent"
-    | "alignItems"
-    | "component"
-    | "padding"
-    | "gap"
-    | "fillWidth"
-  > {
+interface ChildrenHeaderProps extends Omit<
+  ContainerProps,
+  | "orientaion"
+  | "justifyContent"
+  | "alignItems"
+  | "component"
+  | "padding"
+  | "gap"
+  | "fillWidth"
+> {
   title?: never;
   type?: FlyoutType;
   description?: never;
@@ -408,11 +408,10 @@ const Body = ({ align, ...props }: BodyProps) => (
 Body.displayName = "Flyout.Body";
 Flyout.Body = Body;
 
-export interface FlyoutFooterProps
-  extends Omit<
-    ContainerProps<"div">,
-    "orientaion" | "justifyContent" | "component" | "padding" | "gap"
-  > {
+export interface FlyoutFooterProps extends Omit<
+  ContainerProps<"div">,
+  "orientaion" | "justifyContent" | "component" | "padding" | "gap"
+> {
   type?: FlyoutType;
 }
 

src/components/Grid/Grid.test.tsx

@@ -30,17 +30,16 @@ const Cell: CellProps = ({ type, rowIndex, columnIndex, isScrolling, ...props })
     </div>
   );
 };
-interface Props
-  extends Omit<
-    GridProps,
-    | "cell"
-    | "rowCount"
-    | "columnCount"
-    | "columnWidth"
-    | "focus"
-    | "onFocusChange"
-    | "onColumnResize"
-  > {
+interface Props extends Omit<
+  GridProps,
+  | "cell"
+  | "rowCount"
+  | "columnCount"
+  | "columnWidth"
+  | "focus"
+  | "onFocusChange"
+  | "onColumnResize"
+> {
   rowCount?: number;
   columnCount?: number;
   columnWidth?: (index: number) => number;

src/components/Grid/Header.tsx

@@ -48,19 +48,18 @@ const ScrollableHeaderContainer = styled.div<{
   left: ${({ $left }) => $left}px;
 `;
 
-interface ColumnProps
-  extends Pick<
-    HeaderProps,
-    | "cell"
-    | "getSelectionType"
-    | "onColumnResize"
-    | "getColumnWidth"
-    | "height"
-    | "getResizerPosition"
-    | "showBorder"
-    | "getColumnHorizontalPosition"
-    | "resizingState"
-  > {
+interface ColumnProps extends Pick<
+  HeaderProps,
+  | "cell"
+  | "getSelectionType"
+  | "onColumnResize"
+  | "getColumnWidth"
+  | "height"
+  | "getResizerPosition"
+  | "showBorder"
+  | "getColumnHorizontalPosition"
+  | "resizingState"
+> {
   columnIndex: number;
   isFirstColumn: boolean;
   isLastColumn: boolean;

src/components/Grid/RowNumberColumn.tsx

@@ -51,11 +51,10 @@ interface RowNumberColumnProps {
   showBorder: boolean;
   rowAutoHeight?: boolean;
 }
-interface RowNumberProps
-  extends Pick<
-    RowNumberColumnProps,
-    "rowHeight" | "getSelectionType" | "showBorder" | "rowStart"
-  > {
+interface RowNumberProps extends Pick<
+  RowNumberColumnProps,
+  "rowHeight" | "getSelectionType" | "showBorder" | "rowStart"
+> {
   rowIndex: number;
   isLastRow: boolean;
   isFirstRow: boolean;

src/components/Grid/types.ts

@@ -166,19 +166,18 @@ export interface GridContextMenuItemProps extends Omit<ContextMenuItemProps, "ch
   label: ReactNode;
 }
 
-export interface GridProps
-  extends Omit<
-    VariableSizeGridProps,
-    | "height"
-    | "width"
-    | "rowHeight"
-    | "children"
-    | "innerElementType"
-    | "innerRef"
-    | "outerElementType"
-    | "outerRef"
-    | "columnWidth"
-  > {
+export interface GridProps extends Omit<
+  VariableSizeGridProps,
+  | "height"
+  | "width"
+  | "rowHeight"
+  | "children"
+  | "innerElementType"
+  | "innerRef"
+  | "outerElementType"
+  | "outerRef"
+  | "columnWidth"
+> {
   autoFocus?: boolean;
   autoHeight?: boolean;
   rowStart?: number;

src/components/Input/NumberField.tsx

@@ -2,7 +2,8 @@ import { ChangeEvent, InputHTMLAttributes, forwardRef, useId } from "react";
 import { Icon } from "@/components";
 import { InputWrapper, NumberInputElement, WrapperProps } from "./InputWrapper";
 export interface NumberFieldProps
-  extends Omit<WrapperProps, "id" | "children">,
+  extends
+    Omit<WrapperProps, "id" | "children">,
     Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange" | "dir"> {
   /** The input type - always number for NumberField */
   type?: "number";