generator-folklore 3.0.3 → 3.0.6

package/lib/generators/npm-package/index.js

@@ -1,11 +1,11 @@
 "use strict";
 
+var _chalk = _interopRequireDefault(require("chalk"));
+
 var _lodash = _interopRequireDefault(require("lodash"));
 
 var _path = _interopRequireDefault(require("path"));
 
-var _chalk = _interopRequireDefault(require("chalk"));
-
 var _generator = _interopRequireDefault(require("../../lib/generator"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -225,11 +225,9 @@ module.exports = class NpmPackageGenerator extends _generator.default {
 
       packageJSON() {
         const srcPath = this.templatePath('_package.json');
-        const destPath = this.destinationPath('package.json');
         const packageJSON = this.fs.readJSON(srcPath);
         packageJSON.name = this.options['package-name'];
-        const currentPackageJSON = this.fs.exists(destPath) ? this.fs.readJSON(destPath) : {};
-        this.fs.writeJSON(destPath, _lodash.default.merge(packageJSON, currentPackageJSON));
+        this.packageJson.merge(packageJSON);
       }
 
     };

package/lib/generators/prettier/index.js

@@ -22,14 +22,27 @@ module.exports = class PrettierGenerator extends _generator.default {
     };
   }
 
-  writing() {
-    const srcPath = this.templatePath('prettierrc.json');
-    const destPath = this.destinationPath('.prettierrc.json');
-    this.fs.copy(srcPath, destPath);
+  get writing() {
+    return {
+      prettierrc() {
+        const srcPath = this.templatePath('prettierrc.json');
+        const destPath = this.destinationPath('.prettierrc.json');
+        this.fs.copy(srcPath, destPath);
+      },
+
+      dependencies() {
+        this.addDevDependencies(['prettier', '@prettier/plugin-php', '@trivago/prettier-plugin-sort-imports']);
+      }
+
+    };
   }
 
-  install() {
-    this.addDevDependencies(['prettier', '@prettier/plugin-php']);
+  async install() {
+    if (this.options['skip-install']) {
+      return;
+    }
+
+    await this.spawnCommand('npm', ['install']);
   }
 
 };

package/lib/generators/prettier/templates/prettierrc.json

@@ -2,5 +2,7 @@
     "printWidth": 100,
     "singleQuote": true,
     "trailingComma": "all",
-    "tabWidth": 4
+    "tabWidth": 4,
+    "importOrder": ["<THIRD_PARTY_MODULES>", "^[./](.*)?\/(utils|hooks|lib)", "^[./].*(?<!(\\.[a-z]+))$", "\\.scss$", "\\.[a-z]+$"],
+    "importOrderSeparation": true
 }

package/lib/generators/{js → react-app}/index.js

@@ -1,16 +1,22 @@
 "use strict";
 
+var _chalk = _interopRequireDefault(require("chalk"));
+
 var _lodash = _interopRequireDefault(require("lodash"));
 
 var _path = _interopRequireDefault(require("path"));
 
-var _chalk = _interopRequireDefault(require("chalk"));
-
 var _generator = _interopRequireDefault(require("../../lib/generator"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-module.exports = class JsGenerator extends _generator.default {
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+module.exports = class ReactAppGenerator extends _generator.default {
   // The name `constructor` is important here
   constructor(...args) {
     super(...args);
@@ -18,20 +24,13 @@ module.exports = class JsGenerator extends _generator.default {
       type: String,
       required: false
     });
-    this.option('babel-compile', {
-      type: Boolean,
-      defaults: false
-    });
     this.option('path', {
       type: String,
-      defaults: 'src/js'
+      defaults: 'src'
     });
     this.option('styles-path', {
       type: String
     });
-    this.option('root-props-import', {
-      type: String
-    });
   }
 
   initializing() {
@@ -46,7 +45,7 @@ module.exports = class JsGenerator extends _generator.default {
         }
 
         console.log(_chalk.default.yellow('\n----------------------'));
-        console.log('Javascript Generator');
+        console.log('React App Generator');
         console.log(_chalk.default.yellow('----------------------\n'));
       },
 
@@ -71,20 +70,6 @@ module.exports = class JsGenerator extends _generator.default {
     };
   }
 
-  configuring() {
-    const skipInstall = this.options['skip-install'];
-    this.composeWith('folklore:babel', {
-      'react-app': !this.options['babel-compile'],
-      compile: this.options['babel-compile'],
-      'skip-install': skipInstall,
-      quiet: true
-    });
-    this.composeWith('folklore:eslint', {
-      'skip-install': skipInstall,
-      quiet: true
-    });
-  }
-
   get writing() {
     return {
       directory() {
@@ -100,10 +85,7 @@ module.exports = class JsGenerator extends _generator.default {
 
       index() {
         const jsPath = this.options.path;
-        const rootPropsImport = this.options['root-props-import'] || null;
-        this.fs.copyTpl(this.templatePath('index.js'), this.destinationPath(_path.default.join(jsPath, 'index.js')), {
-          rootPropsImport
-        });
+        this.fs.copyTpl(this.templatePath('index.js'), this.destinationPath(_path.default.join(jsPath, 'index.js')));
       },
 
       styles() {
@@ -116,41 +98,29 @@ module.exports = class JsGenerator extends _generator.default {
         this.fs.copyTpl(srcPath, destPath, templateData);
       },
 
-      config() {
-        const jsPath = _lodash.default.get(this.options, 'path');
-
-        const srcPath = this.templatePath('config.js');
-        const destPath = this.destinationPath(_path.default.join(jsPath, 'config.js'));
-        this.fs.copy(srcPath, destPath);
-      },
-
-      browserslistrc() {
-        const srcPath = this.templatePath('browserslistrc');
-        const destPath = this.destinationPath('.browserslistrc');
-        this.fs.copy(srcPath, destPath);
-      },
-
       packageJSON() {
         const srcPath = this.templatePath('_package.json');
         const destPath = this.destinationPath('package.json');
         const packageJSON = this.fs.readJSON(srcPath);
-        packageJSON.name = this.options['project-name'];
-        const currentPackageJSON = this.fs.exists(destPath) ? this.fs.readJSON(destPath) : {};
-        this.fs.writeJSON(destPath, _lodash.default.merge(packageJSON, currentPackageJSON));
+        this.packageJson.merge(_objectSpread(_objectSpread({}, packageJSON), {}, {
+          name: this.options['project-name']
+        }));
+      },
+
+      dependencies() {
+        this.addDependencies(['react', 'react-dom', 'prop-types', 'react-intl', 'react-router', 'react-router-dom', 'react-helmet', 'classnames', '@folklore/routes', '@folklore/fonts', '@folklore/forms', '@folklore/fetch', '@folklore/hooks', '@folklore/tracking', // Polyfills
+        'intl', '@formatjs/intl-locale', '@formatjs/intl-pluralrules', 'intersection-observer', 'resize-observer-polyfill']);
       }
 
     };
   }
 
-  install() {
+  async install() {
     if (this.options['skip-install']) {
       return;
     }
 
-    const dependencies = ['domready@latest', 'fastclick@latest', 'keymirror@latest', 'lodash@latest', 'react@latest', 'prop-types@latest', 'react-dom@latest', 'react-redux@latest', 'react-intl@latest', 'react-router@^5.0.1', 'react-router-dom@latest', 'connected-react-router@latest', 'react-helmet@latest', 'node-polyglot@latest', 'classnames@latest', '@folklore/react-container@latest', '@folklore/fonts@latest', '@folklore/forms@latest', '@folklore/tracking@latest', 'react-loadable@latest', 'webfontloader@latest', 'intl@latest'];
-    const devDependencies = ['html-webpack-plugin@latest'];
-    this.addDependencies(dependencies);
-    this.addDevDependencies(devDependencies);
+    await this.spawnCommand('npm', ['install']);
   }
 
 };

package/lib/generators/react-app/templates/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+import Container from './components/Container';
+import shouldPolyfill from './polyfills/should';
+
+function getAppProps() {
+    return window.props || {};
+}
+
+function renderApp(props) {
+    const element = document.getElementById('app');
+    const container = React.createElement(Container, props);
+    const strictMode = React.createElement(React.StrictMode, {}, container);
+    const root = createRoot(element);
+    root.render(strictMode);
+}
+
+if (shouldPolyfill()) {
+    import('./polyfills/index').then(() => renderApp(getAppProps()));
+} else {
+    renderApp(getAppProps());
+}

package/lib/generators/react-app/templates/src/components/App.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+// import PropTypes from 'prop-types';
+import { Route, Routes } from 'react-router-dom';
+import { useRoutes } from '@folklore/routes';
+
+// import { useUrlGenerator } from '@folklore/routes';
+// import * as AppPropTypes from '../lib/PropTypes';
+import MainLayout from './layouts/Main';
+import ErrorPage from './pages/Error';
+import HomePage from './pages/Home';
+
+import '<%= getRelativeStylesPath('components/App.jsx', 'styles.scss') %>';
+
+const propTypes = {};
+
+const defaultProps = {};
+
+function App() {
+    const routes = useRoutes() || {};
+    return (
+        <Routes>
+            <Route
+                path={routes.home || '/'}
+                exact
+                element={
+                    <MainLayout>
+                        <HomePage />
+                    </MainLayout>
+                }
+            />
+            <Route
+                path="*"
+                element={
+                    <MainLayout>
+                        <ErrorPage />
+                    </MainLayout>
+                }
+            />
+        </Routes>
+    );
+}
+
+App.propTypes = propTypes;
+App.defaultProps = defaultProps;
+
+export default App;

package/lib/generators/react-app/templates/src/components/Container.jsx

@@ -0,0 +1,40 @@
+import { RoutesProvider } from '@folklore/routes';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { BrowserRouter } from 'react-router-dom';
+
+// import * as AppPropTypes from '../lib/PropTypes';
+import App from './App';
+
+const propTypes = {
+    locale: PropTypes.string,
+    messages: PropTypes.oneOfType([
+        PropTypes.objectOf(PropTypes.objectOf(PropTypes.string)),
+        PropTypes.objectOf(PropTypes.string),
+    ]),
+    routes: PropTypes.objectOf(PropTypes.string),
+};
+
+const defaultProps = {
+    locale: 'fr',
+    messages: {},
+    routes: {},
+};
+
+function Container({ locale, messages, routes }) {
+    return (
+        <IntlProvider locale={locale} messages={messages[locale] || messages}>
+            <BrowserRouter>
+                <RoutesProvider routes={routes}>
+                    <App />
+                </RoutesProvider>
+            </BrowserRouter>
+        </IntlProvider>
+    );
+}
+
+Container.propTypes = propTypes;
+Container.defaultProps = defaultProps;
+
+export default Container;

package/lib/generators/{js → react-app}/templates/src/components/buttons/Button.jsx

@@ -5,9 +5,8 @@ import classNames from 'classnames';
 import { Link } from 'react-router-dom';
 
 import * as AppPropTypes from '../../lib/PropTypes';
-import Label from '../partials/Label';
 
-import styles from '<%= getRelativeStylesPath('components/buttons/Button.jsx', 'buttons/button.scss') %>';
+import styles from '<%= getRelativeStylesPath('components/buttons/Button.jsx', 'buttons/button.module.scss') %>';
 
 const propTypes = {
     type: PropTypes.string,
@@ -22,9 +21,6 @@ const propTypes = {
     disabled: PropTypes.bool,
     loading: PropTypes.bool,
     disableOnLoading: PropTypes.bool,
-    small: PropTypes.bool,
-    big: PropTypes.bool,
-    withShadow: PropTypes.bool,
     className: PropTypes.string,
     iconClassName: PropTypes.string,
     labelClassName: PropTypes.string,
@@ -44,16 +40,13 @@ const defaultProps = {
     disabled: false,
     loading: false,
     disableOnLoading: true,
-    small: false,
-    big: false,
-    withShadow: false,
     className: null,
     iconClassName: null,
     labelClassName: null,
     onClick: null,
 };
 
-const Button = ({
+function Button({
     type,
     href,
     external,
@@ -66,16 +59,12 @@ const Button = ({
     disabled,
     loading,
     disableOnLoading,
-    small,
-    big,
-    withShadow,
     onClick,
     className,
     iconClassName,
     labelClassName,
-}) => {
+}) {
     const finalLabel = label || children;
-    const text = <Label>{finalLabel}</Label>;
     const hasChildren = label !== null && children !== null;
     const hasIcon = icon !== null;
     const hasInlineIcon = hasIcon && (iconPosition === 'inline' || text === null);
@@ -120,7 +109,7 @@ const Button = ({
                     {hasChildren ? children : null}
                 </>
             ) : null}
-            {!hasIcon ? text : null}
+            {!hasIcon ? finalLabel : null}
             {hasChildren ? children : null}
         </>
     );
@@ -131,9 +120,6 @@ const Button = ({
             [styles.withIcon]: hasIcon,
             [styles.withIconColumns]: hasIconColumns,
             [styles.withText]: text !== null,
-            [styles.withShadow]: withShadow,
-            [styles.isSmall]: small,
-            [styles.isBig]: big,
             [styles.isLink]: href !== null,
             [styles.isDisabled]: disabled,
             [styles.isLoading]: loading,

package/lib/generators/react-app/templates/src/components/layouts/Main.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import styles from '<%= getRelativeStylesPath('components/layouts/Main.jsx', 'layouts/main.module.scss') %>';
+
+const propTypes = {
+    children: PropTypes.node.isRequired,
+};
+
+const defaultProps = {
+
+};
+
+function MainLayout({ children }) {
+    return (
+        <div className={styles.container}>
+            <div className={styles.inner}>
+                <div className={styles.content}>{children}</div>
+            </div>
+        </div>
+    );
+};
+
+MainLayout.propTypes = propTypes;
+MainLayout.defaultProps = defaultProps;
+
+export default MainLayout;

package/lib/generators/react-app/templates/src/components/menus/Menu.jsx

@@ -0,0 +1,62 @@
+/* eslint-disable react/no-array-index-key */
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Link } from 'react-router-dom';
+
+import * as AppPropTypes from '../../lib/PropTypes';
+import Label from '../partials/Label';
+
+import styles from '<%= getRelativeStylesPath('components/menus/Menu.jsx', 'menus/menu.module.scss') %>';
+
+const propTypes = {
+    items: AppPropTypes.menuItems,
+    className: PropTypes.string,
+};
+
+const defaultProps = {
+    items: [],
+    className: null,
+};
+
+function Menu({ items, className }) {
+    return (
+        <nav
+            className={classNames([
+                styles.container,
+                {
+                    [className]: className !== null,
+                },
+            ])}
+        >
+            <ul className={styles.items}>
+                {items.map(({ label, url, active = false, external = false, target = '_blank' }, index) => (
+                    <li
+                        className={classNames([
+                            styles.item,
+                            {
+                                [styles.active]: active,
+                            },
+                        ])}
+                        key={`item-${index}`}
+                    >
+                        {external ? (
+                            <a href={url} target={target} className={styles.link}>
+                                <Label>{label}</Label>
+                            </a>
+                        ) : (
+                            <Link to={url} className={styles.link}>
+                                <Label>{label}</Label>
+                            </Link>
+                        )}
+                    </li>
+                ))}
+            </ul>
+        </nav>
+    );
+}
+
+Menu.propTypes = propTypes;
+Menu.defaultProps = defaultProps;
+
+export default Menu;

package/lib/generators/{js → react-app}/templates/src/components/pages/Error.jsx

@@ -1,16 +1,14 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { defineMessages } from 'react-intl';
-import { useUrlGenerator } from '@folklore/react-container';
+import { defineMessages, FormattedMessage } from 'react-intl';
+import { useUrlGenerator } from '@folklore/routes';
 
 // import * as AppPropTypes from '../../lib/PropTypes';
 import PageMeta from '../partials/PageMeta';
-import Label from '../partials/Label';
 
-import styles from '<%= getRelativeStylesPath('components/pages/Error.jsx', 'pages/error.scss') %>';
+import styles from '<%= getRelativeStylesPath('components/pages/Error.jsx', 'pages/error.module.scss') %>';
 
 export const messages = defineMessages({
     metaTitle401: {
@@ -79,21 +77,21 @@ const defaultProps = {
     statusCode: 404,
 };
 
-const ErrorPage = ({ statusCode }) => {
-    const urlGenerator = useUrlGenerator();
+function ErrorPage({ statusCode }) {
+    const url = useUrlGenerator();
     return (
         <div className={styles.container}>
             <PageMeta title={messages[`metaTitle${statusCode || 404}`]} />
             <div className={styles.inner}>
                 <h1 className={styles.title}>
-                    <Label>{messages[`title${statusCode || 404}`]}</Label>
+                    <FormattedMessage {...messages[`title${statusCode || 404}`]} />
                 </h1>
                 <p className={styles.description}>
-                    <Label>{messages[`description${statusCode || 404}`]}</Label>
+                    <FormattedMessage {...messages[`description${statusCode || 404}`]} />
                 </p>
                 <div className={styles.actions}>
-                    <Link to={urlGenerator.route('home')}>
-                        <Label>{messages.gotoHome}</Label>
+                    <Link to={url('home')}>
+                        <FormattedMessage {...messages.gotoHome} />
                     </Link>
                 </div>
             </div>
@@ -104,6 +102,4 @@ const ErrorPage = ({ statusCode }) => {
 ErrorPage.propTypes = propTypes;
 ErrorPage.defaultProps = defaultProps;
 
-export default connect(({ site: { statusCode } }) => ({
-    statusCode,
-}))(ErrorPage);
+export default ErrorPage;

package/lib/generators/react-app/templates/src/components/pages/Home.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+// import PropTypes from 'prop-types';
+import { defineMessages } from 'react-intl';
+
+// import * as AppPropTypes from '../../lib/PropTypes';
+import PageMeta from '../partials/PageMeta';
+
+import styles from '<%= getRelativeStylesPath('components/pages/Home.jsx', 'pages/home.module.scss') %>';
+
+const messages = defineMessages({
+    metaTitle: {
+        defaultMessage: 'Home',
+        description: 'Page title'
+    },
+});
+
+const propTypes = {
+    // intl: AppPropTypes.intl.isRequired,
+};
+
+function HomePage () {
+    return (
+        <div className={styles.container}>
+            <PageMeta title={messages.metaTitle} />
+            <div className={styles.logo} />
+        </div>
+    );
+}
+
+HomePage.propTypes = propTypes;
+
+export default HomePage;

package/lib/generators/{js → react-app}/templates/src/components/partials/PageMeta.jsx

@@ -1,20 +1,19 @@
 /* eslint-disable react/no-array-index-key */
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 
 import * as AppPropTypes from '../../lib/PropTypes';
 import { isMessage } from '../../lib/utils';
 
 const messages = defineMessages({
     title: {
-        id: 'meta.title',
         defaultMessage: 'Title',
+        description: 'Page title',
     },
 });
 
 const propTypes = {
-    intl: AppPropTypes.intl.isRequired,
     title: AppPropTypes.message,
 };
 
@@ -22,15 +21,16 @@ const defaultProps = {
     title: messages.title,
 };
 
-const PageMeta = ({
-    intl, title,
-}) => (
-    <Helmet>
-        <title>{isMessage(title) ? intl.formatMessage(title) : title}</title>
-    </Helmet>
-);
+function PageMeta({ title }) {
+    const intl = useIntl();
+    return (
+        <Helmet>
+            <title>{isMessage(title) ? intl.formatMessage(title) : title}</title>
+        </Helmet>
+    );
+}
 
 PageMeta.propTypes = propTypes;
 PageMeta.defaultProps = defaultProps;
 
-export default React.memo(injectIntl(PageMeta));
+export default React.memo(PageMeta);

package/lib/generators/react-app/templates/src/polyfills/index.js

@@ -0,0 +1,6 @@
+import 'intl';
+import '@formatjs/intl-locale/polyfill';
+import '@formatjs/intl-pluralrules/polyfill';
+import 'intersection-observer';
+import ResizeObserver from 'resize-observer-polyfill';
+window.ResizeObserver = ResizeObserver;

package/lib/generators/react-app/templates/src/polyfills/intl-en.js

@@ -0,0 +1,2 @@
+import 'intl/locale-data/jsonp/en';
+import '@formatjs/intl-pluralrules/locale-data/en'; // Add locale data for de

package/lib/generators/react-app/templates/src/polyfills/intl-fr.js

@@ -0,0 +1,2 @@
+import 'intl/locale-data/jsonp/fr';
+import '@formatjs/intl-pluralrules/locale-data/fr'; // Add locale data for de

package/lib/generators/react-app/templates/src/polyfills/should.js

@@ -0,0 +1,14 @@
+import { shouldPolyfill as shouldPolyfillLocale } from '@formatjs/intl-locale/should-polyfill';
+import { shouldPolyfill as shouldPolyfillPlural } from '@formatjs/intl-pluralrules/should-polyfill';
+
+function should() {
+    return (
+        typeof window.Intl === 'undefined' ||
+        shouldPolyfillLocale() ||
+        shouldPolyfillPlural() ||
+        typeof window.IntersectionObserver === 'undefined' ||
+        typeof window.ResizeObserver === 'undefined'
+    );
+}
+
+export default should;