chore: 프로젝트 초기 세팅 (#2)

* chore: .nvmrc 파일 추가

* chore: package.json engines, workspaces 필드 추가

* chore: apps & packages name 변경

* chore: .vscode settings 설정 추가

* chore(ui): tailwindcss dependency 추가 및 설정

* chore(ui): shadcn/ui dependency 추가 및 설정

* chore(ui): shadcn/ui 추가 설정 & package.json script 수정

* feat(ui): Button 컴포넌트 추가

* chore(docs): storybook dependency 추가 및 설정

* chore: package.json ui:add 스크립트 추가

* chore: husky & lint-staged 설정

.husky/pre-commit

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

.nvmrc

@@ -0,0 +1 @@
+v20.13.1

.vscode/settings.json

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

apps/docs/.eslintrc.cjs

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

apps/docs/.storybook/preview.ts

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

apps/docs/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "docs",
+  "name": "@freemed-kit/docs",
   "version": "0.0.0",
   "type": "module",
   "private": true,
@@ -11,23 +11,27 @@
     "lint": "eslint ./stories/*.stories.tsx --max-warnings 0"
   },
   "dependencies": {
-    "@acme/ui": "workspace:*",
+    "@freemed-kit/ui": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@repo/eslint-config": "workspace:*",
+    "@freemed-kit/eslint-config": "workspace:*",
+    "@freemed-kit/typescript-config": "workspace:*",
     "@storybook/addon-actions": "^8.2.6",
     "@storybook/addon-essentials": "^8.2.6",
     "@storybook/addon-links": "^8.2.6",
     "@storybook/react": "^8.2.6",
     "@storybook/react-vite": "^8.2.6",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^4.3.2",
+    "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
+    "postcss": "^8.4.47",
     "serve": "^14.2.1",
     "storybook": "^8.2.6",
-    "@repo/typescript-config": "workspace:*",
+    "tailwindcss": "^3.4.14",
     "typescript": "^5.3.3",
-    "vite": "^5.1.4"
+    "vite": "^5.1.4",
+    "vite-tsconfig-paths": "^5.0.1"
   }
 }

apps/docs/stories/button.stories.tsx

@@ -1,46 +1,72 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Button } from "@acme/ui/button";
+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",
   component: Button,
+  tags: ["autodocs"],
   argTypes: {
-    type: {
-      control: { type: "radio" },
-      options: ["button", "submit", "reset"],
+    children: { control: "text", defaultValue: "Button" },
+    variant: {
+      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" },
   },
 };
 
 export default meta;
-
 type Story = StoryObj<typeof Button>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/react/api/csf
- * to learn how to use render functions.
- */
-export const Primary: Story = {
-  render: (props) => (
-    <Button
-      {...props}
-      onClick={(): void => {
-        // eslint-disable-next-line no-alert -- alert for demo
-        alert("Hello from Turborepo!");
-      }}
-    >
-      Hello
-    </Button>
-  ),
-  name: "Button",
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default: Story = {
   args: {
-    children: "Hello",
-    type: "button",
-    style: {
-      color: "blue",
-      border: "1px solid gray",
-      padding: 10,
-      borderRadius: 10,
-    },
+    variant: "default",
+    children: "Button",
+  },
+};
+
+export const Destructive: Story = {
+  args: {
+    variant: "destructive",
+    children: "Destructive Button",
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    variant: "outline",
+    children: "Outline Button",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: "secondary",
+    children: "Secondary Button",
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    variant: "ghost",
+    children: "Ghost Button",
+  },
+};
+
+export const Link: Story = {
+  args: {
+    variant: "link",
+    children: "Link Button",
   },
 };

apps/docs/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@repo/typescript-config/react-app.json",
+  "extends": "@freemed-kit/typescript-config/react-app.json",
   "include": ["."],
   "exclude": ["dist", "build", "node_modules"]
 }

apps/docs/vite.config.ts

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

package.json

@@ -1,4 +1,5 @@
 {
+  "name": "freemed-kit",
   "private": true,
   "scripts": {
     "build": "turbo run build",
@@ -8,13 +9,31 @@
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "changeset": "changeset",
     "version-packages": "changeset version",
-    "release": "turbo run build --filter=docs^... && changeset publish"
+    "release": "turbo run build --filter=docs^... && changeset publish",
+    "ui:add": "pnpm --filter ui ui:add",
+    "prepare": "husky",
+    "lint-staged": "lint-staged"
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
+    "husky": "^9.1.6",
+    "lint-staged": "^15.2.10",
     "prettier": "^3.2.5",
     "turbo": "^2.1.3"
   },
-  "packageManager": "[email protected]",
-  "name": "design-system"
+  "packageManager": "[email protected]",
+  "engines": {
+    "node": ">=20",
+    "pnpm": ">=9"
+  },
+  "workspaces": [
+    "apps/*",
+    "packages/*"
+  ],
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "prettier --write",
+      "eslint --fix --max-warnings=0"
+    ]
+  }
 }

