Added footer component (#61)

Co-authored-by: Samuel Colvin <s@muelcolvin.com>

Author: Dejiah

demo/main.py

@@ -28,6 +28,7 @@ def api_index() -> list[AnyComponent]:
 * `Link` — example [here](/components#link-list)
 * `LinkList` — example [here](/components#link-list)
 * `Navbar` — see the top of this page
+* `Footer` — see the bottom of this page
 * `Modal` — static example [here](/components#button-and-modal), dynamic content example [here](/components#dynamic-modal)
 * `ServerLoad` — see [dynamic modal example](/components#dynamic-modal) and [SSE example](/components#server-load-sse)
 * `Image` - example [here](/components#image)

demo/shared.py

@@ -40,4 +40,14 @@ def demo_page(*components: AnyComponent, title: str | None = None) -> list[AnyCo
                 *components,
             ],
         ),
+        c.Footer(
+            extra_text='FastUI Demo',
+            links=[
+                c.Link(
+                    components=[c.Text(text='Github')], on_click=GoToEvent(url='https://github.com/pydantic/FastUI')
+                ),
+                c.Link(components=[c.Text(text='PyPI')], on_click=GoToEvent(url='https://pypi.org/project/fastui/')),
+                c.Link(components=[c.Text(text='NPM')], on_click=GoToEvent(url='https://www.npmjs.com/org/pydantic/')),
+            ],
+        ),
     ]

demo/tests.py

@@ -40,6 +40,11 @@ def test_api_root():
             ],
             'type': 'Page',
         },
+        {
+            'extraText': 'FastUI Demo',
+            'links': IsList(length=3),
+            'type': 'Footer',
+        },
     ]
 
 

src/npm-fastui-bootstrap/src/footer.tsx

@@ -0,0 +1,22 @@
+import { FC } from 'react'
+import { components, models, useClassName } from 'fastui'
+
+export const Footer: FC<models.Footer> = (props) => {
+  const links = props.links.map((link) => {
+    link.mode = link.mode || 'footer'
+    return link
+  })
+  const extraProp = useClassName(props, { el: 'extra' })
+  return (
+    <footer className={useClassName(props)}>
+      <ul className={useClassName(props, { el: 'link-list' })}>
+        {links.map((link, i) => (
+          <li key={i} className="nav-item">
+            <components.LinkComp {...link} />
+          </li>
+        ))}
+      </ul>
+      {props.extraText && <div className={extraProp}>{props.extraText}</div>}
+    </footer>
+  )
+}

src/npm-fastui-bootstrap/src/index.tsx

@@ -5,12 +5,15 @@ import type { ClassNameGenerator, CustomRender, models } from 'fastui'
 import { Modal } from './modal'
 import { Navbar } from './navbar'
 import { Pagination } from './pagination'
+import { Footer } from './footer'
 
 export const customRender: CustomRender = (props) => {
   const { type } = props
   switch (type) {
     case 'Navbar':
       return () => <Navbar {...props} />
+    case 'Footer':
+      return () => <Footer {...props} />
     case 'Modal':
       return () => <Modal {...props} />
     case 'Pagination':
@@ -26,7 +29,7 @@ export const classNameGenerator: ClassNameGenerator = ({
   const { type } = props
   switch (type) {
     case 'Page':
-      return 'container mt-80'
+      return 'container mt-80 mb-3 page'
     case 'Button':
       return 'btn btn-primary'
     case 'Table':
@@ -104,10 +107,20 @@ export const classNameGenerator: ClassNameGenerator = ({
         default:
           return 'border-bottom fixed-top bg-body'
       }
+    case 'Footer':
+      switch (subElement) {
+        case 'link-list':
+          return 'nav justify-content-center pb-1'
+        case 'extra':
+          return 'text-center text-muted pb-3'
+        default:
+          return 'border-top pt-1 mt-auto bg-body'
+      }
     case 'Link':
       return {
         active: pathMatch(props.active, fullPath),
-        'nav-link': props.mode === 'navbar' || props.mode === 'tabs',
+        'nav-link': props.mode === 'navbar' || props.mode === 'tabs' || props.mode === 'footer',
+        'text-muted': props.mode === 'footer',
       }
     case 'LinkList':
       if (subElement === 'link-list-item' && props.mode) {

src/npm-fastui-prebuilt/src/App.tsx

@@ -4,16 +4,14 @@ import { FC, ReactNode } from 'react'
 
 export default function App() {
   return (
-    <div className="top-offset">
-      <FastUI
-        rootUrl="/api"
-        classNameGenerator={bootstrap.classNameGenerator}
-        customRender={customRender}
-        NotFound={NotFound}
-        Spinner={Spinner}
-        Transition={Transition}
-      />
-    </div>
+    <FastUI
+      rootUrl="/api"
+      classNameGenerator={bootstrap.classNameGenerator}
+      customRender={customRender}
+      NotFound={NotFound}
+      Spinner={Spinner}
+      Transition={Transition}
+    />
   )
 }
 
@@ -33,10 +31,10 @@ const Spinner = () => (
 )
 
 const Transition: FC<{ children: ReactNode; transitioning: boolean }> = ({ children, transitioning }) => (
-  <div>
+  <>
     <div className={renderClassName({ 'transition-overlay': true, transitioning })} />
     {children}
-  </div>
+  </>
 )
 
 const customRender: CustomRender = (props) => {

src/npm-fastui-prebuilt/src/main.scss

@@ -3,6 +3,20 @@ $link-color: #0d6efd; // bootstrap primary
 
 @import 'bootstrap/scss/bootstrap';
 
+html, body, #root {
+  height: 100%;
+}
+
+#root {
+  display: flex;
+  flex-direction: column;
+}
+
+.page {
+  // margin-top because the top is sticky
+  margin-top: 70px;
+}
+
 :root {
   --bs-font-sans-serif: 'IBM Plex Sans', sans-serif;
   --bs-code-color: rgb(31, 35, 40);
@@ -19,16 +33,8 @@ body {
   backdrop-filter: blur(8px);
 }
 
-.top-offset {
-  margin-top: 70px;
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    scroll-margin-top: 60px;
-  }
+h1, h2, h3, h4, h5, h6 {
+  scroll-margin-top: 60px;
 }
 
 .transition-overlay {

src/npm-fastui/src/components/footer.tsx

@@ -0,0 +1,21 @@
+import type { Footer } from '../models'
+
+import { useClassName } from '../hooks/className'
+
+import { LinkComp } from './link'
+
+export const FooterComp = (props: Footer) => {
+  const links = props.links.map((link) => {
+    link.mode = link.mode || 'footer'
+    return link
+  })
+  const extraTextClassName = useClassName(props, { el: 'extra' })
+  return (
+    <footer className={useClassName(props)}>
+      {links.map((link, i) => (
+        <LinkComp key={i} {...link} />
+      ))}
+      {props.extraText && <div className={extraTextClassName}>{props.extraText}</div>}
+    </footer>
+  )
+}

src/npm-fastui/src/components/index.tsx

@@ -31,6 +31,7 @@ import { PaginationComp } from './pagination'
 import { DetailsComp } from './details'
 import { DisplayComp } from './display'
 import { JsonComp } from './Json'
+import { FooterComp } from './footer'
 import { ServerLoadComp } from './ServerLoad'
 import { ImageComp } from './image'
 import { IframeComp } from './Iframe'
@@ -63,6 +64,7 @@ export {
   DetailsComp,
   DisplayComp,
   JsonComp,
+  FooterComp,
   ServerLoadComp,
   ImageComp,
   IframeComp,
@@ -116,6 +118,8 @@ export const AnyComp: FC<FastProps> = (props) => {
         return <LinkListComp {...props} />
       case 'Navbar':
         return <NavbarComp {...props} />
+      case 'Footer':
+        return <FooterComp {...props} />
       case 'Form':
       case 'ModelForm':
         return <FormComp {...props} />

src/npm-fastui/src/index.tsx

@@ -36,17 +36,15 @@ export interface FastUIProps {
 export function FastUI(props: FastUIProps) {
   const { classNameGenerator, DisplayError, devMode, ...rest } = props
   return (
-    <div className="fastui">
-      <ErrorContextProvider DisplayError={DisplayError}>
-        <LocationProvider>
-          <ClassNameContext.Provider value={classNameGenerator ?? null}>
-            <ConfigContext.Provider value={rest}>
-              <DevReload enabled={devMode} />
-              <FastUIController />
-            </ConfigContext.Provider>
-          </ClassNameContext.Provider>
-        </LocationProvider>
-      </ErrorContextProvider>
-    </div>
+    <ErrorContextProvider DisplayError={DisplayError}>
+      <LocationProvider>
+        <ClassNameContext.Provider value={classNameGenerator ?? null}>
+          <ConfigContext.Provider value={rest}>
+            <DevReload enabled={devMode} />
+            <FastUIController />
+          </ConfigContext.Provider>
+        </ClassNameContext.Provider>
+      </LocationProvider>
+    </ErrorContextProvider>
   )
 }