@plone-collective/volto-image-editor 1.0.0-alpha.1

package/src/components/Widgets/FileWidget.tsx

@@ -0,0 +1,239 @@
+/**
+ * FileWidget component.
+ * @module components/manage/Widgets/FileWidget
+ */
+
+import React from 'react';
+import { Button, Dimmer, Grid } from 'semantic-ui-react';
+import { readAsDataURL } from 'promise-file-reader';
+import { injectIntl } from 'react-intl';
+import deleteSVG from '@plone/volto/icons/delete.svg';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import Toast from '@plone/volto/components/manage/Toast/Toast';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+import loadable from '@loadable/component';
+import { validateFileUploadSize } from '@plone/volto/helpers/FormValidation/FormValidation';
+import { defineMessages, useIntl } from 'react-intl';
+import Image from '@plone/volto/components/theme/Image/Image';
+import { toast } from 'react-toastify';
+import ImageEditorWrapper from '../ImageEditor/ImageEditorWrapper';
+import './FileWidget.scss';
+import { useUpdateEffect } from 'react-advanced-cropper';
+
+const imageMimetypes = [
+  'image/png',
+  'image/jpeg',
+  'image/webp',
+  'image/jpg',
+  'image/gif',
+  'image/svg+xml',
+];
+const Dropzone = loadable(() => import('react-dropzone'));
+
+const messages = defineMessages({
+  releaseDrag: {
+    id: 'Drop files here ...',
+    defaultMessage: 'Drop files here ...',
+  },
+  editFile: {
+    id: 'Drop file here to replace the existing file',
+    defaultMessage: 'Drop file here to replace the existing file',
+  },
+  fileDrag: {
+    id: 'Drop file here to upload a new file',
+    defaultMessage: 'Drop file here to upload a new file',
+  },
+  replaceFile: {
+    id: 'Replace existing file',
+    defaultMessage: 'Replace existing file',
+  },
+  addNewFile: {
+    id: 'Choose a file',
+    defaultMessage: 'Choose a file',
+  },
+  maxSizeError: {
+    id: 'The file you uploaded exceeded the maximum allowed size of {size} bytes',
+    defaultMessage:
+      'The file you uploaded exceeded the maximum allowed size of {size} bytes',
+  },
+  acceptError: {
+    id: 'File is not of the accepted type {accept}',
+    defaultMessage: 'File is not of the accepted type {accept}',
+  },
+});
+
+const FileWidget = (props) => {
+  const { id, value, onChange, isDisabled } = props;
+  const [data, setData] = React.useState(null);
+  const isImage = value && imageMimetypes.includes(value['content-type']);
+  const mainColumnWidth = isImage ? 10 : 12;
+  const intl = useIntl();
+
+  const imgAttrs = React.useMemo(() => {
+    const imgObj = {};
+    if (value?.download) {
+      imgObj.item = {
+        '@id': value.download.substring(0, value.download.indexOf('/@@images')),
+        image: value,
+      };
+    } else if (value?.data) {
+      imgObj.src = `data:${value['content-type']};${value.encoding},${value.data}`;
+    }
+    return imgObj;
+  }, [value]);
+
+  useUpdateEffect(() => {
+    if (data) {
+      onChange(id, data);
+    }
+  }, [data]);
+
+  /**
+   * Drop handler
+   * @method onDrop
+   * @param {array} files File objects
+   * @returns {undefined}
+   */
+  const onDrop = (files, rejectedFiles) => {
+    rejectedFiles.forEach((file) => {
+      file.errors.forEach((err) => {
+        if (err.code === 'file-too-large') {
+          toast.error(
+            <Toast
+              error
+              title={intl.formatMessage(messages.maxSizeError, {
+                size: props.size,
+              })}
+            />,
+          );
+        }
+
+        if (err.code === 'file-invalid-type') {
+          toast.error(
+            <Toast
+              error
+              title={intl.formatMessage(messages.acceptError, {
+                accept: props.accept,
+              })}
+            />,
+          );
+        }
+      });
+    });
+    if (files.length < 1) return;
+    const file = files[0];
+    if (!validateFileUploadSize(file, intl.formatMessage)) return;
+    readAsDataURL(file).then((data) => {
+      const fields = data.match(/^data:(.*);(.*),(.*)$/);
+      onChange(id, {
+        data: fields[3],
+        encoding: fields[2],
+        'content-type': fields[1],
+        filename: file.name,
+      });
+    });
+
+    let reader = new FileReader();
+    reader.onload = function () {
+      const fields = reader.result.match(/^data:(.*);(.*),(.*)$/);
+      if (imageMimetypes.includes(fields[1])) {
+        let imagePreview = document.getElementById(`field-${id}-image`);
+        if (imagePreview) imagePreview.src = reader.result;
+      }
+    };
+    reader.readAsDataURL(files[0]);
+  };
+
+  return (
+    <FormFieldWrapper {...props}>
+      <Grid className="image-widget-grid">
+        <Grid.Row stretched>
+          <Grid.Column stretched width={mainColumnWidth}>
+            <Dropzone
+              onDrop={onDrop}
+              {...(props.size ? { maxSize: props.size } : {})}
+              {...(props.accept ? { accept: props.accept } : {})}
+            >
+              {({ getRootProps, getInputProps, isDragActive }) => (
+                <div className="file-widget-dropzone" {...getRootProps()}>
+                  {isDragActive && <Dimmer active></Dimmer>}
+                  {isImage ? (
+                    <Image
+                      className="image-preview small ui image"
+                      id={`field-${id}-image`}
+                      {...imgAttrs}
+                    />
+                  ) : (
+                    <div className="dropzone-placeholder">
+                      {isDragActive ? (
+                        <p className="dropzone-text">
+                          {intl.formatMessage(messages.releaseDrag)}
+                        </p>
+                      ) : value ? (
+                        <p className="dropzone-text">
+                          {intl.formatMessage(messages.editFile)}
+                        </p>
+                      ) : (
+                        <p className="dropzone-text">
+                          {intl.formatMessage(messages.fileDrag)}
+                        </p>
+                      )}
+                    </div>
+                  )}
+
+                  <label className="label-file-widget-input">
+                    {value
+                      ? intl.formatMessage(messages.replaceFile)
+                      : intl.formatMessage(messages.addNewFile)}
+                  </label>
+                  <input
+                    {...getInputProps({
+                      type: 'file',
+                      style: { display: 'none' },
+                    })}
+                    id={`field-${id}`}
+                    name={id}
+                    type="file"
+                    disabled={isDisabled}
+                  />
+                </div>
+              )}
+            </Dropzone>
+            <div className="field-file-name">
+              {value && (
+                <UniversalLink href={value.download} download={true}>
+                  {value.filename}
+                </UniversalLink>
+              )}
+              {value && (
+                <>
+                  <Button
+                    type="button"
+                    icon
+                    basic
+                    className="delete-button"
+                    aria-label="delete file"
+                    disabled={isDisabled}
+                    onClick={() => {
+                      onChange(id, null);
+                    }}
+                  >
+                    <Icon name={deleteSVG} size="20px" />
+                  </Button>
+                </>
+              )}
+            </div>
+          </Grid.Column>
+          {isImage && (
+            <Grid.Column stretched width="2" className={'image-editor-cta'}>
+              <ImageEditorWrapper value={value} setData={setData} />
+            </Grid.Column>
+          )}
+        </Grid.Row>
+      </Grid>
+    </FormFieldWrapper>
+  );
+};
+
+export default injectIntl(FileWidget);

