Skip to content

Commit

Permalink
Organize
Browse files Browse the repository at this point in the history
  • Loading branch information
@Isaac-Flath
Isaac-Flath committed Aug 13, 2024
1 parent bf28fbc commit 0beed19
Show file tree
Hide file tree
Showing 6 changed files with 261 additions and 86 deletions.
9 changes: 5 additions & 4 deletions app_cards.py
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
from fasthtml.common import *
from fh_frankenui.core import *
from fh_frankenui.components import *
from fh_frankenui.style import *
from fh_frankenui.foundations import *


Expand All @@ -14,10 +15,10 @@ def home():

header = (Strong('Create an account'),
P(cls='uk-text-muted')('Enter your email below to create your account'))
footer = UkButton(typ='primary')('Create Account')
footer = UkButton(typ=UkTyp.primary)('Create Account')

body = (UkButton(typ='default')('Github'),
UkButton(typ='default')('Google'),
body = (UkButton(typ=UkTyp.default)('Github'),
UkButton(typ=UkTyp.default)('Google'),
P(cls='uk-text-lead uk-text-small')("Or continue with"),
UkInput('Email','', 'email',placeholder='[email protected]'),
UkInput('Password','', 'Password',placeholder='Password',type='Password'))
Expand Down
15 changes: 9 additions & 6 deletions fh_frankenui/_modidx.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,19 @@
'doc_host': 'https://Isaac-Flath.github.io',
'git_url': 'https://github.com/Isaac-Flath/fh-frankenui',
'lib_path': 'fh_frankenui'},
'syms': { 'fh_frankenui.core': { 'fh_frankenui.core.Card': ('core.html#card', 'fh_frankenui/core.py'),
'fh_frankenui.core.Theme': ('core.html#theme', 'fh_frankenui/core.py'),
'fh_frankenui.core.Theme.headers': ('core.html#theme.headers', 'fh_frankenui/core.py'),
'fh_frankenui.core.UkButton': ('core.html#ukbutton', 'fh_frankenui/core.py'),
'fh_frankenui.core.UkInput': ('core.html#ukinput', 'fh_frankenui/core.py')},
'syms': { 'fh_frankenui.components': { 'fh_frankenui.components.Card': ('components.html#card', 'fh_frankenui/components.py'),
'fh_frankenui.components.Theme': ('components.html#theme', 'fh_frankenui/components.py'),
'fh_frankenui.components.Theme.headers': ( 'components.html#theme.headers',
'fh_frankenui/components.py'),
'fh_frankenui.components.UkButton': ('components.html#ukbutton', 'fh_frankenui/components.py'),
'fh_frankenui.components.UkInput': ('components.html#ukinput', 'fh_frankenui/components.py')},
'fh_frankenui.foundations': { 'fh_frankenui.foundations.BaseEnum': ('foundations.html#baseenum', 'fh_frankenui/foundations.py'),
'fh_frankenui.foundations.BaseEnum.__add__': ( 'foundations.html#baseenum.__add__',
'fh_frankenui/foundations.py'),
'fh_frankenui.foundations.BaseEnum.__str__': ( 'foundations.html#baseenum.__str__',
'fh_frankenui/foundations.py'),
'fh_frankenui.foundations.CoreEnum': ('foundations.html#coreenum', 'fh_frankenui/foundations.py'),
'fh_frankenui.foundations.CoreEnum.__init__': ( 'foundations.html#coreenum.__init__',
'fh_frankenui/foundations.py')}}}
'fh_frankenui/foundations.py')},
'fh_frankenui.style': { 'fh_frankenui.style.UkTyp': ('style.html#uktyp', 'fh_frankenui/style.py'),
'fh_frankenui.style.UkTyp.__str__': ('style.html#uktyp.__str__', 'fh_frankenui/style.py')}}}
33 changes: 14 additions & 19 deletions fh_frankenui/core.py → fh_frankenui/components.py
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
# AUTOGENERATED! DO NOT EDIT! File to edit: ../nbs/01_core.ipynb.
# AUTOGENERATED! DO NOT EDIT! File to edit: ../nbs/01_components.ipynb.

# %% auto 0
__all__ = ['Theme', 'Card', 'UkInput', 'UkButton']
__all__ = ['Theme', 'UkInput', 'UkButton', 'Card']

# %% ../nbs/01_core.ipynb 2
from .foundations import *
# %% ../nbs/01_components.ipynb 2
# from fh_frankenui.foundations import *
from fasthtml.common import *
from enum import Enum

# %% ../nbs/01_core.ipynb 3
# %% ../nbs/01_components.ipynb 4
class Theme(Enum):
slate = "slate"
stone = "stone"
Expand All @@ -30,15 +30,7 @@ def headers(self):
return (*js, Link(rel="stylesheet", href=_url.format(theme=self.value)))


