@react-foundry/app-plop-pack 0.1.0

package/LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (C) 2019-2025 Crown Copyright
+Copyright (C) 2019-2026 Daniel A.C. Martin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,53 @@
+React Foundry - Application plop-pack
+=====================================
+
+Generators for use within applications and prototypes.
+
+
+Using this package
+------------------
+
+First install the package into your project:
+
+```shell
+npm install -D @react-foundry/app-plop-pack
+```
+
+Then use it in your `plopfile.js` as follows:
+
+```js
+module.exports = plop => {
+  plop.load('@react-foundry/app-plop-pack');
+
+  // ...
+}
+```
+
+
+Working on this package
+-----------------------
+
+Before working on this package you must install its dependencies using
+the following command:
+
+```shell
+pnpm install
+```
+
+
+### Building
+
+Build the package by compiling the source code.
+
+```shell
+npm run build
+```
+
+
+### Clean-up
+
+Remove any previously built files.
+
+```shell
+npm run clean
+```

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@react-foundry/app-plop-pack",
+  "version": "0.1.0",
+  "description": "Generators for use within applications and prototypes.",
+  "type": "module",
+  "main": "src/index.js",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "files": [
+    "/src",
+    "/skel"
+  ],
+  "author": "Daniel A.C. Martin <npm@daniel-martin.co.uk> (http://daniel-martin.co.uk/)",
+  "license": "MIT",
+  "engines": {
+    "node": ">=12.0.0"
+  },
+  "devDependencies": {
+    "plop": "4.0.5"
+  },
+  "dependencies": {
+    "@react-foundry/plop-pack": "^0.1.0"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "true",
+    "clean": "true"
+  }
+}

package/skel/.github/workflows/deploy.deploy.yml.hbs

