Merge pull request #72 from AnswerDotAI/insertable

Insertable Select & Lightboxes
AnswerDotAI · Feb 18, 2025 · 1b2cc17 · 1b2cc17
2 parents ec3c3c7 + c4bf285
commit 1b2cc17
Show file tree

Hide file tree

Showing 6 changed files with 2,879 additions and 30 deletions.
diff --git a/docs/api_reference/api_reference.py b/docs/api_reference/api_reference.py
@@ -506,10 +506,20 @@ def ex_radio():
         Radio(name="radio-group", id="radio1"), 
         LabelRadio(label="Radio", id='radio1',cls='flex items-center space-x-4'))
 
-def ex_Select(): 
-    return Div(
-        Select(map(Option, ["Option 1", "Option 2", "Option 3"])),
-        LabelSelect(map(Option, ["Option 1", "Option 2", "Option 3"]), label="Select", id='myid'))
+def ex_insertable_select1():
+    fruit_opts = ['apple', 'orange', 'banana', 'mango']
+
+    return Grid(
+        Select(Option('Apple', value='apple'),
+               Option('Orange', value='orange'),
+               Option('Banana', value='banana'),
+               Option('Mango', value='mango'),
+               id="fruit", icon=True, insertable=True, placeholder="Choose a fruit..."),
+
+        Select(Optgroup(label="Fruit")(
+                    *map(lambda l: Option(l.capitalize(), value=l), sorted(fruit_opts))),
+                id="fruit", icon=True, insertable=True, placeholder="Choose a fruit...",
+                cls_custom="button: uk-input-fake justify-between w-full; dropdown: w-full"))
 
 def ex_select(): 
     return Div(
@@ -560,7 +570,6 @@ def ex_upload():
     LabelTextArea,
     LabelRadio,
     LabelSelect,
-    LabelSelect,
     Progress,
     fn2code_string(ex_progress),
     Radio,
@@ -575,12 +584,43 @@ def ex_upload():
     fn2code_string(ex_textarea),
     Select,
     fn2code_string(ex_select),
-    Select,
-    fn2code_string(ex_Select),
+    H3("Example: Insertable Select"),
+    Caption("In a production app, the user-inserted option would be saved server-side (db, session etc.)"),
+    fn2code_string(ex_insertable_select1),
     Legend,
     Fieldset,
     title="Forms")
 
+
+# Lightbox
+
+def ex_lightbox1():
+    return LightboxContainer(
+        LightboxItem(Button("Open"), href='https://picsum.photos/id/100/1280/720.webp', data_alt='A placeholder image to demonstrate the lightbox', data_caption='This is my super cool caption'),
+    )
+def ex_lightbox2():
+    return LightboxContainer(
+        LightboxItem(Button("Open"), href='https://picsum.photos/id/100/1280/720.webp', data_alt='A placeholder image to demonstrate the lightbox', data_caption='Image 1'),
+        LightboxItem(href='https://picsum.photos/id/101/1280/720.webp', data_alt='A placeholder image to demonstrate the lightbox', data_caption='Image 2'),
+        LightboxItem(href='https://picsum.photos/id/102/1280/720.webp', data_alt='A placeholder image to demonstrate the lightbox', data_caption='Image 3'),
+    )
+
+def ex_lightbox3():
+    return LightboxContainer(
+        LightboxItem(Button("mp4"), href='https://yootheme.com/site/images/media/yootheme-pro.mp4'),
+        LightboxItem(Button("Youtube"), href='https://www.youtube.com/watch?v=c2pz2mlSfXA'),
+        LightboxItem(Button("Vimeo"), href='https://vimeo.com/1084537'),
+        LightboxItem(Button("Iframe"), data_type='iframe', href='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4740.819266853735!2d9.99008871708242!3d53.550454675412404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3f9d24afe84a0263!2sRathaus!5e0!3m2!1sde!2sde!4v1499675200938'))
+
+docs_lightbox = create_doc_section(
+    H1("Lightbox API Reference"),
+    fn2code_string(ex_lightbox1),
+    fn2code_string(ex_lightbox2),
+    fn2code_string(ex_lightbox3),
+    LightboxContainer,
+    LightboxItem,
+    title="Lightbox")
+
 # Modals
 
 def ex_modal():