packages/eslint-config/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@repo/eslint-config",
+  "name": "@freemed-kit/eslint-config",
   "version": "0.0.0",
   "private": true,
   "files": [

packages/typescript-config/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@repo/typescript-config",
+  "name": "@freemed-kit/typescript-config",
   "version": "0.0.0",
   "private": true,
   "license": "MIT",

packages/ui/.eslintrc.js

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

packages/ui/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "styles/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": "tw-"
+  },
+  "rsc": false,
+  "tsx": true,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

packages/ui/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "tw-inline-flex tw-items-center tw-justify-center tw-gap-2 tw-whitespace-nowrap tw-rounded-md tw-text-sm tw-font-medium tw-ring-offset-background tw-transition-colors focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-ring focus-visible:tw-ring-offset-2 disabled:tw-pointer-events-none disabled:tw-opacity-50 [&_svg]:tw-pointer-events-none [&_svg]:tw-size-4 [&_svg]:tw-shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "tw-bg-primary tw-text-primary-foreground hover:tw-bg-primary/90",
+        destructive:
+          "tw-bg-destructive tw-text-destructive-foreground hover:tw-bg-destructive/90",
+        outline:
+          "tw-border tw-border-input tw-bg-background hover:tw-bg-accent hover:tw-text-accent-foreground",
+        secondary:
+          "tw-bg-secondary tw-text-secondary-foreground hover:tw-bg-secondary/80",
+        ghost: "hover:tw-bg-accent hover:tw-text-accent-foreground",
+        link: "tw-text-primary tw-underline-offset-4 hover:tw-underline",
+      },
+      size: {
+        default: "tw-h-10 tw-px-4 tw-py-2",
+        sm: "tw-h-9 tw-rounded-md tw-px-3",
+        lg: "tw-h-11 tw-rounded-md tw-px-8",
+        icon: "tw-h-10 tw-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

packages/ui/index.tsx

@@ -0,0 +1,3 @@
+import "./styles/globals.css";
+
+export { Button } from "./components/ui/button";

packages/ui/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

packages/ui/package.json

@@ -1,32 +1,42 @@
 {
-  "name": "@acme/ui",
+  "name": "@freemed-kit/ui",
   "version": "0.0.0",
   "sideEffects": false,
   "license": "MIT",
-  "exports": {
-    "./button": {
-      "types": "./src/button.tsx",
-      "import": "./dist/button.mjs",
-      "require": "./dist/button.js"
-    }
-  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
+    "build": "tsup index.tsx --format esm,cjs --dts --external react",
+    "dev": "tsup index.tsx --format esm,cjs --watch --dts --external react",
     "lint": "eslint . --max-warnings 0",
-    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "ui:add": "pnpm dlx shadcn@latest add"
   },
   "devDependencies": {
-    "@repo/eslint-config": "workspace:*",
+    "@freemed-kit/eslint-config": "workspace:*",
+    "@freemed-kit/typescript-config": "workspace:*",
     "@types/react": "^18.2.61",
     "@types/react-dom": "^18.2.19",
+    "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
-    "@repo/typescript-config": "workspace:*",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.14",
     "tsup": "^8.0.2",
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "react": "^18.2.0"
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.453.0",
+    "react": "^18.2.0",
+    "tailwind-merge": "^2.5.4",
+    "tailwindcss-animate": "^1.0.7"
   },
   "publishConfig": {
     "access": "public"

packages/ui/postcss.config.ts

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};