feature: Add color tile to value fields

signifly · Oct 3, 2024 · 4ce5557 · 4ce5557
1 parent aac1a3e
commit 4ce5557
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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 && (