@@ -0,0 +1,32 @@
+{{#if standalone}}
+  deploy-to-{{{ target }}}:
+    name: Deploy to {{{ titleCase target }}}
+{{else}}
+  deploy-{{{ appName }}}-to-{{{ target }}}:
+    name: Deploy {{{ appName }}} to {{{ titleCase target }}}
+{{/if}}
+{{#if (eq target 'netlify')}}
+    if: github.event_name == 'push'
+{{else}}
+    if: github.event_name == 'push' && github.ref == 'refs/heads/{{{ branch }}}'
+{{/if}}
+    uses: './.github/workflows/deploy-to-{{{ target }}}.yml'
+    with:
+{{#unless standalone}}
+      app: {{{ appName }}}
+{{/unless}}
+      node: 12
+{{#if (eq target 'netlify')}}
+      production-branch: {{{ branch }}}
+{{/if}}
+    secrets:
+      CYPRESS_PROJECT_ID: $\{{ secrets.CYPRESS_PROJECT_ID }}
+      CYPRESS_RECORD_KEY: $\{{ secrets.CYPRESS_RECORD_KEY }}
+{{#if (eq target 'netlify')}}
+      NETLIFY_AUTH_TOKEN: $\{{ secrets.{{{ authSecret }}} }}
+      NETLIFY_SITE_ID: $\{{ secrets.{{{ siteSecret }}} }}
+{{else if (eq target 'heroku')}}
+      HEROKU_API_KEY: $\{{ secrets.{{{ authSecret }}} }}
+      HEROKU_APP_NAME: $\{{ secrets.{{{ siteSecret }}} }}
+      HEROKU_EMAIL: $\{{ secrets.{{{ usernameSecret }}} }}
+{{/if}}

package/skel/src/app/routes/page.htm.hbs

@@ -0,0 +1,20 @@
+<h1>{{ title }}</h1>
+{{#if description}}
+<p>{{ description }}</p>
+{{/if}}
+{{#if userinfo}}
+<h1>Accessing userinfo</h1>
+<p>Sorry, there is no way to access user info from an HTML page. You will need to use React for that.</p>
+{{/if}}
+{{#if query}}
+<h1>Accessing query parameters</h1>
+<p>Sorry, there is no way to access query parameters from an HTML page. You will need to use React for that.</p>
+{{/if}}
+{{#if data}}
+<h1>Loading data form the server</h1>
+<p>Sorry, there is no way to load data into HTML page. You will need to use React for that.</p>
+{{/if}}
+{{#if action}}
+<h1>Writing data to the server</h1>
+<p>Sorry, there is no way to write data with an HTML page. You will need to use React for that.</p>
+{{/if}}

package/skel/src/app/routes/page.md.hbs

@@ -0,0 +1,31 @@
+{{ title }}
+===========
+
+{{#if description}}
+{{ description }}
+{{/if}}
+
+{{#if userinfo}}
+## Accessing userinfo
+
+Sorry, there is no way to access user info from an HTML page. You will need to use React for that.
+
+{{/if}}
+{{#if query}}
+## Accessing query parameters
+
+Sorry, there is no way to access query parameters from an HTML page. You will need to use React for that.
+
+{{/if}}
+{{#if data}}
+## Loading data form the server
+
+Sorry, there is no way to load data into HTML page. You will need to use React for that.
+
+{{/if}}
+{{#if action}}
+## Writing data to the server
+
+Sorry, there is no way to write data with an HTML page. You will need to use React for that.
+
+{{/if}}

package/skel/src/app/routes/page.mdx.hbs

@@ -0,0 +1,42 @@
+import { siteTitle } from '../config';
+
+export const title = '{{{title}}}';
+export const description = '{{{description}}}';
+
+export function meta({}) {
+  return [
+    { title: `${title} - ${siteTitle}` },
+    { name: 'description', content: description },
+    { name: 'og:title', content: title },
+    { name: 'og:description', content: description },
+  ];
+}
+
+# {title}
+
+{description}
+
+{{#if userinfo}}
+## Accessing userinfo
+
+Sorry, there is no way to access user info from an HTML page. You will need to use React for that.
+
+{{/if}}
+{{#if query}}
+## Accessing query parameters
+
+Sorry, there is no way to access query parameters from an HTML page. You will need to use React for that.
+
+{{/if}}
+{{#if data}}
+## Loading data form the server
+
+Sorry, there is no way to load data into HTML page. You will need to use React for that.
+
+{{/if}}
+{{#if action}}
+## Writing data to the server
+
+Sorry, there is no way to write data with an HTML page. You will need to use React for that.
+
+{{/if}}

package/skel/src/app/routes/page.tsx.hbs

@@ -0,0 +1,136 @@
+{{#if param}}
+import type { Route } from "./+types/{{{name}}}.${{{param}}}";
+{{else}}
+import type { Route } from "./+types/{{{name}}}";
+{{/if}}
+{{#if data}}
+import { data } from 'react-router';
+{{/if}}
+{{#if query}}
+import { useLocation } from '@react-foundry/router';
+{{/if}}
+{{#if userinfo}}
+{{#if data}}
+import { userInfoContext } from '@react-foundry/react-router-context';
+{{/if}}
+import { useUserInfo } from '@react-foundry/user-info';
+{{/if}}
+import { siteTitle } from '../config';
+
+export const title = '{{{title}}}';
+const description = '{{{description}}}';
+
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: `${title} - ${siteTitle}` },
+    { name: 'description', content: description },
+    { name: 'og:title', content: title },
+    { name: 'og:description', content: description },
+  ];
+}
+
+{{#if data}}
+export async function loader({
+{{#if userinfo}}
+  context,
+{{/if}}
+{{#if param}}
+  params,
+{{/if}}
+}: Route.LoaderArgs) {
+  let error: string = '';
+
+  const Redact = <T = unknown>(roles: string[]) => (obj: Record<string, T>) => (key: string, role: string) => {
+    if (!roles.includes(role)) {
+      error = `You do not have permission to access the property '${key}' on this object.`
+    }
+
+    return obj[key];
+  };
+  const user = context.get(userInfoContext);
+  const redactor = Redact<string>(user?.roles || []);
+
+  // Some fake data
+  const bookData: Book[] = [
+    {
+      title: "Harry Potter and the Sorcerer's stone",
+      author: 'J.K. Rowling',
+    },
+    {
+      title: 'Jurassic Park',
+      author: 'Michael Crichton',
+    },
+  ];
+  const books: Book[] = bookData.map(e => {
+    const redact = redactor(e);
+
+    return {
+      title: redact('title', 'books.title'),
+      author: redact('author', 'books.author')
+    }
+  });
+
+  return (
+    error
+    ? data({ error }, 403)
+    : data({ books })
+  );
+}
+
+{{/if}}
+{{#if action}}
+export async function action({
+{{#if userinfo}}
+  context,
+{{/if}}
+{{#if param}}
+  params,
+{{/if}}
+  request,
+}: Route.ActionArgs) {
+{{#if userinfo}}
+  const user = context.get(userInfoContext);
+{{/if}}
+  const formData = await request.formData();
+
+  return {
+    result: !!(formData.get('feedback')),
+    formData: Object.fromEntries(formData)
+  };
+}
+
+{{/if}}
+export default function {{{properCase title}}}({
+{{#if action}}
+  actionData,
+{{/if}}
+{{#if data}}
+  loaderData,
+{{/if}}
+}: Route.ComponentProps) {
+{{#if userinfo}}
+  const { displayName, name } = useUserInfo() || {};
+  const { givenName } = name || {};
+  const user = displayName || givenName || 'Guest';
+{{/if}}
+{{#if query}}
+  const location = useLocation();
+  const n = Number(location.query['n']) || 0;
+{{/if}}
+
+  return (
+    <>
+      <h1>{title}</h1>
+      <p>{description}</p>
+{{#if userinfo}}
+      <h2>Accessing user info</h2>
+      <p>Hello {user}!</p>
+{{/if}}
+{{#if query}}
+      <h2>Accessing query parameters</h2>
+      <p>n = {n}</p>
+      <p><a href={`/{{{ name }}}?n=${n + 1}`}>Next</a></p>
+{{/if}}
+    </>
+  );
+}

package/src/index.js

@@ -0,0 +1,159 @@
+import { createRequire } from 'node:module';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const require = createRequire(import.meta.url);
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const plopPackInternal = require.resolve('@react-foundry/plop-pack');
+
+const id = v => v;
+
+const longToShort = (name) => (
+  name
+    .toLowerCase()
+    .replace(/\s/g, '-')
+);
+
+const constantCase = (str) => (
+  str
+    .toUpperCase()
+    .replace(/[-\s]/g, '_')
+);
+
+const plopFunction = async (plop) => {
+  await plop.load(plopPackInternal, undefined, { actionTypes: true, generators: false, helpers: true, partials: false });
+
+  const notHtml = answers => answers.ext !== 'html';
+
+  plop.setGenerator('page', {
+    description: 'A new page on the website',
+    prompts: [
+      {
+        type: 'list',
+        name: 'ext',
+        message: 'Type of page:',
+        choices: [
+          { value: 'htm', name: 'HTML (simple)' },
+          { value: 'md', name: 'Markdown (simple)' },
+          { value: 'mdx', name: 'MDX: Markdown with JSX (intermediate)' },
+          //{ value: 'rt', name: 'React template (experimental)' },
+          { value: 'tsx', name: 'TSX (advanced)' }
+        ],
+        default: 3
+      },
+      {
+        type: 'input',
+        name: 'title',
+        message: 'Title (e.g. "My page"):'
+      },
+      {
+        type: 'input',
+        name: 'name',
+        message: 'Short name (e.g. "my-page"):',
+        default: answers => longToShort(answers.title)
+      },
+      {
+        type: 'input',
+        name: 'description',
+        message: 'Description:',
+        when: notHtml
+      },
+      {
+        type: 'confirm',
+        name: 'query',
+        message: 'Include example of accessing query parameters?:',
+        default: false,
+        when: notHtml
+      }
+    ],
+    actions: [
+      {
+        type: 'add',
+        path: 'src/app/routes/{{{name}}}.{{{ext}}}',
+        templateFile: '../skel/src/app/routes/page.{{{ext}}}.hbs'
+      },
+      {
+        type: 'message',
+        content: '\n\nPage created at: /{{{ name }}}\nTo modify, edit: ./src/common/pages/{{{ name }}}.{{{ ext }}}\n(You may need to refresh your browser of even restart the application in order to see it.)'
+      }
+    ]
+  });
+
+  const pkg = require(resolve(process.cwd(), './package.json'));
+  const nameArray = pkg.name.split('/');
+  const standalone = nameArray.length === 1;
+  const appName = nameArray.pop();
+  const [ to, gitRoot, appDir, secretSuffix ] = (
+    standalone
+      ? [ 'to', './', './', '' ]
+      : [`${appName}-to`, '../../', `./apps/${appName}/`, `_${constantCase(appName)}` ]
+  );
+
+  plop.setGenerator('deployment', {
+    description: 'A new deployment pipeline',
+    prompts: [
+      {
+        type: 'list',
+        name: 'target',
+        message: 'Where do you want to deploy?:',
+        choices: [
+          { value: 'heroku', name: 'Heroku' },
+          { value: 'netlify', name: 'Netlify' }
+        ]
+      },
+      {
+        type: 'input',
+        name: 'branch',
+        message: 'Which branch would you like to deploy?:',
+        default: 'master'
+      },
+      {
+        type: 'input',
+        name: 'usernameSecret',
+        message: 'Which secret will contain your e-mail address as registered with Heroku?:',
+        default: 'HEROKU_EMAIL',
+        when: answers => answers.target === 'heroku'
+      },
+      {
+        type: 'input',
+        name: 'authSecret',
+        message: 'Which secret will contain your auth token / API key?:',
+        default: answers => (
+          answers.target === 'heroku'
+            ? 'HEROKU_API_KEY'
+            : 'NETLIFY_AUTH_TOKEN'
+        )
+      },
+      {
+        type: 'input',
+        name: 'siteSecret',
+        message: 'Which secret will contain the site identifier?:',
+        default: answers => (
+          answers.target === 'heroku'
+            ? `HEROKU_APP_NAME${secretSuffix}`
+            : `NETLIFY_SITE_ID${secretSuffix}`
+        )
+      }
+    ],
+    actions: answers => {
+      answers.appDir = appDir;
+      answers.appName = appName;
+      answers.standalone = standalone;
+      const secrets = [answers.usernameSecret, answers.authSecret, answers.siteSecret].filter(id).join(', ');
+
+      return [
+        {
+          type: 'append',
+          path: `${gitRoot}.github/workflows/deploy.yml`,
+          templateFile: '../skel/.github/workflows/deploy.deploy.yml.hbs'
+        },
+        `Pipeline created; once you have set-up your secrets (${secrets}) in GitHub, your changes will be automatically deployed to ${answers.target} whenever to push to the ${answers.branch}.`
+      ];
+    }
+  });
+
+  plop.setDefaultInclude({ actionTypes: true, generators: true, helpers: true });
+};
+
+export default plopFunction;