Refactor Token Gen

package.json

@@ -51,7 +51,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "build-css": "rollup -c rollup-css.config.js",
-    "generate-tokens": "tsx ./scripts/tokenGen/index.js",
+    "generate-tokens": "tsx ./src/tokenGen/index.js",
     "bundle-tokens": "rollup --config rollup-tokens.config.js",
     "compile-components": "rollup -c --bundleConfigAsCjs --max-old-space-size=8076",
     "process-components": "mkdirp ./dist/components && cp -r ./dist/temp-cleanup/*js ./dist/components && rimraf dist/temp-cleanup",

src/components/tools/SandboxEditor/SandboxEditor.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, PropsWithChildren, useEffect, useState } from 'react';
+import React, { PropsWithChildren, useEffect, useState } from 'react';
 import Button from '~/components/ui/Button/Button';
 import Separator from '~/components/ui/Separator/Separator';
 import Heading from '~/components/ui/Heading/Heading';
@@ -8,7 +8,7 @@ import RovingFocusGroup from '~/core/utils/RovingFocusGroup';
 
 import Theme from '~/components/ui/Theme/Theme';
 
-import colors from '~/colors';
+import colors from '~/design-systems/clarity/tokens/colors';
 
 const SunIcon = () => {
     return <svg width="16" height="16" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 0C7.77614 0 8 0.223858 8 0.5V2.5C8 2.77614 7.77614 3 7.5 3C7.22386 3 7 2.77614 7 2.5V0.5C7 0.223858 7.22386 0 7.5 0ZM2.1967 2.1967C2.39196 2.00144 2.70854 2.00144 2.90381 2.1967L4.31802 3.61091C4.51328 3.80617 4.51328 4.12276 4.31802 4.31802C4.12276 4.51328 3.80617 4.51328 3.61091 4.31802L2.1967 2.90381C2.00144 2.70854 2.00144 2.39196 2.1967 2.1967ZM0.5 7C0.223858 7 0 7.22386 0 7.5C0 7.77614 0.223858 8 0.5 8H2.5C2.77614 8 3 7.77614 3 7.5C3 7.22386 2.77614 7 2.5 7H0.5ZM2.1967 12.8033C2.00144 12.608 2.00144 12.2915 2.1967 12.0962L3.61091 10.682C3.80617 10.4867 4.12276 10.4867 4.31802 10.682C4.51328 10.8772 4.51328 11.1938 4.31802 11.3891L2.90381 12.8033C2.70854 12.9986 2.39196 12.9986 2.1967 12.8033ZM12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12.5ZM10.682 4.31802C10.4867 4.12276 10.4867 3.80617 10.682 3.61091L12.0962 2.1967C12.2915 2.00144 12.608 2.00144 12.8033 2.1967C12.9986 2.39196 12.9986 2.70854 12.8033 2.90381L11.3891 4.31802C11.1938 4.51328 10.8772 4.51328 10.682 4.31802ZM8 12.5C8 12.2239 7.77614 12 7.5 12C7.22386 12 7 12.2239 7 12.5V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V12.5ZM10.682 10.682C10.8772 10.4867 11.1938 10.4867 11.3891 10.682L12.8033 12.0962C12.9986 12.2915 12.9986 12.608 12.8033 12.8033C12.608 12.9986 12.2915 12.9986 12.0962 12.8033L10.682 11.3891C10.4867 11.1938 10.4867 10.8772 10.682 10.682ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 9.15685 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>;

src/components/ui/AlertDialog/AlertDialog.tsx

@@ -1,4 +1,4 @@
 import React, { useState } from 'react';
 import AlertDialogRoot from './fragments/AlertDialogRoot';
 import AlertDialogContent from './fragments/AlertDialogContent';
 import AlertDialogTrigger from './fragments/AlertDialogTrigger';
@@ -15,36 +15,8 @@
 }
 
 const AlertDialog = ({ children, open = false, onOpenChange = () => {}, content } : AlertDialogProps) => {
-    const [isOpen, setIsOpen] = useState(open);
-
-    // Update local state when parent state changes
-    const handleOpenChange = (newOpen: boolean) => {
-        setIsOpen(newOpen);
-        onOpenChange(newOpen);
-    };
-
-    return (
-        <AlertDialogRoot open={isOpen} onOpenChange={handleOpenChange}>
-            <AlertDialogTrigger>
-                {children}
-            </AlertDialogTrigger>
-
-            <AlertDialogPortal>
-                <AlertDialogOverlay/>
-                <AlertDialogContent>
-                    {content}
-                    <AlertDialogCancel>
-                        Cancel
-                    </AlertDialogCancel>
-                    <AlertDialogAction>
-                        Continue
-                    </AlertDialogAction>
-                </AlertDialogContent>
-
-            </AlertDialogPortal>
-
-        </AlertDialogRoot>
-    );
+    console.warn('Direct usage of AlertDialog is not supported. Please use AlertDialog.Root, AlertDialog.Content, etc. instead.');
+    return null;
 };
 
 AlertDialog.Root = AlertDialogRoot;

