generator-reackt 0.5.0 → 1.0.0

package/templates/app/.stylelintrc

@@ -1,271 +1,5 @@
 {
+  "customSyntax": "postcss-scss",
   "defaultSeverity": "warning",
-  "extends": "stylelint-config-recommended",
-  "rules": {
-    "at-rule-allowed-list": null,
-    "at-rule-disallowed-list": null,
-    "at-rule-empty-line-before": [
-      "always",
-      {
-        "except": [
-          "blockless-after-blockless",
-          "first-nested"
-        ],
-        "ignore": [
-          "after-comment"
-        ],
-        "ignoreAtRules": [
-          "else"
-        ]
-      }
-    ],
-    "at-rule-name-case": "lower",
-    "at-rule-name-newline-after": "always-multi-line",
-    "at-rule-name-space-after": "always-single-line",
-    "at-rule-no-unknown": [
-      true,
-      {
-        "ignoreAtRules": [
-          "each",
-          "content",
-          "else",
-          "extend",
-          "if",
-          "include",
-          "mixin",
-          "for",
-          "elseif",
-          "return",
-          "function"
-        ]
-      }
-    ],
-    "at-rule-no-vendor-prefix": true,
-    "at-rule-semicolon-newline-after": "always",
-    "at-rule-semicolon-space-before": "never",
-    "block-closing-brace-empty-line-before": "never",
-    "block-closing-brace-newline-after": [
-      "always",
-      {
-        "ignoreAtRules": [
-          "else",
-          "if"
-        ]
-      }
-    ],
-    "block-closing-brace-newline-before": "always-multi-line",
-    "block-closing-brace-space-after": "always-single-line",
-    "block-closing-brace-space-before": "always-single-line",
-    "block-no-empty": true,
-    "block-opening-brace-newline-after": "always",
-    "block-opening-brace-newline-before": "never-single-line",
-    "block-opening-brace-space-after": "always-single-line",
-    "block-opening-brace-space-before": "always",
-    "color-hex-case": "lower",
-    "color-hex-length": "short",
-    "color-named": [
-      "never",
-      {
-        "severity": "error"
-      }
-    ],
-    "color-no-hex": null,
-    "color-no-invalid-hex": true,
-    "comment-empty-line-before": [
-      "always",
-      {
-        "ignore": [
-          "after-comment",
-          "stylelint-commands"
-        ]
-      }
-    ],
-    "comment-no-empty": true,
-    "comment-whitespace-inside": "always",
-    "comment-word-disallowed-list": [
-      "/^TODO:/"
-    ],
-    "custom-media-pattern": null,
-    "custom-property-empty-line-before": null,
-    "custom-property-pattern": null,
-    "declaration-bang-space-after": "never",
-    "declaration-bang-space-before": "always",
-    "declaration-block-no-duplicate-properties": true,
-    "declaration-block-no-redundant-longhand-properties": true,
-    "declaration-block-no-shorthand-property-overrides": true,
-    "declaration-block-semicolon-newline-after": "always",
-    "declaration-block-semicolon-newline-before": null,
-    "declaration-block-semicolon-space-after": "always-single-line",
-    "declaration-block-semicolon-space-before": "never",
-    "declaration-block-single-line-max-declarations": 1,
-    "declaration-block-trailing-semicolon": "always",
-    "declaration-colon-newline-after": null,
-    "declaration-colon-space-after": "always",
-    "declaration-colon-space-before": "never",
-    "declaration-empty-line-before": "never",
-    "declaration-no-important": true,
-    "declaration-property-unit-allowed-list": {
-      "border": [
-        "px"
-      ],
-      "line-height": [],
-      "outline-offset": [
-        "px"
-      ]
-    },
-    "declaration-property-unit-disallowed-list": {},
-    "declaration-property-value-allowed-list": {},
-    "declaration-property-value-disallowed-list": {},
-    "font-family-name-quotes": "always-unless-keyword",
-    "font-family-no-duplicate-names": true,
-    "font-family-no-missing-generic-family-keyword": true,
-    "font-weight-notation": "numeric",
-    "function-allowed-list": null,
-    "function-calc-no-unspaced-operator": true,
-    "function-comma-newline-after": null,
-    "function-comma-newline-before": null,
-    "function-comma-space-after": "always",
-    "function-comma-space-before": null,
-    "function-disallowed-list": null,
-    "function-linear-gradient-no-nonstandard-direction": true,
-    "function-max-empty-lines": 0,
-    "function-name-case": "lower",
-    "function-parentheses-newline-inside": null,
-    "function-parentheses-space-inside": "never",
-    "function-url-no-scheme-relative": true,
-    "function-url-quotes": "always",
-    "function-url-scheme-allowed-list": null,
-    "function-url-scheme-disallowed-list": null,
-    "function-whitespace-after": "always",
-    "indentation": 2,
-    "keyframe-declaration-no-important": true,
-    "length-zero-no-unit": true,
-    "max-empty-lines": 2,
-    "max-line-length": 100,
-    "max-nesting-depth": 4,
-    "media-feature-colon-space-after": "always",
-    "media-feature-colon-space-before": "never",
-    "media-feature-name-allowed-list": null,
-    "media-feature-name-case": "lower",
-    "media-feature-name-disallowed-list": null,
-    "media-feature-name-no-unknown": true,
-    "media-feature-name-no-vendor-prefix": true,
-    "media-feature-parentheses-space-inside": "never",
-    "media-feature-range-operator-space-after": "always",
-    "media-feature-range-operator-space-before": "always",
-    "media-query-list-comma-newline-after": null,
-    "media-query-list-comma-newline-before": null,
-    "media-query-list-comma-space-after": null,
-    "media-query-list-comma-space-before": null,
-    "no-descending-specificity": true,
-    "no-duplicate-at-import-rules": true,
-    "no-duplicate-selectors": true,
-    "no-empty-source": true,
-    "no-eol-whitespace": true,
-    "no-extra-semicolons": true,
-    "no-invalid-double-slash-comments": true,
-    "no-missing-end-of-source-newline": true,
-    "no-unknown-animations": true,
-    "number-leading-zero": "always",
-    "number-max-precision": [
-      2,
-      {
-        "ignoreUnits": [
-          "em",
-          "rem"
-        ]
-      }
-    ],
-    "number-no-trailing-zeros": true,
-    "property-allowed-list": null,
-    "property-case": "lower",
-    "property-disallowed-list": null,
-    "property-no-unknown": true,
-    "property-no-vendor-prefix": true,
-    "rule-empty-line-before": [
-      "always",
-      {
-        "except": [
-          "first-nested"
-        ],
-        "ignore": [
-          "after-comment"
-        ]
-      }
-    ],
-    "selector-attribute-brackets-space-inside": "never",
-    "selector-attribute-operator-allowed-list": null,
-    "selector-attribute-operator-disallowed-list": null,
-    "selector-attribute-operator-space-after": "never",
-    "selector-attribute-operator-space-before": "never",
-    "selector-attribute-quotes": "always",
-    "selector-class-pattern": "[a-z]+",
-    "selector-combinator-allowed-list": null,
-    "selector-combinator-disallowed-list": null,
-    "selector-combinator-space-after": "always",
-    "selector-combinator-space-before": "always",
-    "selector-descendant-combinator-no-non-space": true,
-    "selector-id-pattern": null,
-    "selector-list-comma-newline-after": "always",
-    "selector-list-comma-newline-before": "never-multi-line",
-    "selector-list-comma-space-after": "always-single-line",
-    "selector-list-comma-space-before": null,
-    "selector-max-attribute": 1,
-    "selector-max-class": 3,
-    "selector-max-combinators": 2,
-    "selector-max-compound-selectors": 3,
-    "selector-max-empty-lines": 0,
-    "selector-max-id": 1,
-    "selector-max-pseudo-class": 2,
-    "selector-max-specificity": [
-      "0,5,1",
-      {
-        "severity": "error"
-      }
-    ],
-    "selector-max-type": 2,
-    "selector-max-universal": 1,
-    "selector-nested-pattern": null,
-    "selector-no-qualifying-type": true,
-    "selector-no-vendor-prefix": true,
-    "selector-pseudo-class-allowed-list": null,
-    "selector-pseudo-class-case": "lower",
-    "selector-pseudo-class-disallowed-list": null,
-    "selector-pseudo-class-no-unknown": true,
-    "selector-pseudo-class-parentheses-space-inside": "never",
-    "selector-pseudo-element-allowed-list": null,
-    "selector-pseudo-element-case": "lower",
-    "selector-pseudo-element-colon-notation": "double",
-    "selector-pseudo-element-disallowed-list": null,
-    "selector-pseudo-element-no-unknown": true,
-    "selector-type-case": "lower",
-    "selector-type-no-unknown": true,
-    "shorthand-property-no-redundant-values": true,
-    "string-no-newline": true,
-    "string-quotes": "double",
-    "time-min-milliseconds": 100,
-    "unit-allowed-list": [
-      "%",
-      "deg",
-      "em",
-      "ms",
-      "px",
-      "rem",
-      "s",
-      "vh",
-      "vmax",
-      "vmin",
-      "vw"
-    ],
-    "unit-case": "lower",
-    "unit-disallowed-list": null,
-    "unit-no-unknown": true,
-    "value-keyword-case": "lower",
-    "value-list-comma-newline-after": "always-multi-line",
-    "value-list-comma-newline-before": null,
-    "value-list-comma-space-after": null,
-    "value-list-comma-space-before": "never",
-    "value-list-max-empty-lines": 0,
-    "value-no-vendor-prefix": true
-  }
+  "extends": "stylelint-config-recommended"
 }

