Update: Make labls translateable

.editorconfig

@@ -0,0 +1,28 @@
+# http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Default
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = space
+indent_size = 4
+
+# Exceptions
+[*.yaml]
+indent_size = 2
+
+[*.js]
+max_line_length = 120
+
+[*.md]
+trim_trailing_whitespace = false
+max_line_length = 80
+indent_size = 2
+
+[Makefile]
+indent_style = tab

.gitattributes

@@ -1,4 +1,12 @@
-/.github export-ignore
+/.editorconfig export-ignore
 /.gitattributes export-ignore
+/.github export-ignore
 /.gitignore export-ignore
-/CODE_OF_CONDUCT export-ignore
+/.nvmrc export-ignore
+/.prettierrc export-ignore
+/build.mjs export-ignore
+/CODE_OF_CONDUCT.md export-ignore
+/LICENSE export-ignore
+/Makefile export-ignore
+/package.json export-ignore
+/pnpm-lock.yaml export-ignore

.gitignore

@@ -1 +1,7 @@
+._*
+*.example
+.thumbs
+.idea
+.vscode
+.DS_Store
 node_modules

.nvmrc

@@ -0,0 +1 @@
+18

.prettierignore

@@ -0,0 +1,3 @@
+composer.json
+pnpm-lock.yaml
+Resources/Public/**/*

.prettierrc

@@ -0,0 +1,10 @@
+{
+    "overrides": [
+      {
+        "files": ["*.yaml", "*.yml"],
+        "options": {
+          "singleQuote": true
+        }
+      }
+    ]
+  }

Makefile

@@ -0,0 +1,56 @@
+.PHONY: help install watch dev production build prettier
+
+.DEFAULT_GOAL := production
+
+## Prettier files
+prettier:
+	pnpm prettier --write --no-error-on-unmatched-pattern '**/*.{js,php,yaml,css}'
+
+## Install dependencies and build production version
+production: install prettier build
+
+## Install dependencies
+install:
+	pnpm install
+
+
+## Watch for changes in JS and CSS files
+watch:
+	pnpm watch
+
+## Build development version
+dev:
+	pnpm dev
+
+## Build production version
+build:
+	pnpm build
+
+# Define colors
+GREEN  := $(shell tput -Txterm setaf 2)
+YELLOW := $(shell tput -Txterm setaf 3)
+WHITE  := $(shell tput -Txterm setaf 7)
+RESET  := $(shell tput -Txterm sgr0)
+
+# define indention for descriptions
+TARGET_MAX_CHAR_NUM=15
+
+## Show help
+help:
+	@echo ''
+	@echo '${GREEN}CLI command list:${RESET}'
+	@echo ''
+	@echo 'Usage:'
+	@echo '  ${YELLOW}make${RESET} ${GREEN}<target>${RESET}'
+	@echo ''
+	@echo 'Targets:'
+	@awk '/^[a-zA-Z\-\_0-9]+:/ { \
+		helpMessage = match(lastLine, /^## (.*)/); \
+		if (helpMessage) { \
+			helpCommand = substr($$1, 0, index($$1, ":")-1); \
+			helpMessage = substr(lastLine, RSTART + 3, RLENGTH); \
+			printf "  ${YELLOW}%-$(TARGET_MAX_CHAR_NUM)s${RESET} ${GREEN}%s${RESET}\n", helpCommand, helpMessage; \
+		} \
+	} \
+	{ lastLine = $$0 }' $(MAKEFILE_LIST)
+	@echo ''

Resources/Private/Editor/ColorValuesEditor/index.js

