Docs updates

docs/Utils.ipynb

@@ -0,0 +1,136 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "id": "e79166fd",
+   "metadata": {},
+   "source": [
+    "# Utils\n",
+    "\n",
+    "> Utilities for building the docs page that don't belong anywhere else"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "2535ee4e",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "#| default_exp utils"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "id": "4783d9ce",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "#| export\n",
+    "from IPython.display import display, HTML\n",
+    "from fasthtml.common import *\n",
+    "from fh_frankenui.core import *\n",
+    "from fasthtml.jupyter import *\n",
+    "from uuid import uuid4"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "id": "b2943fa8",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "#| export\n",
+    "def HShow(comp, iframe_height=\"auto\", app=None, port=8000):\n",
+    "    route = f'/{uuid4()}'\n",
+    "    app.get(route)(lambda: comp)\n",
+    "    display(HTML(f'<a href=\"http://localhost:{port}{route}\" target=\"_blank\">Open in new tab</a>'))\n",
+    "    return HTMX(route,port=port,iframe_height=iframe_height)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "id": "bfa48e0b",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "#| export\n",
+    "def create_server(app, stop_server=True,server_varname='server'):\n",
+    "    if stop_server and server_varname in globals(): globals()[server_varname].stop()\n",
+    "    for port in range(8000,8030):                   \n",
+    "        if is_port_free(port):\n",
+    "            server = JupyUvi(app, port=port)\n",
+    "            Show = partial(HShow, app=app, port=port)\n",
+    "            return server, Show"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 6,
+   "id": "b8e1807f",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "#| export\n",
+    "hjs = (Style('html.dark .hljs-copy-button {background-color: #e0e0e0; color: #2d2b57;}'),\n",
+    "                Link(rel='stylesheet', href='https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/atom-one-dark.css', disabled=True),\n",
+    "                Link(rel='stylesheet', href='https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/atom-one-light.css', disabled=True),\n",
+    "                Script(src='https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js'),\n",
+    "                Script(src='https://cdn.jsdelivr.net/gh/arronhunt/highlightjs-copy/dist/highlightjs-copy.min.js'),\n",
+    "                Link(rel='stylesheet', href='https://cdn.jsdelivr.net/gh/arronhunt/highlightjs-copy/dist/highlightjs-copy.min.css'),\n",
+    "                Style('.hljs-copy-button {background-color: #2d2b57;}'),\n",
+    "                Script(src='https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/languages/python.min.js'),\n",
+    "                Script(\"hljs.addPlugin(new CopyButtonPlugin());\\r\\nhljs.configure({'cssSelector': 'pre code'});\\r\\nhtmx.onLoad(hljs.highlightAll);\", type='module'),\n",
+    "                Script('''const observer = new MutationObserver(mutations => {\n",
+    "                          mutations.forEach(mutation => {\n",
+    "                            if (mutation.target.tagName === 'HTML' && mutation.attributeName === 'class') {\n",
+    "                              const isDark = mutation.target.classList.contains('dark');\n",
+    "                              document.querySelector('link[href*=\"atom-one-dark.css\"]').disabled = !isDark;\n",
+    "                              document.querySelector('link[href*=\"atom-one-light.css\"]').disabled = isDark;\n",
+    "                            }\n",
+    "                          });\n",
+    "                        });\n",
+    "\n",
+    "                        observer.observe(document.documentElement, { attributes: true });\n",
+    "\n",
+    "                        // Initial setup\n",
+    "                        const isDark = document.documentElement.classList.contains('dark');\n",
+    "                        document.querySelector('link[href*=\"atom-one-dark.css\"]').disabled = !isDark;\n",
+    "                        document.querySelector('link[href*=\"atom-one-light.css\"]').disabled = isDark;\n",
+    "                        '''))"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "e6a70a7a",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.12.4"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

docs/app/api_reference.py

@@ -0,0 +1,239 @@
+"""Reference to all FrankenUI Components"""
+
+# AUTOGENERATED! DO NOT EDIT! File to edit: ../API Reference.ipynb.
+
+# %% auto 0
+__all__ = ['docs_button', 'docs_heading', 'docs_headers', 'docs_textstyle', 'docs_articles_containers_sections', 'docs_cards',
+           'docs_lists', 'enum_to_html_table', 'render_content', 'create_doc_section', 'string2code_string',
+           'extract_function_body', 'fn2code_string', 'ex_buttons', 'ex_headings', 'ex_textfont', 'ex_textt',
+           'ex_articles', 'ex_containers', 'ex_card', 'Tags', 'ex_card2', 'ex_lists']
+
+# %% ../API Reference.ipynb
+from fasthtml.common import *
+
+from fh_frankenui.core import *
+from nbdev.showdoc import *
+import inspect
+
+from enum import EnumType
+from collections.abc import Callable
+
+# %% ../API Reference.ipynb
+def enum_to_html_table(enum_class):
+    headers = ["Option", "Value"]
+    rows = [[name, value.value] for name, value in enum_class.__members__.items()]
+    return Div(
+        Hr(cls='uk-divider-icon my-4'),
+        H3(enum_class.__name__,cls='my-4'),
+        P(I(enum_class.__doc__)),
+        TableFromLists(headers, rows, cls=(TableT.hover, 'uk-table-small')),)
+
+# %% ../API Reference.ipynb
+from uuid import uuid4
+def render_content(c):
+    if isinstance(c, str):        return render_md(c)
+    elif isinstance(c, EnumType): return enum_to_html_table(c)
+    elif isinstance(c, FT):       return c
+    elif isinstance(c, tuple):    
+        _id = 'f'+str(uuid4())
+        return Card(
+            Button(FullySpacedDiv("See Source",UkIcon('corner-down-right', 20, 20, 3)), uk_toggle=f"target: #{_id}", id=_id, cls=ButtonT.primary),
+            Button(FullySpacedDiv("See Output",UkIcon('corner-down-right', 20, 20, 3)), uk_toggle=f"target: #{_id}", id=_id, cls=ButtonT.primary, hidden=True),
+            Div(c[0], id=_id),
+            Div(Pre(Code(c[1])), id=_id, hidden=True, cls="mockup-code"),
+            cls='my-8')
+    elif isinstance(c, Callable): 
+        _html = show_doc(c, renderer=BasicHtmlRenderer)._repr_html_()
+        return NotStr(apply_classes(_html, class_map_mods={"table":'uk-table uk-table-hover uk-table-small'}))
+    else: return c    
+
+# %% ../API Reference.ipynb
+def create_doc_section(*content, title, md_content=None):
+    return lambda: Section(H1(title,cls='mb-10'), *map(render_content, content))
+
+# %% ../API Reference.ipynb
+def string2code_string(code: str) -> tuple: return eval(code), code
+
+def extract_function_body(func):
+    source = inspect.getsource(func)
+    body_start = source.index(':') + 1
+    body = source[body_start:]
+    return body.replace('return ', '', 1)
+
+def fn2code_string(fn: Callable) -> tuple: return fn(), extract_function_body(fn)
+
+# %% ../API Reference.ipynb
+def ex_buttons(): 
+    return Div(
+        Button("Default",   cls=ButtonT.default),
+        Button("Primary",   cls=ButtonT.primary),
+        Button("Secondary", cls=ButtonT.secondary),
+        Button("Danger",    cls=ButtonT.danger),
+        Button("Text",      cls=ButtonT.text),
+        Button("Link",      cls=ButtonT.link),
+        Button("Ghost",     cls=ButtonT.ghost),
+        )
+
+# %% ../API Reference.ipynb
+docs_button = create_doc_section(Button, 
+                       ButtonT, 
+                       fn2code_string(ex_buttons),
+                       title="Buttons")
+
+# %% ../API Reference.ipynb
+def ex_headings():
+    return Div(
+        H1("Level 1 Heading (H1)"), 
+        H2("Level 2 Heading (H2)"), 
+        H3("Level 3 Heading (H3)"), 
+        H4("Level 4 Heading (H4)")
+        )
+
+# %% ../API Reference.ipynb
+docs_heading = create_doc_section(
+                       fn2code_string(ex_headings),
+                        H1, H2, H3, H4, 
+                        title="Headings")
+
+# %% ../API Reference.ipynb
+docs_headers = create_doc_section( 
+                       "To get headers with a default theme use `hdrs=Theme.<color>.headers()`.  For example for the blue theme you would use `hdrs=Theme.blue.headers().  Theme options are:",
+                        "> Note: Tailwind is included in the headers for convenience",
+                        Theme,
+                       title="Headers")
+
+# %% ../API Reference.ipynb
+def ex_textfont():
+    return Div(
+    P('muted_sm', cls=TextFont.muted_sm),
+    P('muted_lg', cls=TextFont.muted_lg), 
+    P('bold_sm', cls=TextFont.bold_sm),
+    )
+
+# %% ../API Reference.ipynb
+def ex_textt():
+    return Grid(
+        P('lead',           cls=TextT.lead),
+        P('meta',           cls=TextT.meta),
+        P('italic',         cls=TextT.italic),
+        P('small',          cls=TextT.small),
+        P('default',        cls=TextT.default),
+        P('large',          cls=TextT.large),
+        P('light',          cls=TextT.light),
+        P('normal',         cls=TextT.normal),
+        P('bold',           cls=TextT.bold),
+        P('lighter',        cls=TextT.lighter),
+        P('bolder',         cls=TextT.bolder),
+        P('capitalize',     cls=TextT.capitalize),
+        P('uppercase',      cls=TextT.uppercase),
+        P('lowercase',      cls=TextT.lowercase),
+        P('decoration_none',cls=TextT.decoration_none),
+        P('muted',          cls=TextT.muted),
+        P('primary',        cls=TextT.primary),
+        P('secondary',      cls=TextT.secondary),
+        P('success',        cls=TextT.success),
+        P('warning',        cls=TextT.warning),
+        P('danger',         cls=TextT.danger),
+        P('left',           cls=TextT.left),
+        P('right',          cls=TextT.right),
+        P('center',         cls=TextT.center),
+        P('justify',        cls=TextT.justify),
+        P('top',            cls=TextT.top),
+        P('middle',         cls=TextT.middle),
+        P('bottom',         cls=TextT.bottom),
+        P('baseline',       cls=TextT.baseline),
+        P('truncate',       cls=TextT.truncate),
+        P('break_',         cls=TextT.break_),
+        P('nowrap',         cls=TextT.nowrap),
+        )
+
+# %% ../API Reference.ipynb
+docs_textstyle = create_doc_section( 
+   "Styling text is possibly the most common style thing to do, so we have a couple of helpers for discoverability inside python.  `TextFont` is intended to be combinations are are widely applicable and used often, where `TextT` is intended to be more flexible options for you to combine together yourself.",
+    TextFont,
+    fn2code_string(ex_textfont),
+    TextT,
+    fn2code_string(ex_textt),
+    title="Text Style")
+
+# %% ../API Reference.ipynb
+def ex_articles():
+    return Article(
+        ArticleTitle("Sample Article Title"), 
+        ArticleMeta("By: John Doe"),
+        P('lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'))
+
+# %% ../API Reference.ipynb
+def ex_containers():
+    return Container(
+        "This is a sample container with custom styling.",
+        cls=ContainerT.xsmall,
+        style="background-color: #FFA500; color: #000000")
+
+# %% ../API Reference.ipynb
+docs_articles_containers_sections = create_doc_section(
+    ArticleMeta,
+    ArticleTitle,
+    Article,
+    fn2code_string(ex_articles),
+    Container,
+    ContainerT,
+    fn2code_string(ex_containers),
+    Section,
+    SectionT,
+    title="Articles, Containers & Sections"
+)
+
+# %% ../API Reference.ipynb
+def ex_card():
+    return Card(
+        Form(LabelInput("Input"),
+             LabelRange("Range")),
+        header=Div(
+            CardTitle("Header"),
+            P("A card with header and footer",cls=TextFont.muted_sm)),
+        footer=LAlignedDiv(Button("Footer Submit Button")))
+
+# %% ../API Reference.ipynb
+def Tags(cats): return Div(cls='space-x-2')(map(Label, cats))
+
+def ex_card2():
+    return Card(
+        LAlignedDiv(
+            A(Img(src="https://isaac-flath.github.io/website/posts/_TopicImages/FastHtml.jpg", style="width:200px"),href="#"),
+            Div(cls='space-y-3 uk-width-expand')(
+                H4("Creating Custom FastHTML Tags for Markdown Rendering"),
+                P("A step by step tutorial to rendering markdown in FastHTML using zero-md inside of DaisyUI chat bubbles"),
+                FullySpacedDiv(map(Span, ["Isaac Flath", "20-October-2024"]), cls=TextFont.muted_sm),
+                FullySpacedDiv(
+                    Tags(["FastHTML", "HTMX", "Web Apps"]),
+                    Button("Read", cls=(ButtonT.primary,'h-6'))))))
+
+# %% ../API Reference.ipynb
+docs_cards = create_doc_section(
+    Card,
+    H3("Example Usage"),
+    fn2code_string(ex_card),
+    fn2code_string(ex_card2),
+    CardTitle,
+    CardT,
+    "The remainder of these are only needed if you're doing something really special.  They are used in the `Card` function to generate the boilerplate for you.",
+    CardContainer,
+    CardHeader,
+    CardBody,
+    CardFooter,
+    title="Cards"
+)
+
+# %% ../API Reference.ipynb
+def ex_lists():
+    list_options = [(style,str(cls)) for style,cls in ListT.__members__.items()]
+    lists = [Div(H4(f"{style} List:"), List(Li("Item 1"), Li("Item 2"), cls=cls)) for style, cls in list_options]
+    return Grid(*lists)
+
+# %% ../API Reference.ipynb
+docs_lists = create_doc_section(
+    List,
+    fn2code_string(ex_lists),
+    ListT,
+    title="Lists")