create-application-template 0.3.0

package/.babelrc

@@ -0,0 +1,21 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ],
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "regenerator": true
+      },
+      "react-refresh/babel"
+    ]
+  ]
+}

package/.eslintrc.js

@@ -0,0 +1,304 @@
+const restrictedGlobals = require('confusing-browser-globals')
+
+// NOTE use following to address: 'Parsing error: __classPrivateFieldGet(...).at is not a function error'
+// '@typescript-eslint/eslint-plugin': '6.5.0',
+// '@typescript-eslint/parser': '6.5.0',
+
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  extends: [
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/errors',
+    'plugin:import/warnings',
+    'plugin:import/typescript',
+    'plugin:jsx-a11y/recommended',
+    'plugin:eslint-comments/recommended',
+  ],
+  rules: {
+    // 📜 @typescript-eslint
+    'quotes': 'off',
+    '@typescript-eslint/quotes': ['error', 'single'],
+    'no-dupe-class-members': 'off',  // handled by .ts
+    'no-undef': 'off',  // handled by .ts
+    '@typescript-eslint/consistent-type-assertions': 'error',
+    'no-array-constructor': 'off',
+    '@typescript-eslint/no-array-constructor': 'error',
+    'no-var': 'error',  // makes 'no-redeclare' irrelevant
+    // 'no-redeclare': 'off',  // see above
+    // '@typescript-eslint/no-redeclare': 'error',  // see above
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': [
+      'error',
+      {
+        'functions': true,
+        'classes': true,
+        'variables': true,
+        'allowNamedExports': true,
+        'enums': true,
+        'typedefs': true,
+        'ignoreTypeReferences': true,
+      },
+    ],
+    'no-unused-expressions': 'off',
+    '@typescript-eslint/no-unused-expressions': [
+      'error',
+      {
+        'allowShortCircuit': true,
+        'allowTernary': true,
+        'allowTaggedTemplates': true,
+      },
+    ],
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        'ignoreRestSiblings': true,
+      },
+    ],
+    'no-useless-constructor': 'off',
+    '@typescript-eslint/no-useless-constructor': 'error',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+
+    // 📜 eslint
+    'array-callback-return': 'error',
+    'default-case': 'error',
+    'dot-location': ['error', 'property'],
+    'eqeqeq': ['error', 'always'],
+    'new-parens': 'error',
+    'no-caller': 'error',
+    'no-cond-assign': ['error', 'except-parens'],
+    'no-const-assign': 'error',
+    'no-control-regex': 'error',
+    'no-delete-var': 'error',
+    'no-dupe-args': 'error',
+    'no-dupe-keys': 'error',
+    'no-duplicate-case': 'error',
+    'no-empty-character-class': 'error',
+    'no-empty-pattern': 'error',
+    'no-eval': 'error',
+    'no-ex-assign': 'error',
+    'no-extend-native': 'error',
+    'no-extra-bind': 'error',
+    'no-extra-label': 'error',
+    'no-fallthrough': 'error',
+    'no-func-assign': 'error',
+    'no-implied-eval': 'error',
+    'no-invalid-regexp': 'error',
+    'no-iterator': 'error',
+    'no-label-var': 'error',
+    'no-labels': [
+      'error',
+      {
+        'allowLoop': true,
+        'allowSwitch': false,
+      },
+    ],
+    'no-lone-blocks': 'error',
+    'no-loop-func': 'error',
+    'no-mixed-operators': [
+      'error',
+      {
+        'groups': [
+          ['&', '|', '^', '~', '<<', '>>', '>>>'],
+          ['==', '!=', '===', '!==', '>', '>=', '<', '<='],
+          ['&&', '||'],
+          ['in', 'instanceof'],
+        ],
+        'allowSamePrecedence': false,
+      },
+    ],
+    'no-multi-str': 'error',
+    'no-native-reassign': 'error',
+    'no-negated-in-lhs': 'error',
+    'no-new-func': 'error',
+    'no-new-object': 'error',
+    'no-new-symbol': 'error',
+    'no-new-wrappers': 'error',
+    'no-obj-calls': 'error',
+    'no-octal': 'error',
+    'no-octal-escape': 'error',
+    'no-redeclare': 'error',
+    'no-regex-spaces': 'error',
+    'no-restricted-syntax': ['error', 'WithStatement'],
+    'no-script-url': 'error',
+    'no-self-assign': 'error',
+    'no-self-compare': 'error',
+    'no-sequences': 'error',
+    'no-shadow-restricted-names': 'error',
+    'no-sparse-arrays': 'error',
+    'no-template-curly-in-string': 'error',
+    'no-this-before-super': 'error',
+    'no-throw-literal': 'error',
+    'no-restricted-globals': ['error'].concat(restrictedGlobals),
+    'no-unreachable': 'error',
+    'no-unused-labels': 'error',
+    'no-useless-computed-key': 'error',
+    'no-useless-concat': 'error',
+    'no-useless-escape': 'error',
+    'no-useless-rename': [
+      'error',
+      {
+        'ignoreDestructuring': false,
+        'ignoreImport': false,
+        'ignoreExport': false,
+      },
+    ],
+    'no-with': 'error',
+    'no-whitespace-before-property': 'error',
+    'react-hooks/exhaustive-deps': 'error',
+    'require-yield': 'error',
+    'rest-spread-spacing': ['error', 'never'],
+    'strict': ['error', 'never'],
+    'unicode-bom': ['error', 'never'],
+    'use-isnan': 'error',
+    'valid-typeof': 'error',
+    'no-restricted-properties': [
+      'error',
+      {
+        'object': 'require',
+        'property': 'ensure',
+        'message': 'use import() instead',
+      },
+      {
+        'object': 'System',
+        'property': 'import',
+        'message': 'use import() instead',
+      },
+    ],
+    'getter-return': 'error',
+
+    // 📜 eslint, some additional styles
+    'array-element-newline': ['error', 'consistent'],
+    'comma-dangle': ['error', {
+      'arrays': 'always-multiline',
+      'objects': 'always-multiline',
+      'imports': 'always-multiline',
+      'exports': 'always-multiline',
+      // 'functions': 'never'
+    }],
+    'semi': ['error', 'never'],
+    'curly': ['error', 'multi-line'],
+    'indent': [
+      'error',
+      2,
+      {
+        'SwitchCase': 1,
+      },
+    ],
+    'arrow-spacing': ['error'],
+    'object-curly-spacing': ['error', 'always'],
+    'array-bracket-spacing': ['error', 'never'],
+    'no-irregular-whitespace': ['error'],
+    'eol-last': ['error', 'always'],
+    'no-trailing-spaces': [
+      'error',
+      {
+        'skipBlankLines': false,
+        'ignoreComments': true,
+      },
+    ],
+    'jsx-quotes': ['error', 'prefer-single'],
+
+    // 📜 import
+    'import/first': 'error',
+    'import/no-amd': 'error',
+    'import/no-anonymous-default-export': 'error',
+    'import/no-webpack-loader-syntax': 'error',
+
+    // 📜 react
+    'react/prop-types': 'off',
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'react/forbid-foreign-prop-types': [
+      'error',
+      {
+        'allowInPropTypes': true,
+      },
+    ],
+    'react/jsx-no-comment-textnodes': 'error',
+    'react/jsx-no-duplicate-props': 'error',
+    'react/jsx-no-target-blank': 'error',
+    'react/jsx-no-undef': 'error',
+    'react/jsx-pascal-case': [
+      'error',
+      {
+        'allowAllCaps': true,
+        'ignore': [],
+      },
+    ],
+    'react/no-danger-with-children': 'error',
+    // Disabled because of undesirable warnings
+    // 'react/no-deprecated': 'error',
+    'react/no-direct-mutation-state': 'error',
+    'react/no-is-mounted': 'error',
+    'react/no-typos': 'error',
+    'react/require-render-return': 'error',
+    'react/style-prop-object': 'error',
+
+    // 📜 react, some additional styles
+    'react/jsx-child-element-spacing': 'error',
+    'react/jsx-closing-bracket-location': 'error',
+    'react/jsx-closing-tag-location': 'error',
+    'react/jsx-curly-newline': [
+      'error',
+      {
+        'multiline': 'consistent',
+        'singleline': 'consistent',
+      },
+    ],
+    'react/jsx-equals-spacing': ['error', 'never'],
+    'react/jsx-indent': ['error', 2],
+    'react/jsx-indent-props': ['error', 2],
+    'react/jsx-props-no-multi-spaces': 'error',
+
+    // 📜 jsx-a11y
+    'jsx-a11y/click-events-have-key-events': 'off',  // could cause accidental clicks
+    'jsx-a11y/alt-text': 'error',
+    'jsx-a11y/anchor-has-content': 'error',
+    'jsx-a11y/anchor-is-valid': [
+      'error',
+      {
+        'aspects': ['noHref', 'invalidHref'],
+      },
+    ],
+    'jsx-a11y/aria-activedescendant-has-tabindex': 'error',
+    'jsx-a11y/aria-props': 'error',
+    'jsx-a11y/aria-proptypes': 'error',
+    'jsx-a11y/aria-role': [
+      'error',
+      {
+        'ignoreNonDOM': true,
+      },
+    ],
+    'jsx-a11y/aria-unsupported-elements': 'error',
+    'jsx-a11y/heading-has-content': 'error',
+    'jsx-a11y/iframe-has-title': 'error',
+    'jsx-a11y/img-redundant-alt': 'error',
+    'jsx-a11y/no-access-key': 'error',
+    'jsx-a11y/no-distracting-elements': 'error',
+    'jsx-a11y/no-redundant-roles': 'error',
+    'jsx-a11y/role-has-required-aria-props': 'error',
+    'jsx-a11y/role-supports-aria-props': 'error',
+    'jsx-a11y/scope': 'error',
+
+    // 📜 react-hooks
+    'react-hooks/rules-of-hooks': 'error',
+
+    // 'flowtype/define-flow-type': 'error',
+    // 'flowtype/require-valid-file-annotation': 'error',
+    // 'flowtype/use-flow-type': 'error',
+  },
+}

