blocks-dusted 0.1.12 → 0.1.13

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

@@ -0,0 +1,50 @@
+'use client'
+
+import dynamic from 'next/dynamic'
+import { Suspense } from 'react'
+
+import { cn } from '@/utilities/ui'
+
+const ThreeScene = dynamic(() => import('./ThreeScene'), {
+  ssr: false,
+})
+
+function LoadingDots() {
+  return (
+    <div className="absolute inset-0 flex items-center justify-center gap-2">
+      {[0, 1, 2].map((i) => (
+        <span
+          key={i}
+          className="w-2 h-2 rounded-full bg-indigo-500 dark:bg-indigo-300 animate-bounce"
+          style={{ animationDelay: `${i * 0.15}s` }}
+        />
+      ))}
+    </div>
+  )
+}
+
+export type DDHeroPlasProps = {
+  blockType?: 'DD-HeroPlas'
+  blockName?: string | null
+  containerClass?: string
+}
+
+export function DDHeroPlas(props: DDHeroPlasProps) {
+  const { containerClass } = props
+
+  return (
+    <div
+      suppressHydrationWarning
+      className={cn(
+        'relative h-[520px] w-full overflow-hidden bg-stone-100 text-stone-900 dark:bg-stone-950 dark:text-stone-100',
+        containerClass,
+      )}
+    >
+      <Suspense fallback={<LoadingDots />}>
+        <ThreeScene />
+      </Suspense>
+    </div>
+  )
+}
+
+export default DDHeroPlas

package/templates/blocks/DD-HeroPlas/ThreeScene.tsx

@@ -0,0 +1,109 @@
+'use client'
+
+import { useState, useRef, type RefObject } from 'react'
+import { Canvas, useFrame } from '@react-three/fiber'
+import { BakeShadows, SoftShadows, useCursor } from '@react-three/drei'
+
+export default function ThreeScene({
+  eventSource,
+}: {
+  eventSource?: HTMLElement | RefObject<HTMLElement> | null
+}) {
+  return (
+    <div className="relative h-full w-full">
+      <Canvas
+        shadows
+        dpr={1.5}
+        camera={{ position: [-10, 10, 2], fov: 45 }}
+        // Allow the scene to stay interactive even when the canvas is visually "behind" other content.
+        // Pointer events are captured from `eventSource` (hero container), but the canvas itself
+        // does not block clicks on buttons/links.
+        eventSource={eventSource ?? undefined}
+        eventPrefix="client"
+        style={{ position: 'absolute', inset: 0, pointerEvents: eventSource ? 'none' : 'auto' }}
+      >
+        {/* Softer PCSS-style shadows (client-side) */}
+        <SoftShadows size={25} samples={12} focus={0.4} />
+        <Stage />
+        {Array.from({ length: 12 }, (_, i) => (
+          <Stair
+            key={i}
+            name={'stair-' + (i + 1)}
+            rotation={[-Math.PI / 2, 0, i / Math.PI / 2]}
+            position={[2 - Math.sin(i / 5) * 5, i * 0.5, 2 - Math.cos(i / 5) * 5]}
+            defaultColor={[5, 8, 9].includes(i) ? '#4f46e5' : i === 6 ? '#818cf8' : null}
+          />
+        ))}
+      </Canvas>
+    </div>
+  )
+}
+
+function Stair({
+  defaultColor = null,
+  ...props
+}: {
+  defaultColor?: string | null
+  [key: string]: any
+}) {
+  const ref = useRef()
+  const [hovered, setHovered] = useState(false)
+  const [clicked, setClicked] = useState<string | null>(defaultColor)
+  useFrame((state) =>
+    ref.current.scale.setScalar(hovered ? 1 + Math.sin(state.clock.elapsedTime * 10) / 50 : 1),
+  )
+  // Sets document.body.style.cursor: useCursor(flag, onPointerOver = 'pointer', onPointerOut = 'auto')
+  useCursor(hovered)
+  return (
+    <mesh
+      {...props}
+      ref={ref}
+      receiveShadow
+      castShadow
+      onClick={(e) => (
+        e.stopPropagation(),
+        setClicked((c) => (c === '#4f46e5' ? '#818cf8' : '#4f46e5'))
+      )}
+      onPointerOver={(e) => (e.stopPropagation(), setHovered(true))}
+      onPointerOut={(e) => setHovered(false)}
+    >
+      <boxGeometry args={[5, 8, 0.075]} />
+      <meshStandardMaterial
+        roughness={1}
+        transparent
+        opacity={0.6}
+        color={clicked ?? (hovered ? '#818cf8' : '#f5f5f4')}
+      />
+    </mesh>
+  )
+}
+
+function Stage() {
+  return (
+    <>
+      {/* Fill */}
+      <ambientLight intensity={0.4} />
+      {/* Main */}
+      <directionalLight
+        position={[1, 10, -2]}
+        intensity={1.5}
+        shadow-camera-far={70}
+        shadow-camera-left={-10}
+        shadow-camera-right={10}
+        shadow-camera-top={10}
+        shadow-camera-bottom={-10}
+        shadow-mapSize={[512, 512]}
+        castShadow
+      />
+      {/* Strip */}
+      <directionalLight position={[-10, -10, 2]} intensity={3} />
+      {/* Ground */}
+      <mesh receiveShadow rotation-x={-Math.PI / 2} position={[0, -0.75, 0]}>
+        <planeGeometry args={[20, 20]} />
+        <shadowMaterial opacity={0.25} />
+      </mesh>
+      {/* This freezes the shadow map, which is fast, but the model has to be static  */}
+      <BakeShadows />
+    </>
+  )
+}

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

