diff --git a/.templates/component/package.json b/.templates/component/package.json index 6f655c1f..5e2cb05f 100644 --- a/.templates/component/package.json +++ b/.templates/component/package.json @@ -9,7 +9,9 @@ }, "type": "module", "exports": "./src/index.ts", - "files": ["dist"], + "files": [ + "dist" + ], "scripts": { "build": "tsup", "build:storybook": "storybook build", diff --git a/.templates/component/src/Component.stories.tsx b/.templates/component/src/Component.stories.tsx index c2e12101..1acbfd1b 100644 --- a/.templates/component/src/Component.stories.tsx +++ b/.templates/component/src/Component.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; + import { Component } from './Component'; const meta = { diff --git a/.templates/component/vitest.config.ts b/.templates/component/vitest.config.ts index a9178275..e663baf0 100644 --- a/.templates/component/vitest.config.ts +++ b/.templates/component/vitest.config.ts @@ -1,4 +1,5 @@ import { defineProject, mergeConfig } from 'vitest/config'; + import defaultConfig from '../../vitest.config'; export default mergeConfig( diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 162f7a46..b166f505 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,6 +1,3 @@ { - "recommendations": [ - "biomejs.biome", - "github.vscode-github-actions" - ] + "recommendations": ["biomejs.biome", "github.vscode-github-actions"] } diff --git a/.vscode/settings.json b/.vscode/settings.json index b59dd216..068a1dc5 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,8 +2,7 @@ "editor.defaultFormatter": "biomejs.biome", "editor.formatOnSave": true, "editor.codeActionsOnSave": { - "quickfix.biome": "explicit", - "source.organizeImports.biome": "explicit" + "source.fixAll.biome": "explicit" }, "[typescript]": { "editor.defaultFormatter": "biomejs.biome" @@ -22,5 +21,5 @@ }, "[jsonc]": { "editor.defaultFormatter": "biomejs.biome" - }, + } } diff --git a/commitlint.config.ts b/commitlint.config.ts index 40f9c72f..4f0cec6d 100644 --- a/commitlint.config.ts +++ b/commitlint.config.ts @@ -2,6 +2,7 @@ const englishOnly = /^[A-Za-z0-9\s!@#$%^&*(),.?":{}|<>_-]+$/; // https://commitlint.js.org/reference/configuration.html#typescript-configuration import { RuleConfigSeverity, type UserConfig } from '@commitlint/types'; + const Configuration: UserConfig = { extends: ['@commitlint/config-conventional'], // parserPreset: '', diff --git a/package.json b/package.json index ab0409ae..75f90b81 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,8 @@ "prepare": "husky", "cz": "cz", "format": "biome format --write", - "lint": "biome lint --write", + "lint": "biome lint", + "lint:fix": "biome check --write", "dev:storybook": "storybook dev -p 6006 public", "build:storybook": "storybook build public", "serve:storybook": "serve storybook-static -p 6006", diff --git a/packages/accordion/package.json b/packages/accordion/package.json index e9328151..b17b26ad 100644 --- a/packages/accordion/package.json +++ b/packages/accordion/package.json @@ -9,7 +9,9 @@ }, "type": "module", "exports": "./src/index.ts", - "files": ["dist"], + "files": [ + "dist" + ], "scripts": { "build": "tsup", "build:storybook": "storybook build", diff --git a/packages/avatar/package.json b/packages/avatar/package.json index 3a879dc1..1e700861 100644 --- a/packages/avatar/package.json +++ b/packages/avatar/package.json @@ -9,7 +9,9 @@ }, "type": "module", "exports": "./src/index.ts", - "files": ["dist"], + "files": [ + "dist" + ], "scripts": { "build": "tsup", "build:storybook": "storybook build", diff --git a/packages/avatar/src/Avatar.css.ts b/packages/avatar/src/Avatar.css.ts index e716b4b5..94bc11b1 100644 --- a/packages/avatar/src/Avatar.css.ts +++ b/packages/avatar/src/Avatar.css.ts @@ -1,4 +1,5 @@ import { style, styleVariants } from '@vanilla-extract/css'; + import { AvatarShape, AvatarSize } from './Avatar'; export const root = style({ diff --git a/packages/avatar/src/Avatar.stories.tsx b/packages/avatar/src/Avatar.stories.tsx index c6da5934..bf3b5869 100644 --- a/packages/avatar/src/Avatar.stories.tsx +++ b/packages/avatar/src/Avatar.stories.tsx @@ -1,5 +1,6 @@ import { faker } from '@faker-js/faker'; import type { Meta, StoryObj } from '@storybook/react'; + import { Avatar } from './Avatar'; const meta = { diff --git a/packages/avatar/src/Avatar.test.tsx b/packages/avatar/src/Avatar.test.tsx index f80e003d..5c0def45 100644 --- a/packages/avatar/src/Avatar.test.tsx +++ b/packages/avatar/src/Avatar.test.tsx @@ -1,6 +1,7 @@ import { faker } from '@faker-js/faker'; import { render, screen } from '@testing-library/react'; import { describe, expect, it, test } from 'vitest'; + import { Avatar, type AvatarShape, type AvatarSize } from './Avatar'; const testImage = faker.image.avatar(); diff --git a/packages/avatar/src/Avatar.tsx b/packages/avatar/src/Avatar.tsx index 30ac1d0b..2a2c2ee7 100644 --- a/packages/avatar/src/Avatar.tsx +++ b/packages/avatar/src/Avatar.tsx @@ -1,6 +1,9 @@ +import { type ComponentProps, type ForwardedRef, forwardRef } from 'react'; + import { Slot } from '@radix-ui/react-slot'; + import { clsx as cx } from 'clsx'; -import { type ComponentProps, type ForwardedRef, forwardRef } from 'react'; + import * as styles from './Avatar.css'; export interface AvatarProps extends ComponentProps<'div'> { diff --git a/packages/avatar/vitest.config.ts b/packages/avatar/vitest.config.ts index a9178275..e663baf0 100644 --- a/packages/avatar/vitest.config.ts +++ b/packages/avatar/vitest.config.ts @@ -1,4 +1,5 @@ import { defineProject, mergeConfig } from 'vitest/config'; + import defaultConfig from '../../vitest.config'; export default mergeConfig( diff --git a/packages/badge/.storybook/main.ts b/packages/badge/.storybook/main.ts index 846b85c9..3724f800 100644 --- a/packages/badge/.storybook/main.ts +++ b/packages/badge/.storybook/main.ts @@ -2,11 +2,7 @@ import type { StorybookConfig } from '@storybook/react-vite'; export default { stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: [ - '@storybook/addon-essentials', - '@storybook/addon-interactions', - '@storybook/addon-links', - ], + addons: ['@storybook/addon-essentials', '@storybook/addon-interactions', '@storybook/addon-links'], framework: { name: '@storybook/react-vite', options: {}, diff --git a/packages/badge/.storybook/preview.ts b/packages/badge/.storybook/preview.ts index 836149df..6c95c9f1 100644 --- a/packages/badge/.storybook/preview.ts +++ b/packages/badge/.storybook/preview.ts @@ -1,5 +1,6 @@ import 'sanitize.css'; import 'sanitize.css/typography.css'; + import type { Preview } from '@storybook/react'; export default { diff --git a/packages/badge/package.json b/packages/badge/package.json index 9fa182dc..a38ce3f0 100644 --- a/packages/badge/package.json +++ b/packages/badge/package.json @@ -9,7 +9,9 @@ }, "type": "module", "exports": "./src/index.ts", - "files": ["dist"], + "files": [ + "dist" + ], "scripts": { "build": "tsup", "build:storybook": "storybook build", diff --git a/packages/badge/src/Badge.css.ts b/packages/badge/src/Badge.css.ts index 080da695..f98474f0 100644 --- a/packages/badge/src/Badge.css.ts +++ b/packages/badge/src/Badge.css.ts @@ -1,6 +1,7 @@ -import { style, styleVariants } from '@vanilla-extract/css'; import { color as colorToken, fontSize as fontSizeToken } from '@sipe-team/tokens'; +import { style, styleVariants } from '@vanilla-extract/css'; + // Define the types for our component export const BadgeSize = { small: 'small', diff --git a/packages/badge/src/Badge.stories.tsx b/packages/badge/src/Badge.stories.tsx index 892569fa..7df46a73 100644 --- a/packages/badge/src/Badge.stories.tsx +++ b/packages/badge/src/Badge.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; + import { Badge, type BadgeSize, type BadgeVariant } from './Badge'; import { BadgeSize as BadgeSizeEnum, BadgeVariant as BadgeVariantEnum } from './Badge.css'; diff --git a/packages/badge/src/Badge.test.tsx b/packages/badge/src/Badge.test.tsx index 3771bd84..5bcbb016 100644 --- a/packages/badge/src/Badge.test.tsx +++ b/packages/badge/src/Badge.test.tsx @@ -1,7 +1,9 @@ +import { color as colorToken } from '@sipe-team/tokens'; + import { render, screen } from '@testing-library/react'; import { expect, test } from 'vitest'; + import { Badge } from './Badge'; -import { color as colorToken } from '@sipe-team/tokens'; test('children으로 입력한 텍스트를 표시한다.', () => { render(테스트); diff --git a/packages/badge/src/Badge.tsx b/packages/badge/src/Badge.tsx index 91035e40..a9cb6fab 100644 --- a/packages/badge/src/Badge.tsx +++ b/packages/badge/src/Badge.tsx @@ -1,6 +1,9 @@ +import { type ComponentProps, type ForwardedRef, forwardRef } from 'react'; + import { Typography } from '@sipe-team/typography'; + import { clsx as cx } from 'clsx'; -import { type ComponentProps, type ForwardedRef, forwardRef } from 'react'; + import * as styles from './Badge.css'; export type BadgeSize = keyof typeof styles.BadgeSize; diff --git a/packages/badge/vitest.config.ts b/packages/badge/vitest.config.ts index a9178275..e663baf0 100644 --- a/packages/badge/vitest.config.ts +++ b/packages/badge/vitest.config.ts @@ -1,4 +1,5 @@ import { defineProject, mergeConfig } from 'vitest/config'; + import defaultConfig from '../../vitest.config'; export default mergeConfig( diff --git a/packages/button/package.json b/packages/button/package.json index 2f8daab7..8d2d014b 100644 --- a/packages/button/package.json +++ b/packages/button/package.json @@ -9,7 +9,9 @@ }, "type": "module", "exports": "./src/index.ts", - "files": ["dist"], + "files": [ + "dist" + ], "scripts": { "build": "tsup", "build:storybook": "storybook build", diff --git a/packages/button/vitest.config.ts b/packages/button/vitest.config.ts index a9178275..e663baf0 100644 --- a/packages/button/vitest.config.ts +++ b/packages/button/vitest.config.ts @@ -1,4 +1,5 @@ import { defineProject, mergeConfig } from 'vitest/config'; + import defaultConfig from '../../vitest.config'; export default mergeConfig( diff --git a/packages/card/.storybook/main.ts b/packages/card/.storybook/main.ts index 846b85c9..3724f800 100644 --- a/packages/card/.storybook/main.ts +++ b/packages/card/.storybook/main.ts @@ -2,11 +2,7 @@ import type { StorybookConfig } from '@storybook/react-vite'; export default { stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: [ - '@storybook/addon-essentials', - '@storybook/addon-interactions', - '@storybook/addon-links', - ], + addons: ['@storybook/addon-essentials', '@storybook/addon-interactions', '@storybook/addon-links'], framework: { name: '@storybook/react-vite', options: {}, diff --git a/packages/card/.storybook/preview.ts b/packages/card/.storybook/preview.ts index 836149df..6c95c9f1 100644 --- a/packages/card/.storybook/preview.ts +++ b/packages/card/.storybook/preview.ts @@ -1,5 +1,6 @@ import 'sanitize.css'; import 'sanitize.css/typography.css'; + import type { Preview } from '@storybook/react'; export default { diff --git a/packages/card/package.json b/packages/card/package.json index 661c07a9..536a6ced 100644 --- a/packages/card/package.json +++ b/packages/card/package.json @@ -9,7 +9,9 @@ }, "type": "module", "exports": "./src/index.ts", - "files": ["dist"], + "files": [ + "dist" + ], "scripts": { "build": "tsup", "build:storybook": "storybook build", diff --git a/packages/card/src/Card.css.ts b/packages/card/src/Card.css.ts index 4e9cb3b8..6e2720d2 100644 --- a/packages/card/src/Card.css.ts +++ b/packages/card/src/Card.css.ts @@ -1,4 +1,5 @@ import { color } from '@sipe-team/tokens'; + import { recipe } from '@vanilla-extract/recipes'; export const CardVariant = { diff --git a/packages/card/src/Card.stories.tsx b/packages/card/src/Card.stories.tsx index 36984ca7..c74e19db 100644 --- a/packages/card/src/Card.stories.tsx +++ b/packages/card/src/Card.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; + import { Card } from './Card'; const meta = { diff --git a/packages/card/src/Card.test.tsx b/packages/card/src/Card.test.tsx index c847d554..c7078445 100644 --- a/packages/card/src/Card.test.tsx +++ b/packages/card/src/Card.test.tsx @@ -1,6 +1,8 @@ import { color } from '@sipe-team/tokens'; + import { render, screen } from '@testing-library/react'; import { expect, test } from 'vitest'; + import { Card } from './Card'; test('children으로 넘어간 요소를 반환한다. ', () => { diff --git a/packages/card/src/Card.tsx b/packages/card/src/Card.tsx index 6821a03c..aec5c134 100644 --- a/packages/card/src/Card.tsx +++ b/packages/card/src/Card.tsx @@ -1,7 +1,10 @@ +import { type ComponentProps, type ForwardedRef, forwardRef } from 'react'; + import { Slot } from '@radix-ui/react-slot'; + import { clsx as cx } from 'clsx'; -import { type ComponentProps, type ForwardedRef, forwardRef } from 'react'; -import { card, type CardVariant, type CardRatio } from './Card.css'; + +import { type CardRatio, type CardVariant, card } from './Card.css'; export interface CardProps extends ComponentProps<'div'> { asChild?: boolean; diff --git a/packages/card/vitest.config.ts b/packages/card/vitest.config.ts index a9178275..e663baf0 100644 --- a/packages/card/vitest.config.ts +++ b/packages/card/vitest.config.ts @@ -1,4 +1,5 @@ import { defineProject, mergeConfig } from 'vitest/config'; + import defaultConfig from '../../vitest.config'; export default mergeConfig( diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json index 079a99ad..c5938ac8 100644 --- a/packages/checkbox/package.json +++ b/packages/checkbox/package.json @@ -9,7 +9,9 @@ }, "type": "module", "exports": "./src/index.ts", - "files": ["dist"], + "files": [ + "dist" + ], "scripts": { "build": "tsup", "build:storybook": "storybook build", diff --git a/packages/checkbox/src/Checkbox.css.ts b/packages/checkbox/src/Checkbox.css.ts index 32d65e01..30b2f92e 100644 --- a/packages/checkbox/src/Checkbox.css.ts +++ b/packages/checkbox/src/Checkbox.css.ts @@ -1,6 +1,8 @@ import { color } from '@sipe-team/tokens'; + import type { RecipeVariants } from '@vanilla-extract/recipes'; import { recipe } from '@vanilla-extract/recipes'; + import { CheckboxSize } from './Checkbox'; export const CHECKBOX_SIZES = { diff --git a/packages/checkbox/src/Checkbox.stories.tsx b/packages/checkbox/src/Checkbox.stories.tsx index facd2254..4afa8deb 100644 --- a/packages/checkbox/src/Checkbox.stories.tsx +++ b/packages/checkbox/src/Checkbox.stories.tsx @@ -1,5 +1,7 @@ -import type { Meta, StoryObj } from '@storybook/react'; import { useState } from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + import { Checkbox } from './Checkbox'; import { useCheckboxGroup } from './hooks/useCheckboxGroup'; diff --git a/packages/checkbox/src/Checkbox.test.tsx b/packages/checkbox/src/Checkbox.test.tsx index be99b6ea..5432c114 100644 --- a/packages/checkbox/src/Checkbox.test.tsx +++ b/packages/checkbox/src/Checkbox.test.tsx @@ -1,8 +1,9 @@ import { fireEvent, render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { describe, expect, test, vi } from 'vitest'; -import { Checkbox, CheckboxSize, type CheckBoxRootBaseProps } from './Checkbox'; + +import { type CheckBoxRootBaseProps, Checkbox, CheckboxSize } from './Checkbox'; import { CHECKBOX_SIZES } from './Checkbox.css'; -import userEvent from '@testing-library/user-event'; const RenderBasicCheckbox = ({ label, ...props }: CheckBoxRootBaseProps & { label?: string }) => { return ( diff --git a/packages/checkbox/src/Checkbox.tsx b/packages/checkbox/src/Checkbox.tsx index df89a165..284b9549 100644 --- a/packages/checkbox/src/Checkbox.tsx +++ b/packages/checkbox/src/Checkbox.tsx @@ -1,13 +1,15 @@ -import clsx from 'clsx'; import { + type ChangeEventHandler, + type ComponentProps, createContext, forwardRef, + type Ref, useContext, useId, - type ChangeEventHandler, - type ComponentProps, - type Ref, } from 'react'; + +import clsx from 'clsx'; + import { container, input, label } from './Checkbox.css'; import { useControllableState } from './hooks/useControllableState'; diff --git a/packages/checkbox/vitest.config.ts b/packages/checkbox/vitest.config.ts index a9178275..e663baf0 100644 --- a/packages/checkbox/vitest.config.ts +++ b/packages/checkbox/vitest.config.ts @@ -1,4 +1,5 @@ import { defineProject, mergeConfig } from 'vitest/config'; + import defaultConfig from '../../vitest.config'; export default mergeConfig( diff --git a/packages/divider/package.json b/packages/divider/package.json index af278cdf..08c0e07d 100644 --- a/packages/divider/package.json +++ b/packages/divider/package.json @@ -9,7 +9,9 @@ }, "type": "module", "exports": "./src/index.ts", - "files": ["dist"], + "files": [ + "dist" + ], "scripts": { "build": "tsup", "build:storybook": "storybook build", diff --git a/packages/divider/src/Divider.css.ts b/packages/divider/src/Divider.css.ts index de228394..7249464a 100644 --- a/packages/divider/src/Divider.css.ts +++ b/packages/divider/src/Divider.css.ts @@ -1,5 +1,7 @@ import { color } from '@sipe-team/tokens'; + import { style, styleVariants } from '@vanilla-extract/css'; + import type { ColorType, OrientationType } from './constants'; export const base = style({ diff --git a/packages/divider/src/Divider.stories.tsx b/packages/divider/src/Divider.stories.tsx index 20500b6a..3d74ce14 100644 --- a/packages/divider/src/Divider.stories.tsx +++ b/packages/divider/src/Divider.stories.tsx @@ -1,7 +1,9 @@ import { Typography } from '@sipe-team/typography'; + import type { Meta, StoryObj } from '@storybook/react'; -import { Divider } from './Divider'; + import { DIVIDER_COLORS, DIVIDER_ORIENTATIONS } from './constants'; +import { Divider } from './Divider'; const meta = { title: 'Components/Divider', diff --git a/packages/divider/src/Divider.test.tsx b/packages/divider/src/Divider.test.tsx index 694c88e1..07d32139 100644 --- a/packages/divider/src/Divider.test.tsx +++ b/packages/divider/src/Divider.test.tsx @@ -1,6 +1,8 @@ import { color } from '@sipe-team/tokens'; + import { render, screen } from '@testing-library/react'; import { describe, expect, test } from 'vitest'; + import { Divider } from './Divider'; describe('Divider', () => { diff --git a/packages/divider/src/Divider.tsx b/packages/divider/src/Divider.tsx index 1db39d65..217fe141 100644 --- a/packages/divider/src/Divider.tsx +++ b/packages/divider/src/Divider.tsx @@ -1,7 +1,9 @@ -import { clsx as cx } from 'clsx'; import { type ComponentProps, forwardRef } from 'react'; -import * as styles from './Divider.css'; + +import { clsx as cx } from 'clsx'; + import type { ColorType, OrientationType } from './constants'; +import * as styles from './Divider.css'; export interface DividerProps extends ComponentProps<'hr'> { orientation?: OrientationType; diff --git a/packages/divider/vitest.config.ts b/packages/divider/vitest.config.ts index a9178275..e663baf0 100644 --- a/packages/divider/vitest.config.ts +++ b/packages/divider/vitest.config.ts @@ -1,4 +1,5 @@ import { defineProject, mergeConfig } from 'vitest/config'; + import defaultConfig from '../../vitest.config'; export default mergeConfig( diff --git a/packages/flex/package.json b/packages/flex/package.json index 63d8bec1..19637a30 100644 --- a/packages/flex/package.json +++ b/packages/flex/package.json @@ -9,7 +9,9 @@ }, "type": "module", "exports": "./src/index.ts", - "files": ["dist"], + "files": [ + "dist" + ], "scripts": { "build": "tsup", "build:storybook": "storybook build", diff --git a/packages/flex/src/Flex.css.ts b/packages/flex/src/Flex.css.ts index 194d13db..01bbb9da 100644 --- a/packages/flex/src/Flex.css.ts +++ b/packages/flex/src/Flex.css.ts @@ -1,5 +1,6 @@ import { style, styleVariants } from '@vanilla-extract/css'; -import type { FlexDirection, FlexAlign, FlexJustify, FlexWrap } from './constants'; + +import type { FlexAlign, FlexDirection, FlexJustify, FlexWrap } from './constants'; export const base = style({ display: 'flex', diff --git a/packages/flex/src/Flex.stories.tsx b/packages/flex/src/Flex.stories.tsx index c8cc435f..5df52165 100644 --- a/packages/flex/src/Flex.stories.tsx +++ b/packages/flex/src/Flex.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; + import { Flex } from './Flex'; const meta = { diff --git a/packages/flex/src/Flex.test.tsx b/packages/flex/src/Flex.test.tsx index b070b016..eb71a4bd 100644 --- a/packages/flex/src/Flex.test.tsx +++ b/packages/flex/src/Flex.test.tsx @@ -1,7 +1,9 @@ +import { type CSSProperties, createElement } from 'react'; + import { faker } from '@faker-js/faker'; import { render, screen } from '@testing-library/react'; -import { type CSSProperties, createElement } from 'react'; import { describe, expect, it } from 'vitest'; + import { Flex } from './Flex'; describe('Flex', () => { @@ -39,20 +41,19 @@ describe('Flex', () => { { justifyContent: 'space-between' }, { justifyContent: 'space-around' }, { justifyContent: 'space-evenly' }, - ] satisfies Array<{ justifyContent: CSSProperties['justifyContent'] }>)( - 'flex의 justify prop에 $justifyContent 속성을 주입하면 해당 속성을 적용한다.', - ({ justifyContent }) => { - render( - -
item 1
-
item 2
- , - ); + ] satisfies Array<{ + justifyContent: CSSProperties['justifyContent']; + }>)('flex의 justify prop에 $justifyContent 속성을 주입하면 해당 속성을 적용한다.', ({ justifyContent }) => { + render( + +
item 1
+
item 2
+ , + ); - const flexContainer = screen.getByTestId('flex-container'); - expect(flexContainer).toHaveStyle({ justifyContent }); - }, - ); + const flexContainer = screen.getByTestId('flex-container'); + expect(flexContainer).toHaveStyle({ justifyContent }); + }); }); describe('align', () => { @@ -62,20 +63,19 @@ describe('Flex', () => { { alignItems: 'center' }, { alignItems: 'baseline' }, { alignItems: 'stretch' }, - ] satisfies Array<{ alignItems: CSSProperties['alignItems'] }>)( - 'flex의 align prop에 $alignItems 속성을 주입하면 해당 속성을 적용한다.', - ({ alignItems }) => { - render( - -
item 1
-
item 2
- , - ); + ] satisfies Array<{ + alignItems: CSSProperties['alignItems']; + }>)('flex의 align prop에 $alignItems 속성을 주입하면 해당 속성을 적용한다.', ({ alignItems }) => { + render( + +
item 1
+
item 2
+ , + ); - const flexContainer = screen.getByTestId('flex-container'); - expect(flexContainer).toHaveStyle({ alignItems }); - }, - ); + const flexContainer = screen.getByTestId('flex-container'); + expect(flexContainer).toHaveStyle({ alignItems }); + }); }); describe('wrap', () => { @@ -101,20 +101,19 @@ describe('Flex', () => { { direction: 'row-reverse' }, { direction: 'column-reverse' }, { direction: 'column-reverse' }, - ] satisfies Array<{ direction: CSSProperties['flexDirection'] }>)( - 'flex의 direction prop에 $direction 속성을 주입하면 해당 속성을 적용한다.', - ({ direction }) => { - render( - -
item 1
-
item 2
- , - ); + ] satisfies Array<{ + direction: CSSProperties['flexDirection']; + }>)('flex의 direction prop에 $direction 속성을 주입하면 해당 속성을 적용한다.', ({ direction }) => { + render( + +
item 1
+
item 2
+ , + ); - const flexContainer = screen.getByTestId('flex-container'); - expect(flexContainer).toHaveStyle({ flexDirection: direction }); - }, - ); + const flexContainer = screen.getByTestId('flex-container'); + expect(flexContainer).toHaveStyle({ flexDirection: direction }); + }); describe('basis', () => { it.each([ @@ -208,36 +207,39 @@ describe('Flex', () => { { style: { alignItems: 'center' } }, { style: { flexWrap: 'wrap' } }, { style: { flexDirection: 'column' } }, - ] satisfies Array<{ style: CSSProperties }>)( - 'flex의 style prop에 $style 속성을 주입하면 해당 속성을 적용한다.', - ({ style }) => { - render( - -
item 1
-
item 2
- , - ); + ] satisfies Array<{ style: CSSProperties }>)('flex의 style prop에 $style 속성을 주입하면 해당 속성을 적용한다.', ({ + style, + }) => { + render( + +
item 1
+
item 2
+ , + ); - const flexContainer = screen.getByTestId('flex-container'); - expect(flexContainer).toHaveStyle(style); - }, - ); + const flexContainer = screen.getByTestId('flex-container'); + expect(flexContainer).toHaveStyle(style); + }); }); describe('polymorphic', () => { - it.each(['span', 'nav', 'button', 'input', 'label', 'div'])( - 'flex의 asChild prop에 true 속성을 주입하면 자식으로 %s 엘리먼트가 전달되면 해당 엘리먼트의 태그로 렌더링된다', - (element) => { - render( - - {createElement(element)} - , - ); + it.each([ + 'span', + 'nav', + 'button', + 'input', + 'label', + 'div', + ])('flex의 asChild prop에 true 속성을 주입하면 자식으로 %s 엘리먼트가 전달되면 해당 엘리먼트의 태그로 렌더링된다', (element) => { + render( + + {createElement(element)} + , + ); - const flexContainer = screen.getByTestId('flex-container'); - expect(flexContainer).toBeInTheDocument(); - expect(flexContainer.tagName.toLowerCase()).toBe(element); - }, - ); + const flexContainer = screen.getByTestId('flex-container'); + expect(flexContainer).toBeInTheDocument(); + expect(flexContainer.tagName.toLowerCase()).toBe(element); + }); }); }); diff --git a/packages/flex/vitest.config.ts b/packages/flex/vitest.config.ts index a9178275..e663baf0 100644 --- a/packages/flex/vitest.config.ts +++ b/packages/flex/vitest.config.ts @@ -1,4 +1,5 @@ import { defineProject, mergeConfig } from 'vitest/config'; + import defaultConfig from '../../vitest.config'; export default mergeConfig( diff --git a/packages/grid/package.json b/packages/grid/package.json index 7ccd6dc5..f51ffbff 100644 --- a/packages/grid/package.json +++ b/packages/grid/package.json @@ -9,7 +9,9 @@ }, "type": "module", "exports": "./src/index.ts", - "files": ["dist"], + "files": [ + "dist" + ], "scripts": { "build": "tsup", "build:storybook": "storybook build", diff --git a/packages/grid/src/Grid.test.tsx b/packages/grid/src/Grid.test.tsx index 935d3261..3393eb4b 100644 --- a/packages/grid/src/Grid.test.tsx +++ b/packages/grid/src/Grid.test.tsx @@ -57,19 +57,18 @@ describe('Grid', () => { for (const { prop, style, values } of gridProperties) { describe(prop, () => { - it.each(values.map((value) => ({ [prop]: value })))( - `should apply ${style} when ${prop} prop is $${prop}`, - (propValue) => { - render( - - item 1 - , - ); - - const gridContainer = screen.getByTestId('grid-container'); - expect(gridContainer).toHaveStyle({ [style]: propValue[prop] }); - }, - ); + it.each( + values.map((value) => ({ [prop]: value })), + )(`should apply ${style} when ${prop} prop is $${prop}`, (propValue) => { + render( + + item 1 + , + ); + + const gridContainer = screen.getByTestId('grid-container'); + expect(gridContainer).toHaveStyle({ [style]: propValue[prop] }); + }); }); } }); @@ -202,19 +201,23 @@ describe('Grid', () => { }); describe('polymorphic behavior', () => { - it.each(['span', 'nav', 'button', 'input', 'label', 'div'])( - 'should render as %s element when asChild is true', - (element) => { - render( - - {createElement(element)} - , - ); - - const gridContainer = screen.getByTestId('grid-container'); - expect(gridContainer).toBeInTheDocument(); - expect(gridContainer.tagName.toLowerCase()).toBe(element); - }, - ); + it.each([ + 'span', + 'nav', + 'button', + 'input', + 'label', + 'div', + ])('should render as %s element when asChild is true', (element) => { + render( + + {createElement(element)} + , + ); + + const gridContainer = screen.getByTestId('grid-container'); + expect(gridContainer).toBeInTheDocument(); + expect(gridContainer.tagName.toLowerCase()).toBe(element); + }); }); }); diff --git a/packages/grid/src/Grid.tsx b/packages/grid/src/Grid.tsx index d27611b6..c1fd0d9c 100644 --- a/packages/grid/src/Grid.tsx +++ b/packages/grid/src/Grid.tsx @@ -144,4 +144,4 @@ GridItem.displayName = 'GridItem'; const Root = Grid; const Item = GridItem; -export { Root, Item }; +export { Item, Root }; diff --git a/packages/icon/package.json b/packages/icon/package.json index 6214d761..b3d19557 100644 --- a/packages/icon/package.json +++ b/packages/icon/package.json @@ -9,7 +9,9 @@ }, "type": "module", "exports": "./src/index.ts", - "files": ["dist"], + "files": [ + "dist" + ], "scripts": { "build": "tsup", "build:storybook": "storybook build", diff --git a/packages/icon/scripts/generate-icons.ts b/packages/icon/scripts/generate-icons.ts index a58d2a47..ba024989 100644 --- a/packages/icon/scripts/generate-icons.ts +++ b/packages/icon/scripts/generate-icons.ts @@ -1,4 +1,5 @@ import { performance } from 'node:perf_hooks'; + import { generateComponents } from './utils/generate-components'; async function main() { @@ -7,7 +8,7 @@ async function main() { console.log('🎨 Generating icons...'); const results = await generateComponents(); - const successCount = results.filter(r => r.success).length; + const successCount = results.filter((r) => r.success).length; const failureCount = results.length - successCount; console.log(`✨ Done in ${Math.round(performance.now() - startTime)}ms`); @@ -15,16 +16,15 @@ async function main() { if (failureCount > 0) { console.warn(`⚠️ Failed to generate ${failureCount} components`); - const failures = results.filter(r => !r.success); + const failures = results.filter((r) => !r.success); for (const failure of failures) { console.error(` ❌ ${failure.fileName}: ${failure.error}`); } } - } catch (error) { console.error('Error:', error instanceof Error ? error.message : 'Unknown error'); process.exit(1); } } -main(); \ No newline at end of file +main(); diff --git a/packages/icon/scripts/utils/generate-components.ts b/packages/icon/scripts/utils/generate-components.ts index d3376511..6a4d0586 100644 --- a/packages/icon/scripts/utils/generate-components.ts +++ b/packages/icon/scripts/utils/generate-components.ts @@ -1,5 +1,6 @@ import fs from 'node:fs/promises'; import path from 'node:path'; + import type { GenerateResult } from '../../src/types'; import { optimizeSvg } from './optimize-svg'; import { PATHS } from './paths'; @@ -8,9 +9,7 @@ function validateFileName(fileName: string): void { const isKebabCase = /^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(fileName); if (!isKebabCase) { - throw new Error( - `Invalid file name: ${fileName}. File names must be in kebab-case (e.g., my-icon)` - ); + throw new Error(`Invalid file name: ${fileName}. File names must be in kebab-case (e.g., my-icon)`); } } @@ -23,7 +22,7 @@ function validateSvgContent(content: string, fileName: string): void { function toComponentName(fileName: string): string { const pascalCase = fileName .split('-') - .map(part => part.charAt(0).toUpperCase() + part.slice(1)) + .map((part) => part.charAt(0).toUpperCase() + part.slice(1)) .join(''); return `${pascalCase}Icon`; @@ -50,7 +49,7 @@ export async function generateComponents(): Promise { // 2. Get all SVG files const files = await fs.readdir(PATHS.ICONS_DIR); - const svgFiles = files.filter(file => file.endsWith('.svg')); + const svgFiles = files.filter((file) => file.endsWith('.svg')); // 3. Generate components in parallel const results = await Promise.all( @@ -62,10 +61,7 @@ export async function generateComponents(): Promise { validateFileName(fileName); // Read and optimize SVG - const svgContent = await fs.readFile( - path.join(PATHS.ICONS_DIR, file), - 'utf-8' - ); + const svgContent = await fs.readFile(path.join(PATHS.ICONS_DIR, file), 'utf-8'); validateSvgContent(svgContent, fileName); @@ -75,10 +71,7 @@ export async function generateComponents(): Promise { const componentContent = createComponentTemplate(componentName, optimizedSvg); // Write component file - await fs.writeFile( - path.join(PATHS.COMPONENTS_DIR, `${componentName}.tsx`), - componentContent - ); + await fs.writeFile(path.join(PATHS.COMPONENTS_DIR, `${componentName}.tsx`), componentContent); return { fileName, componentName, success: true }; } catch (error) { @@ -86,16 +79,16 @@ export async function generateComponents(): Promise { fileName, componentName, success: false, - error: error instanceof Error ? error.message : 'Unknown error' + error: error instanceof Error ? error.message : 'Unknown error', }; } - }) + }), ); // 4. Generate index file with successful components - const successfulResults = results.filter(r => r.success); + const successfulResults = results.filter((r) => r.success); const componentExports = successfulResults - .map(r => `export { ${r.componentName} } from './components/${r.componentName}';`) + .map((r) => `export { ${r.componentName} } from './components/${r.componentName}';`) .join('\n'); const indexContent = `\ @@ -103,10 +96,7 @@ export type { IconProps } from './types'; ${componentExports} `; - await fs.writeFile( - path.join(PATHS.COMPONENTS_DIR, '../index.ts'), - indexContent - ); + await fs.writeFile(path.join(PATHS.COMPONENTS_DIR, '../index.ts'), indexContent); return results; - } \ No newline at end of file +} diff --git a/packages/icon/scripts/utils/optimize-svg.ts b/packages/icon/scripts/utils/optimize-svg.ts index 2c7bab25..4938430c 100644 --- a/packages/icon/scripts/utils/optimize-svg.ts +++ b/packages/icon/scripts/utils/optimize-svg.ts @@ -1,4 +1,5 @@ import { optimize } from 'svgo'; + import { SVGO_CONFIG } from './svgo.config'; export const optimizeSvg = async (svg: string): Promise => { @@ -11,30 +12,22 @@ export const optimizeSvg = async (svg: string): Promise => { let optimizedSvg = result.data; // Convert kebab-case to camelCase - optimizedSvg = optimizedSvg.replace( - /-([a-z])/g, - (_, letter) => letter.toUpperCase() - ); + optimizedSvg = optimizedSvg.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase()); // Preserve fill="none" and handle other fill/stroke attributes - optimizedSvg = optimizedSvg.replace( - /(fill|stroke)="(none|[^"]+)"/g, - (_, attr, value) => - value === 'none' - ? `${attr}="none"` - : value === 'currentColor' - ? `${attr}={color}` - : `${attr}={color || "${value}"}` + optimizedSvg = optimizedSvg.replace(/(fill|stroke)="(none|[^"]+)"/g, (_, attr, value) => + value === 'none' + ? `${attr}="none"` + : value === 'currentColor' + ? `${attr}={color}` + : `${attr}={color || "${value}"}`, ); // Inject SVG props - optimizedSvg = optimizedSvg.replace( - '( - ({ color, size = 24, ...props }, ref) => { - return ; - } -); +export const CheckCircleIcon = React.forwardRef(({ color, size = 24, ...props }, ref) => { + return ( + + + + + + + + + + + ); +}); CheckCircleIcon.displayName = 'CheckCircleIcon'; diff --git a/packages/icon/src/components/EmailIcon.tsx b/packages/icon/src/components/EmailIcon.tsx index 48d1d452..3aad67e1 100644 --- a/packages/icon/src/components/EmailIcon.tsx +++ b/packages/icon/src/components/EmailIcon.tsx @@ -1,10 +1,23 @@ import * as React from 'react'; + import type { IconProps } from '../types'; -export const EmailIcon = React.forwardRef( - ({ color, size = 24, ...props }, ref) => { - return ; - } -); +export const EmailIcon = React.forwardRef(({ color, size = 24, ...props }, ref) => { + return ( + + + + + + + + + + + ); +}); EmailIcon.displayName = 'EmailIcon'; diff --git a/packages/icon/src/components/GithubIcon.tsx b/packages/icon/src/components/GithubIcon.tsx index 108cf197..e78b7628 100644 --- a/packages/icon/src/components/GithubIcon.tsx +++ b/packages/icon/src/components/GithubIcon.tsx @@ -1,10 +1,16 @@ import * as React from 'react'; + import type { IconProps } from '../types'; -export const GithubIcon = React.forwardRef( - ({ color, size = 24, ...props }, ref) => { - return ; - } -); +export const GithubIcon = React.forwardRef(({ color, size = 24, ...props }, ref) => { + return ( + + + + ); +}); GithubIcon.displayName = 'GithubIcon'; diff --git a/packages/icon/src/components/InstagramIcon.tsx b/packages/icon/src/components/InstagramIcon.tsx index 63e6f48c..b3072588 100644 --- a/packages/icon/src/components/InstagramIcon.tsx +++ b/packages/icon/src/components/InstagramIcon.tsx @@ -1,10 +1,16 @@ import * as React from 'react'; + import type { IconProps } from '../types'; -export const InstagramIcon = React.forwardRef( - ({ color, size = 24, ...props }, ref) => { - return ; - } -); +export const InstagramIcon = React.forwardRef(({ color, size = 24, ...props }, ref) => { + return ( + + + + ); +}); InstagramIcon.displayName = 'InstagramIcon'; diff --git a/packages/icon/src/components/KakaoIcon.tsx b/packages/icon/src/components/KakaoIcon.tsx index a07ef3f7..27dda624 100644 --- a/packages/icon/src/components/KakaoIcon.tsx +++ b/packages/icon/src/components/KakaoIcon.tsx @@ -1,10 +1,20 @@ import * as React from 'react'; + import type { IconProps } from '../types'; -export const KakaoIcon = React.forwardRef( - ({ color, size = 24, ...props }, ref) => { - return ; - } -); +export const KakaoIcon = React.forwardRef(({ color, size = 24, ...props }, ref) => { + return ( + + + + + ); +}); KakaoIcon.displayName = 'KakaoIcon'; diff --git a/packages/icon/src/components/LinkIcon.tsx b/packages/icon/src/components/LinkIcon.tsx index e11743de..feefcc26 100644 --- a/packages/icon/src/components/LinkIcon.tsx +++ b/packages/icon/src/components/LinkIcon.tsx @@ -1,10 +1,23 @@ import * as React from 'react'; + import type { IconProps } from '../types'; -export const LinkIcon = React.forwardRef( - ({ color, size = 24, ...props }, ref) => { - return ; - } -); +export const LinkIcon = React.forwardRef(({ color, size = 24, ...props }, ref) => { + return ( + + + + + + + + + + + ); +}); LinkIcon.displayName = 'LinkIcon'; diff --git a/packages/icon/src/components/LinkedinIcon.tsx b/packages/icon/src/components/LinkedinIcon.tsx index 16f21894..68a802c0 100644 --- a/packages/icon/src/components/LinkedinIcon.tsx +++ b/packages/icon/src/components/LinkedinIcon.tsx @@ -1,10 +1,16 @@ import * as React from 'react'; + import type { IconProps } from '../types'; -export const LinkedinIcon = React.forwardRef( - ({ color, size = 24, ...props }, ref) => { - return ; - } -); +export const LinkedinIcon = React.forwardRef(({ color, size = 24, ...props }, ref) => { + return ( + + + + ); +}); LinkedinIcon.displayName = 'LinkedinIcon'; diff --git a/packages/icon/src/components/OrganizerIcon.tsx b/packages/icon/src/components/OrganizerIcon.tsx index dba29093..3fdf3731 100644 --- a/packages/icon/src/components/OrganizerIcon.tsx +++ b/packages/icon/src/components/OrganizerIcon.tsx @@ -1,10 +1,16 @@ import * as React from 'react'; + import type { IconProps } from '../types'; -export const OrganizerIcon = React.forwardRef( - ({ color, size = 24, ...props }, ref) => { - return ; - } -); +export const OrganizerIcon = React.forwardRef(({ color, size = 24, ...props }, ref) => { + return ( + + + + ); +}); OrganizerIcon.displayName = 'OrganizerIcon'; diff --git a/packages/icon/src/components/UserIcon.tsx b/packages/icon/src/components/UserIcon.tsx index c2278ff8..14494092 100644 --- a/packages/icon/src/components/UserIcon.tsx +++ b/packages/icon/src/components/UserIcon.tsx @@ -1,10 +1,23 @@ import * as React from 'react'; + import type { IconProps } from '../types'; -export const UserIcon = React.forwardRef( - ({ color, size = 24, ...props }, ref) => { - return ; - } -); +export const UserIcon = React.forwardRef(({ color, size = 24, ...props }, ref) => { + return ( + + + + + + + + + + + ); +}); UserIcon.displayName = 'UserIcon'; diff --git a/packages/icon/src/components/YoutubeIcon.tsx b/packages/icon/src/components/YoutubeIcon.tsx index 3ae821ef..2994291d 100644 --- a/packages/icon/src/components/YoutubeIcon.tsx +++ b/packages/icon/src/components/YoutubeIcon.tsx @@ -1,10 +1,16 @@ import * as React from 'react'; + import type { IconProps } from '../types'; -export const YoutubeIcon = React.forwardRef( - ({ color, size = 24, ...props }, ref) => { - return ; - } -); +export const YoutubeIcon = React.forwardRef(({ color, size = 24, ...props }, ref) => { + return ( + + + + ); +}); YoutubeIcon.displayName = 'YoutubeIcon'; diff --git a/packages/icon/src/components/link.tsx b/packages/icon/src/components/link.tsx index e11743de..feefcc26 100644 --- a/packages/icon/src/components/link.tsx +++ b/packages/icon/src/components/link.tsx @@ -1,10 +1,23 @@ import * as React from 'react'; + import type { IconProps } from '../types'; -export const LinkIcon = React.forwardRef( - ({ color, size = 24, ...props }, ref) => { - return ; - } -); +export const LinkIcon = React.forwardRef(({ color, size = 24, ...props }, ref) => { + return ( + + + + + + + + + + + ); +}); LinkIcon.displayName = 'LinkIcon'; diff --git a/packages/icon/src/icons.test.tsx b/packages/icon/src/icons.test.tsx index 24b9b7bf..b1fc775d 100644 --- a/packages/icon/src/icons.test.tsx +++ b/packages/icon/src/icons.test.tsx @@ -1,6 +1,8 @@ -import { render, screen } from '@testing-library/react'; import { createRef } from 'react'; + +import { render, screen } from '@testing-library/react'; import { describe, expect, it } from 'vitest'; + import * as Icons from '.'; describe('Icon Components', () => { @@ -16,9 +18,7 @@ describe('Icon Components', () => { expect(svg).toHaveAttribute('viewBox'); const viewBox = svg?.getAttribute('viewBox'); expect(viewBox).toMatch(/^\d+\s+\d+\s+\d+\s+\d+$/); - const hasGraphics = Boolean( - svg?.querySelector('path, rect, circle, ellipse, line, polyline, polygon') - ); + const hasGraphics = Boolean(svg?.querySelector('path, rect, circle, ellipse, line, polyline, polygon')); expect(hasGraphics).toBe(true); const paths = svg?.querySelectorAll('path'); if (paths) { @@ -52,4 +52,4 @@ describe('Icon Components', () => { const svg = screen.getByTestId('test-icon'); expect(svg).toHaveClass('custom-class'); }); -}); \ No newline at end of file +}); diff --git a/packages/icon/src/index.ts b/packages/icon/src/index.ts index 97da0d95..5f7e4494 100644 --- a/packages/icon/src/index.ts +++ b/packages/icon/src/index.ts @@ -1,13 +1,12 @@ -export type { IconProps } from './types'; - export { AccordionArrowIcon } from './components/AccordionArrowIcon'; export { CheckCircleIcon } from './components/CheckCircleIcon'; export { EmailIcon } from './components/EmailIcon'; export { GithubIcon } from './components/GithubIcon'; export { InstagramIcon } from './components/InstagramIcon'; export { KakaoIcon } from './components/KakaoIcon'; -export { LinkIcon } from './components/LinkIcon'; export { LinkedinIcon } from './components/LinkedinIcon'; +export { LinkIcon } from './components/LinkIcon'; export { OrganizerIcon } from './components/OrganizerIcon'; export { UserIcon } from './components/UserIcon'; export { YoutubeIcon } from './components/YoutubeIcon'; +export type { IconProps } from './types'; diff --git a/packages/icon/src/types.ts b/packages/icon/src/types.ts index d8191122..3a82d07b 100644 --- a/packages/icon/src/types.ts +++ b/packages/icon/src/types.ts @@ -2,14 +2,14 @@ import type { SVGProps } from 'react'; export interface IconProps extends SVGProps { /** Icon color. Defaults to currentColor */ - color?: string + color?: string; /** Icon size in pixels. Defaults to 24 */ - size?: number + size?: number; } -export type GenerateResult ={ +export type GenerateResult = { fileName: string; componentName: string; success: boolean; error?: string; - } \ No newline at end of file +}; diff --git a/packages/icon/vitest.config.ts b/packages/icon/vitest.config.ts index a9178275..e663baf0 100644 --- a/packages/icon/vitest.config.ts +++ b/packages/icon/vitest.config.ts @@ -1,4 +1,5 @@ import { defineProject, mergeConfig } from 'vitest/config'; + import defaultConfig from '../../vitest.config'; export default mergeConfig( diff --git a/packages/input/package.json b/packages/input/package.json index aa814153..ad5c237e 100644 --- a/packages/input/package.json +++ b/packages/input/package.json @@ -9,7 +9,9 @@ }, "type": "module", "exports": "./src/index.ts", - "files": ["dist"], + "files": [ + "dist" + ], "scripts": { "build": "tsup", "build:storybook": "storybook build", diff --git a/packages/input/src/Input.stories.tsx b/packages/input/src/Input.stories.tsx index 3cd368e9..86a9c3b1 100644 --- a/packages/input/src/Input.stories.tsx +++ b/packages/input/src/Input.stories.tsx @@ -1,5 +1,7 @@ -import type { StoryObj } from '@storybook/react'; import { useRef, useState } from 'react'; + +import type { StoryObj } from '@storybook/react'; + import { Action, Input } from './Input'; const meta = { diff --git a/packages/input/src/Input.tsx b/packages/input/src/Input.tsx index 198b6709..06425228 100644 --- a/packages/input/src/Input.tsx +++ b/packages/input/src/Input.tsx @@ -57,5 +57,5 @@ const InputFieldAction = forwardRef, 'size'> & { diff --git a/packages/radio/src/RadioGroup.stories.tsx b/packages/radio/src/RadioGroup.stories.tsx index 839a9135..a6b9c150 100644 --- a/packages/radio/src/RadioGroup.stories.tsx +++ b/packages/radio/src/RadioGroup.stories.tsx @@ -1,8 +1,10 @@ -import type { Meta, StoryObj } from '@storybook/react'; import { useState } from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + +import { RadioSize } from './constants/sizes'; import { Radio } from './Radio'; import { RadioGroup } from './RadioGroup'; -import { RadioSize } from './constants/sizes'; const meta = { title: 'Components/RadioGroup', diff --git a/packages/radio/vitest.config.ts b/packages/radio/vitest.config.ts index a9178275..e663baf0 100644 --- a/packages/radio/vitest.config.ts +++ b/packages/radio/vitest.config.ts @@ -1,4 +1,5 @@ import { defineProject, mergeConfig } from 'vitest/config'; + import defaultConfig from '../../vitest.config'; export default mergeConfig( diff --git a/packages/reset/src/Reset.test.tsx b/packages/reset/src/Reset.test.tsx index 075602f4..169d95cc 100644 --- a/packages/reset/src/Reset.test.tsx +++ b/packages/reset/src/Reset.test.tsx @@ -1,6 +1,8 @@ -import { render, screen } from '@testing-library/react'; import React from 'react'; + +import { render, screen } from '@testing-library/react'; import { describe, expect, it } from 'vitest'; + import { Reset } from './Reset'; describe('Reset', () => { @@ -107,25 +109,30 @@ describe('Reset', () => { }); }); - it.each(['article', 'section', 'nav', 'aside', 'header', 'footer', 'main'])( - 'applies reset styles to %s element', - (elementType) => { - render( - <> - - {React.createElement( - elementType, - { - 'data-testid': 'semantic-element', - }, - 'Content', - )} - , - ); - - const element = screen.getByTestId('semantic-element'); - expect(element).toHaveStyle({ display: 'block' }); - }, - ); + it.each([ + 'article', + 'section', + 'nav', + 'aside', + 'header', + 'footer', + 'main', + ])('applies reset styles to %s element', (elementType) => { + render( + <> + + {React.createElement( + elementType, + { + 'data-testid': 'semantic-element', + }, + 'Content', + )} + , + ); + + const element = screen.getByTestId('semantic-element'); + expect(element).toHaveStyle({ display: 'block' }); + }); }); }); diff --git a/packages/reset/src/reset.css b/packages/reset/src/reset.css index 2ab32126..3990939a 100644 --- a/packages/reset/src/reset.css +++ b/packages/reset/src/reset.css @@ -260,9 +260,9 @@ html { @media (prefers-reduced-motion: reduce) { *:not(.preserve-motion) { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - scroll-behavior: auto !important; + animation-duration: 0.01ms; + animation-iteration-count: 1; + transition-duration: 0.01ms; + scroll-behavior: auto; } } diff --git a/packages/reset/vitest.config.ts b/packages/reset/vitest.config.ts index a9178275..e663baf0 100644 --- a/packages/reset/vitest.config.ts +++ b/packages/reset/vitest.config.ts @@ -1,4 +1,5 @@ import { defineProject, mergeConfig } from 'vitest/config'; + import defaultConfig from '../../vitest.config'; export default mergeConfig( diff --git a/packages/side/package.json b/packages/side/package.json index 7ff9b257..9dff4583 100644 --- a/packages/side/package.json +++ b/packages/side/package.json @@ -9,7 +9,10 @@ }, "type": "module", "exports": "./src/index.ts", - "files": ["dist", "styles.css"], + "files": [ + "dist", + "styles.css" + ], "scripts": { "build": "tsup", "clean": "rm -rf node_modules dist", diff --git a/packages/skeleton/package.json b/packages/skeleton/package.json index be0e60fe..545ad66e 100644 --- a/packages/skeleton/package.json +++ b/packages/skeleton/package.json @@ -9,7 +9,9 @@ }, "type": "module", "exports": "./src/index.ts", - "files": ["dist"], + "files": [ + "dist" + ], "scripts": { "build": "tsup", "build:storybook": "storybook build", diff --git a/packages/skeleton/src/Skeleton.stories.tsx b/packages/skeleton/src/Skeleton.stories.tsx index 84eacdcd..2ccec178 100644 --- a/packages/skeleton/src/Skeleton.stories.tsx +++ b/packages/skeleton/src/Skeleton.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; + import { Skeleton } from './Skeleton'; const meta = { diff --git a/packages/skeleton/src/Skeleton.test.tsx b/packages/skeleton/src/Skeleton.test.tsx index a593562f..429f4d95 100644 --- a/packages/skeleton/src/Skeleton.test.tsx +++ b/packages/skeleton/src/Skeleton.test.tsx @@ -1,5 +1,6 @@ import { render, screen } from '@testing-library/react'; import { describe, expect, it, test } from 'vitest'; + import { Skeleton } from './Skeleton'; describe('Skeleton', () => { diff --git a/packages/skeleton/vitest.config.ts b/packages/skeleton/vitest.config.ts index a9178275..e663baf0 100644 --- a/packages/skeleton/vitest.config.ts +++ b/packages/skeleton/vitest.config.ts @@ -1,4 +1,5 @@ import { defineProject, mergeConfig } from 'vitest/config'; + import defaultConfig from '../../vitest.config'; export default mergeConfig( diff --git a/packages/switch/package.json b/packages/switch/package.json index c971150c..93ad351e 100644 --- a/packages/switch/package.json +++ b/packages/switch/package.json @@ -9,7 +9,9 @@ }, "type": "module", "exports": "./src/index.ts", - "files": ["dist"], + "files": [ + "dist" + ], "scripts": { "build": "tsup", "build:storybook": "storybook build", diff --git a/packages/switch/src/Switch.stories.tsx b/packages/switch/src/Switch.stories.tsx index b9910e35..b766cce8 100644 --- a/packages/switch/src/Switch.stories.tsx +++ b/packages/switch/src/Switch.stories.tsx @@ -1,7 +1,9 @@ -import type { Meta, StoryObj } from '@storybook/react'; import { useState } from 'react'; -import { Switch } from './Switch'; + +import type { Meta, StoryObj } from '@storybook/react'; + import { SWITCH_SIZES } from './constants/size'; +import { Switch } from './Switch'; const meta = { title: 'Components/Switch', diff --git a/packages/switch/src/Switch.test.tsx b/packages/switch/src/Switch.test.tsx index a2037259..25f0ce19 100644 --- a/packages/switch/src/Switch.test.tsx +++ b/packages/switch/src/Switch.test.tsx @@ -1,11 +1,14 @@ import '@testing-library/jest-dom'; + +import { createRef } from 'react'; + import { faker } from '@faker-js/faker'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { createRef } from 'react'; import { describe, expect, test, vi } from 'vitest'; -import { Switch } from './Switch'; + import { SWITCH_SIZES, SwitchSize } from './constants/size'; +import { Switch } from './Switch'; describe('Switch 컴포넌트', () => { describe('기본 렌더링', () => { diff --git a/packages/switch/vitest.config.ts b/packages/switch/vitest.config.ts index a9178275..e663baf0 100644 --- a/packages/switch/vitest.config.ts +++ b/packages/switch/vitest.config.ts @@ -1,4 +1,5 @@ import { defineProject, mergeConfig } from 'vitest/config'; + import defaultConfig from '../../vitest.config'; export default mergeConfig( diff --git a/packages/theme/package.json b/packages/theme/package.json index 119e9ca0..07a2b307 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -11,7 +11,9 @@ "exports": { ".": "./src/index.ts" }, - "files": ["dist"], + "files": [ + "dist" + ], "scripts": { "build": "tsup", "build:storybook": "storybook build", diff --git a/packages/theme/src/ThemeProvider.test.tsx b/packages/theme/src/ThemeProvider.test.tsx index a67cbdac..c187458c 100644 --- a/packages/theme/src/ThemeProvider.test.tsx +++ b/packages/theme/src/ThemeProvider.test.tsx @@ -147,30 +147,31 @@ describe('ThemeProvider', () => { { from: themeColor['3rd'], to: themeColor['4th'], buttonTestId: 'set-4th' }, ]; - it.each(themeChangeTests)( - 'can change theme from $from.primary to $to.primary', - async ({ from, to, buttonTestId }) => { - render( - - - , - ); - - const currentTheme = screen.getByTestId('current-theme'); - const changeButton = screen.getByTestId(buttonTestId); - - // Check initial state - expect(currentTheme).toHaveTextContent(from.primary); - - // Change theme - await act(async () => { - changeButton.click(); - }); - - // Check changed state - expect(currentTheme).toHaveTextContent(to.primary); - }, - ); + it.each(themeChangeTests)('can change theme from $from.primary to $to.primary', async ({ + from, + to, + buttonTestId, + }) => { + render( + + + , + ); + + const currentTheme = screen.getByTestId('current-theme'); + const changeButton = screen.getByTestId(buttonTestId); + + // Check initial state + expect(currentTheme).toHaveTextContent(from.primary); + + // Change theme + await act(async () => { + changeButton.click(); + }); + + // Check changed state + expect(currentTheme).toHaveTextContent(to.primary); + }); }); test('children are rendered correctly', () => { diff --git a/packages/tokens/package.json b/packages/tokens/package.json index d7915215..8cf7bba4 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -9,7 +9,9 @@ }, "type": "module", "exports": "./src/index.ts", - "files": ["dist"], + "files": [ + "dist" + ], "scripts": { "build": "tsup", "build:storybook": "storybook build", diff --git a/packages/tooltip/package.json b/packages/tooltip/package.json index 962e4821..b5d2a660 100644 --- a/packages/tooltip/package.json +++ b/packages/tooltip/package.json @@ -9,7 +9,9 @@ }, "type": "module", "exports": "./src/index.ts", - "files": ["dist"], + "files": [ + "dist" + ], "scripts": { "build": "tsup", "build:storybook": "storybook build", diff --git a/packages/tooltip/src/Tooltip.stories.tsx b/packages/tooltip/src/Tooltip.stories.tsx index 06208030..7ac4b4e3 100644 --- a/packages/tooltip/src/Tooltip.stories.tsx +++ b/packages/tooltip/src/Tooltip.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryFn } from '@storybook/react'; + import { Tooltip, type TooltipProps } from './Tooltip'; export default { diff --git a/packages/tooltip/src/Tooltip.test.tsx b/packages/tooltip/src/Tooltip.test.tsx index 309050bd..10d32d38 100644 --- a/packages/tooltip/src/Tooltip.test.tsx +++ b/packages/tooltip/src/Tooltip.test.tsx @@ -99,23 +99,29 @@ describe('Tooltip 위치 테스트', () => { expect(tooltip.className).toContain('top'); }); - test.each([['top-left'], ['top'], ['top-right'], ['bottom-left'], ['bottom'], ['bottom-right'], ['left'], ['right']])( - 'Tooltip이 %s 위치에 올바르게 렌더링된다.', - async (placement) => { - render( - - - , - ); - - const trigger = screen.getByText('Trigger'); - await userEvent.hover(trigger); - - const tooltip = await screen.findByText('Tooltip content'); - expect(tooltip).toBeInTheDocument(); - expect(tooltip.className).toContain(placement as string); - }, - ); + test.each([ + ['top-left'], + ['top'], + ['top-right'], + ['bottom-left'], + ['bottom'], + ['bottom-right'], + ['left'], + ['right'], + ])('Tooltip이 %s 위치에 올바르게 렌더링된다.', async (placement) => { + render( + + + , + ); + + const trigger = screen.getByText('Trigger'); + await userEvent.hover(trigger); + + const tooltip = await screen.findByText('Tooltip content'); + expect(tooltip).toBeInTheDocument(); + expect(tooltip.className).toContain(placement as string); + }); }); describe('Tooltip 접근성 테스트', () => { diff --git a/packages/tooltip/vitest.config.ts b/packages/tooltip/vitest.config.ts index a9178275..e663baf0 100644 --- a/packages/tooltip/vitest.config.ts +++ b/packages/tooltip/vitest.config.ts @@ -1,4 +1,5 @@ import { defineProject, mergeConfig } from 'vitest/config'; + import defaultConfig from '../../vitest.config'; export default mergeConfig( diff --git a/packages/typography/package.json b/packages/typography/package.json index 6637d109..ac241aec 100644 --- a/packages/typography/package.json +++ b/packages/typography/package.json @@ -9,7 +9,9 @@ }, "type": "module", "exports": "./src/index.ts", - "files": ["dist"], + "files": [ + "dist" + ], "scripts": { "build": "tsup", "build:storybook": "storybook build", diff --git a/packages/typography/src/Typography.css.ts b/packages/typography/src/Typography.css.ts index 83f6056e..b7c34951 100644 --- a/packages/typography/src/Typography.css.ts +++ b/packages/typography/src/Typography.css.ts @@ -1,5 +1,6 @@ import { fontSize, fontWeight, lineHeight } from '@sipe-team/tokens'; -import { style, styleVariants, createVar } from '@vanilla-extract/css'; + +import { createVar, style, styleVariants } from '@vanilla-extract/css'; export const textColorVar = createVar(); diff --git a/packages/typography/src/Typography.stories.tsx b/packages/typography/src/Typography.stories.tsx index f7c1a3d0..6b246618 100644 --- a/packages/typography/src/Typography.stories.tsx +++ b/packages/typography/src/Typography.stories.tsx @@ -1,5 +1,7 @@ import { fontSize, fontWeight, lineHeight } from '@sipe-team/tokens'; + import type { Meta, StoryObj } from '@storybook/react'; + import { Typography } from './Typography'; const meta = { diff --git a/packages/typography/src/Typography.test.tsx b/packages/typography/src/Typography.test.tsx index b17af81b..6393a53b 100644 --- a/packages/typography/src/Typography.test.tsx +++ b/packages/typography/src/Typography.test.tsx @@ -1,7 +1,9 @@ -import { faker } from '@faker-js/faker'; import { fontWeight, lineHeight } from '@sipe-team/tokens'; + +import { faker } from '@faker-js/faker'; import { render, screen, waitFor } from '@testing-library/react'; import { expect, test } from 'vitest'; + import { type FontSize, type FontWeight, type LineHeight, Typography } from './Typography'; test('weight를 주입하지 않으면 기본 값 regular(400)로 글꼴의 두께를 설정한다.', () => { @@ -15,16 +17,16 @@ test.each([ { weight: 'medium', numericWeight: fontWeight.medium }, { weight: 'semiBold', numericWeight: fontWeight.semiBold }, { weight: 'bold', numericWeight: fontWeight.bold }, -] satisfies Array<{ weight: FontWeight; numericWeight: number }>)( - '주입한 $weight($numericWeight) weight을 기준으로 글꼴의 두께를 설정한다.', - ({ weight, numericWeight }) => { - render(테스트); - - expect(screen.getByText('테스트')).toHaveStyle({ - fontWeight: numericWeight, - }); - }, -); +] satisfies Array<{ + weight: FontWeight; + numericWeight: number; +}>)('주입한 $weight($numericWeight) weight을 기준으로 글꼴의 두께를 설정한다.', ({ weight, numericWeight }) => { + render(테스트); + + expect(screen.getByText('테스트')).toHaveStyle({ + fontWeight: numericWeight, + }); +}); test('size를 주입하지 않으면 기본 값 14로 글꼴의 크기를 설정한다.', () => { render(테스트); @@ -32,14 +34,13 @@ test('size를 주입하지 않으면 기본 값 14로 글꼴의 크기를 설정 expect(screen.getByText('테스트')).toHaveStyle({ fontSize: '14px' }); }); -test.each([12, 14, 16, 18, 20, 24, 28, 32, 36, 48] satisfies FontSize[])( - '주입한 %i size를 기준으로 글꼴의 크기를 설정한다.', - (size) => { - render(테스트); +test.each([ + 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, +] satisfies FontSize[])('주입한 %i size를 기준으로 글꼴의 크기를 설정한다.', (size) => { + render(테스트); - expect(screen.getByText('테스트')).toHaveStyle({ fontSize: `${size}px` }); - }, -); + expect(screen.getByText('테스트')).toHaveStyle({ fontSize: `${size}px` }); +}); test('lineHeight을 주입하지 않으면 기본 값 regular(1.5)로 줄 높이를 설정한다.', () => { render(테스트); @@ -50,16 +51,16 @@ test('lineHeight을 주입하지 않으면 기본 값 regular(1.5)로 줄 높이 test.each([ { lineHeight: 'regular', numericLineHeight: lineHeight.regular }, { lineHeight: 'compact', numericLineHeight: lineHeight.compact }, -] satisfies Array<{ lineHeight: LineHeight; numericLineHeight: number }>)( - '주입한 %s lineHeight을 기준으로 줄 높이를 설정한다.', - ({ lineHeight: lineHeightValue, numericLineHeight }) => { - render(테스트); - - expect(screen.getByText('테스트')).toHaveStyle({ - lineHeight: numericLineHeight, - }); - }, -); +] satisfies Array<{ + lineHeight: LineHeight; + numericLineHeight: number; +}>)('주입한 %s lineHeight을 기준으로 줄 높이를 설정한다.', ({ lineHeight: lineHeightValue, numericLineHeight }) => { + render(테스트); + + expect(screen.getByText('테스트')).toHaveStyle({ + lineHeight: numericLineHeight, + }); +}); test('주입한 color를 기준으로 글꼴의 색상을 설정한다.', () => { const color = faker.color.rgb(); diff --git a/packages/typography/src/Typography.tsx b/packages/typography/src/Typography.tsx index 0db830c5..12864807 100644 --- a/packages/typography/src/Typography.tsx +++ b/packages/typography/src/Typography.tsx @@ -1,12 +1,17 @@ -import { Slot } from '@radix-ui/react-slot'; +import { type ComponentProps, type CSSProperties, type ForwardedRef, forwardRef } from 'react'; + import type { fontSize as fontSizeToken, fontWeight as fontWeightToken, lineHeight as lineHeightToken, } from '@sipe-team/tokens'; + import { assignInlineVars } from '@vanilla-extract/dynamic'; + +import { Slot } from '@radix-ui/react-slot'; + import cx from 'clsx'; -import { type CSSProperties, type ComponentProps, type ForwardedRef, forwardRef } from 'react'; + import { base, lineHeightVariants, diff --git a/packages/typography/vitest.config.ts b/packages/typography/vitest.config.ts index a9178275..e663baf0 100644 --- a/packages/typography/vitest.config.ts +++ b/packages/typography/vitest.config.ts @@ -1,4 +1,5 @@ import { defineProject, mergeConfig } from 'vitest/config'; + import defaultConfig from '../../vitest.config'; export default mergeConfig( diff --git a/scripts/createComponent.ts b/scripts/createComponent.ts index 61910453..66758894 100644 --- a/scripts/createComponent.ts +++ b/scripts/createComponent.ts @@ -1,6 +1,7 @@ import * as fs from 'node:fs/promises'; import * as path from 'node:path'; import { fileURLToPath } from 'node:url'; + import { intro, isCancel, outro, spinner, text } from '@clack/prompts'; import { Cli, Command, Option } from 'clipanion'; diff --git a/tsup.config.ts b/tsup.config.ts index fc6285a4..8867708b 100644 --- a/tsup.config.ts +++ b/tsup.config.ts @@ -1,4 +1,5 @@ import { vanillaExtractPlugin } from '@vanilla-extract/esbuild-plugin'; + import { defineConfig } from 'tsup'; export default defineConfig({ diff --git a/vite.config.ts b/vite.config.ts index 1b03dd87..e92217fe 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,4 +1,5 @@ import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'; + import { defineConfig } from 'vite'; export default defineConfig({ diff --git a/www/package.json b/www/package.json index 3884895f..5a2fb264 100644 --- a/www/package.json +++ b/www/package.json @@ -30,7 +30,15 @@ "typescript": "~5.6.2" }, "browserslist": { - "production": [">0.5%", "not dead", "not op_mini all"], - "development": ["last 3 chrome version", "last 3 firefox version", "last 5 safari version"] + "production": [ + ">0.5%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 3 chrome version", + "last 3 firefox version", + "last 5 safari version" + ] } } diff --git a/www/src/HomepageFeatures/index.tsx b/www/src/HomepageFeatures/index.tsx index 322eed2a..69399a97 100644 --- a/www/src/HomepageFeatures/index.tsx +++ b/www/src/HomepageFeatures/index.tsx @@ -1,9 +1,11 @@ +import type { ComponentProps, ComponentType, ReactNode } from 'react'; + import Mountain from '@site/static/img/undraw_docusaurus_mountain.svg'; import React from '@site/static/img/undraw_docusaurus_react.svg'; import Tree from '@site/static/img/undraw_docusaurus_tree.svg'; import Heading from '@theme/Heading'; import clsx from 'clsx'; -import type { ComponentProps, ComponentType, ReactNode } from 'react'; + import styles from './index.module.css'; type FeatureItem = { diff --git a/www/src/pages/index.tsx b/www/src/pages/index.tsx index e62198ed..76a93c8b 100644 --- a/www/src/pages/index.tsx +++ b/www/src/pages/index.tsx @@ -3,6 +3,7 @@ import HomepageFeatures from '@site/src/HomepageFeatures'; import Heading from '@theme/Heading'; import Layout from '@theme/Layout'; import clsx from 'clsx'; + import styles from './index.module.css'; export default function Home() {