feat: @boolti/ui 패키지 추가, 버튼 컴포넌트 추가 (#15)

* feat: ui 패키지 생성 및 파일 이동 * refac: 폴더 구조 정리 * feat: 버튼 베이스 컴포넌트 추가 * feat: 색상, 사이즈 관련 타입 추가 초기 작업 스타일 추가 * fix: 잘못 임포트한 것 수정 * feat: 기본 사이즈, 색상 관련 스타일 추가 * feat: 아이콘 관련 스타일 추가 * feat: 변경된 값 반영 * feat: 버튼 hover, active, disabled 스타일 추가 * feat: ui 패키지에도 breakpoint 타입 추가 * fix: 타입 오류 수정 * fix: 화살표 함수로 변경
Nexters · Jan 27, 2024 · 1e9fd8d · 1e9fd8d
1 parent 8312a9b
commit 1e9fd8d
Show file tree

Hide file tree

Showing 21 changed files with 454 additions and 15 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/apps/admin/package.json b/apps/admin/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@boolti/api": "*",
+    "@boolti/ui": "*",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "react": "^18.2.0",

diff --git a/apps/admin/src/App.tsx b/apps/admin/src/App.tsx
@@ -1,6 +1,6 @@
 import { QueryClientProvider } from '@boolti/api';
 import { createBrowserRouter, RouterProvider, Navigate } from 'react-router-dom';
-import ThemeProvider from './styles/ThemeProvider';
+import { ThemeProvider } from '@boolti/ui';
 import LoginPage from './pages/Login/LoginPage';
 import SignUpCompletePage from './pages/SignUpComplete/SignUpCompletePage';
 import 'the-new-css-reset/css/reset.css';

diff --git a/apps/admin/src/styles/emotion.d.ts → apps/admin/src/emotion.d.ts b/apps/admin/src/styles/emotion.d.ts → apps/admin/src/emotion.d.ts
@@ -1,8 +1,6 @@
 import '@emotion/react';
 
-import palette from './palette';
-import typo from './typo';
-import breakpoint from './breakpoint';
+import { palette, typo, breakpoint } from '@boolti/ui';
 
 declare module '@emotion/react' {
   export interface Theme {

diff --git a/apps/preview/package.json b/apps/preview/package.json
@@ -11,6 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@boolti/ui": "*",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "react": "^18.2.0",

diff --git a/apps/preview/src/App.tsx b/apps/preview/src/App.tsx
@@ -1,5 +1,192 @@
+import { Button, ThemeProvider } from '@boolti/ui';
+
+const Icon = () => (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
 const App = () => {
-  return <h1>Preview</h1>;
+  return (
+    <ThemeProvider>
+      <h1>
+        Preview
+        <div
+          style={{
+            display: 'flex',
+            width: 1200,
+            justifyContent: 'space-between',
+            marginBottom: 20,
+            alignItems: 'flex-end',
+          }}
+        >
+          <Button size="bold" colorTheme="primary">
+            BUTTON
+          </Button>
+          <Button size="medium" colorTheme="primary">
+            BUTTON
+          </Button>
+          <Button size="regular" colorTheme="primary">
+            BUTTON
+          </Button>
+          <Button size="small" colorTheme="primary">
+            BUTTON
+          </Button>
+          <Button size="x-small" colorTheme="primary">
+            BUTTON
+          </Button>
+          <Button size="x-small" colorTheme="primary" disabled>
+            BUTTON
+          </Button>
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            width: 1200,
+            justifyContent: 'space-between',
+            marginBottom: 20,
+            alignItems: 'flex-end',
+          }}
+        >
+          <Button icon={<Icon />} size="bold" colorTheme="primary">
+            BUTTON
+          </Button>
+          <Button icon={<Icon />} size="medium" colorTheme="primary">
+            BUTTON
+          </Button>
+          <Button icon={<Icon />} size="regular" colorTheme="primary">
+            BUTTON
+          </Button>
+          <Button icon={<Icon />} size="small" colorTheme="primary">
+            BUTTON
+          </Button>
+          <Button icon={<Icon />} size="x-small" colorTheme="primary">
+            BUTTON
+          </Button>
+          <Button icon={<Icon />} size="x-small" colorTheme="primary" disabled>
+            BUTTON
+          </Button>
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            width: 1200,
+            justifyContent: 'space-between',
+            marginBottom: 20,
+            alignItems: 'flex-end',
+          }}
+        >
+          <Button icon={<Icon />} size="bold" colorTheme="netural">
+            BUTTON
+          </Button>
+          <Button icon={<Icon />} size="medium" colorTheme="netural">
+            BUTTON
+          </Button>
+          <Button icon={<Icon />} size="regular" colorTheme="netural">
+            BUTTON
+          </Button>
+          <Button icon={<Icon />} size="small" colorTheme="netural">
+            BUTTON
+          </Button>
+          <Button icon={<Icon />} size="x-small" colorTheme="netural">
+            BUTTON
+          </Button>
+          <Button icon={<Icon />} size="x-small" colorTheme="netural" disabled>
+            BUTTON
+          </Button>
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            width: 1200,
+            justifyContent: 'space-between',
+            marginBottom: 20,
+            alignItems: 'flex-end',
+          }}
+        >
+          <Button size="bold" colorTheme="netural">
+            BUTTON
+          </Button>
+          <Button size="medium" colorTheme="netural">
+            BUTTON
+          </Button>
+          <Button size="regular" colorTheme="netural">
+            BUTTON
+          </Button>
+          <Button size="small" colorTheme="netural">
+            BUTTON
+          </Button>
+          <Button size="x-small" colorTheme="netural">
+            BUTTON
+          </Button>
+          <Button size="x-small" colorTheme="netural" disabled>
+            BUTTON
+          </Button>
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            width: 1200,
+            justifyContent: 'space-between',
+            marginBottom: 20,
+            alignItems: 'flex-end',
+          }}
+        >
+          <Button icon={<Icon />} size="bold" colorTheme="line">
+            BUTTON
+          </Button>
+          <Button icon={<Icon />} size="medium" colorTheme="line">
+            BUTTON
+          </Button>
+          <Button icon={<Icon />} size="regular" colorTheme="line">
+            BUTTON
+          </Button>
+          <Button icon={<Icon />} size="small" colorTheme="line">
+            BUTTON
+          </Button>
+          <Button icon={<Icon />} size="x-small" colorTheme="line">
+            BUTTON
+          </Button>
+          <Button icon={<Icon />} size="x-small" colorTheme="line" disabled>
+            BUTTON
+          </Button>
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            width: 1200,
+            justifyContent: 'space-between',
+            marginBottom: 20,
+            alignItems: 'flex-end',
+          }}
+        >
+          <Button size="bold" colorTheme="line">
+            BUTTON
+          </Button>
+          <Button size="medium" colorTheme="line">
+            BUTTON
+          </Button>
+          <Button size="regular" colorTheme="line">
+            BUTTON
+          </Button>
+          <Button size="small" colorTheme="line">
+            BUTTON
+          </Button>
+          <Button size="x-small" colorTheme="line">
+            BUTTON
+          </Button>
+          <Button size="x-small" colorTheme="line" disabled>
+            BUTTON
+          </Button>
+        </div>
+      </h1>
+    </ThemeProvider>
+  );
 };
 
 export default App;
diff --git a/apps/preview/src/emotion.d.ts b/apps/preview/src/emotion.d.ts
@@ -0,0 +1,11 @@
+import '@emotion/react';
+
+import { palette, typo, breakpoint } from '@boolti/ui';
+
+declare module '@emotion/react' {
+  export interface Theme {
+    palette: typeof palette;
+    typo: typeof typo;
+    breakpoint: typeof breakpoint;
+  }
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@boolti/ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "scripts": {
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@boolti/eslint-config": "*",
+    "@boolti/typescript-config": "*",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "typescript": "^5.2.2"
+  }
+}