blocks-dusted 0.1.10 → 0.1.12

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

@@ -0,0 +1,41 @@
+import type { Block } from 'payload'
+
+export const DDIdTag: Block = {
+  slug: 'DD-IdTag',
+  interfaceName: 'DDIdTag',
+  labels: {
+    singular: 'ID Tag',
+    plural: 'ID Tags'
+  },
+  fields: [
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'id',
+          type: 'text',
+          label: 'Element ID',
+          required: true,
+          admin: {
+            width: '75%',
+            description: 'Set a unique ID for anchor linking within richtext content.',
+            placeholder: 'my-section-id'
+          }
+        },
+        {
+          name: 'offset',
+          type: 'number',
+          label: 'Scroll Offset (px)',
+          defaultValue: 0,
+          admin: {
+            width: '25%',
+            description: 'Optional vertical scroll offset for anchor links',
+            step: 10
+          }
+        }
+      ]
+    }
+  ]
+}
+
+export default DDIdTag

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

@@ -0,0 +1,72 @@
+{
+  "type": "block",
+  "name": "DD-IdTag",
+  "label": "ID Tag",
+  "sourceName": "IdTagBlock",
+  "portableName": "DD-IdTag",
+  "slug": "DD-IdTag",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/ROUND-TWO-CONVERSION/IdTagBlock",
+    "originalSlug": "idTag",
+    "originalConfigExport": "IdTagBlock",
+    "originalComponentExport": "IdTagBlock",
+    "originalInterfaceName": "DDIdTag"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-IdTag/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-IdTag/config.ts"
+    }
+  ],
+  "dependencies": [],
+  "sharedFiles": [],
+  "requiredProjectFiles": [],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDIdTag in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-IdTag in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "manualSteps": [
+    "Register DDIdTag in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-IdTag in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can add import { DDIdTag } from '@/blocks/DD-IdTag/config' and add DDIdTag to clear Pages/Posts block arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-IdTag 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."
+  ],
+  "exportName": "DDIdTag",
+  "interfaceName": "DDIdTag"
+}

package/templates/blocks/DD-Iframe/Component.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import React from 'react'
+import { cn } from '@/utilities/ui'
+
+export interface IframeBlockProps {
+  data?: {
+    url?: string | null
+    classNameIframeWrapper?: string | null
+    classNameIframe?: string | null
+  }
+}
+
+const FieldRow = ({ label, value }: { label: string; value?: string | null }) => (
+  <div className="grid gap-2 rounded-md border border-white/10 bg-white/[0.03] p-4 md:grid-cols-[150px_1fr]">
+    <dt className="text-xs font-semibold uppercase tracking-[0.18em] text-lime-300">{label}</dt>
+    <dd className="break-words font-mono text-sm leading-6 text-stone-200">{value || 'Not configured'}</dd>
+  </div>
+)
+
+export const DDIframe = ({ data }: IframeBlockProps) => {
+  return (
+    <section className="mx-auto w-full max-w-4xl rounded-md border border-lime-400/25 bg-[#0d0d0d] p-6 shadow-[0_24px_90px_rgba(0,0,0,0.35)]">
+      <div className="mb-6 flex flex-col gap-2 border-b border-white/10 pb-5">
+        <p className="text-xs font-black uppercase tracking-[0.24em] text-lime-300">Iframe block config</p>
+        <h2 className="text-2xl font-bold text-stone-50">Embed settings preview</h2>
+        <p className="max-w-2xl text-sm leading-6 text-stone-300">
+          The product sandbox shows the saved iframe settings as static configuration. It does not render a nested iframe inside this preview.
+        </p>
+      </div>
+
+      <dl className="grid gap-3">
+        <FieldRow label="URL" value={data?.url} />
+        <FieldRow label="Wrapper class" value={data?.classNameIframeWrapper} />
+        <FieldRow label="Iframe class" value={data?.classNameIframe} />
+      </dl>
+
+      <div className={cn('mt-5 rounded-md border border-dashed border-white/15 bg-black/40 p-4 text-sm leading-6 text-stone-400')}>
+        Use this block on a real page when the embedded route needs its own viewport. In this sandbox, rendering is intentionally disabled to avoid iframe-in-iframe behaviour.
+      </div>
+    </section>
+  )
+}
+
+export default DDIframe

