blocks-dusted 0.1.10 → 0.1.12

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

@@ -0,0 +1,157 @@
+'use client'
+
+import React from 'react'
+import { motion } from 'framer-motion'
+import { cn } from '@/utilities/ui'
+import { Separator } from '@/components/ui/separator'
+
+export interface TextMarqueeBlockProps {
+  blockType: 'textMarquee'
+  items?: Array<{
+    text: string
+    textClass?: string
+    textStyle?: React.CSSProperties
+    fontSize?: string
+    fontWeight?: string
+    color?: string
+  }>
+  speed?: number
+  spacing?: number
+  showTopDivider?: boolean
+  showBottomDivider?: boolean
+  containerClass?: string
+}
+
+export type TextMarqueeProps = {
+  texts: {
+    text: string
+    textClass?: string
+    textStyle?: React.CSSProperties
+    fontSize?: string
+    fontWeight?: string
+    color?: string
+  }[]
+  speed?: number
+  spacing?: number
+  showTopDivider?: boolean
+  showBottomDivider?: boolean
+  containerClass?: string
+}
+
+export const TextMarqueeComponent: React.FC<TextMarqueeProps> = ({
+  texts,
+  speed = 20,
+  spacing = 48,
+  showTopDivider = false,
+  showBottomDivider = false,
+  containerClass = 'overflow-hidden py-8 bg-transparent',
+}) => {
+  if (!texts || texts.length === 0) {
+    return null
+  }
+
+  // Calculate total width - simple calculation, no memoization needed
+  const totalWidth = texts.reduce((acc, text) => {
+    const textWidth = text.text.length * 12 // ~12px per character
+    return acc + textWidth + spacing
+  }, 0)
+
+  return (
+    <>
+      {showTopDivider && <Separator gradient={true} className="border-t" />}
+      <div className={cn('overflow-clip relative top-24', containerClass)}>
+        <motion.div
+          className="flex items-center whitespace-nowrap"
+          animate={{ x: [0, -totalWidth] }}
+          transition={{
+            repeat: Infinity,
+            duration: speed,
+            ease: 'linear',
+            repeatType: 'loop',
+          }}
+          style={{ width: `${totalWidth * 2}px` }}
+        >
+          {/* First set of texts */}
+          {texts.map((item, index) => (
+            <div
+              key={`text-${index}`}
+              className="shrink-0 flex items-center justify-center"
+              style={{ marginRight: `${spacing}px` }}
+            >
+              <span
+                className={cn('text-center whitespace-nowrap uppercase', item.textClass)}
+                style={{
+                  fontSize: item.fontSize || '4rem',
+                  fontWeight: item.fontWeight || 'bold',
+                  color: item.color || 'currentColor',
+                  ...item.textStyle,
+                }}
+              >
+                {item.text}
+              </span>
+            </div>
+          ))}
+
+          {/* Duplicate set for seamless loop */}
+          {texts.map((item, index) => (
+            <div
+              key={`text-${index}-duplicate`}
+              className="shrink-0 flex items-center justify-center"
+              style={{ marginRight: `${spacing}px` }}
+            >
+              <span
+                className={cn('text-center whitespace-nowrap uppercase', item.textClass)}
+                style={{
+                  fontSize: item.fontSize || '4rem',
+                  fontWeight: item.fontWeight || 'bold',
+                  color: item.color || 'currentColor',
+                  ...item.textStyle,
+                }}
+              >
+                {item.text}
+              </span>
+            </div>
+          ))}
+        </motion.div>
+      </div>
+      {showBottomDivider && <Separator gradient={true} className="border-b" />}
+    </>
+  )
+}
+
+// Block component that transforms props and renders the TextMarquee
+export const DDTextMarq: React.FC<TextMarqueeBlockProps> = (props) => {
+  const {
+    items = [],
+    speed = 20,
+    spacing = 48,
+    showTopDivider = false,
+    showBottomDivider = false,
+    containerClass = 'overflow-hidden py-8 bg-transparent',
+  } = props
+
+  // Transform items to match component expectations, using array index instead of id
+  const texts = items.map((item, index) => ({
+    text: item.text,
+    textClass: item.textClass,
+    textStyle: item.textStyle,
+    fontSize: item.fontSize,
+    fontWeight: item.fontWeight,
+    color: item.color,
+  }))
+
+  if (texts.length === 0) {
+    return null
+  }
+
+  return (
+    <TextMarqueeComponent
+      texts={texts}
+      speed={speed}
+      spacing={spacing}
+      showTopDivider={showTopDivider}
+      showBottomDivider={showBottomDivider}
+      containerClass={containerClass}
+    />
+  )
+}

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

@@ -0,0 +1,4 @@
+# DD-TextMarq
+
+Portable first-pass conversion of `TextMarquee` 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-TextMarq/config.ts

