adding paragraph and page title

packages/fastui-bootstrap/src/main.scss

@@ -1,7 +1 @@
 @import 'bootstrap/scss/bootstrap';
-
-.modal {
-  &.show {
-    display: block;
-  }
-}

packages/fastui/src/components/PageTitle.tsx

@@ -0,0 +1,16 @@
+import { FC, useEffect } from 'react'
+
+export interface PageTitleProps {
+  type: 'PageTitle'
+  text: string
+}
+
+export const PageTitleComp: FC<PageTitleProps> = (props) => {
+  const { text } = props
+
+  useEffect(() => {
+    document.title = text
+  }, [text])
+
+  return <></>
+}

packages/fastui/src/components/index.tsx

@@ -4,8 +4,10 @@ import { ErrorContext } from '../hooks/error'
 import { useCustomRender } from '../hooks/config'
 import { unreachable } from '../tools'
 
-import { AllDivProps, DivComp } from './div'
 import { TextProps, TextComp } from './text'
+import { ParagraphProps, ParagraphComp } from './paragraph'
+import { PageTitleProps, PageTitleComp } from './PageTitle'
+import { AllDivProps, DivComp } from './div'
 import { HeadingComp, HeadingProps } from './heading'
 import { FormComp, FormProps, ModelFormProps } from './form'
 import {
@@ -34,6 +36,8 @@ import { ServerLoadComp, ServerLoadProps } from './ServerLoad'
 
 export type {
   TextProps,
+  ParagraphProps,
+  PageTitleProps,
   AllDivProps,
   HeadingProps,
   FormProps,
@@ -56,6 +60,8 @@ export { LinkComp, LinkRender }
 
 export type FastProps =
   | TextProps
+  | ParagraphProps
+  | PageTitleProps
   | AllDivProps
   | HeadingProps
   | FormProps
@@ -71,7 +77,7 @@ export type FastProps =
   | JsonProps
   | ServerLoadProps
 
-export type FastClassNameProps = Exclude<FastProps, TextProps | AllDisplayProps | ServerLoadProps>
+export type FastClassNameProps = Exclude<FastProps, TextProps | AllDisplayProps | ServerLoadProps | PageTitleProps>
 
 export const AnyCompList: FC<{ propsList: FastProps[] }> = ({ propsList }) => (
   <>
@@ -94,6 +100,10 @@ export const AnyComp: FC<FastProps> = (props) => {
     switch (type) {
       case 'Text':
         return <TextComp {...props} />
+      case 'Paragraph':
+        return <ParagraphComp {...props} />
+      case 'PageTitle':
+        return <PageTitleComp {...props} />
       case 'Div':
       case 'Page':
       case 'Row':

packages/fastui/src/components/modal.tsx

@@ -1,9 +1,9 @@
-import { FC, lazy } from 'react'
+import { FC, useEffect } from 'react'
 
-import { ClassName, renderClassName, useClassName } from '../hooks/className'
+import { ClassName } from '../hooks/className'
 import { PageEvent, useEventListenerToggle } from '../hooks/events'
 
-import { FastProps, AnyCompList } from './index'
+import { FastProps } from './index'
 
 export interface ModalProps {
   type: 'Modal'
@@ -15,35 +15,19 @@ export interface ModalProps {
   className?: ClassName
 }
 
-// @ts-expect-error typescript doesn't understand `./modal.css`
-const DefaultCss = lazy(() => import('./modal.css'))
-
 export const ModalComp: FC<ModalProps> = (props) => {
-  const { title, body, footer, openTrigger } = props
+  const { title, openTrigger } = props
 
   const [open, toggle] = useEventListenerToggle(openTrigger, props.open)
 
-  return (
-    <>
-      <DefaultCss />
-      <div className={renderClassName({ 'fu-modal-overlay': true, open })} tabIndex={-1}>
-        <div className={useClassName(props, { dft: 'fu-modal-content' })}>
-          <div className="fu-model-header">
-            <h2>{title}</h2>
-            <div className="fu-close" onClick={toggle}>
-              &times;
-            </div>
-          </div>
-          <div className="fu-modal-body">
-            <AnyCompList propsList={body} />
-          </div>
-          {footer && (
-            <div className="fu-modal-footer">
-              <AnyCompList propsList={footer} />
-            </div>
-          )}
-        </div>
-      </div>
-    </>
-  )
+  useEffect(() => {
+    if (open) {
+      setTimeout(() => {
+        alert(`${title}\n\nNote: modals are not implemented by pure FastUI, implement a component for 'ModalProps'.`)
+        toggle()
+      })
+    }
+  }, [open, title, toggle])
+
+  return <></>
 }

packages/fastui/src/components/paragraph.tsx

@@ -0,0 +1,15 @@
+import { FC } from 'react'
+
+import { ClassName, useClassName } from '../hooks/className'
+
+export interface ParagraphProps {
+  type: 'Paragraph'
+  text: string
+  className?: ClassName
+}
+
+export const ParagraphComp: FC<ParagraphProps> = (props) => {
+  const { text } = props
+
+  return <p className={useClassName(props)}>{text}</p>
+}

packages/vanilla/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>FastUI</title>
+    <title></title>
   </head>
   <body>
     <div id="root"></div>

python/demo/main.py

@@ -24,17 +24,20 @@ def navbar() -> AnyComponent:
         links=[
             c.Link(components=[c.Text(text='Home')], on_click=GoToEvent(url='/'), active='/'),
             c.Link(components=[c.Text(text='Table')], on_click=GoToEvent(url='/table'), active='/table'),
+            c.Link(components=[c.Text(text='Forms')], on_click=GoToEvent(url='/form'), active='/form'),
         ],
     )
 
 
 @app.get('/api/', response_model=FastUI, response_model_exclude_none=True)
 def read_root() -> list[AnyComponent]:
     return [
+        c.PageTitle(text='FastUI Demo'),
         navbar(),
         c.Page(
             components=[
                 c.Heading(text='Hello World'),
+                c.Paragraph(text='This is a demo of FastUI.'),
                 c.Row(
                     components=[
                         c.Col(components=[c.Text(text='Hello World')]),
@@ -72,6 +75,7 @@ async def modal_view() -> list[AnyComponent]:
 def table_view() -> list[AnyComponent]:
     return [
         navbar(),
+        c.PageTitle(text='FastUI Demo - Table'),
         c.Page(
             components=[
                 c.Heading(text='Table'),
@@ -130,6 +134,7 @@ def name_validator(cls, v: str) -> str:
 def form_view() -> list[AnyComponent]:
     return [
         navbar(),
+        c.PageTitle(text='FastUI Demo - Form Examples'),
         c.Page(
             components=[
                 c.Heading(text='Form'),

python/fastui/components/__init__.py

@@ -41,6 +41,20 @@ class Text(pydantic.BaseModel, extra='forbid'):
     type: typing.Literal['Text'] = 'Text'
 
 
+class Paragraph(pydantic.BaseModel, extra='forbid'):
+    text: str
+    type: typing.Literal['Paragraph'] = 'Paragraph'
+
+
+class PageTitle(pydantic.BaseModel, extra='forbid'):
+    """
+    This sets the title of the HTML page via the `document.title` property.
+    """
+
+    text: str
+    type: typing.Literal['PageTitle'] = 'PageTitle'
+
+
 class Div(pydantic.BaseModel, extra='forbid'):
     components: list[AnyComponent]
     class_name: extra.ClassName | None = None
@@ -132,6 +146,8 @@ class ServerLoad(pydantic.BaseModel, extra='forbid'):
 
 AnyComponent = typing.Annotated[
     Text
+    | Paragraph
+    | PageTitle
     | Div
     | Page
     | Heading