Merge branch 'main' into feature/checkboxGroup

.babelrc.json

@@ -10,7 +10,12 @@
       }
     ],
     "@babel/preset-typescript",
-    "@babel/preset-react"
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ]
   ],
   "plugins": []
 }

.eslintrc.js

@@ -6,7 +6,17 @@ module.exports = {
     tsconfigRootDir: __dirname,
   },
   plugins: ['@typescript-eslint/eslint-plugin'],
-  extends: ['plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+    'plugin:jest/recommended',
+    'plugin:jest-dom/recommended',
+    'plugin:testing-library/react',
+  ],
   root: true,
   env: {
     node: true,
@@ -25,6 +35,7 @@ module.exports = {
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-empty-interface': 'off',
+    'react/display-name': 'off',
   },
   overrides: [
     {
@@ -34,4 +45,9 @@ module.exports = {
       },
     },
   ],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
 };

.gitignore

@@ -5,4 +5,5 @@ release
 src/styles/_*.css
 .pages
 style.css
-.idea
+.idea
+coverage

.templates/componentTest.hbs

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+import { {{pascalCase name}} } from '.';
+
+describe('{{pascalCase name}}의 정상 동작은 아래와 같다.', () => {
+  test('{{pascalCase name}}이 정상적으로 렌더링 된다.', () => {
+    const { container } = render(<{{pascalCase name}} />);
+
+    expect(container).toBeInTheDocument();
+  });
+});

jest.config.ts

@@ -0,0 +1,17 @@
+import type { Config } from 'jest';
+
+const config: Config = {
+  verbose: true,
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
+  collectCoverageFrom: [
+    'src/{components,utils}/**/*.{ts,tsx}',
+    '!src/**/*.d.ts',
+    '!src/**/*.stories.*',
+    '!src/**/index.ts',
+    '!src/**/index.tsx',
+    '!src/**/*.framer.tsx',
+  ],
+};
+
+export default config;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rookies-team/design",
-  "version": "0.21.1",
+  "version": "0.25.0",
   "author": "Rookies Team",
   "description": "Rookies Design System",
   "homepage": "https://github.com/42-world/rookies-Design-System",
@@ -33,7 +33,7 @@
     "pre-build:clear": "rm -rf dist && rm style.css || true",
     "pre-build:tailwind": "tailwindcss -i ./src/styles/tailwind.css -o ./src/styles/_tailwind.css",
     "ci": "yarn concurrently 'yarn:ci:*'",
-    "ci:test": "echo no test",
+    "ci:test": "jest --ci --coverage",
     "ci:lint": "eslint 'src/**/*.{ts,tsx}' --config .eslintrc.js",
     "ci:format": "prettier --check src/**/*.{ts,tsx}",
     "ci:typecheck": "tsc --noEmit",
@@ -69,7 +69,11 @@
     "@storybook/react-webpack5": "^7.0.7",
     "@storybook/testing-library": "^0.1.0",
     "@svgr/webpack": "^8.0.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/babel-core": "^6.25.7",
+    "@types/jest": "^29.5.2",
     "@types/node": "^18.11.6",
     "@types/react": "^18.2.8",
     "@types/react-dom": "^18.2.4",
@@ -83,10 +87,17 @@
     "esbuild-plugin-svgr": "^2.0.0",
     "eslint": "^8.26.0",
     "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-jest": "^27.2.2",
+    "eslint-plugin-jest-dom": "^5.0.1",
     "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-testing-library": "^5.11.0",
     "framer": "^2.3.0",
     "fs-extra": "^10.0.0",
     "globby": "^11.0.4",
+    "jest": "^29.6.1",
+    "jest-environment-jsdom": "^29.6.1",
     "less": "^3.5",
     "plop": "^3.1.2",
     "postcss": "^8.4.23",
@@ -102,6 +113,7 @@
     "storybook-dark-mode": "^3.0.0",
     "tailwindcss": "^3.3.2",
     "tmp": "^0.2.1",
+    "ts-node": "^10.9.1",
     "typescript": "^4.9.4",
     "webpack": "^5"
   }

plopfile.mjs

@@ -22,6 +22,11 @@ export default function (
         path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.tsx',
         templateFile: '.templates/component.hbs',
       },
+      {
+        type: 'add',
+        path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.test.tsx',
+        templateFile: '.templates/componentTest.hbs',
+      },
       {
         type: 'add',
         path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.stories.ts',

setupTests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

src/components/Button/Button.framer.tsx

@@ -15,6 +15,7 @@ type Props = Omit<OriginalProps, 'icon'> & {
   icon: FramerIconType;
   variant: OriginalProps['variant'];
   activated: boolean;
+  disabled: boolean;
 };
 
 export function Button({ icon, ...props }: Props) {
@@ -52,4 +53,9 @@ applyFramerProperties(Button, {
       return !(props.variant === 'text');
     },
   },
+  disabled: {
+    title: 'Disabled',
+    type: ControlType.Boolean,
+    defaultValue: false,
+  },
 });

src/components/Button/Button.stories.tsx

@@ -13,6 +13,13 @@ const meta: Meta<Component> = {
         eq: 'text',
       },
     },
+    disabled: {
+      description: '버튼을 비활성화합니다.',
+      table: {
+        type: { summary: 'boolean' },
+      },
+      control: { type: 'boolean' },
+    },
   },
 };
 
@@ -59,4 +66,11 @@ export const OnlyText: Story = {
   },
 };
 
+export const Disabled: Story = {
+  args: {
+    text: 'Lorem Ipsum',
+    disabled: true,
+  },
+};
+
 export default meta;

