add formatting and linting files

.editorconfig

@@ -0,0 +1,34 @@
+# EditorConfig Configurtaion file, for more details see:
+# http://EditorConfig.org
+# EditorConfig is a convention description, that could be interpreted
+# by multiple editors to enforce common coding conventions for specific
+# file types
+
+# top-most EditorConfig file:
+# Will ignore other EditorConfig files in Home directory or upper tree level.
+root = true
+
+
+[*]  # For All Files
+# Unix-style newlines with a newline ending every file
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+# Set default charset
+charset = utf-8
+# Indent style default
+indent_style = space
+
+[*.{py,cfg,ini}]
+# 4 space indentation
+indent_size = 4
+
+[*.{html,dtml,pt,zpt,xml,zcml,js,jsx,json,less,css,yaml,yml}]
+# 2 space indentation
+indent_size = 2
+
+[{Makefile,.gitmodules}]
+# Tab indentation (no size specified, but view as 4 spaces)
+indent_style = tab
+indent_size = unset
+tab_width = unset

.eslintignore

@@ -0,0 +1,6 @@
+container-query-polyfill.modern.js
+cypress
+node_modules
+acceptance
+*.json
+remove_me

.eslintrc

@@ -0,0 +1,53 @@
+{
+  "extends": ["react-app", "prettier", "plugin:jsx-a11y/recommended"],
+  "plugins": ["prettier", "react-hooks", "jsx-a11y"],
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true,
+    "mocha": true,
+    "jasmine": true
+  },
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "legacyDecorators": true
+    }
+  },
+  "rules": {
+    "import/no-unresolved": 0,
+    "no-alert": 1,
+    "no-console": 1,
+    "no-debugger": 1,
+    "prettier/prettier": [
+      "error",
+      { "trailingComma": "all", "singleQuote": true }
+    ],
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "react/react-in-jsx-scope": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "17.0.2"
+    }
+  },
+  "globals": {
+    "root": true,
+    "__DEVELOPMENT__": true,
+    "__CLIENT__": true,
+    "__SERVER__": true,
+    "__DISABLE_SSR__": true,
+    "__DEVTOOLS__": true,
+    "__DEBUG__": true,
+    "__SSR__": true,
+    "__SENTRY__": true,
+    "cy": true,
+    "Cypress": true,
+    "jest": true,
+    "socket": true,
+    "webpackIsomorphicTools": true
+  }
+}

.prettierignore

@@ -0,0 +1,3 @@
+container-query-polyfill.modern.js
+CHANGELOG.md
+README.md

.prettierrc

@@ -0,0 +1,12 @@
+{
+  "trailingComma": "all",
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": "*.overrides",
+      "options": {
+        "parser": "less"
+      }
+    }
+  ]
+}

.stylelintrc

@@ -0,0 +1,32 @@
+{
+  "extends": [
+    "stylelint-config-idiomatic-order"
+  ],
+  "plugins": [
+    "stylelint-prettier"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "**/*.less"
+      ],
+      "customSyntax": "postcss-less"
+    },
+    {
+      "files": [
+        "**/*.overrides"
+      ],
+      "customSyntax": "postcss-less"
+    },
+    {
+      "files": [
+        "**/*.scss"
+      ],
+      "customSyntax": "postcss-scss"
+    }
+  ],
+  "rules": {
+    "prettier/prettier": true,
+    "order/properties-alphabetical-order": null
+  }
+}

package.json

@@ -21,28 +21,79 @@
     "release-alpha": "release-it --preRelease=alpha",
     "release-rc": "release-it --preRelease=rc"
   },
+  "prettier": {
+    "trailingComma": "all",
+    "singleQuote": true,
+    "useTabs": false,
+    "overrides": [
+      {
+        "files": "*.overrides",
+        "options": {
+          "parser": "less"
+        }
+      }
+    ]
+  },
+  "stylelint": {
+    "extends": [
+      "stylelint-config-idiomatic-order"
+    ],
+    "plugins": [
+      "stylelint-prettier"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "**/*.less"
+        ],
+        "customSyntax": "postcss-less"
+      },
+      {
+        "files": [
+          "**/*.overrides"
+        ],
+        "customSyntax": "postcss-less"
+      }
+    ],
+    "rules": {
+      "prettier/prettier": true,
+      "rule-empty-line-before": [
+        "always-multi-line",
+        {
+          "except": [
+            "first-nested"
+          ],
+          "ignore": [
+            "after-comment"
+          ]
+        }
+      ]
+    }
+  },
   "devDependencies": {
     "@babel/eslint-parser": "7.22.15",
     "@plone/scripts": "^3.0.0",
     "eslint": "8.49.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-config-react-app": "7.0.1",
-    "eslint-plugin-flowtype": "8.0.3",
+    "eslint-import-resolver-alias": "1.1.2",
+    "eslint-import-resolver-babel-plugin-root-import": "1.1.1",
     "eslint-plugin-import": "2.28.1",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-prettier": "5.0.0",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "postcss-less": "6.0.0",
-    "postcss-scss": "4.0.8",
     "prettier": "3.0.3",
-    "release-it": "^16.1.5",
+    "release-it": "^16.2.1",
     "stylelint": "15.10.3",
     "stylelint-config-idiomatic-order": "9.0.0",
+    "stylelint-config-prettier": "9.0.4",
     "stylelint-config-sass-guidelines": "10.0.0",
     "stylelint-prettier": "4.0.2"
   },
   "peerDependencies": {
-    "@plone/volto": "^17.0.0"
-  }
+    "@plone/volto": "^17.0.0-alpha.21"
+  },
+  "packageManager": "yarn@3.2.3"
 }

