@strapi/plugin-color-picker 0.0.0-next.aea0ea8350c9137c507bb25fe03460680fdbeec1 → 0.0.0-next.b31c3c3f6d934ebbb3d64cbf9722d8f50efc0391

package/admin/src/components/ColorPicker/ColorPickerIcon/index.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import styled from 'styled-components';
-import { Icon, Flex } from '@strapi/design-system';
+
+import { Flex, Icon } from '@strapi/design-system';
 import { Paint } from '@strapi/icons';
+import styled from 'styled-components';
 
 const IconBox = styled(Flex)`
   /* Hard code color values */

package/admin/src/components/ColorPicker/ColorPickerInput/index.js

@@ -1,23 +1,25 @@
-import React, { useState, useRef } from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import React, { forwardRef, useRef, useState } from 'react';
+
 import {
-  Typography,
-  Flex,
-  Box,
   BaseButton,
-  FocusTrap,
+  Box,
   Field,
-  FieldHint,
   FieldError,
-  FieldLabel,
+  FieldHint,
   FieldInput,
+  FieldLabel,
+  Flex,
+  FocusTrap,
   Popover,
+  Typography,
 } from '@strapi/design-system';
 import { CarretDown } from '@strapi/icons';
-import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
 import { HexColorPicker } from 'react-colorful';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
 
+import { useComposedRefs } from '../../../hooks/useComposeRefs';
 import getTrad from '../../../utils/getTrad';
 
 const ColorPreview = styled.div`
@@ -73,112 +75,119 @@ const ColorPickerPopover = styled(Popover)`
   min-height: 270px;
 `;
 