package/templates/app/.yarnrc.yml

@@ -0,0 +1,3 @@
+enableScripts: true
+
+nodeLinker: node-modules

package/templates/app/_eslint.config.mjs

@@ -0,0 +1,51 @@
+import globals from 'globals';
+import eslint from '@eslint/js';
+import { configs } from 'typescript-eslint';
+import { defineConfig } from 'eslint/config';
+import reactPlugin from 'eslint-plugin-react';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
+import { flatConfigs as importConfigs } from 'eslint-plugin-import-x';
+import prettierPlugin from 'eslint-plugin-prettier/recommended';
+
+export default defineConfig(
+  eslint.configs.recommended,
+  ...configs.recommended,
+  importConfigs.recommended,
+  importConfigs.react,
+  importConfigs.typescript,
+  reactPlugin.configs.flat['recommended'],
+  reactHooksPlugin.configs.flat['recommended-latest'],
+  {
+    languageOptions: {
+      globals: globals.browser
+    },
+    rules: {
+      'react/jsx-uses-react': 0,
+      'react/jsx-sort-props': 2,
+      'react/react-in-jsx-scope': 0
+    },
+    settings: {
+      react: {
+        version: 'detect'
+      }
+    }
+  },
+  {
+    files: ['webpack.config.*', '.storybook/*.ts'],
+    languageOptions: {
+      globals: globals.node
+    }
+  },
+  <% if (flags.addJest) { %>
+  {
+    files: ['./src/**/*.test.js'],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest
+      }
+    }
+  },
+  <% } %>
+  prettierPlugin
+);

