create-project-arch 1.0.0

package/templates/ui-package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@repo/ui",
+  "version": "0.0.0",
+  "private": true,
+  "exports": {
+    "./*": "./src/*.tsx"
+  },
+  "scripts": {
+    "lint": "eslint . --max-warnings 0",
+    "generate:component": "turbo gen react-component",
+    "check-types": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@repo/eslint-config": "workspace:*",
+    "@repo/typescript-config": "workspace:*",
+    "@types/node": "^22.15.3",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.2",
+    "eslint": "^9.39.1",
+    "typescript": "5.9.2"
+  },
+  "dependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  }
+}

package/templates/ui-package/src/accordion.tsx

@@ -0,0 +1,10 @@
+import { DetailsHTMLAttributes, HTMLAttributes } from "react";
+import { cn } from "./utils";
+
+export function Accordion({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("ui-accordion", className)} {...props} />;
+}
+
+export function AccordionItem({ className, ...props }: DetailsHTMLAttributes<HTMLDetailsElement>) {
+  return <details className={cn("ui-accordion-item", className)} {...props} />;
+}

package/templates/ui-package/src/badge.tsx

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from "react";
+import { cn } from "./utils";
+
+type BadgeVariant = "default" | "success" | "warning" | "danger" | "secondary";
+
+export function Badge({
+  className,
+  variant = "default",
+  ...props
+}: HTMLAttributes<HTMLSpanElement> & { variant?: BadgeVariant }) {
+  return <span className={cn("ui-badge", `ui-badge-${variant}`, className)} {...props} />;
+}

package/templates/ui-package/src/button.tsx

@@ -0,0 +1,32 @@
+import { ButtonHTMLAttributes, ReactNode } from "react";
+import { cn } from "./utils";
+
+type ButtonVariant = "default" | "secondary" | "ghost" | "outline";
+
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  children: ReactNode;
+  variant?: ButtonVariant;
+  appName?: string;
+};
+
+const variantClass: Record<ButtonVariant, string> = {
+  default: "ui-btn ui-btn-default",
+  secondary: "ui-btn ui-btn-secondary",
+  ghost: "ui-btn ui-btn-ghost",
+  outline: "ui-btn ui-btn-outline",
+};
+
+export function Button({
+  children,
+  className,
+  variant = "default",
+  appName,
+  ...props
+}: ButtonProps) {
+  void appName;
+  return (
+    <button className={cn(variantClass[variant], className)} {...props}>
+      {children}
+    </button>
+  );
+}

package/templates/ui-package/src/card.tsx

@@ -0,0 +1,22 @@
+import { HTMLAttributes } from "react";
+import { cn } from "./utils";
+
+export function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("ui-card", className)} {...props} />;
+}
+
+export function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("ui-card-header", className)} {...props} />;
+}
+
+export function CardTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>) {
+  return <h3 className={cn("ui-card-title", className)} {...props} />;
+}
+
+export function CardDescription({ className, ...props }: HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("ui-card-description", className)} {...props} />;
+}
+
+export function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("ui-card-content", className)} {...props} />;
+}

package/templates/ui-package/src/code.tsx

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from "react";
+import { cn } from "./utils";
+
+export function Code({ className, ...props }: HTMLAttributes<HTMLElement>) {
+  return <code className={cn("ui-code", className)} {...props} />;
+}

package/templates/ui-package/src/command.tsx

@@ -0,0 +1,18 @@
+import { HTMLAttributes, InputHTMLAttributes } from "react";
+import { cn } from "./utils";
+
+export function Command({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("ui-command", className)} {...props} />;
+}
+
+export function CommandInput({ className, ...props }: InputHTMLAttributes<HTMLInputElement>) {
+  return <input className={cn("ui-input", className)} {...props} />;
+}
+
+export function CommandList({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("ui-command-list", className)} {...props} />;
+}
+
+export function CommandItem({ className, ...props }: HTMLAttributes<HTMLButtonElement>) {
+  return <button type="button" className={cn("ui-command-item", className)} {...props} />;
+}

package/templates/ui-package/src/dialog.tsx

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from "react";
+import { cn } from "./utils";
+
+export function Dialog({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("ui-dialog", className)} {...props} />;
+}

package/templates/ui-package/src/dropdown-menu.tsx

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from "react";
+import { cn } from "./utils";
+
+export function DropdownMenu({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("ui-dropdown", className)} {...props} />;
+}
+
+export function DropdownMenuItem({ className, ...props }: HTMLAttributes<HTMLSpanElement>) {
+  return <span className={cn("ui-dropdown-item", className)} {...props} />;
+}

