@lowdefy/blocks-antd 5.6.0 → 6.0.0

package/dist/blocks/ConfigProvider/gallery.yaml

@@ -0,0 +1,1003 @@
+# Copyright 2020-2026 Lowdefy, Inc
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+#     http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+- title: Custom Primary Color
+  fullWidth: true
+  blocks:
+    - id: cp_primary_color
+      type: ConfigProvider
+      properties:
+        token:
+          colorPrimary: '#722ed1'
+      blocks:
+        - id: cp_primary_row
+          type: Box
+          layout:
+            gap: 8
+          blocks:
+            - id: cp_primary_btn_solid
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Solid
+                color: primary
+                variant: solid
+            - id: cp_primary_btn_outlined
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Outlined
+                color: primary
+                variant: outlined
+            - id: cp_primary_btn_dashed
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Dashed
+                color: primary
+                variant: dashed
+            - id: cp_primary_btn_text
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Text
+                color: primary
+                variant: text
+            - id: cp_primary_btn_link
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Link
+                color: primary
+                variant: link
+        - id: cp_primary_switch
+          type: Switch
+          properties:
+            label:
+              title: Purple themed switch
+              colon: false
+        - id: cp_primary_progress
+          type: Progress
+          properties:
+            percent: 65
+
+- title: Dark Algorithm
+  fullWidth: true
+  blocks:
+    - id: cp_dark
+      type: ConfigProvider
+      properties:
+        algorithm: dark
+      blocks:
+        - id: cp_dark_box
+          type: Box
+          style:
+            padding: 24px
+            background: '#141414'
+            borderRadius: 8px
+          layout:
+            gap: 12
+          blocks:
+            - id: cp_dark_title
+              type: Title
+              properties:
+                content: Dark Mode
+                level: 4
+            - id: cp_dark_text
+              type: Paragraph
+              properties:
+                content: The dark algorithm inverts the color scheme for all child components. Backgrounds become dark and text becomes light automatically.
+            - id: cp_dark_btn_row
+              type: Box
+              layout:
+                gap: 8
+              blocks:
+                - id: cp_dark_btn1
+                  type: Button
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    title: Primary
+                    color: primary
+                    variant: solid
+                - id: cp_dark_btn2
+                  type: Button
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    title: Default
+                    color: default
+                    variant: outlined
+                - id: cp_dark_btn3
+                  type: Button
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    title: Danger
+                    color: danger
+                    variant: solid
+            - id: cp_dark_switch
+              type: Switch
+              properties:
+                label:
+                  title: Dark switch
+                  colon: false
+
+- title: Compact Algorithm
+  fullWidth: true
+  blocks:
+    - id: cp_compact
+      type: ConfigProvider
+      properties:
+        algorithm: compact
+      blocks:
+        - id: cp_compact_row
+          type: Box
+          layout:
+            gap: 8
+          blocks:
+            - id: cp_compact_btn1
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Compact Solid
+                color: primary
+                variant: solid
+            - id: cp_compact_btn2
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Compact Outlined
+                color: primary
+                variant: outlined
+        - id: cp_compact_input
+          type: TextInput
+          properties:
+            label:
+              title: Compact input
+              colon: false
+            placeholder: Compact sized input
+        - id: cp_compact_text
+          type: Paragraph
+          properties:
+            content: The compact algorithm reduces padding and margins for denser layouts. Useful for data-heavy dashboards and admin panels.
+
+- title: Combined Dark + Compact
+  fullWidth: true
+  blocks:
+    - id: cp_combined
+      type: ConfigProvider
+      properties:
+        algorithm:
+          - dark
+          - compact
+      blocks:
+        - id: cp_combined_box
+          type: Box
+          style:
+            padding: 24px
+            background: '#141414'
+            borderRadius: 8px
+          layout:
+            gap: 12
+          blocks:
+            - id: cp_combined_title
+              type: Title
+              properties:
+                content: Dark + Compact
+                level: 4
+            - id: cp_combined_text
+              type: Paragraph
+              properties:
+                content: Multiple algorithms can be combined by passing an array. Here dark and compact are used together for a dense dark-themed layout.
+            - id: cp_combined_btn_row
+              type: Box
+              layout:
+                gap: 8
+              blocks:
+                - id: cp_combined_btn1
+                  type: Button
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    title: Action
+                    color: primary
+                    variant: solid
+                - id: cp_combined_btn2
+                  type: Button
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    title: Cancel
+                    color: default
+                    variant: outlined
+
+- title: Component Size
+  fullWidth: true
+  blocks:
+    - id: cp_size_small_label
+      type: Markdown
+      properties:
+        content: '**Small:**'
+    - id: cp_size_small
+      type: ConfigProvider
+      properties:
+        componentSize: small
+      blocks:
+        - id: cp_small_row
+          type: Box
+          layout:
+            gap: 8
+          blocks:
+            - id: cp_small_btn
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Small Button
+                color: primary
+                variant: solid
+            - id: cp_small_input
+              type: TextInput
+              layout:
+                flex: 0 1 200px
+              properties:
+                placeholder: Small input
+                label:
+                  disabled: true
+    - id: cp_size_middle_label
+      type: Markdown
+      properties:
+        content: '**Middle (default):**'
+    - id: cp_size_middle
+      type: ConfigProvider
+      properties:
+        componentSize: middle
+      blocks:
+        - id: cp_middle_row
+          type: Box
+          layout:
+            gap: 8
+          blocks:
+            - id: cp_middle_btn
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Middle Button
+                color: primary
+                variant: solid
+            - id: cp_middle_input
+              type: TextInput
+              layout:
+                flex: 0 1 200px
+              properties:
+                placeholder: Middle input
+                label:
+                  disabled: true
+    - id: cp_size_large_label
+      type: Markdown
+      properties:
+        content: '**Large:**'
+    - id: cp_size_large
+      type: ConfigProvider
+      properties:
+        componentSize: large
+      blocks:
+        - id: cp_large_row
+          type: Box
+          layout:
+            gap: 8
+          blocks:
+            - id: cp_large_btn
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Large Button
+                color: primary
+                variant: solid
+            - id: cp_large_input
+              type: TextInput
+              layout:
+                flex: 0 1 200px
+              properties:
+                placeholder: Large input
+                label:
+                  disabled: true
+
+- title: Disabled All Components
+  fullWidth: true
+  blocks:
+    - id: cp_disabled
+      type: ConfigProvider
+      properties:
+        componentDisabled: true
+      blocks:
+        - id: cp_disabled_row
+          type: Box
+          layout:
+            gap: 8
+          blocks:
+            - id: cp_disabled_btn
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Disabled Button
+                color: primary
+                variant: solid
+            - id: cp_disabled_btn2
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Also Disabled
+                color: default
+                variant: outlined
+        - id: cp_disabled_switch
+          type: Switch
+          properties:
+            label:
+              title: Disabled switch
+              colon: false
+        - id: cp_disabled_input
+          type: TextInput
+          properties:
+            placeholder: Disabled input
+            label:
+              title: Disabled input
+              colon: false
+        - id: cp_disabled_text
+          type: Paragraph
+          properties:
+            content: Setting componentDisabled to true disables all interactive child components at once, without needing to set disabled on each individual component.
+
+- title: RTL Direction
+  fullWidth: true
+  blocks:
+    - id: cp_rtl
+      type: ConfigProvider
+      properties:
+        direction: rtl
+      blocks:
+        - id: cp_rtl_row
+          type: Box
+          layout:
+            gap: 8
+          blocks:
+            - id: cp_rtl_btn
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Right-to-Left
+                color: primary
+                variant: solid
+                icon: AiOutlineArrowLeft
+        - id: cp_rtl_input
+          type: TextInput
+          properties:
+            placeholder: RTL text input
+            label:
+              title: RTL Input
+              colon: false
+        - id: cp_rtl_text
+          type: Paragraph
+          properties:
+            content: Setting direction to rtl enables right-to-left layout for all child components. This is essential for languages like Arabic and Hebrew.
+
+- title: Input Variant
+  fullWidth: true
+  blocks:
+    - id: cp_variant_outlined_label
+      type: Markdown
+      properties:
+        content: '**Outlined (default):**'
+    - id: cp_variant_outlined
+      type: ConfigProvider
+      properties:
+        variant: outlined
+      blocks:
+        - id: cp_vo_input
+          type: TextInput
+          properties:
+            placeholder: Outlined input
+            label:
+              title: Name
+              colon: false
+    - id: cp_variant_filled_label
+      type: Markdown
+      properties:
+        content: '**Filled:**'
+    - id: cp_variant_filled
+      type: ConfigProvider
+      properties:
+        variant: filled
+      blocks:
+        - id: cp_vf_input
+          type: TextInput
+          properties:
+            placeholder: Filled input
+            label:
+              title: Name
+              colon: false
+    - id: cp_variant_borderless_label
+      type: Markdown
+      properties:
+        content: '**Borderless:**'
+    - id: cp_variant_borderless
+      type: ConfigProvider
+      properties:
+        variant: borderless
+      blocks:
+        - id: cp_vb_input
+          type: TextInput
+          properties:
+            placeholder: Borderless input
+            label:
+              title: Name
+              colon: false
+    - id: cp_variant_underlined_label
+      type: Markdown
+      properties:
+        content: '**Underlined:**'
+    - id: cp_variant_underlined
+      type: ConfigProvider
+      properties:
+        variant: underlined
+      blocks:
+        - id: cp_vu_input
+          type: TextInput
+          properties:
+            placeholder: Underlined input
+            label:
+              title: Name
+              colon: false
+
+- title: Component-Level Token Overrides
+  fullWidth: true
+  blocks:
+    - id: cp_components
+      type: ConfigProvider
+      properties:
+        components:
+          Button:
+            borderRadius: 20
+            controlHeight: 40
+          Input:
+            borderRadius: 20
+      blocks:
+        - id: cp_components_row
+          type: Box
+          layout:
+            gap: 8
+          blocks:
+            - id: cp_comp_btn
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Pill Button
+                color: primary
+                variant: solid
+            - id: cp_comp_btn2
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Also Pill
+                color: default
+                variant: outlined
+        - id: cp_comp_input
+          type: TextInput
+          properties:
+            placeholder: Rounded input
+            label:
+              title: Rounded input
+              colon: false
+        - id: cp_comp_text
+          type: Paragraph
+          properties:
+            content: The components property allows overriding design tokens at the component level. Here, Button and Input components have custom borderRadius applied without affecting other components.
+
+- title: Custom Design Tokens
+  fullWidth: true
+  blocks:
+    - id: cp_tokens
+      type: ConfigProvider
+      properties:
+        token:
+          colorPrimary: '#fa541c'
+          fontSize: 16
+          borderRadius: 8
+      blocks:
+        - id: cp_tokens_card
+          type: Card
+          properties:
+            title: Custom Themed Card
+          blocks:
+            - id: cp_tokens_text
+              type: Paragraph
+              properties:
+                content: Global design tokens customize the look of all child components. This section uses a custom primary color (orange), larger font size, rounded borders, and a warm background color.
+            - id: cp_tokens_btn_row
+              type: Box
+              layout:
+                gap: 8
+              blocks:
+                - id: cp_tokens_btn1
+                  type: Button
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    title: Primary
+                    color: primary
+                    variant: solid
+                - id: cp_tokens_btn2
+                  type: Button
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    title: Outlined
+                    color: primary
+                    variant: outlined
+            - id: cp_tokens_input
+              type: TextInput
+              properties:
+                placeholder: Themed input
+                label:
+                  title: Themed Input
+                  colon: false
+
+- title: Theme Property (antd Design Tokens)
+  fullWidth: true
+  blocks:
+    - id: cp_theme
+      type: ConfigProvider
+      properties:
+        theme:
+          colorPrimary: '#13c2c2'
+          colorInfo: '#13c2c2'
+          borderRadius: 12
+      blocks:
+        - id: cp_theme_card
+          type: Card
+          properties:
+            title: Theme Overrides via theme Property
+          blocks:
+            - id: cp_theme_text
+              type: Paragraph
+              properties:
+                content: The theme property provides antd design token overrides for this block and all its descendants. It works similarly to token but is applied at the block level through the antd theme system.
+            - id: cp_theme_btn_row
+              type: Box
+              layout:
+                gap: 8
+              blocks:
+                - id: cp_theme_btn1
+                  type: Button
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    title: Teal Primary
+                    color: primary
+                    variant: solid
+                - id: cp_theme_btn2
+                  type: Button
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    title: Teal Outlined
+                    color: primary
+                    variant: outlined
+            - id: cp_theme_switch
+              type: Switch
+              properties:
+                label:
+                  title: Teal themed switch
+                  colon: false
+
+- title: Styled ConfigProvider (Tailwind CSS)
+  fullWidth: true
+  blocks:
+    - id: cp_styled_gradient
+      type: ConfigProvider
+      class: bg-gradient-to-r from-primary/10 to-primary/5 p-6 rounded-xl border border-border
+      properties:
+        token:
+          colorPrimary: '#6366f1'
+      blocks:
+        - id: cp_styled_gradient_title
+          type: Title
+          properties:
+            content: Styled Wrapper
+            level: 4
+        - id: cp_styled_gradient_text
+          type: Paragraph
+          properties:
+            content: Tailwind CSS classes can be applied to the ConfigProvider wrapper div using the class property. Here a gradient background with rounded corners wraps all themed children.
+        - id: cp_styled_gradient_row
+          type: Box
+          layout:
+            gap: 8
+          blocks:
+            - id: cp_styled_gradient_btn1
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Indigo Action
+                color: primary
+                variant: solid
+            - id: cp_styled_gradient_btn2
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Cancel
+                color: default
+                variant: outlined
+
+    - id: cp_styled_shadow
+      type: ConfigProvider
+      class: shadow-lg p-8 rounded-2xl bg-bg-container
+      properties:
+        token:
+          colorPrimary: '#059669'
+      blocks:
+        - id: cp_styled_shadow_title
+          type: Title
+          properties:
+            content: Elevated Section
+            level: 4
+        - id: cp_styled_shadow_text
+          type: Paragraph
+          properties:
+            content: A ConfigProvider with shadow and padding classes creates a visually distinct themed section on the page.
+        - id: cp_styled_shadow_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Confirm
+            color: primary
+            variant: solid
+
+- title: ConfigProvider for Brand Theme
+  fullWidth: true
+  blocks:
+    - id: cp_brand_wrapper
+      type: ConfigProvider
+      properties:
+        token:
+          colorPrimary: '#e11d48'
+          colorInfo: '#0ea5e9'
+          borderRadius: 6
+          fontSize: 14
+        components:
+          Button:
+            borderRadius: 20
+      blocks:
+        - id: cp_brand_header
+          type: Box
+          class: bg-bg-layout p-6 rounded-lg border border-border
+          layout:
+            gap: 16
+          blocks:
+            - id: cp_brand_title_row
+              type: Box
+              layout:
+                gap: 12
+                align: center
+              blocks:
+                - id: cp_brand_avatar
+                  type: Avatar
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    icon: AiOutlineShop
+                    size: 48
+                    color: '#fff'
+                    backgroundColor: '#e11d48'
+                - id: cp_brand_title
+                  type: Title
+                  layout:
+                    flex: 1 1 0
+                  properties:
+                    content: Acme Commerce
+                    level: 3
+            - id: cp_brand_description
+              type: Paragraph
+              properties:
+                content: This demonstrates using ConfigProvider to apply a brand theme across an entire section. The rose primary color, pill-shaped buttons, and custom font size create a cohesive brand identity for all child components.
+            - id: cp_brand_form_row
+              type: Box
+              layout:
+                gap: 12
+              blocks:
+                - id: cp_brand_search_input
+                  type: TextInput
+                  layout:
+                    flex: 1 1 0
+                  properties:
+                    placeholder: Search products...
+                    label:
+                      disabled: true
+                    suffixIcon: AiOutlineSearch
+                - id: cp_brand_search_btn
+                  type: Button
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    title: Search
+                    color: primary
+                    variant: solid
+                - id: cp_brand_cart_btn
+                  type: Button
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    title: Cart
+                    icon: AiOutlineShoppingCart
+                    color: default
+                    variant: outlined
+            - id: cp_brand_stats_row
+              type: Box
+              layout:
+                gap: 16
+              blocks:
+                - id: cp_brand_stat1
+                  type: Statistic
+                  layout:
+                    flex: 1 1 0
+                  properties:
+                    title: Products
+                    value: 1240
+                - id: cp_brand_stat2
+                  type: Statistic
+                  layout:
+                    flex: 1 1 0
+                  properties:
+                    title: Orders Today
+                    value: 87
+                - id: cp_brand_stat3
+                  type: Statistic
+                  layout:
+                    flex: 1 1 0
+                  properties:
+                    title: Revenue
+                    value: 12480
+                    prefix: $
+
+- title: ConfigProvider for Compact Dashboard
+  fullWidth: true
+  blocks:
+    - id: cp_dashboard_wrapper
+      type: ConfigProvider
+      properties:
+        algorithm:
+          - compact
+        componentSize: small
+        token:
+          colorPrimary: '#1677ff'
+          fontSize: 12
+        variant: filled
+      blocks:
+        - id: cp_dashboard_title
+          type: Title
+          properties:
+            content: System Metrics
+            level: 4
+        - id: cp_dashboard_cards_row
+          type: Box
+          layout:
+            gap: 12
+          blocks:
+            - id: cp_dashboard_card1
+              type: Card
+              layout:
+                flex: 1 1 0
+              properties:
+                title: CPU Usage
+                size: small
+              blocks:
+                - id: cp_dashboard_progress1
+                  type: Progress
+                  properties:
+                    percent: 72
+                - id: cp_dashboard_tag1
+                  type: Tag
+                  properties:
+                    title: Normal
+                    color: success
+            - id: cp_dashboard_card2
+              type: Card
+              layout:
+                flex: 1 1 0
+              properties:
+                title: Memory
+                size: small
+              blocks:
+                - id: cp_dashboard_progress2
+                  type: Progress
+                  properties:
+                    percent: 89
+                - id: cp_dashboard_tag2
+                  type: Tag
+                  properties:
+                    title: High
+                    color: warning
+            - id: cp_dashboard_card3
+              type: Card
+              layout:
+                flex: 1 1 0
+              properties:
+                title: Disk I/O
+                size: small
+              blocks:
+                - id: cp_dashboard_progress3
+                  type: Progress
+                  properties:
+                    percent: 34
+                - id: cp_dashboard_tag3
+                  type: Tag
+                  properties:
+                    title: Low
+                    color: blue
+        - id: cp_dashboard_filter_row
+          type: Box
+          layout:
+            gap: 8
+            align: center
+          blocks:
+            - id: cp_dashboard_filter_input
+              type: TextInput
+              layout:
+                flex: 0 1 200px
+              properties:
+                placeholder: Filter services...
+                label:
+                  disabled: true
+            - id: cp_dashboard_selector
+              type: Selector
+              layout:
+                flex: 0 1 150px
+              properties:
+                placeholder: Region
+                label:
+                  disabled: true
+                options:
+                  - label: US East
+                    value: us-east
+                  - label: US West
+                    value: us-west
+                  - label: EU West
+                    value: eu-west
+            - id: cp_dashboard_refresh_btn
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Refresh
+                icon: AiOutlineReload
+                color: primary
+                variant: solid
+
+- title: ConfigProvider for Dark Admin Panel
+  fullWidth: true
+  blocks:
+    - id: cp_admin_wrapper
+      type: ConfigProvider
+      properties:
+        algorithm: dark
+        token:
+          colorPrimary: '#7c3aed'
+          borderRadius: 8
+      blocks:
+        - id: cp_admin_box
+          type: Box
+          style:
+            padding: 24px
+            background: '#141414'
+            borderRadius: 12px
+          layout:
+            gap: 16
+          blocks:
+            - id: cp_admin_header_row
+              type: Box
+              layout:
+                gap: 12
+                align: center
+              blocks:
+                - id: cp_admin_title
+                  type: Title
+                  layout:
+                    flex: 1 1 0
+                  properties:
+                    content: Admin Panel
+                    level: 3
+                - id: cp_admin_status_tag
+                  type: Tag
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    title: Online
+                    color: success
+            - id: cp_admin_desc
+              type: Paragraph
+              properties:
+                content: A dark-themed admin panel using ConfigProvider to apply the dark algorithm with a custom purple accent color. All child components inherit the dark color scheme automatically.
+            - id: cp_admin_form
+              type: Box
+              layout:
+                gap: 12
+              blocks:
+                - id: cp_admin_name_input
+                  type: TextInput
+                  properties:
+                    placeholder: Enter username
+                    label:
+                      title: Username
+                      colon: false
+                - id: cp_admin_email_input
+                  type: TextInput
+                  properties:
+                    placeholder: Enter email address
+                    label:
+                      title: Email
+                      colon: false
+                - id: cp_admin_role_selector
+                  type: Selector
+                  properties:
+                    placeholder: Select role
+                    label:
+                      title: Role
+                      colon: false
+                    options:
+                      - label: Administrator
+                        value: admin
+                      - label: Editor
+                        value: editor
+                      - label: Viewer
+                        value: viewer
+            - id: cp_admin_btn_row
+              type: Box
+              layout:
+                gap: 8
+              blocks:
+                - id: cp_admin_save_btn
+                  type: Button
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    title: Save User
+                    icon: AiOutlineSave
+                    color: primary
+                    variant: solid
+                - id: cp_admin_cancel_btn
+                  type: Button
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    title: Cancel
+                    color: default
+                    variant: outlined