@strapi/plugin-color-picker 4.13.5 → 4.13.6

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

@@ -1,214 +0,0 @@
-import React, { forwardRef, useRef, useState } from 'react';
-
-import {
-  BaseButton,
-  Box,
-  Field,
-  FieldError,
-  FieldHint,
-  FieldInput,
-  FieldLabel,
-  Flex,
-  FocusTrap,
-  Popover,
-  Typography,
-} from '@strapi/design-system';
-import { CarretDown } from '@strapi/icons';
-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`
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  margin-right: 10px;
-  background-color: ${(props) => props.color};
-  border: 1px solid rgba(0, 0, 0, 0.1);
-`;
-
-const ColorPicker = styled(HexColorPicker)`
-  && {
-    width: 100%;
-    aspect-ratio: 1.5;
-  }
-
-  .react-colorful__pointer {
-    width: ${({ theme }) => theme.spaces[3]};
-    height: ${({ theme }) => theme.spaces[3]};
-  }
-
-  .react-colorful__saturation {
-    border-radius: ${({ theme }) => theme.spaces[1]};
-    border-bottom: none;
-  }
-
-  .react-colorful__hue {
-    border-radius: 10px;
-    height: ${({ theme }) => theme.spaces[3]};
-    margin-top: ${({ theme }) => theme.spaces[2]};
-  }
-`;
-
-const ColorPickerToggle = styled(BaseButton)`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  svg {
-    width: ${({ theme }) => theme.spaces[2]};
-    height: ${({ theme }) => theme.spaces[2]};
-  }
-
-  svg > path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-    justify-self: flex-end;
-  }
-`;
-
-const ColorPickerPopover = styled(Popover)`
-  padding: ${({ theme }) => theme.spaces[2]};
-  min-height: 270px;
-`;
-
-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)}
-          >
-            <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 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,
-  disabled: false,
-  error: null,
-  labelAction: null,
-  required: false,
-  value: '',
-};
-
-ColorPickerInput.propTypes = {
-  intlLabel: PropTypes.object.isRequired,
-  onChange: PropTypes.func.isRequired,
-  attribute: PropTypes.object.isRequired,
-  name: PropTypes.string.isRequired,
-  description: PropTypes.object,
-  disabled: PropTypes.bool,
-  error: PropTypes.string,
-  labelAction: PropTypes.object,
-  required: PropTypes.bool,
-  value: PropTypes.string,
-};
-
-export default ColorPickerInput;

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

