blocks-dusted 0.1.10 → 0.1.11

package/templates/blocks/DD-Lottie/config.ts

@@ -0,0 +1,379 @@
+import type { Block } from 'payload'
+
+export const DDLottie: Block = {
+  slug: 'DD-Lottie',
+  interfaceName: 'DDLottie',
+  labels: {
+    singular: 'Lottie Animation',
+    plural: 'Lottie Animations'
+  },
+  fields: [
+    // Block identification
+    {
+      admin: {
+        initCollapsed: false,
+        className: 'custom-css-class block-identification'
+      },
+      type: 'collapsible',
+      label: 'Block Settings',
+      fields: [
+        {
+          name: 'blockName',
+          type: 'text',
+          required: false,
+          label: 'Block Name',
+          admin: {
+            description: 'Optional: Give this block a name for easier identification in admin.',
+            placeholder: 'e.g., "Loading Animation", "Hero Animation"'
+          }
+        }
+      ]
+    },
+
+    // File format + upload
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'format',
+          type: 'select',
+          required: true,
+          label: 'File Format',
+          defaultValue: 'json',
+          options: [
+            { label: 'Lottie JSON (.json)', value: 'json' },
+            // !!TODO: .lottie filetype fail to upload in production. Check allowed filetype despite already listed in media collection and next.config.js
+            { label: 'DotLottie (.lottie)', value: 'lottie' }
+          ],
+          admin: {
+            width: '50%',
+            description: 'Select the format so the correct player is used.'
+          }
+        },
+        {
+          name: 'lottieFile',
+          type: 'upload',
+          relationTo: 'media',
+          required: true,
+          label: 'Lottie File',
+          admin: {
+            width: '50%',
+            description:
+              'Upload a .json (Lottie) or .lottie (DotLottie) file from the media library.'
+          },
+          filterOptions: (options) => {
+            // siblingData is unknown, so we need to safely extract format
+            const siblingData = options?.siblingData as { format?: string } | undefined
+            const format = siblingData?.format
+
+            // NOTE:
+            // .lottie is a ZIP container (common upload mimetypes vary)
+            // We allow zip/octet-stream for dotlottie.
+            if (format === 'lottie') {
+              return {
+                mimeType: {
+                  in: [
+                    'application/zip',
+                    'application/octet-stream',
+                    'application/x-zip-compressed',
+                    // spec value can appear depending on uploader / server
+                    'application/zip+dotlottie'
+                  ]
+                }
+              }
+            }
+
+            // JSON only
+            return {
+              mimeType: {
+                in: ['application/json']
+              }
+            }
+          }
+        }
+      ]
+    },
+
+    // Animation controls
+    {
+      admin: {
+        initCollapsed: true,
+        className: 'animation-controls'
+      },
+      type: 'collapsible',
+      label: 'Animation Controls',
+      fields: [
+        {
+          type: 'row',
+          fields: [
+            {
+              name: 'autoplay',
+              type: 'checkbox',
+              label: 'Autoplay',
+              defaultValue: true,
+              admin: {
+                description: 'Start animation automatically when the component loads.',
+                width: '25%'
+              }
+            },
+            {
+              name: 'loop',
+              type: 'checkbox',
+              label: 'Loop',
+              defaultValue: true,
+              admin: {
+                description: 'Repeat the animation continuously.',
+                width: '25%'
+              }
+            },
+            {
+              name: 'controls',
+              type: 'checkbox',
+              label: 'Show Controls',
+              defaultValue: false,
+              admin: {
+                description: 'Display play/pause controls for the animation.',
+                width: '25%'
+              }
+            },
+            {
+              name: 'hover',
+              type: 'checkbox',
+              label: 'Play on Hover',
+              defaultValue: false,
+              admin: {
+                description: 'Play animation only when hovering over it.',
+                width: '25%'
+              }
+            }
+          ]
+        },
+        {
+          type: 'row',
+          fields: [
+            {
+              name: 'speed',
+              type: 'number',
+              label: 'Animation Speed',
+              defaultValue: 1,
+              min: 0.1,
+              max: 50,
+              admin: {
+                description: 'Speed multiplier for the animation (0.1 = slow, 5 = very fast).',
+                step: 0.1,
+                width: '50%'
+              }
+            },
+            {
+              name: 'direction',
+              type: 'select',
+              label: 'Direction',
+              options: [
+                { label: 'Forward', value: '1' },
+                { label: 'Reverse', value: '-1' }
+              ],
+              defaultValue: '1',
+              admin: {
+                description: 'Animation playback direction.',
+                width: '50%'
+              }
+            }
+          ]
+        }
+      ]
+    },
+
+    // Sizing and positioning
+    {
+      admin: {
+        initCollapsed: true,
+        className: 'custom-css-class sizing-positioning'
+      },
+      type: 'collapsible',
+      label: 'Size & Position',
+      fields: [
+        {
+          type: 'row',
+          fields: [
+            {
+              name: 'width',
+              type: 'text',
+              label: 'Width',
+              admin: {
+                description: 'CSS width value (e.g., "300px", "50%", "100vw").',
+                placeholder: '300px',
+                width: '50%'
+              }
+            },
+            {
+              name: 'height',
+              type: 'text',
+              label: 'Height',
+              admin: {
+                description: 'CSS height value (e.g., "300px", "50vh", "auto").',
+                placeholder: '300px',
+                width: '50%'
+              }
+            }
+          ]
+        },
+        {
+          name: 'objectFit',
+          type: 'select',
+          label: 'Object Fit',
+          options: [
+            { label: 'Fill', value: 'fill' },
+            { label: 'Contain', value: 'contain' },
+            { label: 'Cover', value: 'cover' },
+            { label: 'None', value: 'none' },
+            { label: 'Scale Down', value: 'scale-down' }
+          ],
+          defaultValue: 'contain',
+          admin: {
+            description: 'How the animation should fit within its container.'
+          }
+        }
+      ]
+    },
+
+    // Trigger options
+    {
+      admin: {
+        initCollapsed: true,
+        className: 'custom-css-class trigger-options'
+      },
+      type: 'collapsible',
+      label: 'Trigger Options',
+      fields: [
+        {
+          name: 'playOnScroll',
+          type: 'checkbox',
+          label: 'Play on Scroll Into View',
+          defaultValue: false,
+          admin: {
+            description: 'Start animation when the element comes into view.'
+          }
+        },
+        {
+          name: 'scrollBehavior',
+          type: 'select',
+          label: 'Scroll Behavior',
+          options: [
+            { label: 'Play Once', value: 'once' },
+            { label: 'Play Every Time', value: 'always' },
+            { label: 'Sync with Scroll', value: 'sync' }
+          ],
+          defaultValue: 'once',
+          admin: {
+            description: 'How the animation behaves with scrolling.',
+            condition: (data, siblingData) => siblingData.playOnScroll
+          }
+        },
+        {
+          type: 'row',
+          admin: {
+            condition: (data, siblingData) =>
+              siblingData.playOnScroll && siblingData.scrollBehavior === 'sync'
+          },
+          fields: [
+            {
+              name: 'scrollStart',
+              type: 'number',
+              label: 'Scroll Start (%)',
+              defaultValue: 0,
+              min: 0,
+              max: 100,
+              admin: {
+                description: 'When to start the animation based on scroll position (0-100%).',
+                width: '50%'
+              }
+            },
+            {
+              name: 'scrollEnd',
+              type: 'number',
+              label: 'Scroll End (%)',
+              defaultValue: 100,
+              min: 0,
+              max: 100,
+              admin: {
+                description: 'When to end the animation based on scroll position (0-100%).',
+                width: '50%'
+              }
+            }
+          ]
+        }
+      ]
+    },
+
+    // Styling
+    {
+      admin: {
+        initCollapsed: true,
+        className: 'styling-options'
+      },
+      type: 'collapsible',
+      label: 'Styling',
+      fields: [
+        {
+          name: 'containerClass',
+          type: 'text',
+          label: 'Container CSS Classes',
+          admin: {
+            description: 'Custom CSS classes for the animation container.',
+            placeholder: 'mx-auto p-4 bg-white rounded-sm'
+          }
+        },
+        {
+          name: 'customCSS',
+          type: 'code',
+          label: 'Custom CSS',
+          admin: {
+            language: 'css',
+            description: 'Paste any CSS rules that should apply only to this Lottie block.'
+          }
+        }
+      ]
+    },
+
+    // Accessibility
+    {
+      admin: {
+        initCollapsed: true,
+        className: 'accessibility-options'
+      },
+      type: 'collapsible',
+      label: 'Accessibility',
+      fields: [
+        {
+          name: 'alt',
+          type: 'text',
+          label: 'Alt Text',
+          admin: {
+            description: 'Alternative text description for screen readers.',
+            placeholder: 'Loading animation'
+          }
+        },
+        {
+          name: 'title',
+          type: 'text',
+          label: 'Title',
+          admin: {
+            description: 'Title attribute for the animation.',
+            placeholder: 'Interactive loading animation'
+          }
+        },
+        {
+          name: 'reducedMotion',
+          type: 'checkbox',
+          label: 'Respect Reduced Motion',
+          defaultValue: true,
+          admin: {
+            description: 'Pause animation for users who prefer reduced motion.'
+          }
+        }
+      ]
+    }
+  ]
+}
+
+export default DDLottie

