PyCafe - Solara - Interactive Style Picker with ipyantd

app.py
requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
# run as: $ solara run examples/demo.py
import ipyantd.components as antd
import ipyantd.icons.components as icons

import solara
import ipyreact


slider_range = solara.reactive([20, 70])
multi_select = solara.reactive(["apple", "pear"])
switch = solara.reactive(True)
style_index = solara.reactive(1)

styles = [
    {
        "colorPrimary": '#00b96b',
        "borderRadius": 8,
    },
    {
        "colorPrimary": "#1677FF",
        "borderRadius": 6,
    },
    {
        "colorPrimary": "#ED4192",
        "borderRadius": 16,
    },
    {
        "colorPrimary": "#1890ff",
        "borderRadius": 2,
    },
]



def report_click(event_data=None):
    print("clicked")


options = [
    dict(label="Apple", value="apple"),
    dict(label="Pear", value="pear"),
    dict(label="Cherry", value="cherry"),
]


class ConfigProvider(ipyreact.ValueWidget):
    _esm = """
    import React from "react";
    import {ConfigProvider} from "antd";

    export default ({borderRadius, colorPrimary, children, ...rest}) => {
        return <ConfigProvider {...rest}
            theme={{
                token: {
                    // Seed Token
                    colorPrimary: colorPrimary,
                    borderRadius,

                    // Alias Token
                    //colorBgContainer: '#f6ffed',
                },
                }}
        >{children}</DatePicker>
    }
    
    """

class PreviewComponent(ipyreact.ValueWidget):
    _esm = """
import React from 'react';
import { Button, theme } from 'antd';

const { useToken } = theme;

const App: React.FC = ({selected, ...props}) => {
  const { token } = useToken();

  return (
    <div
      style={{
        backgroundColor: token.colorPrimaryBg,
        padding: token.padding,
        border: selected ? "1px solid #333" :  null,
        borderRadius: token.borderRadius,
        color: token.colorPrimaryText,
        fontSize: token.fontSize,
        cursor: "pointer",
        margin: "5px",
      }} {...props}
    >
      Styled preview
    </div>
  );
};

export default App;
"""

@solara.component
def Div(children=[]):
    return ipyreact.Widget.element(_type="div", children=children)


@solara.component
def Page():
    Div(children=["Pick a style:"])
    style = styles[style_index.value]
    with ConfigProvider.element(props=style):
        with antd.Row(props=dict(gutter=[1, 1], style={"padding": "10px"})):
            for index, style in enumerate(styles):
                with ConfigProvider.element(props=style):
                    def pick(*ignore, index=index):
                        style_index.value = index
                    PreviewComponent.element(events={"onClick": pick}, props={"selected": index==style_index.value})
        Div(children=["Style preview:"])
        with antd.Col(props=dict(style={"margin": "20px", "borderRadius": "20px", "border": "1px solid " + style["colorPrimary"]})):
            with antd.Row(props=dict(gutter=[48, 48], style={"padding": "100px"})):
                with antd.Col(props=dict(span=12, style={"boxSizing": "border-box"})):
                    with Div():
                        antd.Button(children=["Button"], props=dict(type="primary"), events={"onClick": report_click})
                with antd.Col(props=dict(span=12)):
                    antd.Slider(value=slider_range.value, on_value=slider_range.set, props=dict(min=0, max=100, range=True))
                with antd.Col(props=dict(span=12)):
                    # select does not dynamically update?
                    antd.Select(value=multi_select.value, on_value=multi_select.set, props=dict(options=options, style=dict(width="220px"), mode="multiple"))
                with antd.Col(props=dict(span=12)):
                    antd.Switch(value=switch.value, on_value=switch.set)
Py.Cafe

ipyantd-styled-0

Interactive Style Picker with ipyantd
