프로젝트에서 사용할 공통 컴포넌트를 제작하는 ui 패키지를 만들었다
Directory
components: Button, Input 과 같은 컴포넌트가 있는 폴더
hooks: custom hook을 관리할 폴더
styles: reset.css palette.css 등 공통 css 를 관리할 폴더
types: helper type이 있는 폴더
Style
https://vanilla-extract.style/ 를 이용하여 스타일을 설정하였습니다
vanilla-extract의 장점으로
type safe하게 theme를 다룰 수 있습니다.
프론트앤드 프레임워크에 구애받지 않습니다.
Tailwind 처럼 Atomic CSS를 구성할 수도 있습니다.
Sttitches 처럼 variant 기반 스타일링을 구성할 수 있습니다.
Bundle
rollup 을 이용해서 번들링을 하였습니다
// rollup.config.js
import { vanillaExtractPlugin } from '@vanilla-extract/rollup-plugin';
import rollupResolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from 'rollup-plugin-typescript2';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import preserveDirective from 'rollup-plugin-preserve-directives';
import dts from 'rollup-plugin-dts';
import pkg from './package.json' assert { type: 'json' };
const external = [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})];
/**
* @type {import('rollup').RollupOptions}
*/
const config = [
{
input: 'src/index.ts',
output: [
{
file: pkg.types,
format: 'esm',
},
],
plugins: [dts()],
external,
},
{
input: 'src/index.ts',
output: [
{
dir: 'dist',
format: 'esm',
exports: 'named',
banner: arg => (/components\/[^/]+\/index.js/.test(arg.fileName) ? `'use client'` : ''),
preserveModules: true,
preserveModulesRoot: 'src',
assetFileNames(assetInfo) {
const assetPath = assetInfo.name.replace(/^src\//, 'css/');
return assetPath;
},
},
],
external,
treeshake: {
moduleSideEffects: false,
},
plugins: [
vanillaExtractPlugin(),
rollupResolve(),
commonjs({ include: /node_modules/ }),
typescript({ useTsconfigDeclarationDir: true }),
peerDepsExternal(),
preserveDirective(),
],
},
];
export default config;use client banner를 추가하여 next app router에서도 사용할수 있게 설정하였고
vanilla-extract css 관련파일은 css dir하위로 생성하게 설정하였습니다
post build 단계에서 다음 스크립트를 실행시켜 index.css파일을 생성한뒤 사용하는 프로젝트에서 css파일을 로드시키는것으로 하였습니다
// scripts/postbuild.js
import path from 'path';
import fs from 'fs';
function getAllFiles(dirPath, filesArray = []) {
const files = fs.readdirSync(dirPath);
files.forEach(file => {
const filePath = path.join(dirPath, file);
if (fs.statSync(filePath).isDirectory()) {
getAllFiles(filePath, filesArray);
} else {
filesArray.push(filePath);
}
});
return filesArray;
}
const vanillaCssList = getAllFiles('dist/css');
const contents = vanillaCssList.map(filePath => fs.readFileSync(filePath, 'utf8')).join('\n\n');
fs.writeFileSync('dist/css/index.css', contents);// package.json
{
"name": "@breadlee/ui",
"version": "0.0.4",
"main": "./dist/index.js",
"module": "./dist/index.js",
"types": "./dist/index.d.ts",
"sideEffects": false,
"type": "module",
"license": "MIT",
"description": "",
"files": [
"dist/**"
],
"scripts": {
"prebuild": "[ ! -d dist ] && mkdir -p dist || rm -rf dist/*",
"build": "rollup --config",
"postbuild": "node scripts/postbuild.js && pnpm run minify",
"minify": "cleancss -o ./dist/css/index.css ./dist/css/index.css",
"typecheck": "tsc -b tsconfig.json"
},
"peerDependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@breadlee/eslint-config": "workspace:*",
"@breadlee/icons": "workspace:*",
"@breadlee/tsconfig": "workspace:*",
"@breadlee/utils": "workspace:^",
"@rollup/plugin-commonjs": "^25.0.7",
"@rollup/plugin-node-resolve": "^15.2.3",
"@types/node": "^20.11.7",
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19",
"@vanilla-extract/css": "^1.14.1",
"@vanilla-extract/rollup-plugin": "^1.3.4",
"clean-css-cli": "^5.6.3",
"eslint": "^8.56.0",
"rollup": "^4.9.6",
"rollup-plugin-dts": "^6.1.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-preserve-directives": "^0.4.0",
"rollup-plugin-typescript2": "^0.36.0",
"typescript": "^5.3.3"
},
"publishConfig": {
"access": "public"
}
}
Component
다음 Button 컴포넌트와 같이 컴포넌트를 components하위에 개발할 예정입니다.
// src/components/Button/index.tsx
import { ComponentPropsWithoutRef, ElementType, ReactNode, useMemo } from 'react';
import { classnames } from '@breadlee/utils';
import Typography, { TypographyProps } from '../Typography';
import styles from './index.css';
interface ButtonOwnProps {
children: ReactNode;
color?: 'primary' | 'secondary' | 'tertiary' | 'error';
size?: 'xlarge' | 'large' | 'medium' | 'small';
isFullWidth?: boolean;
typographyProps?: Omit<TypographyProps, 'children'>;
}
export type ButtonProps<E extends ElementType = 'button'> = ButtonOwnProps &
Omit<ComponentPropsWithoutRef<E>, keyof ButtonOwnProps> & { component?: E };
const Button = <E extends ElementType = 'button'>({
children,
color = 'primary',
component,
isFullWidth,
size = 'medium',
typographyProps,
...otherProps
}: ButtonProps<E>) => {
const Component = component || 'button';
if (component && !(otherProps.href || otherProps.to)) {
throw new Error('anchor tag 또는 button tag 만 올수있습니다');
}
const defaultTypographyProps = useMemo<ButtonProps['typographyProps']>(() => {
switch (size) {
case 'xlarge':
return {
weight: 'regular',
variant: 'B1',
};
case 'large':
return {
weight: 'regular',
variant: 'B2',
};
case 'small':
return {
weight: 'regular',
variant: 'D2',
};
default:
return {
weight: 'regular',
variant: 'B2',
};
}
}, [size]);
return (
<Component
className={classnames(styles.base, styles.color[color], styles.size[size], {
[styles.fullWidth]: !!isFullWidth,
})}
{...(Component === 'button' && { type: 'button' })}
{...otherProps}
>
{typeof children === 'string' ? (
<Typography {...defaultTypographyProps} {...typographyProps}>
{children}
</Typography>
) : (
children
)}
</Component>
);
};
export default Button;
// src/components/Button/index.css.ts
import { style } from '@vanilla-extract/css';
import { palette } from '../../styles';
const base = style({
display: 'inline-flex',
alignItems: 'center',
textAlign: 'center',
justifyContent: 'center',
padding: '0 24px',
borderRadius: 8,
});
const fullWidth = style({
width: '100%',
});
const size = {
xlarge: style({
height: 52,
}),
large: style({
height: 48,
}),
medium: style({
height: 40,
}),
small: style({
height: 32,
borderRadius: 4,
padding: '0 12px',
}),
};
const color = {
primary: style({
backgroundColor: palette.Primary,
border: `1px solid ${palette.Primary}`,
color: palette.PrimaryOn,
':active': {
backgroundColor: palette.PrimaryContainer,
border: `1px solid ${palette.PrimaryContainer}`,
color: palette.PrimaryContainerOn,
},
':disabled': {
backgroundColor: palette.Gray500,
border: `1px solid ${palette.Gray500}`,
},
}),
secondary: style({
backgroundColor: palette.Secondary,
border: `1px solid ${palette.Secondary}`,
color: palette.SecondaryOn,
':active': {
backgroundColor: palette.SecondaryContainer,
border: `1px solid ${palette.SecondaryContainer}`,
color: palette.SecondaryContainerOn,
},
':disabled': {
backgroundColor: palette.Gray500,
border: `1px solid ${palette.Gray500}`,
},
}),
tertiary: style({
backgroundColor: palette.Tertiary,
border: `1px solid ${palette.Tertiary}`,
color: palette.TertiaryOn,
':active': {
backgroundColor: palette.TertiaryContainer,
border: `1px solid ${palette.TertiaryContainer}`,
color: palette.TertiaryContainerOn,
},
':disabled': {
backgroundColor: palette.Gray500,
border: `1px solid ${palette.Gray500}`,
},
}),
error: style({
backgroundColor: palette.Error,
border: `1px solid ${palette.Error}`,
color: palette.ErrorOn,
':active': {
backgroundColor: palette.ErrorContainer,
border: `1px solid ${palette.ErrorContainer}`,
color: palette.ErrorContainerOn,
},
':disabled': {
backgroundColor: palette.Gray500,
border: `1px solid ${palette.Gray500}`,
},
}),
};
const buttonStyle = {
base,
fullWidth,
size,
color,
};
export default buttonStyle;
자세한 소스는 여기서 확인가능합니다
https://github.com/leeyc924/leeyc-package/tree/main/packages/ui
