Skip to content

Commit

Permalink
use columns for showing layouts in components page, remove inline fun…
Browse files Browse the repository at this point in the history 
…ctions
  • Loading branch information
@devxpy
devxpy committed Jul 8, 2024
1 parent 24eb9ee commit 87f027a
Show file tree
Hide file tree
Showing 2 changed files with 155 additions and 160 deletions.
311 changes: 155 additions & 156 deletions components_doc.py
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import gooey_ui as gui
from gooey_ui import state
import inspect
from functools import wraps

import gooey_ui as gui

META_TITLE = "Gooey Components"
META_DESCRIPTION = "Explore the Gooey Component Library"
Expand All @@ -22,6 +23,7 @@ def render():


def show_source_code(fn):
@wraps(fn)
def wrapper(*args, **kwargs):
out = fn(*args, **kwargs)
code_block(inspect.getsource(fn))
Expand All @@ -30,176 +32,172 @@ def wrapper(*args, **kwargs):
return wrapper


def get_source_code(fn: callable):
source_code = inspect.getsource(fn)
return source_code


def render_layouts():
section_title("Layouts")

# Full Width Layout
sub_section_title("Full Width Layout")

@show_source_code
def full_width_layout():
with gui.tag("div", className="container-fluid bg-light p-4"):
with gui.tag("div", className="row"):
with gui.tag("div", className="col-12"):
gui.html("This is a full width layout")

full_width_layout()

# 1/2 Layout
sub_section_title("Full Width 1/2 Layout")

@show_source_code
def half_width_layout():
with gui.tag("div", className="container-fluid p-2"):
with gui.tag("div", className="row"):
with gui.tag("div", className="col-6 border"):
gui.html("This is a 1/2 width layout")
with gui.tag("div", className="col-6 border"):
gui.html("This is a 1/2 width layout")

half_width_layout()

# 1/3 Layout
sub_section_title("Full Width 1/3 Layout")

@show_source_code
def third_width_layout():
with gui.tag("div", className="container-fluid p-2"):
with gui.tag("div", className="row"):
with gui.tag("div", className="col-4 border"):
gui.html("This is a 1/3 width layout")
with gui.tag("div", className="col-4 border"):
gui.html("This is a 1/3 width layout")
with gui.tag("div", className="col-4 border"):
gui.html("This is a 1/3 width layout")

third_width_layout()

# Responsive 1/3 Layout
sub_section_title("Responsive 1/3 Layout")
gui.write("These columns will go full width on small devices")
responsive_third_width_layout()

@show_source_code
def responsive_third_width_layout():
with gui.tag("div", className="container-fluid p-2"):
with gui.tag("div", className="row"):
with gui.tag("div", className="col-12 col-md-4 border"):
gui.html("This is a responsive 1/3 width layout")
with gui.tag("div", className="col-12 col-md-4 border"):
gui.html("This is a responsive 1/3 width layout")
with gui.tag("div", className="col-12 col-md-4 border"):
gui.html("This is a responsive 1/3 width layout")

responsive_third_width_layout()
@show_source_code
def full_width_layout():
with gui.div(className="w-100 bg-light p-4"):
gui.html("This is a full width layout")


@show_source_code
def half_width_layout():
col1, col2 = gui.columns(2, responsive=False)
with col1:
with gui.div(className="border"):
gui.html("This is a 1/2 width layout")
with col2:
with gui.div(className="border"):
gui.html("This is a 1/2 width layout")


@show_source_code
def third_width_layout():
col1, col2, col3 = gui.columns(3, responsive=False)
with col1:
with gui.div(className="border"):
gui.html("This is a 1/3 width layout")
with col2:
with gui.div(className="border"):
gui.html("This is a 1/3 width layout")
with col3:
with gui.div(className="border"):
gui.html("This is a 1/3 width layout")


@show_source_code
def responsive_third_width_layout():
col1, col2, col3 = gui.columns(3)
with col1:
with gui.div(className="border"):
gui.html("This is a responsive 1/3 width layout")
with col2:
with gui.div(className="border"):
gui.html("This is a responsive 1/3 width layout")
with col3:
with gui.div(className="border"):
gui.html("This is a responsive 1/3 width layout")


def render_content():
section_title("Content")
with gui.tag("div", className="container-fluid"):
with gui.tag("div", className="row"):
# LEFT SIDE
with gui.tag("div", className="col-12 col-md-6"):

def render_headings():
sub_section_title("Headings")

@show_source_code
def render_h1_to_h6_headings():
with gui.tag("h1"):
gui.html("This is a h1 heading")
with gui.tag("h2"):
gui.html("This is a h2 heading")
with gui.tag("h3"):
gui.html("This is a h3 heading")
with gui.tag("h4"):
gui.html("This is a h4 heading")
with gui.tag("h5"):
gui.html("This is a h5 heading")
with gui.tag("h6"):
gui.html("This is a h6 heading")

render_h1_to_h6_headings()

render_headings()

# RIGHT SIDE
with gui.tag("div", className="col-12 col-md-6"):
sub_section_title("Normal Text")

@show_source_code
def normal_text():
gui.write("This is a normal text")

normal_text()

sub_section_title("Link")

@show_source_code
def link():
with gui.tag("a", href="https://www.gooey.ai"):
gui.html("This is a link")

link()

sub_section_title("Colored Text")

