create-einja-app 0.1.1

package/templates/turborepo-pandacss/packages/ui/src/typography.tsx

@@ -0,0 +1,187 @@
+import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps, cva } from "class-variance-authority";
+import type React from "react";
+
+import { cn } from "@/lib/utils";
+
+const typographyVariants = cva("", {
+	variants: {
+		variant: {
+			h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl",
+			h2: "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0",
+			h3: "scroll-m-20 text-2xl font-semibold tracking-tight",
+			h4: "scroll-m-20 text-xl font-semibold tracking-tight",
+			h5: "scroll-m-20 text-lg font-semibold tracking-tight",
+			h6: "scroll-m-20 text-base font-semibold tracking-tight",
+			p: "leading-7 [&:not(:first-child)]:mt-6",
+			blockquote: "mt-6 border-l-2 pl-6 italic",
+			code: "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
+			lead: "text-xl text-muted-foreground",
+			large: "text-lg font-semibold",
+			small: "text-sm font-medium leading-none",
+			muted: "text-sm text-muted-foreground",
+		},
+		align: {
+			left: "text-left",
+			center: "text-center",
+			right: "text-right",
+			justify: "text-justify",
+		},
+		color: {
+			default: "",
+			muted: "text-muted-foreground",
+			primary: "text-primary",
+			secondary: "text-secondary-foreground",
+			accent: "text-accent-foreground",
+			destructive: "text-destructive",
+		},
+	},
+	defaultVariants: {
+		variant: "p",
+		align: "left",
+		color: "default",
+	},
+});
+
+interface TypographyProps
+	extends Omit<React.HTMLAttributes<HTMLElement>, "color">,
+		VariantProps<typeof typographyVariants> {
+	asChild?: boolean;
+	as?: React.ElementType;
+}
+
+function Typography({
+	className,
+	variant,
+	align,
+	color,
+	asChild = false,
+	as,
+	...props
+}: TypographyProps) {
+	const Component = asChild ? Slot : as || getDefaultElement(variant || "p");
+
+	return (
+		<Component
+			className={cn(typographyVariants({ variant, align, color }), className)}
+			{...props}
+		/>
+	);
+}
+
+function getDefaultElement(variant: string): React.ElementType {
+	switch (variant) {
+		case "h1":
+		case "h2":
+		case "h3":
+		case "h4":
+		case "h5":
+		case "h6":
+			return variant;
+		case "blockquote":
+			return "blockquote";
+		case "code":
+			return "code";
+		default:
+			return "p";
+	}
+}
+
+// 個別のコンポーネントも提供
+const H1 = ({
+	className,
+	...props
+}: Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">) => (
+	<Typography variant="h1" as="h1" className={className} {...props} />
+);
+
+const H2 = ({
+	className,
+	...props
+}: Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">) => (
+	<Typography variant="h2" as="h2" className={className} {...props} />
+);
+
+const H3 = ({
+	className,
+	...props
+}: Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">) => (
+	<Typography variant="h3" as="h3" className={className} {...props} />
+);
+
+const H4 = ({
+	className,
+	...props
+}: Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">) => (
+	<Typography variant="h4" as="h4" className={className} {...props} />
+);
+
+const P = ({
+	className,
+	...props
+}: Omit<React.HTMLAttributes<HTMLParagraphElement>, "color">) => (
+	<Typography variant="p" as="p" className={className} {...props} />
+);
+
+const Lead = ({
+	className,
+	...props
+}: Omit<React.HTMLAttributes<HTMLParagraphElement>, "color">) => (
+	<Typography variant="lead" as="p" className={className} {...props} />
+);
+
+const Large = ({
+	className,
+	...props
+}: Omit<React.HTMLAttributes<HTMLDivElement>, "color">) => (
+	<Typography variant="large" as="div" className={className} {...props} />
+);
+
+const Small = ({
+	className,
+	...props
+}: Omit<React.HTMLAttributes<HTMLElement>, "color">) => (
+	<Typography variant="small" as="small" className={className} {...props} />
+);
+
+const Muted = ({
+	className,
+	...props
+}: Omit<React.HTMLAttributes<HTMLParagraphElement>, "color">) => (
+	<Typography variant="muted" as="p" className={className} {...props} />
+);
+
+const Blockquote = ({
+	className,
+	...props
+}: Omit<React.HTMLAttributes<HTMLQuoteElement>, "color">) => (
+	<Typography
+		variant="blockquote"
+		as="blockquote"
+		className={className}
+		{...props}
+	/>
+);
+
+const InlineCode = ({
+	className,
+	...props
+}: Omit<React.HTMLAttributes<HTMLElement>, "color">) => (
+	<Typography variant="code" as="code" className={className} {...props} />
+);
+
+export {
+	Typography,
+	typographyVariants,
+	H1,
+	H2,
+	H3,
+	H4,
+	P,
+	Lead,
+	Large,
+	Small,
+	Muted,
+	Blockquote,
+	InlineCode,
+};