package/src/config/settings.ts

@@ -0,0 +1,5 @@
+import type { ConfigType } from '@plone/registry';
+
+export default function install(config: ConfigType) {
+  return config;
+}

package/src/customizations/volto/components/manage/Widgets/FileWidget.jsx

@@ -0,0 +1,3 @@
+import FileWidget from '@plone-collective/volto-image-editor/components/Widgets/FileWidget';
+
+export default FileWidget;

package/src/icons/AspectRatioIcons.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import {
+  TbAspectRatio,
+  TbSquare,
+  TbRectangleVertical,
+  TbRectangle,
+  TbPhoto,
+  TbDeviceDesktop,
+  TbDeviceTv,
+  TbDeviceMobile,
+  TbRectangleFilled,
+} from 'react-icons/tb';
+
+// Free aspect ratio icon
+export const FreeIcon = () => <TbAspectRatio />;
+
+// Square 1:1
+export const SquareIcon = () => <TbSquare />;
+
+// Portrait 1:2
+export const PortraitIcon = () => <TbRectangleVertical />;
+
+// Landscape 2:1
+export const LandscapeIcon = () => <TbRectangle />;
+
+// Photo 3:4
+export const PhotoIcon = () => <TbPhoto />;
+
+// Monitor 4:3
+export const MonitorIcon = () => <TbDeviceDesktop />;
+
+// Widescreen 16:9
+export const WidescreenIcon = () => <TbDeviceTv />;
+
+// Mobile 9:16
+export const MobileIcon = () => <TbDeviceMobile />;
+
+// Ultra-wide 21:9
+export const UltraWideIcon = () => <TbRectangleFilled />;

