Feat radio components

.changeset/tall-needles-remain.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/components": patch
+---
+
+Feat Radio components

apps/rsbuild/package.json

@@ -16,7 +16,7 @@
     "@devup-ui/react": "workspace:*"
   },
   "devDependencies": {
-    "@rsbuild/core": "^1.5.3",
+    "@rsbuild/core": "^1.5.6",
     "@rsbuild/plugin-react": "^1.4.0",
     "@devup-ui/rsbuild-plugin": "workspace:*"
   }

apps/vite-lib/package.json

@@ -19,7 +19,7 @@
     "vite-plugin-dts": "^4.5.4",
     "@devup-ui/vite-plugin": "workspace:*",
     "@vitejs/plugin-react": "^5.0.2",
-    "vite": "^7.1.4",
+    "vite": "^7.1.5",
     "typescript": "^5",
     "@types/node": "^24",
     "@types/react": "^19"

apps/vite/package.json

@@ -17,7 +17,7 @@
   },
   "devDependencies": {
     "@devup-ui/vite-plugin": "workspace:*",
-    "vite": "^7.1.4",
+    "vite": "^7.1.5",
     "@vitejs/plugin-react": "^5.0.2",
     "typescript": "^5",
     "@types/node": "^24",

package.json

@@ -14,13 +14,14 @@
   },
   "devDependencies": {
     "eslint-plugin-devup": "^2.0.5",
-    "eslint": "^9.34.0",
+    "eslint": "^9.35.0",
     "vitest": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
-    "@changesets/cli": "^2.29.6",
+    "@changesets/cli": "^2.29.7",
     "@types/node": "^24.3.1",
     "happy-dom": "^18.0.1",
     "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "14.6.1",
     "@testing-library/jest-dom": "^6.8.0",
     "@devup-ui/vite-plugin": "workspace:*"
   },

packages/components/package.json

@@ -49,15 +49,15 @@
   },
   "devDependencies": {
     "@devup-ui/vite-plugin": "workspace:*",
-    "@storybook/addon-docs": "^9.1.4",
-    "@storybook/addon-onboarding": "^9.1.4",
-    "@storybook/react-vite": "^9.1.4",
+    "@storybook/addon-docs": "^9.1.5",
+    "@storybook/addon-onboarding": "^9.1.5",
+    "@storybook/react-vite": "^9.1.5",
     "@types/react": "^19.1.12",
-    "eslint-plugin-storybook": "^9.1.4",
+    "eslint-plugin-storybook": "^9.1.5",
     "rollup-plugin-preserve-directives": "^0.4.0",
-    "storybook": "^9.1.4",
+    "storybook": "^9.1.5",
     "typescript": "^5.9.2",
-    "vite": "^7.1.4",
+    "vite": "^7.1.5",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4"
   },

packages/components/src/__tests__/index.browser.test.ts

@@ -6,6 +6,8 @@ describe('export', () => {
       Input: expect.any(Function),
       Stepper: expect.any(Function),
       Select: expect.any(Function),
+      Radio: expect.any(Function),
+      RadioGroup: expect.any(Function),
       SelectContainer: expect.any(Function),
       SelectDivider: expect.any(Function),
       SelectOption: expect.any(Function),

packages/components/src/components/Radio/Radio.stories.tsx

@@ -0,0 +1,29 @@
+import { Radio } from '.'
+
+export default {
+  title: 'Devfive/Radio',
+  component: Radio,
+}
+
+export const Default = {
+  args: {
+    checked: undefined,
+    colors: {
+      primary: 'var(--primary)',
+      border: 'var(--border)',
+      text: 'var(--text)',
+      bg: 'var(--bg)',
+      hoverBg: 'var(--hoverBg)',
+      hoverBorder: 'var(--hoverBorder)',
+      hoverColor: 'var(--hoverColor)',
+      checkedBg: 'var(--checkedBg)',
+      checkedBorder: 'var(--checkedBorder)',
+      checkedColor: 'var(--checkedColor)',
+      disabledBg: 'var(--disabledBg)',
+      disabledColor: 'var(--disabledColor)',
+    },
+    name: 'radio',
+    children: '옵션1',
+    variant: 'default',
+  },
+}

packages/components/src/components/Radio/__tests__/index.browser.test.tsx

@@ -0,0 +1,89 @@
+import { render } from '@testing-library/react'
+
+import { Radio } from '../index'
+
+vi.mock('react', async (originImport: any) => {
+  const origin = await originImport()
+  return {
+    ...origin,
+    cache: vi.fn((arg) => arg),
+  }
+})
+describe('Radio', () => {
+  it('should Radio snapshot', () => {
+    expect(render(<Radio />).container).toMatchSnapshot()
+    expect(render(<Radio variant="button" />).container).toMatchSnapshot()
+    expect(render(<Radio disabled />).container).toMatchSnapshot()
+    expect(
+      render(<Radio disabled variant="button" />).container,
+    ).toMatchSnapshot()
+    expect(
+      render(
+        <Radio
+          disabled
+          style={{
+            width: '500px',
+          }}
+        />,
+      ).container,
+    ).toMatchSnapshot()
+    expect(
+      render(
+        <Radio
+          disabled
+          style={{
+            width: '500px',
+          }}
+          styles={{
+            label: {
+              width: '500px',
+            },
+          }}
+          variant="button"
+        />,
+      ).container,
+    ).toMatchSnapshot()
+    expect(
+      render(
+        <Radio
+          disabled
+          style={{
+            width: '500px',
+          }}
+          styles={{
+            label: {
+              width: '500px',
+            },
+          }}
+        />,
+      ).container,
+    ).toMatchSnapshot()
+
+    expect(
+      render(
+        <Radio
+          className="className"
+          classNames={{ label: 'classNameLabel' }}
+          disabled
+          variant="button"
+        />,
+      ).container,
+    ).toMatchSnapshot()
+    expect(
+      render(
+        <Radio
+          className="className"
+          classNames={{ label: 'classNameLabel' }}
+          disabled
+        />,
+      ).container,
+    ).toMatchSnapshot()
+
+    expect(
+      render(<Radio firstButton variant="button" />).container,
+    ).toMatchSnapshot()
+    expect(
+      render(<Radio lastButton variant="button" />).container,
+    ).toMatchSnapshot()
+  })
+})