diff --git a/packages/eslint-config-custom/react-internal.js b/packages/eslint-config-custom/react-internal.js
index 1858131..fae8335 100644
--- a/packages/eslint-config-custom/react-internal.js
+++ b/packages/eslint-config-custom/react-internal.js
@@ -34,6 +34,16 @@ module.exports = {
ignorePatterns: ["node_modules/", "dist/", ".eslintrc.js"],
rules: {
- // add specific rules configurations here
+ "import/no-default-export": "off",
+ "import/prefer-default-export": "on",
+ "unicorn/filename-case": [
+ "error",
+ {
+ "cases": {
+ "camelCase": true,
+ "pascalCase": true
+ }
+ }
+ ]
},
};
diff --git a/packages/ui/Input/Input.tsx b/packages/ui/Input/Input.tsx
new file mode 100644
index 0000000..218c5be
--- /dev/null
+++ b/packages/ui/Input/Input.tsx
@@ -0,0 +1,15 @@
+import S from './style';
+
+interface Props {
+ children?: React.ReactNode;
+}
+
+function Input({ children }: Props) {
+ return (
+
+ {children}
+
+ );
+};
+
+export default Input;
\ No newline at end of file
diff --git a/packages/ui/Input/index.tsx b/packages/ui/Input/index.tsx
new file mode 100644
index 0000000..88f33cb
--- /dev/null
+++ b/packages/ui/Input/index.tsx
@@ -0,0 +1 @@
+export * from "./Input";
\ No newline at end of file
diff --git a/packages/ui/Input/style.ts b/packages/ui/Input/style.ts
new file mode 100644
index 0000000..9f29e31
--- /dev/null
+++ b/packages/ui/Input/style.ts
@@ -0,0 +1,10 @@
+import { style } from '@vanilla-extract/css';
+import theme from '../theme';
+
+const S = {
+ root: style({
+ color: theme.colors.black
+ })
+}
+
+export default S;
\ No newline at end of file
diff --git a/packages/ui/card.tsx b/packages/ui/card.tsx
deleted file mode 100644
index e6551f3..0000000
--- a/packages/ui/card.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from "react";
-
-export function Card({
- className,
- title,
- children,
- href,
-}: {
- className?: string;
- title: string;
- children: React.ReactNode;
- href: string;
-}): JSX.Element {
- return (
-
-
- {title} ->
-
- {children}
-
- );
-}
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index 926b151..de7bb1f 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -1,2 +1,2 @@
// component exports
-export { Card } from "./card";
+export * from "./Input";
diff --git a/packages/ui/package.json b/packages/ui/package.json
index b7e4c12..fed2cf6 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -13,9 +13,14 @@
"@types/node": "^20.5.2",
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
+ "@vanilla-extract/css": "^1.14.0",
"eslint-config-custom": "*",
"react": "^18.2.0",
"tsconfig": "*",
"typescript": "^4.5.2"
+ },
+ "dependencies": {
+ "@sopt-makers/fonts": "file:../fonts",
+ "@sopt-makers/colors": "file:../colors"
}
}
diff --git a/packages/ui/theme.ts b/packages/ui/theme.ts
new file mode 100644
index 0000000..6086e93
--- /dev/null
+++ b/packages/ui/theme.ts
@@ -0,0 +1,10 @@
+import { createTheme } from '@vanilla-extract/css';
+import { colors } from '@sopt-makers/colors';
+import { fonts } from '@sopt-makers/fonts';
+
+export const [themeClass, theme] = createTheme({
+ colors,
+ fonts
+});
+
+export default theme;
\ No newline at end of file
diff --git a/packages/ui/turbo/generators/config.ts b/packages/ui/turbo/generators/config.ts
index f8dc6e8..577bc35 100644
--- a/packages/ui/turbo/generators/config.ts
+++ b/packages/ui/turbo/generators/config.ts
@@ -17,9 +17,19 @@ export default function generator(plop: PlopTypes.NodePlopAPI): void {
actions: [
{
type: "add",
- path: "{{pascalCase name}}.tsx",
+ path: "{{pascalCase name}}/style.ts",
+ templateFile: "templates/style.hbs",
+ },
+ {
+ type: "add",
+ path: "{{pascalCase name}}/{{pascalCase name}}.tsx",
templateFile: "templates/component.hbs",
},
+ {
+ type: "add",
+ path: '{{pascalCase name}}/index.tsx',
+ template: 'export * from "./{{pascalCase name}}";'
+ },
{
type: "append",
path: "index.tsx",
diff --git a/packages/ui/turbo/generators/templates/component.hbs b/packages/ui/turbo/generators/templates/component.hbs
index cf7b636..8b5e803 100644
--- a/packages/ui/turbo/generators/templates/component.hbs
+++ b/packages/ui/turbo/generators/templates/component.hbs
@@ -1,14 +1,15 @@
-import * as React from "react";
+import S from './style';
interface Props {
children?: React.ReactNode;
}
-export const {{ pascalCase name }} = ({ children }: Props) => {
+function {{ pascalCase name }}({ children }: Props) {
return (
-
-
{{ name }}
+
{children}
);
};
+
+export default {{ pascalCase name }};
\ No newline at end of file
diff --git a/packages/ui/turbo/generators/templates/style.hbs b/packages/ui/turbo/generators/templates/style.hbs
new file mode 100644
index 0000000..9f29e31
--- /dev/null
+++ b/packages/ui/turbo/generators/templates/style.hbs
@@ -0,0 +1,10 @@
+import { style } from '@vanilla-extract/css';
+import theme from '../theme';
+
+const S = {
+ root: style({
+ color: theme.colors.black
+ })
+}
+
+export default S;
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index cb6ca8f..6c77cc3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -177,6 +177,13 @@
core-js-pure "^3.30.2"
regenerator-runtime "^0.14.0"
+"@babel/runtime@^7.12.5":
+ version "7.23.5"
+ resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.5.tgz#11edb98f8aeec529b82b211028177679144242db"
+ integrity sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==
+ dependencies:
+ regenerator-runtime "^0.14.0"
+
"@babel/runtime@^7.20.1", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5":
version "7.22.15"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.15.tgz#38f46494ccf6cf020bd4eed7124b425e83e523b8"
@@ -425,6 +432,11 @@
dependencies:
"@jridgewell/trace-mapping" "0.3.9"
+"@emotion/hash@^0.9.0":
+ version "0.9.1"
+ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43"
+ integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==
+
"@esbuild/android-arm64@0.18.20":
version "0.18.20"
resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622"
@@ -765,6 +777,12 @@
resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.3.3.tgz#16ab6c727d8c2020a5b6e4a176a243ecd88d8d69"
integrity sha512-0xd7qez0AQ+MbHatZTlI1gu5vkG8r7MYRUJAHPAHJBmGLs16zpkrpAVLvjQKQOqaXPDUBwOiJzNc00znHSCVBw==
+"@sopt-makers/colors@file:packages/colors":
+ version "3.0.0"
+
+"@sopt-makers/fonts@file:packages/fonts":
+ version "1.0.0"
+
"@swc/helpers@0.5.1":
version "0.5.1"
resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.1.tgz#e9031491aa3f26bfcc974a67f48bd456c8a5357a"
@@ -1071,6 +1089,28 @@
"@typescript-eslint/types" "6.6.0"
eslint-visitor-keys "^3.4.1"
+"@vanilla-extract/css@^1.14.0":
+ version "1.14.0"
+ resolved "https://registry.yarnpkg.com/@vanilla-extract/css/-/css-1.14.0.tgz#45fab9c04d893e3e363cf2cde7559d21233b7f63"
+ integrity sha512-rYfm7JciWZ8PFzBM/HDiE2GLnKI3xJ6/vdmVJ5BSgcCZ5CxRlM9Cjqclni9lGzF3eMOijnUhCd/KV8TOzyzbMA==
+ dependencies:
+ "@emotion/hash" "^0.9.0"
+ "@vanilla-extract/private" "^1.0.3"
+ chalk "^4.1.1"
+ css-what "^6.1.0"
+ cssesc "^3.0.0"
+ csstype "^3.0.7"
+ deep-object-diff "^1.1.9"
+ deepmerge "^4.2.2"
+ media-query-parser "^2.0.2"
+ modern-ahocorasick "^1.0.0"
+ outdent "^0.8.0"
+
+"@vanilla-extract/private@^1.0.3":
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/@vanilla-extract/private/-/private-1.0.3.tgz#7ec72bc2ff6fe51f9d650f962e8d1989b073690f"
+ integrity sha512-17kVyLq3ePTKOkveHxXuIJZtGYs+cSoev7BlP+Lf4916qfDhk/HBjvlYDe8egrea7LNPHKwSZJK/bzZC+Q6AwQ==
+
"@vercel/style-guide@^5.0.0":
version "5.0.1"
resolved "https://registry.yarnpkg.com/@vercel/style-guide/-/style-guide-5.0.1.tgz#8cee7395878cfba75b49284a5776723a7c991be2"
@@ -1708,7 +1748,17 @@ cross-spawn@^7.0.2, cross-spawn@^7.0.3:
shebang-command "^2.0.0"
which "^2.0.1"
-csstype@^3.0.2:
+css-what@^6.1.0:
+ version "6.1.0"
+ resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
+ integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
+
+cssesc@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+ integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
+csstype@^3.0.2, csstype@^3.0.7:
version "3.1.2"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
@@ -1785,6 +1835,16 @@ deep-is@^0.1.3:
resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
+deep-object-diff@^1.1.9:
+ version "1.1.9"
+ resolved "https://registry.yarnpkg.com/deep-object-diff/-/deep-object-diff-1.1.9.tgz#6df7ef035ad6a0caa44479c536ed7b02570f4595"
+ integrity sha512-Rn+RuwkmkDwCi2/oXOFS9Gsr5lJZu/yTGpK7wAaAIE75CC+LCGEZHpY6VQJa/RoJcrmaA/docWJZvYohlNkWPA==
+
+deepmerge@^4.2.2:
+ version "4.3.1"
+ resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
+ integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
+
default-browser-id@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/default-browser-id/-/default-browser-id-3.0.0.tgz#bee7bbbef1f4e75d31f98f4d3f1556a14cea790c"
@@ -3584,6 +3644,13 @@ map-obj@^4.0.0:
resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.3.0.tgz#9304f906e93faae70880da102a9f1df0ea8bb05a"
integrity sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==
+media-query-parser@^2.0.2:
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/media-query-parser/-/media-query-parser-2.0.2.tgz#ff79e56cee92615a304a1c2fa4f2bd056c0a1d29"
+ integrity sha512-1N4qp+jE0pL5Xv4uEcwVUhIkwdUO3S/9gML90nqKA7v7FcOS5vUtatfzok9S9U1EJU8dHWlcv95WLnKmmxZI9w==
+ dependencies:
+ "@babel/runtime" "^7.12.5"
+
meow@^6.0.0:
version "6.1.1"
resolved "https://registry.yarnpkg.com/meow/-/meow-6.1.1.tgz#1ad64c4b76b2a24dfb2f635fddcadf320d251467"
@@ -3674,6 +3741,11 @@ mkdirp@^0.5.1:
dependencies:
minimist "^1.2.6"
+modern-ahocorasick@^1.0.0:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/modern-ahocorasick/-/modern-ahocorasick-1.0.1.tgz#dec373444f51b5458ac05216a8ec376e126dd283"
+ integrity sha512-yoe+JbhTClckZ67b2itRtistFKf8yPYelHLc7e5xAwtNAXxM6wJTUx2C7QeVSJFDzKT7bCIFyBVybPMKvmB9AA==
+
ms@2.1.2:
version "2.1.2"
resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
@@ -3952,6 +4024,11 @@ outdent@^0.5.0:
resolved "https://registry.yarnpkg.com/outdent/-/outdent-0.5.0.tgz#9e10982fdc41492bb473ad13840d22f9655be2ff"
integrity sha512-/jHxFIzoMXdqPzTaCpFzAAWhpkSjZPF4Vsn6jAfNpmbH/ymsmd7Qc6VE9BGn0L6YMj6uwpQLxCECpus4ukKS9Q==
+outdent@^0.8.0:
+ version "0.8.0"
+ resolved "https://registry.yarnpkg.com/outdent/-/outdent-0.8.0.tgz#2ebc3e77bf49912543f1008100ff8e7f44428eb0"
+ integrity sha512-KiOAIsdpUTcAXuykya5fnVVT+/5uS0Q1mrkRHcF89tpieSmY33O/tmc54CqwA+bfhbtEfZUNLHaPUiB9X3jt1A==
+
p-filter@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/p-filter/-/p-filter-2.1.0.tgz#1b1472562ae7a0f742f0f3d3d3718ea66ff9c09c"