create-einja-app 0.2.17 → 0.2.19

package/templates/default/apps/web/src/app/signup/page.tsx

@@ -1,14 +1,12 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
+import { Button } from "{{packageName}}/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "{{packageName}}/ui/card";
+import { Input } from "{{packageName}}/ui/input";
+import { Label } from "{{packageName}}/ui/label";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { css } from "../../../styled-system/css";
-import { center, vstack } from "../../../styled-system/patterns";
 
 export default function SignUpPage() {
   const [name, setName] = useState("");
@@ -74,100 +72,28 @@ export default function SignUpPage() {
   };
 
   return (
-    <div
-      className={css({
-        minHeight: "100vh",
-        background: "linear-gradient(135deg, {colors.green.50} 0%, {colors.blue.50} 100%)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: "2rem 1rem",
-      })}
-    >
-      <div
-        className={css({
-          width: "100%",
-          maxWidth: "md",
-          display: "flex",
-          flexDirection: "column",
-          gap: "2rem",
-        })}
-      >
+    <div className="min-h-screen bg-gradient-to-br from-green-50 to-blue-50 flex items-center justify-center px-4 py-8">
+      <div className="w-full max-w-md flex flex-col gap-8">
         {/* ロゴ・ヘッダー部分 */}
-        <div className={center({ flexDirection: "column", gap: "1rem" })}>
-          <div
-            className={css({
-              width: "4rem",
-              height: "4rem",
-              background: "linear-gradient(135deg, {colors.green.600}, {colors.blue.600})",
-              borderRadius: "50%",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              boxShadow: "lg",
-            })}
-          >
-            <span
-              className={css({
-                fontSize: "1.5rem",
-                fontWeight: "bold",
-                color: "white",
-              })}
-            >
-              E
-            </span>
+        <div className="flex flex-col items-center justify-center gap-4">
+          <div className="w-16 h-16 bg-gradient-to-br from-green-600 to-blue-600 rounded-full flex items-center justify-center shadow-lg">
+            <span className="text-2xl font-bold text-white">E</span>
           </div>
-          <h1
-            className={css({
-              fontSize: "2xl",
-              fontWeight: "bold",
-              color: "{colors.gray.800}",
-              textAlign: "center",
-            })}
-          >
-            Einja Management
-          </h1>
+          <h1 className="text-2xl font-bold text-gray-800 text-center">Einja Management</h1>
         </div>
 
         {/* サインアップカード */}
-        <Card
-          className={css({
-            boxShadow: "2xl",
-            border: "none",
-            background: "white/90",
-            backdropFilter: "blur(10px)",
-          })}
-        >
-          <CardHeader className={vstack({ gap: "0.5rem", alignItems: "center" })}>
-            <CardTitle
-              className={css({
-                fontSize: "1.5rem",
-                fontWeight: "semibold",
-                color: "{colors.gray.800}",
-              })}
-            >
-              アカウント作成
-            </CardTitle>
-            <CardDescription
-              className={css({
-                color: "{colors.gray.600}",
-                textAlign: "center",
-              })}
-            >
+        <Card className="shadow-2xl border-none bg-white/90 backdrop-blur">
+          <CardHeader className="flex flex-col gap-2 items-center">
+            <CardTitle className="text-2xl font-semibold text-gray-800">アカウント作成</CardTitle>
+            <CardDescription className="text-gray-600 text-center">
               新しいアカウントを作成してください
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <form onSubmit={handleSubmit} className={vstack({ gap: "1.5rem" })}>
-              <div className={vstack({ gap: "0.5rem", width: "100%" })}>
-                <Label
-                  htmlFor="name"
-                  className={css({
-                    fontSize: "sm",
-                    fontWeight: "medium",
-                    color: "{colors.gray.700}",
-                  })}
-                >
+            <form onSubmit={handleSubmit} className="flex flex-col gap-6">
+              <div className="flex flex-col gap-2 w-full">
+                <Label htmlFor="name" className="text-sm font-medium text-gray-700">
                   お名前
                 </Label>
                 <Input
@@ -178,30 +104,11 @@ export default function SignUpPage() {
                   onChange={(e) => setName(e.target.value)}
                   required
                   disabled={isLoading}
-                  className={css({
-                    height: "2.75rem",
-                    fontSize: "sm",
-                    border: "2px solid {colors.gray.200}",
-                    _focus: {
-                      borderColor: "{colors.green.500}",
-                      boxShadow: "0 0 0 3px {colors.green.100}",
-                    },
-                    _disabled: {
-                      opacity: 0.6,
-                      cursor: "not-allowed",
-                    },
-                  })}
+                  className="h-11 text-sm border-2 border-gray-200 focus:border-green-500 focus:ring-3 focus:ring-green-100 disabled:opacity-60 disabled:cursor-not-allowed"
                 />
               </div>
-              <div className={vstack({ gap: "0.5rem", width: "100%" })}>
-                <Label
-                  htmlFor="email"
-                  className={css({
-                    fontSize: "sm",
-                    fontWeight: "medium",
-                    color: "{colors.gray.700}",
-                  })}
-                >
+              <div className="flex flex-col gap-2 w-full">
+                <Label htmlFor="email" className="text-sm font-medium text-gray-700">
                   メールアドレス
                 </Label>
                 <Input
@@ -212,30 +119,11 @@ export default function SignUpPage() {
                   onChange={(e) => setEmail(e.target.value)}
                   required
                   disabled={isLoading}
-                  className={css({
-                    height: "2.75rem",
-                    fontSize: "sm",
-                    border: "2px solid {colors.gray.200}",
-                    _focus: {
-                      borderColor: "{colors.green.500}",
-                      boxShadow: "0 0 0 3px {colors.green.100}",
-                    },
-                    _disabled: {
-                      opacity: 0.6,
-                      cursor: "not-allowed",
-                    },
-                  })}
+                  className="h-11 text-sm border-2 border-gray-200 focus:border-green-500 focus:ring-3 focus:ring-green-100 disabled:opacity-60 disabled:cursor-not-allowed"
                 />
               </div>
-              <div className={vstack({ gap: "0.5rem", width: "100%" })}>
-                <Label
-                  htmlFor="password"
-                  className={css({
-                    fontSize: "sm",
-                    fontWeight: "medium",
-                    color: "{colors.gray.700}",
-                  })}
-                >
+              <div className="flex flex-col gap-2 w-full">
+                <Label htmlFor="password" className="text-sm font-medium text-gray-700">
                   パスワード
                 </Label>
                 <Input
@@ -246,30 +134,11 @@ export default function SignUpPage() {
                   onChange={(e) => setPassword(e.target.value)}
                   required
                   disabled={isLoading}
-                  className={css({
-                    height: "2.75rem",
-                    fontSize: "sm",
-                    border: "2px solid {colors.gray.200}",
-                    _focus: {
-                      borderColor: "{colors.green.500}",
-                      boxShadow: "0 0 0 3px {colors.green.100}",
-                    },
-                    _disabled: {
-                      opacity: 0.6,
-                      cursor: "not-allowed",
-                    },
-                  })}
+                  className="h-11 text-sm border-2 border-gray-200 focus:border-green-500 focus:ring-3 focus:ring-green-100 disabled:opacity-60 disabled:cursor-not-allowed"
                 />
               </div>
-              <div className={vstack({ gap: "0.5rem", width: "100%" })}>
-                <Label
-                  htmlFor="confirmPassword"
-                  className={css({
-                    fontSize: "sm",
-                    fontWeight: "medium",
-                    color: "{colors.gray.700}",
-                  })}
-                >
+              <div className="flex flex-col gap-2 w-full">
+                <Label htmlFor="confirmPassword" className="text-sm font-medium text-gray-700">
                   パスワード（確認）
                 </Label>
                 <Input
@@ -280,109 +149,33 @@ export default function SignUpPage() {
                   onChange={(e) => setConfirmPassword(e.target.value)}
                   required
                   disabled={isLoading}
-                  className={css({
-                    height: "2.75rem",
-                    fontSize: "sm",
-                    border: "2px solid {colors.gray.200}",
-                    _focus: {
-                      borderColor: "{colors.green.500}",
-                      boxShadow: "0 0 0 3px {colors.green.100}",
-                    },
-                    _disabled: {
-                      opacity: 0.6,
-                      cursor: "not-allowed",
-                    },
-                  })}
+                  className="h-11 text-sm border-2 border-gray-200 focus:border-green-500 focus:ring-3 focus:ring-green-100 disabled:opacity-60 disabled:cursor-not-allowed"
                 />
               </div>
               {error && (
-                <div
-                  className={css({
-                    padding: "0.75rem",
-                    background: "{colors.red.50}",
-                    border: "1px solid {colors.red.200}",
-                    borderRadius: "md",
-                    fontSize: "sm",
-                    color: "{colors.red.700}",
-                    textAlign: "center",
-                    width: "100%",
-                  })}
-                >
+                <div className="p-3 bg-red-50 border border-red-200 rounded-md text-sm text-red-700 text-center w-full">
                   {error}
                 </div>
               )}
               {success && (
-                <div
-                  className={css({
-                    padding: "0.75rem",
-                    background: "{colors.green.50}",
-                    border: "1px solid {colors.green.200}",
-                    borderRadius: "md",
-                    fontSize: "sm",
-                    color: "{colors.green.700}",
-                    textAlign: "center",
-                    width: "100%",
-                  })}
-                >
+                <div className="p-3 bg-green-50 border border-green-200 rounded-md text-sm text-green-700 text-center w-full">
                   {success}
                 </div>
               )}
               <Button
                 type="submit"
                 disabled={isLoading}
-                className={css({
-                  width: "100%",
-                  height: "2.75rem",
-                  background: "linear-gradient(135deg, {colors.green.600}, {colors.blue.600})",
-                  border: "none",
-                  borderRadius: "md",
-                  color: "white",
-                  fontSize: "sm",
-                  fontWeight: "medium",
-                  cursor: "pointer",
-                  transition: "all 0.2s",
-                  _hover: {
-                    transform: "translateY(-1px)",
-                    boxShadow: "lg",
-                  },
-                  _active: {
-                    transform: "translateY(0)",
-                  },
-                  _disabled: {
-                    opacity: 0.6,
-                    cursor: "not-allowed",
-                    transform: "none",
-                  },
-                })}
+                className="w-full h-11 bg-gradient-to-br from-green-600 to-blue-600 border-none rounded-md text-white text-sm font-medium cursor-pointer transition-all duration-200 hover:-translate-y-px hover:shadow-lg active:translate-y-0 disabled:opacity-60 disabled:cursor-not-allowed"
               >
                 {isLoading ? "アカウント作成中..." : "アカウント作成"}
               </Button>
             </form>
 
             {/* サインインリンク */}
-            <div
-              className={css({
-                marginTop: "1.5rem",
-                textAlign: "center",
-              })}
-            >
-              <p
-                className={css({
-                  fontSize: "sm",
-                  color: "{colors.gray.600}",
-                })}
-              >
+            <div className="mt-6 text-center">
+              <p className="text-sm text-gray-600">
                 既にアカウントをお持ちですか？{" "}
-                <Link
-                  href="/signin"
-                  className={css({
-                    color: "{colors.blue.600}",
-                    fontWeight: "medium",
-                    _hover: {
-                      textDecoration: "underline",
-                    },
-                  })}
-                >
+                <Link href="/signin" className="text-blue-600 font-medium hover:underline">
                   サインイン
                 </Link>
               </p>

package/templates/default/apps/web/src/components/dashboard/dashboard-stats.tsx

@@ -1,6 +1,3 @@
-import { css } from "../../../styled-system/css";
-import { hstack, vstack } from "../../../styled-system/patterns";
-
 const stats = [
   {
     title: "総プロジェクト数",
@@ -34,90 +31,29 @@ const stats = [
 
 export function DashboardStats() {
   return (
-    <div
-      className={css({
-        display: "grid",
-        gridTemplateColumns: {
-          base: "1fr",
-          sm: "repeat(2, 1fr)",
-          lg: "repeat(4, 1fr)",
-        },
-        gap: "1.5rem",
-      })}
-    >
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
       {stats.map((stat) => (
         <div
           key={stat.title}
-          className={css({
-            background: "white",
-            borderRadius: "lg",
-            padding: { base: "1.25rem", md: "1.5rem", lg: "1.75rem" },
-            boxShadow: "sm",
-            border: "1px solid {colors.gray.200}",
-            transition: "all 0.2s",
-            _hover: {
-              boxShadow: "md",
-              transform: "translateY(-2px)",
-            },
-          })}
+          className="bg-white rounded-lg p-5 md:p-6 lg:p-7 shadow-sm border border-gray-200 transition-all duration-200 hover:shadow-md hover:-translate-y-0.5"
         >
-          <div className={vstack({ gap: "1rem", alignItems: "flex-start" })}>
+          <div className="flex flex-col gap-4 items-start">
             {/* アイコンとタイトル */}
-            <div className={hstack({ gap: "0.75rem", alignItems: "center" })}>
-              <span
-                className={css({
-                  fontSize: "1.5rem",
-                })}
-              >
-                {stat.icon}
-              </span>
-              <h3
-                className={css({
-                  fontSize: "sm",
-                  fontWeight: "medium",
-                  color: "{colors.gray.600}",
-                  lineHeight: "tight",
-                })}
-              >
-                {stat.title}
-              </h3>
+            <div className="flex flex-row items-center gap-3">
+              <span className="text-2xl">{stat.icon}</span>
+              <h3 className="text-sm font-medium text-gray-600 leading-tight">{stat.title}</h3>
             </div>
 
             {/* 値と変化率 */}
-            <div className={vstack({ gap: "0.5rem", alignItems: "flex-start" })}>
-              <p
-                className={css({
-                  fontSize: "2xl",
-                  fontWeight: "bold",
-                  color: "{colors.gray.900}",
-                  lineHeight: "none",
-                })}
-              >
-                {stat.value}
-              </p>
-              <div className={hstack({ gap: "0.25rem", alignItems: "center" })}>
+            <div className="flex flex-col gap-2 items-start">
+              <p className="text-2xl font-bold text-gray-900 leading-none">{stat.value}</p>
+              <div className="flex flex-row items-center gap-1">
                 <span
-                  className={css({
-                    fontSize: "xs",
-                    fontWeight: "medium",
-                    color:
-                      stat.changeType === "increase" ? "{colors.green.600}" : "{colors.red.600}",
-                    background:
-                      stat.changeType === "increase" ? "{colors.green.100}" : "{colors.red.100}",
-                    padding: "0.125rem 0.375rem",
-                    borderRadius: "full",
-                  })}
+                  className={`text-xs font-medium ${stat.changeType === "increase" ? "text-green-600 bg-green-100" : "text-red-600 bg-red-100"} px-1.5 py-0.5 rounded-full`}
                 >
                   {stat.changeType === "increase" ? "↗" : "↘"} {stat.change}
                 </span>
-                <span
-                  className={css({
-                    fontSize: "xs",
-                    color: "{colors.gray.500}",
-                  })}
-                >
-                  前月比
-                </span>
+                <span className="text-xs text-gray-500">前月比</span>
               </div>
             </div>
           </div>

package/templates/default/apps/web/src/components/shared/Sidebar.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
 import {
   ChevronLeftIcon,
   ChevronRightIcon,
@@ -11,6 +10,7 @@ import {
   PersonIcon,
   TableIcon,
 } from "@radix-ui/react-icons";
+import { Button } from "{{packageName}}/ui/button";
 import { cn } from "{{packageName}}/ui/utils";
 import { signOut } from "next-auth/react";
 import Link from "next/link";
@@ -74,7 +74,7 @@ export function Sidebar({ className, isMobileOpen, setIsMobileOpen }: SidebarPro
       {isMobileOpen && (
         // biome-ignore lint/a11y/useKeyWithClickEvents: サイドメニューのオーバーレイ
         <div
-          className="fixed inset-0 bg-black/50 z-40 md:hidden"
+          className="fixed inset-0 bg-black/50 z-[var(--z-header)] md:hidden"
           onClick={() => setIsMobileOpen(false)}
           aria-hidden="true"
         />
@@ -83,7 +83,7 @@ export function Sidebar({ className, isMobileOpen, setIsMobileOpen }: SidebarPro
       {/* Sidebar */}
       <aside
         className={cn(
-          "fixed left-0 top-0 z-50 h-full border-r bg-card text-card-foreground transition-all duration-300 ease-in-out",
+          "fixed left-0 top-0 z-[var(--z-header)] h-full border-r bg-card text-card-foreground transition-all duration-300 ease-in-out",
           "md:static md:z-auto",
           // Mobile状態
           "md:translate-x-0",

package/templates/default/apps/web/src/components/shared/header.tsx

@@ -1,9 +1,7 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
 import { HamburgerMenuIcon } from "@radix-ui/react-icons";
-import { css } from "../../../styled-system/css";
-import { hstack, vstack } from "../../../styled-system/patterns";
+import { Button } from "{{packageName}}/ui/button";
 
 interface HeaderProps {
   user:
@@ -19,141 +17,48 @@ interface HeaderProps {
 
 export function Header({ user, onMobileMenuToggle }: HeaderProps) {
   return (
-    <header
-      className={css({
-        background: "white",
-        borderBottom: "1px solid {colors.gray.200}",
-        boxShadow: "sm",
-      })}
-    >
-      <div
-        className={css({
-          maxWidth: "7xl",
-          margin: "0 auto",
-          padding: {
-            base: "1rem 1rem",
-            md: "1.25rem 1.5rem",
-            lg: "1.5rem 2rem",
-          },
-        })}
-      >
-        <div
-          className={hstack({
-            justifyContent: "space-between",
-            alignItems: "center",
-          })}
-        >
+    <header className="bg-white border-b border-gray-200 shadow-sm">
+      <div className="max-w-7xl mx-auto px-4 py-4 md:px-6 md:py-5 lg:px-8 lg:py-6">
+        <div className="flex flex-row items-center justify-between">
           {/* ロゴ・ブランド */}
-          <div className={hstack({ gap: "0.75rem", alignItems: "center" })}>
+          <div className="flex flex-row items-center gap-3">
             {/* Mobile menu button */}
             {onMobileMenuToggle && (
               <Button
                 variant="ghost"
                 size="icon"
                 onClick={onMobileMenuToggle}
-                className={css({
-                  display: { base: "flex", md: "none" },
-                  padding: "0.5rem",
-                  marginRight: "0.5rem",
-                })}
+                className="flex md:hidden p-2 mr-2"
                 aria-label="メニューを開く"
               >
-                <HamburgerMenuIcon className={css({ width: "1.25rem", height: "1.25rem" })} />
+                <HamburgerMenuIcon className="w-5 h-5" />
               </Button>
             )}
-            <div
-              className={css({
-                width: "2.5rem",
-                height: "2.5rem",
-                background: "linear-gradient(135deg, {colors.blue.600}, {colors.purple.600})",
-                borderRadius: "md",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-              })}
-            >
-              <span
-                className={css({
-                  fontSize: "lg",
-                  fontWeight: "bold",
-                  color: "white",
-                })}
-              >
-                E
-              </span>
+            <div className="w-10 h-10 bg-gradient-to-br from-blue-600 to-purple-600 rounded-md flex items-center justify-center">
+              <span className="text-lg font-bold text-white">E</span>
             </div>
-            <h1
-              className={css({
-                fontSize: "xl",
-                fontWeight: "bold",
-                color: "{colors.gray.900}",
-              })}
-            >
-              Einja Management
-            </h1>
+            <h1 className="text-xl font-bold text-gray-900">Einja Management</h1>
           </div>
 
           {/* ユーザー情報 */}
-          <div className={hstack({ gap: "1rem", alignItems: "center" })}>
-            <div
-              className={vstack({
-                gap: "0.125rem",
-                alignItems: "flex-end",
-                display: { base: "none", md: "flex" },
-              })}
-            >
-              {user?.name && (
-                <span
-                  className={css({
-                    fontSize: "sm",
-                    fontWeight: "medium",
-                    color: "{colors.gray.900}",
-                  })}
-                >
-                  {user.name}
-                </span>
-              )}
-              <span
-                className={css({
-                  fontSize: "xs",
-                  color: "{colors.gray.500}",
-                })}
-              >
-                {user?.email}
-              </span>
+          <div className="flex flex-row items-center gap-4">
+            <div className="hidden md:flex flex-col gap-0.5 items-end">
+              {user?.name && <span className="text-sm font-medium text-gray-900">{user.name}</span>}
+              <span className="text-xs text-gray-500">{user?.email}</span>
             </div>
 
             {/* ユーザーアバター */}
             <div
-              className={css({
-                width: "2.5rem",
-                height: "2.5rem",
-                background: user?.image ? "transparent" : "{colors.gray.300}",
-                borderRadius: "50%",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                overflow: "hidden",
-              })}
+              className={`w-10 h-10 ${user?.image ? "bg-transparent" : "bg-gray-300"} rounded-full flex items-center justify-center overflow-hidden`}
             >
               {user?.image ? (
                 <img
                   src={user.image}
                   alt={user.name || "User"}
-                  className={css({
-                    width: "100%",
-                    height: "100%",
-                    objectFit: "cover",
-                  })}
+                  className="w-full h-full object-cover"
                 />
               ) : (
-                <span
-                  className={css({
-                    fontSize: "sm",
-                    fontWeight: "medium",
-                    color: "{colors.gray.600}",
-                  })}
-                >
+                <span className="text-sm font-medium text-gray-600">
                   {user?.name?.charAt(0) || user?.email?.charAt(0) || "U"}
                 </span>
               )}

package/templates/default/apps/web/tsconfig.json

@@ -13,12 +13,6 @@
       "@web/*": [
         "./src/*",
         "./*"
-      ],
-      "@/styled-system/*": [
-        "./styled-system/*"
-      ],
-      "styled-system/*": [
-        "./styled-system/*"
       ]
     }
   },