Merge pull request #144 from MiracleHorizon/refactor/design-system

refactor(frontend):  design-system

apps/frontend/src/components/CheckboxDominantBackground.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 
-import { OptionCheckbox, type Props as OptionCheckboxProps } from '@components/OptionCheckbox'
+import { Checkbox, type Props as CheckboxProps } from '@design-system/checkbox'
 
-export const CheckboxDominantBackground: FC<Omit<OptionCheckboxProps, 'label'>> = props => (
-  <OptionCheckbox label='Use Dominant Background' {...props} />
+export const CheckboxDominantBackground: FC<Omit<CheckboxProps, 'label'>> = props => (
+  <Checkbox label='Use Dominant Background' {...props} />
 )

apps/frontend/src/components/CheckboxKeepChanges.tsx

@@ -1,4 +1,4 @@
-import { OptionCheckbox } from '@components/OptionCheckbox'
+import { Checkbox } from '@design-system/checkbox'
 import { useOutputStore } from '@stores/output'
 
 export const CheckboxKeepChanges = () => {
@@ -7,5 +7,5 @@ export const CheckboxKeepChanges = () => {
 
   const handleToggle = () => toggleKeepChanges()
 
-  return <OptionCheckbox label='Keep Changes' checked={checked} onClick={handleToggle} />
+  return <Checkbox label='Keep Changes' checked={checked} onClick={handleToggle} />
 }

apps/frontend/src/components/__tests__/OptionNumberInput.test.tsx → apps/frontend/src/components/NumberInput/NumberInput.test.tsx

@@ -2,16 +2,11 @@
 
 import { cleanup, fireEvent, render, screen } from '@testing-library/react'
 
-import {
-  fieldTestId,
-  labelTestId,
-  NOT_ALLOWED_KEYS,
-  OptionNumberInput,
-  type Props,
-  slotTestId
-} from '@components/OptionNumberInput'
-
-describe('@components/OptionNumberInput - rendering', () => {
+import { fieldTestId, labelTestId, NumberInput, slotTestId } from './NumberInput'
+import { NOT_ALLOWED_KEYS } from './utils'
+import type { Props } from './NumberInput.types'
+
+describe('@components/NumberInput - rendering', () => {
   afterEach(() => {
     cleanup()
   })
@@ -35,7 +30,7 @@ describe('@components/OptionNumberInput - rendering', () => {
       ),
       setValue() {}
     }
-    const { getByTestId } = render(<OptionNumberInput {...props} />)
+    const { getByTestId } = render(<NumberInput {...props} />)
 
     const labelElement = getByTestId(labelTestId)
     expect(labelElement).toBeInTheDocument()
@@ -60,7 +55,7 @@ describe('@components/OptionNumberInput - rendering', () => {
       max: 100,
       setValue() {}
     }
-    const { container } = render(<OptionNumberInput {...props} />)
+    const { container } = render(<NumberInput {...props} />)
 
     const field = container.querySelector('input')
     expect(field).toBeInTheDocument()
@@ -78,7 +73,7 @@ describe('@components/OptionNumberInput - rendering', () => {
   })
 })
 
-describe('@components/OptionNumberInput - value change', () => {
+describe('@components/NumberInput - value change', () => {
   const defaultValue = 0
   const min = -10
   const max = 10
@@ -104,7 +99,7 @@ describe('@components/OptionNumberInput - value change', () => {
     })
   }
   const renderField = () => {
-    const utils = render(<OptionNumberInput {...props} />)
+    const utils = render(<NumberInput {...props} />)
     const field = screen.getByTestId(fieldTestId) as HTMLInputElement
 
     return { field, ...utils }
@@ -124,7 +119,7 @@ describe('@components/OptionNumberInput - value change', () => {
     expect(props.setValue).toHaveBeenCalledWith(testValue)
     expect(value).toBe(testValue)
 
-    rerender(<OptionNumberInput {...updatePropsValue(testValue)} />)
+    rerender(<NumberInput {...updatePropsValue(testValue)} />)
     expect(field.value).toBe(testValue.toString())
   })
 
@@ -137,7 +132,7 @@ describe('@components/OptionNumberInput - value change', () => {
     expect(props.setValue).toHaveBeenCalledWith(testValue)
     expect(value).toBe(testValue)
 
-    rerender(<OptionNumberInput {...updatePropsValue(testValue)} />)
+    rerender(<NumberInput {...updatePropsValue(testValue)} />)
     expect(field.value).toBe(testValue.toString())
   })
 
@@ -155,7 +150,7 @@ describe('@components/OptionNumberInput - value change', () => {
       expect(props.setValue).toHaveBeenCalledWith(expectedOutput)
       expect(value).toBe(expectedOutput)
 
-      rerender(<OptionNumberInput {...updatePropsValue(expectedOutput)} />)
+      rerender(<NumberInput {...updatePropsValue(expectedOutput)} />)
       expect(field.value).toBe('')
     }
   })
@@ -170,7 +165,7 @@ describe('@components/OptionNumberInput - value change', () => {
     expect(props.setValue).toHaveBeenCalledWith(expectedOutput)
     expect(value).toBe(expectedOutput)
 
-    rerender(<OptionNumberInput {...updatePropsValue(expectedOutput)} />)
+    rerender(<NumberInput {...updatePropsValue(expectedOutput)} />)
     expect(field.value).toBe(expectedOutput.toString())
   })
 
@@ -184,7 +179,7 @@ describe('@components/OptionNumberInput - value change', () => {
     expect(props.setValue).toHaveBeenCalledWith(expectedOutput)
     expect(value).toBe(expectedOutput)
 
-    rerender(<OptionNumberInput {...updatePropsValue(expectedOutput)} />)
+    rerender(<NumberInput {...updatePropsValue(expectedOutput)} />)
     expect(field.value).toBe(expectedOutput.toString())
   })
 
@@ -198,7 +193,7 @@ describe('@components/OptionNumberInput - value change', () => {
     expect(props.setValue).toHaveBeenCalledWith(expectedOutput)
     expect(value).toBe(expectedOutput)
 
-    rerender(<OptionNumberInput {...updatePropsValue(expectedOutput)} />)
+    rerender(<NumberInput {...updatePropsValue(expectedOutput)} />)
     expect(field.value).toBe('')
   })
 
@@ -212,7 +207,7 @@ describe('@components/OptionNumberInput - value change', () => {
     expect(props.setValue).toHaveBeenCalledWith(expectedOutput)
     expect(value).toBe(expectedOutput)
 
-    rerender(<OptionNumberInput {...updatePropsValue(expectedOutput)} />)
+    rerender(<NumberInput {...updatePropsValue(expectedOutput)} />)
     expect(field.value).toBe('')
   })
 })

apps/frontend/src/components/OptionNumberInput/OptionNumberInput.tsx → apps/frontend/src/components/NumberInput/NumberInput.tsx

@@ -6,10 +6,10 @@ import { clsx } from 'clsx'
 
 import { NOT_ALLOWED_KEYS, parseValue } from './utils'
 import { useEscapeBlur } from '@hooks/useEscapeBlur'
-import type { LabelProps, Props } from './OptionNumberInput.types'
-import styles from './OptionNumberInput.module.css'
+import type { LabelProps, Props } from './NumberInput.types'
+import styles from './NumberInput.module.css'
 
-export const labelTestId = 'option-number-input-label'
+export const labelTestId = 'number-input-label'
 
 const WithLabel: FC<LabelProps> = ({ children, id, label }) => (
   <Flex data-testid={labelTestId} direction='column' gap='1' width='100%'>
@@ -20,10 +20,10 @@ const WithLabel: FC<LabelProps> = ({ children, id, label }) => (
   </Flex>
 )
 
-export const fieldTestId = 'option-number-input-field'
-export const slotTestId = 'option-number-input-slot'
+export const fieldTestId = 'number-input-field'
+export const slotTestId = 'number-input-slot'
 
-export function OptionNumberInput({
+export function NumberInput({
   icon,
   min,
   max,

apps/frontend/src/components/NumberInput/index.ts

@@ -0,0 +1 @@
+export { NumberInput } from './NumberInput'

apps/frontend/src/components/alerts/ConfirmSettingsResetAlert.tsx

@@ -3,7 +3,7 @@
 import { type ComponentPropsWithoutRef, type FC, type PropsWithChildren, useState } from 'react'
 import { AlertDialog, Button, Flex } from '@radix-ui/themes'
 
-import { OptionCheckbox } from '@components/OptionCheckbox'
+import { Checkbox } from '@design-system/checkbox'
 
 const contentActionsProps = {
   gap: {
@@ -40,11 +40,7 @@ export const ConfirmSettingsResetAlert: FC<Props> = ({ children, onConfirm, onCa
             wrap='wrap'
             {...(contentActionsProps as ComponentPropsWithoutRef<typeof Flex>)}
           >
-            <OptionCheckbox
-              label='Remove all'
-              checked={removeAll}
-              onClick={handleToggleRemoveAll}
-            />
+            <Checkbox label='Remove all' checked={removeAll} onClick={handleToggleRemoveAll} />
 
             <Flex align='center' justify='end' wrap='wrap-reverse' gap='3'>
               <AlertDialog.Cancel>

apps/frontend/src/components/OptionCheckbox/OptionCheckboxSkeleton.tsx → apps/frontend/src/design-system/checkbox/checkbox-skeleton.tsx

@@ -1,6 +1,6 @@
 import { Flex, Skeleton } from '@radix-ui/themes'
 
-export const OptionCheckboxSkeleton = () => (
+export const CheckboxSkeleton = () => (
   <Flex gap='1' width='100%'>
     <Skeleton height='20px' width='20px' />
     <Skeleton height='20px' width='100%' />

apps/frontend/src/components/__tests__/OptionCheckbox.test.tsx → apps/frontend/src/design-system/checkbox/checkbox.test.tsx

@@ -2,10 +2,10 @@
 
 import { cleanup, render } from '@testing-library/react'
 
-import { rootTestId, OptionCheckbox, type Props } from '@components/OptionCheckbox'
+import { rootTestId, Checkbox, type Props } from './checkbox'
 import { setup } from '@testing/test-utils'
 
-describe('@components/OptionCheckbox', () => {
+describe('@design-system/Checkbox', () => {
   const defaultProps: Props = {
     label: 'test label',
     checked: false,
@@ -17,7 +17,7 @@ describe('@components/OptionCheckbox', () => {
   })
 
   it('should render the checkbox', () => {
-    const { getByRole, getByTestId } = render(<OptionCheckbox {...defaultProps} />)
+    const { getByRole, getByTestId } = render(<Checkbox {...defaultProps} />)
 
     const root = getByTestId(rootTestId)
     expect(root).toBeInTheDocument()
@@ -27,7 +27,7 @@ describe('@components/OptionCheckbox', () => {
   })
 
   it('should render the checkbox title', () => {
-    const { getByText } = render(<OptionCheckbox {...defaultProps} />)
+    const { getByText } = render(<Checkbox {...defaultProps} />)
     const labelEl = getByText(defaultProps.label!)
 
     expect(labelEl).toBeInTheDocument()
@@ -41,7 +41,7 @@ describe('@components/OptionCheckbox', () => {
       ...defaultProps,
       checked: undefined // Input should be uncontrolled
     }
-    const { user, getByRole } = setup(<OptionCheckbox {...props} />)
+    const { user, getByRole } = setup(<Checkbox {...props} />)
 
     const checkbox = getByRole('checkbox')
     expect(checkbox).toBeInTheDocument()

apps/frontend/src/components/OptionCheckbox/OptionCheckbox.tsx → apps/frontend/src/design-system/checkbox/checkbox.tsx

@@ -1,20 +1,20 @@
 'use client'
 
 import { type FC, memo, useId } from 'react'
-import { Checkbox, Flex, Text } from '@radix-ui/themes'
+import { Checkbox as RadixCheckbox, Flex, Text } from '@radix-ui/themes'
 import { clsx } from 'clsx'
 
-import styles from './OptionCheckbox.module.css'
+import styles from './checkbox.module.css'
 
-export const rootTestId = 'option-checkbox-root'
+export const rootTestId = 'checkbox-root'
 
-export const OptionCheckbox: FC<Props> = memo(({ label, ...props }) => {
+export const Checkbox: FC<Props> = memo(({ label, ...props }) => {
   const id = useId()
 
   return (
     <Text data-testid={rootTestId} as='div' size='2'>
       <Flex align='center' gap='2'>
-        <Checkbox size='3' id={id} {...props} />
+        <RadixCheckbox size='3' id={id} {...props} />
 
         {label && (
           <Text
@@ -34,7 +34,7 @@ export const OptionCheckbox: FC<Props> = memo(({ label, ...props }) => {
   )
 })
 
-OptionCheckbox.displayName = 'OptionCheckbox'
+Checkbox.displayName = 'Checkbox'
 
 export interface Props {
   label?: string

apps/frontend/src/design-system/checkbox/index.ts

@@ -0,0 +1 @@
+export { Checkbox, type Props, rootTestId } from './checkbox'

apps/frontend/src/design-system/select/index.ts

@@ -0,0 +1,2 @@
+export { Select } from './select'
+export type { SelectData } from './types'

apps/frontend/src/components/OptionSelect/OptionSelect.tsx → apps/frontend/src/design-system/select/select.tsx

@@ -1,14 +1,14 @@
 'use client'
 
 import { useId } from 'react'
-import { Flex, Select, Text } from '@radix-ui/themes'
+import { Flex, Select as RadixSelect, Text } from '@radix-ui/themes'
 import { clsx } from 'clsx'
 import capitalize from 'lodash.capitalize'
 
-import type { Props } from './OptionSelect.types'
-import styles from './OptionSelect.module.css'
+import type { Props } from './types'
+import styles from './select.module.css'
 
-export function OptionSelect({
+export function Select({
   data,
   label,
   size = '2',
@@ -26,7 +26,7 @@ export function OptionSelect({
   const triggerId = useId()
 
   return (
-    <Select.Root size={size} {...props}>
+    <RadixSelect.Root size={size} {...props}>
       <Flex direction='column' align='start' width='100%'>
         <Flex
           align='center'
@@ -43,34 +43,34 @@ export function OptionSelect({
           {DetailsComponent}
         </Flex>
 
-        <Select.Trigger
+        <RadixSelect.Trigger
           id={triggerId}
           style={triggerStyle}
           className={clsx('w-full', triggerClassName)}
         />
       </Flex>
 
-      <Select.Content
+      <RadixSelect.Content
         position='popper'
         side='bottom'
         sideOffset={5}
         style={contentStyle}
         className={clsx(styles.content, contentClassName)}
       >
         {data.map(({ label: groupLabel, value }, index) => (
-          <Select.Group key={index + value.slice(0, 3).join(', ')}>
-            {groupLabel && <Select.Label>{groupLabel}</Select.Label>}
+          <RadixSelect.Group key={index + value.slice(0, 3).join(', ')}>
+            {groupLabel && <RadixSelect.Label>{groupLabel}</RadixSelect.Label>}
 
             {value.map(value => (
-              <Select.Item key={value} value={value}>
+              <RadixSelect.Item key={value} value={value}>
                 {valueCapitalize ? capitalize(value) : value}
-              </Select.Item>
+              </RadixSelect.Item>
             ))}
 
-            {index < data.length - 1 && <Select.Separator />}
-          </Select.Group>
+            {index < data.length - 1 && <RadixSelect.Separator />}
+          </RadixSelect.Group>
         ))}
-      </Select.Content>
-    </Select.Root>
+      </RadixSelect.Content>
+    </RadixSelect.Root>
   )
 }

apps/frontend/src/components/OptionSelect/OptionSelect.types.ts → apps/frontend/src/design-system/select/types.ts

@@ -28,4 +28,4 @@ interface Value {
   label?: string
 }
 
-export type OptionSelectData = Props['data']
+export type SelectData = Props['data']

apps/frontend/src/design-system/slider/index.ts

@@ -0,0 +1 @@
+export { Slider } from './slider'