fix: Accordion is present, add JSX and TSX imports (#20)

* Fix if accordion is present, add JSX and TSX imports

* Remove .editorconfig

* Fix linting and prettier through the code, add missing BlockFormData props

dockerfiles/storybook.js

@@ -51,7 +51,13 @@ const defaultRazzleOptions = {
   staticCssInDev: false,
   emitOnErrors: false,
   disableWebpackbar: false,
-  browserslist: ['>1%', 'last 4 versions', 'Firefox ESR', 'not ie 11', 'not dead'],
+  browserslist: [
+    '>1%',
+    'last 4 versions',
+    'Firefox ESR',
+    'not ie 11',
+    'not dead',
+  ],
 };
 
 module.exports = {
@@ -110,7 +116,9 @@ module.exports = {
     // Put the SVG loader on top and prevent the asset/resource rule
     // from processing the app's SVGs
     config.module.rules.unshift(SVGLOADER);
-    const fileLoaderRule = config.module.rules.find((rule) => rule.test.test('.svg'));
+    const fileLoaderRule = config.module.rules.find((rule) =>
+      rule.test.test('.svg'),
+    );
     fileLoaderRule.exclude = /icons\/.*\.svg$/;
 
     config.plugins.unshift(
@@ -131,7 +139,9 @@ module.exports = {
     };
 
     // Addons have to be loaded with babel
-    const addonPaths = registry.addonNames.map((addon) => fs.realpathSync(registry.packages[addon].modulePath));
+    const addonPaths = registry.addonNames.map((addon) =>
+      fs.realpathSync(registry.packages[addon].modulePath),
+    );
     resultConfig.module.rules[1].exclude = (input) =>
       // exclude every input from node_modules except from @plone/volto
       /node_modules\/(?!(@plone\/volto)\/)/.test(input) &&
@@ -140,7 +150,11 @@ module.exports = {
 
     const addonExtenders = registry.getAddonExtenders().map((m) => require(m));
 
-    const extendedConfig = addonExtenders.reduce((acc, extender) => extender.modify(acc, { target: 'web', dev: 'dev' }, config), resultConfig);
+    const extendedConfig = addonExtenders.reduce(
+      (acc, extender) =>
+        extender.modify(acc, { target: 'web', dev: 'dev' }, config),
+      resultConfig,
+    );
 
     // Note: we don't actually support razzle plugins, which are also a feature
     // of the razzle.extend.js addons file. Those features are probably

jest-addon.config.js

@@ -1,6 +1,9 @@
 module.exports = {
   testMatch: ['**/src/addons/**/?(*.)+(spec|test).[jt]s?(x)'],
-  collectCoverageFrom: ['src/addons/**/src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts'],
+  collectCoverageFrom: [
+    'src/addons/**/src/**/*.{js,jsx,ts,tsx}',
+    '!src/**/*.d.ts',
+  ],
   transformIgnorePatterns: ['node_modules/(?!(volto-slate|@plone/volto)/)'],
   moduleNameMapper: {
     '@plone/volto/cypress': '<rootDir>/node_modules/@plone/volto/cypress',
@@ -9,7 +12,8 @@ module.exports = {
     '@package/(.*)$': '<rootDir>/src/$1',
     '@root/(.*)$': '<rootDir>/src/$1',
     '~/(.*)$': '<rootDir>/src/$1',
-    'load-volto-addons': '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',
+    'load-volto-addons':
+      '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',
     '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
   },
   transform: {

package.json

@@ -32,19 +32,19 @@
     "release-rc": "release-it --preRelease=rc"
   },
   "peerDependencies": {
-    "@plone/volto": ">=17.0.0"
+    "@plone/volto": "^17.0.0 || ^18.0.0-alpha.0"
   },
   "dependencies": {
-    "prismjs": "1.29.0",
     "mermaid": "10.8.0",
+    "prismjs": "1.29.0",
     "react-gist": "1.2.4"
   },
   "devDependencies": {
-    "@plone/scripts": "^3.0.0",
+    "@babel/eslint-parser": "7.22.15",
     "@commitlint/cli": "^18.6.1",
     "@commitlint/config-conventional": "^18.6.2",
+    "@plone/scripts": "^3.0.0",
     "@release-it/conventional-changelog": "^8.0.1",
-    "@babel/eslint-parser": "7.22.15",
     "eslint": "8.49.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-config-react-app": "7.0.1",

src/components/Blocks/Code/Data.jsx

@@ -4,7 +4,8 @@ import { codeSchema } from './schema';
 import { useIntl } from 'react-intl';
 
 const CodeBlockData = (props) => {
-  const { data, block, onChangeBlock } = props;
+  const { block, blocksConfig, data, onChangeBlock, navRoot, contentType } =
+    props;
   const intl = useIntl();
   const schema = codeSchema({ ...props, intl });
 
@@ -18,8 +19,12 @@ const CodeBlockData = (props) => {
           [id]: value,
         });
       }}
+      onChangeBlock={onChangeBlock}
       formData={data}
       block={block}
+      blocksConfig={blocksConfig}
+      navRoot={navRoot}
+      contentType={contentType}
     />
   );
 };

src/components/Blocks/Code/DefaultView.jsx

@@ -1,24 +1,39 @@
 import React from 'react';
 import SyntaxHighlighter from '../../SyntaxHighlighter/SyntaxHighlighter';
 import Caption from '../../Caption/Caption';
+import cx from 'classnames';
 
 const CodeView = (props) => {
-  const { data } = props;
-  const { code, style, language, lineNbr, showLineNumbers, wrapLongLines } = data;
+  const { data, className, style } = props;
+  const {
+    code,
+    style: codeStyle,
+    language,
+    lineNbr,
+    showLineNumbers,
+    wrapLongLines,
+  } = data;
   const { caption_title, caption_description } = data;
   const styleWrap = wrapLongLines ? 'wrapLongLines' : '';
-  const className = `code-block-wrapper ${style} ${styleWrap}`;
+  const codeClassName = `code-block-wrapper ${codeStyle} ${styleWrap}`;
 
   return (
     <>
       {data && (
-        <div className={'block code'}>
-          <div className={className}>
-            <SyntaxHighlighter code={code} language={language} showLineNumbers={showLineNumbers} lineNbr={lineNbr} />
+        <div className={cx('block code', className)} style={style}>
+          <div className={codeClassName}>
+            <SyntaxHighlighter
+              code={code}
+              language={language}
+              showLineNumbers={showLineNumbers}
+              lineNbr={lineNbr}
+            />
           </div>
         </div>
       )}
-      {caption_title && <Caption title={caption_title} description={caption_description} />}
+      {caption_title && (
+        <Caption title={caption_title} description={caption_description} />
+      )}
     </>
   );
 };

src/components/Blocks/Code/DefaultView.stories.jsx

@@ -3,9 +3,11 @@ import React from 'react';
 import CodeView from './DefaultView';
 import Wrapper from '@plone/volto/storybook';
 
-const codePython = 'from Testing.makerequest import makerequest\nfrom zope.component.hooks import setSite\nimport transaction\n\n\napp = makerequest(app)\nsite = app.Plone\nsetSite(site)\n\n# Change admin password\nuser = "admin"\npassword = "verynotsecure"\napp.acl_users.users.updateUserPassword(user, password)\n\n\n# Persist changes\ntransaction.commit()\napp._p_jar.sync()';
+const codePython =
+  'from Testing.makerequest import makerequest\nfrom zope.component.hooks import setSite\nimport transaction\n\n\napp = makerequest(app)\nsite = app.Plone\nsetSite(site)\n\n# Change admin password\nuser = "admin"\npassword = "verynotsecure"\napp.acl_users.users.updateUserPassword(user, password)\n\n\n# Persist changes\ntransaction.commit()\napp._p_jar.sync()';
 
-const codeLongLines = '# Code to show how wrap long lines would work\n\ntext = "This is a really, really, really, really long line including a lot of words and letters and a text that should not make any sense, but should be long, very long"\n\nprint(text)';
+const codeLongLines =
+  '# Code to show how wrap long lines would work\n\ntext = "This is a really, really, really, really long line including a lot of words and letters and a text that should not make any sense, but should be long, very long"\n\nprint(text)';
 
 const StoryComponent = injectIntl(({ children, ...args }) => {
   const { language, style, code, showLineNumbers, wrapLongLines } = args;

src/components/Blocks/Code/Edit.jsx

@@ -29,8 +29,16 @@ const CodeBlockEdit = (props) => {
   return (
     <div className="block code">
       <div className={className}>
-        <Editor value={code} onValueChange={(code) => handleChange(code)} highlight={(code) => highlight(code, language)} padding={10} preClassName={`code-block-wrapper ${data.style} language-${data.language}`} />
-        {caption_title && <Caption title={caption_title} description={caption_description} />}
+        <Editor
+          value={code}
+          onValueChange={(code) => handleChange(code)}
+          highlight={(code) => highlight(code, language)}
+          padding={10}
+          preClassName={`code-block-wrapper ${data.style} language-${data.language}`}
+        />
+        {caption_title && (
+          <Caption title={caption_title} description={caption_description} />
+        )}
         <SidebarPortal selected={selected}>
           <CodeBlockData {...props} />
         </SidebarPortal>

src/components/Blocks/Code/View.jsx

@@ -5,7 +5,7 @@ import CodeView from './DefaultView';
 const CodeBlockView = (props) => {
   const { data } = props;
 
-  return <>{data && <CodeView data={data} />}</>;
+  return <>{data && <CodeView {...props} />}</>;
 };
 
 export default withBlockExtensions(CodeBlockView);

src/components/Blocks/Code/schema.js

@@ -38,14 +38,18 @@ const messages = defineMessages({
 });
 
 export const codeSchema = (props) => {
-  const defaultLanguage = config.blocks?.blocksConfig?.codeBlock?.defaultLanguage;
+  const defaultLanguage =
+    config.blocks?.blocksConfig?.codeBlock?.defaultLanguage;
   const defaultStyle = config.blocks?.blocksConfig?.codeBlock?.defaultStyle;
 
   const availableLanguages = () => {
     const allLanguages = config.settings.codeBlock.languages || {};
-    const languages = Array.from(Object.entries(allLanguages), ([key, value]) => {
-      return [key, value.label];
-    });
+    const languages = Array.from(
+      Object.entries(allLanguages),
+      ([key, value]) => {
+        return [key, value.label];
+      },
+    );
     return languages;
   };
 
@@ -59,7 +63,13 @@ export const codeSchema = (props) => {
       {
         id: 'default',
         title: 'Default',
-        fields: ['language', 'style', 'showLineNumbers', 'wrapLongLines', 'lineNbr'],
+        fields: [
+          'language',
+          'style',
+          'showLineNumbers',
+          'wrapLongLines',
+          'lineNbr',
+        ],
       },
       {
         id: 'caption',

src/components/Blocks/Gist/Data.jsx

@@ -4,7 +4,8 @@ import { gistSchema } from './schema';
 import { useIntl } from 'react-intl';
 
 const GistBlockData = (props) => {
-  const { data, block, onChangeBlock } = props;
+  const { block, blocksConfig, data, onChangeBlock, navRoot, contentType } =
+    props;
   const intl = useIntl();
   const schema = gistSchema({ ...props, intl });
 
@@ -18,8 +19,12 @@ const GistBlockData = (props) => {
           [id]: value,
         });
       }}
+      onChangeBlock={onChangeBlock}
       formData={data}
       block={block}
+      blocksConfig={blocksConfig}
+      navRoot={navRoot}
+      contentType={contentType}
     />
   );
 };

src/components/Blocks/Gist/DefaultView.jsx

@@ -7,7 +7,9 @@ const GistView = (props) => {
   return (
     <>
       {gistId && <Gist id={gistId} file={file} />}
-      {caption_title && <Caption title={caption_title} description={caption_description} />}
+      {caption_title && (
+        <Caption title={caption_title} description={caption_description} />
+      )}
     </>
   );
 };

src/components/Blocks/Gist/Edit.jsx

@@ -13,7 +13,12 @@ const GistBlockEdit = (props) => {
       {data && (
         <>
           <div className={'gist editLayer'}></div>
-          <View gistId={gistId} file={file} caption_title={caption_title} caption_description={caption_description} />
+          <View
+            gistId={gistId}
+            file={file}
+            caption_title={caption_title}
+            caption_description={caption_description}
+          />
         </>
       )}
       <SidebarPortal selected={selected}>

src/components/Blocks/Gist/View.jsx

@@ -7,7 +7,15 @@ const GistBlockView = (props) => {
   const { gistId, file, caption_title, caption_description } = data;
   return (
     <div className="block gist view" id={`gistBlock-${block}`}>
-      {data && <GistView caption_title={caption_title} caption_description={caption_description} gistId={gistId} file={file} block={block} />}
+      {data && (
+        <GistView
+          caption_title={caption_title}
+          caption_description={caption_description}
+          gistId={gistId}
+          file={file}
+          block={block}
+        />
+      )}
     </div>
   );
 };

src/components/Blocks/Mermaid/DefaultView.jsx

@@ -8,7 +8,10 @@ const MermaidView = (props) => {
 
   useEffect(() => {
     const loadMermaid = async () => {
-      const config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
+      const config = {
+        startOnLoad: true,
+        flowchart: { useMaxWidth: false, htmlLabels: true },
+      };
       const { default: mermaid } = await import('mermaid/dist/mermaid.esm.mjs');
       setMermaid(mermaid);
       mermaid.initialize(config);
@@ -30,7 +33,11 @@ const MermaidView = (props) => {
     }
   }, [mermaid, elementId, code]);
 
-  return <div className={'mermaidWrapper'}>{svg && <div dangerouslySetInnerHTML={{ __html: svg }} />}</div>;
+  return (
+    <div className={'mermaidWrapper'}>
+      {svg && <div dangerouslySetInnerHTML={{ __html: svg }} />}
+    </div>
+  );
 };
 
 export default MermaidView;

src/components/Blocks/Mermaid/Edit.jsx

@@ -19,7 +19,13 @@ const MermaidBlockEdit = (props) => {
   return (
     <div className="block code">
       <div className={className}>
-        <Editor value={code} onValueChange={(code) => handleChange(code)} highlight={(code) => highlight(code, language)} padding={10} preClassName={`code-block-wrapper ${data.style} language-mermaid`} />
+        <Editor
+          value={code}
+          onValueChange={(code) => handleChange(code)}
+          highlight={(code) => highlight(code, language)}
+          padding={10}
+          preClassName={`code-block-wrapper ${data.style} language-mermaid`}
+        />
       </div>
     </div>
   );