package/templates/blocks/DD-Iframe/README.md

@@ -0,0 +1,4 @@
+# DD-Iframe
+
+Portable first-pass conversion of `IframeBlock` from ROUND-TWO-CONVERSION. Project-specific roots and nested unconverted block dependencies were intentionally replaced with local rendering so the template can install into a clean Payload project.
+

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

@@ -0,0 +1,47 @@
+import { Block } from 'payload'
+
+export const DDIframe: Block = {
+  slug: 'DD-Iframe',
+  interfaceName: 'DDIframe',
+  labels: {
+    singular: 'Iframe Block',
+    plural: 'Iframe Blocks'
+  },
+  fields: [
+    {
+      admin: {
+        initCollapsed: true,
+        className: 'custom-css-class'
+      },
+      type: 'collapsible',
+      label: 'Block Settings',
+      fields: [
+        {
+          name: 'classNameIframeWrapper',
+          label: 'Wrapper CSS Classes',
+          type: 'text',
+          admin: {
+            description: 'Custom CSS classes for the iframe wrapper container'
+          }
+        },
+        {
+          name: 'classNameIframe',
+          label: 'Iframe CSS Classes',
+          type: 'text',
+          defaultValue:
+            'shadow-xl rounded-sm border border-border p-1 shadow-xl background-blur-md',
+          admin: {
+            description:
+              'Custom CSS classes for the iframe element. Default: shadow-xl rounded-sm border border-border p-1 shadow-xl background-blur-md'
+          }
+        }
+      ]
+    },
+    {
+      name: 'url',
+      label: 'Website URL',
+      type: 'text',
+      required: true
+    }
+  ]
+}

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

@@ -0,0 +1,72 @@
+{
+  "type": "block",
+  "name": "DD-Iframe",
+  "label": "Iframe",
+  "sourceName": "IframeBlock",
+  "portableName": "DD-Iframe",
+  "slug": "DD-Iframe",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/ROUND-TWO-CONVERSION/IframeBlock",
+    "originalSlug": "iframeBlock",
+    "originalConfigExport": "IframeBlock",
+    "originalComponentExport": "IframeBlock",
+    "originalInterfaceName": "DDIframe"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-Iframe/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-Iframe/config.ts"
+    }
+  ],
+  "dependencies": [],
+  "sharedFiles": [],
+  "requiredProjectFiles": [],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDIframe in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-Iframe in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "manualSteps": [
+    "Register DDIframe in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-Iframe in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can add import { DDIframe } from '@/blocks/DD-Iframe/config' and add DDIframe to clear Pages/Posts block arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-Iframe 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."
+  ],
+  "exportName": "DDIframe",
+  "interfaceName": "DDIframe"
+}

package/templates/blocks/DD-IframeMedia/Component.tsx

