innovixx / payload-color-picker-field

The Payload Color Picker that enables an easy color selection field for your Payload projects.
MIT License
10 stars 1 forks source link

Crashed on click field #5

Closed AdamColton8 closed 7 months ago

AdamColton8 commented 7 months ago

Video of my issue https://www.loom.com/share/1d1ab9d1bda0461f83fca0a34a55cd31

import type { Block } from 'payload/types'

import { colorPickerField } from '@innovixx/payload-color-picker-field'

export const infoBlock: Block = {
  slug: 'infoBlock',
  labels: {
    singular: 'Info Block',
    plural: 'Info Blocks',
  },
  fields: [
    {
      name: 'infoBlock',
      type: 'group',
      fields: [
        {
          name: 'title',
          type: 'text',
        },
        {
          name: 'description',
          type: 'textarea',
        },
      ],
    },
  ],
}

export const infoBlocks: Block = {
  slug: 'infoBlocks',
  labels: {
    singular: 'Info Block',
    plural: 'Info Blocks',
  },
  fields: [
    {
      name: 'infoBlocks',
      type: 'group',
      fields: [
        colorPickerField({
          name: 'bgColor',
          label: 'Background Color',
          defaultValue: '#ffffff',
          required: false,
          admin: {
            position: 'sidebar',
            description: 'Choose a color for this section',
          },
        }),
        {
          name: 'title',
          type: 'text',
        },
        {
          label: 'Info Block',
          type: 'collapsible',
          fields: [
            {
              name: 'block',
              type: 'blocks',
              blocks: [infoBlock],
            },
          ],
        },
      ],
    },
  ],
}
kalon-robson commented 7 months ago

Hi @AdamColton8,

I appreciate you taking the time to open this issue. Could you please let me know which version of Payload you are using? I will attempt to recreate the issue.

Kind Regards, Kalon Robson

AdamColton8 commented 7 months ago

Hi @kalon-robson ,

"payload": "^2.0.0", "payload-admin-bar": "^1.0.6",

Please advise, thanks

{
  "name": "payloadcms",
  "description": "E-commerce template for Payload",
  "version": "1.0.0",
  "main": "dist/server.js",
  "license": "MIT",
  "scripts": {
    "dev": "cross-env PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts nodemon",
    "seed": "rm -rf media && cross-env PAYLOAD_SEED=true PAYLOAD_DROP_DATABASE=true PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts ts-node src/server.ts",
    "build:payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts payload build",
    "build:server": "tsc --project tsconfig.server.json",
    "build": "cross-env NODE_ENV=production pnpm build:payload && pnpm build:server && pnpm run copyfiles",
    "serve": "cross-env PAYLOAD_CONFIG_PATH=dist/payload/payload.config.js NODE_ENV=production node dist/server.js",
    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,js}\" dist/",
    "generate:types": "cross-env PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts payload generate:types",
    "generate:graphQLSchema": "PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts payload generate:graphQLSchema",
    "lint": "eslint src",
    "lint:fix": "eslint --fix --ext .ts,.tsx src",
    "payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts payload"
  },
  "dependencies": {
    "@payloadcms/bundler-webpack": "^1.0.0",
    "@payloadcms/db-postgres": "^0.x",
    "@payloadcms/plugin-cloud": "^3.0.0",
    "@payloadcms/plugin-nested-docs": "^1.0.8",
    "@payloadcms/plugin-redirects": "^1.0.0",
    "@payloadcms/plugin-seo": "^1.0.10",
    "@payloadcms/plugin-stripe": "^0.0.19",
    "@payloadcms/richtext-slate": "^1.0.0",
    "@shopify/admin-api-client": "^0.2.8",
    "@stripe/react-stripe-js": "^1.16.3",
    "@stripe/stripe-js": "^1.46.0",
    "airtable": "^0.11.6",
    "cross-env": "^7.0.3",
    "dotenv": "^8.2.0",
    "escape-html": "^1.0.3",
    "express": "^4.17.1",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "moment-timezone": "^0.5.34",
    "node-cron": "^3.0.3",
    "payload": "^2.0.0",
    "payload-admin-bar": "^1.0.6",
    "pnpm": "^8.15.4",
    "qs": "6.11.2",
    "react": "^18.2.0",
    "react-hook-form": "7.45.4",
    "react-router-dom": "5.3.4",
    "stripe": "^10.2.0"
  },
  "devDependencies": {
    "@payloadcms/eslint-config": "^0.0.1",
    "@swc/core": "1.3.76",
    "@types/escape-html": "^1.0.2",
    "@types/express": "^4.17.9",
    "@types/lodash": "^4.14.182",
    "@types/node": "18.11.3",
    "@types/qs": "^6.9.8",
    "@types/react": "18.0.21",
    "@typescript-eslint/eslint-plugin": "^5.51.0",
    "@typescript-eslint/parser": "^5.51.0",
    "copyfiles": "^2.4.1",
    "eslint": "^8.19.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-plugin-filenames": "^1.3.2",
    "eslint-plugin-import": "2.25.4",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-simple-import-sort": "^10.0.0",
    "nodemon": "^2.0.6",
    "prettier": "^2.7.1",
    "slate": "0.91.4",
    "ts-node": "10.9.1",
    "typescript": "^4.8.4"
  },
  "browser": {
    "fs": false,
    "path": false,
    "os": false
  }
}
kalon-robson commented 7 months ago

@AdamColton8 Fixed the above and sliced a release. Please update to v1.1.1