From 4ce5557043b64ed6e064d8b6926921517bab61ba Mon Sep 17 00:00:00 2001
From: Casper Juel <cj@signifly.com>
Date: Thu, 3 Oct 2024 11:11:01 +0200
Subject: [PATCH] feature: Add color tile to value fields

---
 package.json                                  |  8 ++--
 .../KeyValuePair/KeyValuePair.module.css      | 12 ++++++
 src/components/KeyValuePair/KeyValuePair.tsx  | 41 +++++++++++--------
 3 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/package.json b/package.json
index a0d5f88..cd0e998 100644
--- a/package.json
+++ b/package.json
@@ -1,13 +1,13 @@
 {
-  "name": "datocms-plugin-json-table",
+  "name": "datocms-plugin-json-colorscheme-table",
   "homepage": "https://github.com/voorhoede/datocms-plugin-json-table",
-  "version": "2.1.0",
-  "description": "A plugin for DatoCMS that makes it possible to add/insert a key and value and output a simple JSON table",
+  "version": "1.0.0",
+  "description": "A plugin for DatoCMS that makes it possible to add/insert a key and value and output a simple JSON colorscheme table",
   "engines": {
     "node": ">=18.0.0"
   },
   "scripts": {
-    "start": "cross-env BROWSER='none' PUBLIC_URL='/' webpack-dev-server --mode=development",
+    "start": "cross-env BROWSER='none' PUBLIC_URL='/' webpack-dev-server --port=8080 --mode=development",
     "build": "cross-env PUBLIC_URL='.' webpack --mode=production",
     "prettier": "prettier --write .",
     "pre-commit": "npm run prettier",
diff --git a/src/components/KeyValuePair/KeyValuePair.module.css b/src/components/KeyValuePair/KeyValuePair.module.css
index fed0e83..016a3fb 100644
--- a/src/components/KeyValuePair/KeyValuePair.module.css
+++ b/src/components/KeyValuePair/KeyValuePair.module.css
@@ -8,4 +8,16 @@
   width: 100%;
   max-width: 40%;
   margin-right: var(--spacing-m);
+  position: relative;
+  padding-left: 20px;
+}
+
+.colorTile {
+  position: absolute;
+  left: 0px;
+  width: 9px;
+  height: 100%;
+  display: block;
+  margin-right: var(--spacing-s);
+  border: 1px solid #ccc;
 }
diff --git a/src/components/KeyValuePair/KeyValuePair.tsx b/src/components/KeyValuePair/KeyValuePair.tsx
index 54435d3..947fc34 100644
--- a/src/components/KeyValuePair/KeyValuePair.tsx
+++ b/src/components/KeyValuePair/KeyValuePair.tsx
@@ -1,7 +1,8 @@
-import { useState, MouseEvent } from 'react'
-import { Button, TextField, FieldGroup } from 'datocms-react-ui'
 import * as styles from './KeyValuePair.module.css'
 
+import { Button, FieldGroup, TextField } from 'datocms-react-ui'
+import { MouseEvent, useState } from 'react'
+
 type Props = {
   id: string
   keyPair: string
@@ -67,20 +68,28 @@ export default function KeyValuePair({
       </FieldGroup>
 
       <FieldGroup className={styles.fieldGroup}>
-        <TextField
-          required={isRequired}
-          error={isRequired && inputValue === '' ? 'Value is required' : ''}
-          name={`${id}-value`}
-          id={`${id}-value`}
-          label="Change value of the key"
-          value={inputValue}
-          onChange={handleValueChange}
-          formLabelProps={{
-            children: <></>,
-            htmlFor: `${id}-value`,
-            className: 'sr-only',
-          }}
-        />
+        <>
+          <div
+            className={styles.colorTile}
+            style={{
+              backgroundColor: `${inputValue}`,
+            }}
+          ></div>
+          <TextField
+            required={isRequired}
+            error={isRequired && inputValue === '' ? 'Value is required' : ''}
+            name={`${id}-value`}
+            id={`${id}-value`}
+            label="Change value of the key"
+            value={inputValue}
+            onChange={handleValueChange}
+            formLabelProps={{
+              children: <></>,
+              htmlFor: `${id}-value`,
+              className: 'sr-only',
+            }}
+          />
+        </>
       </FieldGroup>
 
       {!inputIsDisabled && (