create fastui-bootstrap

Makefile

@@ -38,7 +38,7 @@ testcov: test
 
 .PHONY: dev
 dev:
-	uvicorn demo.server:app --reload
+	uvicorn python.demo.main:app --reload
 
 .PHONY: all
 all: testcov lint

package.json

@@ -6,7 +6,7 @@
   ],
   "scripts": {
     "dev": "npm run --workspace=vanilla dev",
-    "build": "rm -rf packages-dist && npm run --workspaces build",
+    "build": "rm -rf packages-dist && npm run build --workspaces --if-present",
     "typecheck": "npm run --workspaces typecheck",
     "lint": "eslint packages --ext .ts,.tsx --report-unused-disable-directives --max-warnings 0",
     "lint-fix": "npm run lint -- --fix",

packages/fastui-bootstrap/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "fastui-bootstrap",
+  "version": "0.0.0",
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit",
+    "typewatch": "tsc --noEmit --watch"
+  },
+  "dependencies": {
+    "bootstrap": "^5.3.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.69.5"
+  },
+  "peerDependencies": {
+    "fastui": "0.0.0"
+  }
+}

packages/fastui-bootstrap/src/index.tsx

@@ -0,0 +1,27 @@
+import { ClassNameGenerator, CustomRender } from 'fastui'
+
+export const customRender: CustomRender = (props) => {
+  const { type } = props
+  if (type === 'DisplayPrimitive') {
+    const { value } = props
+    if (typeof value === 'boolean') {
+      return () => <>{value ? '👍' : '👎'}</>
+    }
+  }
+}
+
+export const classNameGenerator: ClassNameGenerator = (props) => {
+  const { type } = props
+  switch (type) {
+    case 'Page':
+      return 'container py-4'
+    case 'Row':
+      return 'row'
+    case 'Col':
+      return 'col'
+    case 'Button':
+      return 'btn btn-primary'
+    case 'Table':
+      return 'table table-striped'
+  }
+}

packages/fastui-bootstrap/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../packages-dist",
+    "paths": {
+      "fastui": ["../fastui/src"]
+    }
+  },
+  "include": ["src"]
+}

packages/fastui/package.json

@@ -2,7 +2,6 @@
   "name": "fastui",
   "version": "0.0.0",
   "scripts": {
-    "build": "tsc",
     "typecheck": "tsc --noEmit",
     "typewatch": "tsc --noEmit --watch"
   },

packages/vanilla/package.json

@@ -8,8 +8,6 @@
   },
   "dependencies": {
     "@vitejs/plugin-react-swc": "^3.3.2",
-    "bootstrap": "^5.3.2",
-    "sass": "^1.69.5",
     "vite": "^4.4.5"
   }
 }

packages/vanilla/src/App.tsx

@@ -1,35 +1,10 @@
-import { FastUI, ClassNameGenerator, CustomRender } from 'fastui'
+import { FastUI } from 'fastui'
+import * as bootstrap from 'fastui-bootstrap'
 
 export default function App() {
   return (
     <div className="app">
-      <FastUI rootUrl="/api" classNameGenerator={bootstrapClassName} customRender={customRender} />
+      <FastUI rootUrl="/api" classNameGenerator={bootstrap.classNameGenerator} customRender={bootstrap.customRender} />
     </div>
   )
 }
-
-const customRender: CustomRender = (props) => {
-  const { type } = props
-  if (type === 'DisplayPrimitive') {
-    const { value } = props
-    if (typeof value === 'boolean') {
-      return () => <>{value ? '👍' : '👎'}</>
-    }
-  }
-}
-
-const bootstrapClassName: ClassNameGenerator = (props) => {
-  const { type } = props
-  switch (type) {
-    case 'Page':
-      return 'container py-4'
-    case 'Row':
-      return 'row'
-    case 'Col':
-      return 'col'
-    case 'Button':
-      return 'btn btn-primary'
-    case 'Table':
-      return 'table table-striped'
-  }
-}

packages/vanilla/src/main.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 
 import App from './App'
-import './main.scss'
+import 'fastui-bootstrap/main.scss'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>

packages/vanilla/tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "paths": {
-      "fastui": ["../fastui/src"]
+      "fastui": ["../fastui/src"],
+      "fastui-bootstrap": ["../fastui-bootstrap/src"]
     }
   },
   "include": ["src"],

packages/vanilla/vite.config.ts

@@ -19,6 +19,7 @@ export default () => {
       alias: {
         '@': path.resolve(__dirname, './src'),
         fastui: path.resolve(__dirname, '../fastui/src'),
+        'fastui-bootstrap': path.resolve(__dirname, '../fastui-bootstrap/src'),
       },
     },
     server: serverConfig,

packages/vanilla/server.py → python/demo/main.py

@@ -4,14 +4,13 @@
 from enum import StrEnum
 from typing import Annotated, Literal
 
-from fastapi import FastAPI, UploadFile
-from pydantic import BaseModel, Field
-
+from fastapi import UploadFile
+from fastui import AnyComponent, FastUI, dev_fastapi_app
 from fastui import components as c
-from fastui import FastUI, AnyComponent, dev_fastapi_app
-from fastui.forms import fastui_form, FormResponse, FormFile
 from fastui.display import Display
-from fastui.events import PageEvent, GoToEvent
+from fastui.events import GoToEvent, PageEvent
+from fastui.forms import FormFile, FormResponse, fastui_form
+from pydantic import BaseModel, Field
 
 # app = FastAPI()
 app = dev_fastapi_app()
@@ -22,20 +21,22 @@ def read_root() -> AnyComponent:
     return c.Page(
         children=[
             c.Heading(text='Hello World'),
-            c.Row(children=[
-                c.Col(children=[c.Text(text='Hello World')]),
-                c.Col(children=[c.Button(text='Show Modal', on_click=PageEvent(name='modal'))]),
-                c.Col(children=[c.Button(text='View Table', on_click=GoToEvent(url='/table'))]),
-                c.Col(children=[c.Button(text='Form', on_click=GoToEvent(url='/form'))]),
-            ]),
+            c.Row(
+                children=[
+                    c.Col(children=[c.Text(text='Hello World')]),
+                    c.Col(children=[c.Button(text='Show Modal', on_click=PageEvent(name='modal'))]),
+                    c.Col(children=[c.Button(text='View Table', on_click=GoToEvent(url='/table'))]),
+                    c.Col(children=[c.Button(text='Form', on_click=GoToEvent(url='/form'))]),
+                ]
+            ),
             c.Modal(
                 title='Modal Title',
                 body=[c.Text(text='Modal Content')],
                 footer=[c.Button(text='Close', on_click=PageEvent(name='modal'))],
                 open_trigger=PageEvent(name='modal'),
             ),
         ],
-        class_name='+ mt-4'
+        class_name='+ mt-4',
     )
 
 
@@ -61,8 +62,8 @@ def table_view() -> AnyComponent:
                     c.TableColumn(field='name', on_click=GoToEvent(url='/more/{id}/')),
                     c.TableColumn(field='dob', display=Display.date),
                     c.TableColumn(field='enabled'),
-                ]
-            )
+                ],
+            ),
         ]
     )
 
@@ -107,7 +108,7 @@ def form_view() -> AnyComponent:
                 #     c.Button(text='Cancel', on_click=GoToEvent(url='/')),
                 #     c.Button(text='Submit', html_type='submit'),
                 # ]
-            )
+            ),
         ]
     )
     debug(f)