Add redirect action

docs/src/documentation/app/group__docs/actions/dynamic__action_type/page.py

@@ -0,0 +1,110 @@
+from typing import Annotated
+
+import flect.actions as a
+import flect.components as c
+from fastapi import Path, Request
+from flect import Meta, PageResponse
+from flect.routing import CLIENT_ROOT_ROUTER_PREFIX
+from flect.sitemap import Sitemap
+
+from documentation.app.group__docs.component import get_api_reference_section
+from documentation.app.group__docs.layout import get_docs_pager
+
+ACTION_DOCS_MAP = {
+    "notify": [
+        c.Container(
+            children=[
+                c.Heading(
+                    level=1,
+                    text="Notify",
+                    class_name="text-3xl mb-3",
+                ),
+                c.Paragraph(text="The Notify action is used to show a notification with a title and a description."),
+            ]
+        ),
+        c.Container(
+            children=[
+                c.Heading(
+                    level=2,
+                    text="Try it out",
+                    class_name="text-2xl mb-6 border-b pb-2",
+                ),
+                c.Button(
+                    on_click_action=a.Notify(
+                        title="Button clicked",
+                        description="The button was clicked",
+                    ),
+                    children=[
+                        c.Text(
+                            text="Click me",
+                        )
+                    ],
+                ),
+            ]
+        ),
+        get_api_reference_section(a.Notify),
+    ],
+    "redirect": [
+        c.Container(
+            children=[
+                c.Heading(
+                    level=1,
+                    text="Notify",
+                    class_name="text-3xl mb-3",
+                ),
+                c.Paragraph(text="The Redirect action is used to navigate to a different URL."),
+            ]
+        ),
+        c.Container(
+            children=[
+                c.Heading(
+                    level=2,
+                    text="Try it out",
+                    class_name="text-2xl mb-6 border-b pb-2",
+                ),
+                c.Button(
+                    on_click_action=a.Redirect(url="/actions/notify/"),
+                    children=[
+                        c.Text(
+                            text="Click button will redirect to /actions/notify/",
+                        )
+                    ],
+                ),
+            ]
+        ),
+        get_api_reference_section(a.Redirect),
+    ],
+}
+
+
+async def sitemap(dynamic_url: str) -> list[Sitemap]:
+    return [
+        Sitemap(
+            url=dynamic_url.format(action_type=action_type),
+            last_modified=None,
+            change_frequency=None,
+            priority=None,
+        )
+        for action_type in ACTION_DOCS_MAP
+    ]
+
+
+async def page(
+    request: Request,
+    action_type: Annotated[str, Path(..., description="The action type to render")],
+) -> PageResponse:
+    component_elements = ACTION_DOCS_MAP.get(action_type, c.Text(text="Unknown action"))
+    return PageResponse(
+        meta=Meta(
+            title=f"{action_type} action",
+            description=f"{action_type} action",
+        ),
+        element=c.Container(
+            tag="div",
+            class_name="flex gap-12 flex-col",
+            children=[
+                *component_elements,
+                get_docs_pager(current_link=request.url.path.replace(CLIENT_ROOT_ROUTER_PREFIX, "")),
+            ],
+        ),
+    )

docs/src/documentation/app/group__docs/component.py

@@ -0,0 +1,44 @@
+from typing import Optional
+
+import flect.components as c
+from pydantic import BaseModel
+from pydantic_core import PydanticUndefined
+
+
+class APIReference(BaseModel):
+    prop: str
+    type: str
+    default: Optional[str]
+    description: Optional[str]
+
+
+def get_api_reference_section(component: c.AnyComponent) -> c.Container:
+    props = []
+    for field, filed_info in component.model_fields.items():
+        if field in ["component_type", "action_type"]:
+            continue
+        if field == "children":
+            filed_info.annotation = "flect.components.AnyComponents"
+            filed_info.default = "[]"
+            filed_info.description = "The children of the component."
+        if filed_info.default == PydanticUndefined:
+            filed_info.default = "-"
+        props.append(
+            APIReference(
+                prop=field,
+                type=str(filed_info.annotation),
+                default=filed_info.default or "-",
+                description=filed_info.description,
+            )
+        )
+    return c.Container(
+        tag="section",
+        children=[
+            c.Heading(
+                level=2,
+                text="API Reference",
+                class_name="text-2xl mb-6 border-b pb-2",
+            ),
+            c.Table(datasets=props),
+        ],
+    )

docs/src/documentation/app/group__docs/components/dynamic__component_type/page.py

@@ -7,8 +7,8 @@
 from flect.routing import CLIENT_ROOT_ROUTER_PREFIX
 from flect.sitemap import Sitemap
 from pydantic import BaseModel
-from pydantic_core._pydantic_core import PydanticUndefined
 
+from documentation.app.group__docs.component import get_api_reference_section
 from documentation.app.group__docs.layout import get_docs_pager
 
 
@@ -29,13 +29,6 @@ def get_component_description_section(
     )
 
 
-class ComponentProps(BaseModel):
-    prop: str
-    type: str
-    default: Optional[str]
-    description: Optional[str]
-
-
 def get_component_preview_literal_component(
     component_type: c.AnyComponent,
     literal_props: list[str],
@@ -90,38 +83,6 @@ def get_component_preview_section(
     )
 
 
-def get_component_api_reference_section(component: c.AnyComponent) -> c.Container:
-    props = []
-    for field, filed_info in component.model_fields.items():
-        if field == "component_type":
-            continue
-        if field == "children":
-            filed_info.annotation = "flect.components.AnyComponents"
-            filed_info.default = "[]"
-            filed_info.description = "The children of the component."
-        if filed_info.default == PydanticUndefined:
-            filed_info.default = "-"
-        props.append(
-            ComponentProps(
-                prop=field,
-                type=str(filed_info.annotation),
-                default=filed_info.default or "-",
-                description=filed_info.description,
-            )
-        )
-    return c.Container(
-        tag="section",
-        children=[
-            c.Heading(
-                level=2,
-                text="API Reference",
-                class_name="text-2xl mb-6 border-b pb-2",
-            ),
-            c.Table(datasets=props),
-        ],
-    )
-
-
 class TableExampleModel(BaseModel):
     column1: str
     column2: str
@@ -158,7 +119,7 @@ class FormExampleModel(BaseModel):
                 ],
             )
         ),
