projectless setup

.eslintrc.js

@@ -0,0 +1,34 @@
+const fs = require('fs');
+const projectRootPath = __dirname;
+
+let coreLocation;
+if (fs.existsSync(`${projectRootPath}/core`))
+  coreLocation = `${projectRootPath}/core`;
+else if (fs.existsSync(`${projectRootPath}/../../core`))
+  coreLocation = `${projectRootPath}/../../core`;
+
+module.exports = {
+  extends: `${coreLocation}/packages/volto/.eslintrc`,
+  rules: {
+    'import/no-unresolved': 1,
+  },
+  settings: {
+    'import/resolver': {
+      alias: {
+        map: [
+          ['@plone/volto', `${coreLocation}/packages/volto/src`],
+          [
+            '@plone/volto-slate',
+            `${coreLocation}/core/packages/volto-slate/src`,
+          ],
+          ['@plone/registry', `${coreLocation}/packages/registry/src`],
+          [
+            '@kitconcept/volto-heading-block',
+            './packages/volto-heading-block/src',
+          ],
+        ],
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
+      },
+    },
+  },
+};

.gitignore

@@ -1,16 +1,12 @@
+.*project
+.settings/
+.vscode
+*~
+acceptance/cypress/videos/
+acceptance/node_modules
+.storybook-build
+build
+core
 node_modules
-cypress/videos/
 results
-build
-*~
-project
-addon-testing-project
-
-# yarn 3
-.pnp.*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions
+yarn.lock

.npmignore

@@ -1,22 +1,16 @@
-.github
-cypress
-Makefile
-jest-addon.config.js
-cypress.json
-__snapshots__
-screencast.gif
-screenshot.png
+.vscode/
+.history
+logs
+*.log
+npm-debug.log*
+.DS_Store
+*.swp
+yarn-error.log
 
-news
-towncrier.toml
-.changelog.draft
-node_modules/
-
-# yarn 3
-.pnp.*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions
+node_modules
+dockerfiles
+acceptance
+build
+dist
+yarn.lock
+.storybook

.npmrc

@@ -0,0 +1,6 @@
+public-hoist-pattern[]=*eslint*
+public-hoist-pattern[]=*prettier*
+public-hoist-pattern[]=*stylelint*
+public-hoist-pattern[]=*cypress*
+public-hoist-pattern[]=*process*
+public-hoist-pattern[]=*parcel*

.prettierignore

@@ -0,0 +1,3 @@
+.storybook
+CHANGELOG.md
+README.md

.prettierrc

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

.storybook/main.js

