blocks-dusted 0.1.12 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blocks-dusted",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "Manifest-driven CLI for installing reusable Payload CMS blocks.",
   "type": "module",
   "bin": {

package/src/installers/patchRenderBlocks.js

@@ -46,7 +46,7 @@ async function exists(path) {
 }
 
 function patchRenderBlocksContent(content, manifest) {
-  const exportName = manifest.exportName ?? manifest.name
+  const exportName = manifest.componentExportName ?? manifest.exportName ?? manifest.name
   if (content.includes(manifest.slug) || content.includes(`@/blocks/${manifest.name}/Component`)) {
     return { changed: false, reason: 'RenderBlocks already appears to contain this block' }
   }

package/src/registry/validateTemplateManifest.js

@@ -26,6 +26,7 @@ export function validateTemplateManifest(manifest) {
   if (manifest.sourceName !== undefined && typeof manifest.sourceName !== 'string') errors.push('sourceName must be a string when present')
   if (manifest.portableName !== undefined && typeof manifest.portableName !== 'string') errors.push('portableName must be a string when present')
   if (manifest.exportName !== undefined && typeof manifest.exportName !== 'string') errors.push('exportName must be a string when present')
+  if (manifest.componentExportName !== undefined && typeof manifest.componentExportName !== 'string') errors.push('componentExportName must be a string when present')
   if (manifest.interfaceName !== undefined && typeof manifest.interfaceName !== 'string') errors.push('interfaceName must be a string when present')
 
   for (const key of OPTIONAL_ARRAYS) {
@@ -67,4 +68,4 @@ export function validateTemplateManifest(manifest) {
 
   if (errors.length > 0) throw new Error(`Invalid template manifest:\n- ${errors.join('\n- ')}`)
   return manifest
-}
+}

package/templates/blocks/BannerDD790432/Component.tsx

@@ -0,0 +1,63 @@
+import { cn } from '@/utilities/ui'
+import React, { useId } from 'react'
+// import RichText from '@/components/RichText'
+
+const BANNER_BEFORE_CLS =
+  'relative z-0 ' +
+  "before:content-[''] before:absolute before:inset-0 before:z-[-1] " +
+  'before:bg-lines before:bg-[length:10px_10px] ' +
+  'before:bg-repeat before:opacity-100 before:pointer-events-none'
+
+export type BannerDD790432Props = {
+  className?: string
+  wrapperClassName?: string
+  content?: unknown
+  style?: 'info' | 'warning' | 'error' | 'success' | null
+}
+
+export const BannerDD790432: React.FC<BannerDD790432Props> = ({
+  className,
+  wrapperClassName,
+  content,
+  style,
+}) => {
+  const reactId = useId()
+  const richtextKey = `banner-richtext-${reactId.replace(/:/g, '')}`
+
+  return (
+    <div className={cn('mx-auto my-8 w-full banner_container', className)}>
+      <div
+        className={cn(
+          wrapperClassName,
+          'border py-3 pl-0 pr-3 flex items-center rounded shadow-2xl banner_content',
+          BANNER_BEFORE_CLS,
+          {
+            'banner-info border-border bg-card text-(--black) [box-shadow:inset_0_0_2px_0px_var(--border),var(--shadow-xl)] [&_blockquote]:border-s-border!':
+              style === 'info',
+            'banner-error border-(--error-border) bg-error text-(--white) [box-shadow:inset_0_0_2px_0px_var(--error),var(--shadow-xl)] [&_blockquote]:border-s-(--error-border)!':
+              style === 'error',
+            'banner-success border-(--success-border) bg-success text-(--white) [box-shadow:inset_0_0_2px_0px_var(--success),var(--shadow-xl)] [&_blockquote]:border-s-(--success-border)!':
+              style === 'success',
+            'banner-warning border-(--warning-border) bg-warning text-(--white) [box-shadow:inset_0_0_2px_0px_var(--warning),var(--shadow-xl)] [&_blockquote]:border-s-(--warning-border)!':
+              style === 'warning',
+          },
+        )}
+      >
+        {/* TODO: Reconnect this project's RichText renderer for `content`. */}
+        {content ? (
+          // Replace when RichText is configured.
+          <div className="banner_richtext">Rich text content is configured for this banner.</div>
+        ) : // Adjust RichText props if required.
+        // <RichText
+        //   data={content}
+        //   data-richtext-key={richtextKey}
+        //   className="banner_richtext"
+        //   enableGutter={false}
+        //   enableProse={true}
+        // />
+        null}
+      </div>
+    </div>
+  )
+}
+

package/templates/blocks/BannerDD790432/config.ts

@@ -0,0 +1,54 @@
+import type { Block } from 'payload'
+
+export const BannerDD790432: Block = {
+  slug: 'banner-dd-790432',
+  interfaceName: 'BannerDD790432',
+  fields: [
+    {
+      name: 'style',
+      type: 'select',
+      defaultValue: 'info',
+      options: [
+        { label: 'Info', value: 'info' },
+        { label: 'Warning', value: 'warning' },
+        { label: 'Error', value: 'error' },
+        { label: 'Success', value: 'success' },
+      ],
+      required: true,
+    },
+    {
+      name: 'content',
+      type: 'richText',
+      label: false,
+      required: true,
+      admin: {
+        description:
+          'TODO: Add this project\'s RichText renderer and custom Lexical features manually after installation.',
+      },
+    },
+    {
+      name: 'useCustomClasses',
+      type: 'checkbox',
+      label: 'Override default classes',
+      defaultValue: false,
+    },
+    {
+      name: 'className',
+      type: 'text',
+      label: 'Banner container class',
+      admin: {
+        description: 'banner_container class',
+        condition: (_, siblingData) => Boolean(siblingData.useCustomClasses),
+      },
+    },
+    {
+      name: 'wrapperClassName',
+      type: 'text',
+      label: 'Banner content class',
+      admin: {
+        description: 'banner_content class',
+        condition: (_, siblingData) => Boolean(siblingData.useCustomClasses),
+      },
+    },
+  ],
+}

package/templates/blocks/BannerDD790432/manifest.json

@@ -0,0 +1,80 @@
+{
+  "type": "block",
+  "name": "BannerDD790432",
+  "label": "Banner DD 790432",
+  "sourceName": "BannerDD790432",
+  "portableName": "BannerDD790432",
+  "slug": "banner-dd-790432",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/Dusted-Payload-Blocks",
+    "originalPath": "CLI-TestGround/dusted-blocks-demo/src/blocks/BannerDD790432",
+    "originalSlug": "banner-dd-790432",
+    "originalConfigExport": "BannerDD790432",
+    "originalComponentExport": "BannerDD790432",
+    "originalInterfaceName": "BannerDD790432"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/BannerDD790432/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/BannerDD790432/config.ts"
+    }
+  ],
+  "dependencies": [],
+  "sharedFiles": [],
+  "requiredProjectFiles": [
+    {
+      "path": "src/utilities/ui.ts",
+      "reason": "Component imports cn from @/utilities/ui."
+    }
+  ],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register BannerDD790432 in Pages/Posts block arrays if automatic registration was skipped.",
+    "Register banner-dd-790432 in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes.",
+    "Run payload generate:importmap if admin/component imports changed."
+  ],
+  "manualSteps": [
+    "Register BannerDD790432 in Pages/Posts block arrays if automatic registration was skipped.",
+    "Register banner-dd-790432 in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes.",
+    "Run payload generate:importmap if admin/component imports changed."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can register BannerDD790432 from @/blocks/BannerDD790432/config."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register banner-dd-790432 with component export BannerDD790432."
+    }
+  },
+  "notes": [
+    "Promoted from the verified Dusted Blocks demo implementation.",
+    "Installer preserves existing destination files and reports project requirements before writing."
+  ],
+  "exportName": "BannerDD790432",
+  "componentExportName": "BannerDD790432",
+  "interfaceName": "BannerDD790432"
+}