package/src/icons/BrightnessIcon.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+
+interface Props {
+  className?: string;
+}
+
+export const BrightnessIcon: FC<Props> = ({ className }) => {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      xmlSpace="preserve"
+    >
+      <path d="M12 15.3c-1.8 0-3.3-1.5-3.3-3.3 0-1.8 1.5-3.3 3.3-3.3 1.8 0 3.3 1.5 3.3 3.3 0 1.8-1.5 3.3-3.3 3.3zm0-5.1c-1 0-1.8.8-1.8 1.8s.8 1.8 1.8 1.8 1.8-.8 1.8-1.8-.8-1.8-1.8-1.8zM12 7.7c-.4 0-.8-.3-.8-.8V5.2c0-.4.3-.8.8-.8s.8.3.8.8V7c0 .4-.4.7-.8.7zM9 9c-.3.3-.8.3-1.1 0L6.6 7.7c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0L9 7.9c.3.3.3.8 0 1.1zM7.7 12c0 .4-.3.8-.8.8H5.2c-.4 0-.8-.3-.8-.8s.3-.8.8-.8H7c.4.1.7.4.7.8zM9 15c.3.3.3.8 0 1.1l-1.3 1.3c-.3.3-.8.3-1.1 0-.3-.3-.3-.8 0-1.1L7.9 15c.3-.3.8-.3 1.1 0zM12 16.3c.4 0 .8.3.8.8v1.8c0 .4-.3.8-.8.8s-.8-.3-.8-.8V17c.1-.4.4-.7.8-.7zM15 15c.3-.3.8-.3 1.1 0l1.3 1.3c.3.3.3.8 0 1.1s-.8.3-1.1 0L15 16.1c-.3-.3-.3-.8 0-1.1zM16.3 12c0-.4.3-.8.8-.8h1.8c.4 0 .8.3.8.8s-.3.8-.8.8H17c-.4 0-.7-.4-.7-.8zM15 9c-.3-.3-.3-.8 0-1.1l1.3-1.3c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1L16.1 9c-.3.3-.8.3-1.1 0z" />
+    </svg>
+  );
+};

package/src/icons/ContrastIcon.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+
+interface Props {
+  className?: string;
+}
+
+export const ContrastIcon: FC<Props> = ({ className }) => {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      xmlSpace="preserve"
+    >
+      <path d="M12 4.4c-4.2 0-7.6 3.4-7.6 7.6s3.4 7.6 7.6 7.6 7.6-3.4 7.6-7.6-3.4-7.6-7.6-7.6zM5.9 12c0-3.3 2.7-6.1 6.1-6.1V18c-3.3.1-6.1-2.7-6.1-6z" />
+    </svg>
+  );
+};

package/src/icons/CropIcon.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+
+interface Props {
+  className?: string;
+}
+
+export const CropIcon: FC<Props> = ({ className }) => {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      xmlSpace="preserve"
+    >
+      <path d="M18.2 15.2h-1.5V7.3H8.8V5.8c0-.4-.3-.8-.8-.8s-.7.4-.7.8v1.5H5.8c-.4 0-.8.3-.8.8s.3.8.8.8h1.5v7.8h7.8v1.5c0 .4.3.8.8.8s.8-.3.8-.8v-1.5h1.5c.4 0 .8-.3.8-.8s-.4-.7-.8-.7zM8.8 8.8h6.3v6.3H8.8V8.8z" />
+    </svg>
+  );
+};

package/src/icons/DownloadIcon.tsx

