Skip to content

Commit

Permalink
Merge pull request #42 from AnswerDotAI/SemanticText
Browse files Browse the repository at this point in the history 
Add semantic text styling to docs examples
  • Loading branch information
@Isaac-Flath
Isaac-Flath authored Jan 31, 2025
2 parents 23d0061 + 5209434 commit fe12cc4
Show file tree
Hide file tree
Showing 9 changed files with 178 additions and 153 deletions.
14 changes: 7 additions & 7 deletions docs/api_reference/api_reference.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -257,7 +257,7 @@ def ex_semantic_elements():
# Meta information example
Section(
H3("Blog Post Title (H3)"),
Meta("By John Doe • 5 min read (Meta)"),
Small("By John Doe • 5 min read (Small)"),
P("Article content here...")),
# Text decoration examples
P("This text has ",U("proper name annotation (U)"), " and this is ",S("outdated information (S)"), " that's been superseded."),
Expand All @@ -282,7 +282,7 @@ def ex_other():
fn2code_string(ex_headings),
fn2code_string(ex_semantic_elements),
fn2code_string(ex_other),
P("Styling text is possibly the most common style thing to do, so we have a couple of helpers for discoverability inside python. `TextPresetsT` is intended to be combinations are are widely applicable and used often, where `TextT` is intended to be more flexible options for you to combine together yourself."),
P("Styling text is possibly the most common style thing to do, so we have a couple of helpers for discoverability inside python. `TextPresets` is intended to be combinations are are widely applicable and used often, where `TextT` is intended to be more flexible options for you to combine together yourself."),
H5("TextPresets.*"),
fn2code_string(ex_textpresets),
H5("TextT.*"),
Expand Down Expand Up @@ -380,30 +380,30 @@ def ex_card():
def Tags(cats): return Div(cls='space-x-2')(map(Label, cats))

def ex_card2_wide():
def Tags(cats): return Div(cls='space-x-2')(map(Label, cats))
def Tags(cats): return DivLAligned(map(Label, cats))

return Card(
DivLAligned(
A(Img(src="https://picsum.photos/200/200?random=12", style="width:200px"),href="#"),
Div(cls='space-y-3 uk-width-expand')(
H4("Creating Custom FastHTML Tags for Markdown Rendering"),
P("A step by step tutorial to rendering markdown in FastHTML using zero-md inside of DaisyUI chat bubbles"),
DivFullySpaced(map(Span, ["Isaac Flath", "20-October-2024"]), cls=TextPresets.muted_sm),
DivFullySpaced(map(Small, ["Isaac Flath", "20-October-2024"]), cls=TextT.muted),
DivFullySpaced(
Tags(["FastHTML", "HTMX", "Web Apps"]),
Button("Read", cls=(ButtonT.primary,'h-6'))))),
cls=CardT.hover)

def ex_card2_tall():
def Tags(cats): return Div(cls='space-x-2')(map(Label, cats))
def Tags(cats): return DivLAligned(map(Label, cats))

return Card(
Div(
A(Img(src="https://picsum.photos/200/200?random=14"),href="#"),
A(Img(src="https://picsum.photos/400/200?random=14"), href="#"),
Div(cls='space-y-3 uk-width-expand')(
H4("Creating Custom FastHTML Tags for Markdown Rendering"),
P("A step by step tutorial to rendering markdown in FastHTML using zero-md inside of DaisyUI chat bubbles"),
DivFullySpaced(map(Span, ["Isaac Flath", "20-October-2024"]), cls=TextPresets.muted_sm),
DivFullySpaced(map(Small, ["Isaac Flath", "20-October-2024"]), cls=TextT.muted),
DivFullySpaced(
Tags(["FastHTML", "HTMX", "Web Apps"]),
Button("Read", cls=(ButtonT.primary,'h-6'))))),
Expand Down
14 changes: 7 additions & 7 deletions docs/examples/auth.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,18 +20,18 @@ def index():
Container(
DivVStacked(
H3("Create an account"),
P("Enter your email below to create your account", cls=TextPresets.muted_sm)),
Small("Enter your email below to create your account", cls=TextT.muted)),
Form(
Input(placeholder="[email protected]"),
Button(Span(cls="mr-2", uk_spinner="ratio: 0.54"), "Sign in with Email", cls=(ButtonT.primary, "w-full"), disabled=True),
DividerSplit("Or continue with",cls=TextPresets.muted_sm),
DividerSplit(Small("Or continue with"),cls=TextT.muted),
Button(UkIcon('github',cls='mr-2'), "Github", cls=(ButtonT.default, "w-full")),
cls='space-y-6'),
P(
"By clicking continue, you agree to our ",
A(cls=AT.muted, href="#demo")("Terms of Service")," and ",
A(cls=AT.muted, href="#demo")("Privacy Policy"),".",
cls=(TextPresets.muted_sm,"text-center")),
DivVStacked(Small(
"By clicking continue, you agree to our ",
A(cls=AT.muted, href="#demo")("Terms of Service")," and ",
A(cls=AT.muted, href="#demo")("Privacy Policy"),".",
cls=(TextT.muted,"text-center"))),
cls="space-y-6")))

