Implement accordion component

[picklelo]

Test code:

"""Welcome to Reflex! This file outlines the steps to create a basic app."""
from rxconfig import config

import reflex as rx
import reflex.components.radix.themes as rdxt
import reflex.components.radix.primitives as rdxp


docs_url = "https://reflex.dev/docs/getting-started/introduction"
filename = f"{config.app_name}/{config.app_name}.py"
import random

data = [
    {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400},
    {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210},
    {"name": "Page C", "uv": 2000, "pv": 9800, "amt": 2290},
    {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000},
    {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181},
    {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500},
    {"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100},
]

data01 = [
    {"x": 100, "y": 200, "z": 200},
    {"x": 120, "y": 100, "z": 260},
    {"x": 170, "y": 300, "z": 400},
    {"x": 170, "y": 250, "z": 280},
    {"x": 150, "y": 400, "z": 500},
    {"x": 110, "y": 280, "z": 200},
]

data02 = [
    {"name": "Group A", "value": 400},
    {"name": "Group B", "value": 300},
    {"name": "Group C", "value": 300},
    {"name": "Group D", "value": 200},
    {"name": "Group E", "value": 278},
    {"name": "Group F", "value": 189},
]


class State(rx.State):
    """The app state."""

    count = 0

    def increment(self):
        """Increment the count."""
        self.count += 1

    def decrement(self):
        """Decrement the count."""
        self.count -= 1

    def random(self):
        """Randomize the count."""
        self.count = random.randint(0, 100)

def index() -> rx.Component:
    return rdxt.theme(
        rdxt.container(
            rdxt.flex(
                rdxp.accordion(
                    [
                        ("Is it accessible?", rdxt.button("Test button")),
                        ("Is it unstyled?", "Yes. It's unstyled by default, giving you freedom over the look and feel."),
                        ("Is it finished?", "It's still in beta, but it's ready to use in production.")
                    ],
                    type="single",
                    collapsible=True,
                    width="300px",
                ),
                rdxt.heading(State.count),
                rdxt.flex(
                    rdxt.button("Decrement", on_click=State.decrement),
                    rdxt.button(
                        "Randomize",
                        on_click=State.random,
                    ),
                    rdxt.button("Increment", on_click=State.increment),
                    direction="row",
                ),
                rx.recharts.area_chart(
                    rx.recharts.area(
                        data_key="uv",
                    ),
                    rx.recharts.x_axis(data_key="name"),
                    rx.recharts.y_axis(),
                    data=data,
                ),
                rx.recharts.scatter_chart(
                    rx.recharts.scatter(
                        data=data01,
                    ),
                    rx.recharts.x_axis(data_key="x", type_="number"),
                    rx.recharts.y_axis(data_key="y"),
                ),
                rx.recharts.pie_chart(
                    rx.recharts.pie(
                        data=data02,
                        data_key="value",
                        name_key="name",
                        cx="50%",
                        cy="50%",
                        label=True,
                        color_scheme="amber",
                    )
                ),
                # rx.data_editor(
                #     columns=columns,
                #     data=data,
                # ),
                direction="column",
                padding="1em",
                border_radius="1em",
                box_shadow="lg",
                gap="4",
            ),
            padding_y="5em",
            font_size="2em",
            text_align="center",
        )
    )


# Add state and page to the app.
app = rx.App(
    theme=rdxt.theme(
        appearance="dark", has_background=True, radius="none", accent_color="crimson"
    ),
)

app.add_page(index)
app.compile()

[masenf]

Not sure why, but in my app this is rendering as

/** @jsxImportSource @emotion/react */import { Fragment } from "react"

It still seems to work, somehow

[picklelo]

Yeah not sure I added an extra blank line but doesn't seem to care

[masenf]

what is this intending to support? this breaks the code that i was working on to support things like ::-webkit-scrollbar as pseudo elements

[picklelo]

I needed this for certain aria-label props, that were getting converted automatically toariaLabel and messing it up. I'll see if I can remove this

[picklelo]

Undid this change

[masenf]

probably should use a theme color here

[picklelo]

I made it "transparent" though I think actually it should be using one of the gray colors (either white or black). We can update this with the themes PR

[masenf]

This doesn't seem to be working... when i change the accent color, it does not affect the charts

[picklelo]

Removed the graphing changes for now