package/.husky/pre-commit

@@ -0,0 +1,3 @@
+npm run lint:fix
+npm run stylelint:fix
+npm run test

package/.stylelintrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  extends: [
+    'stylelint-config-standard',
+    'stylelint-config-recess-order',
+  ],
+  ignoreFiles: [],
+  rules: {
+    'selector-class-pattern': null,
+    'keyframes-name-pattern': null,
+    'comment-empty-line-before': 'never',
+    'declaration-empty-line-before': 'never',
+  },
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 daveKontro
+
+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,88 @@
+<img src='./src/assets/cat.svg' style='height: 300px; display: block; margin-left: auto; margin-right: auto;'>
+
+# Create Application Template
+Create Application Template aims to provide a configured application template for you to build upon.  
+
+All configuration is fully visable and under your control to augment as you see fit.  
+
+The template is a typescript enabled React application with a test suite and code linting.  
+
+## installation
+first install globally  
+```
+npm install -g create-application-template
+```
+
+then create your project  
+```
+npx create-application-template --name={my-project}
+```
+
+## usage
+webpack is used for code bundling and the development server  
+
+run development server and test suite  
+```
+npm run dev
+```
+
+build static bundle  
+```
+npm run build
+```
+
+## tsconfig
+focused on type checking; using babel for transpiling  
+
+## pre-commit
+scripts in `.husky/pre-commit` are run to check commits  
+
+add or remove scripts as you see fit  
+
+## test suite
+to create a test follow this file naming format: `*.{spec,test}.{ts,tsx}`  
+
+run the test suite stand alone like so  
+```
+npm run test
+```
+
+## code linting
+linting rules are in `.eslintrc.js`, install the ESLint pluggin if using vscode  
+```
+npm run lint
+```
+
+css linting rules are in `.stylelintrc.js`, install the Stylelint pluggin if using vscode  
+```
+npm run stylelint
+```
+
+## environmental settings
+access environmental variables in code like so  
+```
+console.log(process.env.PORT)
+```
+
+### `NODE_ENV` settings
+set to `production` for build  
+
+set to `develop` for dev server  
+
+### `.env` variables
+add new environmental variables via the `.env` file in project  
+
+the following variables exist in the current configuration and can be altered  
+
+#### develop (dev server)
+```
+# optional
+PORT={port number}
+INLINE_SIZE_LIMIT={default is 10000}
+```
+
+#### production (build)
+```
+# optional
+INLINE_SIZE_LIMIT={default is 10000}
+```

