diff --git a/.pnp.cjs b/.pnp.cjs index e95f7fa7..c36c7aba 100755 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -36,6 +36,10 @@ const RAW_RUNTIME_STATE = {\ "name": "@boolti/typescript-config",\ "reference": "workspace:packages/config-typescript"\ + },\ + {\ + "name": "@boolti/ui",\ + "reference": "workspace:packages/ui"\ }\ ],\ "enableTopLevelFallback": true,\ @@ -44,6 +48,7 @@ const RAW_RUNTIME_STATE = ["@boolti/api", ["workspace:packages/api"]],\ ["@boolti/eslint-config", ["workspace:packages/config-eslint"]],\ ["@boolti/typescript-config", ["workspace:packages/config-typescript"]],\ + ["@boolti/ui", ["workspace:packages/ui"]],\ ["admin", ["workspace:apps/admin"]],\ ["boolti-web", ["workspace:."]],\ ["preview", ["workspace:apps/preview"]],\ @@ -466,6 +471,24 @@ const RAW_RUNTIME_STATE = "linkType": "SOFT"\ }]\ ]],\ + ["@boolti/ui", [\ + ["workspace:packages/ui", {\ + "packageLocation": "./packages/ui/",\ + "packageDependencies": [\ + ["@boolti/ui", "workspace:packages/ui"],\ + ["@boolti/eslint-config", "workspace:packages/config-eslint"],\ + ["@boolti/typescript-config", "workspace:packages/config-typescript"],\ + ["@emotion/react", "virtual:de80dc576383b2386358abc0e9fe49c00e3397fe355a0337462b73ab3115c2e557eb85784ee0fe776394cc11dd020b4e84dbbd75acf72ee6d54415d82d21f5c5#npm:11.11.3"],\ + ["@emotion/styled", "virtual:9ef42ff9c873460955cc48cd9b15127324f3d1f83a4bea8e6327df0101bb993bef095b175f8d10a3f0d23ee47f702ca3ef7272cba815f708e8609d03d84b96a2#npm:11.11.0"],\ + ["@types/react", "npm:18.2.48"],\ + ["@types/react-dom", "npm:18.2.18"],\ + ["react", "npm:18.2.0"],\ + ["react-dom", "virtual:de80dc576383b2386358abc0e9fe49c00e3397fe355a0337462b73ab3115c2e557eb85784ee0fe776394cc11dd020b4e84dbbd75acf72ee6d54415d82d21f5c5#npm:18.2.0"],\ + ["typescript", "patch:typescript@npm%3A5.3.3#optional!builtin::version=5.3.3&hash=e012d7"]\ + ],\ + "linkType": "SOFT"\ + }]\ + ]],\ ["@emotion/babel-plugin", [\ ["npm:11.11.0", {\ "packageLocation": "../../.yarn/berry/cache/@emotion-babel-plugin-npm-11.11.0-c1dcc4c884-10c0.zip/node_modules/@emotion/babel-plugin/",\ @@ -589,10 +612,10 @@ const RAW_RUNTIME_STATE = ],\ "linkType": "SOFT"\ }],\ - ["virtual:9845906954fdbefbb879db24fa8772d77a945dca59f459806df47a5b67245d4bc6502880b373cca7201062c81bea9f13f699f52de2004c037e79dbdbd5d97fb3#npm:11.11.0", {\ - "packageLocation": "./.yarn/__virtual__/@emotion-styled-virtual-8a22406c63/3/.yarn/berry/cache/@emotion-styled-npm-11.11.0-9a95c8527d-10c0.zip/node_modules/@emotion/styled/",\ + ["virtual:9ef42ff9c873460955cc48cd9b15127324f3d1f83a4bea8e6327df0101bb993bef095b175f8d10a3f0d23ee47f702ca3ef7272cba815f708e8609d03d84b96a2#npm:11.11.0", {\ + "packageLocation": "./.yarn/__virtual__/@emotion-styled-virtual-8ae92d8ed5/3/.yarn/berry/cache/@emotion-styled-npm-11.11.0-9a95c8527d-10c0.zip/node_modules/@emotion/styled/",\ "packageDependencies": [\ - ["@emotion/styled", "virtual:9845906954fdbefbb879db24fa8772d77a945dca59f459806df47a5b67245d4bc6502880b373cca7201062c81bea9f13f699f52de2004c037e79dbdbd5d97fb3#npm:11.11.0"],\ + ["@emotion/styled", "virtual:9ef42ff9c873460955cc48cd9b15127324f3d1f83a4bea8e6327df0101bb993bef095b175f8d10a3f0d23ee47f702ca3ef7272cba815f708e8609d03d84b96a2#npm:11.11.0"],\ ["@babel/runtime", "npm:7.23.8"],\ ["@emotion/babel-plugin", "npm:11.11.0"],\ ["@emotion/is-prop-valid", "npm:1.2.1"],\ @@ -1834,9 +1857,10 @@ const RAW_RUNTIME_STATE = ["@boolti/api", "workspace:packages/api"],\ ["@boolti/eslint-config", "workspace:packages/config-eslint"],\ ["@boolti/typescript-config", "workspace:packages/config-typescript"],\ + ["@boolti/ui", "workspace:packages/ui"],\ ["@emotion/babel-plugin", "npm:11.11.0"],\ ["@emotion/react", "virtual:de80dc576383b2386358abc0e9fe49c00e3397fe355a0337462b73ab3115c2e557eb85784ee0fe776394cc11dd020b4e84dbbd75acf72ee6d54415d82d21f5c5#npm:11.11.3"],\ - ["@emotion/styled", "virtual:9845906954fdbefbb879db24fa8772d77a945dca59f459806df47a5b67245d4bc6502880b373cca7201062c81bea9f13f699f52de2004c037e79dbdbd5d97fb3#npm:11.11.0"],\ + ["@emotion/styled", "virtual:9ef42ff9c873460955cc48cd9b15127324f3d1f83a4bea8e6327df0101bb993bef095b175f8d10a3f0d23ee47f702ca3ef7272cba815f708e8609d03d84b96a2#npm:11.11.0"],\ ["@types/react", "npm:18.2.48"],\ ["@types/react-dom", "npm:18.2.18"],\ ["@vitejs/plugin-react", "virtual:9845906954fdbefbb879db24fa8772d77a945dca59f459806df47a5b67245d4bc6502880b373cca7201062c81bea9f13f699f52de2004c037e79dbdbd5d97fb3#npm:4.2.1"],\ @@ -3743,9 +3767,10 @@ const RAW_RUNTIME_STATE = ["preview", "workspace:apps/preview"],\ ["@boolti/eslint-config", "workspace:packages/config-eslint"],\ ["@boolti/typescript-config", "workspace:packages/config-typescript"],\ + ["@boolti/ui", "workspace:packages/ui"],\ ["@emotion/babel-plugin", "npm:11.11.0"],\ ["@emotion/react", "virtual:de80dc576383b2386358abc0e9fe49c00e3397fe355a0337462b73ab3115c2e557eb85784ee0fe776394cc11dd020b4e84dbbd75acf72ee6d54415d82d21f5c5#npm:11.11.3"],\ - ["@emotion/styled", "virtual:9845906954fdbefbb879db24fa8772d77a945dca59f459806df47a5b67245d4bc6502880b373cca7201062c81bea9f13f699f52de2004c037e79dbdbd5d97fb3#npm:11.11.0"],\ + ["@emotion/styled", "virtual:9ef42ff9c873460955cc48cd9b15127324f3d1f83a4bea8e6327df0101bb993bef095b175f8d10a3f0d23ee47f702ca3ef7272cba815f708e8609d03d84b96a2#npm:11.11.0"],\ ["@types/react", "npm:18.2.48"],\ ["@types/react-dom", "npm:18.2.18"],\ ["@vitejs/plugin-react", "virtual:9845906954fdbefbb879db24fa8772d77a945dca59f459806df47a5b67245d4bc6502880b373cca7201062c81bea9f13f699f52de2004c037e79dbdbd5d97fb3#npm:4.2.1"],\ @@ -4199,7 +4224,7 @@ const RAW_RUNTIME_STATE = ["@boolti/typescript-config", "workspace:packages/config-typescript"],\ ["@emotion/babel-plugin", "npm:11.11.0"],\ ["@emotion/react", "virtual:de80dc576383b2386358abc0e9fe49c00e3397fe355a0337462b73ab3115c2e557eb85784ee0fe776394cc11dd020b4e84dbbd75acf72ee6d54415d82d21f5c5#npm:11.11.3"],\ - ["@emotion/styled", "virtual:9845906954fdbefbb879db24fa8772d77a945dca59f459806df47a5b67245d4bc6502880b373cca7201062c81bea9f13f699f52de2004c037e79dbdbd5d97fb3#npm:11.11.0"],\ + ["@emotion/styled", "virtual:9ef42ff9c873460955cc48cd9b15127324f3d1f83a4bea8e6327df0101bb993bef095b175f8d10a3f0d23ee47f702ca3ef7272cba815f708e8609d03d84b96a2#npm:11.11.0"],\ ["@types/react", "npm:18.2.48"],\ ["@types/react-dom", "npm:18.2.18"],\ ["@vitejs/plugin-react", "virtual:9845906954fdbefbb879db24fa8772d77a945dca59f459806df47a5b67245d4bc6502880b373cca7201062c81bea9f13f699f52de2004c037e79dbdbd5d97fb3#npm:4.2.1"],\ diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz index c1f6370d..1a764eba 100644 Binary files a/.yarn/install-state.gz and b/.yarn/install-state.gz differ diff --git a/apps/admin/package.json b/apps/admin/package.json index 932371bb..050efc22 100644 --- 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 index 3014312f..a3079ccd 100644 --- 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 b/apps/admin/src/emotion.d.ts similarity index 64% rename from apps/admin/src/styles/emotion.d.ts rename to apps/admin/src/emotion.d.ts index f4c1c600..b491d068 100644 --- a/apps/admin/src/styles/emotion.d.ts +++ b/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 index 784db1e2..cbe08146 100644 --- 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 index ee3300e5..3da53562 100644 --- a/apps/preview/src/App.tsx +++ b/apps/preview/src/App.tsx @@ -1,5 +1,192 @@ +import { Button, ThemeProvider } from '@boolti/ui'; + +const Icon = () => ( + + + +); + const App = () => { - return

Preview

; + return ( + +

+ Preview +
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+

+ + ); }; export default App; diff --git a/apps/preview/src/emotion.d.ts b/apps/preview/src/emotion.d.ts new file mode 100644 index 00000000..b491d068 --- /dev/null +++ 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 new file mode 100644 index 00000000..dcd0fab6 --- /dev/null +++ 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" + } +} diff --git a/packages/ui/src/components/Button/Button.style.ts b/packages/ui/src/components/Button/Button.style.ts new file mode 100644 index 00000000..837a7591 --- /dev/null +++ b/packages/ui/src/components/Button/Button.style.ts @@ -0,0 +1,126 @@ +import styled from '@emotion/styled'; + +type colorTheme = 'primary' | 'netural' | 'line'; +type Size = 'bold' | 'medium' | 'regular' | 'small' | 'x-small'; + +export interface ButtonProps { + colorTheme: colorTheme; + size: Size; + disabled?: boolean; + icon?: React.ReactNode; +} + +const Container = styled.button` + display: flex; + justify-content: center; + align-items: center; + border-radius: 4px; + border-width: 1px; + border-style: solid; + transition: + background-color 0.2s ease-in-out, + border-color 0.2s ease-in-out, + color 0.2s ease-in-out; + ${(props) => { + switch (props.size) { + case 'bold': + return ` + height: 48px; + padding: 13px 20px; + ${props.theme.typo.sh1.styles}; + `; + case 'medium': + return ` + height: 44px; + padding: 11px 18px; + ${props.theme.typo.sh1.styles}; + `; + case 'regular': + return ` + height: 40px; + padding: 9px 16px; + ${props.theme.typo.sh1.styles}; + `; + case 'small': + return ` + height: 36px; + padding: 7px 14px; + ${props.theme.typo.sh1.styles}; + `; + case 'x-small': + return ` + height: 32px; + padding: 5px 12px; + ${props.theme.typo.b1.styles}; + `; + } + }} + ${(props) => { + switch (props.colorTheme) { + case 'primary': + return ` + color: ${props.theme.palette.grey.g00}; + border-color: ${props.theme.palette.primary.o1}; + background-color: ${props.theme.palette.primary.o1}; + &:hover, &:active { + border-color: ${props.theme.palette.primary.o2}; + background-color: ${props.theme.palette.primary.o2}; + } + &:disabled { + color: ${props.theme.palette.grey.g60}; + border-color: ${props.theme.palette.grey.g20}; + background-color: ${props.theme.palette.grey.g20}; + } + `; + case 'netural': + return ` + color: ${props.theme.palette.grey.g00}; + border-color: ${props.theme.palette.grey.g90}; + background-color: ${props.theme.palette.grey.g90}; + &:hover { + border-color: #707070; + background-color: #707070; + } + &:active { + border-color: ${props.theme.palette.grey.g60}; + background-color: ${props.theme.palette.grey.g60}; + } + &:disabled { + color: ${props.theme.palette.grey.g60}; + border-color: ${props.theme.palette.grey.g20}; + background-color: ${props.theme.palette.grey.g20}; + } + `; + case 'line': + return ` + color: ${props.theme.palette.grey.g90}; + border-color: ${props.theme.palette.grey.g90}; + background-color: ${props.theme.palette.grey.g00}; + &:hover { + border-color: #707070; + color: #707070; + } + &:active { + color: ${props.theme.palette.grey.g60}; + border-color: ${props.theme.palette.grey.g60}; + } + &:disabled { + color: ${props.theme.palette.grey.g40}; + border-color: ${props.theme.palette.grey.g20}; + background-color: ${props.theme.palette.grey.g10}; + } + `; + } + }} +`; + +const Icon = styled.div` + width: 20px; + height: 20px; + margin-right: 8px; +`; + +export default { + Container, + Icon, +}; diff --git a/packages/ui/src/components/Button/index.tsx b/packages/ui/src/components/Button/index.tsx new file mode 100644 index 00000000..99345387 --- /dev/null +++ b/packages/ui/src/components/Button/index.tsx @@ -0,0 +1,14 @@ +import Styled, { ButtonProps } from './Button.style'; + +type Props = React.HTMLAttributes & ButtonProps; + +const Button = ({ children, colorTheme, size, icon, ...rest }: Props) => { + return ( + + {icon && {icon}} + {children} + + ); +}; + +export default Button; diff --git a/apps/admin/src/styles/ThemeProvider.tsx b/packages/ui/src/components/ThemeProvider/index.tsx similarity index 72% rename from apps/admin/src/styles/ThemeProvider.tsx rename to packages/ui/src/components/ThemeProvider/index.tsx index 91fef2f8..824fa5cd 100644 --- a/apps/admin/src/styles/ThemeProvider.tsx +++ b/packages/ui/src/components/ThemeProvider/index.tsx @@ -1,8 +1,8 @@ import { ThemeProvider as BaseThemeProvider } from '@emotion/react'; -import palette from './palette'; -import typo from './typo'; -import breakpoint from './breakpoint'; +import palette from '../../systems/palette'; +import typo from '../../systems/typo'; +import breakpoint from '../../systems/breakpoint'; const theme = { palette, diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts new file mode 100644 index 00000000..f0d80f5b --- /dev/null +++ b/packages/ui/src/components/index.ts @@ -0,0 +1,4 @@ +import ThemeProvider from './ThemeProvider'; +import Button from './Button'; + +export { ThemeProvider, Button }; diff --git a/packages/ui/src/emotion.d.ts b/packages/ui/src/emotion.d.ts new file mode 100644 index 00000000..85508e0f --- /dev/null +++ b/packages/ui/src/emotion.d.ts @@ -0,0 +1,13 @@ +import '@emotion/react'; + +import palette from './systems/palette'; +import typo from './systems/typo'; +import breakpoint from './systems/breakpoint'; + +declare module '@emotion/react' { + export interface Theme { + palette: typeof palette; + typo: typeof typo; + breakpoint: typeof breakpoint; + } +} diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts new file mode 100644 index 00000000..0a5a463d --- /dev/null +++ b/packages/ui/src/index.ts @@ -0,0 +1,2 @@ +export * from './systems'; +export * from './components'; diff --git a/apps/admin/src/styles/breakpoint.ts b/packages/ui/src/systems/breakpoint.ts similarity index 100% rename from apps/admin/src/styles/breakpoint.ts rename to packages/ui/src/systems/breakpoint.ts diff --git a/packages/ui/src/systems/index.ts b/packages/ui/src/systems/index.ts new file mode 100644 index 00000000..1f0374ba --- /dev/null +++ b/packages/ui/src/systems/index.ts @@ -0,0 +1,5 @@ +import typo from './typo'; +import palette from './palette'; +import breakpoint from './breakpoint'; + +export { typo, palette, breakpoint }; diff --git a/apps/admin/src/styles/palette.ts b/packages/ui/src/systems/palette.ts similarity index 96% rename from apps/admin/src/styles/palette.ts rename to packages/ui/src/systems/palette.ts index 00bd080d..ec2ea27d 100644 --- a/apps/admin/src/styles/palette.ts +++ b/packages/ui/src/systems/palette.ts @@ -14,7 +14,7 @@ const palette = { w: '#FFFFFF', g00: '#F8F9FA', g10: '#F2F3F5', - g20: '#D8DBE5', + g20: '#EAECEF', g30: '#DFE2E6', g40: '#CFD4DA', g50: '#AFB5BC', diff --git a/apps/admin/src/styles/typo.ts b/packages/ui/src/systems/typo.ts similarity index 100% rename from apps/admin/src/styles/typo.ts rename to packages/ui/src/systems/typo.ts diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json new file mode 100644 index 00000000..482ab669 --- /dev/null +++ b/packages/ui/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "@boolti/typescript-config/vite.json", + "compilerOptions": { + "moduleResolution": "node", + "jsxImportSource": "@emotion/react" + }, + "include": [ + "src" + ] +} diff --git a/yarn.lock b/yarn.lock index 67394b1f..7d3e43ed 100644 --- a/yarn.lock +++ b/yarn.lock @@ -326,6 +326,22 @@ __metadata: languageName: unknown linkType: soft +"@boolti/ui@npm:*, @boolti/ui@workspace:packages/ui": + version: 0.0.0-use.local + resolution: "@boolti/ui@workspace:packages/ui" + dependencies: + "@boolti/eslint-config": "npm:*" + "@boolti/typescript-config": "npm:*" + "@emotion/react": "npm:^11.11.3" + "@emotion/styled": "npm:^11.11.0" + "@types/react": "npm:^18.2.43" + "@types/react-dom": "npm:^18.2.17" + react: "npm:^18.2.0" + react-dom: "npm:^18.2.0" + typescript: "npm:^5.2.2" + languageName: unknown + linkType: soft + "@emotion/babel-plugin@npm:^11.11.0": version: 11.11.0 resolution: "@emotion/babel-plugin@npm:11.11.0" @@ -1257,6 +1273,7 @@ __metadata: "@boolti/api": "npm:*" "@boolti/eslint-config": "npm:*" "@boolti/typescript-config": "npm:*" + "@boolti/ui": "npm:*" "@emotion/babel-plugin": "npm:^11.11.0" "@emotion/react": "npm:^11.11.3" "@emotion/styled": "npm:^11.11.0" @@ -2973,6 +2990,7 @@ __metadata: dependencies: "@boolti/eslint-config": "npm:*" "@boolti/typescript-config": "npm:*" + "@boolti/ui": "npm:*" "@emotion/babel-plugin": "npm:^11.11.0" "@emotion/react": "npm:^11.11.3" "@emotion/styled": "npm:^11.11.0"