blocks-dusted 0.1.10 → 0.1.12

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

@@ -0,0 +1,326 @@
+# ButtonWithIcon Component
+
+A versatile button component with icon support, multiple style variants, and flexible link handling.
+
+## Features
+
+- 🎨 8 style variants (primary, secondary, outline, ghost, destructive, v1-v8)
+- 🔗 Internal/external link support with smooth scrolling for anchors
+- 📱 Share button integration
+- 🎯 Icon positioning (before/after text)
+- 📐 Three sizes (small, medium, large)
+- 🎭 Display modes (iconWithLabel, iconOnly, labelOnly, share)
+- 🎪 Drawer integration with auto-close on navigation
+
+## Static Usage Examples
+
+### Basic Button with Icon
+
+```tsx
+import { ButtonWithIcon } from '@/blocks/ButtonWithIcon/Component'
+;<ButtonWithIcon
+  buttonText="Get Started"
+  iconName="ArrowRight"
+  iconPosition="after"
+  buttonStyle="primary"
+  size="medium"
+  link={{
+    type: 'custom',
+    url: '/get-started',
+    label: 'Get Started'
+  }}
+/>
+```
+
+### Icon Only Button
+
+```tsx
+<ButtonWithIcon
+  displayMode="iconOnly"
+  iconName="Menu"
+  buttonStyle="ghost"
+  size="medium"
+  link={{
+    type: 'custom',
+    url: '#',
+    label: 'Menu'
+  }}
+/>
+```
+
+### Share Button
+
+```tsx
+<ButtonWithIcon
+  displayMode="share"
+  buttonText="Share"
+  iconName="Share2"
+  buttonStyle="outline"
+  size="medium"
+/>
+```
+
+### Anchor Link with Smooth Scroll
+
+```tsx
+<ButtonWithIcon
+  buttonText="Scroll to Section"
+  iconName="ChevronDown"
+  iconPosition="after"
+  buttonStyle="v1"
+  size="medium"
+  scrollDuration={1.5}
+  scrollOffset={100}
+  link={{
+    type: 'custom',
+    url: '#section-id',
+    label: 'Scroll to Section'
+  }}
+/>
+```
+
+### External Link
+
+```tsx
+<ButtonWithIcon
+  buttonText="Visit GitHub"
+  iconName="Github"
+  iconPosition="before"
+  buttonStyle="v2"
+  size="large"
+  link={{
+    type: 'custom',
+    url: 'https://github.com',
+    label: 'Visit GitHub',
+    newTab: true
+  }}
+/>
+```
+
+### Style Variants Showcase
+
+```tsx
+{
+  /* Brutalist shadow effect */
+}
+;<ButtonWithIcon
+  buttonText="Button V1"
+  buttonStyle="v1"
+  iconName="Zap"
+  link={{ type: 'custom', url: '#', label: 'Button' }}
+/>
+
+{
+  /* Shimmer effect */
+}
+;<ButtonWithIcon
+  buttonText="Button V2"
+  buttonStyle="v2"
+  iconName="Sparkles"
+  link={{ type: 'custom', url: '#', label: 'Button' }}
+/>
+
+{
+  /* Ring hover effect */
+}
+;<ButtonWithIcon
+  buttonText="Button V3"
+  buttonStyle="v3"
+  iconName="Circle"
+  link={{ type: 'custom', url: '#', label: 'Button' }}
+/>
+
+{
+  /* Press effect with shadow */
+}
+;<ButtonWithIcon
+  buttonText="Button V4"
+  buttonStyle="v4"
+  iconName="Layers"
+  link={{ type: 'custom', url: '#', label: 'Button' }}
+/>
+
+{
+  /* Border with subtle animation */
+}
+;<ButtonWithIcon
+  buttonText="Button V5"
+  buttonStyle="v5"
+  iconName="Box"
+  link={{ type: 'custom', url: '#', label: 'Button' }}
+/>
+
+{
+  /* Scale hover effect */
+}
+;<ButtonWithIcon
+  buttonText="Button V6"
+  buttonStyle="v6"
+  iconName="Maximize2"
+  link={{ type: 'custom', url: '#', label: 'Button' }}
+/>
+
+{
+  /* Underline animation */
+}
+;<ButtonWithIcon
+  buttonText="Button V7"
+  buttonStyle="v7"
+  iconName="Underline"
+  link={{ type: 'custom', url: '#', label: 'Button' }}
+/>
+
+{
+  /* Embossed shadow effect */
+}
+;<ButtonWithIcon
+  buttonText="Button V8"
+  buttonStyle="v8"
+  iconName="Mountain"
+  link={{ type: 'custom', url: '#', label: 'Button' }}
+/>
+```
+
+### With Drawer Integration
+
+```tsx
+{
+  /* Closes drawer on navigation */
+}
+;<ButtonWithIcon
+  buttonText="Home"
+  iconName="Home"
+  buttonStyle="ghost"
+  closeDrawerOnClick={true}
+  link={{
+    type: 'custom',
+    url: '/',
+    label: 'Home'
+  }}
+/>
+
+{
+  /* Keeps drawer open */
+}
+;<ButtonWithIcon
+  buttonText="Settings"
+  iconName="Settings"
+  buttonStyle="ghost"
+  closeDrawerOnClick={false}
+  link={{
+    type: 'custom',
+    url: '/settings',
+    label: 'Settings'
+  }}
+/>
+```
+
+### Different Sizes
+
+```tsx
+<ButtonWithIcon
+  buttonText="Small"
+  size="small"
+  buttonStyle="primary"
+  iconName="Minus"
+  link={{ type: 'custom', url: '#', label: 'Small' }}
+/>
+
+<ButtonWithIcon
+  buttonText="Medium"
+  size="medium"
+  buttonStyle="primary"
+  iconName="Equal"
+  link={{ type: 'custom', url: '#', label: 'Medium' }}
+/>
+
+<ButtonWithIcon
+  buttonText="Large"
+  size="large"
+  buttonStyle="primary"
+  iconName="Plus"
+  link={{ type: 'custom', url: '#', label: 'Large' }}
+/>
+```
+
+### Custom Container Classes
+
+```tsx
+<ButtonWithIcon
+  buttonText="Custom Styled"
+  iconName="Palette"
+  buttonStyle="primary"
+  iconButtonContainerClass="my-8 mx-auto"
+  enableGutter={true}
+  link={{ type: 'custom', url: '#', label: 'Custom' }}
+/>
+```
+
+### Reference Links (Internal Pages)
+
+```tsx
+<ButtonWithIcon
+  buttonText="Go to About"
+  iconName="Info"
+  buttonStyle="secondary"
+  link={{
+    type: 'reference',
+    reference: {
+      relationTo: 'pages',
+      value: 123 // Page ID or page object
+    },
+    label: 'About Page'
+  }}
+/>
+```
+
+## Props
+
+| Prop                       | Type           | Default           | Description                                                            |
+| -------------------------- | -------------- | ----------------- | ---------------------------------------------------------------------- |
+| `buttonText`               | `string`       | -                 | Button label text                                                      |
+| `buttonStyle`              | `ButtonStyle`  | `'primary'`       | Style variant (primary, secondary, outline, ghost, destructive, v1-v8) |
+| `displayMode`              | `DisplayMode`  | `'iconWithLabel'` | Display mode (iconWithLabel, iconOnly, labelOnly, share)               |
+| `iconName`                 | `string`       | -                 | Lucide icon name                                                       |
+| `iconPosition`             | `IconPosition` | `'before'`        | Icon position relative to text (before, after)                         |
+| `link`                     | `LinkType`     | -                 | Link configuration object                                              |
+| `size`                     | `ButtonSize`   | `'medium'`        | Button size (small, medium, large)                                     |
+| `scrollDuration`           | `number`       | `1`               | Smooth scroll animation duration (seconds)                             |
+| `scrollOffset`             | `number`       | `80`              | Scroll offset from target (pixels)                                     |
+| `closeDrawerOnClick`       | `boolean`      | `true`            | Close drawer on navigation                                             |
+| `enableGutter`             | `boolean`      | `true`            | Add default padding                                                    |
+| `iconButtonContainerClass` | `string`       | -                 | Additional container classes                                           |
+| `onToggle`                 | `() => void`   | -                 | Callback function on click                                             |
+
+## Link Type Options
+
+```typescript
+type LinkType = {
+  type?: 'reference' | 'custom' | null
+  url?: string | null // For custom links
+  reference?: LinkReference | null // For internal pages/thoughts
+  label: string
+  newTab?: boolean | null
+  appearance?: 'default' | 'outline' | null
+}
+```
+
+## Available Icons
+
+Uses [Lucide Icons](https://lucide.dev/icons/). Common examples:
+
+- `ArrowRight`, `ArrowLeft`, `ArrowUp`, `ArrowDown`
+- `ChevronRight`, `ChevronLeft`, `ChevronUp`, `ChevronDown`
+- `Menu`, `X`, `Home`, `Settings`
+- `Github`, `Twitter`, `Facebook`, `Linkedin`
+- `Download`, `Upload`, `Save`, `Trash`
+- `Plus`, `Minus`, `Check`, `X`
+- `Search`, `Filter`, `Eye`, `EyeOff`
+
+## Notes
+
+- Anchor links (starting with `#`) trigger smooth scroll behavior
+- External links (http/https) automatically open in new tab if `newTab` is true
+- Share button mode integrates with Twitter, Facebook, LinkedIn, and clipboard
+- All v2-v4 variants include special hover animations
+- Component integrates with Header03 drawer for mobile navigation

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

@@ -0,0 +1,239 @@
+import type { Block } from 'payload'
+import { link } from '@/fields/link'
+
+export const DDIconButton: Block = {
+  slug: 'DD-IconButton',
+  interfaceName: 'DDIconButton',
+  labels: {
+    singular: 'Button with Icon',
+    plural: 'Buttons with Icons'
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        // ── Tab 1: Content ─────────────────────────────────────────────
+        {
+          label: 'Content',
+          fields: [
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'displayMode',
+                  type: 'select',
+                  label: 'Display Mode',
+                  defaultValue: 'iconWithLabel',
+                  required: true,
+                  admin: { width: '50%' },
+                  options: [
+                    { label: 'Icon with Label', value: 'iconWithLabel' },
+                    { label: 'Icon Only', value: 'iconOnly' },
+                    { label: 'Label Only', value: 'labelOnly' },
+                    { label: 'Share Button', value: 'share' }
+                  ]
+                },
+                {
+                  name: 'iconPosition',
+                  type: 'select',
+                  label: 'Icon Position',
+                  defaultValue: 'before',
+                  required: false,
+                  admin: {
+                    width: '50%',
+                    description: 'Whether the icon appears before or after the label.'
+                  },
+                  options: [
+                    { label: 'Before Label', value: 'before' },
+                    { label: 'After Label', value: 'after' }
+                  ]
+                }
+              ]
+            },
+            {
+              name: 'buttonText',
+              type: 'text',
+              label: 'Button Text',
+              required: false,
+              admin: {
+                condition: (data) => data.displayMode !== 'iconOnly',
+                description: 'Text to display on the button. Optional for icon-only buttons.'
+              }
+            },
+            // iconName is deprecated in favour of the link icon picker
+            {
+              name: 'iconName',
+              type: 'select',
+              label: 'Icon',
+              hidden: true,
+              required: false,
+              options: [
+                { label: 'Instagram', value: 'Instagram' },
+                { label: 'Facebook', value: 'Facebook' },
+                { label: 'Twitter', value: 'Twitter' },
+                { label: 'LinkedIn', value: 'Linkedin' },
+                { label: 'YouTube', value: 'Youtube' },
+                { label: 'Dribbble', value: 'Dribbble' },
+                { label: 'Arrow Right', value: 'ArrowRight' },
+                { label: 'Arrow Left', value: 'ArrowLeft' },
+                { label: 'Arrow Down Left', value: 'ArrowDownLeft' },
+                { label: 'Arrow Down Right', value: 'ArrowDownRight' },
+                { label: 'Arrow Up Left', value: 'ArrowUpLeft' },
+                { label: 'Arrow Up Right', value: 'ArrowUpRight' },
+                { label: 'Arrow Up', value: 'ArrowUp' },
+                { label: 'Arrow Down', value: 'ArrowDown' },
+                { label: 'Download', value: 'Download' },
+                { label: 'Upload', value: 'Upload' },
+                { label: 'External Link', value: 'ExternalLink' },
+                { label: 'Link', value: 'Link' },
+                { label: 'Mail', value: 'Mail' },
+                { label: 'Phone', value: 'Phone' },
+                { label: 'Play', value: 'Play' },
+                { label: 'Pause', value: 'Pause' },
+                { label: 'Home', value: 'Home' },
+                { label: 'User', value: 'User' },
+                { label: 'Message', value: 'MessageCircle' },
+                { label: 'Settings', value: 'Settings' },
+                { label: 'Search', value: 'Search' },
+                { label: 'Menu', value: 'Menu' },
+                { label: 'X', value: 'X' },
+                { label: 'Plus', value: 'Plus' },
+                { label: 'Minus', value: 'Minus' },
+                { label: 'Check', value: 'Check' },
+                { label: 'Check Circle', value: 'CheckCircle' },
+                { label: 'X Circle', value: 'XCircle' },
+                { label: 'Alert Circle', value: 'AlertCircle' },
+                { label: 'Info', value: 'Info' },
+                { label: 'Heart', value: 'Heart' },
+                { label: 'Star', value: 'Star' },
+                { label: 'Book', value: 'Book' },
+                { label: 'Calendar', value: 'Calendar' },
+                { label: 'Clock', value: 'Clock' },
+                { label: 'Map Pin', value: 'MapPin' },
+                { label: 'Globe', value: 'Globe' },
+                { label: 'Bookmark', value: 'Bookmark' },
+                { label: 'Tag', value: 'Tag' },
+                { label: 'Circle', value: 'Circle' },
+                { label: 'Lamp Floor', value: 'LampFloor' },
+                { label: 'Eye', value: 'Eye' },
+                { label: 'Eye Off', value: 'EyeOff' },
+                { label: 'Edit', value: 'Edit' },
+                { label: 'Trash', value: 'Trash' },
+                { label: 'Copy', value: 'Copy' },
+                { label: 'Share', value: 'Share' },
+                { label: 'Save', value: 'Save' },
+                { label: 'File', value: 'File' },
+                { label: 'Folder', value: 'Folder' },
+                { label: 'Image', value: 'Image' },
+                { label: 'Video', value: 'Video' },
+                { label: 'Music', value: 'Music' },
+                { label: 'Split', value: 'Split' },
+                { label: 'Document', value: 'Document' },
+                { label: 'Code', value: 'Code' },
+                { label: 'Terminal', value: 'Terminal' },
+                { label: 'Bug', value: 'Bug' },
+                { label: 'Shield', value: 'Shield' },
+                { label: 'Unlock', value: 'Unlock' },
+                { label: 'Bell', value: 'Bell' }
+              ],
+              admin: {
+                condition: (data) => {
+                  if (data.displayMode === 'labelOnly') return false
+                  if (data.link?.reference || data.link?.url) return false
+                  return true
+                },
+                description: 'Select an icon. Overridden if a link with an icon is configured.'
+              }
+            },
+            link({
+              overrides: {
+                name: 'link',
+                label: 'Link',
+                admin: {
+                  condition: (data) =>
+                    data.displayMode !== 'labelOnly' && data.displayMode !== 'share'
+                }
+              },
+              disableLabel: true,
+              appearances: false
+            })
+          ]
+        },
+
+        // ── Tab 2: Appearance ───────────────────────────────────────────
+        {
+          label: 'Appearance',
+          fields: [
+            {
+              name: 'buttonStyle',
+              type: 'select',
+              label: 'Button Style',
+              defaultValue: 'primary',
+              required: false,
+              options: [
+                { label: 'Primary', value: 'primary' },
+                { label: 'Secondary', value: 'secondary' },
+                { label: 'Outline', value: 'outline' },
+                { label: 'Text', value: 'ghost' },
+                { label: 'Call-to-Action', value: 'destructive' },
+                { label: 'Retro Border', value: 'v1' },
+                { label: 'Gradient Shine', value: 'v2' },
+                { label: 'Ring Hover', value: 'v3' },
+                { label: '3D Press', value: 'v4' },
+                { label: 'Invert Slide', value: 'v5' },
+                { label: 'Scale Morph', value: 'v6' },
+                { label: 'Underline', value: 'v7' },
+                { label: 'Embossed', value: 'v8' }
+              ]
+            },
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'size',
+                  type: 'select',
+                  label: 'Button Size',
+                  defaultValue: 'medium',
+                  required: false,
+                  admin: { width: '50%' },
+                  options: [
+                    { label: 'Small', value: 'small' },
+                    { label: 'Medium', value: 'medium' },
+                    { label: 'Large', value: 'large' }
+                  ]
+                },
+                {
+                  name: 'overrideSizeClasses',
+                  type: 'text',
+                  label: 'Override Size Classes',
+                  required: false,
+                  admin: {
+                    width: '50%',
+                    description: 'Custom classes to override size (e.g. "px-8 py-4 text-2xl").'
+                  }
+                }
+              ]
+            },
+            {
+              name: 'iconButtonContainerClass',
+              type: 'text',
+              label: 'Container Class',
+              required: false,
+              // Ensure no duplicate ID is created
+              validate: (value: unknown, { siblingData }: { siblingData?: Record<string, unknown> }): string | true => {
+                if (siblingData?.id) {
+                  delete siblingData.id
+                }
+                return true
+              },
+              admin: {
+                description:
+                  'Custom container class. Use `section-button` for wider letter-spacing.'
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,85 @@
+{
+  "type": "block",
+  "name": "DD-IconButton",
+  "label": "Icon Button",
+  "sourceName": "ButtonWithIcon",
+  "portableName": "DD-IconButton",
+  "slug": "DD-IconButton",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/ButtonWithIcon",
+    "originalSlug": "buttonWithIcon",
+    "originalConfigExport": "ButtonWithIcon",
+    "originalComponentExport": "ButtonWithIcon",
+    "originalInterfaceName": "DDIconButton"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-IconButton/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-IconButton/config.ts"
+    }
+  ],
+  "dependencies": [],
+  "sharedFiles": [
+    {
+      "from": "templates/shared/src/utilities/smoothScroll.ts",
+      "to": "src/utilities/smoothScroll.ts",
+      "required": true,
+      "safeToCopy": true
+    },
+    {
+      "from": "templates/shared/src/components/ui/ShareButton",
+      "to": "src/components/ui/ShareButton",
+      "required": true,
+      "safeToCopy": true
+    }
+  ],
+  "requiredProjectFiles": [],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDIconButton in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-IconButton in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "manualSteps": [
+    "Register DDIconButton in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-IconButton in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can add import { DDIconButton } from '@/blocks/DD-IconButton/config' and add DDIconButton to clear Pages/Posts block arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-IconButton in RenderBlocks."
+    }
+  },
+  "notes": [
+    "Replaced project shell imports useDrawerClose, smoothScrollTo, and ShareButton with portable anchor behaviour.",
+    "Manifest includes shared local support files required by original DesignsDusted source imports."
+  ],
+  "exportName": "DDIconButton",
+  "interfaceName": "DDIconButton"
+}

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

@@ -0,0 +1,21 @@
+import React from 'react'
+
+type Props = {
+  idTag: string
+  offset?: number
+}
+
+export const DDIdTag: React.FC<Props> = ({ idTag, offset = 0 }) => {
+  return (
+    <div
+      id={idTag}
+      style={{
+        position: 'relative',
+        top: `-${offset}px`,
+        height: 0,
+        visibility: 'hidden',
+      }}
+      aria-hidden="true"
+    />
+  )
+}

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

@@ -0,0 +1,4 @@
+# DD-IdTag
+
+Portable first-pass conversion of `IdTagBlock` 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.
+