return Title("Auth Example"),Grid(left,right,cols=2, gap=0,cls='h-screen')
Expand Down
26 changes: 14 additions & 12 deletions docs/examples/cards.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,14 @@
DividerSplit("OR CONTINUE WITH", text_cls=TextPresets.muted_sm),
LabelInput('Email', id='email', placeholder='[email protected]'),
LabelInput('Password', id='password',placeholder='Password', type='Password'),
header=(H3('Create an Account'),P(cls=TextPresets.muted_sm)('Enter your email below to create your account')),
footer=Button(cls=(ButtonT.primary,'w-full'))('Create Account'))
header=(H3('Create an Account'),Subtitle('Enter your email below to create your account')),
footer=Button('Create Account',cls=(ButtonT.primary,'w-full')))

Card1Svg = Svg(viewBox="0 0 24 24", fill="none", stroke="currentColor", stroke_linecap="round", stroke_linejoin="round", stroke_width="2", cls="h-6 w-6 mr-1")(Rect(width="20", height="14", x="2", y="5", rx="2"),Path(d="M2 10h20"))
PaypalSvg = Svg(role="img", viewBox="0 0 24 24", cls="h-6 w-6 mr-1")(Path(d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z", fill="currentColor")),
AppleSvg = Svg(role="img", viewBox="0 0 24 24", cls="h-6 w-6 mr-1")(Path(d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701", fill="currentColor"))
PaypalSVG_data = "M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"
AppleSVG_data = "M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
Card1Svg = Svg(viewBox="0 0 24 24", fill="none", stroke="currentColor", stroke_linecap="round", stroke_linejoin="round", stroke_width="2", cls="h-6 w-6 mr-1")(Rect(width="20", height="14", x="2", y="5", rx="2"),Path(d="M2 10h20"))
PaypalSvg = Svg(role="img", viewBox="0 0 24 24", cls="h-6 w-6 mr-1")(Path(d=PaypalSVG_data, fill="currentColor")),
AppleSvg = Svg(role="img", viewBox="0 0 24 24", cls="h-6 w-6 mr-1")(Path(d=AppleSVG_data, fill="currentColor"))

PaymentMethod = Card(
Grid(Button(DivCentered(Card1Svg, "Card"), cls='h-20 border-2 border-primary'),
Expand All @@ -30,7 +32,7 @@
Grid(LabelUkSelect(*Options(*calendar.month_name[1:],selected_idx=0),label='Expires',id='expire_month'),
LabelUkSelect(*Options(*range(2024,2030),selected_idx=0), label='Year', id='expire_year'),
LabelInput('CVV', id='cvv',placeholder='CVV', cls='mt-0'))),
header=(H3('Payment Method'),P(cls=TextPresets.muted_sm)('Add a new payment method to your account.')))
header=(H3('Payment Method'),Subtitle('Add a new payment method to your account.')))

area_opts = ('Team','Billing','Account','Deployment','Support')
severity_opts = ('Severity 1 (Highest)', 'Severity 2', 'Severity 3', 'Severity 4 (Lowest)')
Expand All @@ -41,12 +43,12 @@
LabelTextArea( label='Description', id='description',placeholder='Please include all information relevant to your issue'),
Div(FormLabel('Tags', fr='#tags'),
Uk_input_tag(name="Tags",state="danger", value="Spam,Invalid", uk_cloak=True, id='tags')),
header=(H3('Report Issue'),P(cls=TextPresets.muted_sm)('What area are you having problems with?')),
header=(H3('Report Issue'),Subtitle('What area are you having problems with?')),
footer = DivFullySpaced(Button('Cancel'), Button(cls=ButtonT.primary)('Submit')))

monster_desc ="Python-first beautifully designed components because you deserve to focus on features that matter and your app deserves to be beautiful from day one."
MonsterUI = Card(H4("Monster UI"),
P(monster_desc, cls=TextPresets.muted_sm),
Subtitle(monster_desc),
DivLAligned(
Div("Python"),
DivLAligned(UkIcon('star'),Div("20k"), cls='space-x-1'),
Expand All @@ -63,7 +65,7 @@ def CookieTableRow(heading, description, active=False):
CookieTableRow('Strictly Necessary', 'These cookies are essential in order to use the website and use its features.', True),
CookieTableRow('Functional Cookies', 'These cookies allow the website to provide personalized functionality.'),
CookieTableRow('Performance Cookies', 'These cookies help to improve the performance of the website.'))),
header=(H4('Cookie Settings'),P(cls=(TextPresets.muted_sm, 'mt-1.5'))('Manage your cookie settings here.')),
header=(H4('Cookie Settings'),Subtitle('Manage your cookie settings here.')),
footer=Button('Save Preferences', cls=(ButtonT.primary, 'w-full')))

team_members = [("Sofia Davis", "[email protected]", "Owner"),("Jackson Lee", "[email protected]", "Member"),]
Expand All @@ -81,7 +83,7 @@ def TeamMemberRow(name, email, role):
A(Div('Owner', NavSubtitle('Admin-level access to all resources.')))])))