@@ -1,238 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
-.c9 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.c1 {
-  font-size: 0.75rem;
-  line-height: 1.33;
-  font-weight: 600;
-  color: #32324d;
-}
-
-.c8 {
-  font-size: 0.875rem;
-  line-height: 1.43;
-  color: #666687;
-}
-
-.c3 {
-  background: #ffffff;
-  padding: 8px;
-  border-radius: 4px;
-  border-color: #dcdce4;
-  border: 1px solid #dcdce4;
-  cursor: pointer;
-}
-
-.c0 {
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.c4 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c5 {
-  position: relative;
-  outline: none;
-}
-
-.c5 > svg {
-  height: 12px;
-  width: 12px;
-}
-
-.c5 > svg > g,
-.c5 > svg path {
-  fill: #ffffff;
-}
-
-.c5[aria-disabled='true'] {
-  pointer-events: none;
-}
-
-.c5:after {
-  -webkit-transition-property: all;
-  transition-property: all;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  border-radius: 8px;
-  content: '';
-  position: absolute;
-  top: -4px;
-  bottom: -4px;
-  left: -4px;
-  right: -4px;
-  border: 2px solid transparent;
-}
-
-.c5:focus-visible {
-  outline: none;
-}
-
-.c5:focus-visible:after {
-  border-radius: 8px;
-  content: '';
-  position: absolute;
-  top: -5px;
-  bottom: -5px;
-  left: -5px;
-  right: -5px;
-  border: 2px solid #4945ff;
-}
-
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c7 {
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  margin-right: 10px;
-  background-color: #000000;
-  border: 1px solid rgba(0,0,0,0.1);
-}
-
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c6 svg {
-  width: 8px;
-  height: 8px;
-}
-
-.c6 svg > path {
-  fill: #8e8ea9;
-  justify-self: flex-end;
-}
-
-<div>
-  <div
-    class=""
-  >
-    <div
-      class="c0"
-    >
-      <label
-        class="c1 c2"
-        for="color"
-      >
-        color-picker
-      </label>
-      <button
-        aria-controls="color-picker-value"
-        aria-disabled="false"
-        aria-expanded="false"
-        aria-haspopup="dialog"
-        aria-label="Color picker toggle"
-        class="c3 c4 c5 c6"
-        type="button"
-      >
-        <div
-          class="c4"
-        >
-          <div
-            class="c7"
-            color="#000000"
-          />
-          <span
-            class="c8"
-            style="text-transform: uppercase;"
-          >
-            #000000
-          </span>
-        </div>
-        <svg
-          aria-hidden="true"
-          fill="none"
-          height="1rem"
-          viewBox="0 0 14 8"
-          width="1rem"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            clip-rule="evenodd"
-            d="M14 .889a.86.86 0 0 1-.26.625L7.615 7.736A.834.834 0 0 1 7 8a.834.834 0 0 1-.615-.264L.26 1.514A.861.861 0 0 1 0 .889c0-.24.087-.45.26-.625A.834.834 0 0 1 .875 0h12.25c.237 0 .442.088.615.264a.86.86 0 0 1 .26.625Z"
-            fill="#32324D"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-  <div
-    class="c9"
-  >
-    <p
-      aria-live="polite"
-      aria-relevant="all"
-      id="live-region-log"
-      role="log"
-    />
-    <p
-      aria-live="polite"
-      aria-relevant="all"
-      id="live-region-status"
-      role="status"
-    />
-    <p
-      aria-live="assertive"
-      aria-relevant="all"
-      id="live-region-alert"
-      role="alert"
-    />
-  </div>
-</div>
-`;

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

@@ -1,65 +0,0 @@
-import React from '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 = {
-  customField: 'plugin::color-picker.color',
-  pluginOptions: { i18n: { localized: true } },
-  type: 'string',
-};
-
-const App = (
-  <IntlProvider locale="en" messages={{}} textComponent="span">
-    <ThemeProvider theme={lightTheme}>
-      <ColorPickerInput
-        name="color"
-        value=""
-        onChange={jest.fn()}
-        attribute={mockAttribute}
-        intlLabel={{ id: 'color-picker', defaultMessage: 'color-picker' }}
-      />
-    </ThemeProvider>
-  </IntlProvider>
-);
-
-describe('<ColorPickerInput />', () => {
-  /**
-   * We do this because –
-   * https://github.com/facebook/jest/issues/12670
-   */
-  beforeAll(() => {
-    jest.setTimeout(30000);
-  });
-
-  /**
-   * Reset timeout to what is expected
-   */
-  afterAll(() => {
-    jest.setTimeout(5000);
-  });
-
-  it('renders and matches the snapshot', () => {
-    const { container } = render(App);
-
-    expect(container).toMatchSnapshot();
-  });
-
-  it('toggles the popover', () => {
-    render(App);
-    const colorPickerToggle = screen.getByRole('button', { name: 'Color picker toggle' });
-    fireEvent.click(colorPickerToggle);
-
-    const popover = screen.getByRole('dialog');
-    const saturation = screen.getByRole('slider', { name: 'Color' });
-    const hue = screen.getByRole('slider', { name: 'Hue' });
-    const input = screen.getByRole('textbox', { name: 'Color picker input' });
-    expect(popover).toBeVisible();
-    expect(saturation).toBeVisible();
-    expect(hue).toBeVisible();
-    expect(input).toBeVisible();
-  });
-});

package/admin/src/index.js

@@ -1,88 +0,0 @@
-import { prefixPluginTranslations } from '@strapi/helper-plugin';
-
-import ColorPickerIcon from './components/ColorPicker/ColorPickerIcon';
-import pluginId from './pluginId';
-import getTrad from './utils/getTrad';
-
-export default {
-  register(app) {
-    app.customFields.register({
-      name: 'color',
-      pluginId: 'color-picker',
-      type: 'string',
-      icon: ColorPickerIcon,
-      intlLabel: {
-        id: getTrad('color-picker.label'),
-        defaultMessage: 'Color',
-      },
-      intlDescription: {
-        id: getTrad('color-picker.description'),
-        defaultMessage: 'Select any color',
-      },
-      components: {
-        Input: async () =>
-          import(
-            /* webpackChunkName: "color-picker-input-component" */ './components/ColorPicker/ColorPickerInput'
-          ),
-      },
-      options: {
-        advanced: [
-          {
-            intlLabel: {
-              id: getTrad('color-picker.options.advanced.regex'),
-              defaultMessage: 'RegExp pattern',
-            },
-            name: 'regex',
-            type: 'text',
-            defaultValue: '^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$',
-            description: {
-              id: getTrad('color-picker.options.advanced.regex.description'),
-              defaultMessage: 'The text of the regular expression',
-            },
-          },
-          {
-            sectionTitle: {
-              id: 'global.settings',
-              defaultMessage: 'Settings',
-            },
-            items: [
-              {
-                name: 'required',
-                type: 'checkbox',
-                intlLabel: {
-                  id: getTrad('color-picker.options.advanced.requiredField'),
-                  defaultMessage: 'Required field',
-                },
-                description: {
-                  id: getTrad('color-picker.options.advanced.requiredField.description'),
-                  defaultMessage: "You won't be able to create an entry if this field is empty",
-                },
-              },
-            ],
-          },
-        ],
-      },
-    });
-  },
-  async registerTrads({ locales }) {
-    const importedTrads = await Promise.all(
-      locales.map((locale) => {
-        return import(`./translations/${locale}.json`)
-          .then(({ default: data }) => {
-            return {
-              data: prefixPluginTranslations(data, pluginId),
-              locale,
-            };
-          })
-          .catch(() => {
-            return {
-              data: {},
-              locale,
-            };
-          });
-      })
-    );
-
-    return Promise.resolve(importedTrads);
-  },
-};

package/admin/src/pluginId.js

@@ -1,5 +0,0 @@
-const pluginPkg = require('../../package.json');
-
-const pluginId = pluginPkg.name.replace(/^(@[^-,.][\w,-]+\/|strapi-)plugin-/i, '');
-
-module.exports = pluginId;

package/admin/src/utils/getTrad.js

@@ -1,5 +0,0 @@
-import pluginId from '../pluginId';
-
-const getTrad = (id) => `${pluginId}.${id}`;
-
-export default getTrad;

package/dist/server/register.js

@@ -1,12 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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/strapi-admin.js

@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./admin/src').default;