package/bin/create-application-template.js

@@ -0,0 +1,75 @@
+#! /usr/bin/env node
+const { writeFile } = require('fs/promises')
+const { execSync } = require('child_process')
+const yargs = require('yargs/yargs')
+const { hideBin } = require('yargs/helpers')
+const packageJson = require('../package.json')
+
+const run = async () => {
+  const repo = 'https://github.com/daveKontro/create-application-template/tarball/main'
+
+  const execCommand = (command) => {
+    try {
+      execSync(command, { stdio: 'inherit' })
+    } catch (error) {
+      console.error(`${command} failed`, error)
+      process.exit(1)
+    }
+
+    return true
+  }
+
+  // consume arguments
+  const argv = yargs(hideBin(process.argv)).argv
+
+  if (!argv.name) {
+    console.error('WARNING add a project name like so: npx create-application-template --name={my-project}')
+    process.exit(1)
+  } else {
+    console.info('')
+    console.info(`Your project name is: ${argv.name}`)
+    console.info('')
+  }
+
+  const projectPaths = {
+    root: `./${argv.name}`,
+    get env() { return `${this.root}/.env` },
+    get packageJson() { return `${this.root}/package.json` },
+  }
+
+  // create project
+  execCommand(`curl -L ${repo} | tar zx --one-top-level=${argv.name} --strip-components 1`)
+
+  // groom project
+  if (packageJson.hasOwnProperty('name')) packageJson.name = argv.name
+  if (packageJson.hasOwnProperty('version')) packageJson.version = '1.0.0'
+  if (packageJson.hasOwnProperty('description')) packageJson.description = ''
+  if (packageJson.hasOwnProperty('author')) packageJson.author = ''
+  if (packageJson.hasOwnProperty('bin')) delete packageJson.bin
+  if (packageJson.hasOwnProperty('repository')) delete packageJson.repository
+  if (packageJson.dependencies.hasOwnProperty('yargs')) delete packageJson.dependencies.yargs
+
+  execCommand(`rm ${projectPaths.packageJson}`)
+
+  try {
+    await writeFile(projectPaths.packageJson, JSON.stringify(packageJson, null, 2), {
+      encoding: 'utf8',
+    })
+  } catch (error) {
+    console.error('package.json creation failed', error)
+    process.exit(1)
+  }
+
+  execCommand(`touch ${projectPaths.env}`)
+
+  // install project dependencies
+  execCommand(`npm --prefix ${projectPaths.root} install`)
+
+  // finish up
+  console.info('')
+  console.info('Thanks for using Create Application Template!')
+
+  process.exit(0)
+}
+
+run()

