reflex-ant-design 0.1.0__tar.gz

reflex_ant_design-0.1.0/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ernesto Crespo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

reflex_ant_design-0.1.0/PKG-INFO

@@ -0,0 +1,212 @@
+Metadata-Version: 2.4
+Name: reflex-ant-design
+Version: 0.1.0
+Summary: Ant Design (antd) React components wrapped as Reflex components.
+Author-email: Ernesto Crespo <ecrespo@gmail.com>
+License: MIT
+Project-URL: Homepage, https://github.com/ecrespo/reflex-ant-design
+Project-URL: Repository, https://github.com/ecrespo/reflex-ant-design
+Project-URL: Issues, https://github.com/ecrespo/reflex-ant-design/issues
+Project-URL: Documentation, https://github.com/ecrespo/reflex-ant-design/tree/main/docs
+Keywords: reflex,reflex-custom-components,ant-design,antd,ui,react,components,design-system
+Classifier: Development Status :: 3 - Alpha
+Classifier: Framework :: AsyncIO
+Classifier: Programming Language :: Python :: 3
+Classifier: Programming Language :: Python :: 3.10
+Classifier: Programming Language :: Python :: 3.11
+Classifier: Programming Language :: Python :: 3.12
+Classifier: Programming Language :: Python :: 3.13
+Classifier: License :: OSI Approved :: MIT License
+Classifier: Topic :: Software Development :: User Interfaces
+Classifier: Topic :: Software Development :: Libraries :: Python Modules
+Requires-Python: >=3.10
+Description-Content-Type: text/markdown
+License-File: LICENSE
+Requires-Dist: reflex>=0.7.0
+Provides-Extra: dev
+Requires-Dist: pytest>=8.0; extra == "dev"
+Requires-Dist: ruff>=0.5; extra == "dev"
+Requires-Dist: build>=1.0; extra == "dev"
+Requires-Dist: twine>=5.0; extra == "dev"
+Requires-Dist: trove-classifiers>=2024.1.1; extra == "dev"
+Dynamic: license-file
+
+# reflex-ant-design
+
+[Ant Design](https://ant.design) (`antd`) wrapped as [Reflex](https://reflex.dev)
+components — build enterprise-grade UIs in pure Python.
+
+This is a Reflex **custom component** package. It exposes the Ant Design React
+components (Button, Table, Form, DatePicker, Modal, and ~90 more) as Reflex
+components you can drive entirely from Python state, with theming through
+`ConfigProvider`.
+
+> Status: **0.1.0 — alpha.** The API surface is broad and may still change.
+
+## Installation
+
+With **uv** (recommended):
+
+```bash
+uv add reflex-ant-design
+```
+
+With pip:
+
+```bash
+pip install reflex-ant-design
+```
+
+The `antd` npm package is installed automatically by Reflex the first time you
+run your app.
+
+## Quickstart
+
+```python
+import reflex as rx
+from reflex_ant_design import antd, icon
+
+
+class State(rx.State):
+    name: str = ""
+
+    @rx.event
+    def set_name(self, value: str):
+        self.name = value
+
+
+def index() -> rx.Component:
+    return antd.config_provider(
+        antd.card(
+            antd.space(
+                antd.input(
+                    value=State.name,
+                    on_change=State.set_name,
+                    placeholder="Your name",
+                    prefix=icon("UserOutlined"),
+                ),
+                antd.button("Greet", type="primary", icon=icon("SmileOutlined")),
+                antd.text(f"Hello!", strong=True),
+                direction="vertical",
+            ),
+            title="reflex-ant-design",
+        ),
+        theme={"token": {"colorPrimary": "#722ed1", "borderRadius": 8}},
+    )
+
+
+app = rx.App()
+app.add_page(index)
+```
+
+## Two ways to import
+
+```python
+# 1) Namespace (mirrors rx.*)
+from reflex_ant_design import antd
+antd.button("Save", type="primary")
+
+# 2) Flat factories
+from reflex_ant_design import button, table, date_picker
+button("Save", type="primary")
+```
+
+## Examples
+
+### Data table from state
+
+```python
+COLUMNS = [
+    {"title": "Name", "dataIndex": "name", "key": "name"},
+    {"title": "Role", "dataIndex": "role", "key": "role"},
+]
+DATA = [
+    {"key": "1", "name": "Ada", "role": "Engineer"},
+    {"key": "2", "name": "Alan", "role": "Researcher"},
+]
+
+antd.table(columns=COLUMNS, data_source=DATA, pagination={"pageSize": 5})
+```
+
+### Select bound to state
+
+```python
+antd.select(
+    value=State.country,
+    on_change=State.set_country,
+    options=[{"label": "Spain", "value": "es"}, {"label": "Japan", "value": "jp"}],
+    show_search=True,
+    allow_clear=True,
+)
+```
+
+### Modal driven by a boolean
+
+```python
+antd.button("Open", on_click=State.open_modal)
+antd.modal(
+    antd.text("Are you sure?"),
+    open=State.modal_open,
+    title="Confirm",
+    on_ok=State.close_modal,
+    on_cancel=State.close_modal,
+)
+```
+
+### Theming
+
+Wrap your app (or any subtree) in `config_provider` and pass design tokens:
+
+```python
+antd.config_provider(
+    your_app(),
+    theme={"token": {"colorPrimary": "#13c2c2", "borderRadius": 6}},
+    component_size="large",
+)
+```
+
+## Component catalog
+
+| Category | Components |
+| --- | --- |
+| **General** | Button, FloatButton (+ Group, BackTop), Typography (Title/Text/Paragraph/Link), `icon()` |
+| **Layout** | Divider, Flex, Row/Col, Layout (Header/Sider/Content/Footer), Space (+ Compact), Splitter |
+| **Navigation** | Anchor, Breadcrumb, Dropdown (+ Button), Menu, Pagination, Steps, Tabs |
+| **Data Entry** | Input (+ TextArea/Search/Password/OTP), InputNumber, Checkbox, Radio, Select, Switch, Slider, Rate, DatePicker, RangePicker, TimePicker, AutoComplete, Cascader, TreeSelect, Mentions, ColorPicker, Transfer, Upload, Form |
+| **Data Display** | Avatar, Badge, Card, Carousel, Collapse, Descriptions, Empty, Image, List, Popover, Tooltip, QRCode, Segmented, Statistic, Table, Tag, Timeline, Tour, Tree |
+| **Feedback** | Alert, Drawer, Modal, Popconfirm, Progress, Result, Skeleton, Spin, Watermark |
+| **Config** | ConfigProvider, App |
+
+See [`docs/guides/usage.md`](docs/guides/usage.md) for per-category notes and
+the gotchas (date values, imperative `message`/`notification`, form binding).
+
+## Try the demo
+
+```bash
+git clone https://github.com/ecrespo/reflex-ant-design
+cd reflex-ant-design
+make install
+cd reflex_ant_design_demo && uv run reflex run
+```
+
+## Documentation
+
+- [`docs/sdd`](docs/sdd) — the Spec-Driven Design docs (PRD, requirements,
+  architecture, component catalog, roadmap, implementation plan).
+- [`docs/guides/usage.md`](docs/guides/usage.md) — usage patterns and tips.
+- [`docs/guides/compatibility.md`](docs/guides/compatibility.md) — antd / React
+  / Reflex version matrix.
+
+## Compatibility
+
+- Reflex `>= 0.7`
+- `antd@^6` (works with React 19 shipped by Reflex 0.7+). Pin `antd@^5` for apps
+  on React 18 — see the compatibility guide.
+
+## Contributing
+
+See [CONTRIBUTING.md](CONTRIBUTING.md).
+
+## License
+
+MIT © Ernesto Crespo

reflex_ant_design-0.1.0/README.md

@@ -0,0 +1,179 @@
+# reflex-ant-design
+
+[Ant Design](https://ant.design) (`antd`) wrapped as [Reflex](https://reflex.dev)
+components — build enterprise-grade UIs in pure Python.
+
+This is a Reflex **custom component** package. It exposes the Ant Design React
+components (Button, Table, Form, DatePicker, Modal, and ~90 more) as Reflex
+components you can drive entirely from Python state, with theming through
+`ConfigProvider`.
+
+> Status: **0.1.0 — alpha.** The API surface is broad and may still change.
+
+## Installation
+
+With **uv** (recommended):
+
+```bash
+uv add reflex-ant-design
+```
+
+With pip:
+
+```bash
+pip install reflex-ant-design
+```
+
+The `antd` npm package is installed automatically by Reflex the first time you
+run your app.
+
+## Quickstart
+
+```python
+import reflex as rx
+from reflex_ant_design import antd, icon
+
+
+class State(rx.State):
+    name: str = ""
+
+    @rx.event
+    def set_name(self, value: str):
+        self.name = value
+
+
+def index() -> rx.Component:
+    return antd.config_provider(
+        antd.card(
+            antd.space(
+                antd.input(
+                    value=State.name,
+                    on_change=State.set_name,
+                    placeholder="Your name",
+                    prefix=icon("UserOutlined"),
+                ),
+                antd.button("Greet", type="primary", icon=icon("SmileOutlined")),
+                antd.text(f"Hello!", strong=True),
+                direction="vertical",
+            ),
+            title="reflex-ant-design",
+        ),
+        theme={"token": {"colorPrimary": "#722ed1", "borderRadius": 8}},
+    )
+
+
+app = rx.App()
+app.add_page(index)
+```
+
+## Two ways to import
+
+```python
+# 1) Namespace (mirrors rx.*)
+from reflex_ant_design import antd
+antd.button("Save", type="primary")
+
+# 2) Flat factories
+from reflex_ant_design import button, table, date_picker
+button("Save", type="primary")
+```
+
+## Examples
+
+### Data table from state
+
+```python
+COLUMNS = [
+    {"title": "Name", "dataIndex": "name", "key": "name"},
+    {"title": "Role", "dataIndex": "role", "key": "role"},
+]
+DATA = [
+    {"key": "1", "name": "Ada", "role": "Engineer"},
+    {"key": "2", "name": "Alan", "role": "Researcher"},
+]
+
+antd.table(columns=COLUMNS, data_source=DATA, pagination={"pageSize": 5})
+```
+
+### Select bound to state
+
+```python
+antd.select(
+    value=State.country,
+    on_change=State.set_country,
+    options=[{"label": "Spain", "value": "es"}, {"label": "Japan", "value": "jp"}],
+    show_search=True,
+    allow_clear=True,
+)
+```
+
+### Modal driven by a boolean
+
+```python
+antd.button("Open", on_click=State.open_modal)
+antd.modal(
+    antd.text("Are you sure?"),
+    open=State.modal_open,
+    title="Confirm",
+    on_ok=State.close_modal,
+    on_cancel=State.close_modal,
+)
+```
+
+### Theming
+
+Wrap your app (or any subtree) in `config_provider` and pass design tokens:
+
+```python
+antd.config_provider(
+    your_app(),
+    theme={"token": {"colorPrimary": "#13c2c2", "borderRadius": 6}},
+    component_size="large",
+)
+```
+
+## Component catalog
+
+| Category | Components |
+| --- | --- |
+| **General** | Button, FloatButton (+ Group, BackTop), Typography (Title/Text/Paragraph/Link), `icon()` |
+| **Layout** | Divider, Flex, Row/Col, Layout (Header/Sider/Content/Footer), Space (+ Compact), Splitter |
+| **Navigation** | Anchor, Breadcrumb, Dropdown (+ Button), Menu, Pagination, Steps, Tabs |
+| **Data Entry** | Input (+ TextArea/Search/Password/OTP), InputNumber, Checkbox, Radio, Select, Switch, Slider, Rate, DatePicker, RangePicker, TimePicker, AutoComplete, Cascader, TreeSelect, Mentions, ColorPicker, Transfer, Upload, Form |
+| **Data Display** | Avatar, Badge, Card, Carousel, Collapse, Descriptions, Empty, Image, List, Popover, Tooltip, QRCode, Segmented, Statistic, Table, Tag, Timeline, Tour, Tree |
+| **Feedback** | Alert, Drawer, Modal, Popconfirm, Progress, Result, Skeleton, Spin, Watermark |
+| **Config** | ConfigProvider, App |
+
+See [`docs/guides/usage.md`](docs/guides/usage.md) for per-category notes and
+the gotchas (date values, imperative `message`/`notification`, form binding).
+
+## Try the demo
+
+```bash
+git clone https://github.com/ecrespo/reflex-ant-design
+cd reflex-ant-design
+make install
+cd reflex_ant_design_demo && uv run reflex run
+```
+
+## Documentation
+
+- [`docs/sdd`](docs/sdd) — the Spec-Driven Design docs (PRD, requirements,
+  architecture, component catalog, roadmap, implementation plan).
+- [`docs/guides/usage.md`](docs/guides/usage.md) — usage patterns and tips.
+- [`docs/guides/compatibility.md`](docs/guides/compatibility.md) — antd / React
+  / Reflex version matrix.
+
+## Compatibility
+
+- Reflex `>= 0.7`
+- `antd@^6` (works with React 19 shipped by Reflex 0.7+). Pin `antd@^5` for apps
+  on React 18 — see the compatibility guide.
+
+## Contributing
+
+See [CONTRIBUTING.md](CONTRIBUTING.md).
+
+## License
+
+MIT © Ernesto Crespo

reflex_ant_design-0.1.0/custom_components/reflex_ant_design/__init__.py

@@ -0,0 +1,268 @@
+"""reflex-ant-design -- Ant Design (antd) components wrapped for Reflex.
+
+Two ways to use the library:
+
+1. Flat factory functions::
+
+    from reflex_ant_design import button, card, table
+
+    button("Save", type="primary")
+
+2. Namespaced access (mirrors Reflex's own ``rx.*`` style)::
+
+    from reflex_ant_design import antd
+
+    antd.button("Save", type="primary")
+    antd.config_provider(
+        antd.card(antd.table(columns=cols, data_source=rows)),
+        theme={"token": {"colorPrimary": "#1677ff"}},
+    )
+
+Wrap your app (or a subtree) in :func:`config_provider` to set the design
+tokens (theme), the default component size, and the locale.
+"""
+
+from __future__ import annotations
+
+from .base import (
+    ANTD_ICONS_VERSION,
+    ANTD_VERSION,
+    AntdComponent,
+    App,
+    ConfigProvider,
+    app,
+    config_provider,
+)
+from .data_display import (
+    avatar,
+    avatar_group,
+    badge,
+    badge_ribbon,
+    calendar,
+    card,
+    card_grid,
+    card_meta,
+    carousel,
+    checkable_tag,
+    collapse,
+    descriptions,
+    empty,
+    image,
+    list_item,
+    list_item_meta,
+    list_view,
+    popover,
+    qr_code,
+    segmented,
+    statistic,
+    statistic_countdown,
+    table,
+    tag,
+    timeline,
+    tooltip,
+    tour,
+    tree,
+)
+from .data_entry import (
+    auto_complete,
+    cascader,
+    checkbox,
+    checkbox_group,
+    color_picker,
+    date_picker,
+    form,
+    form_item,
+    form_list,
+    input,
+    input_number,
+    input_otp,
+    mentions,
+    password_input,
+    radio,
+    radio_button,
+    radio_group,
+    range_picker,
+    rate,
+    search_input,
+    select,
+    slider,
+    switch,
+    text_area,
+    time_picker,
+    transfer,
+    tree_select,
+    upload,
+    upload_dragger,
+)
+from .feedback import (
+    alert,
+    drawer,
+    modal,
+    popconfirm,
+    progress,
+    result,
+    skeleton,
+    skeleton_button,
+    skeleton_image,
+    spin,
+    watermark,
+)
+from .general import (
+    back_top,
+    button,
+    float_button,
+    float_button_group,
+    icon,
+    link,
+    paragraph,
+    text,
+    title,
+    typography,
+)
+from .layout import (
+    col,
+    content,
+    divider,
+    flex,
+    footer,
+    header,
+    layout,
+    row,
+    sider,
+    space,
+    space_compact,
+    splitter,
+    splitter_panel,
+)
+from .namespace import antd
+from .navigation import (
+    affix,
+    anchor,
+    breadcrumb,
+    dropdown,
+    dropdown_button,
+    menu,
+    pagination,
+    steps,
+    tabs,
+)
+
+__version__ = "0.1.0"
+
+__all__ = [
+    "antd",
+    "AntdComponent",
+    "ConfigProvider",
+    "App",
+    "ANTD_VERSION",
+    "ANTD_ICONS_VERSION",
+    # providers
+    "config_provider",
+    "app",
+    # general
+    "button",
+    "float_button",
+    "float_button_group",
+    "back_top",
+    "icon",
+    "typography",
+    "title",
+    "text",
+    "paragraph",
+    "link",
+    # layout
+    "divider",
+    "flex",
+    "row",
+    "col",
+    "layout",
+    "header",
+    "content",
+    "footer",
+    "sider",
+    "space",
+    "space_compact",
+    "splitter",
+    "splitter_panel",
+    # navigation
+    "affix",
+    "anchor",
+    "breadcrumb",
+    "dropdown",
+    "dropdown_button",
+    "menu",
+    "pagination",
+    "steps",
+    "tabs",
+    # data entry
+    "input",
+    "text_area",
+    "search_input",
+    "password_input",
+    "input_otp",
+    "input_number",
+    "checkbox",
+    "checkbox_group",
+    "radio",
+    "radio_group",
+    "radio_button",
+    "select",
+    "switch",
+    "slider",
+    "rate",
+    "date_picker",
+    "range_picker",
+    "time_picker",
+    "auto_complete",
+    "cascader",
+    "tree_select",
+    "mentions",
+    "color_picker",
+    "transfer",
+    "upload",
+    "upload_dragger",
+    "form",
+    "form_item",
+    "form_list",
+    # data display
+    "avatar",
+    "avatar_group",
+    "badge",
+    "badge_ribbon",
+    "calendar",
+    "card",
+    "card_meta",
+    "card_grid",
+    "carousel",
+    "collapse",
+    "descriptions",
+    "empty",
+    "image",
+    "list_view",
+    "list_item",
+    "list_item_meta",
+    "tooltip",
+    "popover",
+    "qr_code",
+    "segmented",
+    "statistic",
+    "statistic_countdown",
+    "table",
+    "tag",
+    "checkable_tag",
+    "timeline",
+    "tour",
+    "tree",
+    # feedback
+    "alert",
+    "drawer",
+    "modal",
+    "popconfirm",
+    "progress",
+    "result",
+    "skeleton",
+    "skeleton_button",
+    "skeleton_image",
+    "spin",
+    "watermark",
+]