@lowdefy/blocks-loaders 5.5.1 → 6.0.0

package/dist/blocks/ProgressBar/gallery.yaml

@@ -0,0 +1,102 @@
+# 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: Default
+  blocks:
+    - id: progress_bar_default
+      type: ProgressBar
+
+- title: Progress Values
+  blocks:
+    - id: progress_bar_0
+      type: ProgressBar
+      properties:
+        progress: 0
+    - id: progress_bar_25
+      type: ProgressBar
+      properties:
+        progress: 25
+    - id: progress_bar_50
+      type: ProgressBar
+      properties:
+        progress: 50
+    - id: progress_bar_75
+      type: ProgressBar
+      properties:
+        progress: 75
+    - id: progress_bar_100
+      type: ProgressBar
+      properties:
+        progress: 100
+
+- title: Custom Height
+  blocks:
+    - id: progress_bar_thin
+      type: ProgressBar
+      properties:
+        progress: 60
+        height: 2
+    - id: progress_bar_default_height
+      type: ProgressBar
+      properties:
+        progress: 60
+        height: 4
+    - id: progress_bar_thick
+      type: ProgressBar
+      properties:
+        progress: 60
+        height: 8
+    - id: progress_bar_extra_thick
+      type: ProgressBar
+      properties:
+        progress: 60
+        height: 12
+
+- title: Transition Speed
+  blocks:
+    - id: progress_bar_fast_transition
+      type: ProgressBar
+      properties:
+        progress: 80
+        transitionTime: 200
+    - id: progress_bar_default_transition
+      type: ProgressBar
+      properties:
+        progress: 80
+        transitionTime: 1000
+    - id: progress_bar_slow_transition
+      type: ProgressBar
+      properties:
+        progress: 80
+        transitionTime: 3000
+
+- title: Without Shadow
+  blocks:
+    - id: progress_bar_no_shadow
+      type: ProgressBar
+      properties:
+        progress: 65
+        shadow: false
+    - id: progress_bar_with_shadow
+      type: ProgressBar
+      properties:
+        progress: 65
+        shadow: true
+
+- title: Complete (Hidden)
+  blocks:
+    - id: progress_bar_complete
+      type: ProgressBar
+      properties:
+        progress: 100

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

@@ -0,0 +1,35 @@
+# 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: progressbar
+type: Box
+
+blocks:
+  - id: progressbar_basic
+    type: ProgressBar
+
+  - id: progressbar_progress
+    type: ProgressBar
+    properties:
+      progress: 75
+
+  - id: progressbar_height
+    type: ProgressBar
+    properties:
+      height: 10
+
+  - id: progressbar_no_shadow
+    type: ProgressBar
+    properties:
+      shadow: false

package/dist/blocks/ProgressBar/tests.yaml

@@ -0,0 +1,16 @@
+# 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: ProgressBar

package/dist/blocks/Skeleton/gallery.yaml

