generator-reackt 0.6.0 → 1.0.0

package/templates/app/src/index.tsx

@@ -0,0 +1,60 @@
+import { Suspense } from 'react';
+import { createRoot } from 'react-dom/client';
+import { RouterProvider, createHashRouter } from 'react-router-dom';
+
+<% if (flags.addRedux) { %>
+import { Provider } from 'react-redux';
+import createSagaMiddleware from 'redux-saga';
+import { applyMiddleware, createStore, compose } from 'redux';
+<% } %>
+
+import './index.scss';
+<% if (styleFramework === 'materialize') { %>
+import 'materialize-css';
+<% } %>
+import Layout from './components/Layout';
+import SuspenseFallback from './components/SuspenseFallback';
+import ErrorBoundary from './components/ErrorBoundary';
+<% if (flags.addRedux) { %>
+import rootSaga from './sagas';
+import rootReducer from './reducers';
+
+const composer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+const sagaMiddleware = createSagaMiddleware();
+const enhancers = composer(applyMiddleware(sagaMiddleware));
+
+export const store = createStore(rootReducer, {}, enhancers);
+
+sagaMiddleware.run(rootSaga);
+<% } %>
+
+const rootElem = document.getElementById('root');
+
+if (rootElem) {
+  const root = createRoot(rootElem);
+  const router = createHashRouter([
+    {
+      path: '/',
+      element: <Layout />,
+      errorElement: <ErrorBoundary />,
+      children: [
+        {
+          index: true,
+          lazy: () => import(`./pages/index`)
+        }
+      ]
+    }
+  ]);
+
+  root.render(
+<% if (flags.addRedux) { %>
+      <Provider store={store}>
+<% } %>
+        <Suspense fallback={<SuspenseFallback />}>
+          <RouterProvider router={router} />
+        </Suspense>
+<% if (flags.addRedux) { %>
+      </Provider>
+<% } %>
+  )
+}

package/templates/app/src/pages/index.tsx

@@ -0,0 +1,3 @@
+export const Component = () => {
+  return <h1>Hello World</h1>;
+};

package/templates/app/src/reducers/application.ts

@@ -0,0 +1,36 @@
+import { ActionObject, AppState } from '../types';
+import { buildActions } from '../utils';
+
+export const types = buildActions('application', ['INIT_APP']);
+
+const initApp = () => ({
+  type: types.INIT_APP
+});
+
+export const actions = {
+  initApp
+};
+
+export const initialState: AppState = {
+  application: {
+    inited: false
+  }
+};
+
+export const reducer = (
+  state: AppState = initialState,
+  action: ActionObject = {}
+) => {
+  switch (action.type) {
+    case types.INIT_APP:
+      return {
+        ...state,
+        application: {
+          ...state.application,
+          inited: true
+        }
+      };
+    default:
+      return state;
+  }
+};

package/templates/app/src/reducers/{index.js → index.ts}

@@ -1,7 +1,8 @@
-import { combineReducers } from 'redux';
-
-import { reducer as application } from './application';
-
-export default combineReducers({
-  application
-});
+import { combineReducers } from 'redux';
+
+import { reducer as application } from './application';
+
+// Remember to update this when you add a new module
+export default combineReducers({
+  application
+});

package/templates/app/src/sagas/application.ts

@@ -0,0 +1,9 @@
+import { all } from 'redux-saga/effects';
+
+export const workers: Record<string, CallableFunction> = {};
+
+export const watchers: Record<string, CallableFunction> = {};
+
+export default function* saga() {
+  yield all(Object.values(watchers).map((watcher) => watcher()));
+}

package/templates/app/src/sagas/{index.js → index.ts}

@@ -1,7 +1,8 @@
-import { fork } from 'redux-saga/effects';
-
-import application from './application';
-
-export default function* saga() {
-  yield fork(application);
-}
+import { fork } from 'redux-saga/effects';
+
+import application from './application';
+
+// Remember to update this when you add a new module
+export default function* saga() {
+  yield fork(application);
+}

package/templates/app/src/selectors/application.test.ts