package/templates/ui-package/src/input.tsx

@@ -0,0 +1,6 @@
+import { InputHTMLAttributes } from "react";
+import { cn } from "./utils";
+
+export function Input({ className, ...props }: InputHTMLAttributes<HTMLInputElement>) {
+  return <input className={cn("ui-input", className)} {...props} />;
+}

package/templates/ui-package/src/navigation-menu.tsx

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from "react";
+import { cn } from "./utils";
+
+export function NavigationMenu({ className, ...props }: HTMLAttributes<HTMLElement>) {
+  return <nav className={cn("ui-nav-menu", className)} {...props} />;
+}

package/templates/ui-package/src/scroll-area.tsx

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from "react";
+import { cn } from "./utils";
+
+export function ScrollArea({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("ui-scroll-area", className)} {...props} />;
+}

package/templates/ui-package/src/select.tsx

@@ -0,0 +1,6 @@
+import { SelectHTMLAttributes } from "react";
+import { cn } from "./utils";
+
+export function Select({ className, ...props }: SelectHTMLAttributes<HTMLSelectElement>) {
+  return <select className={cn("ui-input", className)} {...props} />;
+}

package/templates/ui-package/src/separator.tsx

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from "react";
+import { cn } from "./utils";
+
+export function Separator({ className, ...props }: HTMLAttributes<HTMLHRElement>) {
+  return <hr className={cn("ui-separator", className)} {...props} />;
+}

package/templates/ui-package/src/sheet.tsx

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from "react";
+import { cn } from "./utils";
+
+export function Sheet({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("ui-sheet", className)} {...props} />;
+}

package/templates/ui-package/src/skeleton.tsx

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from "react";
+import { cn } from "./utils";
+
+export function Skeleton({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("ui-skeleton", className)} {...props} />;
+}

package/templates/ui-package/src/table.tsx

@@ -0,0 +1,26 @@
+import { HTMLAttributes, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from "react";
+import { cn } from "./utils";
+
+export function Table({ className, ...props }: TableHTMLAttributes<HTMLTableElement>) {
+  return <table className={cn("ui-table", className)} {...props} />;
+}
+
+export function TableHeader({ className, ...props }: HTMLAttributes<HTMLTableSectionElement>) {
+  return <thead className={cn("ui-table-header", className)} {...props} />;
+}
+
+export function TableBody({ className, ...props }: HTMLAttributes<HTMLTableSectionElement>) {
+  return <tbody className={cn("ui-table-body", className)} {...props} />;
+}
+
+export function TableRow({ className, ...props }: HTMLAttributes<HTMLTableRowElement>) {
+  return <tr className={cn("ui-table-row", className)} {...props} />;
+}
+
+export function TableHead({ className, ...props }: ThHTMLAttributes<HTMLTableCellElement>) {
+  return <th className={cn("ui-table-head", className)} {...props} />;
+}
+
+export function TableCell({ className, ...props }: TdHTMLAttributes<HTMLTableCellElement>) {
+  return <td className={cn("ui-table-cell", className)} {...props} />;
+}

package/templates/ui-package/src/tabs.tsx

@@ -0,0 +1,14 @@
+import { ButtonHTMLAttributes, HTMLAttributes } from "react";
+import { cn } from "./utils";
+
+export function Tabs({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("ui-tabs", className)} {...props} />;
+}
+
+export function TabsList({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("ui-tabs-list", className)} {...props} />;
+}
+
+export function TabsTrigger({ className, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return <button type="button" className={cn("ui-tabs-trigger", className)} {...props} />;
+}

package/templates/ui-package/src/toggle-group.tsx

@@ -0,0 +1,10 @@
+import { ButtonHTMLAttributes, HTMLAttributes } from "react";
+import { cn } from "./utils";
+
+export function ToggleGroup({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("ui-toggle-group", className)} {...props} />;
+}
+
+export function ToggleGroupItem({ className, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return <button type="button" className={cn("ui-toggle-item", className)} {...props} />;
+}

package/templates/ui-package/src/utils.ts

@@ -0,0 +1,3 @@
+export function cn(...values: Array<string | false | null | undefined>): string {
+  return values.filter(Boolean).join(" ");
+}

package/templates/ui-package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@repo/typescript-config/react-library.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "strictNullChecks": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}