-const ColorPickerInput = ({
-  attribute,
-  description,
-  disabled,
-  error,
-  intlLabel,
-  labelAction,
-  name,
-  onChange,
-  required,
-  value,
-}) => {
-  const [showColorPicker, setShowColorPicker] = useState(false);
-  const colorPickerButtonRef = useRef();
-  const { formatMessage } = useIntl();
-  const color = value || '#000000';
-  const styleUppercase = { textTransform: 'uppercase' };
-
-  const handleBlur = (e) => {
-    e.preventDefault();
-
-    if (!e.currentTarget.contains(e.relatedTarget)) {
-      setShowColorPicker(false);
-    }
-  };
-
-  return (
-    <Field
-      name={name}
-      id={name}
-      // GenericInput calls formatMessage and returns a string for the error
-      error={error}
-      hint={description && formatMessage(description)}
-      required={required}
-    >
-      <Flex direction="column" alignItems="stretch" gap={1}>
-        <FieldLabel action={labelAction}>{formatMessage(intlLabel)}</FieldLabel>
-        <ColorPickerToggle
-          ref={colorPickerButtonRef}
-          aria-label={formatMessage({
-            id: getTrad('color-picker.toggle.aria-label'),
-            defaultMessage: 'Color picker toggle',
-          })}
-          aria-controls="color-picker-value"
-          aria-haspopup="dialog"
-          aria-expanded={showColorPicker}
-          aria-disabled={disabled}
-          disabled={disabled}
-          onClick={() => setShowColorPicker(!showColorPicker)}
-        >
-          <Flex>
-            <ColorPreview color={color} />
-            <Typography
-              style={styleUppercase}
-              textColor={value ? null : 'neutral600'}
-              variant="omega"
-            >
-              {color}
-            </Typography>
-          </Flex>
-          <CarretDown aria-hidden />
-        </ColorPickerToggle>
-        {showColorPicker && (
-          <ColorPickerPopover
-            onBlur={handleBlur}
-            role="dialog"
-            source={colorPickerButtonRef}
-            spacing={4}
+const ColorPickerInput = forwardRef(
+  (
+    {
+      attribute,
+      description,
+      disabled,
+      error,
+      intlLabel,
+      labelAction,
+      name,
+      onChange,
+      required,
+      value,
+    },
+    forwardedRef
+  ) => {
+    const [showColorPicker, setShowColorPicker] = useState(false);
+    const colorPickerButtonRef = useRef();
+    const { formatMessage } = useIntl();
+    const color = value || '#000000';
+    const styleUppercase = { textTransform: 'uppercase' };
+
+    const handleBlur = (e) => {
+      e.preventDefault();
+
+      if (!e.currentTarget.contains(e.relatedTarget)) {
+        setShowColorPicker(false);
+      }
+    };
+
+    const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);
+
+    return (
+      <Field
+        name={name}
+        id={name}
+        // GenericInput calls formatMessage and returns a string for the error
+        error={error}
+        hint={description && formatMessage(description)}
+        required={required}
+      >
+        <Flex direction="column" alignItems="stretch" gap={1}>
+          <FieldLabel action={labelAction}>{formatMessage(intlLabel)}</FieldLabel>
+          <ColorPickerToggle
+            ref={composedRefs}
+            aria-label={formatMessage({
+              id: getTrad('color-picker.toggle.aria-label'),
+              defaultMessage: 'Color picker toggle',
+            })}
+            aria-controls="color-picker-value"
+            aria-haspopup="dialog"
+            aria-expanded={showColorPicker}
+            aria-disabled={disabled}
+            disabled={disabled}
+            onClick={() => setShowColorPicker(!showColorPicker)}
           >
-            <FocusTrap onEscape={() => setShowColorPicker(false)}>
-              <ColorPicker
-                color={color}
-                onChange={(hexValue) =>
-                  onChange({ target: { name, value: hexValue, type: attribute.type } })
-                }
-              />
-              <Flex paddingTop={3} paddingLeft={4} justifyContent="flex-end">
-                <Box paddingRight={2}>
-                  <Typography variant="omega" as="label" textColor="neutral600">
-                    {formatMessage({
-                      id: getTrad('color-picker.input.format'),
-                      defaultMessage: 'HEX',
-                    })}
-                  </Typography>
-                </Box>
-                <FieldInput
-                  id="color-picker-value"
-                  aria-label={formatMessage({
-                    id: getTrad('color-picker.input.aria-label'),
-                    defaultMessage: 'Color picker input',
-                  })}
-                  style={styleUppercase}
-                  value={value}
-                  placeholder="#000000"
-                  onChange={onChange}
+            <Flex>
+              <ColorPreview color={color} />
+              <Typography
+                style={styleUppercase}
+                textColor={value ? null : 'neutral600'}
+                variant="omega"
+              >
+                {color}
+              </Typography>
+            </Flex>
+            <CarretDown aria-hidden />
+          </ColorPickerToggle>
+          {showColorPicker && (
+            <ColorPickerPopover
+              onBlur={handleBlur}
+              role="dialog"
+              source={colorPickerButtonRef}
+              spacing={4}
+            >
+              <FocusTrap onEscape={() => setShowColorPicker(false)}>
+                <ColorPicker
+                  color={color}
+                  onChange={(hexValue) =>
+                    onChange({ target: { name, value: hexValue, type: attribute.type } })
+                  }
                 />
-              </Flex>
-            </FocusTrap>
-          </ColorPickerPopover>
-        )}
-        <FieldHint />
-        <FieldError />
-      </Flex>
-    </Field>
-  );
-};
+                <Flex paddingTop={3} paddingLeft={4} justifyContent="flex-end">
+                  <Box paddingRight={2}>
+                    <Typography variant="omega" as="label" textColor="neutral600">
+                      {formatMessage({
+                        id: getTrad('color-picker.input.format'),
+                        defaultMessage: 'HEX',
+                      })}
+                    </Typography>
+                  </Box>
+                  <FieldInput
+                    id="color-picker-value"
+                    aria-label={formatMessage({
+                      id: getTrad('color-picker.input.aria-label'),
+                      defaultMessage: 'Color picker input',
+                    })}
+                    style={styleUppercase}
+                    value={value}
+                    placeholder="#000000"
+                    onChange={onChange}
+                  />
+                </Flex>
+              </FocusTrap>
+            </ColorPickerPopover>
+          )}
+          <FieldHint />
+          <FieldError />
+        </Flex>
+      </Field>
+    );
+  }
+);
 
 ColorPickerInput.defaultProps = {
   description: null,

package/admin/src/components/tests/color-picker-input.test.js

@@ -1,7 +1,9 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+
 import { lightTheme, ThemeProvider } from '@strapi/design-system';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
+
 import ColorPickerInput from '../ColorPicker/ColorPickerInput';
 
 const mockAttribute = {

package/admin/src/hooks/useComposeRefs.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+
+/**
+ * Set a given ref to a given value
+ * This utility takes care of different types of refs: callback refs and RefObject(s)
+ */
+function setRef(ref, value) {
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (ref !== null && ref !== undefined) {
+    ref.current = value;
+  }
+}
+
+/**
+ * A utility to compose multiple refs together
+ * Accepts callback refs and RefObject(s)
+ */
+function composeRefs(...refs) {
+  return (node) => refs.forEach((ref) => setRef(ref, node));
+}
+
+/**
+ * Takes multiple React like refs either React.Ref or a callback:
+ * (node: T) => void and returns a single function that can be
+ * passed to a React component as a ref.
+ *
+ * Example:
+ * ```tsx
+ * import { useComposedRefs } from '../hooks/useComposedRefs';
+ *
+ * const Component = React.forwardRef<HTMLInputElement, ComponentProps>((props, forwardedRef) => {
+ *  const ref = useComposedRefs(internalRef, forwardedRef);
+ *
+ *  React.useEffect(() => {
+ *   ref.current.focus();
+ *  }, [ref]);
+ *
+ *  return <input ref={ref} />
+ * }
+ * ```
+ */
+function useComposedRefs(...refs) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return React.useCallback(composeRefs(...refs), refs);
+}
+
+export { composeRefs, useComposedRefs };

package/admin/src/index.js

@@ -1,6 +1,7 @@
 import { prefixPluginTranslations } from '@strapi/helper-plugin';
-import pluginId from './pluginId';
+
 import ColorPickerIcon from './components/ColorPicker/ColorPickerIcon';
+import pluginId from './pluginId';
 import getTrad from './utils/getTrad';
 
 export default {

package/dist/server/index.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    register: ({ strapi }: any) => void;
+};
+export default _default;

package/dist/server/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const register_1 = require("./register");
+exports.default = {
+    register: register_1.register,
+};
+//# sourceMappingURL=index.js.map

package/dist/server/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../server/src/index.ts"],"names":[],"mappings":";;AAAA,yCAAsC;AAEtC,kBAAe;IACb,QAAQ,EAAR,mBAAQ;CACT,CAAC"}

package/dist/server/register.d.ts

@@ -0,0 +1 @@
+export declare const register: ({ strapi }: any) => void;

package/dist/server/register.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.register = void 0;
+const register = ({ strapi }) => {
+    strapi.customFields.register({
+        name: 'color',
+        plugin: 'color-picker',
+        type: 'string',
+    });
+};
+exports.register = register;
+//# sourceMappingURL=register.js.map

package/dist/server/register.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"register.js","sourceRoot":"","sources":["../../server/src/register.ts"],"names":[],"mappings":";;;AAAO,MAAM,QAAQ,GAAG,CAAC,EAAE,MAAM,EAAO,EAAE,EAAE;IAC1C,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC;QAC3B,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,cAAc;QACtB,IAAI,EAAE,QAAQ;KACf,CAAC,CAAC;AACL,CAAC,CAAC;AANW,QAAA,QAAQ,YAMnB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/plugin-color-picker",
-  "version": "0.0.0-next.aea0ea8350c9137c507bb25fe03460680fdbeec1",
+  "version": "0.0.0-next.b31c3c3f6d934ebbb3d64cbf9722d8f50efc0391",
   "description": "Strapi maintained Custom Fields",
   "strapi": {
     "name": "color-picker",
@@ -9,9 +9,9 @@
     "displayName": "Color Picker"
   },
   "dependencies": {
-    "@strapi/design-system": "1.8.0",
-    "@strapi/helper-plugin": "0.0.0-next.aea0ea8350c9137c507bb25fe03460680fdbeec1",
-    "@strapi/icons": "1.8.0",
+    "@strapi/design-system": "1.9.0",
+    "@strapi/helper-plugin": "0.0.0-next.b31c3c3f6d934ebbb3d64cbf9722d8f50efc0391",
+    "@strapi/icons": "1.9.0",
     "prop-types": "^15.8.1",
     "react-colorful": "5.6.1",
     "react-intl": "6.4.1"
@@ -30,7 +30,18 @@
     "react-router-dom": "5.3.4",
     "styled-components": "5.3.3"
   },
+  "files": [
+    "./dist",
+    "./admin",
+    "strapi-admin.js",
+    "strapi-server.js"
+  ],
   "scripts": {
+    "build": "run -T tsc -p server/tsconfig.json --outDir ./dist/server",
+    "build:ts": "run build",
+    "watch": "run -T tsc -w --preserveWatchOutput",
+    "clean": "run -T rimraf ./dist",
+    "prepublishOnly": "yarn clean && yarn build",
     "test:front": "run -T cross-env IS_EE=true jest --config ./jest.config.front.js",
     "test:front:watch": "run -T cross-env IS_EE=true jest --config ./jest.config.front.js --watchAll",
     "test:front:ce": "run -T cross-env IS_EE=false jest --config ./jest.config.front.js",
@@ -56,8 +67,8 @@
     }
   ],
   "engines": {
-    "node": ">=14.19.1 <=18.x.x",
+    "node": ">=16.0.0 <=20.x.x",
     "npm": ">=6.0.0"
   },