@@ -712,7 +752,6 @@ def ex_h_stacked_div():
     DivHStacked,
     fn2code_string(ex_h_stacked_div),
     FlexT,
-
     title="Layout")
 
 # Dividers
@@ -833,14 +872,6 @@ def ex_tabs2():
     NavHeaderLi,
     NavDividerLi,
     NavParentLi,
-    # NavBarCenter,
-    # NavBarRSide,
-    # NavBarLSide,
-    # NavBarContainer,
-    # NavBarNav,
-    # NavBarSubtitle,
-    # NavBarNavContainer,
-    # NavBarParentIcon,
     DropDownNavContainer,
     title="Navigation")
 
@@ -997,7 +1028,7 @@ def ex_markdown3():
 def ex_applyclasses():
     return apply_classes('<h1>Hello, World!</h1><p>This is a paragraph</p>')
 
-docs_markdown_HTMLstyling = create_doc_section(
+docs_markdown = create_doc_section(
     H1("Markdown + automated HTML styling API Reference"),
     fn2code_string(ex_markdown),
     render_md("You can overwrite the default styling for markdown rendering with your own css classes with  `class_map"),
@@ -1009,6 +1040,12 @@ def ex_applyclasses():
     fn2code_string(ex_applyclasses),
     title="Markdown + HTML Frankification")
 
+
+docs_html = create_doc_section(
+    H1("HTML Styling API Reference"),
+    fn2code_string(ex_applyclasses),
+    title="HTML Styling")
+
 def ex_loading1():
     return Loading()
 

diff --git a/monsterui/_modidx.py b/monsterui/_modidx.py
@@ -134,6 +134,8 @@
                                                                                        'monsterui/franken.py'),
                                    'monsterui.franken.LabelTextArea': ('franken.html#labeltextarea', 'monsterui/franken.py'),
                                    'monsterui.franken.Legend': ('franken.html#legend', 'monsterui/franken.py'),
+                                   'monsterui.franken.LightboxContainer': ('franken.html#lightboxcontainer', 'monsterui/franken.py'),
+                                   'monsterui.franken.LightboxItem': ('franken.html#lightboxitem', 'monsterui/franken.py'),
                                    'monsterui.franken.ListT': ('franken.html#listt', 'monsterui/franken.py'),
                                    'monsterui.franken.Mark': ('franken.html#mark', 'monsterui/franken.py'),
                                    'monsterui.franken.Meter': ('franken.html#meter', 'monsterui/franken.py'),

diff --git a/monsterui/core.py b/monsterui/core.py
@@ -82,9 +82,9 @@ def _headers_theme(color, mode='auto', radii=ThemeRadii.sm, shadows=ThemeShadows
 
 # %% ../nbs/01_core.ipynb
 HEADER_URLS = {
-        'franken_css': "https://unpkg.com/[email protected].40/dist/css/core.min.css",
-        'franken_js_core': "https://unpkg.com/[email protected].40/dist/js/core.iife.js",
-        'franken_icons': "https://unpkg.com/[email protected].40/dist/js/icon.iife.js",
+        'franken_css': "https://unpkg.com/[email protected].45/dist/css/core.min.css",
+        'franken_js_core': "https://unpkg.com/[email protected].45/dist/js/core.iife.js",
+        'franken_icons': "https://unpkg.com/[email protected].45/dist/js/icon.iife.js",
         'tailwind': "https://cdn.tailwindcss.com",
         'daisyui': "https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css",
         'highlight_js': "https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js",

diff --git a/monsterui/franken.py b/monsterui/franken.py
@@ -16,7 +16,7 @@
            'NavSubtitle', 'NavCloseLi', 'ScrollspyT', 'NavBar', 'SliderContainer', 'SliderItems', 'SliderNav', 'Slider',
            'DropDownNavContainer', 'TabContainer', 'CardT', 'CardTitle', 'CardHeader', 'CardBody', 'CardFooter',
            'CardContainer', 'Card', 'TableT', 'Table', 'Td', 'Th', 'Tbody', 'TableFromLists', 'TableFromDicts',
-           'apply_classes', 'render_md', 'get_franken_renderer', 'ThemePicker']
+           'apply_classes', 'render_md', 'get_franken_renderer', 'ThemePicker', 'LightboxContainer', 'LightboxItem']
 
 # %% ../nbs/02_franken.ipynb
 import fasthtml.common as fh