TeamMembers = Card(*[TeamMemberRow(*member) for member in team_members],
header = (H4('Team Members'),Div('Invite your team members to collaborate.', cls=('mt-1.5', TextPresets.muted_sm))),)
header = (H4('Team Members'),Subtitle('Invite your team members to collaborate.')))

access_roles = ("Read and write access", "Read-only access")
team_members = [("Olivia Martin", "[email protected]", "Read and write access"),
Expand All @@ -100,7 +102,7 @@ def TeamMemberRow(name, email, role):
Divider(),
H4('People with access', cls=TextPresets.bold_sm),
*[TeamMemberRow(*member) for member in team_members],
header = (H4('Share this document'),Div('Anyone with the link can view this document.', cls=('mt-1.5',TextPresets.muted_sm))))
header = (H4('Share this document'),Subtitle('Anyone with the link can view this document.')))

DateCard = Card(Button('Jan 20, 2024 - Feb 09, 2024'))

Expand All @@ -115,7 +117,7 @@ def NotificationRow(icon, name, desc):
NavContainer(
*[NotificationRow(*row) for row in section_content],
cls=NavT.secondary),
header = (H4('Notification'),Div('Choose what you want to be notified about.', cls=('mt-1.5', TextPresets.muted_sm))),
header = (H4('Notification'),Subtitle('Choose what you want to be notified about.')),
body_cls='pt-0')

TeamCard = Card(
Expand Down
17 changes: 9 additions & 8 deletions docs/examples/dashboard.py
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
"""FrankenUI Dashboard Example built with MonsterUI (original design by ShadCN)"""

from fasthtml.common import *
from monsterui.all import *
from fasthtml.common import * # Bring in all of fasthtml
import fasthtml.common as fh # Used to get unstyled components
from monsterui.all import * # Bring in all of monsterui, including shadowing fasthtml components with styled components
from fasthtml.svg import *
import numpy as np
import plotly.express as px
Expand Down Expand Up @@ -47,9 +48,9 @@ def AvatarItem(name, email, amount):
return DivFullySpaced(
DivLAligned(
DiceBearAvatar(name, 9,9),
Div(P(name, cls=TextPresets.bold_sm),
P(email, cls=TextPresets.muted_sm))),
Div(amount, cls="ml-auto font-medium"))
Div(Strong(name, cls=TextT.sm),
Address(A(email,href=f'mailto:{email}')))),
fh.Data(amount, cls="ml-auto font-medium", value=amount[2:]))

recent_sales = Card(
Div(cls="space-y-8")(
Expand All @@ -59,7 +60,7 @@ def AvatarItem(name, email, amount):
("Isabella Nguyen", "[email protected]", "+$299.00"),
("William Kim", "[email protected]", "+$99.00"),
("Sofia Davis", "[email protected]", "+$39.00"))]),
header=Div(H3("Recent Sales"),P("You made 265 sales this month.", cls=TextPresets.muted_sm)),
header=Div(H3("Recent Sales"),Subtitle("You made 265 sales this month.")),
cls='col-span-3')

teams = [["Alicia Koch"],['Acme Inc', 'Monster Inc.'],['Create a Team']]
Expand All @@ -83,8 +84,8 @@ def NavSpacedLi(t,s): return NavCloseLi(A(DivFullySpaced(P(t),P(s,cls=TextPreset
*[NavSpacedLi(*hk) for hk in hotkeys],))

top_nav = NavBar(
Div(team_dropdown, *map(lambda x: Li(A(x)), ["Overview", "Customers", "Products", "Settings"])),
DivLAligned(avatar_dropdown, Input(placeholder='Search')))
nav_links=Div(team_dropdown, *map(lambda x: Li(A(x)), ["Overview", "Customers", "Products", "Settings"])),
title=DivLAligned(avatar_dropdown, Input(placeholder='Search')))

@rt
def index():
Expand Down
Loading

0 comments on commit fe12cc4

Please sign in to comment.