@etus/bhono-app 0.1.1

package/templates/base/src/client/components/ui/button.tsx

@@ -0,0 +1,72 @@
+import type { VariantProps } from "class-variance-authority"
+import type { ButtonHTMLAttributes, Ref } from "react"
+
+import { Slot } from "@radix-ui/react-slot"
+import { cva } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 active:scale-[0.98]",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-sm hover:bg-green-500 hover:shadow-md",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-red-600 hover:shadow-md",
+        outline:
+          "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground hover:border-gray-300 dark:hover:border-gray-600",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-gray-200 dark:hover:bg-gray-700",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline hover:text-green-600",
+        // Status variants
+        success:
+          "bg-green-500 text-white shadow-sm hover:bg-green-600 hover:shadow-md",
+        warning:
+          "bg-yellow-500 text-gray-900 shadow-sm hover:bg-yellow-600 hover:shadow-md",
+        info:
+          "bg-blue-500 text-white shadow-sm hover:bg-blue-600 hover:shadow-md",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        xl: "h-12 rounded-lg px-10 text-base",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+  ref?: Ref<HTMLButtonElement>
+}
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ref,
+  ...props
+}: ButtonProps) {
+  const Comp = asChild ? Slot : "button"
+  return (
+    <Comp
+      className={cn(buttonVariants({ variant, size, className }))}
+      ref={ref}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/templates/base/src/client/components/ui/card.tsx

@@ -0,0 +1,86 @@
+import type React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({
+  className,
+  ref,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }) {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "rounded-lg border bg-card text-card-foreground shadow-sm transition-shadow hover:shadow-md",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({
+  className,
+  ref,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }) {
+  return (
+    <div
+      ref={ref}
+      className={cn("flex flex-col space-y-1.5 p-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({
+  className,
+  ref,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement> & { ref?: React.Ref<HTMLHeadingElement> }) {
+  return (
+    <h3
+      ref={ref}
+      className={cn("font-semibold leading-none tracking-tight", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({
+  className,
+  ref,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }) {
+  return (
+    <div
+      ref={ref}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardContent({
+  className,
+  ref,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }) {
+  return <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+}
+
+function CardFooter({
+  className,
+  ref,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }) {
+  return (
+    <div
+      ref={ref}
+      className={cn("flex items-center p-6 pt-0", className)}
+      {...props}
+    />
+  )
+}
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }

package/templates/base/src/client/components/ui/dialog.tsx

@@ -0,0 +1,140 @@
+import type React from "react"
+
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+
+import { Icons } from "@/components/icons"
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+function DialogOverlay({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {
+  ref?: React.Ref<React.ComponentRef<typeof DialogPrimitive.Overlay>>
+}) {
+  return (
+    <DialogPrimitive.Overlay
+      ref={ref}
+      className={cn(
+        "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+  ref?: React.Ref<React.ComponentRef<typeof DialogPrimitive.Content>>
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+          <Icons.close className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col space-y-1.5 text-center sm:text-left",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> & {
+  ref?: React.Ref<React.ComponentRef<typeof DialogPrimitive.Title>>
+}) {
+  return (
+    <DialogPrimitive.Title
+      ref={ref}
+      className={cn(
+        "text-lg font-semibold leading-none tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> & {
+  ref?: React.Ref<React.ComponentRef<typeof DialogPrimitive.Description>>
+}) {
+  return (
+    <DialogPrimitive.Description
+      ref={ref}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

package/templates/base/src/client/components/ui/error-fallback.tsx

@@ -0,0 +1,179 @@
+// src/client/components/ui/error-fallback.tsx
+import { AlertTriangle, RefreshCw, Home, ArrowLeft } from 'lucide-react'
+import { Button } from './button'
+
+interface ErrorFallbackProps {
+  error?: Error
+  title?: string
+  message?: string
+  showDetails?: boolean
+  onRetry?: () => void
+  onGoBack?: () => void
+  onGoHome?: () => void
+}
+
+/**
+ * Generic error fallback UI component.
+ * Used for displaying errors in a user-friendly way.
+ */
+export function ErrorFallback({
+  error,
+  title = 'Something went wrong',
+  message = 'An unexpected error occurred. Please try again.',
+  showDetails = import.meta.env.DEV,
+  onRetry,
+  onGoBack,
+  onGoHome,
+}: ErrorFallbackProps) {
+  return (
+    <div className="flex min-h-[400px] items-center justify-center p-6">
+      <div className="mx-auto max-w-md text-center">
+        {/* Icon */}
+        <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10">
+          <AlertTriangle className="h-8 w-8 text-destructive" />
+        </div>
+
+        {/* Title */}
+        <h1 className="mt-6 text-2xl font-bold text-foreground">{title}</h1>
+
+        {/* Message */}
+        <p className="mt-3 text-muted-foreground">{message}</p>
+
+        {/* Error details (dev only) */}
+        {showDetails && error && (
+          <div className="mt-4 rounded-lg bg-muted p-4 text-left">
+            <p className="text-xs font-medium text-muted-foreground">Error details:</p>
+            <pre className="mt-1 overflow-auto text-xs text-foreground/80">
+              {error.message}
+              {error.stack && (
+                <>
+                  {'\n\n'}
+                  {error.stack}
+                </>
+              )}
+            </pre>
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="mt-8 flex flex-col gap-3 sm:flex-row sm:justify-center">
+          {onRetry && (
+            <Button onClick={onRetry} variant="default">
+              <RefreshCw className="mr-2 h-4 w-4" />
+              Try again
+            </Button>
+          )}
+          {onGoBack && (
+            <Button onClick={onGoBack} variant="outline">
+              <ArrowLeft className="mr-2 h-4 w-4" />
+              Go back
+            </Button>
+          )}
+          {onGoHome && (
+            <Button onClick={onGoHome} variant="outline">
+              <Home className="mr-2 h-4 w-4" />
+              Go home
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface NotFoundProps {
+  title?: string
+  message?: string
+  onGoBack?: () => void
+  onGoHome?: () => void
+}
+
+/**
+ * 404 Not Found error component.
+ */
+export function NotFound({
+  title = 'Page not found',
+  message = "The page you're looking for doesn't exist or has been moved.",
+  onGoBack,
+  onGoHome,
+}: NotFoundProps) {
+  return (
+    <div className="flex min-h-[400px] items-center justify-center p-6">
+      <div className="mx-auto max-w-md text-center">
+        {/* 404 Text */}
+        <p className="text-7xl font-bold text-muted-foreground/20">404</p>
+
+        {/* Title */}
+        <h1 className="mt-4 text-2xl font-bold text-foreground">{title}</h1>
+
+        {/* Message */}
+        <p className="mt-3 text-muted-foreground">{message}</p>
+
+        {/* Actions */}
+        <div className="mt-8 flex flex-col gap-3 sm:flex-row sm:justify-center">
+          {onGoBack && (
+            <Button onClick={onGoBack} variant="outline">
+              <ArrowLeft className="mr-2 h-4 w-4" />
+              Go back
+            </Button>
+          )}
+          {onGoHome && (
+            <Button onClick={onGoHome} variant="default">
+              <Home className="mr-2 h-4 w-4" />
+              Go home
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface UnauthorizedProps {
+  title?: string
+  message?: string
+  onLogin?: () => void
+  onGoBack?: () => void
+}
+
+/**
+ * 401/403 Unauthorized/Forbidden error component.
+ */
+export function Unauthorized({
+  title = 'Access denied',
+  message = "You don't have permission to access this page.",
+  onLogin,
+  onGoBack,
+}: UnauthorizedProps) {
+  return (
+    <div className="flex min-h-[400px] items-center justify-center p-6">
+      <div className="mx-auto max-w-md text-center">
+        {/* Icon */}
+        <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-amber-500/10">
+          <AlertTriangle className="h-8 w-8 text-amber-500" />
+        </div>
+
+        {/* Title */}
+        <h1 className="mt-6 text-2xl font-bold text-foreground">{title}</h1>
+
+        {/* Message */}
+        <p className="mt-3 text-muted-foreground">{message}</p>
+
+        {/* Actions */}
+        <div className="mt-8 flex flex-col gap-3 sm:flex-row sm:justify-center">
+          {onLogin && (
+            <Button onClick={onLogin} variant="default">
+              Sign in
+            </Button>
+          )}
+          {onGoBack && (
+            <Button onClick={onGoBack} variant="outline">
+              <ArrowLeft className="mr-2 h-4 w-4" />
+              Go back
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/base/src/client/components/ui/form.tsx

@@ -0,0 +1,172 @@
+import { createContext, use, useId } from "react"
+import type {
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+} from "react-hook-form"
+import type { HTMLAttributes, LabelHTMLAttributes, Ref } from "react"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form"
+
+import { Label } from "@/components/ui/label"
+import { cn } from "@/lib/utils"
+
+const Form = FormProvider
+
+interface FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> {
+  name: TName
+}
+
+const FormFieldContext = createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+function FormField<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) {
+  return (
+    <FormFieldContext value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext>
+  )
+}
+
+function useFormField() {
+  const fieldContext = use(FormFieldContext)
+  const itemContext = use(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+interface FormItemContextValue {
+  id: string
+}
+
+const FormItemContext = createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+function FormItem({
+  className,
+  ref,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & { ref?: Ref<HTMLDivElement> }) {
+  const id = useId()
+
+  return (
+    <FormItemContext value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext>
+  )
+}
+
+function FormLabel({
+  className,
+  ref,
+  ...props
+}: LabelHTMLAttributes<HTMLLabelElement> & { ref?: Ref<HTMLLabelElement> }) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({
+  ref,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & { ref?: Ref<HTMLDivElement> }) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <div
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? formDescriptionId
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({
+  className,
+  ref,
+  ...props
+}: HTMLAttributes<HTMLParagraphElement> & { ref?: Ref<HTMLParagraphElement> }) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({
+  className,
+  children,
+  ref,
+  ...props
+}: HTMLAttributes<HTMLParagraphElement> & { ref?: Ref<HTMLParagraphElement> }) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-xs font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField,
+}

package/templates/base/src/client/components/ui/input.tsx

@@ -0,0 +1,24 @@
+import type { ComponentProps, Ref } from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({
+  className,
+  type,
+  ref,
+  ...props
+}: ComponentProps<"input"> & { ref?: Ref<HTMLInputElement> }) {
+  return (
+    <input
+      type={type}
+      className={cn(
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+}
+
+export { Input }

package/templates/base/src/client/components/ui/label.tsx

@@ -0,0 +1,22 @@
+import type { LabelHTMLAttributes, Ref } from "react"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ref,
+  ...props
+}: LabelHTMLAttributes<HTMLLabelElement> & { ref?: Ref<HTMLLabelElement> }) {
+  return (
+    <label
+      ref={ref}
+      className={cn(
+        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }