chore: prettier & eslint 설정 (#9)

* chore: vscode 저장 시 eslint 자동 적용 추가

* chore: 프로젝트별 lint-staged 설정

* chore: .husky pre-push 파일 추가

* chore: .prettierrc 파일 추가

* style: 전체 코드 스타일 적용

.github/ISSUE_TEMPLATE.md

@@ -1,4 +1,5 @@
 ## 📝 이슈 개요
 
 ## ✅ To-do
+
 - [ ]

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,4 +1,5 @@
 ## #️⃣ 관련 이슈
+
 - #
 
 ## 💡 작업 내용

.husky/pre-commit

@@ -1,2 +1 @@
 pnpm lint-staged
-pnpm build

.husky/pre-push

@@ -0,0 +1 @@
+pnpm build

.prettierrc

@@ -0,0 +1,13 @@
+{
+  "printWidth": 120,
+  "arrowParens": "avoid",
+  "semi": false,
+  "endOfLine": "lf",
+  "useTabs": false,
+  "tabWidth": 2,
+  "quoteProps": "as-needed",
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "proseWrap": "preserve"
+}

.vscode/settings.json

@@ -1,5 +1,8 @@
 {
   "eslint.workingDirectories": [{ "mode": "auto" }],
   "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
   "editor.defaultFormatter": "esbenp.prettier-vscode"
 }

apps/docs/.eslintrc.cjs

@@ -1,4 +1,4 @@
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
-  extends: ["@freemed-kit/eslint-config/storybook.js"],
-};
+  extends: ['@freemed-kit/eslint-config/storybook.js'],
+}

apps/docs/.storybook/main.ts

@@ -0,0 +1,38 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+import { dirname, join, resolve } from 'path'
+
+function getAbsolutePath(value: string) {
+  return dirname(require.resolve(join(value, 'package.json')))
+}
+
+const config: StorybookConfig = {
+  stories: ['../stories/*.stories.tsx', '../stories/**/*.stories.tsx'],
+  addons: [getAbsolutePath('@storybook/addon-links'), getAbsolutePath('@storybook/addon-essentials')],
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite'),
+    options: {},
+  },
+
+  core: {},
+
+  async viteFinal(config, { configType }) {
+    // customize the Vite config here
+    return {
+      ...config,
+      define: { 'process.env': {} },
+      resolve: {
+        alias: [
+          {
+            find: 'ui',
+            replacement: resolve(__dirname, '../../../packages/ui/'),
+          },
+        ],
+      },
+    }
+  },
+  docs: {
+    autodocs: true,
+  },
+}
+
+export default config

apps/docs/.storybook/preview.ts

@@ -1 +1 @@
-import "@freemed-kit/ui/dist/index.css";
+import '@freemed-kit/ui/dist/index.css'

apps/docs/package.json

@@ -33,5 +33,11 @@
     "typescript": "^5.3.3",
     "vite": "^5.1.4",
     "vite-tsconfig-paths": "^5.0.1"
+  },
+  "lint-staged": {
+    "stories/*.stories.tsx": [
+      "prettier --write",
+      "eslint --fix --max-warnings=0"
+    ]
   }
 }

apps/docs/stories/button.stories.tsx

@@ -1,72 +1,65 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Button } from "@freemed-kit/ui";
+import type { Meta, StoryObj } from '@storybook/react'
+import { Button } from '@freemed-kit/ui'
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof Button> = {
-  title: "Example/Button",
+  title: 'Example/Button',
   component: Button,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {
-    children: { control: "text", defaultValue: "Button" },
+    children: { control: 'text', defaultValue: 'Button' },
     variant: {
-      control: "select",
-      options: [
-        "primary",
-        "destructive",
-        "outline",
-        "secondary",
-        "ghost",
-        "link",
-      ],
+      control: 'select',
+      options: ['primary', 'destructive', 'outline', 'secondary', 'ghost', 'link'],
     },
-    size: { control: "radio", options: ["sm", "md", "lg", "icon"] },
-    asChild: { control: "boolean" },
-    onClick: { action: "clicked", type: "function" },
+    size: { control: 'radio', options: ['sm', 'md', 'lg', 'icon'] },
+    asChild: { control: 'boolean' },
+    onClick: { action: 'clicked', type: 'function' },
   },
-};
+}
 
