├── fhdaisy ├── __init__.py ├── _modidx.py ├── core.py ├── xtras.py └── comp.py ├── CHANGELOG.md ├── nbs ├── sidebar.yml ├── nbdev.yml ├── _quarto.yml ├── styles.css ├── 00_core.ipynb ├── 01_xtras.ipynb └── index.ipynb ├── MANIFEST.in ├── .github └── workflows │ ├── test.yaml.off │ └── deploy.yaml ├── pyproject.toml ├── settings.ini ├── .gitignore ├── setup.py ├── README.md └── LICENSE /fhdaisy/__init__.py: -------------------------------------------------------------------------------- 1 | __version__ = "0.0.1" 2 | from .comp import * 3 | from .xtras import * 4 | 5 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Release notes 2 | 3 | 4 | 5 | ## 0.0.1 6 | 7 | 8 | Init commit 9 | -------------------------------------------------------------------------------- /nbs/sidebar.yml: -------------------------------------------------------------------------------- 1 | website: 2 | sidebar: 3 | contents: 4 | - index.ipynb 5 | - 00_core.ipynb 6 | - 01_xtras.ipynb 7 | -------------------------------------------------------------------------------- /MANIFEST.in: -------------------------------------------------------------------------------- 1 | include settings.ini 2 | include LICENSE 3 | include CONTRIBUTING.md 4 | include README.md 5 | recursive-exclude * __pycache__ 6 | -------------------------------------------------------------------------------- /.github/workflows/test.yaml.off: -------------------------------------------------------------------------------- 1 | name: CI 2 | on: [workflow_dispatch, pull_request, push] 3 | 4 | jobs: 5 | test: 6 | runs-on: ubuntu-latest 7 | steps: [uses: fastai/workflows/nbdev-ci@master] 8 | -------------------------------------------------------------------------------- /nbs/nbdev.yml: -------------------------------------------------------------------------------- 1 | project: 2 | output-dir: _docs 3 | 4 | website: 5 | title: "fhdaisy" 6 | site-url: "https://answerdotai.github.io/fhdaisy" 7 | description: "A FastHTML wrapper for Daisy-UI" 8 | repo-branch: main 9 | repo-url: "https://github.com/answerdotai/fhdaisy" 10 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yaml: -------------------------------------------------------------------------------- 1 | name: Deploy to GitHub Pages 2 | 3 | permissions: 4 | contents: write 5 | pages: write 6 | 7 | on: 8 | push: 9 | branches: [ "main", "master" ] 10 | workflow_dispatch: 11 | jobs: 12 | deploy: 13 | runs-on: ubuntu-latest 14 | steps: [uses: fastai/workflows/quarto-ghp@master] 15 | -------------------------------------------------------------------------------- /nbs/_quarto.yml: -------------------------------------------------------------------------------- 1 | project: 2 | type: website 3 | 4 | format: 5 | html: 6 | theme: cosmo 7 | css: styles.css 8 | toc: true 9 | keep-md: true 10 | commonmark: default 11 | 12 | website: 13 | twitter-card: true 14 | open-graph: true 15 | repo-actions: [issue] 16 | navbar: 17 | background: primary 18 | search: true 19 | sidebar: 20 | style: floating 21 | 22 | metadata-files: [nbdev.yml, sidebar.yml] -------------------------------------------------------------------------------- /pyproject.toml: -------------------------------------------------------------------------------- 1 | [build-system] 2 | requires = ["setuptools>=64.0"] 3 | build-backend = "setuptools.build_meta" 4 | 5 | [project] 6 | name="fhdaisy" 7 | requires-python=">=3.10" 8 | dynamic = [ "keywords", "description", "version", "dependencies", "optional-dependencies", "readme", "license", "authors", "classifiers", "entry-points", "scripts", "urls"] 9 | 10 | [tool.uv] 11 | cache-keys = [{ file = "pyproject.toml" }, { file = "settings.ini" }, { file = "setup.py" }] 12 | -------------------------------------------------------------------------------- /nbs/styles.css: -------------------------------------------------------------------------------- 1 | .cell { 2 | margin-bottom: 1rem; 3 | } 4 | 5 | .cell > .sourceCode { 6 | margin-bottom: 0; 7 | } 8 | 9 | .cell-output > pre { 10 | margin-bottom: 0; 11 | } 12 | 13 | .cell-output > pre, .cell-output > .sourceCode > pre, .cell-output-stdout > pre { 14 | margin-left: 0.8rem; 15 | margin-top: 0; 16 | background: none; 17 | border-left: 2px solid lightsalmon; 18 | border-top-left-radius: 0; 19 | border-top-right-radius: 0; 20 | } 21 | 22 | .cell-output > .sourceCode { 23 | border: none; 24 | } 25 | 26 | .cell-output > .sourceCode { 27 | background: none; 28 | margin-top: 0; 29 | } 30 | 31 | div.description { 32 | padding-left: 2px; 33 | padding-top: 5px; 34 | font-style: italic; 35 | font-size: 135%; 36 | opacity: 70%; 37 | } 38 | -------------------------------------------------------------------------------- /settings.ini: -------------------------------------------------------------------------------- 1 | [DEFAULT] 2 | # All sections below are required unless otherwise specified. 3 | # See https://github.com/AnswerDotAI/nbdev/blob/main/settings.ini for examples. 4 | 5 | ### Python library ### 6 | repo = fhdaisy 7 | lib_name = %(repo)s 8 | version = 0.0.1 9 | min_python = 3.10 10 | license = apache2 11 | black_formatting = False 12 | 13 | ### nbdev ### 14 | doc_path = _docs 15 | lib_path = fhdaisy 16 | nbs_path = nbs 17 | recursive = True 18 | tst_flags = notest 19 | put_version_in_init = True 20 | update_pyproject = True 21 | 22 | ### Docs ### 23 | branch = main 24 | custom_sidebar = False 25 | doc_host = https://%(user)s.github.io 26 | doc_baseurl = /%(repo)s 27 | git_url = https://github.com/%(user)s/%(repo)s 28 | title = %(lib_name)s 29 | user = answerdotai 30 | 31 | ### PyPI ### 32 | audience = Developers 33 | author = Jeremy Howard 34 | author_email = info@fast.ai 35 | copyright = 2025 onwards, %(author)s 36 | description = A FastHTML wrapper for Daisy-UI 37 | keywords = nbdev jupyter notebook python 38 | language = English 39 | status = 3 40 | requirements = fastcore python-fasthtml 41 | 42 | ### Optional ### 43 | # dev_requirements = 44 | # console_scripts = 45 | # conda_user = 46 | # package_data = 47 | -------------------------------------------------------------------------------- /fhdaisy/_modidx.py: -------------------------------------------------------------------------------- 1 | # Autogenerated by nbdev 2 | 3 | d = { 'settings': { 'branch': 'main', 4 | 'doc_baseurl': '/fhdaisy', 5 | 'doc_host': 'https://answerdotai.github.io', 6 | 'git_url': 'https://github.com/answerdotai/fhdaisy', 7 | 'lib_path': 'fhdaisy'}, 8 | 'syms': { 'fhdaisy.comp': {}, 9 | 'fhdaisy.core': { 'fhdaisy.core._is_neg_twu': ('core.html#_is_neg_twu', 'fhdaisy/core.py'), 10 | 'fhdaisy.core.hyphens2camel': ('core.html#hyphens2camel', 'fhdaisy/core.py'), 11 | 'fhdaisy.core.mk_compfn': ('core.html#mk_compfn', 'fhdaisy/core.py'), 12 | 'fhdaisy.core.mk_previewer': ('core.html#mk_previewer', 'fhdaisy/core.py')}, 13 | 'fhdaisy.xtras': { 'fhdaisy.xtras.ChatPair': ('xtras.html#chatpair', 'fhdaisy/xtras.py'), 14 | 'fhdaisy.xtras.ChatTurn': ('xtras.html#chatturn', 'fhdaisy/xtras.py'), 15 | 'fhdaisy.xtras.mk_accordion': ('xtras.html#mk_accordion', 'fhdaisy/xtras.py'), 16 | 'fhdaisy.xtras.mk_accordion_item': ('xtras.html#mk_accordion_item', 'fhdaisy/xtras.py'), 17 | 'fhdaisy.xtras.mk_dropdown': ('xtras.html#mk_dropdown', 'fhdaisy/xtras.py'), 18 | 'fhdaisy.xtras.mk_fab': ('xtras.html#mk_fab', 'fhdaisy/xtras.py'), 19 | 'fhdaisy.xtras.mk_swap': ('xtras.html#mk_swap', 'fhdaisy/xtras.py')}}} 20 | -------------------------------------------------------------------------------- /fhdaisy/core.py: -------------------------------------------------------------------------------- 1 | """Builder API used behind the scenes to create the basic components""" 2 | 3 | # AUTOGENERATED! DO NOT EDIT! File to edit: ../nbs/00_core.ipynb. 4 | 5 | # %% auto 0 6 | __all__ = ['daisy_link', 'tw_scr', 'daisy_hdrs', 'mk_previewer', 'hyphens2camel', 'mk_compfn'] 7 | 8 | # %% ../nbs/00_core.ipynb 2 9 | from fastcore.utils import * 10 | from fasthtml.common import * 11 | import fasthtml.components as fh 12 | from fasthtml.jupyter import * 13 | 14 | import inspect 15 | 16 | # %% ../nbs/00_core.ipynb 5 17 | daisy_link = Link(href='https://cdn.jsdelivr.net/npm/daisyui@5', rel='stylesheet', type='text/css') 18 | tw_scr = Script(src='https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4') 19 | daisy_hdrs = (daisy_link, tw_scr) 20 | 21 | # %% ../nbs/00_core.ipynb 6 22 | def mk_previewer(app=None, cls=f'max-w-lg'): 23 | xcls = cls 24 | if not app: app=FastHTML(hdrs=daisy_hdrs) 25 | def p(*c, cls='', **kw): 26 | return HTMX(Div(cls=f'{xcls} {cls}')(*c), app=app, host=None, port=None, **kw) 27 | return p 28 | 29 | # %% ../nbs/00_core.ipynb 11 30 | def hyphens2camel(x): return ''.join(o.title() for o in x.split('-')) 31 | hyphens2camel('chat-bubble') 32 | 33 | # %% ../nbs/00_core.ipynb 13 34 | _neg_twu_pfxs = set('mt ml mr mb mx my translate rotate scale skew inset top bottom left right z space'.split()) 35 | def _is_neg_twu(x): return x[0]=='-' and len(parts:=x[1:].split('-'))>=2 and parts[0] in _neg_twu_pfxs 36 | 37 | # %% ../nbs/00_core.ipynb 15 38 | def mk_compfn(compcls, tag=None, name=None, xcls='', **compkw): 39 | if not name: name=hyphens2camel(compcls) 40 | if not tag: tag=name 41 | compfunc = getattr(fh, tag) 42 | 43 | def fn(*c, cls='', **kw): 44 | cls = ' '.join(f'{compcls if x[0]=="-" and not _is_neg_twu(x) else ""}{x}' for x in cls.split()) 45 | return compfunc(*c, cls=f'{compcls} {cls} {xcls}', **compkw, **kw) 46 | 47 | fn.__name__ = name 48 | inspect.currentframe().f_back.f_globals[name] = fn 49 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .sesskey 2 | _docs/ 3 | _proc/ 4 | 5 | *.bak 6 | .gitattributes 7 | .last_checked 8 | .gitconfig 9 | *.bak 10 | *.log 11 | *~ 12 | ~* 13 | _tmp* 14 | tmp* 15 | tags 16 | *.pkg 17 | 18 | # Byte-compiled / optimized / DLL files 19 | __pycache__/ 20 | *.py[cod] 21 | *$py.class 22 | 23 | # C extensions 24 | *.so 25 | 26 | # Distribution / packaging 27 | .Python 28 | env/ 29 | build/ 30 | conda/ 31 | develop-eggs/ 32 | dist/ 33 | downloads/ 34 | eggs/ 35 | .eggs/ 36 | lib/ 37 | lib64/ 38 | parts/ 39 | sdist/ 40 | var/ 41 | wheels/ 42 | *.egg-info/ 43 | .installed.cfg 44 | *.egg 45 | 46 | # PyInstaller 47 | # Usually these files are written by a python script from a template 48 | # before PyInstaller builds the exe, so as to inject date/other infos into it. 49 | *.manifest 50 | *.spec 51 | 52 | # Installer logs 53 | pip-log.txt 54 | pip-delete-this-directory.txt 55 | 56 | # Unit test / coverage reports 57 | htmlcov/ 58 | .tox/ 59 | .coverage 60 | .coverage.* 61 | .cache 62 | nosetests.xml 63 | coverage.xml 64 | *.cover 65 | .hypothesis/ 66 | 67 | # Translations 68 | *.mo 69 | *.pot 70 | 71 | # Django stuff: 72 | *.log 73 | local_settings.py 74 | 75 | # Flask stuff: 76 | instance/ 77 | .webassets-cache 78 | 79 | # Scrapy stuff: 80 | .scrapy 81 | 82 | # Sphinx documentation 83 | docs/_build/ 84 | 85 | # PyBuilder 86 | target/ 87 | 88 | # Jupyter Notebook 89 | .ipynb_checkpoints 90 | 91 | # pyenv 92 | .python-version 93 | 94 | # celery beat schedule file 95 | celerybeat-schedule 96 | 97 | # SageMath parsed files 98 | *.sage.py 99 | 100 | # dotenv 101 | .env 102 | 103 | # virtualenv 104 | .venv 105 | venv/ 106 | ENV/ 107 | 108 | # Spyder project settings 109 | .spyderproject 110 | .spyproject 111 | 112 | # Rope project settings 113 | .ropeproject 114 | 115 | # mkdocs documentation 116 | /site 117 | 118 | # mypy 119 | .mypy_cache/ 120 | 121 | .vscode 122 | *.swp 123 | 124 | # osx generated files 125 | .DS_Store 126 | .DS_Store? 127 | .Trashes 128 | ehthumbs.db 129 | Thumbs.db 130 | .idea 131 | 132 | # pytest 133 | .pytest_cache 134 | 135 | # tools/trust-doc-nbs 136 | docs_src/.last_checked 137 | 138 | # symlinks to fastai 139 | docs_src/fastai 140 | tools/fastai 141 | 142 | # link checker 143 | checklink/cookies.txt 144 | 145 | # .gitconfig is now autogenerated 146 | .gitconfig 147 | 148 | # Quarto installer 149 | .deb 150 | .pkg 151 | 152 | # Quarto 153 | .quarto 154 | -------------------------------------------------------------------------------- /setup.py: -------------------------------------------------------------------------------- 1 | from pkg_resources import parse_version 2 | from configparser import ConfigParser 3 | import setuptools, shlex 4 | assert parse_version(setuptools.__version__)>=parse_version('36.2') 5 | 6 | # note: all settings are in settings.ini; edit there, not here 7 | config = ConfigParser(delimiters=['=']) 8 | config.read('settings.ini', encoding='utf-8') 9 | cfg = config['DEFAULT'] 10 | 11 | cfg_keys = 'version description keywords author author_email'.split() 12 | expected = cfg_keys + "lib_name user branch license status min_python audience language".split() 13 | for o in expected: assert o in cfg, "missing expected setting: {}".format(o) 14 | setup_cfg = {o:cfg[o] for o in cfg_keys} 15 | 16 | licenses = { 17 | 'apache2': ('Apache Software License 2.0','OSI Approved :: Apache Software License'), 18 | 'mit': ('MIT License', 'OSI Approved :: MIT License'), 19 | 'gpl2': ('GNU General Public License v2', 'OSI Approved :: GNU General Public License v2 (GPLv2)'), 20 | 'gpl3': ('GNU General Public License v3', 'OSI Approved :: GNU General Public License v3 (GPLv3)'), 21 | 'bsd3': ('BSD License', 'OSI Approved :: BSD License'), 22 | } 23 | statuses = [ '1 - Planning', '2 - Pre-Alpha', '3 - Alpha', 24 | '4 - Beta', '5 - Production/Stable', '6 - Mature', '7 - Inactive' ] 25 | py_versions = '3.6 3.7 3.8 3.9 3.10 3.11 3.12'.split() 26 | 27 | requirements = shlex.split(cfg.get('requirements', '')) 28 | if cfg.get('pip_requirements'): requirements += shlex.split(cfg.get('pip_requirements', '')) 29 | min_python = cfg['min_python'] 30 | lic = licenses.get(cfg['license'].lower(), (cfg['license'], None)) 31 | dev_requirements = (cfg.get('dev_requirements') or '').split() 32 | 33 | package_data = dict() 34 | pkg_data = cfg.get('package_data', None) 35 | if pkg_data: 36 | package_data[cfg['lib_name']] = pkg_data.split() # split as multiple files might be listed 37 | # Add package data to setup_cfg for setuptools.setup(..., **setup_cfg) 38 | setup_cfg['package_data'] = package_data 39 | 40 | setuptools.setup( 41 | name = cfg['lib_name'], 42 | license = lic[0], 43 | classifiers = [ 44 | 'Development Status :: ' + statuses[int(cfg['status'])], 45 | 'Intended Audience :: ' + cfg['audience'].title(), 46 | 'Natural Language :: ' + cfg['language'].title(), 47 | ] + ['Programming Language :: Python :: '+o for o in py_versions[py_versions.index(min_python):]] + (['License :: ' + lic[1] ] if lic[1] else []), 48 | url = cfg['git_url'], 49 | packages = setuptools.find_packages(), 50 | include_package_data = True, 51 | install_requires = requirements, 52 | extras_require={ 'dev': dev_requirements }, 53 | dependency_links = cfg.get('dep_links','').split(), 54 | python_requires = '>=' + cfg['min_python'], 55 | long_description = open('README.md', encoding='utf-8').read(), 56 | long_description_content_type = 'text/markdown', 57 | zip_safe = False, 58 | entry_points = { 59 | 'console_scripts': cfg.get('console_scripts','').split(), 60 | 'nbdev': [f'{cfg.get("lib_path")}={cfg.get("lib_path")}._modidx:d'] 61 | }, 62 | **setup_cfg) 63 | 64 | 65 | -------------------------------------------------------------------------------- /fhdaisy/xtras.py: -------------------------------------------------------------------------------- 1 | """Convenience functions that combine components with their needed parts""" 2 | 3 | # AUTOGENERATED! DO NOT EDIT! File to edit: ../nbs/01_xtras.ipynb. 4 | 5 | # %% auto 0 6 | __all__ = ['ChatTurn', 'ChatPair', 'mk_dropdown', 'mk_fab', 'mk_swap', 'mk_accordion_item', 'mk_accordion'] 7 | 8 | # %% ../nbs/01_xtras.ipynb 2 9 | from fastcore.utils import * 10 | from fasthtml.common import * 11 | from .comp import * 12 | import fasthtml.components as fh 13 | 14 | # %% ../nbs/01_xtras.ipynb 6 15 | def ChatTurn( 16 | msg, # Text to display 17 | cls='', # Class of the `Chat` 18 | bubblecls='', # Class of the `ChatBubble` 19 | **kw 20 | ): 21 | "A `ChatBubble` in a `Chat`, representing one turn in a chat" 22 | return Chat(cls=cls, **kw)( 23 | ChatBubble(msg, cls=bubblecls) 24 | ) 25 | 26 | # %% ../nbs/01_xtras.ipynb 8 27 | def ChatPair( 28 | q, # Question text 29 | a # Answer text 30 | ): 31 | "A question and answer pair as chat bubbles" 32 | return ChatTurn(q, cls='-start'), ChatTurn(a, cls='-end', bubblecls='-primary') 33 | 34 | # %% ../nbs/01_xtras.ipynb 14 35 | def mk_dropdown(summary, items, summcls='', cls='', **kw): 36 | return Dropdown( 37 | fh.Summary(summary, cls=summcls), 38 | DropdownContent(*items, cls=f'{cls} menu', **kw) 39 | ) 40 | 41 | # %% ../nbs/01_xtras.ipynb 16 42 | def mk_dropdown( 43 | summary, # Text for the summary/button 44 | items, # List of items to display in dropdown 45 | summcls='', # Class for the summary element 46 | cls='', # Class for the dropdown content 47 | **kw 48 | ): 49 | "A dropdown menu with summary and content" 50 | return Dropdown( 51 | fh.Summary(summary, cls=summcls), 52 | DropdownContent(*items, cls=f'{cls} menu', **kw) 53 | ) 54 | 55 | # %% ../nbs/01_xtras.ipynb 19 56 | def mk_fab(txt, main, items, maincls='-success', btncls='-lg -circle', cls='', **kw): 57 | return Fab( 58 | Btn(txt, tabindex='0', cls=f'{maincls} {btncls}'), 59 | Btn(main, cls=f'fab-main-action {btncls}'), 60 | *[Btn(item, cls=btncls) for item in items], 61 | cls=cls, **kw 62 | ) 63 | 64 | # %% ../nbs/01_xtras.ipynb 23 65 | def mk_swap(on, off, cls='', **kw): 66 | return Swap( 67 | fh.Input(type='checkbox'), 68 | SwapOn(on), 69 | SwapOff(off), 70 | cls=cls, **kw 71 | ) 72 | 73 | # %% ../nbs/01_xtras.ipynb 29 74 | def mk_accordion_item(title, content, name='accordion', checked=False, cls='', titlecls='', contentcls='', **kw): 75 | return Collapse( 76 | fh.Input(type='radio', name=name, checked=checked), 77 | CollapseTitle(title, cls=titlecls), 78 | CollapseContent(content, cls=contentcls), 79 | cls=cls, **kw) 80 | 81 | # %% ../nbs/01_xtras.ipynb 33 82 | def mk_accordion(*items, name=None, cls='', itemcls='', titlecls='', contentcls='', itemkw=None, **kw): 83 | if not name: name = f'acc-{id(items)}' 84 | if not itemkw: itemkw={} 85 | ais = [mk_accordion_item(*o, name=name, checked=i==0, cls=itemcls, titlecls=titlecls, contentcls=contentcls, **itemkw) 86 | for i,o in enumerate(items)] 87 | return Join(*ais, cls=cls, **kw) 88 | -------------------------------------------------------------------------------- /fhdaisy/comp.py: -------------------------------------------------------------------------------- 1 | from fhdaisy.core import * 2 | 3 | # Actions 4 | 5 | mk_compfn('btn', 'Button') 6 | 7 | mk_compfn('dropdown', 'Details') 8 | mk_compfn('dropdown-content', 'Ul') 9 | 10 | mk_compfn('fab', 'Div') 11 | mk_compfn('fab-close', 'Div') 12 | mk_compfn('fab-main-action', 'Div') 13 | 14 | mk_compfn('modal', 'Dialog') 15 | mk_compfn('modal-box', 'Div') 16 | mk_compfn('modal-action', 'Form') 17 | mk_compfn('modal-backdrop', 'Form') 18 | mk_compfn('modal-toggle', 'Input', type='checkbox') 19 | 20 | mk_compfn('swap', 'Label') 21 | mk_compfn('swap-on', 'Div') 22 | mk_compfn('swap-off', 'Div') 23 | mk_compfn('swap-indeterminate', 'Div') 24 | 25 | mk_compfn('theme-controller', 'Input', type='checkbox') 26 | 27 | # Data display 28 | 29 | mk_compfn('collapse', 'Div') 30 | mk_compfn('collapse-title', 'Div') 31 | mk_compfn('collapse-content', 'Div') 32 | 33 | mk_compfn('avatar', 'Div') 34 | mk_compfn('avatar-group', 'Div') 35 | 36 | mk_compfn('badge', 'Span') 37 | 38 | mk_compfn('pika-single', 'Input', type='text') 39 | 40 | mk_compfn('card', 'Div') 41 | mk_compfn('card-title', 'H2') 42 | mk_compfn('card-body', 'Div') 43 | mk_compfn('card-actions', 'Div') 44 | 45 | mk_compfn('carousel', 'Div') 46 | mk_compfn('carousel-item', 'Div') 47 | 48 | mk_compfn('chat', 'Div') 49 | mk_compfn('chat-image', 'Div') 50 | mk_compfn('chat-header', 'Div') 51 | mk_compfn('chat-footer', 'Div') 52 | mk_compfn('chat-bubble', 'Div') 53 | 54 | mk_compfn('countdown', 'Span') 55 | 56 | mk_compfn('diff', 'Figure') 57 | mk_compfn('diff-item-1', 'Div') 58 | mk_compfn('diff-item-2', 'Div') 59 | mk_compfn('diff-resizer', 'Div') 60 | 61 | mk_compfn('hover-3d', 'Div') 62 | mk_compfn('hover-gallery', 'Figure') 63 | 64 | mk_compfn('kbd') 65 | 66 | mk_compfn('list', 'Ul') 67 | mk_compfn('list-row', 'Li') 68 | 69 | mk_compfn('stats', 'Div') 70 | mk_compfn('stat', 'Div') 71 | mk_compfn('stat-title', 'Div') 72 | mk_compfn('stat-value', 'Div') 73 | mk_compfn('stat-desc', 'Div') 74 | mk_compfn('stat-figure', 'Div') 75 | mk_compfn('stat-actions', 'Div') 76 | 77 | mk_compfn('status', 'Span') 78 | 79 | mk_compfn('table', 'Table') 80 | 81 | mk_compfn('text-rotate', 'Span') 82 | 83 | mk_compfn('timeline', 'Ul') 84 | mk_compfn('timeline-start', 'Div') 85 | mk_compfn('timeline-middle', 'Div') 86 | mk_compfn('timeline-end', 'Div') 87 | 88 | # Navigation 89 | 90 | mk_compfn('breadcrumbs', 'Div') 91 | 92 | mk_compfn('dock', 'Div') 93 | mk_compfn('dock-label', 'Span') 94 | 95 | mk_compfn('link', 'A') 96 | 97 | mk_compfn('menu', 'Ul') 98 | mk_compfn('menu-title', 'Li') 99 | mk_compfn('menu-dropdown', 'Ul') 100 | mk_compfn('menu-dropdown-toggle', 'Summary') 101 | 102 | mk_compfn('navbar', 'Div') 103 | mk_compfn('navbar-start', 'Div') 104 | mk_compfn('navbar-center', 'Div') 105 | mk_compfn('navbar-end', 'Div') 106 | 107 | mk_compfn('join', 'Div') 108 | mk_compfn('join-item', 'Div') 109 | 110 | mk_compfn('steps', 'Ul') 111 | mk_compfn('step', 'Li') 112 | mk_compfn('step-icon', 'Span') 113 | 114 | mk_compfn('tabs', 'Div') 115 | mk_compfn('tab', 'Button') 116 | mk_compfn('tab-content', 'Div') 117 | 118 | # Feedback 119 | 120 | mk_compfn('alert', 'Div') 121 | mk_compfn('loading', 'Span') 122 | mk_compfn('progress') 123 | mk_compfn('radial-progress', 'Div') 124 | mk_compfn('skeleton', 'Div') 125 | mk_compfn('toast', 'Div') 126 | mk_compfn('tooltip', 'Div') 127 | 128 | # Data input 129 | 130 | mk_compfn('checkbox', 'Input', type='checkbox') 131 | mk_compfn('fieldset') 132 | mk_compfn('fieldset-legend', 'Legend') 133 | mk_compfn('file-input', 'Input', type='file') 134 | mk_compfn('filter', 'Form') 135 | mk_compfn('label') 136 | mk_compfn('floating-label', 'Label') 137 | mk_compfn('radio', 'Input', type='radio') 138 | mk_compfn('range', 'Input', type='range') 139 | mk_compfn('rating', 'Div') 140 | mk_compfn('mask', 'Input', type='radio', xcls='input') 141 | mk_compfn('select') 142 | mk_compfn('input') 143 | mk_compfn('textarea', 'Textarea') 144 | mk_compfn('toggle', 'Input', type='checkbox') 145 | mk_compfn('validator', 'Input') 146 | mk_compfn('validator-hint', 'P') 147 | 148 | # Layout 149 | 150 | mk_compfn('divider', 'Div') 151 | 152 | mk_compfn('drawer', 'Div') 153 | mk_compfn('drawer-toggle', 'Input', type='checkbox') 154 | mk_compfn('drawer-content', 'Div') 155 | mk_compfn('drawer-side', 'Div') 156 | mk_compfn('drawer-overlay', 'Label') 157 | 158 | mk_compfn('footer') 159 | mk_compfn('footer-title', 'Span') 160 | 161 | mk_compfn('hero', 'Div') 162 | mk_compfn('hero-content', 'Div') 163 | mk_compfn('hero-overlay', 'Div') 164 | 165 | mk_compfn('indicator', 'Div') 166 | mk_compfn('indicator-item', 'Span') 167 | 168 | mk_compfn('stack', 'Div') 169 | 170 | # Mockup 171 | 172 | mk_compfn('mockup-browser', 'Div') 173 | mk_compfn('mockup-browser-toolbar', 'Div') 174 | mk_compfn('mockup-code', 'Div') 175 | mk_compfn('mockup-phone', 'Div') 176 | mk_compfn('mockup-phone-camera', 'Div') 177 | mk_compfn('mockup-phone-display', 'Div') 178 | mk_compfn('mockup-window', 'Div') 179 | 180 | # Tailwind 181 | mk_compfn('flex', 'Div') 182 | 183 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # fhdaisy 2 | 3 | `fhdaisy` is a Python wrapper for [DaisyUI](https://daisyui.com/) that 4 | brings its component classes to [FastHTML](https://www.fastht.ml/) 5 | applications. Instead of manually writing HTML elements with DaisyUI 6 | classes like ` 111 | 112 | This renders identically to the previous manual version. 113 | 114 | With fhdaisy, the pattern is consistent: use the title-case version of 115 | the DaisyUI class name as your component. So `input` becomes `Input`; 116 | fhdaisy automatically adds the base `input` class when you use the 117 | `Input` component. Any modifiers like `input-bordered` can be shortened 118 | to just `-bordered` in the `cls` parameter. 119 | 120 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright 2022, fastai 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /nbs/00_core.ipynb: -------------------------------------------------------------------------------- 1 | { 2 | "cells": [ 3 | { 4 | "cell_type": "code", 5 | "execution_count": null, 6 | "id": "ba03e610", 7 | "metadata": {}, 8 | "outputs": [], 9 | "source": [ 10 | "#| default_exp core" 11 | ] 12 | }, 13 | { 14 | "cell_type": "markdown", 15 | "id": "d0cb3edb", 16 | "metadata": {}, 17 | "source": [ 18 | "# fhdaisy.core\n", 19 | "> Builder API used behind the scenes to create the basic components" 20 | ] 21 | }, 22 | { 23 | "cell_type": "code", 24 | "execution_count": null, 25 | "id": "61619caa", 26 | "metadata": {}, 27 | "outputs": [], 28 | "source": [ 29 | "#| export\n", 30 | "from fastcore.utils import *\n", 31 | "from fasthtml.common import *\n", 32 | "import fasthtml.components as fh\n", 33 | "from fasthtml.jupyter import *\n", 34 | "\n", 35 | "import inspect" 36 | ] 37 | }, 38 | { 39 | "cell_type": "code", 40 | "execution_count": null, 41 | "id": "c0b618a9", 42 | "metadata": {}, 43 | "outputs": [], 44 | "source": [ 45 | "from fastcore.test import *" 46 | ] 47 | }, 48 | { 49 | "cell_type": "markdown", 50 | "id": "911fd760", 51 | "metadata": {}, 52 | "source": [ 53 | "## The basics" 54 | ] 55 | }, 56 | { 57 | "cell_type": "code", 58 | "execution_count": null, 59 | "id": "f20050d8", 60 | "metadata": {}, 61 | "outputs": [], 62 | "source": [ 63 | "#| export\n", 64 | "daisy_link = Link(href='https://cdn.jsdelivr.net/npm/daisyui@5', rel='stylesheet', type='text/css')\n", 65 | "tw_scr = Script(src='https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4')\n", 66 | "daisy_hdrs = (daisy_link, tw_scr)" 67 | ] 68 | }, 69 | { 70 | "cell_type": "code", 71 | "execution_count": null, 72 | "id": "46e3e05d", 73 | "metadata": {}, 74 | "outputs": [], 75 | "source": [ 76 | "#| export\n", 77 | "def mk_previewer(app=None, cls=f'max-w-lg'):\n", 78 | " xcls = cls\n", 79 | " if not app: app=FastHTML(hdrs=daisy_hdrs)\n", 80 | " def p(*c, cls='', **kw):\n", 81 | " return HTMX(Div(cls=f'{xcls} {cls}')(*c), app=app, host=None, port=None, **kw)\n", 82 | " return p" 83 | ] 84 | }, 85 | { 86 | "cell_type": "code", 87 | "execution_count": null, 88 | "id": "32afc52b", 89 | "metadata": {}, 90 | "outputs": [], 91 | "source": [ 92 | "p = mk_previewer()" 93 | ] 94 | }, 95 | { 96 | "cell_type": "code", 97 | "execution_count": null, 98 | "id": "477b1a30", 99 | "metadata": {}, 100 | "outputs": [ 101 | { 102 | "data": { 103 | "text/html": [ 104 | " " 133 | ], 134 | "text/plain": [ 135 | "" 136 | ] 137 | }, 138 | "execution_count": null, 139 | "metadata": {}, 140 | "output_type": "execute_result" 141 | } 142 | ], 143 | "source": [ 144 | "c = Button('Hey there', cls='btn')\n", 145 | "p(c)" 146 | ] 147 | }, 148 | { 149 | "cell_type": "code", 150 | "execution_count": null, 151 | "id": "0e19172e", 152 | "metadata": {}, 153 | "outputs": [ 154 | { 155 | "name": "stdout", 156 | "output_type": "stream", 157 | "text": [ 158 | "\n" 159 | ] 160 | } 161 | ], 162 | "source": [ 163 | "print(c)" 164 | ] 165 | }, 166 | { 167 | "cell_type": "markdown", 168 | "id": "810fa6bc", 169 | "metadata": {}, 170 | "source": [ 171 | "## Creating simple components" 172 | ] 173 | }, 174 | { 175 | "cell_type": "code", 176 | "execution_count": null, 177 | "id": "3025d200", 178 | "metadata": {}, 179 | "outputs": [ 180 | { 181 | "data": { 182 | "text/plain": [ 183 | "'ChatBubble'" 184 | ] 185 | }, 186 | "execution_count": null, 187 | "metadata": {}, 188 | "output_type": "execute_result" 189 | } 190 | ], 191 | "source": [ 192 | "#| export\n", 193 | "def hyphens2camel(x): return ''.join(o.title() for o in x.split('-'))\n", 194 | "hyphens2camel('chat-bubble')" 195 | ] 196 | }, 197 | { 198 | "cell_type": "markdown", 199 | "id": "9ac52f82", 200 | "metadata": {}, 201 | "source": [ 202 | "Tailwind utility classes can start with `-` (like `-mt-5` or `-right-5`). We need to distinguish these from our shorthand where we prepend the class name to user provided values that start with `-` (e.g. `Tooltip('-left')` becomes `tooltip-left`)" 203 | ] 204 | }, 205 | { 206 | "cell_type": "code", 207 | "execution_count": null, 208 | "id": "ae9262da", 209 | "metadata": {}, 210 | "outputs": [], 211 | "source": [ 212 | "#| export\n", 213 | "_neg_twu_pfxs = set('mt ml mr mb mx my translate rotate scale skew inset top bottom left right z space'.split())\n", 214 | "def _is_neg_twu(x): return x[0]=='-' and len(parts:=x[1:].split('-'))>=2 and parts[0] in _neg_twu_pfxs" 215 | ] 216 | }, 217 | { 218 | "cell_type": "code", 219 | "execution_count": null, 220 | "id": "9241425e", 221 | "metadata": {}, 222 | "outputs": [], 223 | "source": [ 224 | "for o in ('-mt-5', '-right-5'): test_eq(_is_neg_twu(o), True)\n", 225 | "for o in ('-right', 'mt-5', 'right-5'): test_eq(_is_neg_twu(o), False)" 226 | ] 227 | }, 228 | { 229 | "cell_type": "code", 230 | "execution_count": null, 231 | "id": "bc00a517", 232 | "metadata": {}, 233 | "outputs": [], 234 | "source": [ 235 | "#| export\n", 236 | "def mk_compfn(compcls, tag=None, name=None, xcls='', **compkw):\n", 237 | " if not name: name=hyphens2camel(compcls)\n", 238 | " if not tag: tag=name\n", 239 | " compfunc = getattr(fh, tag)\n", 240 | "\n", 241 | " def fn(*c, cls='', **kw):\n", 242 | " cls = ' '.join(f'{compcls if x[0]==\"-\" and not _is_neg_twu(x) else \"\"}{x}' for x in cls.split())\n", 243 | " return compfunc(*c, cls=f'{compcls} {cls} {xcls}', **compkw, **kw)\n", 244 | "\n", 245 | " fn.__name__ = name\n", 246 | " inspect.currentframe().f_back.f_globals[name] = fn" 247 | ] 248 | }, 249 | { 250 | "cell_type": "code", 251 | "execution_count": null, 252 | "id": "818874c7", 253 | "metadata": {}, 254 | "outputs": [], 255 | "source": [ 256 | "mk_compfn('btn', 'Button')" 257 | ] 258 | }, 259 | { 260 | "cell_type": "code", 261 | "execution_count": null, 262 | "id": "f4e77b66", 263 | "metadata": {}, 264 | "outputs": [ 265 | { 266 | "name": "stdout", 267 | "output_type": "stream", 268 | "text": [ 269 | "\n" 270 | ] 271 | } 272 | ], 273 | "source": [ 274 | "c = Btn('Hey there', cls='-primary p-5 text-2xl rounded-full')\n", 275 | "print(c)" 276 | ] 277 | }, 278 | { 279 | "cell_type": "code", 280 | "execution_count": null, 281 | "id": "d9ee60ac", 282 | "metadata": {}, 283 | "outputs": [ 284 | { 285 | "data": { 286 | "text/html": [ 287 | " " 316 | ], 317 | "text/plain": [ 318 | "" 319 | ] 320 | }, 321 | "execution_count": null, 322 | "metadata": {}, 323 | "output_type": "execute_result" 324 | } 325 | ], 326 | "source": [ 327 | "p(c)" 328 | ] 329 | }, 330 | { 331 | "cell_type": "markdown", 332 | "id": "bf7ec785", 333 | "metadata": {}, 334 | "source": [ 335 | "Demonstrating that negative utility classes are handled correctly:" 336 | ] 337 | }, 338 | { 339 | "cell_type": "code", 340 | "execution_count": null, 341 | "id": "ec9924b4", 342 | "metadata": {}, 343 | "outputs": [], 344 | "source": [ 345 | "mk_compfn('tooltip', 'Div')" 346 | ] 347 | }, 348 | { 349 | "cell_type": "code", 350 | "execution_count": null, 351 | "id": "3909fe8b", 352 | "metadata": {}, 353 | "outputs": [ 354 | { 355 | "name": "stdout", 356 | "output_type": "stream", 357 | "text": [ 358 | "
Main text is offset to the right
\n" 359 | ] 360 | } 361 | ], 362 | "source": [ 363 | "c = Tooltip('Main text is offset to the right', cls='-right-50 -primary -left', data_tip='Tooltip appears to the left')\n", 364 | "print(c)" 365 | ] 366 | }, 367 | { 368 | "cell_type": "code", 369 | "execution_count": null, 370 | "id": "33c889e8", 371 | "metadata": {}, 372 | "outputs": [ 373 | { 374 | "data": { 375 | "text/html": [ 376 | " " 406 | ], 407 | "text/plain": [ 408 | "" 409 | ] 410 | }, 411 | "execution_count": null, 412 | "metadata": {}, 413 | "output_type": "execute_result" 414 | } 415 | ], 416 | "source": [ 417 | "p(c)" 418 | ] 419 | } 420 | ], 421 | "metadata": { 422 | "kernelspec": { 423 | "display_name": "python3", 424 | "language": "python", 425 | "name": "python3" 426 | } 427 | }, 428 | "nbformat": 4, 429 | "nbformat_minor": 5 430 | } 431 | -------------------------------------------------------------------------------- /nbs/01_xtras.ipynb: -------------------------------------------------------------------------------- 1 | { 2 | "cells": [ 3 | { 4 | "cell_type": "code", 5 | "execution_count": null, 6 | "id": "a68623b5", 7 | "metadata": {}, 8 | "outputs": [], 9 | "source": [ 10 | "#| default_exp xtras" 11 | ] 12 | }, 13 | { 14 | "cell_type": "markdown", 15 | "id": "72c375ce", 16 | "metadata": {}, 17 | "source": [ 18 | "# fhdaisy.xtras\n", 19 | "> Convenience functions that combine components with their needed parts" 20 | ] 21 | }, 22 | { 23 | "cell_type": "code", 24 | "execution_count": null, 25 | "id": "61619caa", 26 | "metadata": {}, 27 | "outputs": [], 28 | "source": [ 29 | "#| export\n", 30 | "from fastcore.utils import *\n", 31 | "from fasthtml.common import *\n", 32 | "from fhdaisy.comp import *\n", 33 | "import fasthtml.components as fh" 34 | ] 35 | }, 36 | { 37 | "cell_type": "code", 38 | "execution_count": null, 39 | "id": "db5d0987", 40 | "metadata": {}, 41 | "outputs": [], 42 | "source": [ 43 | "p = mk_previewer()" 44 | ] 45 | }, 46 | { 47 | "cell_type": "markdown", 48 | "id": "70e22561", 49 | "metadata": {}, 50 | "source": [ 51 | "### Chat bubbles" 52 | ] 53 | }, 54 | { 55 | "cell_type": "code", 56 | "execution_count": null, 57 | "id": "860e3f75", 58 | "metadata": {}, 59 | "outputs": [ 60 | { 61 | "data": { 62 | "text/html": [ 63 | " " 95 | ], 96 | "text/plain": [ 97 | "" 98 | ] 99 | }, 100 | "execution_count": null, 101 | "metadata": {}, 102 | "output_type": "execute_result" 103 | } 104 | ], 105 | "source": [ 106 | "p(Chat(\n", 107 | " ChatBubble('Hi, what is 2+2?'),\n", 108 | " cls='-start')\n", 109 | ")" 110 | ] 111 | }, 112 | { 113 | "cell_type": "code", 114 | "execution_count": null, 115 | "id": "55e1d4d7", 116 | "metadata": {}, 117 | "outputs": [], 118 | "source": [ 119 | "#| export\n", 120 | "def ChatTurn(\n", 121 | " msg, # Text to display\n", 122 | " cls='', # Class of the `Chat`\n", 123 | " bubblecls='', # Class of the `ChatBubble`\n", 124 | " **kw\n", 125 | "):\n", 126 | " \"A `ChatBubble` in a `Chat`, representing one turn in a chat\"\n", 127 | " return Chat(cls=cls, **kw)(\n", 128 | " ChatBubble(msg, cls=bubblecls)\n", 129 | " )" 130 | ] 131 | }, 132 | { 133 | "cell_type": "code", 134 | "execution_count": null, 135 | "id": "a73e13fd", 136 | "metadata": {}, 137 | "outputs": [ 138 | { 139 | "data": { 140 | "text/html": [ 141 | " " 176 | ], 177 | "text/plain": [ 178 | "" 179 | ] 180 | }, 181 | "execution_count": null, 182 | "metadata": {}, 183 | "output_type": "execute_result" 184 | } 185 | ], 186 | "source": [ 187 | "p(\n", 188 | " ChatTurn('Hi, what is 2+2?', cls='-start'),\n", 189 | " ChatTurn('The answer is 4', cls='-end', bubblecls='-primary'),\n", 190 | ")" 191 | ] 192 | }, 193 | { 194 | "cell_type": "code", 195 | "execution_count": null, 196 | "id": "e862a84f", 197 | "metadata": {}, 198 | "outputs": [], 199 | "source": [ 200 | "#| export\n", 201 | "def ChatPair(\n", 202 | " q, # Question text\n", 203 | " a # Answer text\n", 204 | "):\n", 205 | " \"A question and answer pair as chat bubbles\"\n", 206 | " return ChatTurn(q, cls='-start'), ChatTurn(a, cls='-end', bubblecls='-primary')" 207 | ] 208 | }, 209 | { 210 | "cell_type": "code", 211 | "execution_count": null, 212 | "id": "92ffc908", 213 | "metadata": {}, 214 | "outputs": [], 215 | "source": [ 216 | "c = Div(\n", 217 | " ChatPair('Hi, what is 2+2?', 'The answer is 4'),\n", 218 | " ChatPair('And what about 5*6?', 'That equals 30'),\n", 219 | " Div(cls='mt-4 flex gap-2')(\n", 220 | " Input(placeholder='Type your question...', cls='flex-1'),\n", 221 | " Btn('Send')\n", 222 | " )\n", 223 | ")" 224 | ] 225 | }, 226 | { 227 | "cell_type": "code", 228 | "execution_count": null, 229 | "id": "0c98bba7", 230 | "metadata": {}, 231 | "outputs": [ 232 | { 233 | "data": { 234 | "text/html": [ 235 | " " 281 | ], 282 | "text/plain": [ 283 | "" 284 | ] 285 | }, 286 | "execution_count": null, 287 | "metadata": {}, 288 | "output_type": "execute_result" 289 | } 290 | ], 291 | "source": [ 292 | "p(c)" 293 | ] 294 | }, 295 | { 296 | "cell_type": "markdown", 297 | "id": "9fd44fbd", 298 | "metadata": {}, 299 | "source": [ 300 | "## Actions" 301 | ] 302 | }, 303 | { 304 | "cell_type": "markdown", 305 | "id": "3a212f04", 306 | "metadata": {}, 307 | "source": [ 308 | "### Dropdown" 309 | ] 310 | }, 311 | { 312 | "cell_type": "code", 313 | "execution_count": null, 314 | "id": "e2d7d3e8", 315 | "metadata": {}, 316 | "outputs": [ 317 | { 318 | "data": { 319 | "text/markdown": [ 320 | "```html\n", 321 | "a\n", 322 | "```" 323 | ], 324 | "text/plain": [ 325 | "summary(('a',),{'class': ''})" 326 | ] 327 | }, 328 | "execution_count": null, 329 | "metadata": {}, 330 | "output_type": "execute_result" 331 | } 332 | ], 333 | "source": [ 334 | "fh.Summary('a', cls='')" 335 | ] 336 | }, 337 | { 338 | "cell_type": "code", 339 | "execution_count": null, 340 | "id": "a1843ee7", 341 | "metadata": {}, 342 | "outputs": [], 343 | "source": [ 344 | "#| export\n", 345 | "def mk_dropdown(summary, items, summcls='', cls='', **kw):\n", 346 | " return Dropdown(\n", 347 | " fh.Summary(summary, cls=summcls),\n", 348 | " DropdownContent(*items, cls=f'{cls} menu', **kw)\n", 349 | " )" 350 | ] 351 | }, 352 | { 353 | "cell_type": "code", 354 | "execution_count": null, 355 | "id": "865a48de", 356 | "metadata": {}, 357 | "outputs": [], 358 | "source": [ 359 | "c = mk_dropdown('Click me',\n", 360 | " [Li(A('Item 1')), Li(A('Item 2'))],\n", 361 | " summcls=\"btn m-1\",\n", 362 | " cls='bg-base-100 rounded-box w-52 p-2 shadow')" 363 | ] 364 | }, 365 | { 366 | "cell_type": "code", 367 | "execution_count": null, 368 | "id": "869c1731", 369 | "metadata": {}, 370 | "outputs": [], 371 | "source": [ 372 | "#| export\n", 373 | "def mk_dropdown(\n", 374 | " summary, # Text for the summary/button\n", 375 | " items, # List of items to display in dropdown\n", 376 | " summcls='', # Class for the summary element\n", 377 | " cls='', # Class for the dropdown content\n", 378 | " **kw\n", 379 | "):\n", 380 | " \"A dropdown menu with summary and content\"\n", 381 | " return Dropdown(\n", 382 | " fh.Summary(summary, cls=summcls),\n", 383 | " DropdownContent(*items, cls=f'{cls} menu', **kw)\n", 384 | " )" 385 | ] 386 | }, 387 | { 388 | "cell_type": "code", 389 | "execution_count": null, 390 | "id": "4e9d253d", 391 | "metadata": {}, 392 | "outputs": [ 393 | { 394 | "data": { 395 | "text/html": [ 396 | " " 425 | ], 426 | "text/plain": [ 427 | "" 428 | ] 429 | }, 430 | "execution_count": null, 431 | "metadata": {}, 432 | "output_type": "execute_result" 433 | } 434 | ], 435 | "source": [ 436 | "p(c, height=150)" 437 | ] 438 | }, 439 | { 440 | "cell_type": "markdown", 441 | "id": "eda210a4", 442 | "metadata": {}, 443 | "source": [ 444 | "### FAB" 445 | ] 446 | }, 447 | { 448 | "cell_type": "code", 449 | "execution_count": null, 450 | "id": "5d217814", 451 | "metadata": {}, 452 | "outputs": [], 453 | "source": [ 454 | "#| export\n", 455 | "def mk_fab(txt, main, items, maincls='-success', btncls='-lg -circle', cls='', **kw):\n", 456 | " return Fab(\n", 457 | " Btn(txt, tabindex='0', cls=f'{maincls} {btncls}'),\n", 458 | " Btn(main, cls=f'fab-main-action {btncls}'),\n", 459 | " *[Btn(item, cls=btncls) for item in items],\n", 460 | " cls=cls, **kw\n", 461 | " )" 462 | ] 463 | }, 464 | { 465 | "cell_type": "code", 466 | "execution_count": null, 467 | "id": "34593ebf", 468 | "metadata": {}, 469 | "outputs": [], 470 | "source": [ 471 | "c = mk_fab('➕', 'M', ['A', 'B', 'C'], cls='-flower')" 472 | ] 473 | }, 474 | { 475 | "cell_type": "code", 476 | "execution_count": null, 477 | "id": "de17545f", 478 | "metadata": {}, 479 | "outputs": [ 480 | { 481 | "data": { 482 | "text/html": [ 483 | " " 508 | ], 509 | "text/plain": [ 510 | "" 511 | ] 512 | }, 513 | "execution_count": null, 514 | "metadata": {}, 515 | "output_type": "execute_result" 516 | } 517 | ], 518 | "source": [ 519 | "p(c, height=200)" 520 | ] 521 | }, 522 | { 523 | "cell_type": "markdown", 524 | "id": "3fe22112", 525 | "metadata": {}, 526 | "source": [ 527 | "## Swap" 528 | ] 529 | }, 530 | { 531 | "cell_type": "code", 532 | "execution_count": null, 533 | "id": "9a74afbf", 534 | "metadata": {}, 535 | "outputs": [], 536 | "source": [ 537 | "#| export\n", 538 | "def mk_swap(on, off, cls='', **kw):\n", 539 | " return Swap(\n", 540 | " fh.Input(type='checkbox'),\n", 541 | " SwapOn(on),\n", 542 | " SwapOff(off),\n", 543 | " cls=cls, **kw\n", 544 | " )" 545 | ] 546 | }, 547 | { 548 | "cell_type": "code", 549 | "execution_count": null, 550 | "id": "cbcee48c", 551 | "metadata": {}, 552 | "outputs": [ 553 | { 554 | "name": "stdout", 555 | "output_type": "stream", 556 | "text": [ 557 | "\n" 558 | ] 559 | } 560 | ], 561 | "source": [ 562 | "c = mk_swap('ON', 'OFF')\n", 563 | "print(c)" 564 | ] 565 | }, 566 | { 567 | "cell_type": "code", 568 | "execution_count": null, 569 | "id": "d89b79e3", 570 | "metadata": {}, 571 | "outputs": [ 572 | { 573 | "data": { 574 | "text/html": [ 575 | " " 607 | ], 608 | "text/plain": [ 609 | "" 610 | ] 611 | }, 612 | "execution_count": null, 613 | "metadata": {}, 614 | "output_type": "execute_result" 615 | } 616 | ], 617 | "source": [ 618 | "p(c)" 619 | ] 620 | }, 621 | { 622 | "cell_type": "code", 623 | "execution_count": null, 624 | "id": "03e25e27", 625 | "metadata": {}, 626 | "outputs": [ 627 | { 628 | "data": { 629 | "text/html": [ 630 | " " 662 | ], 663 | "text/plain": [ 664 | "" 665 | ] 666 | }, 667 | "execution_count": null, 668 | "metadata": {}, 669 | "output_type": "execute_result" 670 | } 671 | ], 672 | "source": [ 673 | "c = mk_swap('😀', '😪', cls='-rotate text-9xl')\n", 674 | "p(c)" 675 | ] 676 | }, 677 | { 678 | "cell_type": "markdown", 679 | "id": "f96f56ae", 680 | "metadata": {}, 681 | "source": [ 682 | "## Data display" 683 | ] 684 | }, 685 | { 686 | "cell_type": "markdown", 687 | "id": "d9e1b1d1", 688 | "metadata": {}, 689 | "source": [ 690 | "### Accordian" 691 | ] 692 | }, 693 | { 694 | "cell_type": "code", 695 | "execution_count": null, 696 | "id": "2d76514b", 697 | "metadata": {}, 698 | "outputs": [], 699 | "source": [ 700 | "#| export\n", 701 | "def mk_accordion_item(title, content, name='accordion', checked=False, cls='', titlecls='', contentcls='', **kw):\n", 702 | " return Collapse(\n", 703 | " fh.Input(type='radio', name=name, checked=checked),\n", 704 | " CollapseTitle(title, cls=titlecls),\n", 705 | " CollapseContent(content, cls=contentcls),\n", 706 | " cls=cls, **kw)" 707 | ] 708 | }, 709 | { 710 | "cell_type": "code", 711 | "execution_count": null, 712 | "id": "4db98e06", 713 | "metadata": {}, 714 | "outputs": [], 715 | "source": [ 716 | "accitems = [\n", 717 | " ('How do I create an account?', 'Click the \"Sign Up\" button in the top right corner.'),\n", 718 | " ('I forgot my password', 'Click on \"Forgot Password\" on the login page.'),\n", 719 | " ('How do I update my profile?', 'Go to \"My Account\" settings and select \"Edit Profile\".')\n", 720 | "]" 721 | ] 722 | }, 723 | { 724 | "cell_type": "code", 725 | "execution_count": null, 726 | "id": "95ca380f", 727 | "metadata": {}, 728 | "outputs": [], 729 | "source": [ 730 | "ais = [\n", 731 | " mk_accordion_item(*o, name='acc1', checked=i==0, cls='-arrow border border-base-300', titlecls='font-semibold')\n", 732 | " for i,o in enumerate(accitems)\n", 733 | "]" 734 | ] 735 | }, 736 | { 737 | "cell_type": "code", 738 | "execution_count": null, 739 | "id": "cfedb217", 740 | "metadata": {}, 741 | "outputs": [ 742 | { 743 | "data": { 744 | "text/html": [ 745 | " " 791 | ], 792 | "text/plain": [ 793 | "" 794 | ] 795 | }, 796 | "execution_count": null, 797 | "metadata": {}, 798 | "output_type": "execute_result" 799 | } 800 | ], 801 | "source": [ 802 | "p( Join(*ais, cls='-vertical min-w-md') )" 803 | ] 804 | }, 805 | { 806 | "cell_type": "code", 807 | "execution_count": null, 808 | "id": "35f6b584", 809 | "metadata": {}, 810 | "outputs": [], 811 | "source": [ 812 | "#| export\n", 813 | "def mk_accordion(*items, name=None, cls='', itemcls='', titlecls='', contentcls='', itemkw=None, **kw):\n", 814 | " if not name: name = f'acc-{id(items)}'\n", 815 | " if not itemkw: itemkw={}\n", 816 | " ais = [mk_accordion_item(*o, name=name, checked=i==0, cls=itemcls, titlecls=titlecls, contentcls=contentcls, **itemkw)\n", 817 | " for i,o in enumerate(items)]\n", 818 | " return Join(*ais, cls=cls, **kw)" 819 | ] 820 | }, 821 | { 822 | "cell_type": "code", 823 | "execution_count": null, 824 | "id": "1926f536", 825 | "metadata": {}, 826 | "outputs": [], 827 | "source": [ 828 | "c = mk_accordion(*accitems,\n", 829 | " titlecls='font-semibold', contentcls='text-sm',\n", 830 | " itemcls='-arrow border border-base-300',\n", 831 | " cls='-vertical min-w-md')" 832 | ] 833 | }, 834 | { 835 | "cell_type": "code", 836 | "execution_count": null, 837 | "id": "741cfd87", 838 | "metadata": {}, 839 | "outputs": [ 840 | { 841 | "data": { 842 | "text/html": [ 843 | " " 889 | ], 890 | "text/plain": [ 891 | "" 892 | ] 893 | }, 894 | "execution_count": null, 895 | "metadata": {}, 896 | "output_type": "execute_result" 897 | } 898 | ], 899 | "source": [ 900 | "p(c)" 901 | ] 902 | } 903 | ], 904 | "metadata": {}, 905 | "nbformat": 4, 906 | "nbformat_minor": 5 907 | } 908 | -------------------------------------------------------------------------------- /nbs/index.ipynb: -------------------------------------------------------------------------------- 1 | { 2 | "cells": [ 3 | { 4 | "cell_type": "markdown", 5 | "id": "5ce0111d", 6 | "metadata": {}, 7 | "source": [ 8 | "# fhdaisy\n", 9 | "\n", 10 | "> A FastHTML wrapper for Daisy-UI" 11 | ] 12 | }, 13 | { 14 | "cell_type": "markdown", 15 | "id": "16c8e8f7", 16 | "metadata": {}, 17 | "source": [ 18 | "`fhdaisy` is a Python wrapper for [DaisyUI](https://daisyui.com/) that brings its component classes to [FastHTML](https://www.fastht.ml/) applications. Instead of manually writing HTML elements with DaisyUI classes like `\n" 116 | ] 117 | } 118 | ], 119 | "source": [ 120 | "c = Button('Hey there', cls='btn btn-primary')\n", 121 | "print(c)" 122 | ] 123 | }, 124 | { 125 | "cell_type": "markdown", 126 | "id": "02bd35fc", 127 | "metadata": {}, 128 | "source": [ 129 | "Let's take a look at the result. For creating accurate previews in Jupyter, Solveit, and similar environments, we provide `mk_previewer()`:" 130 | ] 131 | }, 132 | { 133 | "cell_type": "code", 134 | "execution_count": null, 135 | "id": "0dfb8370", 136 | "metadata": {}, 137 | "outputs": [], 138 | "source": [ 139 | "p = mk_previewer()" 140 | ] 141 | }, 142 | { 143 | "cell_type": "markdown", 144 | "id": "f071bdae", 145 | "metadata": {}, 146 | "source": [ 147 | "We can now use this to preview our button:" 148 | ] 149 | }, 150 | { 151 | "cell_type": "code", 152 | "execution_count": null, 153 | "id": "360420ca", 154 | "metadata": {}, 155 | "outputs": [ 156 | { 157 | "data": { 158 | "text/html": [ 159 | " " 188 | ], 189 | "text/plain": [ 190 | "" 191 | ] 192 | }, 193 | "execution_count": null, 194 | "metadata": {}, 195 | "output_type": "execute_result" 196 | } 197 | ], 198 | "source": [ 199 | "p(c)" 200 | ] 201 | }, 202 | { 203 | "cell_type": "markdown", 204 | "id": "5399838a", 205 | "metadata": {}, 206 | "source": [ 207 | "### fhdaisy basics" 208 | ] 209 | }, 210 | { 211 | "cell_type": "markdown", 212 | "id": "2f3a1269", 213 | "metadata": {}, 214 | "source": [ 215 | "Now let's see how fhdaisy makes this simpler and more Pythonic. Instead of using generic HTML elements with DaisyUI classes, fhdaisy provides Python components that correspond directly to DaisyUI's component classes. The key insight is that DaisyUI's CSS class names already tell us what kind of component we're creating - so why not use them as Python component names?\n", 216 | "\n", 217 | "Here's how it works: fhdaisy takes each DaisyUI base class (like `btn`, `card`, `alert`) and turns it into a Python component with a title-case name (`Btn`, `Card`, `Alert`). When you use `Btn()` in your code, fhdaisy automatically creates a button element with the `btn` class already applied.\n", 218 | "\n", 219 | "While the component names in fhdaisy come from DaisyUI's CSS classes, the underlying HTML elements are automatically chosen to match what DaisyUI requires. Each component knows its correct HTML tag - `Btn` creates a `\n" 237 | ] 238 | } 239 | ], 240 | "source": [ 241 | "c = Btn('Hey there', cls='-primary')\n", 242 | "print(c)" 243 | ] 244 | }, 245 | { 246 | "cell_type": "markdown", 247 | "id": "45c6906d", 248 | "metadata": {}, 249 | "source": [ 250 | "This renders identically to the previous manual version." 251 | ] 252 | }, 253 | { 254 | "cell_type": "code", 255 | "execution_count": null, 256 | "id": "3d92485a", 257 | "metadata": {}, 258 | "outputs": [ 259 | { 260 | "data": { 261 | "text/html": [ 262 | " " 291 | ], 292 | "text/plain": [ 293 | "" 294 | ] 295 | }, 296 | "execution_count": null, 297 | "metadata": {}, 298 | "output_type": "execute_result" 299 | } 300 | ], 301 | "source": [ 302 | "p(c)" 303 | ] 304 | }, 305 | { 306 | "cell_type": "markdown", 307 | "id": "cdf73bd2", 308 | "metadata": {}, 309 | "source": [ 310 | "Let's use another example to look deeper into how fhdaisy's API design perfectly mirrors DaisyUI's class structure.\n", 311 | "\n", 312 | "DaisyUI's form inputs use the `input` CSS class. Just like with buttons, DaisyUI modifies input elements through special classes. For example:\n", 313 | "- `input` - base input styling\n", 314 | "- `input-bordered` - adds a border\n", 315 | "- `input-primary` - uses primary color theme\n", 316 | "\n", 317 | "Here's how you'd write a traditional DaisyUI input:" 318 | ] 319 | }, 320 | { 321 | "cell_type": "code", 322 | "execution_count": null, 323 | "id": "f4fd0301", 324 | "metadata": {}, 325 | "outputs": [ 326 | { 327 | "data": { 328 | "text/html": [ 329 | " " 359 | ], 360 | "text/plain": [ 361 | "" 362 | ] 363 | }, 364 | "execution_count": null, 365 | "metadata": {}, 366 | "output_type": "execute_result" 367 | } 368 | ], 369 | "source": [ 370 | "p( Input(placeholder='Enter name', cls='input input-bordered') )" 371 | ] 372 | }, 373 | { 374 | "cell_type": "markdown", 375 | "id": "c1f09c38", 376 | "metadata": {}, 377 | "source": [ 378 | "With fhdaisy, the pattern is consistent: use the title-case version of the DaisyUI class name as your component. So `input` becomes `Input`; fhdaisy automatically adds the base `input` class when you use the `Input` component. Any modifiers like `input-bordered` can be shortened to just `-bordered` in the `cls` parameter." 379 | ] 380 | }, 381 | { 382 | "cell_type": "code", 383 | "execution_count": null, 384 | "id": "7fd7218b", 385 | "metadata": {}, 386 | "outputs": [ 387 | { 388 | "data": { 389 | "text/html": [ 390 | " " 420 | ], 421 | "text/plain": [ 422 | "" 423 | ] 424 | }, 425 | "execution_count": null, 426 | "metadata": {}, 427 | "output_type": "execute_result" 428 | } 429 | ], 430 | "source": [ 431 | "p( Input(placeholder='Enter name', cls='-bordered') )" 432 | ] 433 | }, 434 | { 435 | "cell_type": "code", 436 | "execution_count": null, 437 | "id": "8e31a567", 438 | "metadata": {}, 439 | "outputs": [ 440 | { 441 | "name": "stdout", 442 | "output_type": "stream", 443 | "text": [ 444 | "
Success! Your changes have been saved
\n" 445 | ] 446 | } 447 | ], 448 | "source": [ 449 | "print( Alert('Success! Your changes have been saved', cls='-success -soft') )" 450 | ] 451 | }, 452 | { 453 | "cell_type": "markdown", 454 | "id": "2fa14519", 455 | "metadata": {}, 456 | "source": [ 457 | "DaisyUI creates alerts using the `alert` class on a `
` element. Here's the traditional DaisyUI approach:" 458 | ] 459 | }, 460 | { 461 | "cell_type": "code", 462 | "execution_count": null, 463 | "id": "0698f429", 464 | "metadata": {}, 465 | "outputs": [ 466 | { 467 | "data": { 468 | "text/html": [ 469 | " " 499 | ], 500 | "text/plain": [ 501 | "" 502 | ] 503 | }, 504 | "execution_count": null, 505 | "metadata": {}, 506 | "output_type": "execute_result" 507 | } 508 | ], 509 | "source": [ 510 | "p( Div('This is an important message!', cls='alert alert-info') )" 511 | ] 512 | }, 513 | { 514 | "cell_type": "markdown", 515 | "id": "eb03b391", 516 | "metadata": {}, 517 | "source": [ 518 | "Notice that DaisyUI uses a `
` tag here, not an `` tag (which doesn't exist in HTML). The styling comes entirely from the `alert` class.\n", 519 | "\n", 520 | "With fhdaisy, you use the title-case version of the CSS class name as your component - so `alert` becomes `Alert`. It doesn't matter that the underlying HTML tag is a `div`:" 521 | ] 522 | }, 523 | { 524 | "cell_type": "code", 525 | "execution_count": null, 526 | "id": "cd53e8e5", 527 | "metadata": {}, 528 | "outputs": [ 529 | { 530 | "data": { 531 | "text/html": [ 532 | " " 562 | ], 563 | "text/plain": [ 564 | "" 565 | ] 566 | }, 567 | "execution_count": null, 568 | "metadata": {}, 569 | "output_type": "execute_result" 570 | } 571 | ], 572 | "source": [ 573 | "p( Alert('This is an important message!', cls='-info') )" 574 | ] 575 | }, 576 | { 577 | "cell_type": "markdown", 578 | "id": "a7f2ba08", 579 | "metadata": {}, 580 | "source": [ 581 | "### Multi-part components" 582 | ] 583 | }, 584 | { 585 | "cell_type": "markdown", 586 | "id": "ac921957", 587 | "metadata": {}, 588 | "source": [ 589 | "Some DaisyUI components are more complex and contain multiple structural parts. For instance, `card`s are composed of several nested elements that work together:\n", 590 | "\n", 591 | "- A `
` with class `card` as the container\n", 592 | "- A `
` element for images (optional)\n", 593 | "- A `
` with class `card-body` for the main content\n", 594 | "- Inside the card body, you might have:\n", 595 | " - A `

