@lowdefy/blocks-antd 5.5.1 → 6.0.0

package/dist/blocks/Content/gallery.yaml

@@ -0,0 +1,528 @@
+# 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: Basic Content
+  fullWidth: true
+  blocks:
+    - id: content_basic_layout
+      type: Layout
+      blocks:
+        - id: content_basic
+          type: Content
+          style:
+            padding: 24px
+            background: var(--ant-color-bg-container)
+            minHeight: 200px
+          blocks:
+            - id: content_basic_text
+              type: Paragraph
+              properties:
+                content: |
+                  The Content block is the main content area within a Layout. It maps to Ant Design's Layout.Content component and holds the primary page content.
+
+    - id: content_empty_layout
+      type: Layout
+      blocks:
+        - id: content_empty
+          type: Content
+          style:
+            padding: 24px
+            background: var(--ant-color-bg-layout)
+            minHeight: 120px
+            display: flex
+            alignItems: center
+            justifyContent: center
+          blocks:
+            - id: content_empty_text
+              type: Paragraph
+              properties:
+                content: |
+                  Content without any special configuration. It fills the available space within its parent Layout.
+
+- title: Content in Full Page Layout
+  fullWidth: true
+  blocks:
+    - id: content_full_page_layout
+      type: Layout
+      style:
+        minHeight: 350px
+      blocks:
+        - id: content_full_page_header
+          type: Header
+          style:
+            paddingInline: 24px
+            borderBottom: 1px solid var(--ant-color-border)
+          blocks:
+            - id: content_full_page_header_title
+              type: Title
+              properties:
+                content: My Application
+                level: 4
+                style:
+                  margin: 0
+        - id: content_full_page_main
+          type: Content
+          style:
+            padding: 24px 48px
+            background: var(--ant-color-bg-container)
+          blocks:
+            - id: content_full_page_title
+              type: Title
+              properties:
+                content: Welcome Back
+                level: 3
+            - id: content_full_page_desc
+              type: Paragraph
+              properties:
+                content: |
+                  Content works within a Layout alongside Header and Footer blocks to form a complete page structure. It automatically fills the available vertical space between other layout sections.
+        - id: content_full_page_footer
+          type: Footer
+          style:
+            textAlign: center
+          blocks:
+            - id: content_full_page_footer_text
+              type: Paragraph
+              properties:
+                content: '© 2026 My Application'
+
+- title: Content with Sider Layout
+  fullWidth: true
+  blocks:
+    - id: content_sider_outer
+      type: Layout
+      style:
+        minHeight: 350px
+      blocks:
+        - id: content_sider_header
+          type: Header
+          style:
+            paddingInline: 24px
+            borderBottom: 1px solid var(--ant-color-border)
+          blocks:
+            - id: content_sider_header_title
+              type: Title
+              properties:
+                content: App with Sidebar
+                level: 4
+                style:
+                  margin: 0
+        - id: content_sider_inner
+          type: Layout
+          properties:
+            hasSider: true
+          blocks:
+            - id: content_sider_nav
+              type: Sider
+              layout:
+                flex: 0 0 auto
+              properties:
+                width: 200
+              style:
+                background: var(--ant-color-bg-container)
+                paddingTop: 16px
+              blocks:
+                - id: content_sider_menu
+                  type: Menu
+                  properties:
+                    mode: inline
+                    options:
+                      - id: dashboard
+                        title: Dashboard
+                        icon: AiOutlineDashboard
+                      - id: users
+                        title: Users
+                        icon: AiOutlineUser
+                      - id: settings
+                        title: Settings
+                        icon: AiOutlineSetting
+            - id: content_sider_main
+              type: Content
+              layout:
+                flex: 1 1 auto
+              style:
+                padding: 24px
+                background: var(--ant-color-bg-container)
+                margin: 0 16px
+              blocks:
+                - id: content_sider_main_title
+                  type: Title
+                  properties:
+                    content: Dashboard
+                    level: 3
+                - id: content_sider_main_text
+                  type: Paragraph
+                  properties:
+                    content: |
+                      When used alongside a Sider block, Content fills the remaining horizontal space. This is the standard layout pattern for admin dashboards and applications with navigation sidebars.
+
+- title: Theme Token Overrides
+  fullWidth: true
+  blocks:
+    - id: content_theme_layout
+      type: Layout
+      blocks:
+        - id: content_theme_custom
+          type: Content
+          style:
+            padding: 24px
+            minHeight: 150px
+          properties:
+            theme:
+              colorText: '#003a8c'
+          blocks:
+            - id: content_theme_title
+              type: Title
+              properties:
+                content: Themed Content Area
+                level: 4
+            - id: content_theme_text
+              type: Paragraph
+              properties:
+                content: |
+                  Use the theme property to override antd design tokens. The colorBgLayout token changes the background of the Content block, and colorText adjusts the default text color within it.
+
+    - id: content_theme_warm_layout
+      type: Layout
+      blocks:
+        - id: content_theme_warm
+          type: Content
+          style:
+            padding: 24px
+            minHeight: 150px
+          properties:
+            theme:
+              colorText: '#874d00'
+          blocks:
+            - id: content_theme_warm_title
+              type: Title
+              properties:
+                content: Warm Color Scheme
+                level: 4
+            - id: content_theme_warm_text
+              type: Paragraph
+              properties:
+                content: |
+                  A warm-toned content area using orange theme tokens. Theme tokens cascade through the antd design system and affect all child blocks within this Content.
+
+    - id: content_theme_dark_layout
+      type: Layout
+      blocks:
+        - id: content_theme_dark
+          type: Content
+          style:
+            padding: 24px
+            minHeight: 150px
+          properties:
+            theme:
+              colorBgLayout: '#1f1f1f'
+              colorText: '#e0e0e0'
+          blocks:
+            - id: content_theme_dark_title
+              type: Title
+              class: text-text-secondary
+              properties:
+                content: Dark Content Area
+                level: 4
+            - id: content_theme_dark_text
+              type: Paragraph
+              class: text-text-secondary
+              properties:
+                content: |
+                  Dark-themed content using colorBgLayout and colorText tokens. For app-wide dark themes, prefer using a global ConfigProvider rather than per-block overrides.
+
+- title: Style and CSS Classes
+  fullWidth: true
+  blocks:
+    - id: content_css_rounded_layout
+      type: Layout
+      blocks:
+        - id: content_css_rounded
+          type: Content
+          class:
+            element: bg-bg-layout rounded-xl p-6 m-4
+          style:
+            minHeight: 150px
+          blocks:
+            - id: content_css_rounded_title
+              type: Title
+              properties:
+                content: Rounded Content with Tailwind
+                level: 4
+            - id: content_css_rounded_text
+              type: Paragraph
+              properties:
+                content: 'Use the element CSS key to apply Tailwind classes directly to the Content element. Content has one CSS key: element, which targets the Layout.Content wrapper.'
+
+    - id: content_css_gradient_layout
+      type: Layout
+      blocks:
+        - id: content_css_gradient
+          type: Content
+          class:
+            element: bg-gradient-to-br from-primary/10 to-primary/5 p-8 m-4 rounded-lg shadow-inner
+          style:
+            minHeight: 150px
+          blocks:
+            - id: content_css_gradient_title
+              type: Title
+              properties:
+                content: Gradient Background
+                level: 4
+            - id: content_css_gradient_text
+              type: Paragraph
+              properties:
+                content: |
+                  Tailwind gradient and shadow utilities applied via the element CSS key create a visually distinct content area without needing custom CSS.
+
+    - id: content_css_border_layout
+      type: Layout
+      blocks:
+        - id: content_css_border
+          type: Content
+          class:
+            element: border-l-4 border-l-green-500 bg-bg-layout p-6 m-4
+          style:
+            minHeight: 150px
+          blocks:
+            - id: content_css_border_title
+              type: Title
+              properties:
+                content: Accent Border Content
+                level: 4
+            - id: content_css_border_text
+              type: Paragraph
+              properties:
+                content: |
+                  A left accent border highlights the content area. Combine Tailwind border utilities with background colors for status-aware content regions.
+
+- title: Content in Dashboard Layout
+  fullWidth: true
+  blocks:
+    - id: content_dashboard_outer
+      type: Layout
+      style:
+        minHeight: 450px
+      blocks:
+        - id: content_dashboard_header
+          type: Header
+          style:
+            justifyContent: space-between
+            borderBottom: 1px solid var(--ant-color-border)
+            paddingInline: 24px
+          blocks:
+            - id: content_dashboard_header_title
+              type: Title
+              layout:
+                flex: 0 0 auto
+              properties:
+                content: Analytics Dashboard
+                level: 4
+                style:
+                  margin: 0
+            - id: content_dashboard_header_btn
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Export Report
+                icon: AiOutlineDownload
+                color: default
+                variant: outlined
+                size: small
+        - id: content_dashboard_inner
+          type: Layout
+          properties:
+            hasSider: true
+          blocks:
+            - id: content_dashboard_sider
+              type: Sider
+              layout:
+                flex: 0 0 auto
+              properties:
+                width: 200
+              style:
+                background: var(--ant-color-bg-container)
+                paddingTop: 16px
+              blocks:
+                - id: content_dashboard_menu
+                  type: Menu
+                  properties:
+                    mode: inline
+                    options:
+                      - id: overview
+                        title: Overview
+                        icon: AiOutlineHome
+                      - id: analytics
+                        title: Analytics
+                        icon: AiOutlineBarChart
+                      - id: reports
+                        title: Reports
+                        icon: AiOutlineFileText
+                      - id: team
+                        title: Team
+                        icon: AiOutlineTeam
+            - id: content_dashboard_main
+              type: Content
+              layout:
+                flex: 1 1 auto
+              style:
+                padding: 24px
+                background: var(--ant-color-bg-layout)
+              blocks:
+                - id: content_dashboard_stats_row
+                  type: Box
+                  layout:
+                    gap: 16
+                  blocks:
+                    - id: content_dashboard_stat1
+                      type: Card
+                      layout:
+                        flex: 1 1 0
+                      properties:
+                        size: small
+                      blocks:
+                        - id: content_dashboard_stat1_val
+                          type: Statistic
+                          properties:
+                            title: Total Users
+                            value: 12480
+                    - id: content_dashboard_stat2
+                      type: Card
+                      layout:
+                        flex: 1 1 0
+                      properties:
+                        size: small
+                      blocks:
+                        - id: content_dashboard_stat2_val
+                          type: Statistic
+                          properties:
+                            title: Revenue
+                            value: 48650
+                            prefix: $
+                    - id: content_dashboard_stat3
+                      type: Card
+                      layout:
+                        flex: 1 1 0
+                      properties:
+                        size: small
+                      blocks:
+                        - id: content_dashboard_stat3_val
+                          type: Statistic
+                          properties:
+                            title: Conversion
+                            value: 3.2
+                            suffix: '%'
+                - id: content_dashboard_main_card
+                  type: Card
+                  properties:
+                    title: Recent Activity
+                  blocks:
+                    - id: content_dashboard_activity_1
+                      type: Paragraph
+                      properties:
+                        content: 'User John updated the project settings — 2 minutes ago'
+                    - id: content_dashboard_activity_2
+                      type: Paragraph
+                      properties:
+                        content: 'Deployment to production completed — 15 minutes ago'
+                    - id: content_dashboard_activity_3
+                      type: Paragraph
+                      properties:
+                        content: 'New team member Sarah joined — 1 hour ago'
+
+- title: Content in Settings Page
+  fullWidth: true
+  blocks:
+    - id: content_settings_outer
+      type: Layout
+      style:
+        minHeight: 400px
+      blocks:
+        - id: content_settings_header
+          type: Header
+          style:
+            paddingInline: 24px
+            borderBottom: 1px solid var(--ant-color-border)
+          blocks:
+            - id: content_settings_header_title
+              type: Title
+              properties:
+                content: Account Settings
+                level: 4
+                style:
+                  margin: 0
+        - id: content_settings_main
+          type: Content
+          style:
+            padding: 32px 48px
+            background: var(--ant-color-bg-container)
+          blocks:
+            - id: content_settings_title
+              type: Title
+              properties:
+                content: Profile Information
+                level: 3
+            - id: content_settings_desc
+              type: Paragraph
+              properties:
+                content: Update your personal details and preferences below.
+            - id: content_settings_form_name
+              type: TextInput
+              properties:
+                title: Display Name
+                placeholder: Enter your display name
+            - id: content_settings_form_email
+              type: TextInput
+              properties:
+                title: Email Address
+                placeholder: you@example.com
+            - id: content_settings_form_bio
+              type: TextArea
+              properties:
+                title: Bio
+                placeholder: Tell us about yourself
+                rows: 3
+            - id: content_settings_divider
+              type: Divider
+            - id: content_settings_actions
+              type: Box
+              layout:
+                gap: 12
+                justify: end
+              blocks:
+                - id: content_settings_cancel_btn
+                  type: Button
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    title: Cancel
+                    color: default
+                    variant: outlined
+                - id: content_settings_save_btn
+                  type: Button
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    title: Save Changes
+                    color: primary
+                    variant: solid
+                    icon: AiOutlineSave
+                  events:
+                    onClick:
+                      - id: content_settings_save_msg
+                        type: DisplayMessage
+                        params:
+                          content: Settings saved successfully!
+                          status: success