@@ -0,0 +1,101 @@
+import React from "react";
+import { neos } from "@neos-project/neos-ui-decorators";
+import { IconButton } from "@neos-project/react-ui-components";
+import style from "./style.module.css";
+
+const neosifier = neos((globalRegistry) => ({
+    i18nRegistry: globalRegistry.get("i18n"),
+    config: globalRegistry.get("frontendConfiguration").get("Carbon.RangeEditor"),
+}));
+
+const defaultProps = {
+    options: {
+        allowEmpty: true,
+        disabled: false,
+        placeholder: null,
+        resetLabel: "Reset",
+    },
+};
+
+function Editor(props) {
+    const onReset = () => {
+        props.commit("");
+    };
+
+    const options = { ...defaultProps.options, ...props.options };
+    const { commit, value, highlight, i18nRegistry } = props;
+    const { disabled, values } = options;
+
+    const previewBoxAttributes = (value, placeholder) => {
+        const hasValue = value && Object.prototype.hasOwnProperty.call(values, value);
+        const color = hasValue ? values[value].color : placeholder;
+        const title = hasValue ? i18nRegistry.translate(values[value].label) : null;
+        const classNames = [style.feedback];
+
+        if (value == "transparent" || (!hasValue && placeholder == "transparent")) {
+            classNames.push(style.transparent);
+        }
+
+        if (!hasValue && !placeholder) {
+            classNames.push(style.checkboard);
+        }
+
+        return {
+            className: classNames.filter((item) => !!item).join(" "),
+            style: { backgroundColor: color },
+            title,
+        };
+    };
+
+    if (!values) {
+        return <div className={style.error}>No color values defined, please add them to your YAML configuration</div>;
+    }
+
+    const allowEmpty = options.allowEmpty || Object.prototype.hasOwnProperty.call(values, "");
+    const valueArray = [];
+
+    for (const key in values) {
+        const item = values[key];
+        valueArray.push({
+            label: i18nRegistry.translate(item.label),
+            color: item.color,
+            disabled: item.disabled,
+            key,
+        });
+    }
+
+    return (
+        <div className={options.disabled && style.disabled}>
+            <div className={style.wrapper}>
+                <div {...previewBoxAttributes(value, options.placeholder)}></div>
+                {allowEmpty && (
+                    <div className={style.reset}>
+                        <IconButton
+                            style="lighter"
+                            icon="times"
+                            title={i18nRegistry.translate(options.resetLabel)}
+                            onClick={onReset}
+                        />
+                    </div>
+                )}
+            </div>
+            <div className={style.list}>
+                {valueArray.map((item) => {
+                    return item.color ? (
+                        <button
+                            className={[style.item, item.color == "transparent" && style.transparent].join(" ")}
+                            disabled={item.disabled}
+                            style={{ backgroundColor: item.color }}
+                            title={item.label}
+                            onClick={() => commit(item.key)}
+                        ></button>
+                    ) : (
+                        <div className={style.label}>{item.label}</div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}
+
+export default neosifier(Editor);

Resources/Private/Editor/ColorValuesEditor/style.module.css

@@ -0,0 +1,72 @@
+.wrapper {
+    display: flex;
+}
+
+.error {
+    background-color: #ff460d;
+    color: #fff;
+    margin-left: -16px;
+    margin-right: -16px;
+    padding: 10px 16px;
+}
+
+.feedback {
+    flex: 1;
+    height: 40px;
+    border: 1px solid #3f3f3f;
+}
+
+.transparent,
+.checkboard {
+    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".25"><rect x="200" width="200" height="200" /><rect y="200" width="200" height="200" /></svg>');
+    background-size: 16px 16px;
+}
+
+.transparent {
+    background-color: #fff !important;
+}
+
+.list {
+    flex: 1;
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 10px;
+    margin-top: 10px;
+    padding-top: 15px;
+    border-top: 1px solid #3f3f3f;
+}
+
+.label {
+    flex: 1 0 100%;
+    margin-bottom: -10px;
+}
+
+.item {
+    border: 1px solid #3f3f3f;
+    border-radius: 2px;
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+    flex: 0 0 18px;
+}
+
+.item:hover,
+.item:focus {
+    box-shadow: 0 0 0 1px #00adee;
+}
+
+.item[disabled],
+.disabled {
+    cursor: not-allowed;
+    opacity: 0.65;
+}
+
+.disabled > * {
+    pointer-events: none;
+}
+
+.reset {
+    margin-left: 10px;
+}

Resources/Private/Editor/manifest.js

@@ -0,0 +1,11 @@
+import manifest from "@neos-project/neos-ui-extensibility";
+
+import ColorValuesEditor from "./ColorValuesEditor";
+
+manifest("Carbon.ColorValues:Editor", {}, (globalRegistry) => {
+    const editorsRegistry = globalRegistry.get("inspector").get("editors");
+
+    editorsRegistry.set("Carbon.ColorValues/Editor", {
+        component: ColorValuesEditor,
+    });
+});