@env-hopper/frontend-core 2.0.1-alpha → 2.0.1-alpha-20260224145405

package/src/ui/editable-list/EditableListField.tsx

@@ -0,0 +1,188 @@
+import { useCallback, useState } from 'react'
+import {
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from '@tanstack/react-table'
+import { Pencil, Plus, Trash2 } from 'lucide-react'
+import { Button } from '~/ui/button'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '~/ui/table'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '~/ui/dialog'
+import { Label } from '~/ui/label'
+import type { EditableListFieldProps } from './types'
+
+type DialogState<T> =
+  | { open: false }
+  | { open: true; mode: 'create'; index: null }
+  | { open: true; mode: 'edit'; index: number; item: T }
+
+export function EditableListField<T>({
+  value,
+  onChange,
+  columns,
+  renderForm,
+  createEmpty,
+  getItemKey,
+  label,
+  addButtonLabel = 'Add',
+  emptyMessage = 'No items',
+  disabled = false,
+}: EditableListFieldProps<T>) {
+  const [dialogState, setDialogState] = useState<DialogState<T>>({
+    open: false,
+  })
+
+  // Add action column
+  const columnsWithActions = [
+    ...columns,
+    {
+      id: 'actions',
+      header: '',
+      cell: ({ row }: { row: { original: T; index: number } }) => (
+        <div className="flex justify-end gap-1">
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() =>
+              setDialogState({
+                open: true,
+                mode: 'edit',
+                index: row.index,
+                item: row.original,
+              })
+            }
+            disabled={disabled}
+          >
+            <Pencil className="h-3 w-3" />
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() => {
+              const newValue = value.filter((_, i) => i !== row.index)
+              onChange(newValue)
+            }}
+            disabled={disabled}
+          >
+            <Trash2 className="h-3 w-3 text-destructive" />
+          </Button>
+        </div>
+      ),
+      size: 60,
+    },
+  ]
+
+  const table = useReactTable({
+    data: value,
+    columns: columnsWithActions,
+    getCoreRowModel: getCoreRowModel(),
+    getRowId: (row, index) => getItemKey(row, index),
+  })
+
+  const handleSave = useCallback(
+    (item: T) => {
+      if (!dialogState.open) return
+
+      if (dialogState.mode === 'create') {
+        onChange([...value, item])
+      } else {
+        const newValue = [...value]
+        newValue[dialogState.index] = item
+        onChange(newValue)
+      }
+      setDialogState({ open: false })
+    },
+    [dialogState, value, onChange],
+  )
+
+  return (
+    <div className="space-y-2">
+      {label && <Label>{label}</Label>}
+
+      <div className="border rounded-md">
+        {value.length === 0 ? (
+          <div className="p-4 text-center text-sm text-muted-foreground">
+            {emptyMessage}
+          </div>
+        ) : (
+          <Table>
+            <TableHeader>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <TableRow key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => (
+                    <TableHead key={header.id} className="h-8 text-xs">
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext(),
+                          )}
+                    </TableHead>
+                  ))}
+                </TableRow>
+              ))}
+            </TableHeader>
+            <TableBody>
+              {table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id} className="py-1 text-sm">
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+      </div>
+
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        onClick={() =>
+          setDialogState({ open: true, mode: 'create', index: null })
+        }
+        disabled={disabled}
+      >
+        <Plus className="h-3 w-3 mr-1" />
+        {addButtonLabel}
+      </Button>
+
+      <Dialog
+        open={dialogState.open}
+        onOpenChange={(open) => !open && setDialogState({ open: false })}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              {dialogState.open && dialogState.mode === 'create'
+                ? 'Add Item'
+                : 'Edit Item'}
+            </DialogTitle>
+          </DialogHeader>
+          {dialogState.open &&
+            renderForm({
+              item:
+                dialogState.mode === 'edit' ? dialogState.item : createEmpty(),
+              onSave: handleSave,
+              onCancel: () => setDialogState({ open: false }),
+            })}
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

package/src/ui/editable-list/index.ts

@@ -0,0 +1,2 @@
+export { EditableListField } from './EditableListField'
+export type { EditableListFieldProps } from './types'

package/src/ui/editable-list/types.ts

@@ -0,0 +1,18 @@
+import type { ColumnDef } from '@tanstack/react-table'
+
+export interface EditableListFieldProps<T> {
+  value: Array<T>
+  onChange: (value: Array<T>) => void
+  columns: Array<ColumnDef<T>>
+  renderForm: (props: {
+    item: T | null
+    onSave: (item: T) => void
+    onCancel: () => void
+  }) => React.ReactNode
+  createEmpty: () => T
+  getItemKey: (item: T, index: number) => string
+  label?: string
+  addButtonLabel?: string
+  emptyMessage?: string
+  disabled?: boolean
+}

package/src/ui/empty.tsx