@@ -0,0 +1,18 @@
+import { AppState } from '../types';
+import { getApplication, getApplicationInited } from './application';
+
+describe('application selectors', () => {
+  const state: AppState = {
+    application: {
+      inited: false
+    }
+  };
+
+  it('can getApplication', () => {
+    expect(getApplication(state)).toBe(state.application);
+  });
+
+  it('can getApplicationInited', () => {
+    expect(getApplicationInited(state).toBe(state.application.inited));
+  });
+});

package/templates/app/src/selectors/application.ts

@@ -0,0 +1,6 @@
+import { AppState } from '../types';
+
+export const getApplication = (state: AppState) => state.application;
+
+export const getApplicationInited = (state: AppState) =>
+  getApplication(state).inited;

package/templates/app/src/types/globals.d.ts

@@ -0,0 +1 @@
+declare module '*.scss';

package/templates/app/src/types/index.ts

@@ -0,0 +1,11 @@
+<% if (flags.addRedux) { %>
+export type AppState = {
+  application: {
+    inited: boolean;
+  };
+};
+
+export type ActionObject = {
+  type?: string;
+};
+<% } %>

package/templates/app/src/utils/{index.js → index.ts}

@@ -1,36 +1,36 @@
-<% if (flags.addJest) { %>
-import { createElement } from 'react';
-<% } %>
-
-<% if (flags.addRedux) { %>
-/* eslint-disable react/display-name, react/prop-types */
-
-/**
- * Creates an object containing action constants namespaced under the specified reducer.
- *
- * @param {string} reducer The name of the reducer or module
- * @param {string[]} actions A list of action names
- * @return {object} Object with action name keys and full action string values
- */
-export function buildActions(reducer, actions) {
-  const result = {};
-
-  for (const action of actions) {
-    result[action] = `${reducer}/${action}`;
-  }
-
-  return result;
-}
-<% } %>
-
-<% if (flags.addJest) { %>
-/**
- * Creates a mock component which will expose its props for snapshot testing purposes.
- *
- * @param {string} name The component/element name (e.g. "MyComponent")
- * @param {object} props An object containing props to setup
- * @return {object} Mock component with specified name and props
- */
-export const mockComponent = (name, props = {}) => () =>
-  createElement(name, props, props.children);
-<% } %>
+<% if (flags.addJest) { %>
+import { createElement, ComponentProps } from 'react';
+<% } %>
+
+<% if (flags.addRedux) { %>
+/* eslint-disable react/display-name, react/prop-types */
+
+/**
+ * Creates an object containing action constants namespaced under the specified reducer.
+ *
+ * @param {string} reducer The name of the reducer or module
+ * @param {string[]} actions A list of action names
+ * @return {object} Object with action name keys and full action string values
+ */
+export function buildActions(reducer, actions) {
+  const result = {};
+
+  for (const action of actions) {
+    result[action] = `${reducer}/${action}`;
+  }
+
+  return result;
+}
+<% } %>
+
+<% if (flags.addJest) { %>
+/**
+ * Creates a mock component which will expose its props for snapshot testing purposes.
+ *
+ * @param {string} name The component/element name (e.g. "MyComponent")
+ * @param {ComponentProps} props An object containing props to set
+ * @return {object} Mock component with specified name and props
+ */
+export const mockComponent = (name: string, props: ComponentProps = {}) => () =>
+  createElement(name, props, props.children);
+<% } %>

package/templates/app/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "lib": ["esnext", "dom", "dom.iterable"],
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "rootDir": ".",
+  <% if (flags.addJest) { %>
+    "types": ["jest"],
+  <% } %>
+  <% if (styleFramework === 'uikit') { %>
+    // uikit-react ships a broken index.d.ts that would otherwise fail the build
+    "skipLibCheck": true,
+  <% } %>
+    "jsx": "react-jsx"
+  },
+  "include": ["src/", ".storybook/"]
+}

package/templates/app/webpack.config.nts