` with class `card-title`\n", 596 | " - Content paragraphs\n", 597 | " - A `
` with class `card-actions` for buttons\n", 598 | "\n", 599 | "With fhdaisy, each part of the component follows the same naming pattern we've already seen. The base `card` class becomes `Card`, and each part like `card-body`, `card-title`, and `card-actions` becomes `CardBody`, `CardTitle`, and `CardActions` respectively:" 600 | ] 601 | }, 602 | { 603 | "cell_type": "code", 604 | "execution_count": null, 605 | "id": "36f40052", 606 | "metadata": {}, 607 | "outputs": [ 608 | { 609 | "data": { 610 | "text/html": [ 611 | " " 648 | ], 649 | "text/plain": [ 650 | "" 651 | ] 652 | }, 653 | "execution_count": null, 654 | "metadata": {}, 655 | "output_type": "execute_result" 656 | } 657 | ], 658 | "source": [ 659 | "p ( Card(\n", 660 | " Figure(Img(src='https://picsum.photos/seed/fd/400/225')),\n", 661 | " CardBody(\n", 662 | " CardTitle('Card title'),\n", 663 | " P('This is a sample card with some content'),\n", 664 | " CardActions(cls='justify-end')( Btn('Buy Now', cls='-primary') )\n", 665 | " ) , cls='w-96 bg-base-100 shadow-sm'\n", 666 | ") )" 667 | ] 668 | }, 669 | { 670 | "cell_type": "markdown", 671 | "id": "459fd7e4", 672 | "metadata": {}, 673 | "source": [ 674 | "### Xtras" 675 | ] 676 | }, 677 | { 678 | "cell_type": "code", 679 | "execution_count": null, 680 | "id": "9841ca15", 681 | "metadata": {}, 682 | "outputs": [], 683 | "source": [ 684 | "from fhdaisy.xtras import *\n", 685 | "import fasthtml.components as fh" 686 | ] 687 | }, 688 | { 689 | "cell_type": "markdown", 690 | "id": "46c8d762", 691 | "metadata": {}, 692 | "source": [ 693 | "Some components have a very rigid structure, for instance an item in an accordian alway has these pieces:" 694 | ] 695 | }, 696 | { 697 | "cell_type": "code", 698 | "execution_count": null, 699 | "id": "8e1ab2b0", 700 | "metadata": {}, 701 | "outputs": [ 702 | { 703 | "data": { 704 | "text/html": [ 705 | " " 739 | ], 740 | "text/plain": [ 741 | "" 742 | ] 743 | }, 744 | "execution_count": null, 745 | "metadata": {}, 746 | "output_type": "execute_result" 747 | } 748 | ], 749 | "source": [ 750 | "p ( Collapse(\n", 751 | " fh.Input(type='radio', name='acc1', checked=\"checked\"),\n", 752 | " CollapseTitle('Click to expand', cls='font-semibold'),\n", 753 | " CollapseContent('This is the hidden content', cls='text-sm'),\n", 754 | " cls='-arrow border border-base-300'\n", 755 | ") )" 756 | ] 757 | }, 758 | { 759 | "cell_type": "markdown", 760 | "id": "8e1bb1d6", 761 | "metadata": {}, 762 | "source": [ 763 | "`fhdaisy.xtras` provides a number of functions to make these more concise. For instance for the above:" 764 | ] 765 | }, 766 | { 767 | "cell_type": "code", 768 | "execution_count": null, 769 | "id": "52baae3c", 770 | "metadata": {}, 771 | "outputs": [ 772 | { 773 | "data": { 774 | "text/html": [ 775 | " " 809 | ], 810 | "text/plain": [ 811 | "" 812 | ] 813 | }, 814 | "execution_count": null, 815 | "metadata": {}, 816 | "output_type": "execute_result" 817 | } 818 | ], 819 | "source": [ 820 | "p (mk_accordion_item('Click to expand', 'This is the hidden content',\n", 821 | " name='acc1', checked=True, cls='-arrow border border-base-300', titlecls='font-semibold'))" 822 | ] 823 | }, 824 | { 825 | "cell_type": "markdown", 826 | "id": "4b1b0fb4", 827 | "metadata": {}, 828 | "source": [ 829 | "Accordians contain a number of items, again in a specific format. There's a function to simplify this too (all these \"xtras\" functions have the prefix `mk_`, to distinguish them from the components and parts that exactly map to DaisyUI's standard syntax):" 830 | ] 831 | }, 832 | { 833 | "cell_type": "code", 834 | "execution_count": null, 835 | "id": "de19ee1c", 836 | "metadata": {}, 837 | "outputs": [], 838 | "source": [ 839 | "accitems = [\n", 840 | " ('How do I create an account?', 'Click the \"Sign Up\" button in the top right corner.'),\n", 841 | " ('I forgot my password', 'Click on \"Forgot Password\" on the login page.'),\n", 842 | " ('How do I update my profile?', 'Go to \"My Account\" settings and select \"Edit Profile\".')\n", 843 | "]" 844 | ] 845 | }, 846 | { 847 | "cell_type": "code", 848 | "execution_count": null, 849 | "id": "3d60dcad", 850 | "metadata": {}, 851 | "outputs": [ 852 | { 853 | "data": { 854 | "text/html": [ 855 | " " 901 | ], 902 | "text/plain": [ 903 | "" 904 | ] 905 | }, 906 | "execution_count": null, 907 | "metadata": {}, 908 | "output_type": "execute_result" 909 | } 910 | ], 911 | "source": [ 912 | "p( mk_accordion(*accitems,\n", 913 | " titlecls='font-semibold', contentcls='text-sm',\n", 914 | " itemcls='-arrow border border-base-300',\n", 915 | " cls='-vertical min-w-md') )" 916 | ] 917 | }, 918 | { 919 | "cell_type": "markdown", 920 | "id": "3ac149c5", 921 | "metadata": {}, 922 | "source": [ 923 | "### Custom functions" 924 | ] 925 | }, 926 | { 927 | "cell_type": "markdown", 928 | "id": "ea53a977", 929 | "metadata": {}, 930 | "source": [ 931 | "You can create custom helper functions for components that have repetitive patterns that `fhdaisy.xtras` hasn't yet created a wrapper for. You should follow the `mk_` prefix convention to distinguish them from standard components.\n", 932 | "\n", 933 | "The rating component is a good example. A DaisyUI rating consists of multiple masked input elements, where each represents one star (or other shape). The traditional approach requires creating each mask input individually:\n", 934 | "\n", 935 | "```python\n", 936 | "p( Rating(\n", 937 | " Mask(cls='-star-2 bg-orange-400', checked=True, name='rating-demo'),\n", 938 | " Mask(cls='-star-2 bg-orange-400', checked=True, name='rating-demo'),\n", 939 | " Mask(cls='-star-2 bg-orange-400', checked=True, name='rating-demo'),\n", 940 | " Mask(cls='-star-2 bg-orange-400', checked=False, name='rating-demo'),\n", 941 | " Mask(cls='-star-2 bg-orange-400', checked=False, name='rating-demo'),\n", 942 | " cls='-sm'\n", 943 | ") )\n", 944 | "```\n", 945 | "\n", 946 | "This is repetitive and error-prone. You can create your own `mk_rating` function to simplify this by generating all the mask inputs automatically:" 947 | ] 948 | }, 949 | { 950 | "cell_type": "code", 951 | "execution_count": null, 952 | "id": "994c477c", 953 | "metadata": {}, 954 | "outputs": [], 955 | "source": [ 956 | "def mk_rating(n, checked, nm=None, cls='', itemcls=''):\n", 957 | " return Rating(*[Mask(cls=itemcls, checked=(i " 1013 | ], 1014 | "text/plain": [ 1015 | "" 1016 | ] 1017 | }, 1018 | "execution_count": null, 1019 | "metadata": {}, 1020 | "output_type": "execute_result" 1021 | } 1022 | ], 1023 | "source": [ 1024 | "p( mk_rating(5, 3, nm='rating-demo', cls='-sm', itemcls='-star-2 bg-orange-400') )" 1025 | ] 1026 | }, 1027 | { 1028 | "cell_type": "markdown", 1029 | "id": "1c7ca648", 1030 | "metadata": {}, 1031 | "source": [ 1032 | "This pattern can be applied to any component with repetitive structures - identify the pattern, create a `mk_` function that generates the structure, and expose the key parameters that vary." 1033 | ] 1034 | }, 1035 | { 1036 | "cell_type": "markdown", 1037 | "id": "56101339", 1038 | "metadata": {}, 1039 | "source": [ 1040 | "## Full example" 1041 | ] 1042 | }, 1043 | { 1044 | "cell_type": "markdown", 1045 | "id": "7fb3c8c2", 1046 | "metadata": {}, 1047 | "source": [ 1048 | "Here's an example showing a number of components being used together. This example was auto-generated using Sonnet-3.5 running inside Solveit:" 1049 | ] 1050 | }, 1051 | { 1052 | "cell_type": "code", 1053 | "execution_count": null, 1054 | "id": "317fc7f0", 1055 | "metadata": {}, 1056 | "outputs": [], 1057 | "source": [ 1058 | "c = Div(\n", 1059 | " Card(\n", 1060 | " Figure(Img(src=\"https://picsum.photos/seed/42/400/250\")),\n", 1061 | " CardBody(\n", 1062 | " H2(\"Mountain Adventure\", cls=\"card-title\"),\n", 1063 | " Flex(\n", 1064 | " Badge(\"New\", cls=\"-primary\"),\n", 1065 | " Badge(\"Featured\", cls=\"-secondary -outline\"),\n", 1066 | " Badge(\"Travel\", cls=\"-accent -soft\"),\n", 1067 | " cls=\"gap-2 mb-3\"),\n", 1068 | " P(\"Discover breathtaking mountain trails and scenic vistas on this unforgettable journey.\"),\n", 1069 | " Flex(\n", 1070 | " Avatar(\n", 1071 | " Div(Img(src=\"https://picsum.photos/80/80\", cls=\"rounded-full\"), cls=\"w-10\"),\n", 1072 | " cls=\"-online\"),\n", 1073 | " Div(\n", 1074 | " Div(\"Alex Chen\", cls=\"font-semibold\"),\n", 1075 | " Div(\"2 hours ago\", cls=\"text-sm opacity-50\")),\n", 1076 | " cls=\"items-center gap-3 my-4\"),\n", 1077 | " mk_rating(5, 3, nm='rating-demo', cls='-sm', itemcls='-star-2 bg-orange-400'),\n", 1078 | " Progress(value=\"75\", max=\"100\", cls=\"-primary -sm mt-3\"),\n", 1079 | " CardActions(\n", 1080 | " Btn(\"Learn More\", cls=\"-primary\"),\n", 1081 | " Btn(\"Bookmark\"),\n", 1082 | " cls=\"justify-end mt-4\")\n", 1083 | " ),\n", 1084 | " cls=\"w-96 bg-base-100 shadow-xl\"),\n", 1085 | " cls=\"min-h-screen bg-base-200 flex items-center justify-center p-8\"\n", 1086 | ")" 1087 | ] 1088 | }, 1089 | { 1090 | "cell_type": "code", 1091 | "execution_count": null, 1092 | "id": "691e5fb8", 1093 | "metadata": {}, 1094 | "outputs": [ 1095 | { 1096 | "data": { 1097 | "text/html": [ 1098 | " " 1156 | ], 1157 | "text/plain": [ 1158 | "" 1159 | ] 1160 | }, 1161 | "execution_count": null, 1162 | "metadata": {}, 1163 | "output_type": "execute_result" 1164 | } 1165 | ], 1166 | "source": [ 1167 | "p(c)" 1168 | ] 1169 | }, 1170 | { 1171 | "cell_type": "markdown", 1172 | "id": "846f0854", 1173 | "metadata": {}, 1174 | "source": [ 1175 | "## Next steps" 1176 | ] 1177 | }, 1178 | { 1179 | "cell_type": "markdown", 1180 | "id": "95e1c5de", 1181 | "metadata": {}, 1182 | "source": [ 1183 | "The best way to learn fhdaisy is through interactive experimentation. Use Jupyter or Solveit to explore components in real-time - create a previewer with `mk_previewer()`, then try different component combinations and modifiers to see instant results. Start with simple components like `Btn` or `Alert`, experiment with different `-primary`, `-outline`, or `-lg` modifiers, then work your way up to complex multi-part components like cards and modals. This hands-on approach helps you quickly understand how DaisyUI's styling system works with fhdaisy's Python API.\n", 1184 | "\n", 1185 | "This documentation page has a markdown version (click \"commonmark\" on the right) that serves as excellent context for LLMs. When you provide this markdown to AI assistants, they become quite effective at generating fhdaisy components and can help you quickly prototype interfaces or convert existing HTML designs to use fhdaisy's cleaner syntax.\n", 1186 | "\n", 1187 | "To explore all available components and their modifiers, check out the [DaisyUI component documentation](https://daisyui.com/components/). For building complete FastHTML applications, see the [FastHTML documentation](https://www.fastht.ml/). \n", 1188 | "\n", 1189 | "If you create useful `mk_` helper functions for repetitive patterns, consider contributing them back to fhdaisy. The pattern is simple: identify common component structures, create functions prefixed with `mk_`, and submit them to the [fhdaisy repository](https://github.com/AnswerDotAI/fhdaisy). Your contributions can help make the library even more convenient for the community." 1190 | ] 1191 | } 1192 | ], 1193 | "metadata": {}, 1194 | "nbformat": 4, 1195 | "nbformat_minor": 5 1196 | } 1197 | --------------------------------------------------------------------------------