package/dist/blocks/Content/tests/Content.e2e.yaml

@@ -0,0 +1,71 @@
+# 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.
+
+id: content
+type: Box
+
+blocks:
+  # ============================================
+  # BASIC RENDERING
+  # ============================================
+
+  - id: content_basic
+    type: Content
+    slots:
+      content:
+        blocks:
+          - id: content_basic_text
+            type: Span
+            properties:
+              content: Main content area
+
+  # ============================================
+  # STYLE TESTS
+  # ============================================
+
+  - id: content_with_style
+    type: Content
+    properties:
+      style:
+        backgroundColor: '#fff'
+        padding: 24px
+        minHeight: 280px
+    slots:
+      content:
+        blocks:
+          - id: content_with_style_text
+            type: Span
+            properties:
+              content: Styled content
+
+  # ============================================
+  # NESTED CONTENT
+  # ============================================
+
+  - id: content_nested
+    type: Content
+    slots:
+      content:
+        blocks:
+          - id: content_nested_card
+            type: Card
+            properties:
+              title: Nested Card
+            slots:
+              content:
+                blocks:
+                  - id: content_nested_card_text
+                    type: Span
+                    properties:
+                      content: Card inside content

package/dist/blocks/Content/tests.yaml

@@ -0,0 +1,42 @@
+# 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.
+
+- id: default
+  type: Content
+- id: properties.style
+  type: Content
+  properties:
+    style:
+      border: '1px solid blue'
+- id: areas.content
+  type: Content
+  areas:
+    content:
+      blocks:
+        - id: testArea
+          type: Test
+- id: areas.footer
+  type: Content
+  areas:
+    footer:
+      blocks:
+        - id: testArea
+          type: Test
+- id: areas.header
+  type: Content
+  areas:
+    header:
+      blocks:
+        - id: testArea
+          type: Test

package/dist/blocks/ControlledList/ControlledList.js

@@ -18,7 +18,7 @@ import { List, Typography } from 'antd';
 import { cn, withBlockDefaults } from '@lowdefy/block-utils';
 import Button from '../Button/Button.js';
 import withTheme from '../withTheme.js';
-import './style.module.css';
+import './style.css';
 const ControlledListBlock = ({ blockId, classNames = {}, components: { Icon, Link, ShortcutBadge }, events, list, methods, properties, styles = {}, value = [] })=>{
     useEffect(()=>{
         methods.registerMethod('moveItemDown', methods.moveItemDown);