@@ -0,0 +1,33 @@
+import type { Block } from 'payload'
+
+export const DDHeroPlas: Block = {
+  slug: 'DD-HeroPlas',
+  labels: {
+    singular: 'DD Hero Plastics',
+    plural: 'DD Hero Plastics',
+  },
+  interfaceName: 'DDHeroPlas',
+  fields: [
+    {
+      admin: {
+        initCollapsed: true,
+        className: 'custom-css-class',
+      },
+      type: 'collapsible',
+      label: 'Add container class',
+      fields: [
+        {
+          name: 'containerClass',
+          type: 'textarea',
+          label: false,
+          required: false,
+          admin: {
+            description: 'Optional Tailwind/CSS classes applied to the block container.',
+          },
+        },
+      ],
+    },
+  ],
+}
+
+export default DDHeroPlas

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

@@ -0,0 +1,88 @@
+{
+  "type": "block",
+  "name": "DD-HeroPlas",
+  "label": "Hero Plastics",
+  "sourceName": "DD-HeroPlas",
+  "portableName": "DD-HeroPlas",
+  "slug": "DD-HeroPlas",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/Dusted-Payload-Blocks",
+    "originalPath": "CLI-TestGround/dusted-blocks-demo/src/blocks/DD-HeroPlas",
+    "originalSlug": "DD-HeroPlas",
+    "originalConfigExport": "DDHeroPlas",
+    "originalComponentExport": "DDHeroPlas",
+    "originalInterfaceName": "DDHeroPlas"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-HeroPlas/Component.tsx"
+    },
+    {
+      "from": "ThreeScene.tsx",
+      "to": "src/blocks/DD-HeroPlas/ThreeScene.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-HeroPlas/config.ts"
+    }
+  ],
+  "dependencies": [
+    "@react-three/drei",
+    "@react-three/fiber",
+    "three"
+  ],
+  "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 DDHeroPlas in Pages/Posts block arrays if automatic registration was skipped.",
+    "Register DD-HeroPlas 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 DDHeroPlas in Pages/Posts block arrays if automatic registration was skipped.",
+    "Register DD-HeroPlas 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 DDHeroPlas from @/blocks/DD-HeroPlas/config."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-HeroPlas with component export DDHeroPlas."
+    }
+  },
+  "notes": [
+    "Promoted from the verified Dusted Blocks demo implementation.",
+    "Installer preserves existing destination files and reports project requirements before writing."
+  ],
+  "exportName": "DDHeroPlas",
+  "componentExportName": "DDHeroPlas",
+  "interfaceName": "DDHeroPlas"
+}