@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+
+interface Props {
+  className?: string;
+}
+
+export const DownloadIcon: FC<Props> = ({ className }) => {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      xmlSpace="preserve"
+    >
+      <path d="M17.2 12.1c-.4 0-.8.3-.8.8v2.8c0 .6-.4 1-1 1H8.6c-.6 0-1-.4-1-1v-2.8c0-.4-.3-.8-.8-.8s-.8.3-.8.8v2.8c0 1.4 1.1 2.5 2.5 2.5h6.8c1.4 0 2.5-1.1 2.5-2.5v-2.8c.1-.5-.2-.8-.6-.8z" />
+      <path d="M11.5 14.6c.1.1.3.2.5.2s.4-.1.5-.2l2.4-2.3c.3-.3.3-.8 0-1.1-.3-.3-.8-.3-1.1 0l-1.1 1.1V6.6c0-.4-.3-.8-.8-.8s-.8.3-.8.8v5.6l-1.1-1c-.3-.3-.8-.3-1.1 0-.3.3-.3.8 0 1.1l2.6 2.3z" />
+    </svg>
+  );
+};

package/src/icons/FlipHorizontalIcon.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+
+interface Props {
+  className?: string;
+}
+
+export const FlipHorizontalIcon: FC<Props> = ({ className }) => {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+    >
+      <path
+        fill="#FFF"
+        d="M8 15.9c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1s1 .4 1 1v13.9c0 .6-.4 1-1 1zm4-2.4h-.5c-.4 0-.8-.3-.8-.8s.3-.8.8-.8h.5c.4 0 .8.3.8.8s-.4.8-.8.8zm2.7 0h-.5c-.4 0-.8-.3-.8-.8 0-.3.2-.6.5-.7.1-.3.4-.5.7-.5.4 0 .8.3.8.8v.5c.1.4-.3.7-.7.7zm0-2.8c-.4 0-.8-.3-.8-.8v-.8c0-.4.3-.8.8-.8s.8.3.8.8v.8c0 .4-.4.8-.8.8zm0-3.3c-.4 0-.8-.3-.8-.8v-.7c0-.4.3-.8.8-.8s.8.3.8.8v.8c0 .4-.4.7-.8.7zm0-3.3c-.3 0-.6-.2-.7-.5-.3-.1-.5-.4-.5-.7 0-.4.3-.8.8-.8h.5c.4 0 .8.3.8.8v.5c-.1.4-.5.7-.9.7zM12 3.6h-.5c-.4 0-.8-.3-.8-.8s.3-.8.8-.8h.5c.4 0 .8.3.8.8s-.4.8-.8.8zM4.5 13.5H1.3c-.4 0-.8-.3-.8-.8V2.9c0-.4.3-.8.8-.8h3.2v1.5H2V12h2.5v1.5z"
+      />
+    </svg>
+  );
+};

package/src/icons/FlipVerticalIcon.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+
+interface Props {
+  className?: string;
+}
+
+export const FlipVerticalIcon: FC<Props> = ({ className }) => {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+    >
+      <path
+        fill="#FFF"
+        d="M15 9H1c-.5 0-1-.5-1-1s.4-1 1-1h14c.6 0 1 .4 1 1s-.5 1-1 1zM3.1 12.7c-.4 0-.8-.3-.8-.8v-.5c0-.4.3-.8.8-.8s.8.3.8.8v.6c0 .4-.3.7-.8.7zM3.6 15.4h-.5c-.4 0-.8-.3-.8-.8v-.5c0-.4.3-.8.8-.8.3 0 .6.2.7.5.3.1.5.4.5.7.1.6-.2.9-.7.9zM10.1 15.4h-.8c-.4 0-.8-.3-.8-.8s.3-.8.8-.8h.8c.4 0 .8.3.8.8s-.4.8-.8.8zm-3.2 0H6c-.4 0-.8-.3-.8-.8s.3-.8.8-.8h.8c.4 0 .8.3.8.8s-.3.8-.7.8zM13 15.4h-.5c-.4 0-.8-.3-.8-.8 0-.3.2-.6.5-.7.1-.3.4-.5.7-.5.4 0 .8.3.8.8v.5c.1.4-.2.7-.7.7zM13 12.7c-.4 0-.8-.3-.8-.8v-.5c0-.4.3-.8.8-.8s.8.3.8.8v.6c0 .4-.3.7-.8.7z"
+      />
+      <g>
+        <path
+          fill="#FFF"
+          d="M13.8 4.5h-1.5V2H3.9v2.5H2.4V1.3c0-.4.3-.8.8-.8H13c.4 0 .8.3.8.8v3.2z"
+        />
+      </g>
+    </svg>
+  );
+};

