From 7babd0967963bf2440e350d7e456ee77371704d4 Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Tue, 21 Nov 2023 11:28:15 +0000
Subject: [PATCH] more work on forms

---
 packages/fastui-bootstrap/src/index.tsx       | 18 +++++++++++----
 packages/fastui/src/components/button.tsx     |  4 ++--
 packages/fastui/src/components/form.tsx       | 16 ++++++++------
 packages/fastui/src/components/link.tsx       |  6 ++---
 packages/fastui/src/components/table.tsx      |  6 ++---
 packages/fastui/src/hooks/className.ts        |  2 +-
 packages/fastui/src/hooks/event.ts            | 13 +++++++++--
 packages/fastui/src/hooks/locationContext.tsx |  5 +++++
 packages/fastui/src/index.tsx                 | 12 ++++++++--
 python/demo/main.py                           | 22 +++++++++++++------
 python/fastui/components/__init__.py          |  9 +++++++-
 python/fastui/events.py                       |  6 ++++-
 12 files changed, 86 insertions(+), 33 deletions(-)

diff --git a/packages/fastui-bootstrap/src/index.tsx b/packages/fastui-bootstrap/src/index.tsx
index 01e7e721..67df6346 100644
--- a/packages/fastui-bootstrap/src/index.tsx
+++ b/packages/fastui-bootstrap/src/index.tsx
@@ -1,6 +1,6 @@
 import { ClassNameGenerator, CustomRender } from 'fastui'
 
-import type { FormFieldProps } from 'fastui'
+import type { FormFieldProps, ClassName } from 'fastui'
 
 export const customRender: CustomRender = (props) => {
   const { type } = props
@@ -25,25 +25,35 @@ export const classNameGenerator: ClassNameGenerator = (props, subElement) => {
       return 'btn btn-primary'
     case 'Table':
       return 'table table-striped'
+    case 'Form':
+    case 'ModelForm':
+      return formClassName(subElement)
     case 'FormFieldInput':
     case 'FormFieldCheckbox':
     case 'FormFieldSelect':
     case 'FormFieldFile':
-      return formClassName(props, subElement)
+      return formFieldClassName(props, subElement)
   }
 }
 