src/components/ui/AlertDialog/fragments/AlertDialogAction.tsx

@@ -7,10 +7,11 @@ export type AlertDialogActionProps = {
     children: React.ReactNode;
 }
 
-const AlertDialogAction = ({ children } : AlertDialogActionProps) => {
+const AlertDialogAction = ({ children, asChild } : AlertDialogActionProps) => {
     const { rootClass, handleOpenChange } = useContext(AlertDialogContext);
     return (
         <ButtonPrimitive
+            asChild={asChild}
             onClick={() => handleOpenChange(false)}
             className={clsx(`${rootClass}-action`)}
         >

src/components/ui/AlertDialog/fragments/AlertDialogCancel.tsx

@@ -7,10 +7,11 @@ export type AlertDialogCancelProps = {
     children: React.ReactNode;
 }
 
-const AlertDialogCancel = ({ children } : AlertDialogCancelProps) => {
+const AlertDialogCancel = ({ children, asChild } : AlertDialogCancelProps) => {
     const { rootClass, handleOpenChange } = useContext(AlertDialogContext);
     return (
         <ButtonPrimitive
+            asChild={asChild}
             onClick={() => handleOpenChange(false)}
             className={clsx(`${rootClass}-cancel`)}
         >

src/components/ui/AlertDialog/fragments/AlertDialogPortal.tsx

@@ -7,12 +7,13 @@
 };
 
 const AlertDialogPortal = ({ children }: AlertDialogPortalProps) => {
     const { rootClass } = useContext(AlertDialogContext);
-    const rootElement = document.getElementsByClassName(rootClass)[0] as HTMLElement | null;
+    const rootElement = document.querySelector('#rad-ui-theme-container') || document.body as HTMLElement | null;
 
     return (
         <Floater.Portal
-            root={rootElement || document.body}
+            root={rootElement}
+
         >
             {children}
         </Floater.Portal>

src/components/ui/AlertDialog/fragments/AlertDialogTrigger.tsx

@@ -7,11 +7,12 @@ export type AlertDialogTriggerProps = {
     children: React.ReactNode;
 }
 
-const AlertDialogTrigger = ({ children, ...props } : AlertDialogTriggerProps) => {
+const AlertDialogTrigger = ({ children, asChild, ...props } : AlertDialogTriggerProps) => {
     const { rootClass, handleOpenChange } = useContext(AlertDialogContext);
 
     return (
         <ButtonPrimitive
+            asChild={asChild}
             onClick={() => handleOpenChange(true)} {...props}
             className={clsx(`${rootClass}-trigger`)}
         >

src/components/ui/AlertDialog/stories/AlertDialog.stories.tsx

@@ -3,32 +3,37 @@ import React, { useState } from 'react';
 // import Button from '@/rad-';
 import AlertDialog from '../AlertDialog';
 import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
+import Button from '~/components/ui/Button/Button';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
     title: 'WIP/AlertDialog',
     component: AlertDialog,
     render: (args:any) => {
         const [isOpen, setIsOpen] = useState(false);
-
-        const handleOpenChange = (open: boolean) => {
-            console.log('open', open);
-            setIsOpen(open);
-        };
-
         return (
             <SandboxEditor>
-                <AlertDialog
-                    open={isOpen}
-                    onOpenChange={handleOpenChange}
-                    {...args} content={
-                        <div className="flex flex-col gap-4 ">
-                            <h2 className="text-lg font-bold">Are you sure you want to delete this account?</h2>
+                <AlertDialog.Root>
+                    <AlertDialog.Trigger asChild>
+                        <Button>Open Dialog</Button>
+                    </AlertDialog.Trigger>
+                    <AlertDialog.Portal>
+                        <AlertDialog.Overlay />
+                        <AlertDialog.Content>
                             <div>
-                                <p className='text-gray-900'>This action cannot be undone. This will permanently delete your account and remove your data from our servers.</p>
+                                Are you sure you want to delete this account?
                             </div>
-                        </div>
-                    } />
+                            <AlertDialog.Action asChild>
+                                <Button>Confirm</Button>
+                            </AlertDialog.Action>
+                            <AlertDialog.Cancel asChild>
+                                <Button>Cancel</Button>
+                            </AlertDialog.Cancel>
+                        </AlertDialog.Content>
+
+                    </AlertDialog.Portal>
+
+                </AlertDialog.Root>
             </SandboxEditor>
         );
     }

src/components/ui/Theme/Theme.tsx

@@ -7,9 +7,10 @@ type ThemeProps = {
     radius?: string;
     scaling?: string;
     children: React.ReactNode;
+    id?: string;
 }
 
-const Theme = ({ appearance = 'light', accentColor = '', radius = '', scaling = '', children, ...props }: ThemeProps) => {
+const Theme = ({ appearance = 'light', id = 'rad-ui-theme-container', accentColor = '', radius = '', scaling = '', children, ...props }: ThemeProps) => {
     const [theme, setTheme] = useState(appearance);
     const [themeAccentColor, setThemeAccentColor] = useState(accentColor);
     const [themeRadius, setThemeRadius] = useState(radius);
@@ -42,6 +43,7 @@ const Theme = ({ appearance = 'light', accentColor = '', radius = '', scaling =
     }, [scaling]);
 
     return <div
+        id={id}
         data-rad-ui-theme={theme}
         data-rad-ui-accent-color={themeAccentColor}
         data-rad-ui-radius={themeRadius}

src/components/ui/Theme/stories/Theme.stories.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import Theme from '../Theme';
+import Button from '~/components/ui/Button/Button';
+import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+
+const CardComponent = ({ appearance }: { appearance: 'light' | 'dark' }) => {
+    return <div className="bg-gray-50 p-4 rounded-lg">
+        <h1 className="text-gray-950">Hello World, This is in {appearance} mode</h1>
+    </div>;
+};
+
+export default {
+    title: 'WIP/Theme',
+    component: Theme,
+    render: (args: React.JSX.IntrinsicAttributes) => {
+        const [toggle, setToggle] = useState(false);
+        return <SandboxEditor>
+            <div>
+                <Button onClick={() => setToggle(!toggle)}>Toggle Theme</Button>
+            </div>
+            <div className={'flex space-x-4 p-10'}>
+                <div >
+                    <Theme appearance={toggle ? 'dark' : 'light'}>
+                        <CardComponent appearance={toggle ? 'dark' : 'light'} />
+                    </Theme>
+                </div>
+                {/* Inverted */}
+                <div >
+                    <Theme appearance={toggle ? 'light' : 'dark'}>
+                        <CardComponent appearance={toggle ? 'light' : 'dark'} />
+                    </Theme>
+                </div>
+            </div>
+        </SandboxEditor>;
+    }
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default = {
+};

src/core/utils/RovingFocusGroup/stories/RovingFocusGroup.stories.tsx

@@ -13,7 +13,7 @@ type StoryArgs = {
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
-    title: 'WIP/RovingFocusGroup',
+    title: 'Utils/RovingFocusGroup',
     component: RovingFocusGroup,
     render: (args: StoryArgs) => <>
         <SandboxEditor className="space-y-2">

src/examples/Colors/Colors.stories.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import colors from '../../colors/index';
+import colors from '~/design-systems/clarity/tokens/colors';
 
 import ColorsTemplate from './ColorsTemplate';
 

scripts/tokenGen/index.js → src/tokenGen/index.js

@@ -1,8 +1,8 @@
 import fs from 'fs';
 import path from 'path';
 
-import generateCSSTokens from './generateCSSTokens.js';
-import generateAccentTokens from './generateAccentTokens.js';
+import generateCSSTokens from './transformers/generateCSSTokens.js';
+import generateAccentTokens from './transformers/generateAccentTokens.js';
 
 try {
     // Generate CSS variables for the light theme

scripts/tokenGen/generateAccentTokens.js → src/tokenGen/transformers/generateAccentTokens.js

@@ -1,4 +1,4 @@
-import colors from '../../src/colors/index.js';
+import colors from '~/design-systems/clarity/tokens/colors';
 const COLOR_PREFIX = '--rad-ui-color-';
 
 /**

scripts/tokenGen/generateCSSTokens.js → src/tokenGen/transformers/generateCSSTokens.js

@@ -1,4 +1,4 @@
-import colors from '../../src/colors/index.js';
+import colors from '~/design-systems/clarity/tokens/colors';
 const COLOR_PREFIX = '--rad-ui-color-';
 
 // Function to generate CSS variables based on the theme