@@ -0,0 +1,121 @@
+import { fileURLToPath } from 'url';
+import { dirname, resolve } from 'path';
+import autoprefixer from 'autoprefixer';
+import HtmlPlugin from 'html-webpack-plugin';
+import ESLintPlugin from 'eslint-webpack-plugin';
+import TerserPlugin from 'terser-webpack-plugin';
+<% if (flags.addCnamePlugin) { %>
+import CnameWebpackPlugin from 'cname-webpack-plugin';
+<% } %>
+import StylelintPlugin from 'stylelint-webpack-plugin';
+import postcssFlexbugsFixes from 'postcss-flexbugs-fixes';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
+import { type Configuration, type WebpackPluginInstance } from 'webpack';
+import { CleanWebpackPlugin as CleanPlugin } from 'clean-webpack-plugin';
+
+import 'webpack-dev-server';
+
+const dev = process.env.NODE_ENV === 'development';
+
+const plugins: WebpackPluginInstance[] = [
+  new CleanPlugin(),
+  new HtmlPlugin({
+    template: './src/index.html'
+  }),
+  new MiniCssExtractPlugin(),
+<% if (flags.addCnamePlugin) { %>
+  new CnameWebpackPlugin({
+    domain: '<%= deploy.domain %>'
+  })
+<% } %>
+];
+
+if (dev) {
+  plugins.push(
+    new StylelintPlugin({
+      configFile: '.stylelintrc',
+      context: 'src',
+      files: '**/*.scss',
+      failOnError: true,
+      quiet: false,
+      customSyntax: 'postcss-scss'
+    }),
+    new ESLintPlugin()
+  );
+}
+
+const config: Configuration = {
+  mode: dev ? 'development' : 'production',
+  devtool: dev ? 'eval-cheap-module-source-map' : false,
+  entry: './src/index.tsx',
+  devServer: {
+    open: true,
+    historyApiFallback: true,
+    client: {
+      overlay: {
+        warnings: false
+      }
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: ['ts-loader'],
+        exclude: [/\.stories\.tsx$/, /node_modules/]
+      },
+      {
+        test: /\.(sa|sc|c)ss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                ident: 'postcss',
+                plugins: [autoprefixer, postcssFlexbugsFixes]
+              },
+              sourceMap: dev
+            }
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sassOptions: {
+                quietDeps: true
+              }
+            }
+          }
+        ]
+      },
+      {
+        test: /\.html$/,
+        use: [
+          {
+            loader: 'html-loader',
+            options: { minimize: true }
+          }
+        ]
+      }
+    ]
+  },
+  output: {
+    path: resolve(dirname(fileURLToPath(import.meta.url)), 'dist'),
+    filename: '[name].js',
+    chunkFilename: '[name].js',
+    publicPath: '/'
+  },
+  plugins,
+  resolve: {
+    extensions: ['.js', '.ts', '.tsx', '.json'],
+    modules: ['node_modules', 'src']
+  },
+  optimization: {
+    minimizer: [new TerserPlugin(), new CssMinimizerPlugin()]
+  },
+  ignoreWarnings: [/import rules are/]
+};
+
+export default config;

package/templates/component/index.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import <%= component.name %> from './<%= component.name %>';
+
+const meta = {
+  title: 'Components/<%= component.name %>',
+  component: <%= component.name %>
+} satisfies Meta<typeof <%= component.name %>>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/templates/component/{index.test.js → index.test.tsx}

