Add form building hooks and components

package.json

@@ -84,13 +84,15 @@
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
+    "framer-motion": "^12.17.0",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.507.0",
     "next-themes": "^0.4.6",
     "react": "^18.2.0",
     "react-day-picker": "8.10.1",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.56.2",
+    "react-markdown": "^10.1.0",
     "react-resizable-panels": "^3.0.1",
     "recharts": "^2.15.3",
     "sonner": "^2.0.3",

src/components/index.ts

@@ -45,3 +45,4 @@ export * from './ui/toggle'
 export * from './ui/toggle-group'
 export * from './ui/tooltip'
 export * from './ui/layout'
+export * from './ui-plus-behavior'

src/components/ui-plus-behavior/Animations/index.tsx

@@ -0,0 +1,85 @@
+import { CSSProperties, FC, forwardRef, PropsWithChildren, SVGAttributes } from 'react'
+import { motion } from 'framer-motion'
+
+type MotionDivProps = Parameters<typeof motion.div>[0]
+
+type CSSPropertiesWithoutTransitionOrSingleTransforms = Omit<
+  CSSProperties,
+  'transition' | 'rotate' | 'scale' | 'perspective'
+>
+type SVGTransformAttributes = {
+  attrX?: number
+  attrY?: number
+  attrScale?: number
+}
+
+interface SVGPathProperties {
+  pathLength?: number
+  pathOffset?: number
+  pathSpacing?: number
+}
+
+type TargetProperties = CSSPropertiesWithoutTransitionOrSingleTransforms &
+  SVGAttributes<SVGElement> &
+  SVGTransformAttributes &
+  // TransformProperties &
+  SVGPathProperties
+
+type Target = Omit<TargetProperties, 'rotate'>
+
+type AnimationPolicy =
+  | { id: 'allowAll' }
+  | { id: 'denyAll' }
+  | { id: 'allow'; allow: string[] }
+  | { id: 'deny'; deny: string[] }
+
+let policy: AnimationPolicy = {
+  // id: 'denyAll',
+  id: 'allowAll',
+}
+export const setAnimationPolicy = (newPolicy: AnimationPolicy) => (policy = newPolicy)
+
+export const shouldAnimate = (reason: string | undefined): boolean => {
+  switch (policy.id) {
+    case 'allowAll':
+      return true
+    case 'denyAll':
+      return false
+    case 'allow':
+      return !!reason && policy.allow.includes(reason)
+    case 'deny':
+      return !reason || !policy.deny.includes(reason)
+    default:
+      console.log('Warning: unknown animation policy', policy)
+      return false
+  }
+}
+
+export const MotionDiv: FC<
+  PropsWithChildren<
+    Omit<
+      MotionDivProps,
+      | 'style'
+      | 'children'
+      | 'onDrag'
+      | 'onDragStart'
+      | 'onDragEnd'
+      | 'onAnimationStart'
+      | 'initial'
+      | 'animate'
+    >
+  > & {
+    reason?: string | undefined
+    initial?: Target
+    animate?: Target
+  }
+> = forwardRef((props, ref) => {
+  const { reason, ...motionProps } = props
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { layout, initial, animate, exit, ...divProps } = motionProps
+  if (shouldAnimate(reason)) {
+    return <motion.div {...motionProps} ref={ref} />
+  } else {
+    return <div {...divProps} style={{ ...(initial ?? {}), ...(animate ?? {}) }} />
+  }
+})

src/components/ui-plus-behavior/index.ts

@@ -0,0 +1 @@
+export * from './tooltip'

src/components/ui-plus-behavior/input/ActionButton.tsx

