blocks-dusted 0.1.0

package/templates/blocks/DD-Carousel-B/manifest.json

@@ -0,0 +1,86 @@
+{
+  "type": "block",
+  "name": "DD-Carousel-B",
+  "label": "Studio Carousel Block B",
+  "sourceName": "StudioCarouselBlock-B",
+  "portableName": "DD-Carousel-B",
+  "slug": "DD-Carousel-B",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/StudioCarouselBlock-B",
+    "originalSlug": "studioCarouselBlockB",
+    "originalConfigExport": "StudioCarouselBlockB",
+    "originalComponentExport": "StudioCarouselBlockB",
+    "originalInterfaceName": "StudioCarouselBlockBProps"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-Carousel-B/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-Carousel-B/config.ts"
+    }
+  ],
+  "dependencies": [
+    {
+      "name": "embla-carousel-react"
+    },
+    {
+      "name": "lucide-react"
+    }
+  ],
+  "sharedFiles": [],
+  "requiredProjectFiles": [
+    {
+      "path": "src/utilities/ui.ts",
+      "reason": "Block uses the cn utility from @/utilities/ui."
+    }
+  ],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDCarouselB in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-Carousel-B 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 DDCarouselB in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-Carousel-B 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 add import { DDCarouselB } from '@/blocks/DD-Carousel-B/config' and add DDCarouselB to clear Pages/Posts blocks arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-Carousel-B in src/blocks/**/RenderBlocks.tsx when the blockComponents map is clear."
+    }
+  },
+  "notes": [
+    "Converted from DesignsDustedv3 StudioCarouselBlock-B.",
+    "Installer must not overwrite existing target files."
+  ],
+  "exportName": "DDCarouselB",
+  "interfaceName": "DDCarouselB"
+}

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

