From f244841ac0e0183c4ecae6539f722a1144e5d72b Mon Sep 17 00:00:00 2001 From: sohee Date: Fri, 5 Apr 2024 16:13:43 +0900 Subject: [PATCH] chore: yarn lint --- .../eslint-config-custom/react-internal.js | 4 +- packages/ui/Button/Button.tsx | 15 +++--- packages/ui/Button/constants.ts | 2 +- packages/ui/Button/utils.ts | 6 ++- packages/ui/CheckBox/index.tsx | 11 ++-- packages/ui/CheckBox/style.css.ts | 4 +- packages/ui/Dialog/Dialog.tsx | 10 ++-- packages/ui/Dialog/DialogComponent.tsx | 54 +++++++++---------- packages/ui/Dialog/DialogProvider.tsx | 20 +++---- packages/ui/Dialog/components/index.tsx | 3 +- packages/ui/Dialog/types.ts | 7 +-- packages/ui/Dialog/useDialog.tsx | 2 +- packages/ui/Toast/Toast.tsx | 8 +-- packages/ui/Toast/ToastProvider.tsx | 10 ++-- packages/ui/Toast/icons/alert.tsx | 12 ++--- packages/ui/Toast/icons/error.tsx | 12 ++--- packages/ui/Toast/icons/success.tsx | 12 ++--- packages/ui/Toast/parts/index.tsx | 10 ++-- packages/ui/Toast/types.ts | 6 +-- packages/ui/Toast/useToast.tsx | 6 +-- packages/ui/package.json | 4 +- packages/ui/scripts/build-css-modules.js | 26 --------- packages/ui/scripts/buildCssModules.js | 29 ++++++++++ packages/ui/theme.css.ts | 6 +-- 24 files changed, 140 insertions(+), 139 deletions(-) delete mode 100644 packages/ui/scripts/build-css-modules.js create mode 100644 packages/ui/scripts/buildCssModules.js diff --git a/packages/eslint-config-custom/react-internal.js b/packages/eslint-config-custom/react-internal.js index fae8335..1428c39 100644 --- a/packages/eslint-config-custom/react-internal.js +++ b/packages/eslint-config-custom/react-internal.js @@ -35,7 +35,9 @@ module.exports = { rules: { "import/no-default-export": "off", - "import/prefer-default-export": "on", + "import/prefer-default-export": "warn", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/no-empty-function": "off", "unicorn/filename-case": [ "error", { diff --git a/packages/ui/Button/Button.tsx b/packages/ui/Button/Button.tsx index 68766c1..7a37cd7 100644 --- a/packages/ui/Button/Button.tsx +++ b/packages/ui/Button/Button.tsx @@ -1,10 +1,11 @@ +import type {ButtonHTMLAttributes} from 'react'; import React from 'react'; import * as S from './style.css'; -import { createButtonVariant } from './utils'; +import createButtonVariant from './utils'; -type IconProps = { color?: string }; +interface IconProps { color?: string } -interface ButtonProps extends React.ButtonHTMLAttributes { +interface ButtonProps extends ButtonHTMLAttributes { children?: React.ReactNode; className?: string; size?: 'sm' | 'md' | 'lg'; @@ -26,13 +27,13 @@ function Button({ }: ButtonProps) { const variant = createButtonVariant(theme, rounded, size); return ( - ); } diff --git a/packages/ui/Button/constants.ts b/packages/ui/Button/constants.ts index f2e153d..69f1af1 100644 --- a/packages/ui/Button/constants.ts +++ b/packages/ui/Button/constants.ts @@ -1,5 +1,5 @@ import theme from '../theme.css'; -import { +import type { ButtonColorTheme, ButtonColorThemeWithStatus, ButtonSizeTheme, diff --git a/packages/ui/Button/utils.ts b/packages/ui/Button/utils.ts index c475c15..d6c0859 100644 --- a/packages/ui/Button/utils.ts +++ b/packages/ui/Button/utils.ts @@ -1,8 +1,8 @@ import { colorThemeToTextColor } from './constants'; import { sprinkles } from './style.css'; -import { ButtonColorTheme, ButtonRadiusTheme, ButtonSizeTheme } from './types'; +import type { ButtonColorTheme, ButtonRadiusTheme, ButtonSizeTheme } from './types'; -export function createButtonVariant( +function createButtonVariant( colorTheme: ButtonColorTheme, radiusTheme: ButtonRadiusTheme, sizeTheme: ButtonSizeTheme @@ -23,3 +23,5 @@ export function createButtonVariant( fontSize: sizeTheme, }); } + +export default createButtonVariant; \ No newline at end of file diff --git a/packages/ui/CheckBox/index.tsx b/packages/ui/CheckBox/index.tsx index fbf138c..ba2e171 100644 --- a/packages/ui/CheckBox/index.tsx +++ b/packages/ui/CheckBox/index.tsx @@ -1,4 +1,6 @@ -import React, { InputHTMLAttributes, forwardRef } from 'react'; +import type { InputHTMLAttributes } from 'react'; +import { forwardRef } from 'react'; +// TODO: import 경로 수정 import IconCheck from '../../icons/src/Icon/Interaction/ic-check'; import { check, @@ -21,14 +23,15 @@ const CheckBox = forwardRef( ({ checked = false, label, size = 'small', color = 'white', onChange, ...props }, ref) => { return ( ); } ); +CheckBox.displayName = 'CheckBox'; export default CheckBox; diff --git a/packages/ui/CheckBox/style.css.ts b/packages/ui/CheckBox/style.css.ts index e3c8b6c..d26f282 100644 --- a/packages/ui/CheckBox/style.css.ts +++ b/packages/ui/CheckBox/style.css.ts @@ -1,6 +1,6 @@ import { style, styleVariants } from '@vanilla-extract/css'; -import { colors } from '../../colors/src'; -import theme from '../theme.css'; +import { colors } from "@sopt-makers/colors/src"; +import theme from "../theme.css"; export const checkBoxWrapper = style({ display: 'flex', diff --git a/packages/ui/Dialog/Dialog.tsx b/packages/ui/Dialog/Dialog.tsx index 071a37d..e3cdc6a 100644 --- a/packages/ui/Dialog/Dialog.tsx +++ b/packages/ui/Dialog/Dialog.tsx @@ -1,19 +1,17 @@ "use client"; -import { FC } from 'react'; - import * as Dialogs from '@radix-ui/react-dialog'; import { DialogAnimation, DialogDescription, DialogFooter, DialogTitle } from './components'; import { dialogContainer, overlay } from './style.css'; -import { DialogProps } from './types'; +import type { DialogProps } from './types'; -export const DialogContainer: FC = ({ isOpen, onClose, children, ...restProps }) => { +export function DialogContainer ({ isOpen, onClose, children, ...restProps }: DialogProps) { return ( - + - +
{children}
 diff --git a/packages/ui/Dialog/DialogComponent.tsx b/packages/ui/Dialog/DialogComponent.tsx index 4c117f3..dd7592b 100644 --- a/packages/ui/Dialog/DialogComponent.tsx +++ b/packages/ui/Dialog/DialogComponent.tsx @@ -2,9 +2,9 @@ import Button from '../Button'; import CheckBox from '../CheckBox'; import Dialog from './Dialog'; import { buttonSize, checkBoxWapper, descriptionMarginBottom } from './style.css'; -import { DialogValueProps } from './types'; +import type { DialogValueProps } from './types'; -export const DialogComponent = ({ +export default function DialogComponent({ isOpen, onClose, title, @@ -12,9 +12,9 @@ export const DialogComponent = ({ checkBoxOptions, type, typeOptions, -}: DialogValueProps) => { +}: DialogValueProps) { const onApprove = () => { - typeOptions && typeOptions.buttonFunction; + typeOptions?.buttonFunction; onClose(); }; @@ -26,58 +26,54 @@ export const DialogComponent = ({ {description} - {checkBoxOptions && ( -
+ {checkBoxOptions ?
-
- )} - {type && typeOptions && ( - +
: null} + {type && typeOptions ? {type === 'default' && ( <> - )} {type === 'danger' && ( <> - - )} {type === 'single' && ( )} - - )} + : null} ); -}; +} diff --git a/packages/ui/Dialog/DialogProvider.tsx b/packages/ui/Dialog/DialogProvider.tsx index d383c7d..96b58b6 100644 --- a/packages/ui/Dialog/DialogProvider.tsx +++ b/packages/ui/Dialog/DialogProvider.tsx @@ -1,13 +1,13 @@ "use client"; import { createContext, useEffect, useState } from 'react'; -import { DialogComponent } from './DialogComponent'; -import { DialogOptionType, ProviderChildren } from './types'; +import DialogComponent from './DialogComponent'; +import type { DialogOptionType, ProviderChildren } from './types'; export const DialogContext = createContext({ - openDialog(option: DialogOptionType) {}, - closeDialog() {}, - checkCheckBox(isCheckValue:boolean) {}, + openDialog: (_option: DialogOptionType) => {}, + closeDialog: () => {}, + checkCheckBox: (_isCheckValue:boolean) => {}, }); function DialogProvider({ children }: ProviderChildren) { @@ -32,17 +32,13 @@ function DialogProvider({ children }: ProviderChildren) { const newDialogOption = { ...dialogOption, checkBoxOptions: newCheckBoxOption }; setDialogOption(newDialogOption); } - }, [isCheck]); + }, [isCheck, dialogOption]); return ( - <> - + {children} - {dialogOption && ( - - )} + {dialogOption ? : null} - ); } diff --git a/packages/ui/Dialog/components/index.tsx b/packages/ui/Dialog/components/index.tsx index 44bfaf9..2f28c51 100644 --- a/packages/ui/Dialog/components/index.tsx +++ b/packages/ui/Dialog/components/index.tsx @@ -1,5 +1,4 @@ -import React from 'react'; -import { ChildrenProp, DialogDescriptionProps, DialogFooterProp } from '../types'; +import type { ChildrenProp, DialogDescriptionProps, DialogFooterProp } from '../types'; import { animation, description, footer, gap, title } from './style.css'; export function DialogTitle({ children }: ChildrenProp) { diff --git a/packages/ui/Dialog/types.ts b/packages/ui/Dialog/types.ts index ad5b2e9..8418fd1 100644 --- a/packages/ui/Dialog/types.ts +++ b/packages/ui/Dialog/types.ts @@ -1,5 +1,6 @@ -import React, { ReactNode } from 'react'; -import { CheckBoxProps } from '../CheckBox'; +import type { ReactNode } from 'react'; +import type React from 'react'; +import type { CheckBoxProps } from '../CheckBox'; export interface ChildrenProp { children: ReactNode; @@ -38,4 +39,4 @@ export interface DialogProps { children?: ReactNode; } -export type ProviderChildren = { children: React.ReactNode }; +export interface ProviderChildren { children: React.ReactNode } diff --git a/packages/ui/Dialog/useDialog.tsx b/packages/ui/Dialog/useDialog.tsx index 641f411..54ccc20 100644 --- a/packages/ui/Dialog/useDialog.tsx +++ b/packages/ui/Dialog/useDialog.tsx @@ -1,6 +1,6 @@ import { useCallback, useContext } from 'react'; import { DialogContext } from './DialogProvider'; -import { DialogOptionType } from './types'; +import type { DialogOptionType } from './types'; const useDialog = () => { const { openDialog, closeDialog } = useContext(DialogContext); diff --git a/packages/ui/Toast/Toast.tsx b/packages/ui/Toast/Toast.tsx index 7692981..0832b20 100644 --- a/packages/ui/Toast/Toast.tsx +++ b/packages/ui/Toast/Toast.tsx @@ -1,14 +1,14 @@ import React, { forwardRef } from "react"; import * as Toast from "./parts"; -import { ToastOptionType } from "./types"; +import type { ToastOptionType } from "./types"; function ToastComponent(props: ToastOptionType, ref: React.Ref) { const { icon, content, action, style } = props; return ( - - - {action && } + + + {action ? : null} ); } diff --git a/packages/ui/Toast/ToastProvider.tsx b/packages/ui/Toast/ToastProvider.tsx index 4764071..91ff056 100644 --- a/packages/ui/Toast/ToastProvider.tsx +++ b/packages/ui/Toast/ToastProvider.tsx @@ -2,11 +2,11 @@ import { createContext, useRef, useState } from "react"; import ToastComponent from "./Toast"; -import { Children, ToastOptionType } from "./types"; +import type { Children, ToastOptionType } from "./types"; export const ToastContext = createContext({ - openToast(option: ToastOptionType) {}, - closeToast() {}, + openToast: (_option: ToastOptionType) => {}, + closeToast: () => {}, }); function ToastProvider({ children }: Children) { @@ -28,7 +28,7 @@ function ToastProvider({ children }: Children) { if (!toastOption) return; clearTimeout(timerRef.current); - setTimeout(() => setToastOption(null), 200); + setTimeout(() => { setToastOption(null); }, 200); if (toastRef.current) { toastRef.current.style.opacity = "0"; toastRef.current.style.transition = "opacity .2s linear"; @@ -38,7 +38,7 @@ function ToastProvider({ children }: Children) { return ( {children} - {toastOption && } + {toastOption ? : null} ); } diff --git a/packages/ui/Toast/icons/alert.tsx b/packages/ui/Toast/icons/alert.tsx index 98eadab..99a081e 100644 --- a/packages/ui/Toast/icons/alert.tsx +++ b/packages/ui/Toast/icons/alert.tsx @@ -1,14 +1,14 @@ -const ToastIconAlert = () => { +function ToastIconAlert() { return ( - + { - + ); -}; +} export default ToastIconAlert; diff --git a/packages/ui/Toast/icons/error.tsx b/packages/ui/Toast/icons/error.tsx index 8f7e6fa..8681332 100644 --- a/packages/ui/Toast/icons/error.tsx +++ b/packages/ui/Toast/icons/error.tsx @@ -1,14 +1,14 @@ -const ToastIconError = () => { +function ToastIconError() { return ( - + { - + ); -}; +} export default ToastIconError; diff --git a/packages/ui/Toast/icons/success.tsx b/packages/ui/Toast/icons/success.tsx index 3a43ecb..6bd526c 100644 --- a/packages/ui/Toast/icons/success.tsx +++ b/packages/ui/Toast/icons/success.tsx @@ -1,22 +1,22 @@ -const ToastIconSuccess = () => { +function ToastIconSuccess() { return ( - + ); -}; +} export default ToastIconSuccess; diff --git a/packages/ui/Toast/parts/index.tsx b/packages/ui/Toast/parts/index.tsx index 41f3647..e2205ac 100644 --- a/packages/ui/Toast/parts/index.tsx +++ b/packages/ui/Toast/parts/index.tsx @@ -1,7 +1,7 @@ -import { ActionType, DefaultIconType, StrictPropsWithChildren } from "../types"; -import * as styles from "./style.css"; -import { ToastIconSuccess, ToastIconAlert, ToastIconError } from "../icons"; import { forwardRef } from "react"; +import type { ActionType, DefaultIconType, StrictPropsWithChildren } from "../types"; +import { ToastIconSuccess, ToastIconAlert, ToastIconError } from "../icons"; +import * as styles from "./style.css"; // ============================== ToastRoot =============================== @@ -22,7 +22,7 @@ function Root(props: StrictPropsWithChildren, ref: React.Ref +
{DefaultIcon ? ( ) : ( @@ -58,7 +58,7 @@ function Action(props: ActionProps) { const { name, style, ...actionProps } = props; return ( - ); diff --git a/packages/ui/Toast/types.ts b/packages/ui/Toast/types.ts index 2a9266f..5ca99e9 100644 --- a/packages/ui/Toast/types.ts +++ b/packages/ui/Toast/types.ts @@ -1,4 +1,4 @@ -export type Children = { children: React.ReactNode }; +export interface Children { children: React.ReactNode } export type StrictPropsWithChildren

= P & Children; @@ -14,9 +14,9 @@ export type StyleType = { [key in Styles]?: React.CSSProperties; }; -export type ToastOptionType = { +export interface ToastOptionType { icon?: DefaultIconType | React.ReactElement; content: string; action?: ActionType; style?: StyleType, -}; +} diff --git a/packages/ui/Toast/useToast.tsx b/packages/ui/Toast/useToast.tsx index 12147f6..5f9b5b3 100644 --- a/packages/ui/Toast/useToast.tsx +++ b/packages/ui/Toast/useToast.tsx @@ -1,13 +1,13 @@ import { useContext } from "react"; import { ToastContext } from "./ToastProvider"; -import { ToastOptionType } from "./types"; +import type { ToastOptionType } from "./types"; const useToast = () => { const { openToast, closeToast } = useContext(ToastContext); return { - open: (option: ToastOptionType) => openToast(option), - close: () => closeToast() + open: (option: ToastOptionType) => { openToast(option); }, + close: () => { closeToast(); } }; }; diff --git a/packages/ui/package.json b/packages/ui/package.json index fee5deb..2fd9f77 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -6,10 +6,10 @@ "types": "./dist/index.d.ts", "license": "MIT", "scripts": { - "build": "yarn clean && rollup -c && yarn build-css-modules", + "build": "yarn clean && rollup -c && yarn buildCssModules", "watch": "rollup -cw", "clean": "rm -rf dist desktop-variables.css mobile-variables.css", - "build-css-modules": "node ./scripts/build-css-modules.js", + "buildCssModules": "node ./scripts/buildCssModules.js", "lint": "eslint .", "generate:component": "turbo gen react-component" }, diff --git a/packages/ui/scripts/build-css-modules.js b/packages/ui/scripts/build-css-modules.js deleted file mode 100644 index b9b8f22..0000000 --- a/packages/ui/scripts/build-css-modules.js +++ /dev/null @@ -1,26 +0,0 @@ -const fs = require("fs"); -const path = require("path"); -const allVariables = require("../dist/cssVariables"); -const outputDir = require("../tsconfig.json").compilerOptions.outDir; - -Object.keys(allVariables).forEach((key) => { - const variableValues = Object.entries(allVariables).find( - ([name]) => name === key - )[1]; - - fs.writeFileSync( - path.join(outputDir, toFileName(key) + ".css"), - `${variableValues}` - ); -}); - -function toCssCasing(str) { - return str - .replace(/([a-z])/, "$1") - .replace(/([A-Z])/g, "-$1") - .toLowerCase(); -} - -function toFileName(str) { - return toCssCasing(str); -} diff --git a/packages/ui/scripts/buildCssModules.js b/packages/ui/scripts/buildCssModules.js new file mode 100644 index 0000000..df6e07e --- /dev/null +++ b/packages/ui/scripts/buildCssModules.js @@ -0,0 +1,29 @@ +import fs from 'node:fs'; +import path from 'node:path'; +import allVariables from '../cssVariables'; + +const tsconfigPath = path.resolve("../tsconfig.json"); +const tsconfig = JSON.parse(fs.readFileSync(tsconfigPath, "utf8")); +const outputDir = tsconfig.compilerOptions.outDir; + +Object.keys(allVariables).forEach((key) => { + const variableValues = Object.entries(allVariables).find( + ([name]) => name === key + )[1]; + + fs.writeFileSync( + path.join(outputDir, `${toFileName(key)}.css`), + `${variableValues}` + ); +}); + +function toCssCasing(str) { + return str + .replace(/(?:[a-z])/g, "$1") + .replace(/(?:[A-Z])/g, "-$1") + .toLowerCase(); +} + +function toFileName(str) { + return toCssCasing(str); +} diff --git a/packages/ui/theme.css.ts b/packages/ui/theme.css.ts index 7148da7..3ea411d 100644 --- a/packages/ui/theme.css.ts +++ b/packages/ui/theme.css.ts @@ -1,8 +1,8 @@ import { createGlobalTheme } from '@vanilla-extract/css'; -import { colors } from '../colors/src'; -import { fontsObject } from '../fonts/src/fonts'; +import { colors } from "@sopt-makers/colors/src"; +import { fontsObject } from "@sopt-makers/fonts/src"; -export const theme = createGlobalTheme('body', { +const theme = createGlobalTheme('body', { colors, fontsObject, });