-  "gitHead": "aea0ea8350c9137c507bb25fe03460680fdbeec1"
+  "gitHead": "b31c3c3f6d934ebbb3d64cbf9722d8f50efc0391"
 }

package/strapi-server.js

@@ -1,3 +1,3 @@
 'use strict';
 
-module.exports = require('./server');
+module.exports = require('./dist/server');

package/.eslintignore

@@ -1,2 +0,0 @@
-node_modules/
-.eslintrc.js

package/.eslintrc.js

@@ -1,14 +0,0 @@
-module.exports = {
-  root: true,
-  overrides: [
-    {
-      files: ['admin/**/*'],
-      extends: ['custom/front'],
-    },
-    {
-      files: ['**/*'],
-      excludedFiles: ['admin/**/*'],
-      extends: ['custom/back'],
-    },
-  ],
-};

package/jest.config.front.js

@@ -1,6 +0,0 @@
-'use strict';
-
-module.exports = {
-  preset: '../../../jest-preset.front.js',
-  displayName: 'Color picker plugin',
-};

package/server/index.js

@@ -1,7 +0,0 @@
-'use strict';
-
-const register = require('./register');
-
-module.exports = {
-  register,
-};

package/server/register.js

@@ -1,9 +0,0 @@
-'use strict';
-
-module.exports = ({ strapi }) => {
-  strapi.customFields.register({
-    name: 'color',
-    plugin: 'color-picker',
-    type: 'string',
-  });
-};