@@ -0,0 +1,272 @@
+"use client";
+
+import React, { Fragment, useState } from "react";
+import { Check, Minus, Plus } from "lucide-react";
+
+type TierKey = "free" | "pro" | "team";
+
+type CellValue = boolean | string;
+
+interface FeatureRow {
+  id?: string | null;
+  label?: string | null;
+  free?: CellValue | null;
+  pro?: CellValue | null;
+  team?: CellValue | null;
+}
+
+interface FeatureGroup {
+  id?: string | null;
+  group?: string | null;
+  rows?: FeatureRow[] | null;
+}
+
+interface TierHeader {
+  key: TierKey;
+  label: string;
+  highlight: boolean;
+}
+
+interface StudioComparisonTableProps {
+  eyebrow?: string | null;
+  heading?: string | null;
+  defaultOpen?: boolean | null;
+  groups?: FeatureGroup[] | null;
+  sectionId?: string | null;
+  customCSS?: string | null;
+  [key: string]: unknown;
+}
+
+const DEFAULT_GROUPS: FeatureGroup[] = [
+  {
+    group: "Components & Templates",
+    rows: [
+      { label: "Free components", free: true, pro: true, team: true },
+      { label: "Premium components", free: false, pro: "120+", team: "120+" },
+      { label: "Free templates", free: true, pro: true, team: true },
+      { label: "Premium templates", free: false, pro: "24+", team: "24+" },
+      { label: "Payload CMS v3 blocks", free: false, pro: true, team: true },
+      { label: "Figma source files", free: false, pro: true, team: true },
+    ],
+  },
+  {
+    group: "Licensing",
+    rows: [
+      { label: "Personal use", free: true, pro: true, team: true },
+      {
+        label: "Commercial projects",
+        free: false,
+        pro: "1 project",
+        team: "Unlimited",
+      },
+      { label: "White-label license", free: false, pro: false, team: true },
+      { label: "Client resale rights", free: false, pro: false, team: true },
+    ],
+  },
+  {
+    group: "Updates & Access",
+    rows: [
+      { label: "Lifetime updates", free: true, pro: true, team: true },
+      {
+        label: "Early access to new releases",
+        free: false,
+        pro: true,
+        team: true,
+      },
+      { label: "Download source files", free: false, pro: true, team: true },
+    ],
+  },
+  {
+    group: "Support",
+    rows: [
+      { label: "Community Discord", free: true, pro: true, team: true },
+      { label: "Priority email support", free: false, pro: true, team: true },
+      { label: "Dedicated Slack channel", free: false, pro: false, team: true },
+      { label: "1-on-1 onboarding call", free: false, pro: false, team: true },
+      { label: "SLA support guarantee", free: false, pro: false, team: true },
+    ],
+  },
+  {
+    group: "Team",
+    rows: [
+      { label: "Team seats", free: "1", pro: "1", team: "Up to 10" },
+      {
+        label: "Invoice & billing management",
+        free: false,
+        pro: false,
+        team: true,
+      },
+      {
+        label: "Custom Payload CMS schemas",
+        free: false,
+        pro: false,
+        team: true,
+      },
+    ],
+  },
+];
+
+function Cell({
+  value,
+  highlight,
+}: {
+  value: CellValue | null | undefined;
+  highlight: boolean;
+}) {
+  if (typeof value === "string") {
+    return (
+      <span
+        className={`text-sm font-medium ${highlight ? "text-indigo-900 dark:text-lime-400" : "text-stone-700 dark:text-stone-300"}`}
+      >
+        {value}
+      </span>
+    );
+  }
+
+  if (value === true) {
+    return (
+      <div
+        className={`mx-auto flex h-5 w-5 items-center justify-center rounded-full ${
+          highlight ? "bg-stone-900" : "bg-stone-800"
+        }`}
+        style={{ cornerShape: "squircle" } as React.CSSProperties}
+      >
+        <Check
+          className={`h-3 w-3 ${highlight ? "text-stone-50" : "text-stone-300"}`}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto flex h-5 w-5 items-center justify-center opacity-30">
+      <Minus className="h-4 w-4 text-stone-600" />
+    </div>
+  );
+}
+
+export function DDComparisonTable({
+  eyebrow = "Full breakdown",
+  heading = "Compare all features",
+  defaultOpen = true,
+  groups,
+  sectionId,
+}: StudioComparisonTableProps) {
+  const [open, setOpen] = useState(defaultOpen !== false);
+  const featureGroups = groups && groups.length > 0 ? groups : DEFAULT_GROUPS;
+
+  const tiers: TierHeader[] = [
+    { key: "free", label: "Free", highlight: false },
+    { key: "pro", label: "Pro", highlight: true },
+    { key: "team", label: "Team", highlight: false },
+  ];
+
+  return (
+    <section
+      id={sectionId ?? undefined}
+      className="studio-comparison-table border-t border-stone-800 bg-transparent px-6 py-20"
+    >
+      <div className="mx-auto max-w-6xl">
+        <button
+          type="button"
+          onClick={() => setOpen((current) => !current)}
+          className="group mb-8 flex w-full cursor-pointer items-center justify-between gap-6 text-left"
+        >
+          <div>
+            {eyebrow && (
+              <p className="mb-1 text-xs font-semibold uppercase tracking-widest text-stone-500">
+                {eyebrow}
+              </p>
+            )}
+            {heading && (
+              <h2 className="text-3xl font-semibold text-stone-900 dark:text-stone-50">
+                {heading}
+              </h2>
+            )}
+          </div>
+
+          <div
+            className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-stone-100 bg-stone-200 dark:border-stone-700 dark:bg-stone-800 transition-colors group-hover:border-stone-300 dark:group-hover:border-stone-500"
+            style={{ cornerShape: "squircle" } as React.CSSProperties}
+          >
+            {open ? (
+              <Minus className="h-4 w-4 text-stone-700 dark:text-stone-400 transition-transform duration-300" />
+            ) : (
+              <Plus className="h-4 w-4 text-stone-700 dark:text-stone-300 transition-transform duration-300" />
+            )}
+          </div>
+        </button>
+
+        {open && (
+          <div className="overflow-x-auto">
+            <table className="w-full min-w-160">
+              <thead>
+                <tr>
+                  <th className="w-1/2 pb-0 text-left" />
+                  {tiers.map((tier) => (
+                    <th key={tier.key} className="pb-0 text-center">
+                      <span
+                        className={`inline-block rounded-lg px-4 py-1.5 text-sm font-semibold ${
+                          tier.highlight
+                            ? "bg-stone-100 text-stone-900"
+                            : "border-stone-100 bg-stone-200 dark:border-stone-700 dark:bg-stone-800/50 transition-colors group-hover:border-stone-300 dark:group-hover:border-stone-500"
+                        }`}
+                        style={
+                          { cornerShape: "squircle" } as React.CSSProperties
+                        }
+                      >
+                        {tier.label}
+                      </span>
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+
+              <tbody>
+                {featureGroups.map((group, groupIndex) => (
+                  <Fragment key={group.id ?? group.group ?? groupIndex}>
+                    <tr>
+                      <td colSpan={4} className="pb-3 pt-0">
+                        <span className="text-xs font-bold uppercase tracking-widest text-stone-500">
+                          {group.group}
+                        </span>
+                      </td>
+                    </tr>
+
+                    {(group.rows ?? []).map((row, rowIndex) => (
+                      <tr
+                        key={row.id ?? row.label ?? rowIndex}
+                        className={`border-t transition-colors hover:bg-stone-200/40 dark:hover:bg-stone-900/40 ${
+                          rowIndex === 0
+                            ? "border-stone-800"
+                            : "border-stone-800/50"
+                        }`}
+                      >
+                        <td className="py-3.5 pr-6">
+                          <span className="text-sm text-stone-400">
+                            {row.label}
+                          </span>
+                        </td>
+
+                        {tiers.map((tier) => (
+                          <td key={tier.key} className="py-3.5 text-center">
+                            <Cell
+                              value={row[tier.key]}
+                              highlight={tier.highlight}
+                            />
+                          </td>
+                        ))}
+                      </tr>
+                    ))}
+                  </Fragment>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
+
+export default DDComparisonTable;

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

@@ -0,0 +1,105 @@
+import type { Block } from 'payload'
+
+export const DDComparisonTable: Block = {
+  slug: 'DD-ComparisonTable',
+  interfaceName: 'DDComparisonTable',
+  labels: {
+    singular: 'Studio Comparison Table',
+    plural: 'Studio Comparison Tables',
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Content',
+          fields: [
+            {
+              name: 'eyebrow',
+              type: 'text',
+              defaultValue: 'Full breakdown',
+            },
+            {
+              name: 'heading',
+              type: 'text',
+              defaultValue: 'Compare all features',
+              required: true,
+            },
+            {
+              name: 'defaultOpen',
+              type: 'checkbox',
+              defaultValue: true,
+            },
+            {
+              name: 'groups',
+              type: 'array',
+              minRows: 1,
+              fields: [
+                {
+                  name: 'group',
+                  type: 'text',
+                  required: true,
+                },
+                {
+                  name: 'rows',
+                  type: 'array',
+                  minRows: 1,
+                  fields: [
+                    {
+                      name: 'label',
+                      type: 'text',
+                      required: true,
+                    },
+                    {
+                      type: 'row',
+                      fields: [
+                        {
+                          name: 'free',
+                          type: 'text',
+                          admin: {
+                            width: '33%',
+                            description: 'Use true / false or text value',
+                          },
+                        },
+                        {
+                          name: 'pro',
+                          type: 'text',
+                          admin: {
+                            width: '33%',
+                            description: 'Use true / false or text value',
+                          },
+                        },
+                        {
+                          name: 'team',
+                          type: 'text',
+                          admin: {
+                            width: '33%',
+                            description: 'Use true / false or text value',
+                          },
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: 'sectionId',
+      type: 'text',
+      admin: {
+        description: 'Optional section anchor ID',
+      },
+    },
+    {
+      name: 'customCSS',
+      type: 'textarea',
+      admin: {
+        description: 'Optional custom CSS for this block',
+      },
+    },
+  ],
+}

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

@@ -0,0 +1,78 @@
+{
+  "type": "block",
+  "name": "DD-ComparisonTable",
+  "label": "Studio Comparison Table",
+  "sourceName": "StudioComparisonTable",
+  "portableName": "DD-ComparisonTable",
+  "slug": "DD-ComparisonTable",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/StudioComparisonTable",
+    "originalSlug": "studioComparisonTable",
+    "originalConfigExport": "StudioComparisonTable",
+    "originalComponentExport": "StudioComparisonTable",
+    "originalInterfaceName": "StudioComparisonTable"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-ComparisonTable/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-ComparisonTable/config.ts"
+    }
+  ],
+  "dependencies": [
+    {
+      "name": "lucide-react"
+    }
+  ],
+  "sharedFiles": [],
+  "requiredProjectFiles": [],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDComparisonTable in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-ComparisonTable 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 DDComparisonTable in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-ComparisonTable 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 add import { DDComparisonTable } from '@/blocks/DD-ComparisonTable/config' and add DDComparisonTable to clear Pages/Posts blocks arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-ComparisonTable in src/blocks/**/RenderBlocks.tsx when the blockComponents map is clear."
+    }
+  },
+  "notes": [
+    "Converted from DesignsDustedv3 StudioComparisonTable.",
+    "Installer must not overwrite existing target files."
+  ],
+  "exportName": "DDComparisonTable",
+  "interfaceName": "DDComparisonTable"
+}