package/templates/blocks/Button47/Component.tsx

@@ -0,0 +1,124 @@
+'use client'
+
+import Button from '@mui/material/Button'
+import { icons } from 'lucide-react'
+import { motion, useReducedMotion } from 'motion/react'
+import Link from 'next/link'
+import type { Button47Block } from '@/payload-types'
+import { cn } from '@/utilities/ui'
+import { resolveButton47Href } from './link'
+import styles from './styles.module.scss'
+
+const colors = {
+  contained: {
+    background: '#4338ca',
+    hover: '#3730a3',
+    foreground: '#d9f99d',
+    border: '#4338ca',
+    frame: 'var(--button47-frame)',
+  },
+  outlined: {
+    background: '#a3e635',
+    hover: '#bef264',
+    foreground: '#1e1b4b',
+    border: '#3f6212',
+    frame: 'var(--button47-frame)',
+  },
+  text: {
+    background: 'var(--button47-ghost-bg)',
+    hover: 'var(--button47-ghost-hover)',
+    foreground: 'var(--button47-ghost-text)',
+    border: 'var(--button47-frame)',
+    frame: 'transparent',
+  },
+}
+export function Button47({ buttons, position = 'center', customClassName }: Button47Block) {
+  const reduceMotion = useReducedMotion()
+  if (!buttons?.length) return null
+
+  return (
+    <div
+      className={cn(styles.root, customClassName)}
+      style={{
+        justifyContent:
+          position === 'left' ? 'flex-start' : position === 'right' ? 'flex-end' : 'center',
+      }}
+    >
+      {buttons.map((button, index) => {
+        const href = resolveButton47Href(button.link)
+        if (!href || !button.link.label?.trim()) return null
+        const variant = button.variant || 'contained'
+        const color = colors[variant]
+
+        const Icon = button.icon ? icons[button.icon as keyof typeof icons] : undefined
+        const icon = Icon ? <Icon size={18} aria-hidden="true" focusable="false" /> : undefined
+
+        return (
+          <motion.div
+            key={button.id || index}
+            className={styles.focusFrame}
+            initial={reduceMotion ? false : { opacity: 0, y: 16 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: reduceMotion ? 0 : 0.3, delay: reduceMotion ? 0 : index * 0.1 }}
+            viewport={{ once: false, amount: 0.2 }}
+          >
+            <div
+              className={styles.bevel}
+              style={{ backgroundColor: '#ffffffe3', borderColor: '#cfcfcfa8' }}
+            >
+              <Button
+                component={Link}
+                href={href}
+                variant={variant}
+                target={button.link.newTab ? '_blank' : undefined}
+                rel={button.link.newTab ? 'noopener noreferrer' : undefined}
+                startIcon={button.iconPosition !== 'after' ? icon : undefined}
+                endIcon={button.iconPosition === 'after' ? icon : undefined}
+                className={cn(styles.button, 'group relative overflow-hidden')}
+                sx={{
+                  minWidth: 160,
+                  minHeight: 44,
+                  maxWidth: '100%',
+                  textTransform: 'none',
+                  fontSize: 15,
+                  fontFamily: 'inherit',
+                  padding: '8px 16px',
+                  border: '0px',
+                  borderRadius: '4px',
+                  lineHeight: 1.4,
+                  color: color.foreground,
+                  backgroundColor: color.background,
+                  borderColor: color.border,
+                  boxShadow: 'none',
+                  '&:hover': {
+                    backgroundColor: color.hover,
+                    border: '0px',
+                    borderColor: color.border,
+                    boxShadow: '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+                  },
+                  '&:active': { backgroundColor: color.background, border: '0px' },
+                }}
+              >
+                <motion.span
+                  initial={reduceMotion ? false : { opacity: 0, y: -8 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  transition={{ duration: reduceMotion ? 0 : 0.3 }}
+                  viewport={{ once: false, amount: 0.2 }}
+                >
+                  {button.link.label}
+                </motion.span>
+                <span
+                  aria-hidden="true"
+                  className="pointer-events-none absolute inset-0 flex size-full justify-center transition-transform [transform:skewX(-45deg)_translateX(-100%)] group-hover:duration-1000 group-hover:[transform:skewX(-45deg)_translateX(100%)] motion-reduce:hidden"
+                  style={{ width: '200%' }}
+                >
+                  <span className="relative h-full w-1/3 max-w-64 scale-200 bg-gradient-to-r from-transparent via-white/15 to-transparent" />
+                </span>
+              </Button>
+            </div>
+          </motion.div>
+        )
+      })}
+    </div>
+  )
+}

package/templates/blocks/Button47/config.ts

@@ -0,0 +1,75 @@
+import type { Block, Field, TextFieldSingleValidation } from 'payload'
+import { link } from '@/fields/link'
+import { iconPicker } from '@/fields/lucide-icon-picker/field'
+import { isSupportedButtonURL } from './link'
+
+const validateURL: TextFieldSingleValidation = (value, { siblingData }) =>
+  (siblingData as { type?: string })?.type !== 'custom' ||
+  isSupportedButtonURL(value) ||
+  'Enter an https:// or http:// URL, /path, #anchor, mailto: or tel: link.'
+
+// Apply URL validation only to this block's copy of the shared link field.
+const validateCustomURL = (field: Field): Field => {
+  if ('name' in field && field.name === 'url' && field.type === 'text' && !field.hasMany) {
+    return {
+      ...field,
+      validate: validateURL,
+    }
+  }
+  if ('fields' in field) return { ...field, fields: field.fields.map(validateCustomURL) }
+  return field
+}
+
+export const Button47: Block = {
+  slug: 'button47',
+  dbName: 'button47',
+  interfaceName: 'Button47Block',
+  labels: { singular: 'Button47', plural: 'Button47 blocks' },
+  fields: [
+    {
+      name: 'position',
+      label: 'Button Alignment',
+      type: 'select',
+      required: true,
+      defaultValue: 'center',
+      options: [
+        { label: 'Left', value: 'left' },
+        { label: 'Center', value: 'center' },
+        { label: 'Right', value: 'right' },
+      ],
+    },
+    { name: 'customClassName', type: 'text', label: 'Wrapper CSS Class' },
+    {
+      name: 'buttons',
+      type: 'array',
+      required: true,
+      minRows: 1,
+      fields: [
+        validateCustomURL(link({ appearances: false })),
+        {
+          name: 'variant',
+          label: 'Button Style',
+          type: 'select',
+          required: true,
+          defaultValue: 'contained',
+          options: [
+            { label: 'Primary', value: 'contained' },
+            { label: 'Secondary', value: 'outlined' },
+            { label: 'Ghost', value: 'text' },
+          ],
+        },
+        iconPicker({ name: 'icon', description: 'Optional icon beside the button label.' }),
+        {
+          name: 'iconPosition',
+          type: 'select',
+          defaultValue: 'before',
+          options: [
+            { label: 'Before Label', value: 'before' },
+            { label: 'After Label', value: 'after' },
+          ],
+          admin: { condition: (_, siblingData) => Boolean(siblingData?.icon) },
+        },
+      ],
+    },
+  ],
+}

package/templates/blocks/Button47/link.ts

@@ -0,0 +1,22 @@
+import type { Button47Block } from '@/payload-types'
+
+export const isSupportedButtonURL = (value: unknown): value is string => {
+  if (typeof value !== 'string' || !value.trim()) return false
+  const url = value.trim()
+  if (/[\u0000-\u0020\u007f\\]/.test(url)) return false
+  if (url.startsWith('#') || (url.startsWith('/') && !url.startsWith('//'))) return true
+  try {
+    return ['https:', 'http:', 'mailto:', 'tel:'].includes(new URL(url).protocol)
+  } catch {
+    return false
+  }
+}
+
+export const resolveButton47Href = (link: Button47Block['buttons'][number]['link']) => {
+  if (link.type === 'reference') {
+    const page = link.reference?.value
+    if (!page || typeof page !== 'object' || !page.slug) return null
+    return page.slug === 'home' ? '/' : `/${page.slug}`
+  }
+  return link.type === 'custom' && isSupportedButtonURL(link.url) ? link.url.trim() : null
+}

package/templates/blocks/Button47/manifest.json

@@ -0,0 +1,105 @@
+{
+  "type": "block",
+  "name": "Button47",
+  "label": "Button 47",
+  "sourceName": "Button47",
+  "portableName": "Button47",
+  "slug": "button47",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/Dusted-Payload-Blocks",
+    "originalPath": "CLI-TestGround/dusted-blocks-demo/src/blocks/Button47",
+    "originalSlug": "button47",
+    "originalConfigExport": "Button47",
+    "originalComponentExport": "Button47",
+    "originalInterfaceName": "Button47Block"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/Button47/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/Button47/config.ts"
+    },
+    {
+      "from": "link.ts",
+      "to": "src/blocks/Button47/link.ts"
+    },
+    {
+      "from": "styles.module.scss",
+      "to": "src/blocks/Button47/styles.module.scss"
+    }
+  ],
+  "dependencies": [
+    "@mui/material",
+    "lucide-react",
+    "motion",
+    "sass"
+  ],
+  "sharedFiles": [],
+  "requiredProjectFiles": [
+    {
+      "path": "src/payload-types.ts",
+      "reason": "Component and link resolver use generated Button47 types."
+    },
+    {
+      "path": "src/utilities/ui.ts",
+      "reason": "Component imports cn from @/utilities/ui."
+    },
+    {
+      "path": "src/fields/link.ts",
+      "reason": "Payload config uses the shared link field."
+    },
+    {
+      "path": "src/fields/lucide-icon-picker/field.ts",
+      "reason": "Payload config uses the Lucide icon picker field."
+    }
+  ],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register Button47 in Pages/Posts block arrays if automatic registration was skipped.",
+    "Register button47 in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes.",
+    "Run payload generate:importmap if admin/component imports changed."
+  ],
+  "manualSteps": [
+    "Register Button47 in Pages/Posts block arrays if automatic registration was skipped.",
+    "Register button47 in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes.",
+    "Run payload generate:importmap if admin/component imports changed."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can register Button47 from @/blocks/Button47/config."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register button47 with component export Button47."
+    }
+  },
+  "notes": [
+    "Promoted from the verified Dusted Blocks demo implementation.",
+    "Installer preserves existing destination files and reports project requirements before writing."
+  ],
+  "exportName": "Button47",
+  "componentExportName": "Button47",
+  "interfaceName": "Button47Block"
+}

