blocks-dusted 0.1.12 → 0.1.13

package/templates/blocks/DD-CardsWithVariantV3/ElectricBorder/styles.ts

@@ -0,0 +1,87 @@
+export const electricBorderStyles = String.raw`
+.electric-border {
+  --electric-light-color: oklch(from var(--electric-border-color) l c h);
+  --eb-border-width: 2px;
+  position: relative;
+  border-radius: inherit;
+  overflow: visible;
+  isolation: isolate;
+  align-self: start;
+  height: fit-content;
+  width: 100%;
+    will-change: transform, opacity;
+}
+
+.eb-svg {
+  position: fixed;
+  left: -10000px;
+  top: -10000px;
+  width: 10px;
+  height: 10px;
+  opacity: 0.001;
+  pointer-events: none;
+    will-change: transform, opacity;
+}
+
+.eb-content {
+  position: relative;
+  border-radius: inherit;
+  z-index: 1;
+    will-change: transform, opacity;
+}
+
+.electric-border .simple-card-3 {
+  margin-block: 0;
+}
+
+.eb-layers {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  z-index: 0;
+  padding: var(--eb-border-width);
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+    will-change: transform, opacity;
+}
+
+.eb-stroke,
+.eb-glow-1,
+.eb-glow-2,
+.eb-overlay-1,
+.eb-overlay-2,
+.eb-background-glow {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  box-sizing: border-box;
+    will-change: transform, opacity;
+}
+
+.eb-stroke {
+  border: var(--eb-border-width) solid var(--electric-border-color);
+}
+
+.eb-glow-1 {
+  border: var(--eb-border-width) solid oklch(from var(--electric-border-color) l c h/0.6);
+  opacity: 0.5;
+  filter: blur(calc(0.5px + var(--eb-border-width) * 0.25));
+}
+
+.eb-glow-2 {
+  border: var(--eb-border-width) solid var(--electric-light-color);
+  opacity: 0.5;
+  filter: blur(calc(2px + var(--eb-border-width) * 0.5));
+}
+
+.eb-background-glow {
+  z-index: -1;
+  transform: scale(1.08);
+  filter: blur(32px);
+  opacity: 0.3;
+  background: linear-gradient(-30deg, var(--electric-light-color), transparent, var(--electric-border-color));
+}
+`

package/templates/blocks/DD-CardsWithVariantV3/ElectricBorder/useInjectStyle.ts

@@ -0,0 +1,39 @@
+'use client'
+
+import { useEffect } from 'react'
+
+const styleReferenceCounts = new Map<string, number>()
+
+export const useInjectStyle = (css: string, id: string) => {
+  useEffect(() => {
+    if (!css || !id || typeof document === 'undefined') return
+
+    const existingCount = styleReferenceCounts.get(id) ?? 0
+    styleReferenceCounts.set(id, existingCount + 1)
+
+    let styleElement = document.getElementById(id) as HTMLStyleElement | null
+
+    if (!styleElement) {
+      styleElement = document.createElement('style')
+      styleElement.id = id
+      styleElement.setAttribute('data-injected-style', id)
+      document.head.appendChild(styleElement)
+    }
+
+    if (styleElement.textContent !== css) {
+      styleElement.textContent = css
+    }
+
+    return () => {
+      const nextCount = (styleReferenceCounts.get(id) ?? 1) - 1
+
+      if (nextCount <= 0) {
+        styleReferenceCounts.delete(id)
+        document.getElementById(id)?.remove()
+        return
+      }
+
+      styleReferenceCounts.set(id, nextCount)
+    }
+  }, [css, id])
+}

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