package/templates/blocks/DD-Lottie/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { DDLottie as LottieBlock } from './Component'
+import type { LottieBlockProps } from './Component'
+import FadeUpOnInView from '@/components/ui/anims/FadeUpOnInView'
+
+export interface LottieBlockPayloadProps extends Omit<LottieBlockProps, 'lottieFile'> {
+  lottieFile?: any // Payload media object
+}
+
+const LottieBlockWrapper: React.FC<LottieBlockPayloadProps> = (props) => {
+  // Handle case where no lottie file is provided
+  if (!props.lottieFile) {
+    return (
+      <div className="lottie-block lottie-error">
+        <div className="lottie-placeholder">No Lottie file selected</div>
+      </div>
+    )
+  }
+
+  return (
+    <FadeUpOnInView delay={0.1} className="fadeup">
+      <LottieBlock {...props} lottieFile={props.lottieFile} />
+    </FadeUpOnInView>
+  )
+}
+
+export default LottieBlockWrapper
+export { LottieBlock, type LottieBlockProps }

package/templates/blocks/DD-Lottie/manifest.json

@@ -0,0 +1,83 @@
+{
+  "type": "block",
+  "name": "DD-Lottie",
+  "label": "Lottie",
+  "sourceName": "LottieBlock",
+  "portableName": "DD-Lottie",
+  "slug": "DD-Lottie",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/ROUND-TWO-CONVERSION/LottieBlock",
+    "originalSlug": "lottieBlock",
+    "originalConfigExport": "LottieBlock",
+    "originalComponentExport": "LottieBlock",
+    "originalInterfaceName": "DDLottie"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-Lottie/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-Lottie/config.ts"
+    }
+  ],
+  "dependencies": [
+    "lottie-web",
+    "framer-motion"
+  ],
+  "sharedFiles": [
+    {
+      "from": "templates/shared/src/components/ui/anims",
+      "to": "src/components/ui/anims",
+      "required": true,
+      "safeToCopy": true
+    }
+  ],
+  "requiredProjectFiles": [],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDLottie in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-Lottie in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "manualSteps": [
+    "Register DDLottie in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-Lottie in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can add import { DDLottie } from '@/blocks/DD-Lottie/config' and add DDLottie to clear Pages/Posts block arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-Lottie in RenderBlocks."
+    }
+  },
+  "notes": [
+    "Converted from ROUND-TWO-CONVERSION as a portable Dusted template.",
+    "Project-specific imports were replaced with local, dependency-light rendering where required.",
+    "Manifest includes shared local support files required by original DesignsDusted source imports."
+  ],
+  "exportName": "DDLottie",
+  "interfaceName": "DDLottie"
+}