@@ -0,0 +1,237 @@
+import type { Block } from 'payload'
+
+export const DDTextMarq: Block = {
+  // Changed from TextMarqueeBlock to TextMarquee
+  slug: 'DD-TextMarq',
+  interfaceName: 'DDTextMarq',
+  labels: {
+    singular: 'Text Marquee',
+    plural: 'Text Marquees'
+  },
+  fields: [
+    {
+      admin: {
+        initCollapsed: true,
+        className: 'custom-css-class'
+      },
+      type: 'collapsible',
+      label: 'Block Settings',
+      fields: [
+        {
+          admin: {
+            initCollapsed: true,
+            className: 'custom-css-class'
+          },
+          type: 'collapsible',
+          label: 'Container Class',
+          fields: [
+            {
+              name: 'containerClass',
+              label: false,
+              type: 'text',
+              required: false,
+              admin: {
+                description:
+                  'Override the default container class. Default: `overflow-hidden py-8 bg-transparent`'
+              }
+            }
+          ]
+        },
+        {
+          admin: {
+            initCollapsed: true,
+            className: 'custom-group-class'
+          },
+          type: 'collapsible',
+          label: 'Marquee Settings',
+          fields: [
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'speed',
+                  type: 'number',
+                  label: 'Scroll Speed (seconds)',
+                  defaultValue: 20,
+                  required: true,
+                  admin: {
+                    description: 'Speed of the marquee in seconds.',
+                    width: '50%'
+                  }
+                },
+                {
+                  name: 'spacing',
+                  type: 'number',
+                  label: 'Spacing between items (px)',
+                  defaultValue: 48,
+                  required: true,
+                  admin: {
+                    description: 'Space between items in pixels.',
+                    width: '50%'
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          admin: {
+            initCollapsed: true,
+            className: 'custom-group-class'
+          },
+          type: 'collapsible',
+          label: 'Dividers',
+          fields: [
+            {
+              name: 'showTopDivider',
+              type: 'checkbox',
+              label: 'Show Top Divider',
+              defaultValue: false,
+              admin: {
+                description: 'Enable divider at the top of the marquee.'
+              }
+            },
+            {
+              name: 'showBottomDivider',
+              type: 'checkbox',
+              label: 'Show Bottom Divider',
+              defaultValue: false,
+              admin: {
+                description: 'Enable divider at the bottom of the marquee.'
+              }
+            }
+          ]
+        }
+      ]
+    },
+
+    {
+      name: 'items',
+      type: 'array',
+      labels: {
+        singular: 'Text',
+        plural: 'Texts'
+      },
+      label: 'Text Items',
+      required: true,
+      minRows: 1,
+      fields: [
+        {
+          name: 'text',
+          type: 'text',
+          required: true
+        },
+
+        {
+          admin: {
+            initCollapsed: true,
+            className: 'custom-css-class'
+          },
+          type: 'collapsible',
+          label: 'Additional Text Settings',
+          fields: [
+            {
+              admin: {
+                initCollapsed: true,
+                className: 'custom-css-class'
+              },
+              type: 'collapsible',
+              label: 'Text Class',
+              fields: [
+                {
+                  name: 'textClass',
+                  label: false,
+                  type: 'text',
+                  required: false,
+                  admin: {
+                    description:
+                      'Override the default class for the text. Use text-sm, text-md, text-lg, etc. for font size or other Tailwind classes.'
+                  }
+                }
+              ]
+            },
+            {
+              admin: {
+                initCollapsed: true,
+                className: 'custom-css-class'
+              },
+              type: 'collapsible',
+              label: 'Text Style Options (Experimental)',
+              fields: [
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'fontSize',
+                      type: 'text',
+                      label: 'Font Size',
+                      hidden: true,
+                      admin: {
+                        description: 'CSS font-size value (e.g., "16px", "1.2rem", "1.5em")',
+                        placeholder: '1rem',
+                        width: '33%'
+                      }
+                    },
+                    {
+                      name: 'fontWeight',
+                      type: 'select',
+                      label: 'Font Weight',
+                      options: [
+                        { label: 'Default', value: '' },
+                        { label: 'Normal', value: 'normal' },
+                        { label: 'Bold', value: 'bold' },
+                        { label: '100 - Thin', value: '100' },
+                        { label: '200 - Extra Light', value: '200' },
+                        { label: '300 - Light', value: '300' },
+                        { label: '400 - Normal', value: '400' },
+                        { label: '500 - Medium', value: '500' },
+                        { label: '600 - Semi Bold', value: '600' },
+                        { label: '700 - Bold', value: '700' },
+                        { label: '800 - Extra Bold', value: '800' },
+                        { label: '900 - Black', value: '900' }
+                      ],
+                      admin: {
+                        width: '33%'
+                      }
+                    },
+                    {
+                      name: 'color',
+                      type: 'text',
+                      label: 'Text Color',
+                      admin: {
+                        description: 'CSS color value (e.g., "#000000", "rgb(255,0,0)", "red")',
+                        placeholder: 'currentColor',
+                        width: '34%'
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              admin: {
+                initCollapsed: true,
+                className: 'custom-css-class'
+              },
+              type: 'collapsible',
+              label: 'Advanced Text Style (JSON)',
+              fields: [
+                {
+                  name: 'textStyle',
+                  label: false,
+                  type: 'json',
+                  required: false,
+                  admin: {
+                    description:
+                      'Advanced inline-style json format. Example: { "textShadow": "2px 2px 4px rgba(0,0,0,0.5)" }. This will override the above style options.',
+                    className: 'json-editor'
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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

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