feat : style package로 분리

.eslintignore

@@ -1 +1,6 @@
-.eslintrc.cjs
+jest.config.js
+jest.setup.js
+commitlint.config.js
+.eslintrc.js
+.eslintrc.cjs
+next.config.mjs

apps/wiki/app/(docs)/[classify]/style.css.ts

@@ -1,4 +1,4 @@
-import { flex, font, theme, screen } from "@/styles";
+import { flex, font, theme, screen } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({

apps/wiki/app/(docs)/docs/[title]/style.css.ts

@@ -1,4 +1,4 @@
-import { flex, font, theme, screen } from "@/styles";
+import { flex, font, theme, screen } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({

apps/wiki/app/(user)/style.css.ts

@@ -1,4 +1,4 @@
-import { flex, font, theme } from "@/styles";
+import { flex, font, theme } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const contributeBox = style({

apps/wiki/app/coin/TradeHistory.css.ts

@@ -1,4 +1,4 @@
-import { flex, font, theme, screen } from "@/styles";
+import { flex, font, theme, screen } from "@buma/style";
 import { StyleVariantsType } from "@/types";
 import { style, styleVariants } from "@vanilla-extract/css";
 

apps/wiki/app/coin/rank/style.css.ts

@@ -1,4 +1,4 @@
-import { flex, font, theme } from "@/styles";
+import { flex, font, theme } from "@buma/style";
 import { StyleVariantsType } from "@/types";
 import { style, styleVariants } from "@vanilla-extract/css";
 

apps/wiki/app/coin/style.css.ts

@@ -1,4 +1,4 @@
-import { flex, font, theme, screen } from "@/styles";
+import { flex, font, theme, screen } from "@buma/style";
 import { StyleVariantsType } from "@/types";
 import { style, styleVariants } from "@vanilla-extract/css";
 

apps/wiki/app/history/[title]/detail/[id]/style.css.ts

@@ -1,4 +1,4 @@
-import { flex, font, theme } from "@/styles";
+import { flex, font, theme } from "@buma/style";
 import { StyleVariantsType } from "@/types";
 import { style, styleVariants } from "@vanilla-extract/css";
 

apps/wiki/app/history/[title]/style.css.ts

@@ -1,4 +1,4 @@
-import { flex, font, theme } from "@/styles";
+import { flex, font, theme } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const historyBox = style({

apps/wiki/app/layout.css.ts

@@ -1,4 +1,4 @@
-import { theme, flex, screen } from "@/styles";
+import { theme, flex, screen } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({

apps/wiki/app/oauth/OAuth.tsx

@@ -3,7 +3,7 @@
 import { useSearchParams } from "next/navigation";
 import { useEffect } from "react";
 import { MoonLoader } from "react-spinners";
-import { theme } from "@/styles";
+import { theme } from "@buma/style";
 import { useLoginMutation } from "@/services/auth/auth.mutation";
 import * as styles from "./style.css";
 

apps/wiki/app/oauth/style.css.ts

@@ -1,4 +1,4 @@
-import { flex, font, theme } from "@/styles";
+import { flex, font, theme } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({

apps/wiki/app/page.css.ts

@@ -1,4 +1,4 @@
-import { theme, font, flex, screen } from "@/styles";
+import { theme, font, flex, screen } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({

apps/wiki/app/search/[keyword]/SearchResult.tsx

@@ -8,7 +8,7 @@ import Container from "@/components/Container";
 import { useQuery } from "@tanstack/react-query";
 import { docsQuery } from "@/services/docs/docs.query";
 import { useRouter } from "next/navigation";
-import { theme } from "@/styles";
+import { theme } from "@buma/style";
 import { useDate } from "@/hooks";
 import { MoonLoader } from "react-spinners";
 import * as styles from "./style.css";

apps/wiki/app/search/[keyword]/style.css.ts

@@ -1,4 +1,4 @@
-import { flex, font, theme, screen } from "@/styles";
+import { flex, font, theme, screen } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({

apps/wiki/components/(modal)/style.css.ts

@@ -1,4 +1,4 @@
-import { flex, font, theme } from "@/styles";
+import { flex, font, theme } from "@buma/style";
 import { StyleVariantsType } from "@/types";
 import { style, styleVariants } from "@vanilla-extract/css";
 

apps/wiki/components/Accordion/index.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from "react";
-import * as styles from "@/styles/document.css";
+import * as styles from "@/utils/document.css";
 import { content } from "./style.css";
 
 interface Props extends PropsWithChildren {

apps/wiki/components/Accordion/style.css.ts

@@ -1,4 +1,4 @@
-import { flex } from "@/styles";
+import { flex } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const content = style({

apps/wiki/components/Aside/Aside.tsx

@@ -7,7 +7,7 @@ import { DocsListItemType } from "@/types";
 import Link from "next/link";
 import { ArrowIcon } from "@buma/icon";
 import { useDate } from "@/hooks";
-import { theme } from "@/styles";
+import { theme } from "@buma/style";
 import * as styles from "./style.css";
 
 const Aside = () => {

apps/wiki/components/Aside/style.css.ts

@@ -1,5 +1,5 @@
 import { style } from "@vanilla-extract/css";
-import { flex, font, theme, screen } from "@/styles";
+import { flex, font, theme, screen } from "@buma/style";
 
 export const container = style({
   width: "300px",

apps/wiki/components/Board/style.css.ts

@@ -1,4 +1,4 @@
-import { theme, flex, font, screen } from "@/styles";
+import { theme, flex, font, screen } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({

apps/wiki/components/Container/style.css.ts

@@ -1,4 +1,4 @@
-import { theme, font, flex, screen } from "@/styles";
+import { theme, font, flex, screen } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({

apps/wiki/components/Editor/DocsExample.css.ts

@@ -1,4 +1,4 @@
-import { flex, font, theme, screen } from "@/styles";
+import { flex, font, theme, screen } from "@buma/style";
 import { StyleVariantsType } from "@/types";
 import { style, styleVariants } from "@vanilla-extract/css";
 

apps/wiki/components/Editor/DocsExample.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { toast } from "react-toastify";
 import { ArrowIcon } from "@buma/icon";
-import { theme } from "@/styles";
+import { theme } from "@buma/style";
 import { documentCompiler } from "@/utils";
 import Toastify from "../Toastify";
 import * as styles from "./DocsExample.css";

apps/wiki/components/Editor/style.css.ts

@@ -1,4 +1,4 @@
-import { flex, font, theme, screen } from "@/styles";
+import { flex, font, theme, screen } from "@buma/style";
 import { StyleVariantsType } from "@/types";
 import { style, styleVariants } from "@vanilla-extract/css";
 

apps/wiki/components/Footer/style.css.ts

@@ -1,4 +1,4 @@
-import { font, flex, theme, screen } from "@/styles";
+import { font, flex, theme, screen } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({

apps/wiki/components/FrameEditor/style.css.ts

@@ -1,4 +1,4 @@
-import { flex, font, theme, screen } from "@/styles";
+import { flex, font, theme, screen } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({

apps/wiki/components/Header/style.css.ts

@@ -1,4 +1,4 @@
-import { theme, flex, font, screen } from "@/styles";
+import { theme, flex, font, screen } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({

apps/wiki/components/Popular/style.css.ts

@@ -1,5 +1,5 @@
 import { style, styleVariants } from "@vanilla-extract/css";
-import { flex, font, theme, screen } from "@/styles";
+import { flex, font, theme, screen } from "@buma/style";
 import { StyleVariantsType } from "@/types";
 import { popularAnimation } from "./keyframes.css";
 

apps/wiki/components/ScrollButton/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ArrowIcon } from "@buma/icon";
-import { theme } from "@/styles";
+import { theme } from "@buma/style";
 import * as styles from "./style.css";
 
 const ScrollButton = () => {

apps/wiki/components/ScrollButton/style.css.ts

@@ -1,5 +1,5 @@
 import { style } from "@vanilla-extract/css";
-import { flex, theme } from "@/styles";
+import { flex, theme } from "@buma/style";
 
 export const container = style({
   position: "fixed",

apps/wiki/components/Toastify/style.css.ts

@@ -1,4 +1,4 @@
-import { flex, font, screen, theme } from "@/styles";
+import { flex, font, screen, theme } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({

apps/wiki/next.config.mjs

@@ -6,7 +6,7 @@ const withVanillaExtract = createVanillaExtractPlugin({
 
 /** @type {import('next').NextConfig} */
 const nextConfig = withVanillaExtract({
-  transpilePackages: ["@buma/icon"],
+  transpilePackages: ["@buma/icon", "@buma/style"],
   swcMinify: true,
   images: {
     domains: [

apps/wiki/package.json

@@ -10,6 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@buma/style": "workspace:*",
     "@buma/icon": "workspace:*",
     "@next/third-parties": "^14.1.4",
     "@tanstack/react-query": "^5.24.6",

apps/wiki/styles/document.css.ts → apps/wiki/utils/document.css.ts

@@ -1,5 +1,5 @@
 import { keyframes, style } from "@vanilla-extract/css";
-import { theme, font, flex, screen } from ".";
+import { theme, font, flex, screen } from "@buma/style";
 
 export const details = style({
   width: "100%",

apps/wiki/utils/documentCompiler.ts

@@ -1,5 +1,5 @@
-import { theme } from "@/styles";
-import * as styles from "@/styles/document.css";
+import { theme } from "@buma/style";
+import * as styles from "@/utils/document.css";
 
 const deleteNotAllowedTag = (contents: string) => {
   return contents

configs/eslint-config/react.js

@@ -3,12 +3,12 @@ module.exports = {
   root: true,
   parser: "@typescript-eslint/parser",
   plugins: ["@typescript-eslint", "prettier"],
-  parserOptions: {
-    project: ["tsconfig.json"],
-  },
   env: {
     node: true,
   },
+  parserOptions: {
+    project: ["tsconfig.json"],
+  },
   extends: [
     "eslint:recommended",
     "next/core-web-vitals",

package.json

@@ -10,14 +10,16 @@
     "build": "dotenv -- turbo build",
     "dev": "dotenv -- turbo dev",
     "lint": "dotenv -- turbo lint",
-    "format": "prettier --write \"**/*.{ts,tsx,md}\""
+    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
+    "postinstall": "husky install"
   },
   "devDependencies": {
     "@buma/eslint-config": "workspace:*",
     "@buma/typescript-config": "workspace:*",
     "prettier": "^3.2.5",
     "turbo": "latest",
-    "dotenv-cli": "latest"
+    "dotenv-cli": "latest",
+    "husky": "^9.0.11"
   },
   "packageManager": "[email protected]",
   "engines": {

packages/icon/package.json

@@ -17,5 +17,8 @@
     "eslint": "^8.57.0",
     "react": "^18.2.0",
     "typescript": "^5.3.3"
+  },
+  "dependencies": {
+    "next": "^14.1.4"
   }
 }

packages/style/.eslintrc.cjs

@@ -0,0 +1,5 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["@buma/eslint-config/react-ts"],
+};

packages/style/index.ts

@@ -0,0 +1,4 @@
+export { default as flex } from "./src/flex";
+export { default as font } from "./src/font";
+export { default as theme } from "./src/theme";
+export { default as screen } from "./src/screen";

packages/style/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@buma/style",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "lint": "eslint \"**/*.ts*\"",
+    "generate:component": "turbo gen react-component"
+  },
+  "devDependencies": {
+    "@buma/eslint-config": "workspace:*",
+    "@buma/typescript-config": "workspace:*",
+    "@turbo/gen": "^1.12.4",
+    "@types/node": "^20.11.24",
+    "@types/eslint": "^8.56.5",
+    "@types/react": "^18.2.61",
+    "@types/react-dom": "^18.2.19",
+    "eslint": "^8.57.0",
+    "react": "^18.2.0",
+    "typescript": "^5.3.3"
+  },
+  "dependencies": {
+    "@vanilla-extract/css": "^1.14.1",
+    "@vanilla-extract/next-plugin": "^2.3.6"
+  }
+}

packages/style/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "@buma/typescript-config/react-library.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}