# %% ../nbs/01_core.ipynb 4
def Card(*c, header=None, footer=None, **kwargs):
res = []
if header: res += [Div(cls='uk-card-header')(header),]
res += [Div(cls='uk-card-body')(*c),]
if footer: res += [Div(cls='uk-card-footer')(footer),]
return Div(cls='uk-card', **kwargs)(*res)

# %% ../nbs/01_core.ipynb 5
# %% ../nbs/01_components.ipynb 7
def UkInput(label=(), cls=(), id="", **kwargs):
if label:
label = Label(label, cls='uk-form-label')
Expand All @@ -47,12 +39,15 @@ def UkInput(label=(), cls=(), id="", **kwargs):
if id: res.id = id
return Div(cls=cls)(label, res)


UkInput(label="Name", id="name")

# %% ../nbs/01_core.ipynb 6
# %% ../nbs/01_components.ipynb 9
def UkButton(*c, typ="", **kwargs):
if typ: typ = f'uk-button-{typ}'
return Button(cls=f'uk-button {typ}', **kwargs)(*c)

UkButton("name")
# %% ../nbs/01_components.ipynb 12
def Card(*c, header=None, footer=None, **kwargs):
res = []
if header: res += [Div(cls='uk-card-header')(header),]
res += [Div(cls='uk-card-body')(*c),]
if footer: res += [Div(cls='uk-card-footer')(footer),]
return Div(cls='uk-card', **kwargs)(*res)
19 changes: 19 additions & 0 deletions fh_frankenui/style.py
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
# AUTOGENERATED! DO NOT EDIT! File to edit: ../nbs/02_style.ipynb.

# %% auto 0
__all__ = ['UkTyp']

# %% ../nbs/02_style.ipynb 2
from fasthtml.common import *
from .components import *
from enum import Enum

# %% ../nbs/02_style.ipynb 6
class UkTyp(Enum):
default = 'default'
ghost = 'ghost'
primary = 'primary'
secondary = 'secondary'
danger = 'danger'

