blocks-dusted 0.1.10 → 0.1.11

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

@@ -0,0 +1,202 @@
+# ChipBlock Component
+
+A flexible and customizable chip/tag component for displaying labels, categories, or any grouped information in your Payload CMS content.
+
+## Features
+
+- ✨ **Multiple Layout Options**: Display chips in rows, columns, or wrapped rows
+- 🎨 **Fully Customizable Styling**: Set colors, borders, sizes, and spacing
+- 🔗 **Optional Links**: Make chips clickable with internal or external links
+- 📱 **Responsive**: Adapts to different screen sizes with horizontal scroll on mobile
+- ⚡ **Animation Support**: Optional scroll-based animations using Framer Motion
+- 🎯 **Per-Chip Customization**: Override global styles on individual chips
+- 🌙 **Dark Mode Ready**: Includes default dark mode color scheme
+
+## Usage in Payload CMS
+
+### Adding ChipBlock to Content
+
+1. Open any page/post with a Content block
+2. Add a new block in the rich text editor
+3. Select **"Chip Block"** from the block options
+4. Configure your chips and styling options
+
+### Configuration Options
+
+#### Layout & Styling
+
+- **Layout Direction**:
+  - Row (Horizontal) - Single horizontal line
+  - Column (Vertical) - Stacked vertically
+  - Row Wrap - Multiple rows that wrap
+
+- **Chip Size**: Small, Medium, or Large
+- **Gap Between Chips**: None, Small, Medium, or Large
+- **Alignment**: Start, Center, End, or Space Between
+
+#### Color Customization
+
+- **Background Color**: CSS color value (e.g., `#3b82f6`) or Tailwind class (e.g., `bg-blue-500`)
+- **Text Color**: CSS color value or Tailwind class
+- **Border Color**: CSS color value or Tailwind class
+- **Border Width**: 0-4px
+- **Border Radius**: None, Small, Medium, Large, or Full (pill shape)
+- **Hover Effect**: Enable/disable hover animations
+
+#### Managing Chips
+
+Each chip can have:
+
+- **Label**: Text to display (required)
+- **Icon**: Optional emoji or icon character (e.g., ✓, ⭐, 🚀)
+- **Custom Colors**: Override global colors for individual chips
+- **Link**: Optional URL to make the chip clickable
+
+#### Advanced Options
+
+- **Custom CSS Class**: Add your own CSS classes
+- **Enable Animation**: Animate chips on scroll into view
+- **Max Container Width**: Limit the width of the chip container
+- **Container Padding**: Add padding around the chip group
+
+## Examples
+
+### Simple Tags
+
+```
+Layout: Row Wrap
+Size: Small
+Background: #e5e7eb (gray-200)
+Text Color: #111827 (gray-900)
+Border: 1px, gray-300
+
+Chips:
+- React
+- Next.js
+- TypeScript
+- Tailwind CSS
+```
+
+### Feature List
+
+```
+Layout: Column
+Size: Medium
+Background: #dbeafe (blue-50)
+Border: 2px, blue-300
+
+Chips:
+- ✓ Fast Performance
+- ✓ SEO Optimized
+- ✓ Mobile Responsive
+- ✓ Accessible
+```
+
+### Skill Badges
+
+```
+Layout: Row Wrap
+Size: Large
+Background: Linear gradient or custom
+Border: None
+Hover Effect: Enabled
+
+Chips with links:
+- JavaScript → /skills/javascript
+- Python → /skills/python
+- Design → /skills/design
+```
+
+### Status Indicators
+
+```
+Layout: Row
+Size: Small
+Individual chip colors:
+- "Active" → green background
+- "Pending" → yellow background
+- "Completed" → blue background
+```
+
+## Styling Tips
+
+### Using CSS Colors
+
+```
+Background: #3b82f6
+Text Color: #ffffff
+Border Color: #2563eb
+```
+
+### Using Tailwind Classes
+
+```
+Background: bg-gradient-to-r from-purple-500 to-pink-500
+Text Color: text-white
+Border Color: border-purple-700
+```
+
+### Custom Styling
+
+Add a custom class name and define styles in your CSS:
+
+```css
+.my-custom-chips .chip-item {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+}
+
+.my-custom-chips .chip-item:hover {
+  transform: translateY(-4px) scale(1.05);
+  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
+}
+```
+
+## Responsive Behavior
+
+- **Desktop**: Chips display according to layout settings
+- **Mobile (Row layout)**: Horizontal scroll enabled automatically
+- **Mobile (Wrap layout)**: Chips wrap to multiple lines
+- **Column layout**: Stacks vertically on all screen sizes
+
+## Accessibility
+
+- Proper semantic HTML
+- Keyboard navigable when using links
+- Screen reader friendly with aria-labels
+- Sufficient color contrast (ensure your colors meet WCAG standards)
+
+## Animation Options
+
+When **Enable Animation** is checked:
+
+- Chips fade in with stagger effect as you scroll
+- Each chip animates individually
+- Animation triggers once when scrolled into view
+- Smooth easing for professional appearance
+
+## Dark Mode
+
+Default colors automatically adjust in dark mode:
+
+- Background: gray-700
+- Text: gray-100
+- Border: gray-600
+
+Override these by setting custom colors if needed.
+
+## Component Files
+
+- **Config**: `src/blocks/ChipBlock/config.ts`
+- **Component**: `src/blocks/ChipBlock/Component.tsx`
+- **Styles**: `src/blocks/ChipBlock/index.scss`
+
+## Need Help?
+
+Common issues:
+
+- **Colors not showing**: Make sure you're using valid CSS color values or Tailwind classes
+- **Layout breaking**: Check the gap and alignment settings
+- **Links not working**: Ensure the link field includes the protocol (https://) for external links
+- **Hover not working**: Enable "Hover Effect" in the Color Customization section

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

@@ -0,0 +1,369 @@
+import type { Block } from 'payload'
+
+export const DDChip: Block = {
+  slug: 'DD-Chip',
+  interfaceName: 'DDChip',
+  labels: {
+    singular: 'Chip Block',
+    plural: 'Chip Blocks'
+  },
+  fields: [
+    {
+      type: 'collapsible',
+      label: 'Layout & Styling',
+      admin: {
+        initCollapsed: false
+      },
+      fields: [
+        {
+          type: 'row',
+          fields: [
+            {
+              name: 'layout',
+              type: 'select',
+              label: 'Layout Direction',
+              defaultValue: 'row',
+              options: [
+                {
+                  label: 'Row (Horizontal)',
+                  value: 'row'
+                },
+                {
+                  label: 'Column (Vertical)',
+                  value: 'column'
+                },
+                {
+                  label: 'Row Wrap',
+                  value: 'row-wrap'
+                }
+              ],
+              admin: {
+                width: '50%',
+                description: 'Direction to display chips'
+              }
+            },
+            {
+              name: 'size',
+              type: 'select',
+              label: 'Chip Size',
+              defaultValue: 'medium',
+              options: [
+                {
+                  label: 'Small',
+                  value: 'small'
+                },
+                {
+                  label: 'Medium',
+                  value: 'medium'
+                },
+                {
+                  label: 'Large',
+                  value: 'large'
+                }
+              ],
+              admin: {
+                width: '50%',
+                description: 'Size of the chips'
+              }
+            }
+          ]
+        },
+        {
+          type: 'row',
+          fields: [
+            {
+              name: 'gap',
+              type: 'select',
+              label: 'Gap Between Chips',
+              defaultValue: 'medium',
+              options: [
+                {
+                  label: 'None',
+                  value: 'none'
+                },
+                {
+                  label: 'Small',
+                  value: 'small'
+                },
+                {
+                  label: 'Medium',
+                  value: 'medium'
+                },
+                {
+                  label: 'Large',
+                  value: 'large'
+                }
+              ],
+              admin: {
+                width: '50%'
+              }
+            },
+            {
+              name: 'alignment',
+              type: 'select',
+              label: 'Alignment',
+              defaultValue: 'start',
+              options: [
+                {
+                  label: 'Start',
+                  value: 'start'
+                },
+                {
+                  label: 'Center',
+                  value: 'center'
+                },
+                {
+                  label: 'End',
+                  value: 'end'
+                },
+                {
+                  label: 'Space Between',
+                  value: 'space-between'
+                }
+              ],
+              admin: {
+                width: '50%'
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      type: 'collapsible',
+      label: 'Color Customization',
+      admin: {
+        initCollapsed: true
+      },
+      fields: [
+        {
+          type: 'row',
+          fields: [
+            {
+              name: 'backgroundColor',
+              type: 'text',
+              label: 'Background Color',
+              admin: {
+                width: '33%',
+                placeholder: 'e.g., #3b82f6, blue-500',
+                description: 'CSS color value or Tailwind class'
+              }
+            },
+            {
+              name: 'textColor',
+              type: 'text',
+              label: 'Text Color',
+              admin: {
+                width: '33%',
+                placeholder: 'e.g., #ffffff, white',
+                description: 'CSS color value or Tailwind class'
+              }
+            },
+            {
+              name: 'borderColor',
+              type: 'text',
+              label: 'Border Color',
+              admin: {
+                width: '33%',
+                placeholder: 'e.g., #3b82f6, border-lime-500',
+                description: 'CSS color value or Tailwind class'
+              }
+            }
+          ]
+        },
+        {
+          type: 'row',
+          fields: [
+            {
+              name: 'borderWidth',
+              type: 'select',
+              label: 'Border Width',
+              defaultValue: '1',
+              options: [
+                { label: 'None', value: '0' },
+                { label: '1px', value: '1' },
+                { label: '2px', value: '2' },
+                { label: '3px', value: '3' },
+                { label: '4px', value: '4' }
+              ],
+              admin: {
+                width: '33%'
+              }
+            },
+            {
+              name: 'borderRadius',
+              type: 'select',
+              label: 'Border Radius',
+              defaultValue: 'full',
+              options: [
+                { label: 'None', value: 'none' },
+                { label: 'Small', value: 'sm' },
+                { label: 'Medium', value: 'md' },
+                { label: 'Large', value: 'lg' },
+                { label: 'Full (Pill)', value: 'full' }
+              ],
+              admin: {
+                width: '33%'
+              }
+            },
+            {
+              name: 'hoverEffect',
+              type: 'checkbox',
+              label: 'Enable Hover Effect',
+              defaultValue: true,
+              admin: {
+                width: '33%'
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      name: 'chips',
+      type: 'array',
+      label: 'Chips',
+      minRows: 1,
+      labels: {
+        singular: 'Chip',
+        plural: 'Chips'
+      },
+      admin: {
+        description: 'Add and manage individual chips',
+        initCollapsed: false
+      },
+      fields: [
+        {
+          type: 'row',
+          fields: [
+            {
+              name: 'label',
+              type: 'text',
+              label: 'Label',
+              required: true,
+              admin: {
+                width: '70%',
+                placeholder: 'Enter chip text'
+              }
+            },
+            {
+              name: 'icon',
+              type: 'text',
+              label: 'Icon (Optional)',
+              admin: {
+                width: '30%',
+                placeholder: 'e.g., ✓, ⭐, 🚀',
+                description: 'Emoji or icon character'
+              }
+            }
+          ]
+        },
+        {
+          type: 'row',
+          fields: [
+            {
+              name: 'customBackgroundColor',
+              type: 'text',
+              label: 'Custom Background',
+              hidden: true,
+              admin: {
+                width: '33%',
+                placeholder: 'Override global',
+                description: 'Leave empty to use global setting'
+              }
+            },
+            {
+              name: 'customTextColor',
+              type: 'text',
+              label: 'Custom Text Color',
+              hidden: true,
+              admin: {
+                width: '33%',
+                placeholder: 'Override global',
+                description: 'Leave empty to use global setting'
+              }
+            },
+            {
+              name: 'customBorderColor',
+              type: 'text',
+              label: 'Custom Border',
+              hidden: true,
+              admin: {
+                width: '33%',
+                placeholder: 'Override global',
+                description: 'Leave empty to use global setting'
+              }
+            }
+          ]
+        },
+        {
+          name: 'link',
+          type: 'text',
+          label: 'Link (Optional)',
+          admin: {
+            placeholder: 'https://example.com or /internal-path',
+            description: 'Make this chip clickable'
+          }
+        }
+      ]
+    },
+    {
+      type: 'collapsible',
+      label: 'Advanced Options',
+      hidden: true,
+      admin: {
+        initCollapsed: true
+      },
+      fields: [
+        {
+          name: 'customClassName',
+          type: 'text',
+          label: 'Custom CSS Class',
+          admin: {
+            placeholder: 'e.g., my-custom-chips',
+            description: 'Add custom CSS classes for additional styling'
+          }
+        },
+        {
+          name: 'animate',
+          type: 'checkbox',
+          label: 'Enable Animation',
+          defaultValue: false,
+          admin: {
+            description: 'Animate chips on scroll into view'
+          }
+        },
+        {
+          type: 'row',
+          fields: [
+            {
+              name: 'maxWidth',
+              type: 'text',
+              label: 'Max Container Width',
+              admin: {
+                width: '50%',
+                placeholder: 'e.g., 800px, 100%',
+                description: 'Maximum width of chip container'
+              }
+            },
+            {
+              name: 'padding',
+              type: 'select',
+              label: 'Container Padding',
+              defaultValue: 'none',
+              options: [
+                { label: 'None', value: 'none' },
+                { label: 'Small', value: 'small' },
+                { label: 'Medium', value: 'medium' },
+                { label: 'Large', value: 'large' }
+              ],
+              admin: {
+                width: '50%'
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,74 @@
+{
+  "type": "block",
+  "name": "DD-Chip",
+  "label": "Chip",
+  "sourceName": "ChipBlock",
+  "portableName": "DD-Chip",
+  "slug": "DD-Chip",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/ROUND-TWO-CONVERSION/ChipBlock",
+    "originalSlug": "chipBlock",
+    "originalConfigExport": "ChipBlock",
+    "originalComponentExport": "ChipBlock",
+    "originalInterfaceName": "DDChip"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-Chip/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-Chip/config.ts"
+    }
+  ],
+  "dependencies": [
+    "framer-motion"
+  ],
+  "sharedFiles": [],
+  "requiredProjectFiles": [],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDChip in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-Chip in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "manualSteps": [
+    "Register DDChip in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-Chip in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can add import { DDChip } from '@/blocks/DD-Chip/config' and add DDChip to clear Pages/Posts block arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-Chip in RenderBlocks."
+    }
+  },
+  "notes": [
+    "Converted from ROUND-TWO-CONVERSION as a portable Dusted template.",
+    "Project-specific imports were replaced with local, dependency-light rendering where required."
+  ],
+  "exportName": "DDChip",
+  "interfaceName": "DDChip"
+}