create-freakpunch 0.0.0-stage → 0.2.0

package/template/src/core/components/date-picker.tsx

@@ -0,0 +1,71 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { enUS, tr } from 'date-fns/locale'
+import { CalendarDays } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import { Calendar } from '@/components/ui/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { useFormat } from '@/core/i18n/use-format'
+import { cn } from '@/lib/utils'
+
+const pad = (n: number) => String(n).padStart(2, '0')
+const toValue = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
+/** Local noon, so a time zone offset can't move the calendar day. */
+const fromValue = (value: string) => new Date(`${value}T12:00:00`)
+
+/** Date-only field. The value is a `YYYY-MM-DD` string, the shape to send to a backend. */
+export function DatePicker({
+  id,
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  invalid,
+  className,
+}: {
+  id?: string
+  value: string | undefined
+  onChange: (value: string | undefined) => void
+  placeholder?: string
+  disabled?: boolean
+  invalid?: boolean
+  className?: string
+}) {
+  const [open, setOpen] = useState(false)
+  const { t, i18n } = useTranslation()
+  const fmt = useFormat()
+  const selected = value ? fromValue(value) : undefined
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
+        render={
+          <Button
+            id={id}
+            type="button"
+            variant="outline"
+            disabled={disabled}
+            aria-invalid={invalid}
+            className={cn('w-full justify-start font-normal', !value && 'text-muted-foreground', className)}
+          >
+            <CalendarDays data-icon="inline-start" />
+            {selected ? fmt.date(selected) : (placeholder ?? t('fields.pickDate'))}
+          </Button>
+        }
+      />
+      <PopoverContent align="start" className="w-auto p-0">
+        <Calendar
+          mode="single"
+          locale={i18n.language === 'tr' ? tr : enUS}
+          selected={selected}
+          defaultMonth={selected}
+          onSelect={(day) => {
+            onChange(day ? toValue(day) : undefined)
+            setOpen(false)
+          }}
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}

package/template/src/core/components/file-attachments.tsx