def __str__(self): return self.value
167 changes: 110 additions & 57 deletions nbs/01_core.ipynb → nbs/01_components.ipynb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,41 +4,45 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"# Core"
"# Components\n",
"\n",
"> Componenents that are the building blocks to the UI"
]
},
{
"cell_type": "code",
"execution_count": null,
"execution_count": 1,
"metadata": {},
"outputs": [],
"source": [
"#| default_exp core"
"#| default_exp components"
]
},
{
"cell_type": "code",
"execution_count": 104,
"execution_count": 3,
"metadata": {},
"outputs": [],
"source": [
"#| hide\n",
"#| export\n",
"from fh_frankenui.foundations import *\n",
"# from fh_frankenui.foundations import *\n",
"from fasthtml.common import *\n",
"from enum import Enum"
]
},
{
"cell_type": "code",
"execution_count": 105,
"cell_type": "markdown",
"metadata": {},
"outputs": [],
"source": []
"source": [
"## Themes\n",
"\n",
"Choose a theme for your app."
]
},
{
"cell_type": "code",
"execution_count": 105,
"execution_count": 4,
"metadata": {},
"outputs": [],
"source": [
Expand Down Expand Up @@ -66,22 +70,43 @@
},
{
"cell_type": "code",
"execution_count": 106,
"execution_count": 15,
"metadata": {
"vscode": {
"languageId": "plaintext"
}
},
"outputs": [],
"source": [
"hdrs = Theme.blue.headers()"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Base Components"
]
},
{
"cell_type": "code",
"execution_count": 13,
"metadata": {},
"outputs": [],
"source": [
"#|export\n",
"def Card(*c, header=None, footer=None, **kwargs):\n",
" res = []\n",
" if header: res += [Div(cls='uk-card-header')(header),]\n",
" res += [Div(cls='uk-card-body')(*c),]\n",
" if footer: res += [Div(cls='uk-card-footer')(footer),]\n",
" return Div(cls='uk-card', **kwargs)(*res)"
"#| export\n",
"def UkInput(label=(), cls=(), id=\"\", **kwargs):\n",
" if label: \n",
" label = Label(label, cls='uk-form-label')\n",
" if id: label.fr = id\n",
" res = Input(cls=f'uk-input', **kwargs)\n",
" if id: res.id = id\n",
" return Div(cls=cls)(label, res)"
]
},
{
"cell_type": "code",
"execution_count": 107,
"execution_count": 26,
"metadata": {},
"outputs": [
{
Expand All @@ -107,35 +132,39 @@
"output_type": "execute_result"
}
],
"source": [
"inp = UkInput(label=\"Name\", id=\"name\"); inp"
]
},
{
"cell_type": "code",
"execution_count": 11,
"metadata": {},
"outputs": [],
"source": [
"#| export\n",
"def UkInput(label=(), cls=(), id=\"\", **kwargs):\n",
" if label: \n",
" label = Label(label, cls='uk-form-label')\n",
" if id: label.fr = id\n",
" res = Input(cls=f'uk-input', **kwargs)\n",
" if id: res.id = id\n",
" return Div(cls=cls)(label, res)\n",
"\n",
"\n",
"UkInput(label=\"Name\", id=\"name\")"
"def UkButton(*c, typ=\"\", **kwargs):\n",
" if typ: typ = f'uk-button-{typ}'\n",
" return Button(cls=f'uk-button {typ}', **kwargs)(*c)"
]
},
{
"cell_type": "code",
"execution_count": 83,
"execution_count": 25,
"metadata": {},
"outputs": [
{
"data": {
"text/markdown": [
"```html\n",
"<button class=\"uk-button \">name</button>\n",
"<button disabled class=\"uk-button uk-button-primary\">Click me</button>\n",
"\n",
"```"
],
"text/plain": [
"['button', ('name',), {'class': 'uk-button '}]"
"['button',\n",
" ('Click me',),\n",
" {'disabled': True, 'class': 'uk-button uk-button-primary'}]"
]
},
"execution_count": null,
Expand All @@ -144,38 +173,74 @@
}
],
"source": [
"#| export\n",
"def UkButton(*c, typ=\"\", **kwargs):\n",
" if typ: typ = f'uk-button-{typ}'\n",
" return Button(cls=f'uk-button {typ}', **kwargs)(*c)\n",
"\n",
"UkButton(\"name\")"
"btn = UkButton('Click me', typ='primary', disabled=True); btn"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Many things use a consistent type/style modifier associated with the theme in Franken UI. For example, uk-button-**primary**, uk-text-**primary** and uk-card-**primary**.\n",
"\n",
"The UkTyp will store the most common and useful types that can be inserted to many places."
"## Higher order components"
]
},
{
"cell_type": "code",
"execution_count": 121,
"execution_count": 5,
"metadata": {},
"outputs": [],
"source": [
"#|export\n",
"def Card(*c, header=None, footer=None, **kwargs):\n",
" res = []\n",
" if header: res += [Div(cls='uk-card-header')(header),]\n",
" res += [Div(cls='uk-card-body')(*c),]\n",
" if footer: res += [Div(cls='uk-card-footer')(footer),]\n",
" return Div(cls='uk-card', **kwargs)(*res)"
]
},
{
"cell_type": "code",
"execution_count": 27,
"metadata": {},
"outputs": [
{
"data": {
"text/markdown": [
"```html\n",
"<button class=\"uk-button uk-button-primary\">Name</button>\n",
"<div class=\"uk-card\">\n",
" <div class=\"uk-card-header\">\n",
" <strong>A bold header</strong>\n",
" </div>\n",
" <div class=\"uk-card-body\">\n",
" <p>A simple text body</p>\n",
" <div class=\"\">\n",
" <label class=\"uk-form-label\" fr=\"name\">Name</label>\n",
" <input class=\"uk-input\" id=\"name\">\n",
" </div>\n",
" </div>\n",
" <div class=\"uk-card-footer\">\n",
" <button disabled class=\"uk-button uk-button-primary\">Click me</button>\n",
" </div>\n",
"</div>\n",
"\n",
"```"
],
"text/plain": [
"['button', ('Name',), {'class': 'uk-button uk-button-primary'}]"
"['div',\n",
" (['div', (['strong', ('A bold header',), {}],), {'class': 'uk-card-header'}],\n",
" ['div',\n",
" (['p', ('A simple text body',), {}],\n",
" ['div',\n",
" (['label', ('Name',), {'class': 'uk-form-label', 'fr': 'name'}],\n",
" ['input', (), {'class': 'uk-input', 'id': 'name'}]),\n",
" {'class': ''}]),\n",
" {'class': 'uk-card-body'}],\n",
" ['div',\n",
" (['button',\n",
" ('Click me',),\n",
" {'disabled': True, 'class': 'uk-button uk-button-primary'}],),\n",
" {'class': 'uk-card-footer'}]),\n",
" {'class': 'uk-card'}]"
]
},
"execution_count": null,
Expand All @@ -184,19 +249,7 @@
}
],
"source": [
"#| export \n",
"class UkTyp(Enum):\n",
" default = 'default'\n",
" ghost = 'default'\n",
" primary = 'primary'\n",
" secondary = 'secondary'\n",
" danger = 'danger'\n",
" text = 'text'\n",
" link = 'link'\n",
"\n",
" def __str__(self): return self.value\n",
"\n",
"UkButton('Name', typ=UkType.primary)"
"Card(P('A simple text body'), inp, header=Strong(\"A bold header\"), footer=btn)"
]
},
{
Expand Down
Loading

0 comments on commit 0beed19

Please sign in to comment.