@open-keystone/fields-color 2.0.0

package/CHANGELOG.md

@@ -0,0 +1,169 @@
+# @keystonejs/fields-color
+
+## 2.0.0
+
+### Major Changes
+
+- Changed @keystonejs scope to @open-keystone
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @open-keystone/fields@23.0.0
+  - @arch-ui/button@0.1.0
+  - @arch-ui/fields@3.1.0
+  - @arch-ui/popout@0.1.0
+
+## 1.1.2
+
+### Patch Changes
+
+- [#95](https://github.com/keystonejs/keystone-5/pull/95) [`c8ff78b95`](https://github.com/keystonejs/keystone-5/commit/c8ff78b95af5d56d44bbc11c51e7cf28b81323b4) Thanks [@bladey](https://github.com/bladey)! - Renamed branch `master` to `main`.
+
+- Updated dependencies [[`c8ff78b95`](https://github.com/keystonejs/keystone-5/commit/c8ff78b95af5d56d44bbc11c51e7cf28b81323b4)]:
+  - @arch-ui/button@0.0.25
+  - @arch-ui/fields@3.0.8
+  - @arch-ui/popout@0.0.26
+  - @keystonejs/fields@22.1.3
+
+## 1.1.1
+
+### Patch Changes
+
+- [#95](https://github.com/keystonejs/keystone-5/pull/95) [`a890b0576`](https://github.com/keystonejs/keystone-5/commit/a890b057628b60c2d1870cc3f5afd8e87b03f7df) Thanks [@bladey](https://github.com/bladey)! - Renamed branch `master` to `main`.
+
+- Updated dependencies [[`a890b0576`](https://github.com/keystonejs/keystone-5/commit/a890b057628b60c2d1870cc3f5afd8e87b03f7df)]:
+  - @arch-ui/button@0.0.24
+  - @arch-ui/fields@3.0.7
+  - @arch-ui/popout@0.0.25
+  - @keystonejs/fields@22.1.2
+
+## 1.1.0
+
+### Minor Changes
+
+- [`345a5f0f6`](https://github.com/keystonejs/keystone-5/commit/345a5f0f66a34c75696230ad2fcfb7a2eac86cb4) [#23](https://github.com/keystonejs/keystone-5/pull/23) Thanks [@bladey](https://github.com/bladey)! - Keystone 5 is now in a 6 to 12 month active maintenance phase, packages will no longer have active development releases. For more information please read our Keystone 5 and beyond post located here - https://github.com/keystonejs/keystone-5/issues/21
+
+### Patch Changes
+
+- Updated dependencies [[`345a5f0f6`](https://github.com/keystonejs/keystone-5/commit/345a5f0f66a34c75696230ad2fcfb7a2eac86cb4)]:
+  - @keystonejs/fields@22.1.0
+
+## 1.0.11
+
+### Patch Changes
+
+- [`04bf1e4bb`](https://github.com/keystonejs/keystone-5/commit/04bf1e4bb0223f4e2e06664bbc9e95c51118eb84) [#2](https://github.com/keystonejs/keystone-5/pull/2) Thanks [@bladey](https://github.com/bladey)! - Updated repository URL in package.json.
+
+- Updated dependencies [[`04bf1e4bb`](https://github.com/keystonejs/keystone-5/commit/04bf1e4bb0223f4e2e06664bbc9e95c51118eb84)]:
+  - @arch-ui/button@0.0.23
+  - @arch-ui/fields@3.0.6
+  - @arch-ui/popout@0.0.24
+  - @keystonejs/fields@22.0.1
+
+## 1.0.10
+
+### Patch Changes
+
+- Updated dependencies [[`b97216a65`](https://github.com/keystonejs/keystone-5/commit/b97216a6526fffcca8232d86b115c28cb19587bf), [`4035218df`](https://github.com/keystonejs/keystone-5/commit/4035218df390beff3d42c0d3fc21335230d8a60d), [`8d0be8a89`](https://github.com/keystonejs/keystone-5/commit/8d0be8a89e2d9b89826365f81f47b8d8863b93d0)]:
+  - @keystonejs/fields@22.0.0
+
+## 1.0.9
+
+### Patch Changes
+
+- Updated dependencies [[`364ac9254`](https://github.com/keystonejs/keystone-5/commit/364ac9254735befd2d4804789bb62464bb51ee5b), [`841be0bc9`](https://github.com/keystonejs/keystone-5/commit/841be0bc9d192cf64399231a543a9ba9ff41b9a0)]:
+  - @keystonejs/fields@21.0.0
+
+## 1.0.8
+
+### Patch Changes
+
+- Updated dependencies [[`c62a35fe0`](https://github.com/keystonejs/keystone-5/commit/c62a35fe0834ec60e2472b22feedda539d18a918), [`8d7056c8e`](https://github.com/keystonejs/keystone-5/commit/8d7056c8ed8d4fccfd61e64fc5fc2caf65899cee)]:
+  - @keystonejs/fields@20.1.1
+  - @arch-ui/popout@0.0.23
+
+## 1.0.7
+
+### Patch Changes
+
+- Updated dependencies [[`a5e40e6c4`](https://github.com/keystonejs/keystone-5/commit/a5e40e6c4af1ab38cc2079a0f6e27d39d6b7d546), [`2d660b2a1`](https://github.com/keystonejs/keystone-5/commit/2d660b2a1dd013787e022cad3a0c70dbe08c60da)]:
+  - @keystonejs/fields@20.0.0
+
+## 1.0.6
+
+### Patch Changes
+
+- Updated dependencies [[`e5efd0ef3`](https://github.com/keystonejs/keystone-5/commit/e5efd0ef3d6943534cb6c728afe5dbf0caf43e74)]:
+  - @keystonejs/fields@19.0.0
+
+## 1.0.5
+
+### Patch Changes
+
+- Updated dependencies [[`a02e69987`](https://github.com/keystonejs/keystone-5/commit/a02e69987902cfde38d820e68cb24b7a20ca1f6f), [`f70c9f1ba`](https://github.com/keystonejs/keystone-5/commit/f70c9f1ba7452b54a15ab71943a3777d5b6dade4)]:
+  - @keystonejs/fields@18.0.0
+
+## 1.0.4
+
+### Patch Changes
+
+- Updated dependencies [[`b32f006ad`](https://github.com/keystonejs/keystone-5/commit/b32f006ad283f8aa1911f55bbecac9942f3f9f25), [`6f42b0a9d`](https://github.com/keystonejs/keystone-5/commit/6f42b0a9d231049f9e7523eb78ec621d9c9d6df9), [`ecbe1471f`](https://github.com/keystonejs/keystone-5/commit/ecbe1471fe22ca029a178a57dc216f6445b4053a), [`27783bbca`](https://github.com/keystonejs/keystone-5/commit/27783bbca3b1c5ff05402738c14ffa8db73e542b), [`304701d7c`](https://github.com/keystonejs/keystone-5/commit/304701d7c23e98c8dc40c0f3f5512a0370107c06), [`aa5b4aa26`](https://github.com/keystonejs/keystone-5/commit/aa5b4aa269eebc6931d30f6eddc315805c1f4fef), [`b6e160678`](https://github.com/keystonejs/keystone-5/commit/b6e160678b449707261a54a9d565b91663784831)]:
+  - @keystonejs/fields@17.1.3
+  - @arch-ui/popout@0.0.22
+  - @arch-ui/button@0.0.22
+  - @arch-ui/fields@3.0.5
+
+## 1.0.3
+
+### Patch Changes
+
+- [`6c97a5534`](https://github.com/keystonejs/keystone-5/commit/6c97a5534e8a18d15aeac8b0471810fdd4d04f80) [#3577](https://github.com/keystonejs/keystone-5/pull/3577) Thanks [@timleslie](https://github.com/timleslie)! - Updated test framework to support more detailed field tests.
+
+* [`2e6a06202`](https://github.com/keystonejs/keystone-5/commit/2e6a06202299b36c36fd3efd895f2280479eac31) [#3532](https://github.com/keystonejs/keystone-5/pull/3532) Thanks [@timleslie](https://github.com/timleslie)! - Consolidated filter tests across all field types.
+  Fixed errors with filtering by `null` in the `Decimal`, `MongoId` and `Uuid` field types.
+* Updated dependencies [[`cd15192cd`](https://github.com/keystonejs/keystone-5/commit/cd15192cdae5e476f64a257c196ca569a9440d5a), [`d500613d8`](https://github.com/keystonejs/keystone-5/commit/d500613d8917e3cbcea2817501d607eddd3b1a8d), [`6c97a5534`](https://github.com/keystonejs/keystone-5/commit/6c97a5534e8a18d15aeac8b0471810fdd4d04f80), [`34fcc7052`](https://github.com/keystonejs/keystone-5/commit/34fcc7052a24db61f1f2f12c46110c060934f4ca), [`c3488c5e8`](https://github.com/keystonejs/keystone-5/commit/c3488c5e88628b15eb9fe804551c3c5c44c07e0f), [`e62b3308b`](https://github.com/keystonejs/keystone-5/commit/e62b3308bd841b5f58ac9fa1f84707f9187fda6b), [`7036585f2`](https://github.com/keystonejs/keystone-5/commit/7036585f25c3b690b7a6fd04c39b5b781ff5bcd9), [`2e6a06202`](https://github.com/keystonejs/keystone-5/commit/2e6a06202299b36c36fd3efd895f2280479eac31), [`a42ee3a30`](https://github.com/keystonejs/keystone-5/commit/a42ee3a306c899a7ae46909fe132522cbeff7812), [`438051442`](https://github.com/keystonejs/keystone-5/commit/4380514421020f4418a9f966c9fec60e014478b9), [`b3aa85031`](https://github.com/keystonejs/keystone-5/commit/b3aa850311cbc1622568f69f9cb4b9f46ab9db22), [`518718e19`](https://github.com/keystonejs/keystone-5/commit/518718e197d0a2d723c8e184552ddd5d8e165f12), [`28b88abd3`](https://github.com/keystonejs/keystone-5/commit/28b88abd369f0df12eae72107db7c24323eda4b5), [`16e4d91a2`](https://github.com/keystonejs/keystone-5/commit/16e4d91a20cc6a079c60ea9801381da55444b1e1)]:
+  - @keystonejs/fields@17.1.1
+  - @arch-ui/popout@0.0.21
+
+## 1.0.2
+
+### Patch Changes
+
+- [`5935b89f8`](https://github.com/keystonejs/keystone-5/commit/5935b89f8862b36f14d09da68f056f759a860f3e) [#3477](https://github.com/keystonejs/keystone-5/pull/3477) Thanks [@Noviny](https://github.com/Noviny)! - Updating dependencies:
+
+  These changes bring the keystone dev experience inline with installing keystone from npm :D
+
+* [`ac44568f9`](https://github.com/keystonejs/keystone-5/commit/ac44568f91fd54ccbc39accf83bcfb3276ce1a72) [#3500](https://github.com/keystonejs/keystone-5/pull/3500) Thanks [@timleslie](https://github.com/timleslie)! - Updated test scripts to be more consistent.
+
+- [`483b20ec5`](https://github.com/keystonejs/keystone-5/commit/483b20ec53ff89f1d026c0495fdae5df60a7cf59) [#3487](https://github.com/keystonejs/keystone-5/pull/3487) Thanks [@singhArmani](https://github.com/singhArmani)! - Updated CRUD API tests for field types.
+
+* [`ea367f759`](https://github.com/keystonejs/keystone-5/commit/ea367f7594f47efc3528d9917cce010b3a16bf4d) [#3435](https://github.com/keystonejs/keystone-5/pull/3435) Thanks [@singhArmani](https://github.com/singhArmani)! - Updated `required` and `uniqueness` tests for field API.
+
+* Updated dependencies [[`6cb4476ff`](https://github.com/keystonejs/keystone-5/commit/6cb4476ff15923933862c1cd7d4b1ade794106c6), [`5935b89f8`](https://github.com/keystonejs/keystone-5/commit/5935b89f8862b36f14d09da68f056f759a860f3e), [`ac44568f9`](https://github.com/keystonejs/keystone-5/commit/ac44568f91fd54ccbc39accf83bcfb3276ce1a72), [`877a5a90d`](https://github.com/keystonejs/keystone-5/commit/877a5a90d608f0a13b6c0ea103cb96e3ac2caacc), [`483b20ec5`](https://github.com/keystonejs/keystone-5/commit/483b20ec53ff89f1d026c0495fdae5df60a7cf59), [`0fc878fa9`](https://github.com/keystonejs/keystone-5/commit/0fc878fa918c3196196f943f195ffaa62fce504b), [`ea367f759`](https://github.com/keystonejs/keystone-5/commit/ea367f7594f47efc3528d9917cce010b3a16bf4d), [`69d627813`](https://github.com/keystonejs/keystone-5/commit/69d627813adfc10d29707f5c882ca15621de12a5), [`0153168d7`](https://github.com/keystonejs/keystone-5/commit/0153168d73ce8cd7ede4eb9c8518e5e2bf859709)]:
+  - @arch-ui/popout@0.0.20
+  - @keystonejs/fields@17.1.0
+  - @arch-ui/button@0.0.21
+  - @arch-ui/fields@3.0.4
+
+## 1.0.1
+
+### Patch Changes
+
+- [`c906858bb`](https://github.com/keystonejs/keystone-5/commit/c906858bb76630f284332b9532a17de75c0c0f33) [#3404](https://github.com/keystonejs/keystone-5/pull/3404) Thanks [@singhArmani](https://github.com/singhArmani)! - Updated filter and CRUD tests for `Color` field type.
+
+- Updated dependencies [[`d38c9174f`](https://github.com/keystonejs/keystone-5/commit/d38c9174f8146ad6e268be87cf5d54d5074bc593), [`e8b2e4772`](https://github.com/keystonejs/keystone-5/commit/e8b2e477206acffb143f19fb14be1e3b4cd0eb91)]:
+  - @keystonejs/fields@17.0.0
+
+## 1.0.0
+
+### Major Changes
+
+- [`e44102e9f`](https://github.com/keystonejs/keystone-5/commit/e44102e9f7f770b1528d642d763ccf9f88f3cbb1) [#3307](https://github.com/keystonejs/keystone-5/pull/3307) Thanks [@MadeByMike](https://github.com/MadeByMike)! - Moved the `Color` field from `@keystonejs/fields` to `@keystonejs/fields-color`.
+
+  Note: If using the `Color` field you need to update imports to point to `@keystonejs/fields-color`.
+
+### Patch Changes
+
+- Updated dependencies [[`d38a41f25`](https://github.com/keystonejs/keystone-5/commit/d38a41f25a1b4c90c05d2fb85116dc385d4ee77a), [`5ede731fc`](https://github.com/keystonejs/keystone-5/commit/5ede731fc58a79e7322b852bdd2d971ece45281e), [`1d9068770`](https://github.com/keystonejs/keystone-5/commit/1d9068770d03658954044c530e56e66169667e25), [`694f3acfb`](https://github.com/keystonejs/keystone-5/commit/694f3acfb9faa78aebfcf48cf711165560f16ff7), [`149d6fd6f`](https://github.com/keystonejs/keystone-5/commit/149d6fd6ff057c17570346063c173376769dcc79), [`e44102e9f`](https://github.com/keystonejs/keystone-5/commit/e44102e9f7f770b1528d642d763ccf9f88f3cbb1)]:
+  - @keystonejs/fields@16.0.0

package/README.md

@@ -0,0 +1,31 @@
+<!--[meta]
+section: api
+subSection: field-types
+title: Color
+[meta]-->
+
+# Color
+
+> This is the last active development release of this package as **Keystone 5** is now in a 6 to 12 month active maintenance phase. For more information please read our [Keystone 5 and beyond](https://github.com/keystonejs/keystone-5/issues/21) post.
+
+Stores hexadecimal RGBA (Red, Green, Blue, Alpha) color values.
+Presented in the Admin UI as an interactive color picker.
+
+## Usage
+
+```js
+const { Color } = require('@open-keystone/fields-color');
+
+keystone.createList('Product', {
+  fields: {
+    heroColor: { type: Color },
+  },
+});
+```
+
+## Config
+
+| Option       | Type      | Default | Description                                                     |
+| ------------ | --------- | ------- | --------------------------------------------------------------- |
+| `isRequired` | `Boolean` | `false` | Does this field require a value?                                |
+| `isUnique`   | `Boolean` | `false` | Adds a unique index that allows only unique values to be stored |

package/dist/fields-color.cjs.dev.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var fields = require('@open-keystone/fields');
+var path = require('path');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var path__default = /*#__PURE__*/_interopDefault(path);
+
+const pkgDir = path__default["default"].dirname(require.resolve('@open-keystone/fields-color/package.json'));
+const Color = {
+  type: 'Color',
+  implementation: fields.Text.implementation,
+  views: {
+    Controller: fields.Text.views.Controller,
+    Field: path__default["default"].join(pkgDir, 'views/Field'),
+    Cell: path__default["default"].join(pkgDir, 'views/Cell'),
+    Filter: fields.Text.views.Filter
+  },
+  adapters: fields.Text.adapters
+};
+
+exports.Color = Color;

package/dist/fields-color.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./fields-color.cjs.prod.js");
+} else {
+  module.exports = require("./fields-color.cjs.dev.js");
+}

package/dist/fields-color.cjs.prod.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var fields = require('@open-keystone/fields');
+var path = require('path');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var path__default = /*#__PURE__*/_interopDefault(path);
+
+const pkgDir = path__default["default"].dirname(require.resolve('@open-keystone/fields-color/package.json'));
+const Color = {
+  type: 'Color',
+  implementation: fields.Text.implementation,
+  views: {
+    Controller: fields.Text.views.Controller,
+    Field: path__default["default"].join(pkgDir, 'views/Field'),
+    Cell: path__default["default"].join(pkgDir, 'views/Cell'),
+    Filter: fields.Text.views.Filter
+  },
+  adapters: fields.Text.adapters
+};
+
+exports.Color = Color;

package/dist/fields-color.esm.js

@@ -0,0 +1,17 @@
+import { Text } from '@open-keystone/fields';
+import path from 'path';
+
+const pkgDir = path.dirname(require.resolve('@open-keystone/fields-color/package.json'));
+const Color = {
+  type: 'Color',
+  implementation: Text.implementation,
+  views: {
+    Controller: Text.views.Controller,
+    Field: path.join(pkgDir, 'views/Field'),
+    Cell: path.join(pkgDir, 'views/Cell'),
+    Filter: Text.views.Filter
+  },
+  adapters: Text.adapters
+};
+
+export { Color };

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@open-keystone/fields-color",
+  "description": "KeystoneJS Color Field Type",
+  "version": "2.0.0",
+  "author": "The KeystoneJS Development Team",
+  "license": "MIT",
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "dependencies": {
+    "@arch-ui/button": "^0.1.0",
+    "@arch-ui/fields": "^3.1.0",
+    "@arch-ui/popout": "^0.1.0",
+    "@babel/runtime": "^7.14.6",
+    "@emotion/core": "^10.1.1",
+    "@open-keystone/fields": "^23.0.0",
+    "react-color": "^2.19.3"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2"
+  },
+  "devDependencies": {
+    "@open-keystone/server-side-graphql-client": "^2.1.3",
+    "react": "^17.0.2"
+  },
+  "main": "dist/fields-color.cjs.js",
+  "module": "dist/fields-color.esm.js",
+  "repository": "https://github.com/keystonejs/keystone-5/tree/main/packages/fields-color",
+  "preconstruct": {
+    "entrypoints": [
+      "index.js",
+      "views/*.js"
+    ]
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/index.js

@@ -0,0 +1,16 @@
+import { Text } from '@open-keystone/fields';
+import path from 'path';
+
+const pkgDir = path.dirname(require.resolve('@open-keystone/fields-color/package.json'));
+
+export const Color = {
+  type: 'Color',
+  implementation: Text.implementation,
+  views: {
+    Controller: Text.views.Controller,
+    Field: path.join(pkgDir, 'views/Field'),
+    Cell: path.join(pkgDir, 'views/Cell'),
+    Filter: Text.views.Filter,
+  },
+  adapters: Text.adapters,
+};

package/src/test-fixtures.js

@@ -0,0 +1,43 @@
+import { Text } from '@open-keystone/fields';
+import { Color } from '.';
+
+export const name = 'Color';
+export const type = Color;
+export const exampleValue = () => 'red';
+export const exampleValue2 = () => 'green';
+export const supportsUnique = true;
+export const fieldName = 'testField';
+
+export const getTestFields = () => ({ name: { type: Text }, testField: { type } });
+
+export const initItems = () => {
+  return [
+    { name: 'a', testField: '' },
+    { name: 'b', testField: 'other' },
+    { name: 'c', testField: 'FOOBAR' },
+    { name: 'd', testField: 'fooBAR' },
+    { name: 'e', testField: 'foobar' },
+    { name: 'f', testField: null },
+    { name: 'g' },
+  ];
+};
+
+export const storedValues = () => [
+  { name: 'a', testField: '' },
+  { name: 'b', testField: 'other' },
+  { name: 'c', testField: 'FOOBAR' },
+  { name: 'd', testField: 'fooBAR' },
+  { name: 'e', testField: 'foobar' },
+  { name: 'f', testField: null },
+  { name: 'g', testField: null },
+];
+
+export const supportedFilters = () => [
+  'null_equality',
+  'equality',
+  'equality_case_insensitive',
+  'in_empty_null',
+  'in_value',
+  'string',
+  'string_case_insensitive',
+];

package/src/views/Cell.js

@@ -0,0 +1,39 @@
+/** @jsx jsx */
+
+import { jsx } from '@emotion/core';
+import { Fragment } from 'react';
+
+const Cell = props => {
+  if (!props.data) {
+    return null;
+  }
+
+  return (
+    <Fragment>
+      <div
+        style={{
+          // using inline styles instead of emotion for setting the color
+          // since emotion doesn't escape styles so it could be used for CSS injection
+          backgroundColor: props.data,
+        }}
+        css={{
+          borderRadius: 3,
+          display: 'inline-block',
+          height: 18,
+          width: 18,
+          marginRight: 10,
+          verticalAlign: 'middle',
+        }}
+      />
+      <span
+        css={{
+          verticalAlign: 'middle',
+        }}
+      >
+        {props.data}
+      </span>
+    </Fragment>
+  );
+};
+
+export default Cell;

package/src/views/Field.js

@@ -0,0 +1,84 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { Fragment, useMemo } from 'react';
+import { FieldContainer, FieldLabel, FieldDescription, FieldInput } from '@arch-ui/fields';
+import Popout from '@arch-ui/popout';
+import { Button } from '@arch-ui/button';
+import SketchPicker from 'react-color/lib/Sketch';
+
+const ColorField = ({ field, value = '', errors, onChange, isDisabled }) => {
+  const htmlID = `ks-input-${field.path}`;
+
+  const colorPickerValue = useMemo(() => {
+    // keystone previously stored values as a hex string and this should still be supported
+    // it is now stored as an rgba string
+    if (value) {
+      if (value.indexOf('rgba', 0) === 0) {
+        const rgbaValues = value.replace(/^rgba\(|\s+|\)$/g, '').split(',');
+        return { r: rgbaValues[0], g: rgbaValues[1], b: rgbaValues[2], a: rgbaValues[3] };
+      }
+      return value;
+    }
+    return '';
+  }, [value]);
+
+  const target = props => (
+    <Button {...props} variant="ghost" isDisabled={isDisabled}>
+      {value ? (
+        <Fragment>
+          <div
+            style={{
+              // using inline styles instead of emotion for setting the color
+              // since emotion doesn't escape styles so it could be used for CSS injection
+              // this is also better in terms of memory since the value can change a lot
+              // and emotion caches everything
+              backgroundColor: value,
+            }}
+            css={{
+              borderRadius: 3,
+              display: 'inline-block',
+              height: 18,
+              width: 18,
+              marginRight: 10,
+              verticalAlign: 'middle',
+            }}
+          />
+          <span
+            css={{
+              verticalAlign: 'middle',
+            }}
+          >
+            {value}
+          </span>
+        </Fragment>
+      ) : (
+        'Set Color'
+      )}
+    </Button>
+  );
+
+  return (
+    <FieldContainer>
+      <FieldLabel htmlFor={htmlID} field={field} errors={errors} />
+      <FieldDescription text={field.adminDoc} />
+      <FieldInput>
+        <Popout width={220} target={target}>
+          <SketchPicker
+            css={{
+              // using !important because react-color uses inline styles and applies a box shadow
+              // but Popout already applies a box shadow
+              boxShadow: 'none !important',
+            }}
+            presetColors={[]}
+            color={colorPickerValue}
+            onChange={({ rgb: { r, g, b, a } }) => {
+              onChange(`rgba(${r}, ${g}, ${b}, ${a})`);
+            }}
+          />
+        </Popout>
+      </FieldInput>
+    </FieldContainer>
+  );
+};
+
+export default ColorField;

package/views/Cell/dist/fields-color.cjs.dev.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@emotion/core');
+var react = require('react');
+
+/** @jsx jsx */
+const Cell = props => {
+  if (!props.data) {
+    return null;
+  }
+  return core.jsx(react.Fragment, null, core.jsx("div", {
+    style: {
+      // using inline styles instead of emotion for setting the color
+      // since emotion doesn't escape styles so it could be used for CSS injection
+      backgroundColor: props.data
+    },
+    css: {
+      borderRadius: 3,
+      display: 'inline-block',
+      height: 18,
+      width: 18,
+      marginRight: 10,
+      verticalAlign: 'middle'
+    }
+  }), core.jsx("span", {
+    css: {
+      verticalAlign: 'middle'
+    }
+  }, props.data));
+};
+
+exports["default"] = Cell;

package/views/Cell/dist/fields-color.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./fields-color.cjs.prod.js");
+} else {
+  module.exports = require("./fields-color.cjs.dev.js");
+}

package/views/Cell/dist/fields-color.cjs.prod.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@emotion/core');
+var react = require('react');
+
+/** @jsx jsx */
+const Cell = props => {
+  if (!props.data) {
+    return null;
+  }
+  return core.jsx(react.Fragment, null, core.jsx("div", {
+    style: {
+      // using inline styles instead of emotion for setting the color
+      // since emotion doesn't escape styles so it could be used for CSS injection
+      backgroundColor: props.data
+    },
+    css: {
+      borderRadius: 3,
+      display: 'inline-block',
+      height: 18,
+      width: 18,
+      marginRight: 10,
+      verticalAlign: 'middle'
+    }
+  }), core.jsx("span", {
+    css: {
+      verticalAlign: 'middle'
+    }
+  }, props.data));
+};
+
+exports["default"] = Cell;

package/views/Cell/dist/fields-color.esm.js

@@ -0,0 +1,30 @@
+import { jsx } from '@emotion/core';
+import { Fragment } from 'react';
+
+/** @jsx jsx */
+const Cell = props => {
+  if (!props.data) {
+    return null;
+  }
+  return jsx(Fragment, null, jsx("div", {
+    style: {
+      // using inline styles instead of emotion for setting the color
+      // since emotion doesn't escape styles so it could be used for CSS injection
+      backgroundColor: props.data
+    },
+    css: {
+      borderRadius: 3,
+      display: 'inline-block',
+      height: 18,
+      width: 18,
+      marginRight: 10,
+      verticalAlign: 'middle'
+    }
+  }), jsx("span", {
+    css: {
+      verticalAlign: 'middle'
+    }
+  }, props.data));
+};
+
+export { Cell as default };

package/views/Cell/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/fields-color.cjs.js",
+  "module": "dist/fields-color.esm.js"
+}

package/views/Field/dist/fields-color.cjs.dev.js

@@ -0,0 +1,97 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _extends = require('@babel/runtime/helpers/extends');
+var core = require('@emotion/core');
+var react = require('react');
+var fields = require('@arch-ui/fields');
+var Popout = require('@arch-ui/popout');
+var button = require('@arch-ui/button');
+var SketchPicker = require('react-color/lib/Sketch');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var Popout__default = /*#__PURE__*/_interopDefault(Popout);
+var SketchPicker__default = /*#__PURE__*/_interopDefault(SketchPicker);
+
+const ColorField = ({
+  field,
+  value = '',
+  errors,
+  onChange,
+  isDisabled
+}) => {
+  const htmlID = `ks-input-${field.path}`;
+  const colorPickerValue = react.useMemo(() => {
+    // keystone previously stored values as a hex string and this should still be supported
+    // it is now stored as an rgba string
+    if (value) {
+      if (value.indexOf('rgba', 0) === 0) {
+        const rgbaValues = value.replace(/^rgba\(|\s+|\)$/g, '').split(',');
+        return {
+          r: rgbaValues[0],
+          g: rgbaValues[1],
+          b: rgbaValues[2],
+          a: rgbaValues[3]
+        };
+      }
+      return value;
+    }
+    return '';
+  }, [value]);
+  const target = props => core.jsx(button.Button, _extends({}, props, {
+    variant: "ghost",
+    isDisabled: isDisabled
+  }), value ? core.jsx(react.Fragment, null, core.jsx("div", {
+    style: {
+      // using inline styles instead of emotion for setting the color
+      // since emotion doesn't escape styles so it could be used for CSS injection
+      // this is also better in terms of memory since the value can change a lot
+      // and emotion caches everything
+      backgroundColor: value
+    },
+    css: {
+      borderRadius: 3,
+      display: 'inline-block',
+      height: 18,
+      width: 18,
+      marginRight: 10,
+      verticalAlign: 'middle'
+    }
+  }), core.jsx("span", {
+    css: {
+      verticalAlign: 'middle'
+    }
+  }, value)) : 'Set Color');
+  return core.jsx(fields.FieldContainer, null, core.jsx(fields.FieldLabel, {
+    htmlFor: htmlID,
+    field: field,
+    errors: errors
+  }), core.jsx(fields.FieldDescription, {
+    text: field.adminDoc
+  }), core.jsx(fields.FieldInput, null, core.jsx(Popout__default["default"], {
+    width: 220,
+    target: target
+  }, core.jsx(SketchPicker__default["default"], {
+    css: {
+      // using !important because react-color uses inline styles and applies a box shadow
+      // but Popout already applies a box shadow
+      boxShadow: 'none !important'
+    },
+    presetColors: [],
+    color: colorPickerValue,
+    onChange: ({
+      rgb: {
+        r,
+        g,
+        b,
+        a
+      }
+    }) => {
+      onChange(`rgba(${r}, ${g}, ${b}, ${a})`);
+    }
+  }))));
+};
+
+exports["default"] = ColorField;

package/views/Field/dist/fields-color.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./fields-color.cjs.prod.js");
+} else {
+  module.exports = require("./fields-color.cjs.dev.js");
+}

package/views/Field/dist/fields-color.cjs.prod.js

@@ -0,0 +1,97 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _extends = require('@babel/runtime/helpers/extends');
+var core = require('@emotion/core');
+var react = require('react');
+var fields = require('@arch-ui/fields');
+var Popout = require('@arch-ui/popout');
+var button = require('@arch-ui/button');
+var SketchPicker = require('react-color/lib/Sketch');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var Popout__default = /*#__PURE__*/_interopDefault(Popout);
+var SketchPicker__default = /*#__PURE__*/_interopDefault(SketchPicker);
+
+const ColorField = ({
+  field,
+  value = '',
+  errors,
+  onChange,
+  isDisabled
+}) => {
+  const htmlID = `ks-input-${field.path}`;
+  const colorPickerValue = react.useMemo(() => {
+    // keystone previously stored values as a hex string and this should still be supported
+    // it is now stored as an rgba string
+    if (value) {
+      if (value.indexOf('rgba', 0) === 0) {
+        const rgbaValues = value.replace(/^rgba\(|\s+|\)$/g, '').split(',');
+        return {
+          r: rgbaValues[0],
+          g: rgbaValues[1],
+          b: rgbaValues[2],
+          a: rgbaValues[3]
+        };
+      }
+      return value;
+    }
+    return '';
+  }, [value]);
+  const target = props => core.jsx(button.Button, _extends({}, props, {
+    variant: "ghost",
+    isDisabled: isDisabled
+  }), value ? core.jsx(react.Fragment, null, core.jsx("div", {
+    style: {
+      // using inline styles instead of emotion for setting the color
+      // since emotion doesn't escape styles so it could be used for CSS injection
+      // this is also better in terms of memory since the value can change a lot
+      // and emotion caches everything
+      backgroundColor: value
+    },
+    css: {
+      borderRadius: 3,
+      display: 'inline-block',
+      height: 18,
+      width: 18,
+      marginRight: 10,
+      verticalAlign: 'middle'
+    }
+  }), core.jsx("span", {
+    css: {
+      verticalAlign: 'middle'
+    }
+  }, value)) : 'Set Color');
+  return core.jsx(fields.FieldContainer, null, core.jsx(fields.FieldLabel, {
+    htmlFor: htmlID,
+    field: field,
+    errors: errors
+  }), core.jsx(fields.FieldDescription, {
+    text: field.adminDoc
+  }), core.jsx(fields.FieldInput, null, core.jsx(Popout__default["default"], {
+    width: 220,
+    target: target
+  }, core.jsx(SketchPicker__default["default"], {
+    css: {
+      // using !important because react-color uses inline styles and applies a box shadow
+      // but Popout already applies a box shadow
+      boxShadow: 'none !important'
+    },
+    presetColors: [],
+    color: colorPickerValue,
+    onChange: ({
+      rgb: {
+        r,
+        g,
+        b,
+        a
+      }
+    }) => {
+      onChange(`rgba(${r}, ${g}, ${b}, ${a})`);
+    }
+  }))));
+};
+
+exports["default"] = ColorField;

package/views/Field/dist/fields-color.esm.js

@@ -0,0 +1,88 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import { jsx } from '@emotion/core';
+import { useMemo, Fragment } from 'react';
+import { FieldContainer, FieldLabel, FieldDescription, FieldInput } from '@arch-ui/fields';
+import Popout from '@arch-ui/popout';
+import { Button } from '@arch-ui/button';
+import SketchPicker from 'react-color/lib/Sketch';
+
+const ColorField = ({
+  field,
+  value = '',
+  errors,
+  onChange,
+  isDisabled
+}) => {
+  const htmlID = `ks-input-${field.path}`;
+  const colorPickerValue = useMemo(() => {
+    // keystone previously stored values as a hex string and this should still be supported
+    // it is now stored as an rgba string
+    if (value) {
+      if (value.indexOf('rgba', 0) === 0) {
+        const rgbaValues = value.replace(/^rgba\(|\s+|\)$/g, '').split(',');
+        return {
+          r: rgbaValues[0],
+          g: rgbaValues[1],
+          b: rgbaValues[2],
+          a: rgbaValues[3]
+        };
+      }
+      return value;
+    }
+    return '';
+  }, [value]);
+  const target = props => jsx(Button, _extends({}, props, {
+    variant: "ghost",
+    isDisabled: isDisabled
+  }), value ? jsx(Fragment, null, jsx("div", {
+    style: {
+      // using inline styles instead of emotion for setting the color
+      // since emotion doesn't escape styles so it could be used for CSS injection
+      // this is also better in terms of memory since the value can change a lot
+      // and emotion caches everything
+      backgroundColor: value
+    },
+    css: {
+      borderRadius: 3,
+      display: 'inline-block',
+      height: 18,
+      width: 18,
+      marginRight: 10,
+      verticalAlign: 'middle'
+    }
+  }), jsx("span", {
+    css: {
+      verticalAlign: 'middle'
+    }
+  }, value)) : 'Set Color');
+  return jsx(FieldContainer, null, jsx(FieldLabel, {
+    htmlFor: htmlID,
+    field: field,
+    errors: errors
+  }), jsx(FieldDescription, {
+    text: field.adminDoc
+  }), jsx(FieldInput, null, jsx(Popout, {
+    width: 220,
+    target: target
+  }, jsx(SketchPicker, {
+    css: {
+      // using !important because react-color uses inline styles and applies a box shadow
+      // but Popout already applies a box shadow
+      boxShadow: 'none !important'
+    },
+    presetColors: [],
+    color: colorPickerValue,
+    onChange: ({
+      rgb: {
+        r,
+        g,
+        b,
+        a
+      }
+    }) => {
+      onChange(`rgba(${r}, ${g}, ${b}, ${a})`);
+    }
+  }))));
+};
+
+export { ColorField as default };

package/views/Field/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/fields-color.cjs.js",
+  "module": "dist/fields-color.esm.js"
+}