mycontext-cli 4.2.6 → 4.2.8

package/dist/templates/components/crud/entity-card.tsx.hbs

@@ -0,0 +1,71 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+
+const entityCardVariants = cva(
+  'transition-all',
+  {
+    variants: {
+      variant: {
+        default: 'hover:shadow-md',
+        interactive: 'cursor-pointer hover:shadow-md hover:border-primary',
+        selected: 'border-primary shadow-md',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+export interface EntityCardProps extends VariantProps<typeof entityCardVariants> {
+  title: string
+  description?: string
+  metadata?: React.ReactNode
+  actions?: React.ReactNode
+  children?: React.ReactNode
+  onClick?: () => void
+  className?: string
+}
+
+export function EntityCard({
+  title,
+  description,
+  metadata,
+  actions,
+  children,
+  variant,
+  onClick,
+  className,
+}: EntityCardProps) {
+  return (
+    <Card
+      className={cn(entityCardVariants({ variant }), className)}
+      onClick={onClick}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
+      onKeyDown={onClick ? (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          onClick()
+        }
+      } : undefined}
+    >
+      <CardHeader>
+        <div className="flex items-start justify-between">
+          <div className="flex-1 space-y-1">
+            <CardTitle>{title}</CardTitle>
+            {description && <CardDescription>{description}</CardDescription>}
+          </div>
+          {actions && <div className="ml-4">{actions}</div>}
+        </div>
+      </CardHeader>
+      {(metadata || children) && (
+        <CardContent>
+          {metadata && <div className="space-y-2">{metadata}</div>}
+          {children}
+        </CardContent>
+      )}
+    </Card>
+  )
+}

package/dist/templates/components/crud/entity-form.tsx.hbs

@@ -0,0 +1,158 @@
+'use client'
+
+import { useState, useTransition } from 'react'
+import { useRouter } from 'next/navigation'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+
+interface EntityFormProps {
+  entityName: string
+  entityLower: string
+  fields: Array<{
+    name: string
+    type: string
+    required?: boolean
+    label: string
+  }>
+  initialData?: Record<string, any>
+  action: (formData: FormData) => Promise<{ success: boolean; error?: string }>
+  submitLabel?: string
+  onSuccess?: () => void
+}
+
+export function EntityForm({
+  entityName,
+  entityLower,
+  fields,
+  initialData,
+  action,
+  submitLabel,
+  onSuccess,
+}: EntityFormProps) {
+  const router = useRouter()
+  const [isPending, startTransition] = useTransition()
+  const [error, setError] = useState<string | null>(null)
+  const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({})
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    setError(null)
+    setFieldErrors({})
+
+    const formData = new FormData(e.currentTarget)
+
+    startTransition(async () => {
+      const result = await action(formData)
+      if (result.error) {
+        setError(result.error)
+      } else {
+        if (onSuccess) {
+          onSuccess()
+        } else {
+          router.push(`/${entityLower}s`)
+        }
+      }
+    })
+  }
+
+  const renderField = (field: typeof fields[0]) => {
+    const value = initialData?.[field.name] || ''
+
+    switch (field.type) {
+      case 'string':
+      case 'text':
+        return (
+          <Input
+            id={field.name}
+            name={field.name}
+            type="text"
+            defaultValue={value}
+            required={field.required}
+            disabled={isPending}
+            error={fieldErrors[field.name]}
+          />
+        )
+      case 'number':
+        return (
+          <Input
+            id={field.name}
+            name={field.name}
+            type="number"
+            defaultValue={value}
+            required={field.required}
+            disabled={isPending}
+            error={fieldErrors[field.name]}
+          />
+        )
+      case 'boolean':
+        return (
+          <input
+            id={field.name}
+            name={field.name}
+            type="checkbox"
+            defaultChecked={value}
+            disabled={isPending}
+            className="size-4 rounded border-border"
+          />
+        )
+      case 'date':
+        return (
+          <Input
+            id={field.name}
+            name={field.name}
+            type="date"
+            defaultValue={value}
+            required={field.required}
+            disabled={isPending}
+            error={fieldErrors[field.name]}
+          />
+        )
+      default:
+        return (
+          <Input
+            id={field.name}
+            name={field.name}
+            type="text"
+            defaultValue={value}
+            required={field.required}
+            disabled={isPending}
+            error={fieldErrors[field.name]}
+          />
+        )
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      {fields.map((field) => (
+        <div key={field.name} className="space-y-2">
+          <Label htmlFor={field.name} required={field.required}>
+            {field.label}
+          </Label>
+          {renderField(field)}
+        </div>
+      ))}
+
+      {error && (
+        <p className="text-sm text-destructive" role="alert">
+          {error}
+        </p>
+      )}
+
+      <div className="flex justify-end gap-4">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={() => router.back()}
+          disabled={isPending}
+        >
+          Cancel
+        </Button>
+        <Button type="submit" disabled={isPending}>
+          {isPending ? 'Saving...' : (submitLabel || `Save ${entityName}`)}
+        </Button>
+      </div>
+    </form>
+  )
+}

package/dist/templates/components/crud/entity-skeleton.tsx.hbs

@@ -0,0 +1,90 @@
+import { Skeleton } from '@/components/ui/skeleton'
+import { Card, CardContent, CardHeader } from '@/components/ui/card'
+
+export function EntityListSkeleton({ count = 3 }: { count?: number }) {
+  return (
+    <div className="space-y-4">
+      {Array.from({ length: count }).map((_, i) => (
+        <Card key={i}>
+          <CardHeader>
+            <Skeleton className="h-6 w-3/4" />
+            <Skeleton className="h-4 w-full" />
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-1/2" />
+              <Skeleton className="h-4 w-2/3" />
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  )
+}
+
+export function EntityDetailSkeleton() {
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <Skeleton className="h-10 w-3/4" />
+        <Skeleton className="h-4 w-full" />
+      </div>
+
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-6 w-1/4" />
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div key={i} className="space-y-2">
+              <Skeleton className="h-4 w-1/4" />
+              <Skeleton className="h-10 w-full" />
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+export function EntityFormSkeleton() {
+  return (
+    <div className="space-y-6">
+      {Array.from({ length: 4 }).map((_, i) => (
+        <div key={i} className="space-y-2">
+          <Skeleton className="h-4 w-1/4" />
+          <Skeleton className="h-10 w-full" />
+        </div>
+      ))}
+      <div className="flex justify-end gap-4">
+        <Skeleton className="h-10 w-24" />
+        <Skeleton className="h-10 w-32" />
+      </div>
+    </div>
+  )
+}
+
+export function EntityTableSkeleton({ rows = 5 }: { rows?: number }) {
+  return (
+    <div className="rounded-md border">
+      <div className="border-b bg-muted/50 p-4">
+        <div className="flex gap-4">
+          <Skeleton className="h-4 w-32" />
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-4 w-28" />
+          <Skeleton className="h-4 w-20" />
+        </div>
+      </div>
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} className="border-b p-4 last:border-0">
+          <div className="flex gap-4">
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-4 w-28" />
+            <Skeleton className="h-4 w-20" />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}

package/dist/templates/components/crud/entity-table.tsx.hbs

@@ -0,0 +1,129 @@
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
+import { Button } from '@/components/ui/button'
+import { ArrowUpDown, MoreHorizontal } from 'lucide-react'
+
+interface Column<T> {
+  key: keyof T
+  label: string
+  sortable?: boolean
+  render?: (value: any, item: T) => React.ReactNode
+}
+
+interface EntityTableProps<T extends { id: string }> {
+  data: T[]
+  columns: Column<T>[]
+  entityLower: string
+  onDelete?: (id: string) => Promise<void>
+}
+
+export function EntityTable<T extends { id: string }>({
+  data,
+  columns,
+  entityLower,
+  onDelete,
+}: EntityTableProps<T>) {
+  const [sortKey, setSortKey] = useState<keyof T | null>(null)
+  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc')
+
+  const handleSort = (key: keyof T) => {
+    if (sortKey === key) {
+      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')
+    } else {
+      setSortKey(key)
+      setSortOrder('asc')
+    }
+  }
+
+  const sortedData = [...data].sort((a, b) => {
+    if (!sortKey) return 0
+
+    const aVal = a[sortKey]
+    const bVal = b[sortKey]
+
+    if (aVal === bVal) return 0
+
+    const comparison = aVal < bVal ? -1 : 1
+    return sortOrder === 'asc' ? comparison : -comparison
+  })
+
+  return (
+    <div className="rounded-md border">
+      <table className="w-full">
+        <thead className="border-b bg-muted/50">
+          <tr>
+            {columns.map((column) => (
+              <th
+                key={String(column.key)}
+                className="h-12 px-4 text-left align-middle font-medium text-muted-foreground"
+              >
+                {column.sortable ? (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleSort(column.key)}
+                    className="-ml-3"
+                  >
+                    {column.label}
+                    <ArrowUpDown className="ml-2 size-4" />
+                  </Button>
+                ) : (
+                  column.label
+                )}
+              </th>
+            ))}
+            <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">
+              Actions
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {sortedData.length === 0 ? (
+            <tr>
+              <td
+                colSpan={columns.length + 1}
+                className="h-24 text-center text-muted-foreground"
+              >
+                No items found
+              </td>
+            </tr>
+          ) : (
+            sortedData.map((item) => (
+              <tr key={item.id} className="border-b transition-colors hover:bg-muted/50">
+                {columns.map((column) => (
+                  <td key={String(column.key)} className="p-4 align-middle">
+                    {column.render
+                      ? column.render(item[column.key], item)
+                      : String(item[column.key])}
+                  </td>
+                ))}
+                <td className="p-4 align-middle">
+                  <div className="flex items-center gap-2">
+                    <Button variant="ghost" size="sm" asChild>
+                      <Link href={`/${entityLower}s/${item.id}`}>View</Link>
+                    </Button>
+                    <Button variant="ghost" size="sm" asChild>
+                      <Link href={`/${entityLower}s/${item.id}/edit`}>Edit</Link>
+                    </Button>
+                    {onDelete && (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => onDelete(item.id)}
+                        className="text-destructive hover:text-destructive"
+                      >
+                        Delete
+                      </Button>
+                    )}
+                  </div>
+                </td>
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  )
+}

package/dist/templates/components/ui/button.tsx.hbs

@@ -0,0 +1,53 @@
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-border bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'size-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+export function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ref,
+  ...props
+}: ButtonProps & { ref?: React.Ref<HTMLButtonElement> }) {
+  const Comp = asChild ? Slot : 'button'
+  return (
+    <Comp
+      className={cn(buttonVariants({ variant, size, className }))}
+      ref={ref}
+      {...props}
+    />
+  )
+}

package/dist/templates/components/ui/card.tsx.hbs

@@ -0,0 +1,68 @@
+import { cn } from '@/lib/utils'
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function Card({ className, ...props }: CardProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-lg border border-border bg-card text-card-foreground shadow-sm',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function CardHeader({ className, ...props }: CardHeaderProps) {
+  return (
+    <div
+      className={cn('flex flex-col space-y-1.5 p-6', className)}
+      {...props}
+    />
+  )
+}
+
+export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}
+
+export function CardTitle({ className, ...props }: CardTitleProps) {
+  return (
+    <h3
+      className={cn(
+        'text-2xl font-semibold leading-none tracking-tight',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}
+
+export function CardDescription({ className, ...props }: CardDescriptionProps) {
+  return (
+    <p
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  )
+}
+
+export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function CardContent({ className, ...props }: CardContentProps) {
+  return <div className={cn('p-6 pt-0', className)} {...props} />
+}
+
+export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function CardFooter({ className, ...props }: CardFooterProps) {
+  return (
+    <div
+      className={cn('flex items-center p-6 pt-0', className)}
+      {...props}
+    />
+  )
+}

package/dist/templates/components/ui/input.tsx.hbs

@@ -0,0 +1,33 @@
+import { cn } from '@/lib/utils'
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  error?: string
+}
+
+export function Input({ className, type, error, ref, ...props }: InputProps & { ref?: React.Ref<HTMLInputElement> }) {
+  return (
+    <div className="relative">
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-background',
+          'file:border-0 file:bg-transparent file:text-sm file:font-medium',
+          'placeholder:text-muted-foreground',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          error && 'border-destructive focus-visible:ring-destructive',
+          className
+        )}
+        ref={ref}
+        aria-invalid={!!error}
+        aria-describedby={error ? `${props.id}-error` : undefined}
+        {...props}
+      />
+      {error && (
+        <p id={`${props.id}-error`} className="mt-1 text-sm text-destructive" role="alert">
+          {error}
+        </p>
+      )}
+    </div>
+  )
+}

package/dist/templates/components/ui/label.tsx.hbs

@@ -0,0 +1,20 @@
+import { cn } from '@/lib/utils'
+
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  required?: boolean
+}
+
+export function Label({ className, required, children, ...props }: LabelProps) {
+  return (
+    <label
+      className={cn(
+        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {required && <span className="ml-1 text-destructive">*</span>}
+    </label>
+  )
+}

package/dist/templates/components/ui/skeleton.tsx.hbs

@@ -0,0 +1,15 @@
+import { cn } from '@/lib/utils'
+
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function Skeleton({ className, ...props }: SkeletonProps) {
+  return (
+    <div
+      className={cn(
+        'animate-pulse rounded-md bg-muted',
+        className
+      )}
+      {...props}
+    />
+  )
+}