package/templates/app/{package.json → _package.json}

@@ -5,8 +5,8 @@
   "author": "<%= author.name %> <<%= author.email %>>",
   "license": "<%= package.license %>",
   "scripts": {
-    <% if (flags.addStorybook) { %>
-    "storybook": "start-storybook",
+    <% if (flags.addLintStaged) { %>
+      "prepare": "husky",
     <% } %>
     <% if (flags.addJest) { %>
     "test": "jest",

package/templates/app/_stories/SuspenseFallback.stories.tsx

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

package/templates/app/gitignore

@@ -1,2 +1,3 @@
 node_modules/
 dist/
+.yarn/

package/templates/app/jest.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   collectCoverage: true,
   collectCoverageFrom: ['src/**/*.js', '!src/*.js'],
   coverageDirectory: './coverage',

package/templates/app/src/components/ErrorBoundary.tsx

@@ -0,0 +1,45 @@
+import { Fragment } from 'react';
+<% if (styleFramework === 'bootstrap') { %>
+import { Container } from 'react-bootstrap';
+<% } else if (styleFramework === 'foundation') { %>
+import { GridContainer as Container } from 'react-foundation';
+<% } else if (styleFramework === 'materialize') { %>
+import { Container } from 'react-materialize';
+<% } else if (styleFramework === 'uikit') { %>
+import { Container } from 'uikit-react';
+<% } else if (styleFramework === 'materialUi') { %>
+import { Container } from '@mui/material';
+<% } %>
+import { isRouteErrorResponse, useRouteError } from 'react-router';
+
+export default function ErrorBoundary() {
+  const error = useRouteError();
+
+  return (
+<% if (styleFramework === 'bulma') { %>
+    <div className="container">
+<% } else if (styleFramework) { %>
+    <Container>
+<% } else { %>
+    <div>
+<% } %>
+      <h1>Error</h1>
+      {isRouteErrorResponse(error) ? (
+        <h1>
+          {error.status} {error.statusText}
+        </h1>
+      ) : error instanceof Error ? (
+        <Fragment>
+          <h1>{error.message}</h1>
+          <pre>{error.stack}</pre>
+        </Fragment>
+      ) : (
+        <h1>{error as string}</h1>
+      )}
+<% if (styleFramework && styleFramework !== 'bulma') { %>
+    </Container>
+<% } else { %>
+    </div>
+<% } %>
+  );
+}

package/templates/app/src/components/Layout.tsx

@@ -0,0 +1,142 @@
+<% if (styleFramework === 'bootstrap') { %>
+import { Fragment } from 'react';
+import { Link, Outlet } from 'react-router-dom';
+import { Container, Nav, Navbar } from 'react-bootstrap';
+
+export default function Layout() {
+  return (
+    <Fragment>
+      <Navbar expand="lg" variant="dark">
+        <Container>
+          <Navbar.Brand>
+            <Nav.Link as={Link} to="/">
+              <%= package.name %>
+            </Nav.Link>
+          </Navbar.Brand>
+          <Navbar.Toggle />
+          <Navbar.Collapse>
+            <Nav></Nav>
+          </Navbar.Collapse>
+        </Container>
+      </Navbar>
+      <Container className="h-100">
+        <Outlet />
+      </Container>
+    </Fragment>
+  );
+}
+<% } else if (styleFramework === 'bulma') { %>
+import { Link, Outlet } from 'react-router-dom';
+
+export default function Layout() {
+  return (
+    <div className="container">
+      <nav aria-label="main navigation" className="navbar" role="navigation">
+        <div className="navbar-brand">
+          <Link className="navbar-item" to="/">
+            <%= package.name %>
+          </Link>
+        </div>
+      </nav>
+      <Outlet />
+    </div>
+  );
+}
+<% } else if (styleFramework === 'foundation') { %>
+import { Link, Outlet } from 'react-router-dom';
+import {
+  GridContainer,
+  Menu,
+  MenuItem,
+  TopBar,
+  TopBarLeft
+} from 'react-foundation';
+
+export default function Layout() {
+  return (
+    <GridContainer>
+      <TopBar>
+        <TopBarLeft>
+          <Menu>
+            <MenuItem>
+              <Link to="/"><%= package.name %></Link>
+            </MenuItem>
+          </Menu>
+        </TopBarLeft>
+      </TopBar>
+      <Outlet />
+    </GridContainer>
+  );
+}
+<% } else if (styleFramework === 'materialize') { %>
+import { Link, Outlet } from 'react-router-dom';
+import { Container, Icon, Navbar } from 'react-materialize';
+
+export default function Layout() {
+  return (
+    <Container>
+      <Navbar
+        brand={<Link to="/"><%= package.name %></Link>}
+        menuIcon={<Icon>menu</Icon>}
+      />
+      <Outlet />
+    </Container>
+  );
+}
+<% } else if (styleFramework === 'uikit') { %>
+import { Link, Outlet } from 'react-router-dom';
+import { Container, ListItem, Navbar, NavbarContainer } from 'uikit-react';
+
+export default function Layout() {
+  return (
+    <Container>
+      <NavbarContainer>
+        <Navbar left>
+          <ListItem>
+            <Link to="/"><%= package.name %></Link>
+          </ListItem>
+        </Navbar>
+      </NavbarContainer>
+      <Outlet />
+    </Container>
+  );
+}
+<% } else if (styleFramework === 'materialUi') { %>
+import { Fragment } from 'react';
+import { Link, Outlet } from 'react-router-dom';
+import {
+  AppBar,
+  Container,
+  CssBaseline,
+  Toolbar,
+  Typography
+} from '@mui/material';
+
+export default function Layout() {
+  return (
+    <Fragment>
+      <CssBaseline />
+      <AppBar position="static">
+        <Toolbar>
+          <Typography component={Link} to="/" variant="h6">
+            <%= package.name %>
+          </Typography>
+        </Toolbar>
+      </AppBar>
+      <Container>
+        <Outlet />
+      </Container>
+    </Fragment>
+  );
+}
+<% } else { %>
+import { Outlet } from 'react-router-dom';
+
+export default function Layout() {
+  return (
+    <div style={{ height: '100vh', width: '100%' }}>
+      <Outlet />
+    </div>
+  );
+}
+<% } %>

package/templates/app/src/components/SuspenseFallback.tsx

@@ -0,0 +1,96 @@
+<% if (styleFramework === 'bootstrap') { %>
+import { Row, Col, Spinner, Container } from 'react-bootstrap';
+
+export default function SuspenseFallback() {
+  return (
+    <Container className="h-100 w-100 d-flex flex-column justify-content-center">
+      <Row>
+        <Col className="text-center">
+          <h1>Loading...</h1>
+        </Col>
+      </Row>
+      <Row>
+        <Col className="text-center">
+          <Spinner animation="border" className="my-3" />
+        </Col>
+      </Row>
+    </Container>
+  );
+}
+<% } else if (styleFramework === 'foundation') { %>
+import { Cell, Grid, GridContainer } from 'react-foundation';
+
+export default function SuspenseFallback() {
+  return (
+    <GridContainer>
+      <Grid>
+        <Cell className="text-center" small={12}>
+          <h1>Loading...</h1>
+        </Cell>
+      </Grid>
+    </GridContainer>
+  );
+}
+<% } else if (styleFramework === 'materialize') { %>
+import { Col, Container, Preloader, Row } from 'react-materialize';
+
+export default function SuspenseFallback() {
+  return (
+    <Container>
+      <Row>
+        <Col className="center-align" s={12}>
+          <h1>Loading...</h1>
+        </Col>
+      </Row>
+      <Row>
+        <Col className="center-align" s={12}>
+          <Preloader active color="blue" size="big" />
+        </Col>
+      </Row>
+    </Container>
+  );
+}
+<% } else if (styleFramework === 'uikit') { %>
+import { Container, Section } from 'uikit-react';
+
+export default function SuspenseFallback() {
+  return (
+    <Section>
+      <Container className="uk-text-center">
+        <h1>Loading...</h1>
+      </Container>
+    </Section>
+  );
+}
+<% } else if (styleFramework === 'materialUi') { %>
+import { Box, CircularProgress, Container, Typography } from '@mui/material';
+
+export default function SuspenseFallback() {
+  return (
+    <Container>
+      <Box
+        sx={{
+          alignItems: 'center',
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100vh',
+          justifyContent: 'center'
+        }}
+      >
+        <Typography variant="h4">Loading...</Typography>
+        <CircularProgress sx={{ my: 3 }} />
+      </Box>
+    </Container>
+  );
+}
+<% } else { %>
+export default function SuspenseFallback() {
+  return (
+    <div style={{ height: '100vh', width: '100%' }}>
+      <div style={{ textAlign: 'center' }}>
+        <h1>Loading...</h1>
+      </div>
+    </div>
+  );
+}
+<% } %>

package/templates/app/src/{index.scss → index.nscss}

@@ -2,15 +2,16 @@
 @charset "utf-8";
 <% } %>
 <% if (styleFramework === 'bootstrap') { %>
-@import "~bootstrap/scss/bootstrap";
+@import "bootstrap/scss/bootstrap";
 <% } else if (styleFramework === 'uikit') { %>
-@import "~uikit/src/scss/variables-theme";
-@import "~uikit/src/scss/mixins-theme";
-@import "~uikit/src/scss/uikit-theme";
+@import "uikit/src/scss/variables-theme";
+@import "uikit/src/scss/mixins-theme";
+@import "uikit/src/scss/uikit-theme";
 <% } else if (styleFramework === 'foundation') { %>
-@import "~foundation-sites/scss/foundation";
+@import "foundation-sites/scss/foundation";
+@include foundation-everything;
 <% } else if (styleFramework === 'materialize') { %>
-@import "~materialize-css/sass/materialize";
+@import "materialize-css/sass/materialize";
 <% } else if (styleFramework === 'bulma') { %>
-@import "~bulma/bulma";
+@import "bulma/bulma";
 <% } %>