package/templates/blocks/Button47/styles.module.scss

@@ -0,0 +1,75 @@
+.root {
+  --button47-frame: #a3e635;
+  --button47-ghost-bg: #1e1b4b;
+  --button47-ghost-hover: #312e81;
+  --button47-ghost-text: #d9f99d;
+  --button47-focus: #a3e635;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  font-family: inherit;
+}
+:global([data-theme='light']) .root {
+  --button47-frame: #4338ca;
+  --button47-focus: #4338ca;
+  --button47-ghost-bg: #eef2ff;
+  --button47-ghost-hover: #e0e7ff;
+  --button47-ghost-text: #3730a3;
+}
+
+.focusFrame {
+  max-width: 100%;
+  min-width: 0;
+  border-radius: 4px;
+  corner-shape: squircle;
+  &:has(a:focus-visible) {
+    outline: 3px solid var(--button47-focus);
+    outline-offset: 4px;
+  }
+}
+.bevel,
+.button {
+  clip-path: polygon(
+    0 0,
+    calc(100% - 16px) 0,
+    100% 16px,
+    100% 100%,
+    16px 100%,
+    0 calc(100% - 16px)
+  );
+  transition:
+    background-color 0.3s,
+    border-color 0.3s,
+    clip-path 0.3s,
+    box-shadow 0.3s;
+}
+.bevel {
+  padding: 0;
+  border: 1px outset;
+  border-radius: 4px;
+  corner-shape: squircle;
+  &:hover {
+    clip-path: polygon(
+      0 0,
+      calc(100% - 14px) 0,
+      100% 14px,
+      100% 100%,
+      14px 100%,
+      0 calc(100% - 14px)
+    );
+  }
+}
+.button {
+  border-radius: 4px;
+  corner-shape: squircle;
+  overflow-wrap: anywhere;
+  text-decoration: none !important;
+}
+@media (prefers-reduced-motion: reduce) {
+  .root *,
+  .root *::before,
+  .root *::after {
+    transition: none !important;
+    animation: none !important;
+  }
+}