package/src/icons/HueIcon.tsx

@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+
+interface Props {
+  className?: string;
+}
+
+export const HueIcon: FC<Props> = ({ className }) => {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      xmlSpace="preserve"
+    >
+      <path d="M12 19.6c-4.2 0-7.6-3.4-7.6-7.6S7.8 4.4 12 4.4s7.6 3.4 7.6 7.6-3.4 7.6-7.6 7.6zm0-13.7c-3.3 0-6.1 2.7-6.1 6.1s2.7 6.1 6.1 6.1 6.1-2.7 6.1-6.1-2.8-6.1-6.1-6.1z" />
+      <path d="M12 15.3c-1.8 0-3.3-1.5-3.3-3.3 0-1.8 1.5-3.3 3.3-3.3 1.8 0 3.3 1.5 3.3 3.3 0 1.8-1.5 3.3-3.3 3.3zm0-5.1c-1 0-1.8.8-1.8 1.8s.8 1.8 1.8 1.8 1.8-.8 1.8-1.8-.8-1.8-1.8-1.8z" />
+    </svg>
+  );
+};

package/src/icons/ResetIcon.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+
+interface Props {
+  className?: string;
+}
+
+export const ResetIcon: FC<Props> = ({ className }) => {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      xmlSpace="preserve"
+    >
+      <path d="M21.2 9c-.3-.2-.8-.1-1 .2l-.8 1.3c-.7-3.4-3.8-6-7.4-6-4.2 0-7.6 3.4-7.6 7.6s3.4 7.6 7.6 7.6c2.3 0 4.5-1.1 6-2.9.3-.3.2-.8-.1-1.1-.3-.3-.8-.2-1.1.1-1.2 1.5-2.9 2.3-4.8 2.3-3.3 0-6.1-2.7-6.1-6.1S8.7 5.9 12 5.9c2.9 0 5.4 2.1 5.9 4.9l-1.3-.8c-.4-.2-.8-.1-1 .3-.2.4-.1.8.3 1l2.9 1.6c.1.1.2.1.4.1.3 0 .5-.1.6-.4l1.7-2.8c.2-.1.1-.6-.3-.8z" />
+    </svg>
+  );
+};

package/src/icons/ResetRotationIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export const ResetRotationIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    width="18"
+    height="18"
+  >
+    <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />
+    <path d="M21 3v5h-5" />
+    <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />
+    <path d="M3 21v-5h5" />
+  </svg>
+);

package/src/icons/RestrictionIcons.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import {
+  TbAdjustmentsHorizontal,
+  TbMaximize,
+  TbFocus2,
+  TbUnlink,
+} from 'react-icons/tb';
+
+// Fit Area - image fits inside boundaries
+export const FitAreaIcon = () => <TbAdjustmentsHorizontal />;
+
+// Fill Area - image fills the boundaries
+export const FillAreaIcon = () => <TbMaximize />;
+
+// Stencil - image restricted to stencil area
+export const StencilIcon = () => <TbFocus2 />;
+
+// None - no restrictions
+export const NoRestrictionIcon = () => <TbUnlink />;

package/src/icons/RotateLeftIcon.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+
+interface Props {
+  className?: string;
+}
+
+export const RotateLeftIcon: FC<Props> = ({ className }) => {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+    >
+      <path
+        fill="#FFF"
+        d="M3.5 11.8c-.2.2-.2.6 0 .9 1.1 1.1 2.8 1.8 4.5 1.8 3.7 0 6.5-2.8 6.5-6.5s-3-6.5-6.5-6.5c-1.7 0-3.3.7-4.5 1.8l-1-1c-.4-.4-1-.1-1 .4v3.8c0 .3.3.6.6.6h3.7c.5 0 .8-.7.4-1L5 4.9c.9-.9 1.9-1.3 3-1.3 3 0 5.4 3.1 4 6.2-.7 1.6-2.3 2.6-4 2.6-1.2 0-2.2-.4-3-1.3-.2-.2-.6-.2-.8 0l-.7.7z"
+      />
+    </svg>
+  );
+};