@@ -0,0 +1,133 @@
+'use client'
+
+import React from 'react'
+
+export type MediaType = {
+  url: string
+  alt?: string
+}
+
+type IframeMediaFields = {
+  fullwidthSectionClass?: string
+  sectionId?: string
+  video?: MediaType
+  image?: MediaType // used as poster
+  imageClassName?: string
+  additionalStyles?: React.CSSProperties
+}
+
+export type IframeMediaBlockProps = IframeMediaFields & {
+  data?: IframeMediaFields
+}
+
+// ✅ Named export
+export const DDIframeMedia: React.FC<IframeMediaBlockProps> = (props) => {
+  const [isLoading, setIsLoading] = React.useState(true)
+  const data = props.data ?? props
+  const { video, image, sectionId, fullwidthSectionClass, additionalStyles } = data
+  const sectionIdValue = sectionId || 'fullwidth-container'
+
+  const commonStyle: React.CSSProperties = {
+    width: '100%',
+    height: 'auto',
+    aspectRatio: '16/9',
+    maxWidth: '100%',
+    maxHeight: '100%',
+    margin: '0 auto',
+    display: 'block',
+    objectFit: 'cover',
+    ...additionalStyles // Merge with any additional styles passed
+  }
+
+  const renderVideo = (video?: MediaType) => {
+    if (!video?.url) return null
+
+    const isYouTube = video.url.includes('youtube.com') || video.url.includes('youtu.be')
+    const isVimeo = video.url.includes('vimeo.com')
+
+    if (isYouTube) {
+      const videoId = video.url.split('v=')[1] || video.url.split('/').pop()
+      const embedUrl = `https://www.youtube.com/embed/${videoId}`
+
+      return (
+        <div className="video-container mb-30 relative" style={commonStyle}>
+          {isLoading && (
+            <div className="absolute inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm rounded-sm">
+              <div className="flex flex-col items-center gap-3">
+                <div className="w-12 h-12 border-4 border-white/20 border-t-white rounded-full animate-spin" />
+                <div className="text-white text-sm font-medium px-4 py-2 bg-black/60 rounded-md">
+                  Loading video...
+                </div>
+              </div>
+            </div>
+          )}
+          <iframe
+            src={embedUrl}
+            title={video.alt || 'YouTube video'}
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+            onLoad={() => setIsLoading(false)}
+            style={commonStyle}
+          />
+        </div>
+      )
+    }
+
+    if (isVimeo) {
+      const videoId = video.url.split('/').pop()
+      const embedUrl = `https://player.vimeo.com/video/${videoId}`
+
+      return (
+        <div className="video-container mb-30 relative" style={commonStyle}>
+          {isLoading && (
+            <div className="absolute inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm rounded-sm">
+              <div className="flex flex-col items-center gap-3">
+                <div className="w-12 h-12 border-4 border-white/20 border-t-white rounded-full animate-spin" />
+                <div className="text-white text-sm font-medium px-4 py-2 bg-black/60 rounded-md">
+                  Loading video...
+                </div>
+              </div>
+            </div>
+          )}
+          <iframe
+            src={embedUrl}
+            title={video.alt || 'Vimeo video'}
+            allow="autoplay; fullscreen; picture-in-picture"
+            allowFullScreen
+            onLoad={() => setIsLoading(false)}
+            style={commonStyle}
+          />
+        </div>
+      )
+    }
+
+    return (
+      <video
+        autoPlay
+        loop
+        muted
+        playsInline
+        poster={image?.url || '/assets/placeholder/01.png'}
+        style={{
+          ...commonStyle,
+          position: 'relative',
+          top: '0',
+          zIndex: 0,
+          filter: 'drop-shadow(2px 4px 6px rgba(0, 0, 0, .5))'
+        }}
+      >
+        <source src={video.url} type="video/webm" />
+      </video>
+    )
+  }
+
+  return (
+    <section
+      className={`container-fluid container-block ${fullwidthSectionClass || ''}`}
+      id={sectionIdValue}
+    >
+      {renderVideo(video)}
+    </section>
+  )
+}
+

package/templates/blocks/DD-IframeMedia/README.md

@@ -0,0 +1,4 @@
+# DD-IframeMedia
+
+Portable first-pass conversion of `IframeMediaBlock` from ROUND-TWO-CONVERSION. Project-specific roots and nested unconverted block dependencies were intentionally replaced with local rendering so the template can install into a clean Payload project.
+

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