src/components/Button/Button.tsx

@@ -43,25 +43,27 @@ type ButtonProps = Partial<ButtonVariant> & {
 type Props = ButtonProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonProps>;
 
 const variantStyles: Record<ButtonVariant['variant'], string> = {
-  primary: 'bg-color-system_200 border-0 hover:bg-color-system_300',
+  primary: 'bg-color-system_200 border-0 enabled:hover:bg-color-system_300',
   secondary:
-    'border-border-primary dark:border-border-primary_dark hover:border-color-system_200 hover:dark:border-color-system_200',
+    'border-border-primary dark:border-border-primary_dark enabled:hover:border-color-system_200 enabled:hover:dark:border-color-system_200',
   text: 'border-0',
 };
 
 export function Button(props: Props) {
-  const { text, icon, className, ...restProps } = props;
+  const { text, disabled, icon, className, ...restProps } = props;
 
   const variant = props.variant ?? 'primary';
   const activated = props.variant === 'text' && props.activated;
 
   return (
     <button
       className={twMerge(
-        `group flex h-8 flex-row items-center gap-2 rounded-2xl border border-solid transition-all duration-200 active:scale-92 ${variantStyles[variant]}`,
+        `group flex h-8 flex-row items-center gap-2 rounded-2xl border border-solid duration-200 enabled:transition-all enabled:active:scale-92 ${variantStyles[variant]}`,
         icon && !text ? 'px-2' : 'px-3',
+        disabled && 'cursor-not-allowed opacity-30',
         className,
       )}
+      disabled={disabled}
       {...restProps}
     >
       {icon && (
@@ -72,7 +74,7 @@ export function Button(props: Props) {
             'transition-colors duration-200',
             variant === 'primary'
               ? 'fill-color-white'
-              : 'fill-text-secondary group-hover:fill-color-system_200 dark:fill-text-secondary_dark',
+              : 'fill-text-secondary group-enabled:group-hover:fill-color-system_200 dark:fill-text-secondary_dark',
             activated && 'fill-color-system_200 dark:fill-color-system_200',
           )}
         />
@@ -84,7 +86,7 @@ export function Button(props: Props) {
           weight="medium"
           color={variant === 'primary' ? 'white' : 'secondary'}
           className={cx('transition-colors duration-200', {
-            'group-hover:text-color-system_200': variant !== 'primary',
+            'group-enabled:group-hover:text-color-system_200': variant !== 'primary',
             'text-color-system_200 dark:text-color-system_200': activated,
           })}
         />

src/components/Footer/Footer.tsx

@@ -23,10 +23,10 @@ export function Footer({ githubLink = '', mailLink = '', text }: Props) {
   return (
     <div className="flex flex-col">
       <div className="align-center mb-6 flex w-full flex-row justify-center gap-2">
-        <a href={githubLink} target="_blank" className="inline-block h-fit w-fit">
+        <a href={githubLink} target="_blank" className="inline-block h-fit w-fit" rel="noreferrer">
           <Button variant="secondary" icon={<Github />} />
         </a>
-        <a href={mailLink} target="_blank" className="inline-block h-fit w-fit">
+        <a href={mailLink} target="_blank" className="inline-block h-fit w-fit" rel="noreferrer">
           <Button variant="secondary" icon={<Mail />} />
         </a>
       </div>

src/components/GroupHeader/GroupHeader.tsx

@@ -20,7 +20,7 @@ export function GroupHeader({ href, text }: Props) {
       href={href}
     >
       <Text text={text} size="heading3" weight="semibold" />
-      <Icon svg={<ChevronRight />} className="h-6 w-6" />
+      <Icon svg={<ChevronRight />} className="h-6 w-6 fill-text-primary dark:fill-text-primary_dark" />
     </a>
   );
 }

src/components/Icon/Icon.tsx

@@ -26,7 +26,7 @@ export function Icon({ svg: SvgComponent, size = 'medium', className, ...rest }:
       viewBox: '0 0 24 24',
       width: wh.width,
       height: wh.height,
-      className: className ?? `fill-black dark:fill-white`,
+      className: className ?? `fill-text-primary dark:fill-text-primary_dark`,
       ...rest,
     },
     null,

src/components/Input/Input.framer.tsx

@@ -4,7 +4,8 @@ import { applyFramerProperties, FramerProvider } from '../../common/framer';
 import { Input as _Input } from './Input';
 
 interface InputProps {
-  variant: 'outline' | 'filled';
+  variant: 'outlined' | 'filled';
+  size: 'small' | 'medium';
   value: string;
   label: string;
   hasError: boolean;
@@ -38,6 +39,12 @@ export function Input(props: InputProps) {
 }
 
 applyFramerProperties(Input, {
+  size: {
+    title: 'Size',
+    type: ControlType.Enum,
+    options: ['small', 'medium'],
+    defaultValue: 'medium',
+  },
   variant: {
     title: 'Variant',
     type: ControlType.Enum,

src/components/Input/Input.stories.ts

@@ -9,7 +9,15 @@ const meta: Meta<Component> = {
 
 type Story = StoryObj<Component>;
 export const Primary: Story = {
-  args: { label: '필수 항목', placeholder: '', maxLength: 10, variant: 'outline', hasError: false },
+  args: {
+    label: '필수 항목',
+    placeholder: '',
+    maxLength: 10,
+    variant: 'outlined',
+    hasError: false,
+    required: true,
+    disabled: false,
+  },
 };
 
 export const DefaultValue: Story = {