tweak for vite project structure

fsubal · Oct 15, 2023 · 2a1a1ef · 2a1a1ef
1 parent fb9e8cd
commit 2a1a1ef
Show file tree

Hide file tree

Showing 14 changed files with 133 additions and 26 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/第6章_Tailwind_CSSでコンポーネントを設計する/components.json b/src/第6章_Tailwind_CSSでコンポーネントを設計する/components.json
@@ -10,7 +10,7 @@
     "cssVariables": true
   },
   "aliases": {
-    "components": "src/@/components",
-    "utils": "src/@/lib/utils"
+    "components": "./src/components",
+    "utils": "./src/lib/utils"
   }
 }
diff --git a/src/第6章_Tailwind_CSSでコンポーネントを設計する/index.html b/src/第6章_Tailwind_CSSでコンポーネントを設計する/index.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/src/第6章_Tailwind_CSSでコンポーネントを設計する/package.json b/src/第6章_Tailwind_CSSでコンポーネントを設計する/package.json
@@ -21,6 +21,7 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
+    "@types/node": "^20.8.6",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.0.3",

diff --git a/src/第6章_Tailwind_CSSでコンポーネントを設計する/src/App.jsx b/src/第6章_Tailwind_CSSでコンポーネントを設計する/src/App.jsx
diff --git a/src/第6章_Tailwind_CSSでコンポーネントを設計する/src/App.tsx b/src/第6章_Tailwind_CSSでコンポーネントを設計する/src/App.tsx
@@ -0,0 +1,12 @@
+import { Card } from "./components/ui/card";
+
+function App() {
+  return (
+    <div>
+      <h1 className="text-2xl font-bold">Hello world!</h1>
+      <Card />
+    </div>
+  );
+}
+
+export default App;
diff --git a/src/第6章_Tailwind_CSSでコンポーネントを設計する/src/components/ui/card.tsx b/src/第6章_Tailwind_CSSでコンポーネントを設計する/src/components/ui/card.tsx
@@ -0,0 +1,86 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className,
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};
diff --git a/...lwind_CSSでコンポーネントを設計する/src/@/lib/utils.ts → ...ailwind_CSSでコンポーネントを設計する/src/lib/utils.ts b/...lwind_CSSでコンポーネントを設計する/src/@/lib/utils.ts → ...ailwind_CSSでコンポーネントを設計する/src/lib/utils.ts
diff --git a/src/第6章_Tailwind_CSSでコンポーネントを設計する/src/main.jsx b/src/第6章_Tailwind_CSSでコンポーネントを設計する/src/main.jsx
diff --git a/src/第6章_Tailwind_CSSでコンポーネントを設計する/src/main.tsx b/src/第6章_Tailwind_CSSでコンポーネントを設計する/src/main.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/src/第6章_Tailwind_CSSでコンポーネントを設計する/tsconfig.json b/src/第6章_Tailwind_CSSでコンポーネントを設計する/tsconfig.json
@@ -6,6 +6,12 @@
     "module": "ESNext",
     "skipLibCheck": true,
 
+    /* For shadcn-ui */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,

diff --git a/src/第6章_Tailwind_CSSでコンポーネントを設計する/tsconfig.node.json b/src/第6章_Tailwind_CSSでコンポーネントを設計する/tsconfig.node.json
@@ -6,5 +6,5 @@
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.js"]
+  "include": ["vite.config.ts"]
 }
diff --git a/src/第6章_Tailwind_CSSでコンポーネントを設計する/vite.config.js b/src/第6章_Tailwind_CSSでコンポーネントを設計する/vite.config.js
diff --git a/src/第6章_Tailwind_CSSでコンポーネントを設計する/vite.config.ts b/src/第6章_Tailwind_CSSでコンポーネントを設計する/vite.config.ts
@@ -0,0 +1,13 @@
+import path from "path";
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});