williamneto / reactpy-material

Material UI components for reactpy projects

reactpy-material

This project provide Material UI components to be used in reactpy projects. For a deep understanding of the components and its properties check the Material UI Docs.

Available components

Layout

• Box
• Container
• Form Contol
• Grid
• Stack

Inputs

• Autocomplete
• Button
• Button group
• Checkbox
• Chip
• Input
• Input label
• Select
• Text field
• Switch

Data display

• Icons
• Typography
• Table container
• Table
• Table body
• Table head
• Table row
• Table cell
• Datagrid

Navigation

• Speed dial
• Pagination
• Menu
• Menu item
• Tabs

Samples

Button

Reference

from reactpy import component
from reactpy_material import button

@component
def app()
    return ( 
        button(
            "Hello world", 
            attrs={
                "variant": "contained", 
                "href": "#test"
            }
        )
    )

Typography

Reference

@component
def app():
    return html.div(
        typography(
            "h1. Heading",
            attrs={
                "variant": "h1"
            }
        )
    )

run(app)

Check the samples/ folder to see more samples of the available components.

reactpy-material's Issues

bug: component box with a child component box doesn't render

Description

• A component returning a box with a child component returning another box doesn't render

Version

• pre v.0.0.1

Steps to Reproduce

1. Create two components:

from reactpy import component, run, html
from reactpy_material import box


@component  # @componet is removed: OK
def hello_box():
    return box(
    # return html.div(   # OK if s/box/html.div/
        html.h1(
            {"key": "title1"},
            "Hello World"
        ),
        key="hello box"
    )


@component
def hello_box_inside_box():
    return box(
        hello_box(),
        key="external box"
    )


run(hello_box_inside_box)
# run(hello_box) # running child component - OK

2. Run the code and inspect in the browser and nothing is rendered, resulting in a blank page.
3. Inspect the web page and find the error: "Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('') is not a valid name."

v0.0.1

Components

Layout

• Grid
• Container
• Box
• Stack

Inputs

• Button
• Button group
• Autocomplete
• Checkbox
• Select
• Text Field

Data display

• Icons
• Typography
• Table container
• Table
• Table body
• Table head
• Table row
• Table cell

Navigation

• Speed dial
• Pagination
• Menu
• Tabs

Surfaces

• Accordion
• App Bar
• Card
• Paper

Feedback

• Alert
• Dialog
• Progress
• Snackbar