Fix colors for color swatch widget buttons (#12)

* fix colors for color swatch widget buttons

* changelog

* update storybook & eslint files

* update import paths

Author: danalvrz

.eslintrc.js

@@ -1,16 +1,14 @@
 const fs = require('fs');
 const projectRootPath = __dirname;
-const AddonConfigurationRegistry = require('@plone/registry/src/addon-registry');
+const { AddonRegistry } = require('@plone/registry/addon-registry');
 
 let coreLocation;
 if (fs.existsSync(`${projectRootPath}/core`))
   coreLocation = `${projectRootPath}/core`;
 else if (fs.existsSync(`${projectRootPath}/../../core`))
   coreLocation = `${projectRootPath}/../../core`;
 
-const registry = new AddonConfigurationRegistry(
-  `${coreLocation}/packages/volto`,
-);
+const { registry } = AddonRegistry.init(`${coreLocation}/packages/volto`);
 
 // Extends ESlint configuration for adding the aliases to `src` directories in Volto addons
 const addonAliases = Object.keys(registry.packages).map((o) => [
@@ -22,6 +20,27 @@ module.exports = {
   extends: `${coreLocation}/packages/volto/.eslintrc`,
   rules: {
     'import/no-unresolved': 1,
+    'import/named': 'error',
+    'react/jsx-filename-extension': [1, { extensions: ['.tsx', '.jsx'] }],
+    'no-restricted-imports': [
+      'error',
+      {
+        name: '@plone/volto/components',
+        message:
+          'Importing from barrel files is not allowed. Please use direct imports of the modules instead.',
+      },
+      {
+        name: '@plone/volto/helpers',
+        message:
+          'Importing from barrel files is not allowed. Please use direct imports of the modules instead.',
+      },
+      {
+        name: '@plone/volto/actions',
+        message:
+          'Importing from barrel files is not allowed. Please use direct imports of the modules instead.',
+      },
+    ],
+    'react/jsx-key': [2, { checkFragmentShorthand: true }],
   },
   settings: {
     'import/resolver': {

.storybook/main.js

@@ -107,9 +107,9 @@ module.exports = {
       [],
       defaultRazzleOptions,
     );
-    const AddonConfigurationRegistry = require('@plone/registry/src/addon-registry');
+    const { AddonRegistry } = require('@plone/registry/addon-registry');
 
-    const registry = new AddonConfigurationRegistry(projectRootPath);
+    const { registry } = AddonRegistry.init(projectRootPath);
 
     config = lessPlugin({ registry }).modifyWebpackConfig({
       env: { target: 'web', dev: 'dev' },

packages/volto-highlight-block/news/12.feature

@@ -0,0 +1 @@
+Add style for color-swatch-widget. @danalvrz

packages/volto-highlight-block/src/components/Blocks/Highlight/Data.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { BlockDataForm } from '@plone/volto/components';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
 
 import { HighlightSchema } from './schema';
 import { useSelector } from 'react-redux';

packages/volto-highlight-block/src/components/Blocks/Highlight/Edit.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { SidebarPortal } from '@plone/volto/components';
+import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
 import HighlightData from './Data';
 import HighlightView from './View';
 

packages/volto-highlight-block/src/components/Blocks/Highlight/View.jsx

@@ -3,7 +3,7 @@ import cx from 'classnames';
 import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 import { DetachedTextBlockEditor } from '@plone/volto-slate/blocks/Text/DetachedTextBlockEditor';
 import TextLineEdit from '@plone/volto/components/manage/TextLineEdit/TextLineEdit';
-import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers';
+import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers/Url/Url';
 import { Container as SemanticContainer, Button } from 'semantic-ui-react';
 import { useSelector } from 'react-redux';
 import config from '@plone/volto/registry';

packages/volto-highlight-block/src/components/Blocks/Highlight/adapter.js

@@ -1,4 +1,4 @@
-import { flattenToAppURL } from '@plone/volto/helpers';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 
 export const HighlightBlockDataAdapter = ({
   block,

packages/volto-highlight-block/src/theme/highlight.scss

@@ -238,6 +238,7 @@ $highlight-images-object-position: top left;
 }
 
 .color-picker-widget,
+.color-swatch-widget,
 .theme-picker-widget {
   // Color widget &
   // Theme color picker widget