@@ -1,14 +1,14 @@
-import renderer from 'react-test-renderer';
-
-import <%=component.name %> from './<%=component.name %>';
-
-describe('<<%= component.name %> />', () => {
-  it('renders correctly', () => {
-    const component = renderer.create(
-      <<%=component.name %> />
-    );
-    const tree = component.toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-});
+import renderer from 'react-test-renderer';
+
+import <%=component.name %> from './<%=component.name %>';
+
+describe('<<%= component.name %> />', () => {
+  it('renders correctly', () => {
+    const component = renderer.create(
+      <<%=component.name %> />
+    );
+    const tree = component.toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

package/templates/{app/src/components/App.js → component/index.tsx}

@@ -1,14 +1,16 @@
-<% if (flags.addRedux) { %>
-import { connect } from 'react-redux';
-<% } %>
-
-export <% if (!flags.addRedux) { %> default <% } %> function App() {
-  return <h1>Hello World</h1>;
-}
-
-<% if (flags.addRedux) { %>
-export default connect(
-  null,
-  null
-)(App);
-<% } %>
+<% if (flags.addRedux) { %>
+import { connect } from 'react-redux';
+<% } %>
+
+export default function <%= component.name %>() {
+  return <h1>Hello World</h1>;
+}
+
+<% if (flags.addRedux) { %>
+export default connect(
+  null,
+  null
+)(<%= component.name %>);
+<% } else { %>
+export default <%= component.name %>;
+<% } %>

package/templates/module/reducer/{index.js → index.ts}

@@ -1,20 +1,20 @@
-import { buildActions } from 'utils';
-
-export const types = buildActions('<%= module.name %>', ['INIT_APP']);
-
-const initApp = () => ({
-  type: types.INIT_APP
-});
-
-export const actions = {
-  initApp
-};
-
-export const initialState = {};
-
-export const reducer = (state = initialState, action = {}) => {
-  switch (action.type) {
-    default:
-      return state;
-  }
-};
+import { buildActions } from 'utils';
+
+export const types = buildActions('<%= module.name %>', ['INIT_APP']);
+
+const initApp = () => ({
+  type: types.INIT_APP
+});
+
+export const actions = {
+  initApp
+};
+
+export const initialState = {};
+
+export const reducer = (state = initialState, action = {}) => {
+  switch (action.type) {
+    default:
+      return state;
+  }
+};

package/templates/module/saga/{index.js → index.ts}

@@ -1,9 +1,9 @@
-import { all } from 'redux-saga/effects';
-
-export const workers = {};
-
-export const watchers = {};
-
-export default function* saga() {
-  yield all(Object.values(watchers));
-}
+import { all } from 'redux-saga/effects';
+
+export const workers = {};
+
+export const watchers = {};
+
+export default function* saga() {
+  yield all(Object.values(watchers));
+}

package/templates/app/.babelrc

@@ -1,4 +0,0 @@
-{
-  "presets": ["@babel/preset-env", ["@babel/preset-react", { "runtime": "automatic" }]],
-  "plugins": ["@babel/plugin-transform-runtime"]
-}

package/templates/app/.eslintrc.js

@@ -1,46 +0,0 @@
-const path = require('path');
-
-module.exports = {
-  "env": {
-    "browser": true,
-    "es2020": true,
-    <% if (flags.addJest) { %>
-    "jest": true,
-    <% } %>
-    "node": true
-  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:prettier/recommended",
-    "plugin:jsx-a11y/recommended",
-    "plugin:import/recommended",
-    "plugin:react-hooks/recommended",
-    <% if (flags.addJest) { %>
-    "plugin:jest/recommended"
-    <% } %>
-  ],
-  "parser": "@babel/eslint-parser",
-  "parserOptions": {
-    "requireConfigFile": false,
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "ecmaVersion": 12
-  },
-  "rules": {
-    "jsx-a11y/label-has-for": 0,
-    "react/jsx-uses-react": 0,
-    "react/react-in-jsx-scope": 0
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    },
-    "import/resolver": {
-      "webpack": {
-        "config": path.join(__dirname, 'webpack.config.babel.js')
-      }
-    }
-  }
-};

package/templates/app/.storybook/addons.js

@@ -1 +0,0 @@
-import '@storybook/addon-knobs/register';

package/templates/app/.storybook/config.js

@@ -1,14 +0,0 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import { configure, addDecorator } from '@storybook/react';
-
-import '../src/index.scss';
-
-function loadStories() {
-  const req = require.context('../src/components', true, /\.stories\.js$/);
-
-  req.keys().forEach(filename => req(filename));
-}
-
-addDecorator(withKnobs);
-
-configure(loadStories, module);

package/templates/app/.storybook/webpack.config.babel.js

@@ -1,7 +0,0 @@
-import webpack from '../webpack.config.babel';
-
-export default async ({ config }) => ({
-  ...config,
-  module: webpack.module,
-  resolve: webpack.resolve
-});

package/templates/app/jsconfig.json

@@ -1,7 +0,0 @@
-{
-  "compilerOptions": {
-    "module": "esnext",
-    "baseUrl": "./src"
-  },
-  "include": ["src/"]
-}