presetter-preset-react 3.0.0

package/README.md

@@ -0,0 +1,107 @@
+<div align="center">
+
+![Logo](https://github.com/alvis/presetter/raw/master/assets/logo.svg)
+
+🏄🏻 _A collection of opinionated configurations for a React project in typescript for presetter_
+
+•   [Quick Start](#quick-start)   •   [Project Structure](#project-structure)   •   [Customisation](#customisation)   •   [Scripts](#script-template-summary)   •
+
+[![npm](https://img.shields.io/npm/v/presetter-preset-react?style=flat-square)](https://github.com/alvis/presetter/releases)
+[![build](https://img.shields.io/github/workflow/status/alvis/presetter/code%20test?style=flat-square)](https://github.com/alvis/presetter/actions)
+[![maintainability](https://img.shields.io/codeclimate/maintainability/alvis/presetter?style=flat-square)](https://codeclimate.com/github/alvis/presetter/maintainability)
+[![coverage](https://img.shields.io/codeclimate/coverage/alvis/presetter?style=flat-square)](https://codeclimate.com/github/alvis/presetter/test_coverage)
+[![security](https://img.shields.io/snyk/vulnerabilities/github/alvis/presetter/packages/preset-react/package.json.svg?style=flat-square)](https://snyk.io/test/github/alvis/presetter?targetFile=packages/preset-react/package.json&style=flat-square)
+[![dependencies](https://img.shields.io/david/alvis/presetter?path=packages/preset-react&style=flat-square)](https://david-dm.org/alvis/presetter?path=packages/preset-react)
+[![license](https://img.shields.io/github/license/alvis/presetter.svg?style=flat-square)](https://github.com/alvis/presetter/blob/master/LICENSE)
+
+</div>
+
+## Features
+
+**presetter-preset-react** is an opinionated preset for you to setup a React project in a fraction of time you usually take via [**presetter**](https://github.com/alvis/presetter).
+
+- ✨ TSX support
+- 🧪 @testing-library/react
+- 📝 Recommended rules from eslint-plugin-react
+
+## Quick Start
+
+[**FULL DOCUMENTATION IS AVAILABLE HERE**](https://github.com/alvis/presetter/blob/master/README.md)
+
+1. Bootstrap your project with `presetter-preset-essentials` & `presetter-preset-react`
+
+```shell
+npx presetter use presetter-preset presetter-preset-react
+```
+
+That's. One command and you're set.
+
+2. Develop and run life cycle scripts provided by the preset
+
+At this point, all development packages specified in the preset are installed,
+and now you can try to run some example life cycle scripts (e.g. run prepare).
+
+![Demo](https://raw.githubusercontent.com/alvis/presetter/master/assets/demo.gif)
+
+## Project Structure
+
+After installation, your project file structure should resemble the following or with more configuration files if you also installed other presets such as [`presetter-preset-essentials`](https://github.com/alvis/presetter/blob/master/packages/preset-essentials).
+
+Implement your business logic under `source` and prepare tests under `spec`. The `.d.ts` files are handy type definitions for you to import `.css` or image files in typescript.
+
+**TIPS** You can always change the source directory to other (e.g. src) by setting the `source` variable in `.presetterrc.json`. See the [customisation](https://github.com/alvis/presetter/blob/master/packages/preset-react#customisation) section below for more details.
+
+```
+(root)
+ ├─ .eslintrc.json
+ ├─ .git
+ ├─ .preseterrc.json
+ ├─ node_modules
+ ├─ source
+ │   ├─ <folders>
+ │   ├─ index.ts
+ │   ├─ (auxiliary).ts
+ ├─ spec
+ │   ├─ *.spec.ts
+ ├─ types
+ │   ├─ image.d.ts
+ │   ├─ style.d.ts
+ │   ├─ (type).d.ts
+ ├─ package.json
+ └─ tsconfig.json
+```
+
+## Customisation
+
+By default, this preset exports a handy configuration set for a React project written in typescript.
+But you can further customise (either extending or replacing) the configuration by specifying the change in the config file (`.presetterrc` or `.presetterrc.json`).
+
+These settings are available in the `config` field in the config file. For directories, the setting is specified in the `variable` field.
+
+The structure of `.presetterrc` should follow the interface below:
+
+```ts
+interface PresetterRC {
+  /** name(s) of the preset e.g. presetter-preset-react */
+  name: string | string[];
+  /** additional configuration passed to the preset for generating the configuration files */
+  config?: {
+    //  ┌─ configuration for other tools via other presets (e.g. presetter-preset-essentials)
+    // ...
+
+    /** configuration to be merged with .eslintrc */
+    eslint?: Record<string, unknown>;
+    /** configuration to be merged with tsconfig.json */
+    tsconfig?: Record<string, unknown>;
+    /** variables to be substituted in templates */
+    variable?: {
+      /** the directory containing all source code (default: source) */
+      source?: string;
+      /** the directory containing all typing files (default: types) */
+      types?: string;
+      /** the directory containing all output tile (default: source) */
+      output?: string;
+    };
+  };
+}
+```

package/configs/eslint.yaml

@@ -0,0 +1,14 @@
+rules:
+  '@typescript-eslint/naming-convention':
+    - error
+    - selector: variable
+      types:
+        - function
+      format:
+        - camelCase
+        - PascalCase
+  jsdoc/require-returns: # tell us what the function is expected to return
+    1:
+      contexts:
+        - FunctionDeclaration:has(BlockStatement > ReturnStatement:not([argument.type='JSXElement']))
+        - ArrowFunctionExpression:has(BlockStatement > ReturnStatement:not([argument.type='JSXElement']))

package/configs/jest.yaml

@@ -0,0 +1,5 @@
+collectCoverageFrom:
+  - src/**/*.tsx
+testEnvironment: jsdom
+testMatch:
+  - '**/?(*.)+(spec).tsx'

package/configs/lintstaged.yaml

@@ -0,0 +1,2 @@
+'{source}/**/*.[tj]sx':
+  - presetter run stage

package/configs/rollup.yaml

@@ -0,0 +1,3 @@
+external:
+  - react
+  - react-dom

package/lib/index.d.ts

@@ -0,0 +1,12 @@
+import type { PresetAsset } from 'presetter';
+export declare type PresetConfig = {
+    eslint?: Record<string, unknown>;
+    tsconfig?: Record<string, unknown>;
+};
+export declare type Variable = {
+    source?: string;
+    types?: string;
+    output?: string;
+};
+export declare const DEFAULT_VARIABLE: Variable;
+export default function (): Promise<PresetAsset>;

package/lib/index.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = _default;
+exports.DEFAULT_VARIABLE = void 0;
+
+var _path = require("path");
+
+/*
+ *                            *** MIT LICENSE ***
+ * -------------------------------------------------------------------------
+ * This code may be modified and distributed under the MIT license.
+ * See the LICENSE file for details.
+ * -------------------------------------------------------------------------
+ *
+ * @summary   Preset for a React project
+ *
+ * @author    Alvis HT Tang <alvis@hilbert.space>
+ * @license   MIT
+ * @copyright Copyright (c) 2021 - All Rights Reserved.
+ * -------------------------------------------------------------------------
+ */
+// paths to the template directory
+const TEMPLATES = (0, _path.resolve)(__dirname, '..', 'templates');
+const CONFIGS = (0, _path.resolve)(__dirname, '..', 'configs');
+/** config for this preset */
+
+const DEFAULT_VARIABLE = {
+  source: 'source',
+  types: 'types',
+  output: 'lib'
+};
+exports.DEFAULT_VARIABLE = DEFAULT_VARIABLE;
+const IMAGE_TYPE = 'image.d.ts';
+const STYLE_TYPE = 'style.d.ts';
+
+const template = ({
+  custom: {
+    variable: {
+      types
+    }
+  }
+}) => ({
+  '.eslintrc.json': (0, _path.resolve)(TEMPLATES, 'eslintrc.yaml'),
+  'tsconfig.json': (0, _path.resolve)(TEMPLATES, 'tsconfig.yaml'),
+  [(0, _path.join)(types, IMAGE_TYPE)]: (0, _path.resolve)(TEMPLATES, IMAGE_TYPE),
+  [(0, _path.join)(types, STYLE_TYPE)]: (0, _path.resolve)(TEMPLATES, STYLE_TYPE)
+});
+
+const noSymlinks = ({
+  custom: {
+    variable: {
+      types
+    }
+  }
+}) => [(0, _path.join)(types, IMAGE_TYPE), (0, _path.join)(types, STYLE_TYPE)];
+
+const supplementaryConfig = {
+  eslint: (0, _path.resolve)(CONFIGS, 'eslint.yaml'),
+  gitignore: ({
+    custom: {
+      variable: {
+        types
+      }
+    }
+  }) => [(0, _path.join)('/', types, IMAGE_TYPE), (0, _path.join)('/', types, STYLE_TYPE)],
+  jest: (0, _path.resolve)(CONFIGS, 'jest.yaml'),
+  lintstaged: (0, _path.resolve)(CONFIGS, 'lintstaged.yaml'),
+  rollup: (0, _path.resolve)(CONFIGS, 'rollup.yaml')
+};
+/**
+ * get the list of templates provided by this preset
+ * @returns list of preset templates
+ */
+
+async function _default() {
+  return {
+    template,
+    noSymlinks,
+    supplementaryConfig,
+    variable: DEFAULT_VARIABLE
+  };
+}
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../source/index.ts"],"names":["TEMPLATES","__dirname","CONFIGS","DEFAULT_VARIABLE","source","types","output","IMAGE_TYPE","STYLE_TYPE","template","custom","variable","noSymlinks","supplementaryConfig","eslint","gitignore","jest","lintstaged","rollup"],"mappings":";;;;;;;;AAeA;;AAfA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAMA;AACA,MAAMA,SAAS,GAAG,mBAAQC,SAAR,EAAmB,IAAnB,EAAyB,WAAzB,CAAlB;AACA,MAAMC,OAAO,GAAG,mBAAQD,SAAR,EAAmB,IAAnB,EAAyB,SAAzB,CAAhB;AAEA;;AAkBO,MAAME,gBAA0B,GAAG;AACxCC,EAAAA,MAAM,EAAE,QADgC;AAExCC,EAAAA,KAAK,EAAE,OAFiC;AAGxCC,EAAAA,MAAM,EAAE;AAHgC,CAAnC;;AAMP,MAAMC,UAAU,GAAG,YAAnB;AACA,MAAMC,UAAU,GAAG,YAAnB;;AAEA,MAAMC,QAAiC,GAAG,CAAC;AACzCC,EAAAA,MAAM,EAAE;AACNC,IAAAA,QAAQ,EAAE;AAAEN,MAAAA;AAAF;AADJ;AADiC,CAAD,MAInC;AACL,oBAAkB,mBAAQL,SAAR,EAAmB,eAAnB,CADb;AAEL,mBAAiB,mBAAQA,SAAR,EAAmB,eAAnB,CAFZ;AAGL,GAAC,gBAAKK,KAAL,EAAYE,UAAZ,CAAD,GAA2B,mBAAQP,SAAR,EAAmBO,UAAnB,CAHtB;AAIL,GAAC,gBAAKF,KAAL,EAAYG,UAAZ,CAAD,GAA2B,mBAAQR,SAAR,EAAmBQ,UAAnB;AAJtB,CAJmC,CAA1C;;AAWA,MAAMI,UAAqC,GAAG,CAAC;AAC7CF,EAAAA,MAAM,EAAE;AACNC,IAAAA,QAAQ,EAAE;AAAEN,MAAAA;AAAF;AADJ;AADqC,CAAD,KAIxC,CAAC,gBAAKA,KAAL,EAAYE,UAAZ,CAAD,EAA0B,gBAAKF,KAAL,EAAYG,UAAZ,CAA1B,CAJN;;AAMA,MAAMK,mBAAuD,GAAG;AAC9DC,EAAAA,MAAM,EAAE,mBAAQZ,OAAR,EAAiB,aAAjB,CADsD;AAE9Da,EAAAA,SAAS,EAAE,CAAC;AACVL,IAAAA,MAAM,EAAE;AACNC,MAAAA,QAAQ,EAAE;AAAEN,QAAAA;AAAF;AADJ;AADE,GAAD,KAIL,CAAC,gBAAK,GAAL,EAAUA,KAAV,EAAiBE,UAAjB,CAAD,EAA+B,gBAAK,GAAL,EAAUF,KAAV,EAAiBG,UAAjB,CAA/B,CANwD;AAO9DQ,EAAAA,IAAI,EAAE,mBAAQd,OAAR,EAAiB,WAAjB,CAPwD;AAQ9De,EAAAA,UAAU,EAAE,mBAAQf,OAAR,EAAiB,iBAAjB,CARkD;AAS9DgB,EAAAA,MAAM,EAAE,mBAAQhB,OAAR,EAAiB,aAAjB;AATsD,CAAhE;AAYA;AACA;AACA;AACA;;AACe,0BAAwC;AACrD,SAAO;AACLO,IAAAA,QADK;AAELG,IAAAA,UAFK;AAGLC,IAAAA,mBAHK;AAILF,IAAAA,QAAQ,EAAER;AAJL,GAAP;AAMD","sourcesContent":["/*\n *                            *** MIT LICENSE ***\n * -------------------------------------------------------------------------\n * This code may be modified and distributed under the MIT license.\n * See the LICENSE file for details.\n * -------------------------------------------------------------------------\n *\n * @summary   Preset for a React project\n *\n * @author    Alvis HT Tang <alvis@hilbert.space>\n * @license   MIT\n * @copyright Copyright (c) 2021 - All Rights Reserved.\n * -------------------------------------------------------------------------\n */\n\nimport { join, resolve } from 'path';\n\nimport type { PresetAsset } from 'presetter';\n\n// paths to the template directory\nconst TEMPLATES = resolve(__dirname, '..', 'templates');\nconst CONFIGS = resolve(__dirname, '..', 'configs');\n\n/** config for this preset */\nexport type PresetConfig = {\n  /** configuration to be merged with .eslintrc */\n  eslint?: Record<string, unknown>;\n  /** configuration to be merged with tsconfig.json */\n  tsconfig?: Record<string, unknown>;\n};\n\n/** list of configurable variables */\nexport type Variable = {\n  /** the directory containing all source code (default: source) */\n  source?: string;\n  /** the directory containing all extra typing files (default: types) */\n  types?: string;\n  /** the directory containing all the compiled files (default: lib) */\n  output?: string;\n};\n\nexport const DEFAULT_VARIABLE: Variable = {\n  source: 'source',\n  types: 'types',\n  output: 'lib',\n};\n\nconst IMAGE_TYPE = 'image.d.ts';\nconst STYLE_TYPE = 'style.d.ts';\n\nconst template: PresetAsset['template'] = ({\n  custom: {\n    variable: { types },\n  },\n}) => ({\n  '.eslintrc.json': resolve(TEMPLATES, 'eslintrc.yaml'),\n  'tsconfig.json': resolve(TEMPLATES, 'tsconfig.yaml'),\n  [join(types, IMAGE_TYPE)]: resolve(TEMPLATES, IMAGE_TYPE),\n  [join(types, STYLE_TYPE)]: resolve(TEMPLATES, STYLE_TYPE),\n});\n\nconst noSymlinks: PresetAsset['noSymlinks'] = ({\n  custom: {\n    variable: { types },\n  },\n}) => [join(types, IMAGE_TYPE), join(types, STYLE_TYPE)];\n\nconst supplementaryConfig: PresetAsset['supplementaryConfig'] = {\n  eslint: resolve(CONFIGS, 'eslint.yaml'),\n  gitignore: ({\n    custom: {\n      variable: { types },\n    },\n  }) => [join('/', types, IMAGE_TYPE), join('/', types, STYLE_TYPE)],\n  jest: resolve(CONFIGS, 'jest.yaml'),\n  lintstaged: resolve(CONFIGS, 'lintstaged.yaml'),\n  rollup: resolve(CONFIGS, 'rollup.yaml'),\n};\n\n/**\n * get the list of templates provided by this preset\n * @returns list of preset templates\n */\nexport default async function (): Promise<PresetAsset> {\n  return {\n    template,\n    noSymlinks,\n    supplementaryConfig,\n    variable: DEFAULT_VARIABLE,\n  };\n}\n"],"file":"index.js"}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "presetter-preset-react",
+  "version": "3.0.0",
+  "description": "An opinionated presetter preset for a React project",
+  "keywords": [
+    "presetter",
+    "preset"
+  ],
+  "homepage": "https://github.com/alvis/presetter#readme",
+  "bugs": {
+    "url": "https://github.com/alvis/presetter/issues"
+  },
+  "license": "MIT",
+  "author": "Alvis HT Tang <alvis@hilbert.space>",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alvis/presetter.git"
+  },
+  "scripts": {
+    "bootstrap": "presetter bootstrap && run prepare",
+    "build": "run build",
+    "coverage": "run coverage",
+    "lint": "run lint",
+    "prepublishOnly": "run prepare && run prepublishOnly",
+    "release": "run-s release:peer:*",
+    "release:peer:presetter": "npm pkg set peerDependencies.presetter=^$(npx -c 'echo $npm_package_version')",
+    "test": "run test",
+    "watch": "run watch"
+  },
+  "peerDependencies": {
+    "@babel/preset-react": "^7.0.0",
+    "@testing-library/react": "^12.0.0",
+    "@types/react": "^17.0.0",
+    "eslint-plugin-react": "^7.0.0",
+    "presetter": "^3.0.0"
+  },
+  "devDependencies": {
+    "presetter": "file:../presetter",
+    "presetter-preset-strict": "file:../preset-strict"
+  }
+}

package/templates/eslintrc.yaml

@@ -0,0 +1,12 @@
+extends:
+  - plugin:react/recommended
+rules:
+  react/boolean-prop-naming: warn
+  react/button-has-type: warn
+  react/destructuring-assignment: warn
+  react/prop-types: 'off'
+  react/sort-comp: warn
+  react/jsx-sort-props:
+    - warn
+    - callbacksLast: true
+      shorthandFirst: true

package/templates/image.d.ts

@@ -0,0 +1,48 @@
+/// <reference types="react" />
+/// <reference types="react-dom" />
+
+declare module '*.avif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.bmp' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.gif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpeg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.webp' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.svg' {
+  import * as React from 'react';
+
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement> & { title?: string }
+  >;
+
+  const src: string;
+  export default src;
+}

package/templates/style.d.ts

@@ -0,0 +1,19 @@
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}

package/templates/tsconfig.yaml

@@ -0,0 +1,37 @@
+compilerOptions:
+  # emittance
+  outDir: '{output}'
+  module: commonjs # node doesn't support anything non commonjs code yet
+  target: ES2017 # use ES2017 as it's the latest standard node 10 can be fully compatible with
+  declaration: true
+  sourceMap: true
+
+  # compatibility
+  allowSyntheticDefaultImports: true
+  esModuleInterop: true
+  experimentalDecorators: true
+  emitDecoratorMetadata: true
+  isolatedModules: false
+  jsx: react
+
+  # module resolution
+  moduleResolution: node
+  resolveJsonModule: true
+  baseUrl: .
+  paths:
+    '#*':
+      - '{source}/*'
+    '*':
+      - '{types}/*'
+
+  # libraries
+  lib:
+    - ES2020
+    - ESNext
+    - DOM
+include:
+  - '**/*.json'
+  - '**/*.ts'
+  - '**/*.tsx'
+exclude:
+  - '**/node_modules'