-function formClassName(props: FormFieldProps, subElement?: string) {
+function formFieldClassName(props: FormFieldProps, subElement?: string): ClassName {
   switch (subElement) {
     case 'input':
       return props.error ? 'is-invalid form-control' : 'form-control'
     case 'select':
       return 'form-select'
     case 'label':
-      return 'form-label'
+      return { 'form-label': true, 'fw-bold': props.required }
     case 'error':
       return 'invalid-feedback'
     default:
       return 'mb-3'
   }
 }
+
+function formClassName(subElement?: string): ClassName {
+  switch (subElement) {
+    case 'form-container':
+      return 'd-flex justify-content-center'
+  }
+}
diff --git a/packages/fastui/src/components/button.tsx b/packages/fastui/src/components/button.tsx
index b10db838..dafb92ac 100644
--- a/packages/fastui/src/components/button.tsx
+++ b/packages/fastui/src/components/button.tsx
@@ -1,12 +1,12 @@
 import { FC } from 'react'
 
 import { ClassName, useClassName } from '../hooks/className'
-import { useFireEvent, PageEvent, GoToEvent } from '../hooks/event'
+import { useFireEvent, Event } from '../hooks/event'
 
 export interface ButtonProps {
   type: 'Button'
   text: string
-  onClick?: PageEvent | GoToEvent
+  onClick?: Event
   htmlType?: 'button' | 'submit' | 'reset'
   className?: ClassName
 }
diff --git a/packages/fastui/src/components/form.tsx b/packages/fastui/src/components/form.tsx
index da6fc0de..099655e1 100644
--- a/packages/fastui/src/components/form.tsx
+++ b/packages/fastui/src/components/form.tsx
@@ -1,7 +1,7 @@
 import { FC, FormEvent, useState } from 'react'
 
 import { ClassName, useClassName } from '../hooks/className'
-import { useFireEvent, PageEvent, GoToEvent } from '../hooks/event'
+import { useFireEvent, Event } from '../hooks/event'
 import { request } from '../tools'
 
 import { FastProps, RenderChildren } from './index'
@@ -26,7 +26,7 @@ export interface ModelFormProps extends BaseFormProps {
 
 interface FormResponse {
   type: 'FormResponse'
-  event: PageEvent | GoToEvent
+  event: Event
 }
 
 export const FormComp: FC<FormProps | ModelFormProps> = (props) => {
@@ -71,11 +71,13 @@ export const FormComp: FC<FormProps | ModelFormProps> = (props) => {
   )
 
   return (
-    <form className={useClassName(props)} onSubmit={onSubmit}>
-      <RenderChildren children={fieldProps} />
-      {error ? <div>Error: {error}</div> : null}
-      <Footer footer={footer} />
-    </form>
+    <div className={useClassName(props, { el: 'form-container' })}>
+      <form className={useClassName(props)} onSubmit={onSubmit}>
+        <RenderChildren children={fieldProps} />
+        {error ? <div>Error: {error}</div> : null}
+        <Footer footer={footer} />
+      </form>
+    </div>
   )
 }
 
diff --git a/packages/fastui/src/components/link.tsx b/packages/fastui/src/components/link.tsx
index ad443f91..c6136165 100644
--- a/packages/fastui/src/components/link.tsx
+++ b/packages/fastui/src/components/link.tsx
@@ -1,14 +1,14 @@
 import { FC, MouseEventHandler, ReactNode } from 'react'
 
 import { ClassName, useClassName } from '../hooks/className'
-import { useFireEvent, PageEvent, GoToEvent } from '../hooks/event'
+import { useFireEvent, Event } from '../hooks/event'
 
 import { FastProps, RenderChildren } from './index'
 
 export interface LinkProps {
   type: 'Link'
   children: FastProps[]
-  onClick?: PageEvent | GoToEvent
+  onClick?: Event
   className?: ClassName
 }
 
@@ -20,7 +20,7 @@ export const LinkComp: FC<LinkProps> = (props) => (
 
 interface LinkRenderProps {
   children: ReactNode
-  onClick?: PageEvent | GoToEvent
+  onClick?: Event
   className?: string
 }
 
diff --git a/packages/fastui/src/components/table.tsx b/packages/fastui/src/components/table.tsx
index a2efd4bd..8a3cbaa0 100644
--- a/packages/fastui/src/components/table.tsx
+++ b/packages/fastui/src/components/table.tsx
@@ -4,7 +4,7 @@ import type { JsonData } from './Json'
 
 import { DisplayChoices, asTitle } from '../display'
 import { ClassName, useClassName } from '../hooks/className'
-import { PageEvent, GoToEvent } from '../hooks/event'
+import { Event } from '../hooks/event'
 
 import { DisplayComp } from './display'
 import { LinkRender } from './link'
@@ -13,7 +13,7 @@ interface ColumnProps {
   field: string
   display?: DisplayChoices
   title?: string
-  onClick?: PageEvent | GoToEvent
+  onClick?: Event
   className?: ClassName
 }
 
@@ -60,7 +60,7 @@ interface CellProps {
 const Cell: FC<CellProps> = ({ row, column }) => {
   const { field, display, onClick } = column
   const value = row[field]
-  let event: PageEvent | GoToEvent | null = onClick ? { ...onClick } : null
+  let event: Event | null = onClick ? { ...onClick } : null
   if (event) {
     if (event.type === 'go-to') {
       // for go-to events, substitute the row values into the url
diff --git a/packages/fastui/src/hooks/className.ts b/packages/fastui/src/hooks/className.ts
index fc5c14eb..2db4f156 100644
--- a/packages/fastui/src/hooks/className.ts
+++ b/packages/fastui/src/hooks/className.ts
@@ -37,7 +37,7 @@ export function useClassName(props: FastClassNameProps, extra?: UseClassNameExtr
     const { className } = props
     if (combineClassNameProp(className)) {
       if (classNameGenerator) {
-        dft = classNameGenerator(props)
+        dft = classNameGenerator(props) || dft
       }
       return combine(dft, className)
     } else {
diff --git a/packages/fastui/src/hooks/event.ts b/packages/fastui/src/hooks/event.ts
index 2209ae84..f128ea89 100644
--- a/packages/fastui/src/hooks/event.ts
+++ b/packages/fastui/src/hooks/event.ts
@@ -12,14 +12,20 @@ export interface GoToEvent {
   url: string
 }
 
+export interface BackEvent {
+  type: 'back'
+}
+
+export type Event = PageEvent | GoToEvent | BackEvent
+
 function pageEventType(event: PageEvent): string {
   return `fastui:${event.name}`
 }
 
-export function useFireEvent(): { fireEvent: (event?: PageEvent | GoToEvent) => void } {
+export function useFireEvent(): { fireEvent: (event?: Event) => void } {
   const location = useContext(LocationContext)
 
-  function fireEvent(event?: PageEvent | GoToEvent) {
+  function fireEvent(event?: Event) {
     if (!event) {
       return
     }
@@ -32,6 +38,9 @@ export function useFireEvent(): { fireEvent: (event?: PageEvent | GoToEvent) =>
       case 'go-to':
         location.goto(event.url)
         break
+      case 'back':
+        location.back()
+        break
     }
   }
 
diff --git a/packages/fastui/src/hooks/locationContext.tsx b/packages/fastui/src/hooks/locationContext.tsx
index bc60c354..f5bf765d 100644
--- a/packages/fastui/src/hooks/locationContext.tsx
+++ b/packages/fastui/src/hooks/locationContext.tsx
@@ -11,6 +11,7 @@ function parseLocation(): string {
 export interface LocationState {
   fullPath: string
   goto: (pushPath: string) => void
+  back: () => void
 }
 
 const initialPath = parseLocation()
@@ -18,6 +19,7 @@ const initialPath = parseLocation()
 const initialState = {
   fullPath: initialPath,
   goto: () => null,
+  back: () => null,
 }
 
 export const LocationContext = createContext<LocationState>(initialState)
@@ -68,6 +70,9 @@ export function LocationProvider({ children }: { children: ReactNode }) {
       },
       [setError],
     ),
+    back: useCallback(() => {
+      window.history.back()
+    }, []),
   }
 
   return <LocationContext.Provider value={value}>{children}</LocationContext.Provider>
diff --git a/packages/fastui/src/index.tsx b/packages/fastui/src/index.tsx
index e967eda0..f05fcf20 100644
--- a/packages/fastui/src/index.tsx
+++ b/packages/fastui/src/index.tsx
@@ -2,7 +2,7 @@ import { ReactNode } from 'react'
 
 import { LocationProvider } from './hooks/locationContext'
 import { FastUIController } from './controller'
-import { ClassNameContext, ClassNameGenerator } from './hooks/className'
+import { ClassNameContext, ClassNameGenerator, ClassName } from './hooks/className'
 import { ErrorContextProvider, ErrorDisplayType } from './hooks/error'
 import { CustomRender, CustomRenderContext } from './hooks/customRender'
 import { FastProps } from './components'
@@ -10,7 +10,15 @@ import { FormFieldProps } from './components/FormField'
 import { DisplayChoices } from './display'
 import { DevReloadProvider } from './hooks/dev'
 
-export type { ClassNameGenerator, CustomRender, ErrorDisplayType, FastProps, DisplayChoices, FormFieldProps }
+export type {
+  ClassNameGenerator,
+  CustomRender,
+  ErrorDisplayType,
+  FastProps,
+  DisplayChoices,
+  FormFieldProps,
+  ClassName,
+}
 
 export interface FastUIProps {
   rootUrl: string
diff --git a/python/demo/main.py b/python/demo/main.py
index 8cff32ab..6724819a 100644
--- a/python/demo/main.py
+++ b/python/demo/main.py
@@ -8,9 +8,10 @@
 from fastui import AnyComponent, FastUI, dev_fastapi_app
 from fastui import components as c
 from fastui.display import Display
-from fastui.events import GoToEvent, PageEvent
+from fastui.events import BackEvent, GoToEvent, PageEvent
 from fastui.forms import FormFile, FormResponse, fastui_form
-from pydantic import BaseModel, Field
+from pydantic import BaseModel, Field, field_validator
+from pydantic_core import PydanticCustomError
 
 # app = FastAPI()
 app = dev_fastapi_app()
@@ -82,7 +83,7 @@ class ToolEnum(StrEnum):
 
 
 class MyFormModel(BaseModel):
-    name: str = Field(default='foobar', title='Name')
+    name: str = Field(default='foobar', title='Name', min_length=3)
     # tool: ToolEnum = Field(json_schema_extra={'enum_display_values': {'hammer': 'Big Hammer'}})
     task: Literal['build', 'destroy'] | None = None
     profile_pic: Annotated[UploadFile, FormFile(accept='image/*', max_size=16_000)]
@@ -93,14 +94,21 @@ class MyFormModel(BaseModel):
     # weight: typing.Annotated[int, annotated_types.Gt(0)]
     # size: PositiveInt = None
     # enabled: bool = False
-    # nested: NestedFormModel
+    nested: NestedFormModel
+
+    @field_validator('name')
+    def name_validator(cls, v: str) -> str:
+        if v[0].islower():
+            raise PydanticCustomError('lower', 'Name must start with a capital letter')
+        return v
 
 
 @app.get('/api/form', response_model=FastUI, response_model_exclude_none=True)
 def form_view() -> AnyComponent:
-    f = c.Page(
+    return c.Page(
         children=[
             c.Heading(text='Form'),
+            c.Link(children=[c.Text(text='Back')], on_click=BackEvent()),
             c.ModelForm[MyFormModel](
                 submit_url='/api/form',
                 success_event=PageEvent(name='form_success'),
@@ -111,8 +119,8 @@ def form_view() -> AnyComponent:
             ),
         ]
     )
-    debug(f)
-    return f
+    # debug(f)
+    # return f
 
 
 @app.post('/api/form')
diff --git a/python/fastui/components/__init__.py b/python/fastui/components/__init__.py
index d3abe3ed..b601215d 100644
--- a/python/fastui/components/__init__.py
+++ b/python/fastui/components/__init__.py
@@ -86,6 +86,13 @@ class Button(pydantic.BaseModel):
     type: typing.Literal['Button'] = 'Button'
 
 
+class Link(pydantic.BaseModel):
+    children: list[AnyComponent]
+    on_click: events.Event | None = pydantic.Field(default=None, serialization_alias='onClick')
+    class_name: extra.ClassName | None = None
+    type: typing.Literal['Link'] = 'Link'
+
+
 class Modal(pydantic.BaseModel):
     title: str
     body: list[AnyComponent]
@@ -97,6 +104,6 @@ class Modal(pydantic.BaseModel):
 
 
 AnyComponent = typing.Annotated[
-    Text | Div | Page | Heading | Row | Col | Button | Modal | Table | Form | ModelForm | FormField,
+    Text | Div | Page | Heading | Row | Col | Button | Link | Modal | Table | Form | ModelForm | FormField,
     pydantic.Field(discriminator='type'),
 ]
diff --git a/python/fastui/events.py b/python/fastui/events.py
index e28af8bc..a11b8551 100644
--- a/python/fastui/events.py
+++ b/python/fastui/events.py
@@ -14,4 +14,8 @@ class GoToEvent(BaseModel):
     type: Literal['go-to'] = 'go-to'
 
 
-Event = Annotated[PageEvent | GoToEvent, Field(discriminator='type')]
+class BackEvent(BaseModel):
+    type: Literal['back'] = 'back'
+
+
+Event = Annotated[PageEvent | GoToEvent | BackEvent, Field(discriminator='type')]