@@ -0,0 +1,105 @@
+import { cva } from 'class-variance-authority'
+import type { VariantProps } from 'class-variance-authority'
+
+import { cn } from '~/lib/utils'
+
+function Empty({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn(
+        'flex max-w-sm flex-col items-center gap-2 text-center',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+const emptyMediaVariants = cva(
+  'flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+function EmptyMedia({
+  className,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn('text-lg font-medium tracking-tight', className)}
+      {...props}
+    />
+  )
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        'text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        'flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}

package/src/ui/error/NotFoundError.tsx

@@ -1,13 +1,16 @@
 import { Link } from '@tanstack/react-router'
+import { MainLayout } from '~/ui/layout/MainLayout'
 
 export function NotFoundError() {
   return (
-    <main className={'mt-8 text-center'}>
-      <h1>404 Not Found</h1>
-      <p>Sorry, I don't recognize this URL. Probably this was old link?</p>
-      <p>
-        Navigate to <Link to={'/'}>Home page</Link>
-      </p>
-    </main>
+    <MainLayout>
+      <main className={'mt-8 text-center'}>
+        <h1>404 Not Found</h1>
+        <p>Sorry, I don't recognize this URL. Probably this was old link?</p>
+        <p>
+          Navigate to <Link to={'/'}>Home page</Link>
+        </p>
+      </main>
+    </MainLayout>
   )
 }

package/src/ui/form.tsx

@@ -0,0 +1,188 @@
+import type * as LabelPrimitive from '@radix-ui/react-label'
+import { Slot } from '@radix-ui/react-slot'
+import * as React from 'react'
+import { use } from 'react'
+import type { FieldPath, FieldValues } from 'react-hook-form'
+import { Controller, FormProvider, useFormContext } from 'react-hook-form'
+
+import { cn } from '~/lib/utils'
+import { Label } from '~/ui/label'
+
+const Form = FormProvider
+
+interface FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+)
+
+const FormField = ({
+  ref: _ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof Controller> & {
+  name: any
+} & { ref?: React.RefObject<React.ElementRef<typeof Controller> | null> }) => {
+  const fieldContextValue = React.useMemo(
+    () => ({ name: props.name }),
+    [props.name],
+  )
+
+  return (
+    <FormFieldContext value={fieldContextValue}>
+      <Controller {...props} />
+    </FormFieldContext>
+  )
+}
+FormField.displayName = 'FormField'
+
+const 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 = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+)
+
+const FormItem = ({
+  ref,
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+  ref?: React.RefObject<HTMLDivElement | null>
+}) => {
+  const id = React.useId()
+  const formItemValue = React.useMemo(() => ({ id }), [id])
+
+  return (
+    <FormItemContext value={formItemValue}>
+      <div ref={ref} className={cn('space-y-2', className)} {...props} />
+    </FormItemContext>
+  )
+}
+FormItem.displayName = 'FormItem'
+
+const FormLabel = ({
+  ref,
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
+  ref?: React.RefObject<React.ElementRef<typeof LabelPrimitive.Root> | null>
+}) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      htmlFor={formItemId}
+      className={cn(error && 'text-destructive', className)}
+      {...props}
+    />
+  )
+}
+FormLabel.displayName = 'FormLabel'
+
+const FormControl = ({
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof Slot> & {
+  ref?: React.RefObject<React.ElementRef<typeof Slot> | null>
+}) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+FormControl.displayName = 'FormControl'
+
+const FormDescription = ({
+  ref,
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement> & {
+  ref?: React.RefObject<HTMLParagraphElement | null>
+}) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  )
+}
+FormDescription.displayName = 'FormDescription'
+
+const FormMessage = ({
+  ref,
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement> & {
+  ref?: React.RefObject<HTMLParagraphElement | null>
+}) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error.message) : ''
+
+  if (!error) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn('text-sm font-medium text-destructive', className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+FormMessage.displayName = 'FormMessage'
+
+export {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField,
+}

package/src/ui/input-group.tsx

@@ -0,0 +1,167 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+import * as React from 'react'
+
+import { cn } from '~/lib/utils'
+import { Button } from '~/ui/button'
+import { Input } from '~/ui/input'
+import { Textarea } from '~/ui/textarea'
+
+function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
+        'h-9 min-w-0 has-[>textarea]:h-auto',
+
+        // Variants based on alignment.
+        'has-[>[data-align=inline-start]]:[&>input]:pl-2',
+        'has-[>[data-align=inline-end]]:[&>input]:pr-2',
+        'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
+        'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
+
+        // Focus state.
+        'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
+
+        // Error state.
+        'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
+
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
+  {
+    variants: {
+      align: {
+        'inline-start':
+          'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
+        'inline-end':
+          'order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]',
+        'block-start':
+          'order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5',
+        'block-end':
+          'order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5',
+      },
+    },
+    defaultVariants: {
+      align: 'inline-start',
+    },
+  },
+)
+
+function InputGroupAddon({
+  className,
+  align = 'inline-start',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest('button')) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector('input')?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  'text-sm shadow-none flex gap-2 items-center',
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+        sm: 'h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5',
+        'icon-xs':
+          'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
+        'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+      },
+    },
+    defaultVariants: {
+      size: 'xs',
+    },
+  },
+)
+
+function InputGroupButton({
+  className,
+  type = 'button',
+  variant = 'ghost',
+  size = 'xs',
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, 'size'> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      className={cn(
+        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<'input'>) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<'textarea'>) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+    InputGroup,
+    InputGroupAddon,
+    InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea
+}
+