-        get_component_api_reference_section(component=c.Avatar),
+        get_api_reference_section(component=c.Avatar),
     ],
     "button": [
         get_component_description_section(
@@ -173,7 +134,7 @@ class FormExampleModel(BaseModel):
                 default_props_values={},
             )
         ),
-        get_component_api_reference_section(component=c.Button),
+        get_api_reference_section(component=c.Button),
     ],
     "code-block": [
         get_component_description_section(
@@ -183,17 +144,22 @@ class FormExampleModel(BaseModel):
         get_component_preview_section(
             preview=c.CodeBlock(text="print('Hello, World!')"),
         ),
-        get_component_api_reference_section(component=c.CodeBlock),
+        get_api_reference_section(component=c.CodeBlock),
     ],
     "container": [
         get_component_description_section(
             title="Container",
             description="The Container component serves as a wrapper for other components.",
         ),
-        c.Container(
-            tag="div",
+        get_component_preview_section(
+            preview=c.Container(
+                tag="div",
+                children=[
+                    c.Text(text="This is a sample text in container."),
+                ],
+            ),
         ),
-        get_component_api_reference_section(component=c.Container),
+        get_api_reference_section(component=c.Container),
     ],
     "form": [
         get_component_description_section(
@@ -203,7 +169,7 @@ class FormExampleModel(BaseModel):
         get_component_preview_section(
             preview=c.Form(model=FormExampleModel, submit_url="/components/form/"),
         ),
-        get_component_api_reference_section(component=c.Form),
+        get_api_reference_section(component=c.Form),
     ],
     "heading": [
         get_component_description_section(
@@ -216,7 +182,7 @@ class FormExampleModel(BaseModel):
                 text="Heading",
             )
         ),
-        get_component_api_reference_section(component=c.Heading),
+        get_api_reference_section(component=c.Heading),
     ],
     "link": [
         get_component_description_section(
@@ -233,7 +199,7 @@ class FormExampleModel(BaseModel):
                 },
             )
         ),
-        get_component_api_reference_section(component=c.Link),
+        get_api_reference_section(component=c.Link),
     ],
     "markdown": [
         get_component_description_section(
@@ -242,10 +208,10 @@ class FormExampleModel(BaseModel):
         ),
         get_component_preview_section(
             preview=c.Markdown(
-                text="## Markdown",
+                text="## Markdown\n\nThis is a sample markdown text.\n\n- Item 1\n- Item 2\n- Item 3",
             )
         ),
-        get_component_api_reference_section(component=c.Markdown),
+        get_api_reference_section(component=c.Markdown),
     ],
     "table": [
         get_component_description_section(
@@ -268,7 +234,7 @@ class FormExampleModel(BaseModel):
                 ]
             )
         ),
-        get_component_api_reference_section(component=c.Table),
+        get_api_reference_section(component=c.Table),
     ],
     "text": [
         get_component_description_section(
@@ -280,7 +246,7 @@ class FormExampleModel(BaseModel):
                 text="Text",
             )
         ),
-        get_component_api_reference_section(component=c.Text),
+        get_api_reference_section(component=c.Text),
     ],
 }
 

docs/src/documentation/app/group__docs/layout.py

@@ -60,6 +60,30 @@
             ),
         ],
     ),
+    c.Container(
+        tag="div",
+        children=[
+            c.Heading(
+                level=2,
+                text="Actions",
+                class_name="mb-2",
+            ),
+            c.Container(
+                tag="nav",
+                class_name="flex flex-col gap-2",
+                children=[
+                    c.NavLink(
+                        href="/actions/notify/",
+                        children=[c.Text(text="Notify", class_name="text-sm")],
+                    ),
+                    c.NavLink(
+                        href="/actions/redirect/",
+                        children=[c.Text(text="Redirect", class_name="text-sm")],
+                    ),
+                ],
+            ),
+        ],
+    ),
     c.Container(
         tag="div",
         children=[

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "flect"
-version = "0.1.6"
+version = "0.1.7"
 description = "Turning ideas into web app fast."
 authors = [
     {name = "Chaoying", email = "[email protected]"},

src/npm-flect/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chaoying/npm-flect",
   "private": false,
-  "version": "0.1.6",
+  "version": "0.1.7",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/npm-flect/src/components/flect/button.tsx

@@ -1,16 +1,19 @@
 import { Button as ButtonUI, ButtonProps as ButtonPropsUI } from '@/components/ui/button'
 import { AnyComponents, ComponentProps } from '@/components/flect/any-component'
+import { AnyAction, executeAction } from '@/lib/action'
 
 export interface ButtonProps extends Omit<ButtonPropsUI, 'children'> {
   componentType: 'button'
+  onClickAction?: AnyAction
   className?: string
   children?: ComponentProps[]
 }
 
-export function Button(props: ButtonProps) {
-  const { children } = props
+export function Button({ children, onClickAction, ...rest }: ButtonProps) {
+  const onClick = onClickAction ? () => executeAction(onClickAction) : undefined
+
   return (
-    <ButtonUI {...props}>
+    <ButtonUI {...rest} onClick={onClick}>
       <AnyComponents children={children} />
     </ButtonUI>
   )