@@ -0,0 +1,268 @@
+# 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
+  blocks:
+    - id: basic_line
+      type: Skeleton
+      layout:
+        flex: 0 0 auto
+      properties:
+        width: 200
+        height: 16
+    - id: basic_block
+      type: Skeleton
+      layout:
+        flex: 0 0 auto
+      properties:
+        width: 120
+        height: 40
+    - id: basic_tall
+      type: Skeleton
+      layout:
+        flex: 0 0 auto
+      properties:
+        width: 80
+        height: 80
+
+- title: Active (Animated)
+  blocks:
+    - id: active_thin
+      type: Skeleton
+      layout:
+        flex: 0 0 auto
+      properties:
+        width: 250
+        height: 12
+    - id: active_medium
+      type: Skeleton
+      layout:
+        flex: 0 0 auto
+      properties:
+        width: 300
+        height: 16
+    - id: active_thick
+      type: Skeleton
+      layout:
+        flex: 0 0 auto
+      properties:
+        width: 180
+        height: 24
+
+- title: With Avatar Composition
+  blocks:
+    - id: avatar_row
+      type: Box
+      layout:
+        gap: 12
+        align: center
+      blocks:
+        - id: avatar_circle
+          type: SkeletonAvatar
+          layout:
+            flex: 0 0 auto
+          properties:
+            size: large
+            shape: round
+        - id: avatar_lines
+          type: Box
+          layout:
+            gap: 8
+          blocks:
+            - id: avatar_name
+              type: Skeleton
+              properties:
+                width: 180
+                height: 14
+            - id: avatar_desc
+              type: Skeleton
+              properties:
+                width: 120
+                height: 14
+
+- title: Paragraph Rows
+  blocks:
+    - id: paragraph_row_container
+      type: Box
+      layout:
+        gap: 10
+      blocks:
+        - id: para_row_1
+          type: Skeleton
+          properties:
+            width: '100%'
+            height: 14
+        - id: para_row_2
+          type: Skeleton
+          properties:
+            width: '100%'
+            height: 14
+        - id: para_row_3
+          type: Skeleton
+          properties:
+            width: '100%'
+            height: 14
+        - id: para_row_4
+          type: Skeleton
+          properties:
+            width: '60%'
+            height: 14
+
+- title: Width Variations
+  blocks:
+    - id: width_full
+      type: Skeleton
+      properties:
+        width: '100%'
+        height: 16
+    - id: width_half
+      type: Skeleton
+      properties:
+        width: '50%'
+        height: 16
+    - id: width_quarter
+      type: Skeleton
+      properties:
+        width: '25%'
+        height: 16
+    - id: width_px
+      type: Skeleton
+      properties:
+        width: 300
+        height: 16
+
+- title: Height Variations
+  blocks:
+    - id: height_thin
+      type: Skeleton
+      layout:
+        flex: 0 0 auto
+      properties:
+        width: 200
+        height: 8
+    - id: height_default
+      type: Skeleton
+      layout:
+        flex: 0 0 auto
+      properties:
+        width: 200
+        height: 16
+    - id: height_medium
+      type: Skeleton
+      layout:
+        flex: 0 0 auto
+      properties:
+        width: 200
+        height: 32
+    - id: height_thick
+      type: Skeleton
+      layout:
+        flex: 0 0 auto
+      properties:
+        width: 200
+        height: 48
+
+- title: Percentage Width
+  blocks:
+    - id: pct_100
+      type: Skeleton
+      properties:
+        width: '100%'
+        height: 14
+    - id: pct_80
+      type: Skeleton
+      properties:
+        width: '80%'
+        height: 14
+    - id: pct_60
+      type: Skeleton
+      properties:
+        width: '60%'
+        height: 14
+    - id: pct_40
+      type: Skeleton
+      properties:
+        width: '40%'
+        height: 14
+
+- title: Card Skeleton Composition
+  blocks:
+    - id: card_skeleton
+      type: Box
+      style:
+        padding: 16
+        border: 1px solid #f0f0f0
+        borderRadius: 8
+        maxWidth: 360
+      layout:
+        gap: 12
+      blocks:
+        - id: card_image
+          type: Skeleton
+          properties:
+            width: '100%'
+            height: 180
+        - id: card_title
+          type: Skeleton
+          properties:
+            width: '70%'
+            height: 20
+        - id: card_desc_1
+          type: Skeleton
+          properties:
+            width: '100%'
+            height: 14
+        - id: card_desc_2
+          type: Skeleton
+          properties:
+            width: '100%'
+            height: 14
+        - id: card_desc_3
+          type: Skeleton
+          properties:
+            width: '50%'
+            height: 14
+
+- title: Style Overrides
+  blocks:
+    - id: style_rounded
+      type: Skeleton
+      layout:
+        flex: 0 0 auto
+      properties:
+        width: 200
+        height: 20
+      style:
+        .element:
+          borderRadius: 10
+    - id: style_square
+      type: Skeleton
+      layout:
+        flex: 0 0 auto
+      properties:
+        width: 60
+        height: 60
+      style:
+        .element:
+          borderRadius: 8
+    - id: style_circle
+      type: Skeleton
+      layout:
+        flex: 0 0 auto
+      properties:
+        width: 60
+        height: 60
+      style:
+        .element:
+          borderRadius: 30

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