@@ -0,0 +1,326 @@
+import type { Block } from 'payload'
+import { defaultLexical } from '@/fields/defaultLexical'
+
+export const DDCardsWithVariantV3: Block = {
+  slug: 'cardsWithVariantV3',
+  dbName: 'cwv3',
+  interfaceName: 'CardsWithVariantV3Block',
+  labels: {
+    singular: 'Card Variants Grid',
+    plural: 'Card Variants Grids'
+  },
+  fields: [
+    // Container & Grid Settings
+    {
+      admin: {
+        initCollapsed: true,
+        className: 'custom-group-field'
+      },
+      type: 'collapsible',
+      label: 'Layout Settings',
+      fields: [
+        {
+          name: 'containerClass',
+          type: 'text',
+          label: 'Container Classes',
+          admin: {
+            description: 'Additional Tailwind classes for the main container',
+            placeholder: 'px-4 py-8 bg-gray-50'
+          }
+        },
+        {
+          name: 'gridClass',
+          type: 'text',
+          label: 'Grid Layout Classes',
+          defaultValue: 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4',
+          admin: {
+            description: 'Grid layout classes for card arrangement',
+            placeholder: 'grid grid-cols-1 md:grid-cols-2 gap-6'
+          }
+        }
+      ]
+    },
+
+    // Cards Array
+    {
+      name: 'cards',
+      label: 'Cards Collection',
+      type: 'array',
+      minRows: 1,
+      maxRows: 12, // Reasonable limit
+      labels: {
+        singular: 'Card',
+        plural: 'Cards'
+      },
+      fields: [
+        // Card Variant Selection
+        {
+          name: 'variant',
+          type: 'select',
+          required: true,
+          options: [
+            { label: 'Simple Card (Transparent)', value: 'SimpleCard_V1' },
+            { label: 'Card with Avatar Support', value: 'SimpleCard_V2' },
+            { label: 'Dashed Border with Icons', value: 'SimpleCard_V3' },
+            { label: 'Drop Shadow Card', value: 'SimpleCard_V4' },
+            { label: 'Glassmorphism Card', value: 'SimpleCard_V5' },
+            { label: 'Accent Border Card', value: 'SimpleCard_V6' },
+            { label: '3D Grid Card', value: 'SimpleCard_V7' }
+          ],
+          defaultValue: 'SimpleCard_V1',
+          admin: {
+            description: 'Choose the visual style for this card'
+          }
+        },
+
+        // Rich Text Content
+        {
+          name: 'content',
+          label: 'Card Content',
+          type: 'richText',
+          required: true,
+          editor: defaultLexical
+        },
+
+        // Avatar Field (for V2 variant)
+        {
+          name: 'avatar',
+          type: 'upload',
+          relationTo: 'media',
+          label: 'Avatar Image',
+          admin: {
+            description: 'Optional avatar image (used in Card V2 variant)',
+            condition: (data, siblingData) => siblingData?.variant === 'SimpleCard_V2'
+          }
+        },
+        {
+          name: 'avatarPriority',
+          type: 'checkbox',
+          label: 'Avatar Priority Loading',
+          defaultValue: false,
+          admin: {
+            description: 'Enable priority loading for avatar image',
+            condition: (data, siblingData) =>
+              siblingData?.variant === 'SimpleCard_V2' && siblingData?.avatar
+          }
+        },
+        {
+          name: 'avatarImgClass',
+          type: 'text',
+          label: 'Avatar Image Classes',
+          defaultValue: 'object-contain',
+          admin: {
+            description: 'Tailwind classes for avatar image (e.g., object-cover, object-contain)',
+            placeholder: 'object-cover rounded-full',
+            condition: (data, siblingData) =>
+              siblingData?.variant === 'SimpleCard_V2' && siblingData?.avatar
+          }
+        },
+
+        // Electric Border Settings
+        {
+          admin: {
+            initCollapsed: true,
+            className: 'electric-border-field'
+          },
+          type: 'collapsible',
+          label: 'Electric Border Effect (Optional)',
+          fields: [
+            {
+              name: 'electrifyBorder',
+              type: 'checkbox',
+              label: 'Enable Electric Border',
+              defaultValue: false,
+              admin: {
+                description: 'Add an animated electric border effect to this card'
+              }
+            },
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'electricColor',
+                  type: 'text',
+                  label: 'Electric Color',
+                  defaultValue: '#7df9ff',
+                  admin: {
+                    width: '50%',
+                    description: 'Color of the electric border effect (hex, rgb, or named color)',
+                    condition: (data, siblingData) => Boolean(siblingData?.electrifyBorder)
+                  }
+                },
+                {
+                  name: 'electricSpeed',
+                  type: 'number',
+                  label: 'Animation Speed',
+                  defaultValue: 1,
+                  min: 0.1,
+                  max: 5,
+                  admin: {
+                    width: '50%',
+                    description: 'Speed of the electric animation (0.1 - 5.0)',
+                    step: 0.1,
+                    condition: (data, siblingData) => Boolean(siblingData?.electrifyBorder)
+                  }
+                }
+              ]
+            },
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'electricChaos',
+                  type: 'number',
+                  label: 'Electric Chaos',
+                  defaultValue: 0.5,
+                  min: 0,
+                  max: 2,
+                  admin: {
+                    width: '50%',
+                    description: 'Intensity of the electric distortion (0 - 2.0)',
+                    step: 0.1,
+                    condition: (data, siblingData) => Boolean(siblingData?.electrifyBorder)
+                  }
+                },
+                {
+                  name: 'electricThickness',
+                  type: 'number',
+                  label: 'Border Thickness',
+                  defaultValue: 2,
+                  min: 1,
+                  max: 10,
+                  admin: {
+                    width: '50%',
+                    description: 'Thickness of the electric border in pixels (1 - 10)',
+                    condition: (data, siblingData) => Boolean(siblingData?.electrifyBorder)
+                  }
+                }
+              ]
+            }
+          ]
+        },
+
+        // Custom Styling
+        {
+          admin: {
+            initCollapsed: true,
+            className: 'custom-styling-field'
+          },
+          type: 'collapsible',
+          label: 'Custom Styling (Optional)',
+          fields: [
+            {
+              name: 'servCardContClass',
+              type: 'text',
+              label: 'Content Classes',
+              admin: {
+                description: 'Additional Tailwind classes for the card content area',
+                placeholder: 'text-center text-white p-8'
+              }
+            },
+            {
+              name: 'simpleCard1Class',
+              type: 'text',
+              label: 'Simple Card V1 Custom Classes',
+              admin: {
+                description: 'Override default classes for SimpleCard_V1 parent container',
+                placeholder: 'bg-blue-500 border-2',
+                condition: (data, siblingData) => siblingData?.variant === 'SimpleCard_V1'
+              }
+            },
+            {
+              name: 'simpleCard2Class',
+              type: 'text',
+              label: 'Simple Card V2 Custom Classes',
+              admin: {
+                description: 'Override default classes for SimpleCard_V2 parent container',
+                placeholder: 'bg-gradient-to-r from-blue-500 to-purple-600',
+                condition: (data, siblingData) => siblingData?.variant === 'SimpleCard_V2'
+              }
+            },
+            {
+              name: 'simpleCard3Class',
+              type: 'text',
+              label: 'Simple Card V3 Custom Classes',
+              admin: {
+                description: 'Override default classes for SimpleCard_V3 (dashed border card)',
+                placeholder: 'border-lime-500 bg-gray-900',
+                condition: (data, siblingData) => siblingData?.variant === 'SimpleCard_V3'
+              }
+            },
+            {
+              name: 'simpleCard4Class',
+              type: 'text',
+              label: 'Simple Card V4 Custom Classes',
+              admin: {
+                description: 'Override default classes for SimpleCard_V4 (drop shadow card)',
+                placeholder: 'shadow-blue-500 bg-white',
+                condition: (data, siblingData) => siblingData?.variant === 'SimpleCard_V4'
+              }
+            },
+            {
+              name: 'simpleCard5Class',
+              type: 'text',
+              label: 'Simple Card V5 Custom Classes',
+              admin: {
+                description: 'Override default classes for SimpleCard_V5 (glassmorphism card)',
+                placeholder: 'bg-blue-500/30 backdrop-blur-xl',
+                condition: (data, siblingData) => siblingData?.variant === 'SimpleCard_V5'
+              }
+            },
+            {
+              name: 'simpleCard6Class',
+              type: 'text',
+              label: 'Simple Card V6 Custom Classes',
+              admin: {
+                description: 'Override default classes for SimpleCard_V6 (accent border card)',
+                placeholder: 'border-purple-500 bg-gradient-to-br',
+                condition: (data, siblingData) => siblingData?.variant === 'SimpleCard_V6'
+              }
+            },
+            {
+              name: 'simpleCard7Class',
+              type: 'text',
+              label: 'Simple Card V7 Custom Classes',
+              admin: {
+                description: 'Override default classes for SimpleCard_V7 (3D grid card)',
+                placeholder: 'shadow-2xl border-4',
+                condition: (data, siblingData) => siblingData?.variant === 'SimpleCard_V7'
+              }
+            },
+            // Custom CSS
+            {
+              name: 'enableCustomCSS',
+              type: 'checkbox',
+              label: 'Enable Custom CSS',
+              defaultValue: false,
+              admin: {
+                description: 'Enable custom CSS to style card variants and their nested elements'
+              }
+            },
+            {
+              name: 'customCSS',
+              type: 'code',
+              label: 'Custom CSS',
+              admin: {
+                language: 'css',
+                description:
+                  'Write custom CSS to target card variants (e.g., .simple-card-1, .simple-card-2-div1). Tip: use ":host" to scope styles to this CardWithVariants instance (e.g., ":host .simple-card-2 { ... }"). Also, the selected variant custom class generates a helper wrapper class with "_card" suffix (e.g., "flt-serv-cards" -> ".flt-serv-cards_card").',
+                condition: (data, siblingData) => Boolean(siblingData?.enableCustomCSS)
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
+
+
+// Keeps the existing read-only backend configuration preview available.
+export const sourcePreview = {
+  file: 'source-config.ts.txt',
+  exportName: 'CardWithVariants',
+  slug: 'cards-with-variant-v3',
+  label: 'Cards with Variant — Version 3',
+}

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

@@ -0,0 +1,110 @@
+{
+  "type": "block",
+  "name": "DD-CardsWithVariantV3",
+  "label": "Cards With Variant V3",
+  "sourceName": "DD-CardsWithVariantV3",
+  "portableName": "DD-CardsWithVariantV3",
+  "slug": "cardsWithVariantV3",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/Dusted-Payload-Blocks",
+    "originalPath": "CLI-TestGround/dusted-blocks-demo/src/blocks/DD-CardsWithVariantV3",
+    "originalSlug": "cardsWithVariantV3",
+    "originalConfigExport": "DDCardsWithVariantV3",
+    "originalComponentExport": "CardWithVariants",
+    "originalInterfaceName": "CardsWithVariantV3Block"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-CardsWithVariantV3/Component.tsx"
+    },
+    {
+      "from": "ElectricBorder/index.tsx",
+      "to": "src/blocks/DD-CardsWithVariantV3/ElectricBorder/index.tsx"
+    },
+    {
+      "from": "ElectricBorder/styles.ts",
+      "to": "src/blocks/DD-CardsWithVariantV3/ElectricBorder/styles.ts"
+    },
+    {
+      "from": "ElectricBorder/useInjectStyle.ts",
+      "to": "src/blocks/DD-CardsWithVariantV3/ElectricBorder/useInjectStyle.ts"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-CardsWithVariantV3/config.ts"
+    }
+  ],
+  "dependencies": [
+    "framer-motion"
+  ],
+  "sharedFiles": [],
+  "requiredProjectFiles": [
+    {
+      "path": "src/fields/defaultLexical.ts",
+      "reason": "Payload config uses the project Lexical editor configuration."
+    },
+    {
+      "path": "src/components/ui/anims/fade.tsx",
+      "reason": "Component renders TextFade."
+    },
+    {
+      "path": "src/components/RichText/index.tsx",
+      "reason": "Component renders Payload rich text."
+    },
+    {
+      "path": "src/components/Media/index.tsx",
+      "reason": "Component renders Payload media."
+    },
+    {
+      "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 DDCardsWithVariantV3 in Pages/Posts block arrays if automatic registration was skipped.",
+    "Register cardsWithVariantV3 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 DDCardsWithVariantV3 in Pages/Posts block arrays if automatic registration was skipped.",
+    "Register cardsWithVariantV3 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 DDCardsWithVariantV3 from @/blocks/DD-CardsWithVariantV3/config."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register cardsWithVariantV3 with component export CardWithVariants."
+    }
+  },
+  "notes": [
+    "Promoted from the verified Dusted Blocks demo implementation.",
+    "Installer preserves existing destination files and reports project requirements before writing."
+  ],
+  "exportName": "DDCardsWithVariantV3",
+  "componentExportName": "CardWithVariants",
+  "interfaceName": "CardsWithVariantV3Block"
+}