FEATURE: TS Rewrite

Configuration/Settings.yaml

@@ -2,13 +2,22 @@ Neos:
   Neos:
     Ui:
       resources:
+        stylesheets:
+          Shel.Neos:ColorPickerEditor:
+            resource: resource://Shel.Neos.ColorPicker/Public/ColorPickerEditor/Plugin.css
         javascript:
           Shel.Neos:ColorPickerEditor:
             resource: resource://Shel.Neos.ColorPicker/Public/ColorPickerEditor/Plugin.js
 
       frontendConfiguration:
         'Shel.Neos:ColorPickerEditor':
-          # `mode` can be one of "rgba", "hsla", "hex"
+          # `mode` can be one of "rgba", "hsla", "hex", "preset"
           mode: 'rgba'
+          # Show saturation/hue/alpha
+          picker: false
+          # Show hex/rgba fields
+          fields: false
           # Colors which are available for quick selection
-          presetColors: ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF']
+          presetColors: []
+          # Hides the reset button if set to false
+          allowEmpty: false

README.md

@@ -51,7 +51,7 @@ Add a property of type string and configure the editor as seen in this example:
           group: 'text'
           editor: 'Shel.Neos.ColorPicker/ColorPickerEditor'
           editorOptions:
-            # `mode` can be one of "rgba", "hsla", "hex", default: rgba
+            # `mode` can be one of "rgba", "hsla", "hex", "preset", default: rgba
             mode: 'rgba'
             # Show saturation/hue/alpha (optional), boolean, default: false
             picker: true