@@ -0,0 +1,79 @@
+import type { Block } from 'payload'
+
+export const DDIframeMedia: Block = {
+  slug: 'DD-IframeMedia',
+  interfaceName: 'DDIframeMedia',
+  labels: {
+    singular: 'Embeded Media',
+    plural: 'Embeded Media Blocks'
+  },
+  fields: [
+    {
+      admin: {
+        initCollapsed: true,
+        className: 'custom-css'
+      },
+      type: 'collapsible',
+      label: 'Custom Class',
+      fields: [
+        {
+          name: 'sectionId',
+          label: 'Section ID',
+          type: 'text',
+          required: false
+        },
+        {
+          name: 'fullwidthSectionClass',
+          label: 'Section Class',
+          type: 'text',
+          required: false
+        },
+        {
+          name: 'imageClassName',
+          label: 'Image Class Name',
+          type: 'text',
+          required: false
+        }
+      ]
+    },
+
+    {
+      name: 'video',
+      label: 'Video',
+      type: 'group',
+      fields: [
+        {
+          name: 'url',
+          type: 'text',
+          required: false
+        },
+        {
+          name: 'alt',
+          type: 'text',
+          required: false
+        }
+      ]
+    },
+    {
+      admin: {
+        initCollapsed: true,
+        className: 'custom-css-class'
+      },
+      type: 'collapsible',
+      label: 'Media Poster Options',
+      fields: [
+        {
+          name: 'image',
+          label: 'Image',
+          type: 'upload',
+          relationTo: 'media',
+          required: false,
+          admin: {
+            description:
+              'Optional - Image to display before video is played (e.g. a thumbnail). If no image is set, a blank placeholder will be shown. Youtube and Vimeo videos will display their own thumbnail if no image is set.'
+          }
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,72 @@
+{
+  "type": "block",
+  "name": "DD-IframeMedia",
+  "label": "Iframe Media",
+  "sourceName": "IframeMediaBlock",
+  "portableName": "DD-IframeMedia",
+  "slug": "DD-IframeMedia",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/ROUND-TWO-CONVERSION/IframeMediaBlock",
+    "originalSlug": "iframeMediaBlock",
+    "originalConfigExport": "IframeMediaBlock",
+    "originalComponentExport": "IframeMediaBlock",
+    "originalInterfaceName": "DDIframeMedia"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-IframeMedia/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-IframeMedia/config.ts"
+    }
+  ],
+  "dependencies": [],
+  "sharedFiles": [],
+  "requiredProjectFiles": [],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDIframeMedia in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-IframeMedia in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "manualSteps": [
+    "Register DDIframeMedia in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-IframeMedia in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can add import { DDIframeMedia } from '@/blocks/DD-IframeMedia/config' and add DDIframeMedia to clear Pages/Posts block arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-IframeMedia 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."
+  ],
+  "exportName": "DDIframeMedia",
+  "interfaceName": "DDIframeMedia"
+}

package/templates/blocks/DD-LineAnim/Component.tsx

@@ -0,0 +1,36 @@
+'use client'
+import React from 'react'
+import LineAnim from '@/components/ui/anims/LineAnims'
+
+export interface LineAnimBlockProps {
+  className?: string
+  direction?: 'left-to-right' | 'right-to-left' | 'top-to-bottom' | 'bottom-to-top'
+  trigger?: 'scroll' | 'immediate'
+  duration?: number
+  delay?: number
+  customClass?: string
+  blockType?: string
+  id?: string
+}
+
+export const DDLineAnim: React.FC<LineAnimBlockProps> = ({
+  className = '',
+  direction = 'left-to-right',
+  trigger = 'scroll',
+  duration = 1,
+  delay = 0,
+  customClass = '',
+  id
+}) => {
+  return (
+    <div className={`line-anim-block overflow-hidden ${className} ${customClass}`} id={id}>
+      <LineAnim
+        direction={direction}
+        trigger={trigger}
+        duration={duration}
+        delay={delay}
+        className="bg-gradient-to-r from-gray-400 to-gray-600"
+      />
+    </div>
+  )
+}

package/templates/blocks/DD-LineAnim/README.md

@@ -0,0 +1,4 @@
+# DD-LineAnim
+
+Portable first-pass conversion of `LineAnimBlock` from ROUND-TWO-CONVERSION. Project-specific roots and nested unconverted block dependencies were intentionally replaced with local rendering so the template can install into a clean Payload project.
+