chore: work in progress

trendmicro-frontend · Nov 26, 2024 · b42b8b2 · b42b8b2
1 parent 166e48d
commit b42b8b2
Show file tree

Hide file tree

Showing 39 changed files with 101 additions and 116 deletions.
diff --git a/packages/react-docs/pages/_app.page.js b/packages/react-docs/pages/_app.page.js
@@ -51,10 +51,7 @@ const EmotionCacheProvider = ({
 
 const App = (props) => {
   const customTheme = useConst(() => createTheme({
-    config: {
-      // Enable CSS variables replacement
-      useCSSVariables: true,
-    },
+    cssVariables: true, // Enable CSS variables replacement
     components: {
       // Set default props for specific components
       //

diff --git a/packages/react-docs/pages/contributing/react-components-part-1.page.mdx b/packages/react-docs/pages/contributing/react-components-part-1.page.mdx
@@ -103,7 +103,7 @@ import React from 'react';
 describe('Code', () => {
   it('should render correctly', async () => {
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true, // Enable CSS variables replacement
     };
     const { container } = render((
       <Code>Hello World</Code>

diff --git a/packages/react-docs/pages/getting-started/css-variables/index.page.mdx b/packages/react-docs/pages/getting-started/css-variables/index.page.mdx
@@ -15,10 +15,7 @@ import {
 // Use `createTheme` to provide custom configuration
 <TonicProvider
   theme={createTheme({
-    config: {
-      // Enable CSS variables replacement
-      useCSSVariables: true,
-    },
+    cssVariables: true, // Enable CSS variables replacement
   })}
 />
 ```

diff --git a/packages/react-docs/pages/getting-started/usage/index.page.mdx b/packages/react-docs/pages/getting-started/usage/index.page.mdx
@@ -47,10 +47,7 @@ import {
 } from '@tonic-ui/react';
 
 const customTheme = createTheme({
-  config: {
-    // Enable CSS variables replacement
-    useCSSVariables: true,
-  },
+  cssVariables: true, // Enable CSS variables replacement
   components: {
     // Set default props for specific components
     //
@@ -192,9 +189,7 @@ Tonic UI supports converting theme tokens defined in the theme to CSS variables.
 ```jsx
 <TonicProvider
   theme={createTheme({
-    config: {
-      useCSSVariables: true,
-    },
+    cssVariables: true, // Enable CSS variables replacement
   })}
 />
 ```
@@ -303,9 +298,7 @@ import {
 
 // Let's say you want to add more colors
 const customTheme = createTheme({
-  config: {
-    useCSSVariables: true,
-  },
+  cssVariables: true, // Enable CSS variables replacement
   colors: {
     brand: {
       90: "#1a365d",

diff --git a/packages/react-docs/sandbox/create-react-app.js b/packages/react-docs/sandbox/create-react-app.js
@@ -74,10 +74,7 @@ const customColorStyle = merge(colorStyle, {
 });
 
 const customTheme = createTheme({
-  config: {
-    // Enable CSS variables replacement
-    useCSSVariables: true,
-  },
+  cssVariables: true, // Enable CSS variables replacement
   components: {
     // Set default props for specific components
     //

diff --git a/packages/react/src/accordion/__tests__/Accordion.test.js b/packages/react/src/accordion/__tests__/Accordion.test.js
@@ -15,7 +15,7 @@ import React from 'react';
 describe('Accordion', () => {
   it('should render correctly', async () => {
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { container } = render((
       <Accordion rowGap={1}>

diff --git a/packages/react/src/badge/__tests__/Badge.test.js b/packages/react/src/badge/__tests__/Badge.test.js
@@ -7,7 +7,7 @@ import React from 'react';
 describe('Badge', () => {
   it('should render correctly', async () => {
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { container } = render((
       <Flex columnGap="4x">

diff --git a/packages/react/src/button/__tests__/ButtonBase.test.js b/packages/react/src/button/__tests__/ButtonBase.test.js
@@ -6,7 +6,7 @@ import React from 'react';
 describe('ButtonBase', () => {
   it('should render correctly', async () => {
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { container } = render((
       <>

diff --git a/packages/react/src/checkbox/__tests__/Checkbox.test.js b/packages/react/src/checkbox/__tests__/Checkbox.test.js
@@ -6,7 +6,7 @@ import React, { useEffect, useRef } from 'react';
 describe('Checkbox', () => {
   it('should render correctly', async () => {
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { container } = render((
       <>

diff --git a/packages/react/src/code/__tests__/Code.test.js b/packages/react/src/code/__tests__/Code.test.js
@@ -7,7 +7,7 @@ import React from 'react';
 describe('Code', () => {
   it('should render correctly', async () => {
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { container } = render((
       <Code data-testid="Code">

diff --git a/packages/react/src/date-pickers/DatePicker/__tests__/DatePicker.test.js b/packages/react/src/date-pickers/DatePicker/__tests__/DatePicker.test.js
@@ -66,7 +66,7 @@ describe('DatePicker', () => {
   it('should render correctly', async () => {
     const user = userEvent.setup();
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const defaultValue = new Date('2024-08-01');
     const inputFormat = 'yyyy-MM-dd';

diff --git a/packages/react/src/divider/__tests__/Divider.test.js b/packages/react/src/divider/__tests__/Divider.test.js
@@ -6,7 +6,7 @@ import React from 'react';
 describe('Divider', () => {
   it('should render correctly', async () => {
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { container } = render((
       <>

diff --git a/packages/react/src/drawer/__tests__/Drawer.test.js b/packages/react/src/drawer/__tests__/Drawer.test.js
@@ -19,7 +19,7 @@ import React, { useCallback, useRef, useState } from 'react';
 describe('Drawer', () => {
   it('should render correctly', async () => {
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { baseElement } = render((
       <Drawer

diff --git a/packages/react/src/input/__tests__/Input.test.js b/packages/react/src/input/__tests__/Input.test.js
@@ -10,7 +10,7 @@ describe('Input', () => {
     const sizes = ['sm', 'md', 'lg'];
     const variants = ['outline', 'filled', 'flush', 'unstyled'];
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { container } = render((
       <>

diff --git a/packages/react/src/input/__tests__/InputControl.test.js b/packages/react/src/input/__tests__/InputControl.test.js
@@ -10,7 +10,7 @@ describe('InputControl', () => {
     const sizes = ['sm', 'md', 'lg'];
     const variants = ['outline', 'filled', 'flush', 'unstyled'];
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { container } = render((
       <>

diff --git a/packages/react/src/menu/__tests__/Menu.test.js b/packages/react/src/menu/__tests__/Menu.test.js
@@ -41,7 +41,7 @@ describe('Menu', () => {
   it('should render correctly', async () => {
     const user = userEvent.setup();
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { container } = render((
       <TestComponent />

diff --git a/packages/react/src/modal/__tests__/Modal.test.js b/packages/react/src/modal/__tests__/Modal.test.js
@@ -19,7 +19,7 @@ import React, { useCallback, useRef, useState } from 'react';
 describe('Modal', () => {
   it('should render correctly', async () => {
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { baseElement } = render((
       <Modal isOpen onClose={jest.fn()}>

diff --git a/packages/react/src/popover/__tests__/Popover.test.js b/packages/react/src/popover/__tests__/Popover.test.js
@@ -9,7 +9,7 @@ describe('Popover', () => {
   it('should render correctly', async () => {
     const user = userEvent.setup();
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { container } = render((
       <Popover>

diff --git a/packages/react/src/portal/__tests__/Portal.test.js b/packages/react/src/portal/__tests__/Portal.test.js
@@ -6,7 +6,7 @@ import React from 'react';
 describe('Portal', () => {
   it('should render correctly', () => {
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { container } = render((
       <Portal>

diff --git a/packages/react/src/progress/__tests__/Progress.test.js b/packages/react/src/progress/__tests__/Progress.test.js
@@ -6,7 +6,7 @@ import React from 'react';
 describe('LinearProgress', () => {
   it('renders correctly', async () => {
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { container } = render((
       <>

diff --git a/packages/react/src/radio/__tests__/Radio.test.js b/packages/react/src/radio/__tests__/Radio.test.js
@@ -6,7 +6,7 @@ import React, { useEffect, useRef } from 'react';
 describe('Radio', () => {
   it('should render correctly', async () => {
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { container } = render((
       <>

diff --git a/packages/react/src/search-input/__tests__/SearchInput.test.js b/packages/react/src/search-input/__tests__/SearchInput.test.js
@@ -10,7 +10,7 @@ describe('SearchInput', () => {
     const sizes = ['sm', 'md', 'lg'];
     const variants = ['outline', 'filled', 'flush', 'unstyled'];
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { container } = render((
       <>

diff --git a/packages/react/src/stack/__tests__/Stack.test.js b/packages/react/src/stack/__tests__/Stack.test.js
@@ -7,7 +7,7 @@ import React from 'react';
 describe('Stack', () => {
   it('should render correctly', async () => {
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { container } = render((
       <Stack spacing="4x">
@@ -54,7 +54,7 @@ describe('Stack', () => {
 
   it('should apply spacing between child elements', () => {
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     render((
       <Stack data-testid="stack" spacing="2x">

diff --git a/packages/react/src/switch/__tests__/Switch.test.js b/packages/react/src/switch/__tests__/Switch.test.js
@@ -6,7 +6,7 @@ import React, { useEffect, useRef } from 'react';
 describe('Switch', () => {
   it('should render correctly', async () => {
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { container } = render((
       <>

diff --git a/packages/react/src/table/__tests__/Table.test.js b/packages/react/src/table/__tests__/Table.test.js
@@ -61,7 +61,7 @@ describe('Table', () => {
 
   it('should render correctly with `flexbox` layout', async () => {
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
 
     const { container } = render((
@@ -104,7 +104,7 @@ describe('Table', () => {
 
   it('should render correctly with `table` layout', async () => {
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
 
     const { container } = render((

diff --git a/packages/react/src/tabs/__tests__/Tabs.test.js b/packages/react/src/tabs/__tests__/Tabs.test.js
@@ -6,7 +6,7 @@ import React from 'react';
 describe('Tabs', () => {
   it('should render correctly', async () => {
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { container } = render((
       <Tabs>

diff --git a/packages/react/src/text/__tests__/Text.test.js b/packages/react/src/text/__tests__/Text.test.js
@@ -7,7 +7,7 @@ import React from 'react';
 describe('TextLabel', () => {
   it('should render correctly', async () => {
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { container } = render((
       <Text>

diff --git a/packages/react/src/text/__tests__/TextLabel.test.js b/packages/react/src/text/__tests__/TextLabel.test.js
@@ -7,7 +7,7 @@ import React from 'react';
 describe('TextLabel', () => {
   it('should render correctly', async () => {
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { container } = render((
       <TextLabel data-testid="TextLabel">

diff --git a/packages/react/src/textarea/__tests__/Textarea.test.js b/packages/react/src/textarea/__tests__/Textarea.test.js
@@ -9,7 +9,7 @@ describe('Textarea', () => {
   it('should render correctly', async () => {
     const variants = ['outline', 'filled', 'unstyled'];
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { container } = render((
       <>

diff --git a/packages/react/src/theme/__tests__/createTheme.test.js b/packages/react/src/theme/__tests__/createTheme.test.js
@@ -3,10 +3,6 @@ import createTheme from '../createTheme';
 describe('createTheme', () => {
   it('should create a default theme', () => {
     const theme = createTheme();
-    // Internal properties
-    expect(theme).toHaveProperty('config');
-    expect(theme).toHaveProperty('components');
-    // Theme properties
     expect(theme).toHaveProperty('borders');
     expect(theme).toHaveProperty('breakpoints');
     expect(theme).toHaveProperty('colors');
@@ -43,21 +39,22 @@ describe('createTheme', () => {
     expect(theme.components.Button.defaultProps.size).toBe('large');
   });
 
-  it('should generate a CSS variable map', () => {
-    const theme = createTheme({ config: { useCSSVariables: true } });
-    expect(theme.__cssVariableMap).toBeDefined();
-    expect(Object.keys(theme.__cssVariableMap).length).toBeGreaterThan(0);
+  it('should not generate CSS variables with default configuration', () => {
+    const theme = createTheme();
+    expect(theme.vars).not.toBeDefined();
   });
 
-  it('should enable CSS variables when specified', () => {
-    const theme = createTheme({ config: { useCSSVariables: true } });
-    expect(theme.config.useCSSVariables).toBe(true);
-    expect(theme).toHaveProperty('__cssVariableMap');
+  it('should generate CSS variables', () => {
+    const theme = createTheme({ cssVariables: true });
+    expect(theme.vars).toBeDefined();
+    expect(theme.vars.prefix).toBe('tonic');
+    expect(Object.keys(theme.vars).filter(x => x.startsWith('--'))[0]).toMatch(/^--tonic-/);
   });
 
   it('should apply custom prefix to CSS variables', () => {
-    const theme = createTheme({ config: { prefix: 'custom' } });
-    const cssVariableMap = theme.__cssVariableMap;
-    expect(Object.keys(cssVariableMap)[0]).toMatch(/^--custom-/);
+    const theme = createTheme({ cssVariables: { prefix: 'custom' } });
+    expect(theme.vars).toBeDefined();
+    expect(theme.vars.prefix).toBe('custom');
+    expect(Object.keys(theme.vars).filter(x => x.startsWith('--'))[0]).toMatch(/^--custom-/);
   });
 });