@@ -0,0 +1,26 @@
+# 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: skeleton
+type: Box
+
+blocks:
+  - id: skeleton_basic
+    type: Skeleton
+
+  - id: skeleton_sized
+    type: Skeleton
+    properties:
+      width: 200
+      height: 50

package/dist/blocks/Skeleton/tests.yaml

@@ -0,0 +1,30 @@
+# 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: Skeleton
+  description: Default
+- id: sizedefault
+  type: Skeleton
+  style:
+    height: 20
+  description: |
+    container height=20
+- id: sizesmall
+  type: Skeleton
+  style:
+    height: 40
+    width: 100
+  description: |
+    container height=20 width=100

package/dist/blocks/SkeletonAvatar/gallery.yaml

@@ -0,0 +1,218 @@
+# 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: Shapes
+  blocks:
+    - id: shape_round
+      type: SkeletonAvatar
+      layout:
+        flex: 0 0 auto
+      properties:
+        shape: round
+    - id: shape_square
+      type: SkeletonAvatar
+      layout:
+        flex: 0 0 auto
+      properties:
+        shape: square
+
+- title: Sizes (Round)
+  blocks:
+    - id: size_small_round
+      type: SkeletonAvatar
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: small
+        shape: round
+    - id: size_medium_round
+      type: SkeletonAvatar
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: medium
+        shape: round
+    - id: size_large_round
+      type: SkeletonAvatar
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: large
+        shape: round
+
+- title: Sizes (Square)
+  blocks:
+    - id: size_small_square
+      type: SkeletonAvatar
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: small
+        shape: square
+    - id: size_medium_square
+      type: SkeletonAvatar
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: medium
+        shape: square
+    - id: size_large_square
+      type: SkeletonAvatar
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: large
+        shape: square
+
+- title: Active (Animated)
+  blocks:
+    - id: active_round_small
+      type: SkeletonAvatar
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: small
+        shape: round
+    - id: active_round_medium
+      type: SkeletonAvatar
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: medium
+        shape: round
+    - id: active_round_large
+      type: SkeletonAvatar
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: large
+        shape: round
+    - id: active_square_small
+      type: SkeletonAvatar
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: small
+        shape: square
+    - id: active_square_medium
+      type: SkeletonAvatar
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: medium
+        shape: square
+    - id: active_square_large
+      type: SkeletonAvatar
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: large
+        shape: square
+
+- title: Custom Size via Style
+  blocks:
+    - id: custom_tiny
+      type: SkeletonAvatar
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: small
+        shape: round
+      style:
+        .element:
+          width: 16
+          height: 16
+    - id: custom_xlarge
+      type: SkeletonAvatar
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: large
+        shape: round
+      style:
+        .element:
+          width: 64
+          height: 64
+          borderRadius: 32
+    - id: custom_xxlarge
+      type: SkeletonAvatar
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: large
+        shape: round
+      style:
+        .element:
+          width: 96
+          height: 96
+          borderRadius: 48
+
+- title: Avatar with Text Lines
+  blocks:
+    - id: avatar_text_row
+      type: Box
+      layout:
+        gap: 12
+        align: center
+      blocks:
+        - id: avatar_icon
+          type: SkeletonAvatar
+          layout:
+            flex: 0 0 auto
+          properties:
+            size: large
+            shape: round
+        - id: avatar_text_col
+          type: Box
+          layout:
+            gap: 6
+          blocks:
+            - id: avatar_name_line
+              type: Skeleton
+              properties:
+                width: 160
+                height: 14
+            - id: avatar_desc_line
+              type: Skeleton
+              properties:
+                width: 100
+                height: 12
+    - id: avatar_square_row
+      type: Box
+      layout:
+        gap: 12
+        align: center
+      blocks:
+        - id: avatar_sq_icon
+          type: SkeletonAvatar
+          layout:
+            flex: 0 0 auto
+          properties:
+            size: large
+            shape: square
+        - id: avatar_sq_col
+          type: Box
+          layout:
+            gap: 6
+          blocks:
+            - id: avatar_sq_line_1
+              type: Skeleton
+              properties:
+                width: 200
+                height: 14
+            - id: avatar_sq_line_2
+              type: Skeleton
+              properties:
+                width: 140
+                height: 14