@@ -0,0 +1,188 @@
+const webpack = require('webpack');
+const fs = require('fs');
+const path = require('path');
+
+const projectRootPath = path.resolve('.');
+const lessPlugin = require('@plone/volto/webpack-plugins/webpack-less-plugin');
+const scssPlugin = require('razzle-plugin-scss');
+
+const createConfig = require('razzle/config/createConfigAsync.js');
+const razzleConfig = require(path.join(projectRootPath, 'razzle.config.js'));
+
+const SVGLOADER = {
+  test: /icons\/.*\.svg$/,
+  use: [
+    {
+      loader: 'svg-loader',
+    },
+    {
+      loader: 'svgo-loader',
+      options: {
+        plugins: [
+          {
+            name: 'preset-default',
+            params: {
+              overrides: {
+                convertPathData: false,
+                removeViewBox: false,
+              },
+            },
+          },
+          'removeTitle',
+          'removeUselessStrokeAndFill',
+        ],
+      },
+    },
+  ],
+};
+
+const defaultRazzleOptions = {
+  verbose: false,
+  debug: {},
+  buildType: 'iso',
+  cssPrefix: 'static/css',
+  jsPrefix: 'static/js',
+  enableSourceMaps: true,
+  enableReactRefresh: true,
+  enableTargetBabelrc: false,
+  enableBabelCache: true,
+  forceRuntimeEnvVars: [],
+  mediaPrefix: 'static/media',
+  staticCssInDev: false,
+  emitOnErrors: false,
+  disableWebpackbar: false,
+  browserslist: [
+    '>1%',
+    'last 4 versions',
+    'Firefox ESR',
+    'not ie 11',
+    'not dead',
+  ],
+};
+
+module.exports = {
+  stories: [
+    '../packages/**/*.mdx',
+    '../packages/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-webpack5-compiler-babel',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: { builder: { useSWC: true } },
+  },
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      compilerOptions: {
+        allowSyntheticDefaultImports: false,
+        esModuleInterop: false,
+      },
+      propFilter: () => true,
+    },
+  },
+  webpackFinal: async (config, { configType }) => {
+    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+    // You can change the configuration based on that.
+    // 'PRODUCTION' is used when building the static version of storybook.
+
+    // Make whatever fine-grained changes you need
+    let baseConfig;
+    baseConfig = await createConfig(
+      'web',
+      'dev',
+      {
+        // clearConsole: false,
+        modifyWebpackConfig: razzleConfig.modifyWebpackConfig,
+        plugins: razzleConfig.plugins,
+      },
+      webpack,
+      false,
+      undefined,
+      [],
+      defaultRazzleOptions,
+    );
+    const AddonConfigurationRegistry = require('@plone/registry/src/addon-registry');
+
+    const registry = new AddonConfigurationRegistry(projectRootPath);
+
+    config = lessPlugin({ registry }).modifyWebpackConfig({
+      env: { target: 'web', dev: 'dev' },
+      webpackConfig: config,
+      webpackObject: webpack,
+      options: {},
+    });
+
+    config = scssPlugin.modifyWebpackConfig({
+      env: { target: 'web', dev: 'dev' },
+      webpackConfig: config,
+      webpackObject: webpack,
+      options: { razzleOptions: {} },
+    });
+
+    // 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'),
+    );
+    fileLoaderRule.exclude = /icons\/.*\.svg$/;
+
+    config.plugins.unshift(
+      new webpack.DefinePlugin({
+        __DEVELOPMENT__: true,
+        __CLIENT__: true,
+        __SERVER__: false,
+      }),
+    );
+
+    const resultConfig = {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: { ...config.resolve.alias, ...baseConfig.resolve.alias },
+        fallback: { ...config.resolve.fallback, zlib: false },
+      },
+    };
+
+    // Add-ons have to be loaded with babel
+    const addonPaths = registry
+      .getAddons()
+      .map((addon) => fs.realpathSync(addon.modulePath));
+
+    resultConfig.module.rules[13].exclude = (input) =>
+      // exclude every input from node_modules except from @plone/volto
+      /node_modules\/(?!(@plone\/volto)\/)/.test(input) &&
+      // Storybook default exclusions
+      /storybook-config-entry\.js$/.test(input) &&
+      /storybook-stories\.js$/.test(input) &&
+      // If input is in an addon, DON'T exclude it
+      !addonPaths.some((p) => input.includes(p));
+
+    resultConfig.module.rules[13].include = [
+      /preview\.jsx/,
+      ...resultConfig.module.rules[13].include,
+      ...addonPaths,
+    ];
+
+    const addonExtenders = registry.getAddonExtenders().map((m) => require(m));
+
+    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
+    // provided in a different manner by Storybook plugins (for example scss
+    // loaders).
+
+    return extendedConfig;
+  },
+};

.storybook/preview.jsx

@@ -0,0 +1,26 @@
+import '@plone/volto/config'; // This is the bootstrap for the global config - client side
+import React from 'react';
+import { StaticRouter } from 'react-router-dom';
+import { IntlProvider } from 'react-intl';
+import enMessages from '@root/../locales/en.json';
+
+import '@root/theme';
+
+export const parameters = {
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+
+export const decorators = [
+  (Story) => (
+    <IntlProvider messages={enMessages} locale="en" defaultLocale="en">
+      <StaticRouter location="/">
+        <Story />
+      </StaticRouter>
+    </IntlProvider>
+  ),
+];

.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
+  }
+}