@@ -0,0 +1,84 @@
+import { useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { FileText, Paperclip, X } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import { useFormat } from '@/core/i18n/use-format'
+
+const DEFAULT_MAX_BYTES = 10 * 1024 * 1024
+
+/**
+ * Picks files and lists them. It only holds `File` objects: the service uploads
+ * them, usually `http.post(path, formData)`. `onTooLarge` receives rejected files.
+ */
+export function FileAttachments({
+  id,
+  files,
+  onChange,
+  onTooLarge,
+  accept,
+  maxBytes = DEFAULT_MAX_BYTES,
+  disabled,
+}: {
+  id?: string
+  files: File[]
+  onChange: (files: File[]) => void
+  onTooLarge?: (files: File[]) => void
+  accept?: string
+  maxBytes?: number
+  disabled?: boolean
+}) {
+  const input = useRef<HTMLInputElement>(null)
+  const { t } = useTranslation()
+  const fmt = useFormat()
+
+  function add(picked: File[]) {
+    const tooLarge = picked.filter((f) => f.size > maxBytes)
+    if (tooLarge.length > 0) onTooLarge?.(tooLarge)
+    onChange([...files, ...picked.filter((f) => f.size <= maxBytes)])
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      <input
+        ref={input}
+        id={id}
+        type="file"
+        multiple
+        accept={accept}
+        className="sr-only"
+        tabIndex={-1}
+        disabled={disabled}
+        onChange={(e) => {
+          add(Array.from(e.target.files ?? []))
+          e.target.value = ''
+        }}
+      />
+      <Button type="button" variant="outline" size="sm" disabled={disabled} className="self-start" onClick={() => input.current?.click()}>
+        <Paperclip data-icon="inline-start" />
+        {t('fields.addFiles')}
+      </Button>
+      {files.length > 0 && (
+        <ul className="divide-y rounded-xl border">
+          {files.map((file, i) => (
+            <li key={`${file.name}-${i}`} className="flex items-center gap-3 px-3 py-2 text-sm">
+              <FileText className="size-4 shrink-0 text-muted-foreground" />
+              <span className="min-w-0 flex-1 truncate">{file.name}</span>
+              <span className="shrink-0 text-xs text-muted-foreground tabular-nums">{fmt.number(Math.ceil(file.size / 1024))} KB</span>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon-sm"
+                disabled={disabled}
+                aria-label={t('fields.removeFile', { name: file.name })}
+                onClick={() => onChange(files.filter((_, index) => index !== i))}
+              >
+                <X />
+              </Button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}

package/template/src/core/components/form-error.tsx

@@ -0,0 +1,9 @@
+import { FieldError } from '@/components/ui/field'
+import { translateMessage, useAnyT } from '@/core/i18n/keys'
+
+/** SortUI FieldError that translates `vmsg()` keys from Zod schemas. */
+export function FormFieldError({ error }: { error?: { message?: string } }) {
+  const t = useAnyT()
+  const message = error?.message ? translateMessage(t, error.message) : undefined
+  return <FieldError errors={message ? [{ message }] : []} />
+}

package/template/src/core/components/form-page.tsx

@@ -0,0 +1,93 @@
+import type { FormEventHandler, ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { Button } from '@/components/ui/button'
+import { Spinner } from '@/components/ui/spinner'
+import { cn } from '@/lib/utils'
+
+/**
+ * Two-column settings-style form: section titles on the left, fields on the
+ * right, sticky action bar at the bottom. Wrap with <Page> for the title.
+ *
+ * saveBar="always" (create/edit pages) keeps the bar visible; "dirty"
+ * (settings pages) shows it only when there are unsaved changes.
+ */
+export function FormLayout({
+  onSubmit,
+  children,
+  submitLabel,
+  isSubmitting,
+  isDirty = true,
+  onCancel,
+  extraActions,
+  saveBar = 'always',
+  readOnly,
+}: {
+  onSubmit: FormEventHandler<HTMLFormElement>
+  children: ReactNode
+  submitLabel?: string
+  isSubmitting?: boolean
+  isDirty?: boolean
+  onCancel?: () => void
+  /** Left side of the action bar, e.g. a destructive "Delete" button. */
+  extraActions?: ReactNode
+  saveBar?: 'always' | 'dirty'
+  /** Disables every field and hides the action bar (e.g. missing permission). */
+  readOnly?: boolean
+}) {
+  const { t } = useTranslation()
+  const showBar = !readOnly && (saveBar === 'always' || isDirty || isSubmitting)
+
+  return (
+    <form onSubmit={onSubmit} noValidate className="flex flex-col">
+      <fieldset disabled={readOnly} className="contents">
+        <div className="flex flex-col divide-y rounded-xl border bg-card shadow-(--shadow-card)">{children}</div>
+      </fieldset>
+      {showBar && (
+        <div
+          className={cn(
+            'sticky bottom-0 z-10 -mx-1 mt-4 flex items-center justify-between gap-2 bg-background px-1 py-3',
+            saveBar === 'dirty' && 'animate-in fade-in slide-in-from-bottom-1',
+          )}
+        >
+          <div className="min-w-0 text-xs text-muted-foreground">
+            {extraActions ?? (saveBar === 'dirty' && <span className="truncate">{t('form.unsaved')}</span>)}
+          </div>
+          <div className="flex shrink-0 items-center gap-2">
+            {onCancel && (
+              <Button type="button" variant="ghost" onClick={onCancel}>
+                {saveBar === 'dirty' ? t('actions.discard') : t('actions.cancel')}
+              </Button>
+            )}
+            <Button type="submit" disabled={isSubmitting || !isDirty}>
+              {isSubmitting && <Spinner data-icon="inline-start" />}
+              {submitLabel ?? t('actions.saveChanges')}
+            </Button>
+          </div>
+        </div>
+      )}
+    </form>
+  )
+}
+
+export function FormSection({
+  title,
+  description,
+  children,
+  className,
+}: {
+  title: string
+  description?: ReactNode
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <section className={cn('grid gap-x-10 gap-y-4 p-5 md:grid-cols-[minmax(0,16rem)_minmax(0,1fr)] md:p-6', className)}>
+      <div>
+        <h2 className="text-sm font-medium">{title}</h2>
+        {description && <p className="mt-1 text-xs text-muted-foreground">{description}</p>}
+      </div>
+      <div className="flex min-w-0 flex-col gap-4">{children}</div>
+    </section>
+  )
+}

package/template/src/core/components/image-upload.tsx

@@ -0,0 +1,86 @@
+import { useId, useRef, useState, type ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Upload } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+const ACCEPT = ['image/png', 'image/jpeg', 'image/webp', 'image/svg+xml', 'image/x-icon', 'image/vnd.microsoft.icon']
+const MAX_BYTES = 2 * 1024 * 1024
+
+export type ImageUploadError = 'tooLarge' | 'invalidType'
+
+/**
+ * File picker with a preview slot. Reads the image as a data URL (mock
+ * storage); a real backend would upload the file and return its URL.
+ */
+export function ImageUpload({
+  value,
+  onChange,
+  preview,
+  label,
+  onError,
+  accept = ACCEPT,
+  className,
+  disabled,
+}: {
+  value: string | undefined
+  onChange: (dataUrl: string | undefined) => void
+  /** Rendered as the preview tile (receives the current value). */
+  preview: (value: string | undefined) => ReactNode
+  /** Accessible label of the upload button, e.g. "Change photo". */
+  label: string
+  onError?: (error: ImageUploadError) => void
+  accept?: string[]
+  className?: string
+  disabled?: boolean
+}) {
+  const { t } = useTranslation()
+  const input = useRef<HTMLInputElement>(null)
+  const id = useId()
+  const [busy, setBusy] = useState(false)
+
+  function onFile(file: File | undefined) {
+    if (!file) return
+    if (!accept.includes(file.type)) return onError?.('invalidType')
+    if (file.size > MAX_BYTES) return onError?.('tooLarge')
+    setBusy(true)
+    const reader = new FileReader()
+    reader.onload = () => {
+      onChange(String(reader.result))
+      setBusy(false)
+    }
+    reader.onerror = () => setBusy(false)
+    reader.readAsDataURL(file)
+  }
+
+  return (
+    <div className={cn('flex items-center gap-4', className)}>
+      {preview(value)}
+      <div className="flex flex-wrap items-center gap-2">
+        <input
+          ref={input}
+          id={id}
+          type="file"
+          accept={accept.join(',')}
+          className="sr-only"
+          tabIndex={-1}
+          disabled={disabled}
+          onChange={(e) => {
+            onFile(e.target.files?.[0])
+            e.target.value = ''
+          }}
+        />
+        <Button type="button" variant="outline" size="sm" disabled={disabled || busy} aria-label={label} onClick={() => input.current?.click()}>
+          <Upload data-icon="inline-start" />
+          {t('actions.upload')}
+        </Button>
+        {value && (
+          <Button type="button" variant="ghost" size="sm" disabled={disabled} onClick={() => onChange(undefined)}>
+            {t('actions.remove')}
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}

package/template/src/core/components/page.tsx

@@ -0,0 +1,75 @@
+import { useEffect, type ReactNode } from 'react'
+
+import { useAppName } from '@/core/company/use-app-name'
+import { cn } from '@/lib/utils'
+
+type PageProps = {
+  title: ReactNode
+  /** Plain-text document title; defaults to `title` when it is a string. */
+  documentTitle?: string
+  description?: ReactNode
+  /** Buttons on the right of the title (primary action last). */
+  actions?: ReactNode
+  /** Optional element left of the title, e.g. an avatar or icon tile. */
+  leading?: ReactNode
+  children?: ReactNode
+  className?: string
+}
+
+/** Standard page frame inside the content panel: title row + body. */
+export function Page({ title, documentTitle, description, actions, leading, children, className }: PageProps) {
+  const docTitle = documentTitle ?? (typeof title === 'string' ? title : undefined)
+  const appName = useAppName()
+
+  useEffect(() => {
+    document.title = docTitle ? `${docTitle} · ${appName}` : appName
+  }, [docTitle, appName])
+
+  return (
+    <div className={cn('mx-auto flex w-full max-w-(--page-max-width) flex-col gap-6', className)}>
+      <header className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+        <div className="flex min-w-0 items-center gap-3">
+          {leading}
+          <div className="min-w-0">
+            <h1 className="truncate text-2xl font-semibold tracking-tight">{title}</h1>
+            {description && <p className="mt-1 text-sm text-muted-foreground">{description}</p>}
+          </div>
+        </div>
+        {actions && <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div>}
+      </header>
+      {children}
+    </div>
+  )
+}
+
+/** Bordered section card with a small uppercase label header, as used across pages. */
+export function Panel({
+  label,
+  actions,
+  children,
+  className,
+  bodyClassName,
+}: {
+  label?: ReactNode
+  actions?: ReactNode
+  children: ReactNode
+  className?: string
+  bodyClassName?: string
+}) {
+  return (
+    <section
+      className={cn(
+        'flex min-w-0 flex-col overflow-hidden rounded-xl border bg-card text-card-foreground shadow-(--shadow-card)',
+        className,
+      )}
+    >
+      {(label || actions) && (
+        <div className="flex min-h-11 items-center justify-between gap-3 border-b px-4 py-2">
+          <h2 className="label-caps">{label}</h2>
+          {actions && <div className="flex items-center gap-1">{actions}</div>}
+        </div>
+      )}
+      <div className={cn('flex-1', bodyClassName)}>{children}</div>
+    </section>
+  )
+}

package/template/src/core/components/phone-input.tsx

@@ -0,0 +1,58 @@
+import { useMemo, type ComponentProps } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { Input } from '@/components/ui/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { dialCode, phoneCountries } from '@/core/lib/phone'
+
+/**
+ * Country calling code (localized country names) + national number.
+ * Validate with isValidPhone and store with toE164 (core/lib/phone).
+ *   <PhoneInput id="phone" country={c} onCountryChange={…} invalid={…} inputProps={register('phoneNumber')} />
+ */
+export function PhoneInput({
+  id,
+  country,
+  onCountryChange,
+  invalid,
+  inputProps,
+  countryLabel,
+}: {
+  id: string
+  country: string
+  onCountryChange: (code: string) => void
+  invalid?: boolean
+  inputProps?: ComponentProps<'input'>
+  /** Accessible name of the country select. */
+  countryLabel: string
+}) {
+  const { i18n } = useTranslation()
+  const regionNames = useMemo(() => new Intl.DisplayNames([i18n.language], { type: 'region' }), [i18n.language])
+  const items = phoneCountries.map((c) => ({ value: c.code, label: `${c.dial} ${regionNames.of(c.code) ?? c.code}` }))
+
+  return (
+    <div className="flex gap-2">
+      <Select items={items} value={country} onValueChange={(v) => v && onCountryChange(v)}>
+        <SelectTrigger aria-label={countryLabel} className="w-28 shrink-0 tabular-nums">
+          <SelectValue>{(v: string) => dialCode(v)}</SelectValue>
+        </SelectTrigger>
+        <SelectContent>
+          {items.map((c) => (
+            <SelectItem key={c.value} value={c.value}>
+              {c.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <Input
+        id={id}
+        type="tel"
+        inputMode="tel"
+        autoComplete="tel-national"
+        aria-invalid={invalid}
+        className="min-w-0 flex-1"
+        {...inputProps}
+      />
+    </div>
+  )
+}

package/template/src/core/components/search-select.tsx

@@ -0,0 +1,57 @@
+import { useTranslation } from 'react-i18next'
+
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from '@/components/ui/combobox'
+
+export type SearchSelectOption = { value: string; label: string }
+
+/** Single choice from a long list (employees, assets…) with type-to-search. For short lists use `Select`. */
+export function SearchSelect({
+  id,
+  value,
+  onChange,
+  options,
+  placeholder,
+  disabled,
+  invalid,
+}: {
+  id?: string
+  value: string | undefined
+  onChange: (value: string | undefined) => void
+  options: SearchSelectOption[]
+  placeholder?: string
+  disabled?: boolean
+  invalid?: boolean
+}) {
+  const { t } = useTranslation()
+  const selected = options.find((o) => o.value === value) ?? null
+
+  return (
+    <Combobox
+      items={options}
+      value={selected}
+      disabled={disabled}
+      onValueChange={(option: SearchSelectOption | null) => onChange(option?.value)}
+      itemToStringLabel={(option: SearchSelectOption) => option.label}
+      isItemEqualToValue={(a: SearchSelectOption, b: SearchSelectOption) => a.value === b.value}
+    >
+      <ComboboxInput id={id} placeholder={placeholder ?? t('fields.search')} aria-invalid={invalid} disabled={disabled} className="w-full" />
+      <ComboboxContent>
+        <ComboboxEmpty>{t('table.noResults')}</ComboboxEmpty>
+        <ComboboxList>
+          {(option: SearchSelectOption) => (
+            <ComboboxItem key={option.value} value={option}>
+              {option.label}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}

package/template/src/core/components/segmented.tsx

@@ -0,0 +1,41 @@
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
+import { cn } from '@/lib/utils'
+
+/** iOS-style segmented control built on SortUI ToggleGroup (single value, never empty). */
+export function Segmented<T extends string>({
+  value,
+  onChange,
+  options,
+  label,
+  className,
+}: {
+  value: T
+  onChange: (value: T) => void
+  options: readonly { value: T; label: string }[]
+  label: string
+  className?: string
+}) {
+  return (
+    <ToggleGroup
+      aria-label={label}
+      value={[value]}
+      onValueChange={(next) => {
+        const v = next[0] as T | undefined
+        if (v) onChange(v)
+      }}
+      spacing={0}
+      className={cn('rounded-lg bg-fill-2 p-0.5', className)}
+    >
+      {options.map((o) => (
+        <ToggleGroupItem
+          key={o.value}
+          value={o.value}
+          size="sm"
+          className="h-6 rounded-md px-2.5 text-xs text-muted-foreground aria-pressed:bg-raised aria-pressed:text-foreground aria-pressed:shadow-(--shadow-raised) hover:bg-transparent"
+        >
+          {o.label}
+        </ToggleGroupItem>
+      ))}
+    </ToggleGroup>
+  )
+}

package/template/src/core/components/states.tsx

@@ -0,0 +1,97 @@
+import type { ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+import { AlertTriangle, Inbox, RotateCw, SearchX } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '@/components/ui/empty'
+import { Spinner } from '@/components/ui/spinner'
+import { ApiError } from '@/core/api/http'
+import { cn } from '@/lib/utils'
+
+export function LoadingState({ label, className }: { label?: string; className?: string }) {
+  const { t } = useTranslation()
+  return (
+    <div role="status" className={cn('flex flex-col items-center justify-center gap-3 py-16 text-sm text-muted-foreground', className)}>
+      <Spinner className="size-5" />
+      <span>{label ?? t('states.loading')}</span>
+    </div>
+  )
+}
+
+export function EmptyState({
+  title,
+  description,
+  icon,
+  action,
+  className,
+}: {
+  title?: string
+  description?: ReactNode
+  icon?: ReactNode
+  action?: ReactNode
+  className?: string
+}) {
+  const { t } = useTranslation()
+  return (
+    <Empty className={cn('py-16', className)}>
+      <EmptyHeader>
+        <EmptyMedia variant="icon">{icon ?? <Inbox />}</EmptyMedia>
+        <EmptyTitle>{title ?? t('states.emptyTitle')}</EmptyTitle>
+        {description && <EmptyDescription>{description}</EmptyDescription>}
+      </EmptyHeader>
+      {action && <EmptyContent>{action}</EmptyContent>}
+    </Empty>
+  )
+}
+
+/** Query/route error. 404s from the API render as "not found" without a retry. */
+export function ErrorState({
+  title,
+  error,
+  onRetry,
+  notFoundAction,
+  className,
+}: {
+  title?: string
+  error?: unknown
+  onRetry?: () => void
+  /** Shown instead of "Try again" when the error is a 404, e.g. a link back to the list. */
+  notFoundAction?: ReactNode
+  className?: string
+}) {
+  const { t } = useTranslation()
+
+  if (error instanceof ApiError && error.status === 404) {
+    return (
+      <EmptyState
+        title={t('states.notFoundTitle')}
+        description={t('states.notFoundDescription')}
+        icon={<SearchX />}
+        action={notFoundAction}
+        className={className}
+      />
+    )
+  }
+
+  // API messages come from the server (already localized by a real backend).
+  const message = error instanceof Error ? error.message : t('states.errorDescription')
+  return (
+    <Empty className={cn('py-16', className)}>
+      <EmptyHeader>
+        <EmptyMedia variant="icon" className="text-danger">
+          <AlertTriangle />
+        </EmptyMedia>
+        <EmptyTitle>{title ?? t('states.errorTitle')}</EmptyTitle>
+        <EmptyDescription>{message}</EmptyDescription>
+      </EmptyHeader>
+      {onRetry && (
+        <EmptyContent>
+          <Button variant="outline" onClick={onRetry}>
+            <RotateCw data-icon="inline-start" />
+            {t('actions.retry')}
+          </Button>
+        </EmptyContent>
+      )}
+    </Empty>
+  )
+}