generator-reackt 1.1.0 → 1.2.0

package/README.md

@@ -5,19 +5,38 @@ This project scaffolds a modern web application. It is fairly opinionated, but i
 Here's the mile-long list of technologies the generated project can leverage:
 
 - [TypeScript](https://www.typescriptlang.org/) - The language of the modern web
-- [Webpack](https://webpack.js.org/) - Bundle code, styles, markup, and more into a web application
-- [husky](https://www.npmjs.com/package/husky) - Execute lint-staged before committing to Git
-- [lint-staged](https://www.npmjs.com/package/lint-staged) - Execute linters for specific file types
+- [Webpack](https://webpack.js.org/) - Bundle code, styles, markup, and more
+- [React](https://reactjs.org/) - Application framework library
+
+Linting tools:
+
 - [ESLint](https://eslint.org/) - Apply hundreds of style/usage rules to JS/TS
 - [Prettier](https://prettier.io/) - Apply style/formatting rules to code
 - [stylelint](https://stylelint.io/) - Apply style/usage rules to Sass
-- [Bootstrap](https://getbootstrap.com/) - UI toolkit
-- [Material-UI](https://mui.com/material-ui/) - UI toolkit
-- [React](https://reactjs.org/) - UI library
+
+Optional pre-commit linting:
+
+- [husky](https://www.npmjs.com/package/husky) - Execute lint-staged before committing to Git
+- [lint-staged](https://www.npmjs.com/package/lint-staged) - Execute linters for specific file types
+
+Optional style frameworks:
+
+- [Bulma](https://bulma.io/)
+- [Bootstrap](https://getbootstrap.com/)
+- [Foundation](https://get.foundation/sites.html)
+- [Material-UI](https://mui.com/material-ui/)
+- [Materialize CSS](https://materializecss.com/)
+- [UIkit](https://getuikit.com/)
+
+Optional test frameworks:
+
+- [Jest](https://jestjs.io/) - Unit, integration, and snapshot testing
+- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) - Opinionated unit testing for React
+
+Optional state management:
+
 - [Redux](https://redux.js.org/) - Application state container
 - [Redux-Saga](https://redux-saga.js.org/) - Redux middleware for action/side-effect interaction
-- [Jest](https://jestjs.io/) - Unit, integration, and snapshot testing
-- [RTL](https://testing-library.com/docs/react-testing-library/intro/) - Opinionated unit testing for React
 
 ## Installation
 
@@ -33,4 +52,6 @@ To create an application, run `yo reackt`.
 
 To create a new React component, run `yo reackt:component`.
 
+To create a new page, run `yo reackt:page`. You will be asked for a page name and a URL, and the page is registered in `src/routes.tsx` so that it is routable and shows up in the navigation bar.
+
 If you are using Redux, you can create a new module (slice of reducer and sagas) with `yo reackt:module`.

package/generators/app/index.js

@@ -1 +1 @@
-import{join as e}from"path";import t from"gulp-if";import{format as s}from"date-fns";import a from"gulp-prettier";import{readFileSync as i}from"jsonfile";import o from"yeoman-stylelint";import n from"spdx-license-ids"with{type:"json"};import{src as r}from"../util/fs.js";import l from"../util/generator.js";import{StyleFrameworks as c,TestFrameworks as d}from"../types/index.js";n.push("SEE LICENSE IN LICENSE"),n.sort();const p=e=>Object.fromEntries(Object.entries(e).map(([e,t])=>[e,/^\d/.test(t)?`^${t}`:t])),m=[{value:c.None,name:"None"},{value:c.Bootstrap,name:"Bootstrap"},{value:c.Bulma,name:"Bulma"},{value:c.Foundation,name:"Foundation"},{value:c.Materialize,name:"Materialize"},{value:c.UIKit,name:"UIKit"},{value:c.MaterialUI,name:"Material-UI"}],g=[{value:d.None,name:"None"},{value:d.Jest,name:"Jest"},{value:d.ReactTestingLibrary,name:"React Testing Library"}],y={fontAwesome:["@fortawesome/fontawesome-svg-core","@fortawesome/free-solid-svg-icons","@fortawesome/react-fontawesome"],[c.Bootstrap]:["bootstrap","react-bootstrap","@popperjs/core"],[c.Bulma]:["bulma"],[c.UIKit]:["uikit","uikit-react"],[c.Foundation]:["foundation-sites","react-foundation"],[c.Materialize]:["materialize-css","react-materialize"],[c.MaterialUI]:["@mui/material","@emotion/react","@emotion/styled"],lintStaged:["husky","lint-staged"],redux:["redux","react-redux","redux-saga"],reduxJest:["redux-mock-store"],[d.Jest]:["@types/jest","@types/react-test-renderer","eslint-plugin-jest","identity-obj-proxy","jest","jest-environment-jsdom","react-test-renderer","ts-jest","opener"],[d.ReactTestingLibrary]:["@testing-library/react","@testing-library/dom","@testing-library/jest-dom","@testing-library/user-event"],core:["normalize-scss","react","react-dom","react-router-dom@6","reselect","classnames"],storybook:["storybook@10","@storybook/react-vite","@storybook/addon-docs","@storybook/addon-a11y","@storybook/addon-links","@storybook/addon-themes","@vitejs/plugin-react","vite"],esdoc:["esdoc","esdoc-ecmascript-proposal-plugin","esdoc-jsx-plugin","esdoc-standard-plugin","opener"],dev:["@eslint/js@9","@types/react","@types/react-dom","autoprefixer","clean-webpack-plugin","cross-env","css-loader","css-minimizer-webpack-plugin","eslint-config-prettier","eslint-import-resolver-typescript","eslint-plugin-import-x","eslint-plugin-prettier","eslint-plugin-react-hooks","eslint-plugin-react","eslint-webpack-plugin","eslint@9","globals","html-loader","html-webpack-plugin","mini-css-extract-plugin","postcss","postcss-flexbugs-fixes","postcss-loader","postcss-scss","prettier","sass-loader","sass","style-loader","stylelint-config-recommended","stylelint-webpack-plugin","stylelint","terser-webpack-plugin","ts-loader","typescript@6","typescript-eslint","webpack-cli","webpack","webpack-dev-server"]},u={foundation:["@types/react-foundation"]},h={core:[".yarnrc.yml",".prettierrc",".stylelintrc",".editorconfig",".browserslistrc"],templated:["tsconfig.json",r("index.tsx"),r("index.html"),r("utils","index.ts")],esdoc:[".esdoc.json"],jest:["jest.config.mjs"],rtl:["jest.setup.ts"],storybook:[e(".storybook","main.ts"),e(".storybook","preview.ts")],lintStaged:[".lintstagedrc"]},f={redux:[r("reducers"),r("sagas"),r("selectors")],templated:[r("components"),r("pages"),r("types")]},k={esdoc:{"build:documentation":"esdoc","view:documentation":"opener ./docs/index.html"},jest:{test:"jest","view:coverage":"opener ./coverage/index.html"},storybook:{storybook:"storybook dev -p 6006","build:storybook":"storybook build"}};class b extends l{templateDirectory(){return"app"}initializing(){this.env.options.nodePackageManager="yarn",process.env.YARN_NPM_MINIMAL_AGE_GATE="0",this.queueTransformStream({},t(/\.(json|tsx?)$/,a(i(this.fileSystem.resolve(".prettierrc")))),t(/\.scss$/,o({configFile:this.fileSystem.resolve(".stylelintrc")})))}async prompting(){const[e,t]=await Promise.all([this.git.name(),this.git.email()]);this.answers=await this.prompt([{type:"input",name:"package.name",message:"Package name",default:this.appname.replace(/\s+/g,"-")},{type:"input",name:"package.version",message:"Package version",default:"0.1.0"},{type:"search",name:"package.license",message:"Package license",source:e=>{const t=new RegExp(`.*${e??""}.*`,"i");return n.filter(e=>t.test(e))}},{type:"input",name:"package.description",message:"Package description"},{type:"input",name:"author.name",message:"Author name",default:e},{type:"input",name:"author.email",message:"Author email address",default:t},{type:"select",name:"styleFramework",message:"What CSS framework would you like to use?",choices:m},{type:"select",name:"testFramework",message:"What testing framework would you like to use?",choices:g},{type:"confirm",name:"flags.addCnamePlugin",message:"Deploying to GitHub Pages with CNAME?",default:!1},{type:"input",name:"deploy.domain",message:"Hostname to use",when:e=>e.flags.addCnamePlugin},{type:"confirm",name:"flags.addLintStaged",message:"Force linting before commits?",default:!0},{type:"confirm",name:"flags.addFontAwesome",message:"Add Font Awesome?",default:!0},{type:"confirm",name:"flags.addRedux",message:"Add Redux?",default:!1},{type:"confirm",name:"flags.addStorybook",message:"Add Storybook?",default:!1},{type:"confirm",name:"flags.addEsDoc",message:"Add ESDoc?",default:!1}])}async writing(){const{flags:t,styleFramework:a,testFramework:i,package:{license:o},author:{name:n,email:l}}=this.answers;this.config.set("testFramework",i);let c="Place your license here.\n";if("SEE LICENSE IN LICENSE"!==o){this.log(`Downloading ${o} license from spdx/license-list-data...`);const e=await fetch(`https://raw.githubusercontent.com/spdx/license-list-data/master/text/${o}.txt`);if(200!==e.status)this.log(`License download failed with HTTP ${e.status} - ${e.statusText}`);else{c=(await e.text()).replace("<year>",s(new Date,"yyyy")).replace("<copyright holders>",`${n} <${l}>`)}}this.fileSystem.createFile("LICENSE",c),h.core.forEach(this.fileSystem.copy),h.templated.forEach(this.fileSystem.copyTemplateInPlace),f.templated.forEach(this.fileSystem.copyDirectory),this.fileSystem.copyTemplate("_package.json","package.json"),this.fileSystem.copyTemplate("_eslint.config.mjs","eslint.config.mjs"),this.fileSystem.copyTemplate("webpack.config.nts","webpack.config.ts"),"materialUi"!==this.answers.styleFramework&&this.fileSystem.copyTemplate(r("index.nscss"),r("index.scss")),this.fileSystem.copyTo("gitignore",".gitignore"),t.addRedux&&(f.redux.forEach(this.fileSystem.copyDirectory),i||this.fs.delete(this.destinationPath(r("selectors","application.test.ts")))),i&&(h[d.Jest].forEach(this.fileSystem.copyTemplateInPlace),this.fs.append(this.destinationPath(".gitignore"),"coverage/"),this.fs.extendJSON(this.destinationPath("package.json"),{scripts:{...k[d.Jest]}}),i===d.ReactTestingLibrary&&h[d.ReactTestingLibrary].forEach(this.fileSystem.copyTemplateInPlace)),t.addStorybook&&(h.storybook.forEach(this.fileSystem.copyTemplateInPlace),this.fileSystem.copyTemplate(e("_stories","SuspenseFallback.stories.tsx"),r("components","SuspenseFallback.stories.tsx")),this.fs.append(this.destinationPath(".gitignore"),"storybook-static/"),this.fs.extendJSON(this.destinationPath("package.json"),{scripts:{...k.storybook}})),t.addEsDoc&&(h.esdoc.forEach(this.fileSystem.copy),this.fs.append(this.destinationPath(".gitignore"),"docs/"),this.fs.extendJSON(this.destinationPath("package.json"),{scripts:{...k.esdoc}})),t.addLintStaged&&(h.lintStaged.forEach(this.fileSystem.copy),this.fileSystem.createFile(".husky/pre-commit","npx lint-staged\n"));const m=[...y.core],g=[...y.dev];a&&(m.push(...y[a]),u[a]&&g.push(...u[a])),i&&(g.push(...y[d.Jest]),i===d.ReactTestingLibrary&&g.push(...y[d.ReactTestingLibrary])),t.addLintStaged&&g.push(...y.lintStaged),t.addFontAwesome&&m.push(...y.fontAwesome),t.addRedux&&m.push(...y.redux),t.addRedux&&i&&g.push(...y.reduxJest),t.addStorybook&&g.push(...y.storybook),t.addEsDoc&&m.push(...y.esdoc),this.log(`Resolving ${m.length} dependencies and ${g.length} dev dependencies.`);const[b,w]=await Promise.all([this.addDependencies(m),this.addDevDependencies(g)]);this.packageJson.merge({dependencies:p(b),devDependencies:p(w)})}install(){this.spawnSync("yarn",["set","version","stable"],{stdio:"inherit"})}async end(){const{flags:e}=this.answers;this.spawnSync("git",["init"],{stdio:"inherit"}),e.addLintStaged&&this.spawnSync("npx",["husky"],{stdio:"inherit"})}}export{b as default};
+import{join as e}from"path";import t from"gulp-if";import{format as s}from"date-fns";import a from"gulp-prettier";import{readFileSync as i}from"jsonfile";import o from"yeoman-stylelint";import n from"spdx-license-ids"with{type:"json"};import{src as r}from"../util/fs.js";import l from"../util/generator.js";import{StyleFrameworks as c,TestFrameworks as d}from"../types/index.js";n.push("SEE LICENSE IN LICENSE"),n.sort();const p=e=>Object.fromEntries(Object.entries(e).map(([e,t])=>[e,/^\d/.test(t)?`^${t}`:t])),m=[{value:c.None,name:"None"},{value:c.Bootstrap,name:"Bootstrap"},{value:c.Bulma,name:"Bulma"},{value:c.Foundation,name:"Foundation"},{value:c.Materialize,name:"Materialize"},{value:c.UIkit,name:"UIkit"},{value:c.MaterialUI,name:"Material-UI"}],g=[{value:d.None,name:"None"},{value:d.Jest,name:"Jest"},{value:d.ReactTestingLibrary,name:"React Testing Library"}],y={fontAwesome:["@fortawesome/fontawesome-svg-core","@fortawesome/free-solid-svg-icons","@fortawesome/react-fontawesome"],[c.Bootstrap]:["bootstrap","react-bootstrap","@popperjs/core"],[c.Bulma]:["bulma"],[c.UIkit]:["uikit","uikit-react"],[c.Foundation]:["foundation-sites","react-foundation"],[c.Materialize]:["materialize-css","react-materialize"],[c.MaterialUI]:["@mui/material","@emotion/react","@emotion/styled"],lintStaged:["husky","lint-staged"],redux:["redux","react-redux","redux-saga"],reduxJest:["redux-mock-store"],[d.Jest]:["@types/jest","@types/react-test-renderer","eslint-plugin-jest","identity-obj-proxy","jest","jest-environment-jsdom","react-test-renderer","ts-jest","opener"],[d.ReactTestingLibrary]:["@testing-library/react","@testing-library/dom","@testing-library/jest-dom","@testing-library/user-event"],core:["normalize-scss","react","react-dom","react-router-dom@6","reselect","classnames"],storybook:["storybook@10","@storybook/react-vite","@storybook/addon-docs","@storybook/addon-a11y","@storybook/addon-links","@storybook/addon-themes","@vitejs/plugin-react","vite"],esdoc:["esdoc","esdoc-ecmascript-proposal-plugin","esdoc-jsx-plugin","esdoc-standard-plugin","opener"],dev:["@eslint/js@9","@types/react","@types/react-dom","autoprefixer","clean-webpack-plugin","cross-env","css-loader","css-minimizer-webpack-plugin","eslint-config-prettier","eslint-import-resolver-typescript","eslint-plugin-import-x","eslint-plugin-prettier","eslint-plugin-react-hooks","eslint-plugin-react","eslint-webpack-plugin","eslint@9","globals","html-loader","html-webpack-plugin","mini-css-extract-plugin","postcss","postcss-flexbugs-fixes","postcss-loader","postcss-scss","prettier","sass-loader","sass","style-loader","stylelint-config-recommended","stylelint-webpack-plugin","stylelint","terser-webpack-plugin","ts-loader","typescript@6","typescript-eslint","webpack-cli","webpack","webpack-dev-server"]},u={foundation:["@types/react-foundation"]},h={core:[".yarnrc.yml",".prettierrc",".stylelintrc",".editorconfig",".browserslistrc"],templated:["tsconfig.json",r("index.tsx"),r("index.html"),r("routes.tsx"),r("utils","index.ts")],esdoc:[".esdoc.json"],jest:["jest.config.mjs"],rtl:["jest.setup.ts"],storybook:[e(".storybook","main.ts"),e(".storybook","preview.ts")],lintStaged:[".lintstagedrc"]},f={redux:[r("reducers"),r("sagas"),r("selectors")],templated:[r("components"),r("pages"),r("types")]},k={esdoc:{"build:documentation":"esdoc","view:documentation":"opener ./docs/index.html"},jest:{test:"jest","view:coverage":"opener ./coverage/index.html"},storybook:{storybook:"storybook dev -p 6006","build:storybook":"storybook build"}};class b extends l{templateDirectory(){return"app"}initializing(){this.env.options.nodePackageManager="yarn",process.env.YARN_NPM_MINIMAL_AGE_GATE="0",this.queueTransformStream({},t(/\.(json|tsx?)$/,a(i(this.fileSystem.resolve(".prettierrc")))),t(/\.scss$/,o({configFile:this.fileSystem.resolve(".stylelintrc")})))}async prompting(){const[e,t]=await Promise.all([this.git.name(),this.git.email()]);this.answers=await this.prompt([{type:"input",name:"package.name",message:"Package name",default:this.appname.replace(/\s+/g,"-")},{type:"input",name:"package.version",message:"Package version",default:"0.1.0"},{type:"search",name:"package.license",message:"Package license",source:e=>{const t=new RegExp(`.*${e??""}.*`,"i");return n.filter(e=>t.test(e))}},{type:"input",name:"package.description",message:"Package description"},{type:"input",name:"author.name",message:"Author name",default:e},{type:"input",name:"author.email",message:"Author email address",default:t},{type:"select",name:"styleFramework",message:"What CSS framework would you like to use?",choices:m},{type:"select",name:"testFramework",message:"What testing framework would you like to use?",choices:g},{type:"confirm",name:"flags.addCnamePlugin",message:"Deploying to GitHub Pages with CNAME?",default:!1},{type:"input",name:"deploy.domain",message:"Hostname to use",when:e=>e?.flags?.addCnamePlugin},{type:"confirm",name:"flags.addLintStaged",message:"Force linting before commits?",default:!0},{type:"confirm",name:"flags.addFontAwesome",message:"Add Font Awesome?",default:!0},{type:"confirm",name:"flags.addRedux",message:"Add Redux?",default:!1},{type:"confirm",name:"flags.addStorybook",message:"Add Storybook?",default:!1},{type:"confirm",name:"flags.addEsDoc",message:"Add ESDoc?",default:!1}])}async writing(){const{flags:t,styleFramework:a,testFramework:i,package:{license:o},author:{name:n,email:l}}=this.answers;this.config.set("testFramework",i),this.config.set("flags.addRedux",t.addRedux),this.config.set("flags.addStorybook",t.addStorybook);let c="Place your license here.\n";if("SEE LICENSE IN LICENSE"!==o){this.log(`Downloading ${o} license from spdx/license-list-data...`);const e=await fetch(`https://raw.githubusercontent.com/spdx/license-list-data/master/text/${o}.txt`);if(200!==e.status)this.log(`License download failed with HTTP ${e.status} - ${e.statusText}`);else{c=(await e.text()).replace("<year>",s(new Date,"yyyy")).replace("<copyright holders>",`${n} <${l}>`)}}this.fileSystem.createFile("LICENSE",c),h.core.forEach(this.fileSystem.copy),h.templated.forEach(this.fileSystem.copyTemplateInPlace),f.templated.forEach(this.fileSystem.copyDirectory),this.fileSystem.copyTemplate("_package.json","package.json"),this.fileSystem.copyTemplate("_eslint.config.mjs","eslint.config.mjs"),this.fileSystem.copyTemplate("webpack.config.nts","webpack.config.ts"),"materialUi"!==this.answers.styleFramework&&this.fileSystem.copyTemplate(r("index.nscss"),r("index.scss")),this.fileSystem.copyTo("gitignore",".gitignore"),t.addRedux&&(f.redux.forEach(this.fileSystem.copyDirectory),i||this.fs.delete(this.destinationPath(r("selectors","application.test.ts")))),i&&(h[d.Jest].forEach(this.fileSystem.copyTemplateInPlace),this.fs.append(this.destinationPath(".gitignore"),"coverage/"),this.fs.extendJSON(this.destinationPath("package.json"),{scripts:{...k[d.Jest]}}),i===d.ReactTestingLibrary&&h[d.ReactTestingLibrary].forEach(this.fileSystem.copyTemplateInPlace)),t.addStorybook&&(h.storybook.forEach(this.fileSystem.copyTemplateInPlace),this.fileSystem.copyTemplate(e("_stories","SuspenseFallback.stories.tsx"),r("components","SuspenseFallback.stories.tsx")),this.fs.append(this.destinationPath(".gitignore"),"storybook-static/"),this.fs.extendJSON(this.destinationPath("package.json"),{scripts:{...k.storybook}})),t.addEsDoc&&(h.esdoc.forEach(this.fileSystem.copy),this.fs.append(this.destinationPath(".gitignore"),"docs/"),this.fs.extendJSON(this.destinationPath("package.json"),{scripts:{...k.esdoc}})),t.addLintStaged&&(h.lintStaged.forEach(this.fileSystem.copy),this.fileSystem.createFile(".husky/pre-commit","npx lint-staged\n"));const m=[...y.core],g=[...y.dev];a&&(m.push(...y[a]),u[a]&&g.push(...u[a])),i&&(g.push(...y[d.Jest]),i===d.ReactTestingLibrary&&g.push(...y[d.ReactTestingLibrary])),t.addLintStaged&&g.push(...y.lintStaged),t.addFontAwesome&&m.push(...y.fontAwesome),t.addRedux&&m.push(...y.redux),t.addRedux&&i&&g.push(...y.reduxJest),t.addStorybook&&g.push(...y.storybook),t.addEsDoc&&m.push(...y.esdoc),this.log(`Resolving ${m.length} dependencies and ${g.length} dev dependencies.`);const[b,w]=await Promise.all([this.addDependencies(m),this.addDevDependencies(g)]);this.packageJson.merge({dependencies:p(b),devDependencies:p(w)})}install(){this.spawnSync("yarn",["set","version","stable"],{stdio:"inherit"})}async end(){const{flags:e}=this.answers;this.spawnSync("git",["init"],{stdio:"inherit"}),e.addLintStaged&&this.spawnSync("npx",["husky"],{stdio:"inherit"})}}export{b as default};

package/generators/component/index.js

@@ -1 +1 @@
-import{src as t}from"../util/fs.js";import e from"../util/generator.js";import{TestFrameworks as s}from"../types/index.js";class o extends e{templateDirectory(){return"component"}#t(){return this.config.get("testFramework")}async prompting(){const t=this.#t();this.answers=await this.prompt([{type:"input",name:"component.name",message:"Component name"},{type:"confirm",name:"flags.addRedux",message:"Connect this component to the Redux store?",default:!1},{type:"confirm",name:"flags.addStorybook",message:"Add a Storybook story?",default:!1},{type:"confirm",name:"flags.addTest",message:"Add a test case?",default:!0,when:()=>t!==s.None}])}async writing(){const{flags:e,component:{name:o}}=this.answers,n=t("components",`${o}.tsx`),a=t("components",`${o}.test.tsx`);this.log(`Creating ${o} component`),this.fileSystem.copyTemplate("index.tsx",n),e.addTest&&this.fileSystem.copyTemplate(this.#t()===s.ReactTestingLibrary?"index.rtl.test.tsx":"index.jest.test.tsx",a),e.addStorybook&&this.fileSystem.copyTemplate("index.stories.tsx",t("components",`${o}.stories.tsx`))}}export{o as default};
+import{src as t}from"../util/fs.js";import e from"../util/generator.js";import{TestFrameworks as s}from"../types/index.js";class o extends e{templateDirectory(){return"component"}#t(){return this.config.get("testFramework")}#e(){return this.config.get("flags.addRedux")}#s(){return this.config.get("flags.addStorybook")}async prompting(){const t=this.#t(),e=this.#e(),o=this.#s(),n=await this.prompt([{type:"input",name:"component.name",message:"Component name"},{type:"confirm",name:"flags.addRedux",message:"Connect this component to the Redux store?",default:!0,when:()=>e},{type:"confirm",name:"flags.addStorybook",message:"Add a Storybook story?",default:!0,when:()=>o},{type:"confirm",name:"flags.addTest",message:"Add a test case?",default:!0,when:()=>t!==s.None}]);this.answers={...this.answers,...n}}async writing(){const{flags:e,component:{name:o}}=this.answers;if(!o)return void this.log("ERROR: No component name provided!");const n=t("components",`${o}.tsx`),a=t("components",`${o}.test.tsx`);this.log(`Creating ${o} component`),this.fileSystem.copyTemplate("index.tsx",n),e.addTest&&this.fileSystem.copyTemplate(this.#t()===s.ReactTestingLibrary?"index.rtl.test.tsx":"index.jest.test.tsx",a),e.addStorybook&&this.fileSystem.copyTemplate("index.stories.tsx",t("components",`${o}.stories.tsx`))}}export{o as default};

package/generators/page/index.js

@@ -0,0 +1 @@
+import{src as e}from"../util/fs.js";import t from"../util/generator.js";import{TestFrameworks as s}from"../types/index.js";class i extends t{templateDirectory(){return"page"}#e(){return this.config.get("testFramework")}#t(){return this.config.get("flags.addRedux")}#s(){return this.config.get("flags.addStorybook")}#i(t,s){const i=this.destinationPath(e("routes.tsx"));if(!this.fs.exists(i))return void this.log("WARNING: src/routes.tsx is missing, skipping route");const a=this.fs.read(i);if(a.includes(`./pages/${t}`))return;const o="export const routes: AppRoute[] = [";a.includes(o)?this.fs.write(i,a.replace(o,[o,"  {",`    path: '${s}',`,`    handle: { title: '${t}' },`,`    lazy: () => import(\`./pages/${t}\`)`,"  },"].join("\n"))):this.log("WARNING: could not find the route table, skipping route")}async prompting(){const e=this.#e(),t=this.#t(),i=this.#s(),a=await this.prompt([{type:"input",name:"page.name",message:"Page name"},{type:"input",name:"page.url",message:"Page URL"},{type:"confirm",name:"flags.addRedux",message:"Connect this page to the Redux store?",default:!0,when:()=>t},{type:"confirm",name:"flags.addStorybook",message:"Add a Storybook story?",default:!0,when:()=>i},{type:"confirm",name:"flags.addTest",message:"Add a test case?",default:!0,when:()=>e!==s.None}]);this.answers={...this.answers,...a}}async writing(){const{flags:t,page:{name:i,url:a}}=this.answers,o=(i??"").trim();if(!o)return void this.log("ERROR: No page name provided!");this.answers.page.name=o,this.log(`Creating ${o} page`),this.fileSystem.copyTemplate("index.tsx",e("pages",`${o}.tsx`)),t.addTest&&this.fileSystem.copyTemplate(this.#e()===s.ReactTestingLibrary?"index.rtl.test.tsx":"index.jest.test.tsx",e("pages",`${o}.test.tsx`)),t.addStorybook&&this.fileSystem.copyTemplate("index.stories.tsx",e("pages",`${o}.stories.tsx`));const r=(a??"").trim().replace(/^\/+|\/+$/g,"");r?this.#i(o,r):this.log("WARNING: No page URL provided, skipping route")}}export{i as default};

package/generators/types/index.js

@@ -1 +1 @@
-var t,a;!function(t){t.None="",t.Bootstrap="bootstrap",t.Bulma="bulma",t.Foundation="foundation",t.Materialize="materialize",t.UIKit="uikit",t.MaterialUI="materialUi"}(t||(t={})),function(t){t.None="",t.Jest="jest",t.ReactTestingLibrary="rtl"}(a||(a={}));export{t as StyleFrameworks,a as TestFrameworks};
+var t,a;!function(t){t.None="",t.Bootstrap="bootstrap",t.Bulma="bulma",t.Foundation="foundation",t.Materialize="materialize",t.UIkit="uikit",t.MaterialUI="materialUi"}(t||(t={})),function(t){t.None="",t.Jest="jest",t.ReactTestingLibrary="rtl"}(a||(a={}));export{t as StyleFrameworks,a as TestFrameworks};

package/generators/util/generator.js

@@ -1 +1 @@
-import e from"yeoman-generator";import s from"./fs.js";class t extends e{answers;fileSystem;constructor(e,t,o){super(e,t,o),this.answers={component:{},deploy:{},module:{},package:{},author:{},flags:{}},this.fileSystem=s(this),this.sourceRoot(this.fileSystem.resolve("templates",this.templateDirectory()))}}export{t as default};
+import e from"yeoman-generator";import s from"./fs.js";class t extends e{answers;fileSystem;constructor(e,t,o){super(e,t,o),this.answers={component:{},deploy:{},module:{},package:{},page:{},author:{},flags:{}},this.fileSystem=s(this),this.sourceRoot(this.fileSystem.resolve("templates",this.templateDirectory()))}}export{t as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generator-reackt",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Create an opinionated React-based web applcication",
   "type": "module",
   "files": [
@@ -25,7 +25,8 @@
     "version": "auto-changelog -l false -p --hide-credit && git add CHANGELOG.md",
     "prepare": "husky",
     "prepack": "rollup -c",
-    "build": "rollup -c"
+    "build": "rollup -c",
+    "test": "rollup -c && node --experimental-test-coverage --test \"test/**/*.test.ts\""
   },
   "engines": {
     "node": ">=22"
@@ -52,11 +53,11 @@
     "@rollup/plugin-terser": "^1.0.0",
     "@rollup/plugin-typescript": "^12.3.0",
     "@types/gulp-if": "^3.0.5",
-    "@types/jest": "^30.0.0",
-    "@types/jsonfile": "^6.1.4",
+    "@types/jsonfile": "^6",
     "@types/node": "24.13.3",
     "@types/rollup-plugin-auto-external": "^2",
     "@types/spdx-license-ids": "^3.0.0",
+    "@yeoman/adapter": "^5.0.0",
     "@yeoman/types": "^1.1.1",
     "auto-changelog": "^2.6.0",
     "eslint": "^9.39.5",
@@ -77,7 +78,9 @@
     "stylelint-config-recommended": "^18.0.0",
     "tslib": "^2.8.1",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.68.0"
+    "typescript-eslint": "^8.68.0",
+    "yeoman-environment": "^6.3.0",
+    "yeoman-test": "^11.7.0"
   },
   "packageManager": "yarn@4.18.0"
 }

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

@@ -3,6 +3,11 @@ import { Fragment } from 'react';
 import { Link, Outlet } from 'react-router-dom';
 import { Container, Nav, Navbar } from 'react-bootstrap';
 
+import { routes } from '../routes';
+
+// only titled routes get a nav entry - the index route is reachable via the brand
+const navRoutes = routes.filter((route) => route.path && route.handle?.title);
+
 export default function Layout() {
   return (
     <Fragment>
@@ -15,7 +20,13 @@ export default function Layout() {
           </Navbar.Brand>
           <Navbar.Toggle />
           <Navbar.Collapse>
-            <Nav></Nav>
+            <Nav>
+              {navRoutes.map((route) => (
+                <Nav.Link as={Link} key={route.path} to={`/${route.path}`}>
+                  {route.handle?.title}
+                </Nav.Link>
+              ))}
+            </Nav>
           </Navbar.Collapse>
         </Container>
       </Navbar>
@@ -28,6 +39,11 @@ export default function Layout() {
 <% } else if (styleFramework === 'bulma') { %>
 import { Link, Outlet } from 'react-router-dom';
 
+import { routes } from '../routes';
+
+// only titled routes get a nav entry - the index route is reachable via the brand
+const navRoutes = routes.filter((route) => route.path && route.handle?.title);
+
 export default function Layout() {
   return (
     <div className="container">
@@ -37,6 +53,15 @@ export default function Layout() {
             <%= package.name %>
           </Link>
         </div>
+        <div className="navbar-menu">
+          <div className="navbar-start">
+            {navRoutes.map((route) => (
+              <Link className="navbar-item" key={route.path} to={`/${route.path}`}>
+                {route.handle?.title}
+              </Link>
+            ))}
+          </div>
+        </div>
       </nav>
       <Outlet />
     </div>
@@ -52,6 +77,11 @@ import {
   TopBarLeft
 } from 'react-foundation';
 
+import { routes } from '../routes';
+
+// only titled routes get a nav entry - the index route is reachable via the brand
+const navRoutes = routes.filter((route) => route.path && route.handle?.title);
+
 export default function Layout() {
   return (
     <GridContainer>
@@ -61,6 +91,11 @@ export default function Layout() {
             <MenuItem>
               <Link to="/"><%= package.name %></Link>
             </MenuItem>
+            {navRoutes.map((route) => (
+              <MenuItem key={route.path}>
+                <Link to={`/${route.path}`}>{route.handle?.title}</Link>
+              </MenuItem>
+            ))}
           </Menu>
         </TopBarLeft>
       </TopBar>
@@ -70,7 +105,12 @@ export default function Layout() {
 }
 <% } else if (styleFramework === 'materialize') { %>
 import { Link, Outlet } from 'react-router-dom';
-import { Container, Icon, Navbar } from 'react-materialize';
+import { Container, Icon, Navbar, NavItem } from 'react-materialize';
+
+import { routes } from '../routes';
+
+// only titled routes get a nav entry - the index route is reachable via the brand
+const navRoutes = routes.filter((route) => route.path && route.handle?.title);
 
 export default function Layout() {
   return (
@@ -78,7 +118,13 @@ export default function Layout() {
       <Navbar
         brand={<Link to="/"><%= package.name %></Link>}
         menuIcon={<Icon>menu</Icon>}
-      />
+      >
+        {navRoutes.map((route) => (
+          <NavItem key={route.path}>
+            <Link to={`/${route.path}`}>{route.handle?.title}</Link>
+          </NavItem>
+        ))}
+      </Navbar>
       <Outlet />
     </Container>
   );
@@ -87,6 +133,11 @@ export default function Layout() {
 import { Link, Outlet } from 'react-router-dom';
 import { Container, ListItem, Navbar, NavbarContainer } from 'uikit-react';
 
+import { routes } from '../routes';
+
+// only titled routes get a nav entry - the index route is reachable via the brand
+const navRoutes = routes.filter((route) => route.path && route.handle?.title);
+
 export default function Layout() {
   return (
     <Container>
@@ -95,6 +146,11 @@ export default function Layout() {
           <ListItem>
             <Link to="/"><%= package.name %></Link>
           </ListItem>
+          {navRoutes.map((route) => (
+            <ListItem key={route.path}>
+              <Link to={`/${route.path}`}>{route.handle?.title}</Link>
+            </ListItem>
+          ))}
         </Navbar>
       </NavbarContainer>
       <Outlet />
@@ -112,6 +168,11 @@ import {
   Typography
 } from '@mui/material';
 
+import { routes } from '../routes';
+
+// only titled routes get a nav entry - the index route is reachable via the brand
+const navRoutes = routes.filter((route) => route.path && route.handle?.title);
+
 export default function Layout() {
   return (
     <Fragment>
@@ -121,6 +182,16 @@ export default function Layout() {
           <Typography component={Link} to="/" variant="h6">
             <%= package.name %>
           </Typography>
+          {navRoutes.map((route) => (
+            <Typography
+              component={Link}
+              key={route.path}
+              to={`/${route.path}`}
+              variant="body1"
+            >
+              {route.handle?.title}
+            </Typography>
+          ))}
         </Toolbar>
       </AppBar>
       <Container>
@@ -139,4 +210,4 @@ export default function Layout() {
     </div>
   );
 }
-<% } %>
+<% } %>

package/templates/app/src/index.tsx

@@ -15,6 +15,7 @@ import 'materialize-css';
 import Layout from './components/Layout';
 import SuspenseFallback from './components/SuspenseFallback';
 import ErrorBoundary from './components/ErrorBoundary';
+import { routes } from './routes';
 <% if (flags.addRedux) { %>
 import rootSaga from './sagas';
 import rootReducer from './reducers';
@@ -37,12 +38,7 @@ if (rootElem) {
       path: '/',
       element: <Layout />,
       errorElement: <ErrorBoundary />,
-      children: [
-        {
-          index: true,
-          lazy: () => import(`./pages/index`)
-        }
-      ]
+      children: routes
     }
   ]);
 
@@ -57,4 +53,4 @@ if (rootElem) {
       </Provider>
 <% } %>
   )
-}
+}

package/templates/app/src/routes.tsx

@@ -0,0 +1,14 @@
+import type { RouteObject } from 'react-router-dom';
+
+// handle.title is what Layout renders in the nav - routes without one
+// (the index route) are reachable but not linked
+export type AppRoute = RouteObject & {
+  handle?: { title: string };
+};
+
+export const routes: AppRoute[] = [
+  {
+    index: true,
+    lazy: () => import(`./pages/index`)
+  }
+];

package/templates/page/index.jest.test.tsx

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

package/templates/page/index.rtl.test.tsx

@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+
+import <%= page.name %> from './<%= page.name %>';
+
+describe('<<%= page.name %> />', () => {
+  it('renders correctly', () => {
+    render(
+      <MemoryRouter>
+        <<%= page.name %> />
+      </MemoryRouter>
+    );
+
+    expect(screen.getByRole('heading')).toBeInTheDocument();
+  });
+});

package/templates/page/index.stories.tsx

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

package/templates/page/index.tsx

@@ -0,0 +1,17 @@
+<% if (flags.addRedux) { %>
+import { connect } from 'react-redux';
+<% } %>
+
+function <%= page.name %>() {
+  return <h1><%= page.name %></h1>;
+}
+
+<% if (flags.addRedux) { %>
+// react-router lazy() route modules load the named Component export
+export const Component = connect(null, null)(<%= page.name %>);
+<% } else { %>
+// react-router lazy() route modules load the named Component export
+export const Component = <%= page.name %>;
+<% } %>
+
+export default Component;