-export default meta;
-type Story = StoryObj<typeof Button>;
+export default meta
+type Story = StoryObj<typeof Button>
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Default: Story = {
   args: {
-    variant: "default",
-    children: "Button",
+    variant: 'default',
+    children: 'Button',
   },
-};
+}
 
 export const Destructive: Story = {
   args: {
-    variant: "destructive",
-    children: "Destructive Button",
+    variant: 'destructive',
+    children: 'Destructive Button',
   },
-};
+}
 
 export const Outline: Story = {
   args: {
-    variant: "outline",
-    children: "Outline Button",
+    variant: 'outline',
+    children: 'Outline Button',
   },
-};
+}
 
 export const Secondary: Story = {
   args: {
-    variant: "secondary",
-    children: "Secondary Button",
+    variant: 'secondary',
+    children: 'Secondary Button',
   },
-};
+}
 
 export const Ghost: Story = {
   args: {
-    variant: "ghost",
-    children: "Ghost Button",
+    variant: 'ghost',
+    children: 'Ghost Button',
   },
-};
+}
 
 export const Link: Story = {
   args: {
-    variant: "link",
-    children: "Link Button",
+    variant: 'link',
+    children: 'Link Button',
   },
-};
+}

apps/docs/vite.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import tsconfigPaths from "vite-tsconfig-paths";
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tsconfigPaths from 'vite-tsconfig-paths'
 
 export default defineConfig({
   plugins: [react(), tsconfigPaths()],
-});
+})

package.json

@@ -25,15 +25,5 @@
   "engines": {
     "node": ">=20",
     "pnpm": ">=9"
-  },
-  "workspaces": [
-    "apps/*",
-    "packages/*"
-  ],
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx}": [
-      "prettier --write",
-      "eslint --fix --max-warnings=0"
-    ]
   }
 }

packages/eslint-config/library.js

@@ -1,6 +1,6 @@
-const { resolve } = require("node:path");
+const { resolve } = require('node:path')
 
-const project = resolve(process.cwd(), "tsconfig.json");
+const project = resolve(process.cwd(), 'tsconfig.json')
 
 /*
  * This is a custom ESLint configuration for use with
@@ -12,24 +12,21 @@ const project = resolve(process.cwd(), "tsconfig.json");
  */
 
 module.exports = {
-  extends: [
-    "@vercel/style-guide/eslint/node",
-    "@vercel/style-guide/eslint/typescript",
-  ].map(require.resolve),
+  extends: ['@vercel/style-guide/eslint/node', '@vercel/style-guide/eslint/typescript'].map(require.resolve),
   parserOptions: {
     project,
   },
-  plugins: ["only-warn"],
+  plugins: ['only-warn'],
   globals: {
     React: true,
     JSX: true,
   },
   settings: {
-    "import/resolver": {
+    'import/resolver': {
       typescript: {
         project,
       },
     },
   },
-  ignorePatterns: ["node_modules/", "dist/"],
-};
+  ignorePatterns: ['node_modules/', 'dist/'],
+}

packages/eslint-config/react.js

@@ -1,6 +1,6 @@
-const { resolve } = require("node:path");
+const { resolve } = require('node:path')
 
-const project = resolve(process.cwd(), "tsconfig.json");
+const project = resolve(process.cwd(), 'tsconfig.json')
 
 /*
  * This is a custom ESLint configuration for use a library
@@ -13,27 +13,26 @@ const project = resolve(process.cwd(), "tsconfig.json");
 
 module.exports = {
   extends: [
-    "@vercel/style-guide/eslint/browser",
-    "@vercel/style-guide/eslint/typescript",
-    "@vercel/style-guide/eslint/react",
+    '@vercel/style-guide/eslint/browser',
+    '@vercel/style-guide/eslint/typescript',
+    '@vercel/style-guide/eslint/react',
   ].map(require.resolve),
   parserOptions: {
     project,
   },
-  plugins: ["only-warn"],
+  plugins: ['only-warn'],
   globals: {
     JSX: true,
   },
   settings: {
-    "import/resolver": {
+    'import/resolver': {
       typescript: {
         project,
       },
     },
   },
-  ignorePatterns: ["node_modules/", "dist/", ".eslintrc.js", "**/*.css"],
-  // add rules configurations here
+  ignorePatterns: ['node_modules/', 'dist/', '.eslintrc.js', '**/*.css'],
   rules: {
-    "import/no-default-export": "off",
+    'import/no-default-export': 'off',
   },
-};
+}