package/jest/cssTransform.js

@@ -0,0 +1,13 @@
+// turning style imports into empty objects
+// https://jestjs.io/docs/code-transformation
+
+module.exports = {
+  process() {
+    return {
+      code: 'module.exports = {}',
+    }
+  },
+  getCacheKey() {
+    return 'cssTransform'
+  },
+}

package/jest/setup.js

@@ -0,0 +1,5 @@
+// make a browser-like environment
+
+if (typeof window !== 'undefined') {
+  require('whatwg-fetch')  // fetch() polyfill
+}

package/jest/setupTests.js

@@ -0,0 +1,15 @@
+require('dotenv-flow').config()
+
+// additional jest matchers
+// https://jest-extended.jestcommunity.dev/docs/matchers
+const matchers = require('jest-extended')
+expect.extend(matchers)
+
+// custom jest matchers for asserting on DOM nodes
+// https://www.npmjs.com/package/@testing-library/jest-dom
+require('@testing-library/jest-dom')
+// require('@testing-library/jest-dom/jest-globals')
+
+afterEach(() => {
+  jest.useRealTimers()
+})

package/jest/svgTransform.js

@@ -0,0 +1,12 @@
+// turning svg imports into empty objects
+
+module.exports = {
+  process() {
+    return {
+      code: 'module.exports = {}',
+    }
+  },
+  getCacheKey() {
+    return 'svgTransform'
+  },
+}

package/jest.config.js

@@ -0,0 +1,50 @@
+/** @returns {Promise<import('jest').Config>} */
+module.exports = async () => {
+  return {
+    rootDir: __dirname,
+    roots: [
+      '<rootDir>/src',
+    ],
+    automock: false,
+    collectCoverage: true,
+    collectCoverageFrom: [
+      'src/**/*.{js,jsx,ts,tsx}',
+      '!**/node_modules/**',
+      'src/**/*.d.ts',
+    ],
+    coverageDirectory: '<rootDir>/jest/coverage',
+    coverageThreshold: undefined,
+    displayName: 'UI',
+    globals: {},
+    maxConcurrency: 5, // 5 is default (see test.concurrent)
+    moduleNameMapper: {
+      '^.+\\.module\\.(css)$': 'identity-obj-proxy',
+    },
+    resetMocks: true,
+    setupFiles: [
+      '<rootDir>/jest/setup.js',
+    ],
+    setupFilesAfterEnv: [
+      '<rootDir>/jest/setupTests.js',
+    ],
+    testMatch: [
+      '<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}',
+    ],
+    testEnvironment: 'jsdom',
+    transform: {
+      // https://babeljs.io/docs/config-files#jest
+      '^.+\\.(js|jsx|mjs|cjs|ts|tsx)$': 'babel-jest',
+      '^.+\\.css$': '<rootDir>/jest/cssTransform.js',
+      '^.+\\.svg$': '<rootDir>/jest/svgTransform.js',
+    },
+    // transformIgnorePatterns: [
+    //   '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$',
+    //   '^.+\\.module\\.(css|sass|scss)$',
+    // ],
+    verbose: true,
+    watchPlugins: [
+      'jest-watch-typeahead/filename',
+      'jest-watch-typeahead/testname',
+    ],
+  }
+}