@@ -0,0 +1,107 @@
+import { FC, MouseEventHandler } from 'react'
+import { ActionControls } from './useAction'
+import { WithVisibility } from './WithVisibility'
+import { WithValidation } from './WithValidation'
+
+import { WithTooltip } from '../tooltip'
+import { Button } from '../../ui/button.tsx'
+import { MarkdownBlock } from '../../ui/markdown.tsx'
+import { Info, LoaderCircle } from 'lucide-react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../../ui/dialog.tsx'
+import { cn } from '../../../lib'
+
+export const ActionButton: FC<ActionControls<unknown>> = props => {
+  const {
+    name,
+    allMessages,
+    size,
+    color,
+    variant,
+    label,
+    execute,
+    enabled,
+    whyDisabled,
+    description,
+    isPending,
+    confirmationNeeded,
+    onConfirmationProvided,
+    onConfirmationDenied,
+    className,
+    expandHorizontally,
+  } = props
+  const handleClick: MouseEventHandler = event => {
+    event.stopPropagation()
+    execute().then(
+      result => {
+        if (result !== undefined) {
+          console.log('Result on action button', name, ':', typeof result, result)
+        }
+      },
+      error => {
+        if (error.message === 'User canceled action') {
+          // User didn't confirm, not an issue
+        } else {
+          console.log('Error on action button', name, ':', error)
+        }
+      }
+    )
+  }
+  return (
+    <>
+      <WithVisibility field={props}>
+        <WithValidation field={props} messages={allMessages.root}>
+          <WithTooltip
+            overlay={whyDisabled ?? description}
+            side={'top'}
+            className={expandHorizontally ? 'w-full' : undefined}
+          >
+            <Button
+              className={cn(className, expandHorizontally ? 'w-full' : undefined)}
+              variant={variant}
+              size={size}
+              color={color}
+              onClick={handleClick}
+              disabled={!enabled || isPending}
+            >
+              {isPending && <LoaderCircle size="1em" className="rotating" />}
+              <MarkdownBlock code={label} mainTag={'span'} />
+              {description && <Info />}
+            </Button>
+          </WithTooltip>
+        </WithValidation>
+      </WithVisibility>
+      <Dialog
+        open={!!confirmationNeeded}
+        onOpenChange={open => {
+          if (!open) onConfirmationDenied()
+        }}
+      >
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>
+              <MarkdownBlock code={confirmationNeeded?.title} />
+            </DialogTitle>
+            <DialogDescription>
+              <MarkdownBlock code={confirmationNeeded?.description} />
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={onConfirmationDenied} testId={'cancel'}>
+              <MarkdownBlock code={confirmationNeeded?.cancelLabel} mainTag={'span'} />
+            </Button>
+            <Button onClick={onConfirmationProvided} variant={confirmationNeeded?.variant} testId={'confirm'}>
+              <MarkdownBlock code={confirmationNeeded?.okLabel} mainTag={'span'} />
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}

src/components/ui-plus-behavior/input/BooleanInput.tsx

@@ -0,0 +1,70 @@
+import { FC } from 'react'
+import { BooleanFieldControls } from './useBoolField'
+
+import { WithVisibility } from './WithVisibility'
+import { WithValidation } from './WithValidation'
+import { WithTooltip } from '../tooltip'
+import { cn } from '../../../lib'
+import { Checkbox } from '../../ui/checkbox'
+import { Label } from '../../ui/label'
+import { Info } from 'lucide-react'
+import { Switch } from '../../ui/switch.tsx'
+import { MarkdownBlock } from '../../ui/markdown.tsx'
+
+export const BooleanInput: FC<BooleanFieldControls> = props => {
+  const { id, description, label, value, setValue, allMessages, enabled, whyDisabled, preferredWidget } =
+    props
+
+  const labelId = `${id}-label`
+
+  return (
+    <WithVisibility field={props}>
+      <WithValidation field={props} messages={allMessages.root}>
+        <WithTooltip overlay={whyDisabled ?? description}>
+          <div
+            className={cn(
+              'flex items-center space-x-2'
+              // enabled ? classes.pointer : classes.disabled
+            )}
+          >
+            {preferredWidget === 'checkbox' && (
+              <>
+                <Checkbox
+                  id={id}
+                  aria-labelledby={labelId}
+                  aria-label={label?.toString()}
+                  checked={value}
+                  onCheckedChange={setValue}
+                  disabled={!enabled}
+                />
+                <Label htmlFor={id} id={labelId} className={enabled ? undefined : 'text-muted-foreground'}>
+                  <MarkdownBlock code={label} mainTag={'span'} />
+                  {(description || !enabled) && <Info size="1em" />}
+                </Label>
+              </>
+            )}
+            {preferredWidget === 'switch' && (
+              <>
+                <Label
+                  htmlFor={id}
+                  id={`${id}-label`}
+                  className={enabled ? undefined : 'text-muted-foreground'}
+                >
+                  <MarkdownBlock code={label} mainTag={'span'} />
+                  {(description || !enabled) && <Info size="1em" />}
+                </Label>
+                <Switch
+                  id={id}
+                  aria-labelledby={labelId}
+                  checked={value}
+                  onCheckedChange={setValue}
+                  disabled={!enabled}
+                />
+              </>
+            )}
+          </div>
+        </WithTooltip>
+      </WithValidation>
+    </WithVisibility>
+  )
+}

src/components/ui-plus-behavior/input/DateInput.tsx

@@ -0,0 +1,48 @@
+import React, { FC, useCallback } from 'react'
+import { DateFieldControls } from './useDateField'
+
+import { WithVisibility } from './WithVisibility'
+import { WithLabelAndDescription } from './WithLabelAndDescription'
+import { WithValidation } from './WithValidation'
+import { WithTooltip } from '../tooltip'
+import { Input } from '../../ui/input.tsx'
+import { checkMessagesForProblems } from './util'
+
+const convertToDateTimeLocalString = (date: Date) => {
+  const year = date.getFullYear()
+  const month = (date.getMonth() + 1).toString().padStart(2, '0')
+  const day = date.getDate().toString().padStart(2, '0')
+  const hours = date.getHours().toString().padStart(2, '0')
+  const minutes = date.getMinutes().toString().padStart(2, '0')
+
+  return `${year}-${month}-${day}T${hours}:${minutes}`
+}
+
+export const DateInput: FC<DateFieldControls> = props => {
+  const { name, value, setValue, allMessages, enabled, whyDisabled } = props
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => setValue(new Date(event.target.value)),
+    [setValue]
+  )
+
+  const { hasError } = checkMessagesForProblems(allMessages.root)
+
+  return (
+    <WithVisibility field={props}>
+      <WithLabelAndDescription field={props}>
+        <WithValidation field={props} messages={allMessages.root}>
+          <WithTooltip overlay={whyDisabled}>
+            <Input
+              aria-invalid={hasError}
+              name={name}
+              type={'datetime-local'}
+              value={value ? convertToDateTimeLocalString(value) : undefined}
+              onChange={handleChange}
+              disabled={!enabled}
+            />
+          </WithTooltip>
+        </WithValidation>
+      </WithLabelAndDescription>
+    </WithVisibility>
+  )
+}