@@ -83,15 +83,15 @@ prototype(My.Site:Content.Text) < prototype(Neos.Neos:ContentComponent) {
 
 ## Customization
 
-The editor allows some customization options via your `Settings.yaml` file:
+The editor allows some global default options via your `Settings.yaml` file:
 
 ```yaml
 Neos:
  Neos:
   Ui:
    frontendConfiguration:
     "Shel.Neos:ColorPickerEditor":
-     # `mode` can be one of "rgba", "hsla", "hex"
+     # `mode` can be one of "rgba", "hsla", "hex", "preset"
      mode: "rgba"
      # Colors which are available for quick selection
      presetColors: ["#D0021B", "#F5A623", ...]
@@ -101,7 +101,21 @@ Neos:
 This can be helpful, when the hsl format is needed to get the individual components.
 
 `presetColors` lets you customize the list of color squares that are available for quick selection.
-
+
+## Advanced preset usage
+
+The `presetColors` option can have two shapes.
+One is just a simple list of color strings, the other one is a list of objects with a `color` (hex) and optional `title` and `value` properties.
+
+* `color` - the color (hex) that will be displayed in the preset color squares
+* `title` - (optional) the text that will be displayed on hover
+* `value` - (optional) the value that will be stored in the node property instead of the color value
+
+The `value` can be used to store a value different from the presets color value.
+This value is only used when the `mode` is set to `preset` which in turn will also disable the 
+color picker and the color fields.
+The benefit of this option is that you can show a color value to the user but store a different value in the node property.
+F.e. a CSS classname.
 
 ## Contributions
 

Resources/Private/Scripts/ColorPickerEditor/.babelrc

@@ -0,0 +1,2 @@
+{
+}

Resources/Private/Scripts/ColorPickerEditor/.eslintignore

@@ -0,0 +1 @@
+node_modules

Resources/Private/Scripts/ColorPickerEditor/.eslintrc.js

@@ -0,0 +1,33 @@
+module.exports = {
+    root: true,
+    parser: '@typescript-eslint/parser',
+    extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:react/recommended',
+        'plugin:prettier/recommended',
+        'prettier/@typescript-eslint',
+    ],
+    plugins: ['prettier', 'react', 'react-hooks'],
+    settings: {
+        react: {
+            version: 'detect',
+        },
+    },
+    env: {
+        browser: true,
+        es6: true,
+        node: true,
+    },
+    rules: {
+        '@typescript-eslint/explicit-function-return-type': 'off',
+        '@typescript-eslint/explicit-module-boundary-types': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/no-var-requires': 'off',
+        '@typescript-eslint/ban-ts-ignore': 'off',
+        '@typescript-eslint/ban-ts-comment': 'off',
+        'react/prop-types': 'off',
+        'prettier/prettier': ['error'],
+        'react-hooks/rules-of-hooks': 'error',
+    },
+};

Resources/Private/Scripts/ColorPickerEditor/.nvmrc

@@ -1 +1 @@
-14
+16

Resources/Private/Scripts/ColorPickerEditor/.prettierrc

@@ -0,0 +1,6 @@
+{
+    "printWidth": 120,
+    "semi": true,
+    "singleQuote": true,
+    "tabWidth": 4
+}

Resources/Private/Scripts/ColorPickerEditor/package.json

@@ -1,23 +1,40 @@
 {
-  "description": "Shel.Neos.ColorPicker:ColorPickerEditor",
-  "license": "proprietary",
-  "private": true,
-  "engines": {
-    "node": ">=14"
-  },
-  "scripts": {
-    "build": "NODE_ENV=production neos-react-scripts build",
-    "watch": "neos-react-scripts watch"
-  },
-  "devDependencies": {
-    "@neos-project/eslint-config-neos": "^2.3.0",
-    "@neos-project/neos-ui-extensibility": "^4.0.12",
-    "@neos-project/react-ui-components": "^4.4.8",
-    "eslint": "^6.8.0",
-    "react-color": "^2.19.3",
-    "webpack": "^4.44.2"
-  },
-  "neos": {
-    "buildTargetDirectory": "../../../Public/ColorPickerEditor"
-  }
+    "description": "Shel.Neos.ColorPicker:ColorPickerEditor",
+    "version": "1.0.0",
+    "license": "GPLv3",
+    "private": true,
+    "engines": {
+        "node": ">=16"
+    },
+    "scripts": {
+        "postinstall": "patch-package",
+        "build": "NODE_ENV=production neos-react-scripts build",
+        "watch": "neos-react-scripts watch"
+    },
+    "devDependencies": {
+        "@neos-project/eslint-config-neos": "^2.3.0",
+        "@neos-project/neos-ui-extensibility": "^5.3.18",
+        "@neos-project/react-ui-components": "^5.3.18",
+        "@types/react": "^16.14.32",
+        "@typescript-eslint/eslint-plugin": "^4.11.0",
+        "@typescript-eslint/parser": "^4.11.0",
+        "eslint": "^6.8.0",
+        "eslint-config-prettier": "^7.1.0",
+        "eslint-plugin-prettier": "^3.3.0",
+        "eslint-plugin-react": "^7.21.5",
+        "eslint-plugin-react-hooks": "^4.2.0",
+        "patch-package": "^6.4.7",
+        "prettier": "^2.5.1",
+        "react": "^16.14.0",
+        "react-color": "^2.19.3",
+        "webpack": "^4.44.2"
+    },
+    "neos": {
+        "buildTargetDirectory": "../../../Public/ColorPickerEditor"
+    },
+    "browserslist": [
+        "last 2 versions",
+        "not dead",
+        "> 1%"
+    ]
 }

Resources/Private/Scripts/ColorPickerEditor/patches/@neos-project+build-essentials+5.2.5.patch

@@ -0,0 +1,17 @@
+diff --git a/node_modules/@neos-project/build-essentials/src/postcss.config.js b/node_modules/@neos-project/build-essentials/src/postcss.config.js
+index 7d74e8f..17b22e5 100644
+--- a/node_modules/@neos-project/build-essentials/src/postcss.config.js
++++ b/node_modules/@neos-project/build-essentials/src/postcss.config.js
+@@ -4,9 +4,9 @@ const styleVars = styles.generateCssVarsObject(styles.config);
+ module.exports = {
+     plugins: [
+         require('autoprefixer'),
+-        require('postcss-css-variables')({
+-            variables: Object.assign(styleVars)
+-        }),
++        // require('postcss-css-variables')({
++        //     variables: Object.assign(styleVars)
++        // }),
+         require('postcss-import')(),
+         require('postcss-nested')(),
+         require('postcss-hexrgba')()