src/components/Logo/Data.jsx

@@ -1,12 +1,12 @@
-import React from "react";
-import { BlockDataForm } from "@plone/volto/components";
-import { LogoBlockSchema } from "./schema";
-import { useIntl, defineMessages } from "react-intl";
+import React from 'react';
+import { BlockDataForm } from '@plone/volto/components';
+import { LogoBlockSchema } from './schema';
+import { useIntl, defineMessages } from 'react-intl';
 
 const messages = defineMessages({
   Logo: {
-    id: "Logo",
-    defaultMessage: "Logo",
+    id: 'Logo',
+    defaultMessage: 'Logo',
   },
 });
 

src/components/Logo/Edit.jsx

@@ -1,7 +1,7 @@
-import React from "react";
-import View from "./View";
-import { SidebarPortal } from "@plone/volto/components";
-import LogoBlockSidebar from "./Data";
+import React from 'react';
+import View from './View';
+import { SidebarPortal } from '@plone/volto/components';
+import LogoBlockSidebar from './Data';
 
 const Edit = (props) => {
   const { data, block, onChangeBlock, selected } = props;

src/components/Logo/View.jsx

@@ -1,13 +1,13 @@
-import React from "react";
-import { flattenToAppURL } from "@plone/volto/helpers";
-import { Message } from "semantic-ui-react";
-import { defineMessages, useIntl } from "react-intl";
-import imageBlockSVG from "@plone/volto/components/manage/Blocks/Image/block-image.svg";
+import React from 'react';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import { Message } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
 
 const messages = defineMessages({
   PleaseChooseLogo: {
-    id: "Please choose a logo as source for this element",
-    defaultMessage: "Please choose a logo as source for this element",
+    id: 'Please choose a logo as source for this element',
+    defaultMessage: 'Please choose a logo as source for this element',
   },
 });
 
@@ -27,7 +27,7 @@ const View = (props) => {
       )}
       {logo && (
         <img
-          src={flattenToAppURL(`${logo["@id"]}/@@images/image/teaser`)}
+          src={flattenToAppURL(`${logo['@id']}/@@images/image/teaser`)}
           alt="placeholder"
           className="logo-image"
         />

src/components/Logo/schema.js

@@ -1,44 +1,44 @@
-import { defineMessages } from "react-intl";
+import { defineMessages } from 'react-intl';
 
 const messages = defineMessages({
   logo: {
-    id: "Logo",
-    defaultMessage: "Logo",
+    id: 'Logo',
+    defaultMessage: 'Logo',
   },
   title: {
-    id: "title",
-    defaultMessage: "title",
+    id: 'title',
+    defaultMessage: 'title',
   },
   description: {
-    id: "description",
-    defaultMessage: "description",
+    id: 'description',
+    defaultMessage: 'description',
   },
   logoBlock: {
-    id: "Logo",
-    defaultMessage: "Logo",
+    id: 'Logo',
+    defaultMessage: 'Logo',
   },
   svgbest: {
-    id: "It is advised to use a svg graphic.",
-    defaultMessage: "It is advised to use a svg graphic.",
+    id: 'It is advised to use a svg graphic.',
+    defaultMessage: 'It is advised to use a svg graphic.',
   },
 });
 
 export const LogoBlockSchema = (props) => {
   return {
     title: props.intl.formatMessage(messages.logoBlock),
-    block: "logo",
+    block: 'logo',
     fieldsets: [
       {
-        id: "default",
-        title: "Default",
-        fields: ["logo", "heading", "description"],
+        id: 'default',
+        title: 'Default',
+        fields: ['logo', 'heading', 'description'],
       },
     ],
     properties: {
       logo: {
         title: props.intl.formatMessage(messages.logo),
-        widget: "object_browser",
-        mode: "image",
+        widget: 'object_browser',
+        mode: 'image',
         allowExternals: true,
         description: props.intl.formatMessage(messages.svgbest),
       },
@@ -47,9 +47,9 @@ export const LogoBlockSchema = (props) => {
       },
       description: {
         title: props.intl.formatMessage(messages.description),
-        widget: "text",
+        widget: 'text',
       },
     },
-    required: ["logo"],
+    required: ['logo'],
   };
 };

src/components/index.js

@@ -1,4 +1,4 @@
-import LogoBlockEdit from "./Logo/Edit";
-import LogoBlockView from "./Logo/View";
+import LogoBlockEdit from './Logo/Edit';
+import LogoBlockView from './Logo/View';
 
 export { LogoBlockEdit, LogoBlockView };