src/components/ui-plus-behavior/input/ExecutionContext.ts

@@ -0,0 +1,17 @@
+import { MarkdownCode } from '../../ui/markdown'
+
+export type Timeout = ReturnType<typeof setTimeout>
+
+export type ExecutionContext = {
+  setStatus: (message: MarkdownCode | undefined) => void
+  log: (message: MarkdownCode | unknown, ...optionalParams: unknown[]) => void
+  warn: (message: MarkdownCode | unknown, ...optionalParams: unknown[]) => void
+  error: (message: MarkdownCode | unknown, ...optionalParams: unknown[]) => void
+}
+
+export const basicExecutionContext: ExecutionContext = {
+  setStatus: () => undefined,
+  log: console.log,
+  warn: console.warn,
+  error: console.error,
+}

src/components/ui-plus-behavior/input/FieldAndValidationMessage.tsx

@@ -0,0 +1,37 @@
+import { AnimatePresence } from 'framer-motion'
+import { FC } from 'react'
+import { FieldMessageList } from './FieldMessageDisplay'
+import { FieldMessage } from './util'
+import { InputFieldControls } from './useInputField'
+import { MotionDiv } from '../Animations'
+import { MarkdownBlock } from '../../ui/markdown'
+
+export const FieldAndValidationMessage: FC<
+  Pick<InputFieldControls<unknown>, 'validationPending' | 'validationStatusMessage' | 'clearErrorMessage'> & {
+    messages: FieldMessage[]
+  }
+> = props => {
+  const { validationPending, validationStatusMessage, messages, clearErrorMessage } = props
+
+  return (
+    <>
+      <FieldMessageList messages={messages} onRemove={clearErrorMessage} />
+      <AnimatePresence mode={'wait'}>
+        {!!validationStatusMessage && validationPending && (
+          <MotionDiv
+            reason={'fieldValidationErrors'}
+            layout
+            key={'problems-and-validation-messages'}
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: 'auto' }}
+            exit={{ opacity: 0, height: 0 }}
+            transition={{ duration: 0.2, delay: 0 }}
+            role={'status-message'}
+          >
+            <MarkdownBlock code={validationStatusMessage} />
+          </MotionDiv>
+        )}
+      </AnimatePresence>
+    </>
+  )
+}