Merge pull request #19 from alioguzhan/alioguzhan/issue18

Alioguzhan/issue18

Author: alioguzhan

.commitlintrc.js

@@ -0,0 +1,13 @@
+on:
+  push:
+    branches:
+      - main
+name: release-please
+jobs:
+  release-please:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: google-github-actions/release-please-action@v3
+        with:
+          release-type: node
+          package-name: --libraryname--

.github/workflows/release-please.yml

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-./node_modules/.bin/lint-staged
+yarn lint-staged

.husky/pre-commit

@@ -12,11 +12,11 @@ A template to create a react component / library with Typescript.
 - Css Modules
 - Jest with code coverage report
 - `Typedoc` for API documentation
-- `standard-version` ready
 - `commitlint` for conventional-commits
 - `Prettier` and `ESLint` integration with git hooks
 - Optional `example app` generation for testing
 - `Github Pages` integration
+- Release-Please workflow
 
 ## Install
 

.versionrc.js

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] };

README.md

@@ -31,60 +31,60 @@
     "prepare": "husky install"
   },
   "engines": {
-    "node": ">=10",
-    "npm": ">=6"
+    "node": ">=12"
   },
   "peerDependencies": {
     "react": ">=17",
     "react-dom": ">=17"
   },
   "devDependencies": {
-    "@commitlint/cli": "^13.2.0",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.1.2",
-    "@types/jest": "^27.0.2",
-    "@types/node": "^16.10.3",
-    "@types/react": "^17.0.27",
-    "@types/react-dom": "^17.0.9",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@commitlint/cli": "^17.1.2",
+    "@commitlint/config-conventional": "^17.1.0",
+    "@rollup/plugin-commonjs": "^22.0.2",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@types/jest": "^29.0.0",
+    "@types/node": "^18.7.15",
+    "@types/react": "^18.0.18",
+    "@types/react-dom": "^18.0.6",
+    "@typescript-eslint/eslint-plugin": "^5.36.1",
+    "@typescript-eslint/parser": "^5.36.1",
     "colors": "^1.4.0",
     "cross-env": "^7.0.3",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-config-standard": "^16.0.3",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-promise": "^5.1.0",
-    "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint": "^8.23.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-n": "^15.2.5",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-promise": "^6.0.1",
+    "eslint-plugin-react": "^7.31.6",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-standard": "^5.0.0",
-    "gh-pages": "^3.2.3",
-    "husky": "^7.0.2",
+    "gh-pages": "^4.0.0",
+    "husky": "^8.0.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.2.4",
-    "lint-staged": "^11.2.0",
-    "postcss": "^8.3.9",
-    "prettier": "^2.4.1",
-    "prompt": "^1.2.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.1",
-    "replace-in-file": "^6.2.0",
-    "rollup": "^2.58.0",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-json": "^4.0.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
+    "jest": "^29.0.2",
+    "jest-environment-jsdom": "^29.0.2",
+    "lint-staged": "^13.0.3",
+    "postcss": "^8.4.16",
+    "prettier": "^2.7.1",
+    "prompt": "^1.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "replace-in-file": "^6.3.5",
+    "rollup": "^2.79.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.1",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.30.0",
-    "shelljs": "^0.8.5",
-    "ts-jest": "^27.0.5",
-    "ts-node": "^10.2.1",
-    "typedoc": "^0.22.5",
-    "typescript": "^4.4.3"
+    "rollup-plugin-typescript2": "^0.33.0",
+    "ts-jest": "^28.0.8",
+    "ts-node": "^10.9.1",
+    "typedoc": "^0.23.14",
+    "typescript": "^4.8.2"
   },
   "lint-staged": {
     "src/**/*.{ts,tsx}": [

commitlint.config.js

@@ -1,8 +1,8 @@
-import commonjs from 'rollup-plugin-commonjs';
-import json from 'rollup-plugin-json';
-import resolve from 'rollup-plugin-node-resolve';
-import postcss from 'rollup-plugin-postcss';
+import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
+import resolve from '@rollup/plugin-node-resolve';
 import external from 'rollup-plugin-peer-deps-external';
+import postcss from 'rollup-plugin-postcss';
 import sourceMaps from 'rollup-plugin-sourcemaps';
 import { terser } from 'rollup-plugin-terser';
 import typescript from 'rollup-plugin-typescript2';
@@ -45,7 +45,6 @@ export default {
     // Compile TypeScript files
     typescript({
       useTsconfigDeclarationDir: true,
-      rollupCommonJSResolveHack: true,
       exclude: ['**/__tests__/**', '*.spec.*', '*.test.*'],
       clean: true,
     }),

package.json

@@ -0,0 +1,11 @@
+with import (fetchTarball https://github.com/NixOS/nixpkgs/archive/22.05.tar.gz) { };
+
+stdenv.mkDerivation {
+  name = "--libraryname--";
+
+  buildInputs = with pkgs; [
+    git
+    nodejs
+    yarn
+  ];
+}

rollup.config.js

@@ -1,7 +1,10 @@
 import React, { useEffect } from 'react';
 import styles from './styles.module.css';
 
-interface Props {
+/**
+ * Main Component Props
+ */
+export interface Props {
   message?: string;
 }
 /**

shell.nix

@@ -9,6 +9,16 @@
  * I just made some modifications and added some new functions.
  * **/
 
+const { execSync } = require('child_process');
+const {
+  rmdirSync,
+  rmSync,
+  existsSync,
+  lstatSync,
+  readdirSync,
+  unlinkSync,
+} = require('fs');
+
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
@@ -23,7 +33,23 @@ const replace = require('replace-in-file');
 const { readFileSync, writeFileSync } = require('fs');
 const { cyan, green, red, underline, yellow } = require('colors');
 const _prompt = require('prompt');
-const { mv, rm, which, exec } = require('shelljs');
+
+function deleteFolderRecursive(path: any) {
+  if (existsSync(path)) {
+    const files = readdirSync(path);
+    files.forEach(function (file: any) {
+      const curPath = path + '/' + file;
+      if (lstatSync(curPath).isDirectory()) {
+        // recurse
+        deleteFolderRecursive(curPath);
+      } else {
+        // delete file
+        unlinkSync(curPath);
+      }
+    });
+    rmdirSync(path);
+  }
+}
 
 // Note: These should all be relative to the project root directory
 const rmDirs = ['.git', 'tools'];
@@ -33,6 +59,8 @@ const modifyFiles = [
   'package.json',
   'README.md',
   'CODE_OF_CONDUCT.md',
+  'shell.nix',
+  '.github/workflows/release-please.yml',
 ];
 
 /**
@@ -44,12 +72,11 @@ function removeItems() {
   // The directories and files are combined here, to simplify the function,
   // as the 'rm' command checks the item type before attempting to remove it
   const rmItems = rmDirs.concat(rmFiles);
-  rm(
-    '-rf',
-    rmItems.map((f) => resolve(__dirname, '..', f))
-  );
-  console.log(red(rmItems.join('\n')));
 
+  rmItems
+    .map((f) => resolve(__dirname, '..', f))
+    .forEach((p) => deleteFolderRecursive(p));
+  console.log(red(rmItems.join('\n')));
   console.log('\n');
 }
 
@@ -102,9 +129,10 @@ function finalize() {
   console.log(underline.white('Finalizing'));
 
   // Recreate Git folder
-  const gitInitOutput = exec('git init "' + resolve(__dirname, '..') + '"', {
-    silent: true,
-  }).stdout;
+  const gitInitOutput = execSync(
+    'git init "' + resolve(__dirname, '..') + '"',
+    {}
+  ).toString();
   console.log(green(gitInitOutput.replace(/(\n|\r)+/g, '')));
 
   // Remove post-install command
@@ -115,20 +143,19 @@ function finalize() {
   delete pkg.scripts.postinstall;
 
   // remove the dependencies that are required for the bootstrapping.
-  ['colors', 'prompt', 'replace-in-file', 'shelljs', 'ts-node'].forEach(
-    (dep) => {
-      delete pkg.devDependencies[dep];
-    }
-  );
+  ['colors', 'prompt', 'replace-in-file', 'ts-node'].forEach((dep) => {
+    delete pkg.devDependencies[dep];
+  });
 
   writeFileSync(jsonPackage, JSON.stringify(pkg, null, 2));
   console.log(green('Postinstall script has been removed'));
 
   console.log(yellow('Removing yarn.lock and performing a clean install...'));
-  rm('yarn.lock');
-  exec('yarn install');
-  exec('yarn build');
-  exec("git add . && git commit -am 'chore: init' --no-verify");
+  rmSync('yarn.lock');
+  deleteFolderRecursive('node_modules');
+  execSync('yarn install');
+  execSync('yarn build');
+  execSync("git add . && git commit -am 'chore: init' --no-verify");
   console.log('\n');
 }
 /**
@@ -144,23 +171,23 @@ function setupLibrary(libraryName: string, generateExample = false) {
   );
 
   // Get the Git username and email before the .git directory is removed
-  const username = exec('git config user.name').stdout.trim();
-  const usermail = exec('git config user.email').stdout.trim();
+  const username = execSync('git config user.name').toString().trim();
+  const usermail = execSync('git config user.email').toString().trim();
 
   if (generateExample) {
     yellow('Installing the test application into example/ directory...');
-    exec('npx create-react-app example');
-    exec('echo "SKIP_PREFLIGHT_CHECK=true" >> example/.env');
+    execSync('npx create-react-app example');
+    execSync('echo "SKIP_PREFLIGHT_CHECK=true" >> example/.env');
   }
-  mv('tools/README.md', 'README.md');
+  execSync('mv tools/README.md README.md');
   removeItems();
 
   modifyGitignoreFile();
   modifyContents(libraryName, username, usermail);
 
   if (generateExample) {
     console.log(yellow('Linking packages to the example app...'));
-    exec(
+    execSync(
       'cd example && yarn add link:.. link:../node_modules/react link:../node_modules/react-dom && cd ..'
     );
   }
@@ -295,7 +322,9 @@ _prompt.message = '';
 // Clear console
 process.stdout.write('\x1B[2J\x1B[0f');
 
-if (!which('git')) {
+try {
+  execSync('git --version');
+} catch {
   console.log(red('Sorry, this script requires git'));
   removeItems();
   process.exit(1);