package/templates/turborepo-pandacss/packages/ui/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "@repo/config/typescript",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "jsx": "react-jsx",
+    "paths": {
+      "@/lib/*": [
+        "./src/lib/*"
+      ]
+    }
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

package/templates/turborepo-pandacss/panda.config.ts

@@ -0,0 +1,114 @@
+import { defineConfig } from "@pandacss/dev";
+
+export default defineConfig({
+	// TailwindCSSとの共存のためpreflightを無効化
+	preflight: false,
+
+	// Where to look for your css declarations
+	include: ["./src/**/*.{js,jsx,ts,tsx}", "./pages/**/*.{js,jsx,ts,tsx}"],
+
+	// Files to exclude
+	exclude: [],
+
+	// Panda CSSクラスにプレフィックスを付けてTailwindと区別
+	prefix: "panda",
+
+	// Useful for theme customization
+	theme: {
+		extend: {
+			breakpoints: {
+				sm: "640px",
+				md: "768px",
+				lg: "1024px",
+				xl: "1280px",
+				"2xl": "1440px",
+			},
+			tokens: {
+				colors: {
+					// shadcnのカラーシステムと互換性を保つ
+					border: { value: "hsl(214.3 31.8% 91.4%)" },
+					input: { value: "hsl(214.3 31.8% 91.4%)" },
+					ring: { value: "hsl(222.2 84% 4.9%)" },
+					background: { value: "hsl(0 0% 100%)" },
+					foreground: { value: "hsl(222.2 84% 4.9%)" },
+					primary: {
+						DEFAULT: { value: "hsl(222.2 47.4% 11.2%)" },
+						foreground: { value: "hsl(210 40% 98%)" },
+					},
+					secondary: {
+						DEFAULT: { value: "hsl(210 40% 96%)" },
+						foreground: { value: "hsl(222.2 84% 4.9%)" },
+					},
+					destructive: {
+						DEFAULT: { value: "hsl(0 62.8% 30.6%)" },
+						foreground: { value: "hsl(210 40% 98%)" },
+					},
+					muted: {
+						DEFAULT: { value: "hsl(210 40% 96%)" },
+						foreground: { value: "hsl(215.4 16.3% 46.9%)" },
+					},
+					accent: {
+						DEFAULT: { value: "hsl(210 40% 96%)" },
+						foreground: { value: "hsl(222.2 84% 4.9%)" },
+					},
+					popover: {
+						DEFAULT: { value: "hsl(0 0% 100%)" },
+						foreground: { value: "hsl(222.2 84% 4.9%)" },
+					},
+					card: {
+						DEFAULT: { value: "hsl(0 0% 100%)" },
+						foreground: { value: "hsl(222.2 84% 4.9%)" },
+					},
+				},
+			},
+			recipes: {
+				// 独自のPanda CSSレシピを定義
+				pandaButton: {
+					className: "panda-button",
+					base: {
+						display: "inline-flex",
+						alignItems: "center",
+						justifyContent: "center",
+						borderRadius: "md",
+						fontSize: "sm",
+						fontWeight: "medium",
+						transition: "all 0.2s",
+						cursor: "pointer",
+						_disabled: {
+							pointerEvents: "none",
+							opacity: 0.5,
+						},
+					},
+					variants: {
+						variant: {
+							primary: {
+								bg: "primary",
+								color: "primary.foreground",
+								_hover: { opacity: 0.9 },
+							},
+							secondary: {
+								bg: "secondary",
+								color: "secondary.foreground",
+								_hover: { opacity: 0.8 },
+							},
+						},
+						size: {
+							sm: { h: "8", px: "3" },
+							md: { h: "10", px: "4" },
+							lg: { h: "12", px: "6" },
+						},
+					},
+					defaultVariants: {
+						variant: "primary",
+						size: "md",
+					},
+				},
+			},
+		},
+	},
+
+	// The output directory for your css system
+	outdir: "styled-system",
+
+	jsxFramework: "react",
+});