package/src/icons/RotateRightIcon.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+
+interface Props {
+  className?: string;
+}
+
+export const RotateRightIcon: FC<Props> = ({ className }) => {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+    >
+      <path
+        fill="#FFF"
+        d="M12.5 11.8c.2.2.2.6 0 .9-1.1 1.1-2.8 1.8-4.5 1.8-3.7 0-6.5-2.8-6.5-6.5s3-6.5 6.5-6.5c1.7 0 3.3.7 4.5 1.8l1-1c.4-.4 1-.1 1 .4v3.8c0 .3-.3.6-.6.6h-3.7c-.5 0-.8-.7-.4-1L11 4.9c-.9-.9-1.9-1.3-3-1.3-3 0-5.4 3.1-4 6.2.7 1.6 2.3 2.6 4 2.6 1.2 0 2.2-.4 3-1.3.2-.2.6-.2.8 0l.7.7z"
+      />
+    </svg>
+  );
+};

package/src/icons/SaturationIcon.tsx

@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+
+interface Props {
+  className?: string;
+}
+
+export const SaturationIcon: FC<Props> = ({ className }) => {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      xmlSpace="preserve"
+    >
+      <path d="M14.2 16c.5-.5.8-1.2.8-2 0-.3 0-.6-.1-.9-.3.1-.5.1-.8.1-1.3 0-2.2-.7-2.9-1.3-.2-.2-.8-.6-.9-.6 0 0-.1 0-.3.1-.5 1-.8 1.8-.8 2.5s.3 1.4.8 2c1 1.3 3 1.3 4.2.1z" />
+      <path d="M12 19.7c-1.5 0-3-.6-4.1-1.7-1.1-1.1-1.6-2.5-1.6-4 .1-2.7 1.8-5 3.6-7.4.5-.6 1-1.3 1.4-2l.7-.8.6.9c.5.7 1 1.4 1.5 2 1.8 2.4 3.5 4.6 3.6 7.3 0 1.5-.5 2.9-1.6 4-1.1 1-2.6 1.7-4.1 1.7zm0-13.3-.9 1.2C9.5 9.7 7.9 11.8 7.8 14c0 1.1.4 2.1 1.1 2.9.8.8 1.9 1.3 3 1.3s2.3-.5 3-1.3c.8-.8 1.2-1.8 1.1-2.9-.1-2.1-1.5-4.1-3.3-6.4-.1-.4-.4-.8-.7-1.2z" />
+    </svg>
+  );
+};

package/src/icons/SettingsIcon.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+export const SettingsIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    width="18"
+    height="18"
+  >
+    <circle cx="12" cy="12" r="3" />
+    <path d="M12 1v6m0 6v6" />
+    <path d="M12 6.5a5.5 5.5 0 0 1 0 11" />
+    <path d="M1 12h6m6 0h6" />
+    <path d="M17.5 12a5.5 5.5 0 0 1-11 0" />
+  </svg>
+);

package/src/icons/StencilIcons.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TbRectangle, TbCircle } from 'react-icons/tb';
+
+// Rectangle stencil
+export const RectangleStencilIcon = () => <TbRectangle />;
+
+// Circle stencil
+export const CircleStencilIcon = () => <TbCircle />;

package/src/index.ts

@@ -0,0 +1,10 @@
+import type { ConfigType } from '@plone/registry';
+import installSettings from './config/settings';
+
+function applyConfig(config: ConfigType) {
+  installSettings(config);
+
+  return config;
+}
+
+export default applyConfig;

package/src/theme/constants.scss

@@ -0,0 +1,13 @@
+$maximum: 1200px;
+$desktop: 920px;
+$tablet: 768px;
+$mobile: 540px;
+
+$container-padding: 24px;
+
+$dark-theme-color: #6fcff0;
+$theme-color: #61dafb;
+$black-color: #212121;
+$black-button-color: #36393f;
+$black-button-color-hover: #20232a;
+$real-theme-color: #1aa7f9;