@show_source_code
def colored_text():
with gui.tag("p", className="text-primary"):
gui.html("This is a primary text")
with gui.tag("p", className="text-secondary"):
gui.html("This is a secondary text")
with gui.tag("p", className="text-success"):
gui.html("This is a success text")
with gui.tag("p", className="text-danger"):
gui.html("This is a danger text")
with gui.tag("p", className="text-warning"):
gui.html("This is a warning text")
with gui.tag("p", className="text-info"):
gui.html("This is a info text")
with gui.tag("p", className="text-light bg-dark"):
gui.html("This is a light text")

colored_text()
with gui.tag("div", className="container-fluid"), gui.tag("div", className="row"):
# LEFT SIDE
with gui.tag("div", className="col-12 col-md-6"):
render_headings()
# RIGHT SIDE
with gui.tag("div", className="col-12 col-md-6"):
sub_section_title("Normal Text")
normal_text()

sub_section_title("Link")
link()

sub_section_title("Colored Text")
colored_text()


def render_headings():
sub_section_title("Headings")
render_h1_to_h6_headings()


@show_source_code
def render_h1_to_h6_headings():
with gui.tag("h1"):
gui.html("This is a h1 heading")
with gui.tag("h2"):
gui.html("This is a h2 heading")
with gui.tag("h3"):
gui.html("This is a h3 heading")
with gui.tag("h4"):
gui.html("This is a h4 heading")
with gui.tag("h5"):
gui.html("This is a h5 heading")
with gui.tag("h6"):
gui.html("This is a h6 heading")


@show_source_code
def normal_text():
gui.write("This is a normal text")


@show_source_code
def link():
with gui.tag("a", href="https://www.gooey.ai"):
gui.html("This is a link")


@show_source_code
def colored_text():
with gui.tag("p", className="text-primary"):
gui.html("This is a primary text")
with gui.tag("p", className="text-secondary"):
gui.html("This is a secondary text")
with gui.tag("p", className="text-success"):
gui.html("This is a success text")
with gui.tag("p", className="text-danger"):
gui.html("This is a danger text")
with gui.tag("p", className="text-warning"):
gui.html("This is a warning text")
with gui.tag("p", className="text-info"):
gui.html("This is a info text")
with gui.tag("p", className="text-light bg-dark"):
gui.html("This is a light text")


def render_components():
section_title("Components")
with gui.tag("div", className="container-fluid"):
with gui.tag("div", className="row"):
# LEFT SIDE
with gui.tag("div", className="col-12 col-md-6"):
# BUTTONS
buttons_group()

# TABS
render_tabs_example()

# RIGHT SIDE
with gui.tag("div", className="col-12 col-md-6"):
# ALERTS
render_alerts()

# Inputs
render_inputs()
section_title("File Upload Button")

@show_source_code
def file_upload():
file = gui.file_uploader(
"**Upload Any File**",
key="file_uploader_test0",
help="Attach a video/audio/file to this.",
optional=True,
accept=["audio/*"],
)

file_upload()
with gui.tag("div", className="container-fluid"), gui.tag("div", className="row"):
# LEFT SIDE
with gui.tag("div", className="col-12 col-md-6"):
# BUTTONS
buttons_group()

# TABS
render_tabs_example()

# RIGHT SIDE
with gui.tag("div", className="col-12 col-md-6"):
# ALERTS
render_alerts()

# Inputs
render_inputs()

section_title("File Upload Button")
file_upload()


@show_source_code
def file_upload():
gui.file_uploader(
"**Upload Any File**",
key="file_uploader_test0",
help="Attach a video/audio/file to this.",
optional=True,
accept=["audio/*"],
)


def render_inputs():
Expand Down Expand Up @@ -288,17 +286,16 @@ def underline_tabs():

def buttons_group():
sub_section_title("Buttons")
buttons()

@show_source_code
def buttons():
with gui.tag("div"):
with gui.tag("div", className="d-flex justify-content-around"):
gui.button("Primary", key="test0", type="primary")
gui.button("Secondary", key="test1")
gui.button("Tertiary", key="test3", type="tertiary")
gui.button("Link Button", key="test3", type="link")

buttons()
@show_source_code
def buttons():
with gui.tag("div"), gui.tag("div", className="d-flex justify-content-around"):
gui.button("Primary", key="test0", type="primary")
gui.button("Secondary", key="test1")
gui.button("Tertiary", key="test3", type="tertiary")
gui.button("Link Button", key="test3", type="link")


def code_block(content: str):
Expand All @@ -315,9 +312,11 @@ def code_block(content: str):


def section_title(title: str):
with gui.tag("div", className="mb-4 mt-4 bg-light border-1 p-2"):
with gui.tag("h3", style={"font-weight": "500", "margin": "0"}):
gui.html(title.upper())
with (
gui.tag("div", className="mb-4 mt-4 bg-light border-1 p-2"),
gui.tag("h3", style={"font-weight": "500", "margin": "0"}),
):
gui.html(title.upper())


def sub_section_title(title: str):
Expand Down
4 changes: 0 additions & 4 deletions routers/root.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,10 +208,6 @@ def file_upload(form_data: FormData = fastapi_request_form):
return {"url": upload_file_from_bytes(filename, data, content_type)}


async def request_json(request: Request):
return await request.json()


@app.post("/components/")
@st.route
def component_page(request: Request):
Expand Down

0 comments on commit 87f027a

Please sign in to comment.