@@ -785,6 +785,7 @@ def Select(*option,            # Options for the select dropdown (can use `Optio
           name="",            # Name attribute for the select input
           placeholder="",     # Placeholder text for the select input
           searchable=False,   # Whether the select should be searchable
+          insertable=False,   # Whether to allow user-defined options to be added
           select_kwargs=None, # Additional Arguments passed to Select
            **kwargs           # Additional arguments passed to Uk_select
           ):          
@@ -795,6 +796,7 @@ def Select(*option,            # Options for the select dropdown (can use `Optio
                          cls_custom=cls_custom,
                          searchable=searchable,
                          placeholder=placeholder,
+                         insertable=insertable,
                          cls=inp_cls,
                          id=id, 
                          name=name,
@@ -1519,3 +1521,22 @@ def _optgrp(key, lbl, opts): return fh.Optgroup(data_key=key, label=lbl)(*opts)
         _opt('light','Light',data_icon='sun'), _opt('dark','Dark',data_icon='moon')]))
     from fasthtml.components import Uk_theme_switcher
     return Div(Uk_theme_switcher(fh.Select(*groups, hidden=True),  id="theme-switcher"), cls=stringify(cls))
+
+# %% ../nbs/02_franken.ipynb
+def LightboxContainer(*lightboxitem, # `LightBoxItem`s that will be inside lightbox
+                      data_uk_lightbox='counter: true', # See https://franken-ui.dev/docs/2.0/lightbox for advanced options
+                      **kwargs # Additional options for outer container
+                     )->FT: # Lightbox
+    "Lightbox container that will hold `LightboxItems`"
+    return fh.Div(*lightboxitem, data_uk_lightbox=data_uk_lightbox, **kwargs)
+
+# %% ../nbs/02_franken.ipynb
+def LightboxItem(*c, # Component that when clicked will open the lightbox (often a button)
+                 href, # Href to image, youtube video, vimeo, google maps, etc.
+                 data_alt=None, # Alt text for the lightbox item/image
+                 data_caption=None, # Caption for the item that shows below it
+                 cls='', # Class for the A tag (often nothing or `uk-btn`)
+                 **kwargs # Additional args for the `A` tag
+                )->FT: # A(... href, data_alt, cls., ...)
+    "Anchor tag with appropriate structure to go inside a `LightBoxContainer`"
+    return fh.A(*c, href=href, data_alt=data_alt, cls=stringify(cls), **kwargs)
diff --git a/nbs/01_core.ipynb b/nbs/01_core.ipynb
@@ -213,9 +213,9 @@
    "source": [
     "#| export\n",
     "HEADER_URLS = {\n",
-    "        'franken_css': \"https://unpkg.com/[email protected].40/dist/css/core.min.css\",\n",
-    "        'franken_js_core': \"https://unpkg.com/[email protected].40/dist/js/core.iife.js\",\n",
-    "        'franken_icons': \"https://unpkg.com/[email protected].40/dist/js/icon.iife.js\",\n",
+    "        'franken_css': \"https://unpkg.com/[email protected].45/dist/css/core.min.css\",\n",
+    "        'franken_js_core': \"https://unpkg.com/[email protected].45/dist/js/core.iife.js\",\n",
+    "        'franken_icons': \"https://unpkg.com/[email protected].45/dist/js/icon.iife.js\",\n",
     "        'tailwind': \"https://cdn.tailwindcss.com\",\n",
     "        'daisyui': \"https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css\",\n",
     "        'highlight_js': \"https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js\",\n",