├── .husky ├── .gitignore ├── pre-commit └── commit-msg ├── .nvmrc ├── src ├── Globals.d.ts ├── styles.module.css ├── index.tsx └── __tests__ │ └── index.test.tsx ├── commitlint.config.js ├── tools ├── tsreact.png ├── tsconfig.json ├── README.md └── init.ts ├── .prettierrc ├── .editorconfig ├── typedoc.json ├── shell.nix ├── CONTRIBUTING.md ├── .github ├── workflows │ └── release-please.yml └── ISSUE_TEMPLATE │ ├── feature_request.md │ └── bug_report.md ├── jest.config.js ├── tsconfig.json ├── .eslintrc.js ├── LICENSE ├── rollup.config.js ├── CHANGELOG.md ├── README.md ├── .gitignore ├── package.json └── CODE_OF_CONDUCT.md /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v16.19.0 2 | -------------------------------------------------------------------------------- /src/Globals.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.module.css'; 2 | -------------------------------------------------------------------------------- /src/styles.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | } 4 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | yarn lint-staged 5 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { extends: ['@commitlint/config-conventional'] }; 2 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | yarn commitlint --edit $1 5 | -------------------------------------------------------------------------------- /tools/tsreact.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alioguzhan/react-typescript-library/HEAD/tools/tsreact.png -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "useTabs": false, 4 | "semi": true, 5 | "singleQuote": true, 6 | "trailingComma": "es5" 7 | } 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /typedoc.json: -------------------------------------------------------------------------------- 1 | { 2 | "out": "docs", 3 | "entryPoints": ["./src"], 4 | "exclude": "**/**/*+(.spec|.test).**", 5 | "theme": "default", 6 | "includeVersion": true, 7 | "categorizeByGroup": true 8 | } 9 | -------------------------------------------------------------------------------- /shell.nix: -------------------------------------------------------------------------------- 1 | with import (fetchTarball https://github.com/NixOS/nixpkgs/archive/22.11.tar.gz) { }; 2 | 3 | stdenv.mkDerivation { 4 | name = "--libraryname--"; 5 | 6 | buildInputs = with pkgs; [ 7 | git 8 | nodejs 9 | yarn 10 | ]; 11 | } 12 | -------------------------------------------------------------------------------- /tools/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "commonjs", 5 | "esModuleInterop": true, 6 | }, 7 | "ts-node": { 8 | "compilerOptions": { 9 | "module": "commonjs" 10 | }, 11 | } 12 | } -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # CONTRIBUTING 2 | 3 | Hi dear contributor, 4 | 5 | Any kind of contribution is welcome. First, create an issue that addresses the problem/feature. 6 | 7 | Then, go and create a Pull Request implements/fixes that issue. 8 | 9 | Do not forget to reference the issue, please. 10 | 11 | Thanks 12 | -------------------------------------------------------------------------------- /.github/workflows/release-please.yml: -------------------------------------------------------------------------------- 1 | on: 2 | push: 3 | branches: 4 | - main 5 | name: release-please 6 | jobs: 7 | release-please: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - uses: google-github-actions/release-please-action@v3 11 | with: 12 | release-type: node 13 | package-name: --libraryname-- 14 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'ts-jest', 3 | testEnvironment: 'jsdom', 4 | testPathIgnorePatterns: ['example', 'node_modules'], 5 | moduleNameMapper: { 6 | '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 7 | '/__mocks__/fileMock.js', 8 | '\\.(scss|sass|css)$': 'identity-obj-proxy', 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | import styles from './styles.module.css'; 3 | 4 | /** 5 | * Main Component Props 6 | */ 7 | export interface Props { 8 | message?: string; 9 | } 10 | /** 11 | * Main Component 12 | */ 13 | function Greeting(props: Props) { 14 | useEffect(() => { 15 | console.log('Incoming message: ', props.message); 16 | }, [props.message]); 17 | 18 | return ( 19 |
{props.message ?? 'No Message'}
20 | ); 21 | } 22 | 23 | export default Greeting; 24 | -------------------------------------------------------------------------------- /src/__tests__/index.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import '@testing-library/jest-dom'; 4 | import Main from '../index'; 5 | 6 | describe('My Component', () => { 7 | it('displays the passed message', async () => { 8 | const { findByText } = render(
); 9 | const content = await findByText('Hello World'); 10 | expect(content).toBeTruthy(); 11 | }); 12 | it('displays the default message', async () => { 13 | const { findByText } = render(
); 14 | const content = await findByText('No Message'); 15 | expect(content).toBeTruthy(); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | 7 | --- 8 | 9 | **Is your feature request related to a problem? Please describe.** 10 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 11 | 12 | **Describe the solution you'd like** 13 | A clear and concise description of what you want to happen. 14 | 15 | **Describe alternatives you've considered** 16 | A clear and concise description of any alternative solutions or features you've considered. 17 | 18 | **Additional context** 19 | Add any other context or screenshots about the feature request here. 20 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | 7 | --- 8 | 9 | **Describe the bug** 10 | A clear and concise description of what the bug is. 11 | 12 | **To Reproduce** 13 | Steps to reproduce the behavior: 14 | 15 | **Expected behavior** 16 | A clear and concise description of what you expected to happen. 17 | 18 | **Screenshots** 19 | If applicable, add screenshots to help explain your problem. 20 | 21 | **Environment (please complete the following information):** 22 | 23 | - OS: [e.g. MacOS, Linux] 24 | - Node version 25 | 26 | **Additional context** 27 | Add any other context about the problem here. 28 | -------------------------------------------------------------------------------- /tools/README.md: -------------------------------------------------------------------------------- 1 | # --libraryname-- 2 | 3 | [![NPM](https://img.shields.io/npm/v/--libraryname--.svg)](https://www.npmjs.com/package/--libraryname--) 4 | [![npm](https://img.shields.io/npm/dm/--libraryname--.svg)](https://www.npmjs.com/package/--libraryname--) 5 | ![GitHub](https://img.shields.io/github/license/--username--/--libraryname--) 6 | 7 | This project is generated from [react-typescript-library template](https://github.com/alioguzhan/react-typescript-library). 8 | 9 | ## Install 10 | 11 | ```bash 12 | npm install --save --libraryname-- 13 | ``` 14 | 15 | Or with yarn: 16 | 17 | ```bash 18 | yarn add --libraryname-- 19 | ``` 20 | 21 | ## Usage 22 | 23 | 24 | ## API / Props 25 | 26 | 27 | ## License 28 | 29 | MIT © [--username--](https://github.com/--username--) 30 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "ESNext", 5 | "lib": [ 6 | "ESNext", 7 | "DOM" 8 | ], 9 | "declaration": true, 10 | "declarationDir": "dist", 11 | "declarationMap": true, 12 | "downlevelIteration": false, 13 | "outDir": "dist", 14 | "sourceMap": true, 15 | "strict": true, 16 | "esModuleInterop": true, 17 | "skipLibCheck": true, 18 | "forceConsistentCasingInFileNames": true, 19 | "noFallthroughCasesInSwitch": true, 20 | "allowJs": false, 21 | "moduleResolution": "node", 22 | "resolveJsonModule": true, 23 | "jsx": "react", 24 | "baseUrl": "./src", 25 | "paths": { 26 | "tslib": [ 27 | "node_modules/tslib/tslib.d.ts" 28 | ] 29 | }, 30 | "plugins": [ 31 | { 32 | "name": "typescript-plugin-css-modules" 33 | } 34 | ], 35 | }, 36 | "include": [ 37 | "src/**/*" 38 | ], 39 | "exclude": [ 40 | "node_modules", 41 | "dist", 42 | "src/__tests__", 43 | "**/*.test.tsx", 44 | "**/*.spec.tsx", 45 | ] 46 | } 47 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es6: true, 5 | }, 6 | globals: { 7 | Atomics: 'readonly', 8 | SharedArrayBuffer: 'readonly', 9 | }, 10 | parser: '@typescript-eslint/parser', 11 | parserOptions: { 12 | ecmaFeatures: { 13 | jsx: true, 14 | }, 15 | ecmaVersion: 2018, 16 | sourceType: 'module', 17 | }, 18 | plugins: ['react', '@typescript-eslint', 'prettier', 'react-hooks'], 19 | extends: [ 20 | 'plugin:react/recommended', 21 | 'standard', 22 | 'prettier', 23 | 'plugin:prettier/recommended', 24 | 'plugin:@typescript-eslint/eslint-recommended', 25 | ], 26 | rules: { 27 | 'prettier/prettier': 'error', 28 | '@typescript-eslint/explicit-function-return-type': 'off', 29 | 'no-use-before-define': 'off', 30 | '@typescript-eslint/no-use-before-define': ['error'], 31 | 'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks 32 | 'react-hooks/exhaustive-deps': 'warn', // Checks effect dependencies 33 | 'react/react-in-jsx-scope': 'off', // suppress errors for missing 'import React' in files 34 | }, 35 | }; 36 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) --currentYear-- - PRESENT --username-- 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | const commonjs = require('@rollup/plugin-commonjs'); 2 | const json = require('@rollup/plugin-json'); 3 | const resolve = require('@rollup/plugin-node-resolve'); 4 | const external = require('rollup-plugin-peer-deps-external'); 5 | const postcss = require('rollup-plugin-postcss'); 6 | const sourceMaps = require('rollup-plugin-sourcemaps'); 7 | const { terser } = require('rollup-plugin-terser'); 8 | const typescript = require('rollup-plugin-typescript2'); 9 | const pkg = require('./package.json'); 10 | 11 | module.exports = { 12 | input: `src/index.tsx`, 13 | output: [ 14 | { 15 | file: pkg.main, 16 | format: 'cjs', 17 | sourcemap: true, 18 | plugins: [terser()], 19 | exports: 'auto', 20 | }, 21 | { 22 | file: pkg.module, 23 | format: 'es', 24 | sourcemap: true, 25 | plugins: [terser()], 26 | exports: 'auto', 27 | }, 28 | { 29 | file: 'dist/index.js', 30 | format: 'cjs', 31 | sourcemap: true, 32 | exports: 'auto', 33 | }, 34 | ], 35 | watch: { 36 | include: 'src/**', 37 | }, 38 | plugins: [ 39 | external(), 40 | postcss({ 41 | modules: true, 42 | }), 43 | // Allow json resolution 44 | json(), 45 | // Compile TypeScript files 46 | typescript({ 47 | useTsconfigDeclarationDir: true, 48 | exclude: ['**/__tests__/**', '*.spec.*', '*.test.*'], 49 | clean: true, 50 | }), 51 | // Allow node_modules resolution, so you can use 'external' to control 52 | // which external modules to include in the bundle 53 | // https://github.com/rollup/rollup-plugin-node-resolve#usage 54 | resolve(), 55 | // Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs) 56 | commonjs(), 57 | // Resolve source maps to the original source 58 | sourceMaps(), 59 | ], 60 | }; 61 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## [3.0.0](https://github.com/alioguzhan/react-typescript-library/compare/v2.0.0...v3.0.0) (2023-05-31) 4 | 5 | 6 | ### ⚠ BREAKING CHANGES 7 | 8 | * drop React 17 support 9 | * drop node 14 support 10 | 11 | ### Miscellaneous Chores 12 | 13 | * drop node 14 support ([68852c7](https://github.com/alioguzhan/react-typescript-library/commit/68852c72b946922bfdeb1c79c7f855862da2ab30)) 14 | * drop React 17 support ([c13347a](https://github.com/alioguzhan/react-typescript-library/commit/c13347ac78e5640c6442b782b63afd3f2e998c88)) 15 | 16 | ## [2.0.0](https://github.com/alioguzhan/react-typescript-library/compare/v1.0.0...v2.0.0) (2023-01-20) 17 | 18 | 19 | ### ⚠ BREAKING CHANGES 20 | 21 | * upgrade node engine minimum version to 14 22 | 23 | ### Features 24 | 25 | * create example app wth typescript template ([6cc5bea](https://github.com/alioguzhan/react-typescript-library/commit/6cc5bea0aa8eb09477ffb7c36dcf06a6b2e0a8e4)) 26 | 27 | 28 | ### Miscellaneous Chores 29 | 30 | * upgrade node engine minimum version to 14 ([2cdeb1e](https://github.com/alioguzhan/react-typescript-library/commit/2cdeb1ec3b902b9dbdf60cbf53b4ca884e90603f)) 31 | 32 | ## 1.0.0 (2022-09-06) 33 | 34 | 35 | ### Features 36 | 37 | * add github pages integration ([b7534eb](https://github.com/alioguzhan/react-typescript-library/commit/b7534eb9d2beaec95069c658674587173f8db2e2)) 38 | * generate customized README after installation ([68ca2c1](https://github.com/alioguzhan/react-typescript-library/commit/68ca2c11e37fb14487e2ffe55f3366d0290ed7ca)) 39 | * integrate release-please ([fe05370](https://github.com/alioguzhan/react-typescript-library/commit/fe0537037174620d6bba9bb60aa2aae03011fad3)) 40 | 41 | 42 | ### Bug Fixes 43 | 44 | * add jest-environment-jsdom for the new version of jest ([40eb502](https://github.com/alioguzhan/react-typescript-library/commit/40eb502a6aa6b00439514c3c1955a70385b34467)) 45 | * postcss integration is not working ([a510c71](https://github.com/alioguzhan/react-typescript-library/commit/a510c71577f5c5d8b803718704741aa131858876)) 46 | * update typedoc config ([72f30e7](https://github.com/alioguzhan/react-typescript-library/commit/72f30e726cc0986c1e1e17285b02e0449c7dbe49)) 47 | * upgrade deps to fix vulnerabilities ([bf40348](https://github.com/alioguzhan/react-typescript-library/commit/bf40348e29fa50f7ec578e5a76c9f4e8251065aa)) 48 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | react loves typescript 3 |
4 | 5 | # React Typescript Library Template 6 | 7 | A template to create a react component / library with Typescript. 8 | 9 | - React 10 | - Typescript 11 | - Rollup 12 | - Css Modules 13 | - Jest with code coverage report 14 | - `Typedoc` for API documentation 15 | - `commitlint` for conventional-commits 16 | - `Prettier` and `ESLint` integration with git hooks 17 | - Optional `example app` generation for testing 18 | - `Github Pages` integration 19 | - Release-Please workflow 20 | 21 | ## Install 22 | 23 | Clone the repository: 24 | 25 | ``` 26 | git clone --depth 1 git@github.com:alioguzhan/react-typescript-library.git 27 | ``` 28 | 29 | Rename the cloned folder to your library/component name: 30 | 31 | ``` 32 | mv react-typescript-library my-react-lib 33 | ``` 34 | 35 | Install the deps: 36 | 37 | ```bash 38 | cd my-react-lib 39 | yarn install 40 | ``` 41 | 42 | Once the installation is completed, A prompt will welcome you. Answer those questions and the installer will bootstrap the environment for you. 43 | 44 | > You can check if there are any outdated package with [npm-check-updates](https://www.npmjs.com/package/npm-check-updates) tool. 45 | 46 | ## Development 47 | 48 | Write your library code to `src/index.tsx` file and run: 49 | 50 | ``` 51 | yarn start 52 | ``` 53 | 54 | This will watch your changes and reloads the server. 55 | 56 | ### Commit Messages 57 | 58 | This setup expects you to follow conventional-commits format. There is a husky command runs before every commit for validation. 59 | 60 | To learn more about conventional commits see [its website](https://www.conventionalcommits.org/en/v1.0.0/). 61 | 62 | You can remove that section from `package.json` also remove the related package(s): 63 | 64 | ``` 65 | yarn remove -D @commitlint/cli 66 | ``` 67 | 68 | ## Build 69 | 70 | Run: 71 | 72 | ``` 73 | yarn build 74 | ``` 75 | 76 | This will create your compiled files under `./dist` folder. And generates a documentation with `TypeDoc` under `./docs` folder. 77 | 78 | ## Test 79 | 80 | Jest is configured and ready to use. Just run: 81 | 82 | ``` 83 | yarn test 84 | ``` 85 | 86 | ## Docs 87 | 88 | This template uses [TypeDoc](https://typedoc.org/) by default. 89 | 90 | Run `yarn make:docs` and a folder named `docs` will be created in your root directory. Just open `index.html` in your browser to see if your like it or not. 91 | 92 | ## CREDITS 93 | 94 | - Logo Design by [@fyunusyildiz](https://github.com/fyunusyildiz) 95 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Created by https://www.gitignore.io/api/node,macos,visualstudiocode 3 | # Edit at https://www.gitignore.io/?templates=node,macos,visualstudiocode 4 | 5 | ### macOS ### 6 | # General 7 | .DS_Store 8 | .AppleDouble 9 | .LSOverride 10 | 11 | # Icon must end with two \r 12 | Icon 13 | 14 | # Thumbnails 15 | ._* 16 | 17 | # Files that might appear in the root of a volume 18 | .DocumentRevisions-V100 19 | .fseventsd 20 | .Spotlight-V100 21 | .TemporaryItems 22 | .Trashes 23 | .VolumeIcon.icns 24 | .com.apple.timemachine.donotpresent 25 | 26 | # Directories potentially created on remote AFP share 27 | .AppleDB 28 | .AppleDesktop 29 | Network Trash Folder 30 | Temporary Items 31 | .apdisk 32 | 33 | ### Node ### 34 | # Logs 35 | logs 36 | *.log 37 | npm-debug.log* 38 | yarn-debug.log* 39 | yarn-error.log* 40 | lerna-debug.log* 41 | 42 | # Diagnostic reports (https://nodejs.org/api/report.html) 43 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 44 | 45 | # Runtime data 46 | pids 47 | *.pid 48 | *.seed 49 | *.pid.lock 50 | 51 | # Directory for instrumented libs generated by jscoverage/JSCover 52 | lib-cov 53 | 54 | # Coverage directory used by tools like istanbul 55 | coverage 56 | *.lcov 57 | 58 | # nyc test coverage 59 | .nyc_output 60 | 61 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 62 | .grunt 63 | 64 | # Bower dependency directory (https://bower.io/) 65 | bower_components 66 | 67 | # node-waf configuration 68 | .lock-wscript 69 | 70 | # Compiled binary addons (https://nodejs.org/api/addons.html) 71 | build/Release 72 | 73 | # Dependency directories 74 | node_modules/ 75 | jspm_packages/ 76 | 77 | # TypeScript v1 declaration files 78 | typings/ 79 | 80 | # TypeScript cache 81 | *.tsbuildinfo 82 | 83 | # Optional npm cache directory 84 | .npm 85 | 86 | # Optional eslint cache 87 | .eslintcache 88 | 89 | # Optional REPL history 90 | .node_repl_history 91 | 92 | # Output of 'npm pack' 93 | *.tgz 94 | 95 | # Yarn Integrity file 96 | .yarn-integrity 97 | 98 | # dotenv environment variables file 99 | .env 100 | .env.test 101 | 102 | # parcel-bundler cache (https://parceljs.org/) 103 | .cache 104 | 105 | # next.js build output 106 | .next 107 | 108 | # nuxt.js build output 109 | .nuxt 110 | 111 | # react / gatsby 112 | public/ 113 | 114 | # vuepress build output 115 | .vuepress/dist 116 | 117 | # Serverless directories 118 | .serverless/ 119 | 120 | # FuseBox cache 121 | .fusebox/ 122 | 123 | # DynamoDB Local files 124 | .dynamodb/ 125 | 126 | ### VisualStudioCode ### 127 | .vscode 128 | ### VisualStudioCode Patch ### 129 | # Ignore all local history of files 130 | .history 131 | 132 | docs/ 133 | dist/ 134 | # End of https://www.gitignore.io/api/node,macos,visualstudiocode 135 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "--libraryname--", 3 | "version": "3.0.0", 4 | "keywords": [], 5 | "description": "", 6 | "main": "dist/index.min.js", 7 | "module": "dist/index.es.js", 8 | "types": "dist/index.d.ts", 9 | "files": [ 10 | "dist" 11 | ], 12 | "author": "--username-- <--usermail-->", 13 | "repository": { 14 | "url": "", 15 | "type": "git" 16 | }, 17 | "homepage": "", 18 | "license": "MIT", 19 | "private": true, 20 | "scripts": { 21 | "start": "rollup -c rollup.config.js -w", 22 | "build": "tsc && rollup -c rollup.config.js && yarn make:docs", 23 | "make:docs": "typedoc", 24 | "coverage": "codecov -e TRAVIS_NODE_VERSION -f coverage/*.json", 25 | "test": "jest --coverage", 26 | "test:watch": "jest --coverage --watch", 27 | "test:ci": "cross-env CI=1 jest", 28 | "predeploy": "cd example && yarn install && yarn run build", 29 | "deploy": "gh-pages -d example/build", 30 | "postinstall": "ts-node tools/init", 31 | "prepare": "husky install" 32 | }, 33 | "engines": { 34 | "node": ">=16" 35 | }, 36 | "peerDependencies": { 37 | "react": ">=18", 38 | "react-dom": ">=18" 39 | }, 40 | "devDependencies": { 41 | "@commitlint/cli": "^17.6.5", 42 | "@commitlint/config-conventional": "^17.6.5", 43 | "@rollup/plugin-commonjs": "^25.0.0", 44 | "@rollup/plugin-json": "^6.0.0", 45 | "@rollup/plugin-node-resolve": "^15.1.0", 46 | "@testing-library/jest-dom": "^5.16.5", 47 | "@testing-library/react": "^14.0.0", 48 | "@types/jest": "^29.5.1", 49 | "@types/node": "^20.2.5", 50 | "@types/react": "^18.2.7", 51 | "@types/react-dom": "^18.2.4", 52 | "@types/shelljs": "^0.8.12", 53 | "@typescript-eslint/eslint-plugin": "^5.59.8", 54 | "@typescript-eslint/parser": "^5.59.8", 55 | "colors": "^1.4.0", 56 | "cross-env": "^7.0.3", 57 | "enquirer": "^2.3.6", 58 | "eslint": "^8.41.0", 59 | "eslint-config-prettier": "^8.8.0", 60 | "eslint-config-standard": "^17.1.0", 61 | "eslint-plugin-import": "^2.27.5", 62 | "eslint-plugin-n": "^16.0.0", 63 | "eslint-plugin-prettier": "^4.2.1", 64 | "eslint-plugin-promise": "^6.1.1", 65 | "eslint-plugin-react": "^7.32.2", 66 | "eslint-plugin-react-hooks": "^4.6.0", 67 | "eslint-plugin-standard": "^5.0.0", 68 | "gh-pages": "^5.0.0", 69 | "husky": "^8.0.3", 70 | "identity-obj-proxy": "^3.0.0", 71 | "jest": "^29.5.0", 72 | "jest-environment-jsdom": "^29.5.0", 73 | "lint-staged": "^13.2.2", 74 | "postcss": "^8.4.31", 75 | "prettier": "^2.8.8", 76 | "prompt": "^1.3.0", 77 | "react": "^18.2.0", 78 | "react-dom": "^18.2.0", 79 | "replace-in-file": "^7.0.1", 80 | "rollup": "^3.23.0", 81 | "rollup-plugin-peer-deps-external": "^2.2.4", 82 | "rollup-plugin-postcss": "^4.0.2", 83 | "rollup-plugin-sourcemaps": "^0.6.3", 84 | "rollup-plugin-terser": "^7.0.2", 85 | "rollup-plugin-typescript2": "^0.34.1", 86 | "shelljs": "^0.8.5", 87 | "ts-jest": "^29.1.0", 88 | "ts-node": "^10.9.1", 89 | "typedoc": "^0.24.7", 90 | "typescript": "^5.0.4" 91 | }, 92 | "lint-staged": { 93 | "src/**/*.{ts,tsx}": [ 94 | "./node_modules/.bin/prettier --write", 95 | "./node_modules/.bin/eslint" 96 | ] 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at --usermail--. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | 77 | -------------------------------------------------------------------------------- /tools/init.ts: -------------------------------------------------------------------------------- 1 | import { cyan, green, red, underline, yellow } from 'colors'; 2 | import enquirer from 'enquirer'; 3 | import { readFileSync, writeFileSync } from 'fs'; 4 | import { basename, resolve } from 'path'; 5 | import replace from 'replace-in-file'; 6 | import shell from 'shelljs'; 7 | 8 | // eslint-disable-next-line dot-notation 9 | if (process.env['RTL_SKIP_POSTINSTALL']) { 10 | console.log('⚠ Skipping post-install process...'); 11 | process.exit(0); 12 | } 13 | 14 | // Note: These should all be relative to the project root directory 15 | const rmDirs = ['.git', 'tools', 'CHANGELOG.md']; 16 | const rmFiles = ['.all-contributorsrc', '.gitattributes']; 17 | const modifyFiles = [ 18 | 'LICENSE', 19 | 'package.json', 20 | 'README.md', 21 | 'CODE_OF_CONDUCT.md', 22 | 'shell.nix', 23 | '.github/workflows/release-please.yml', 24 | ]; 25 | 26 | // ----------------- // 27 | 28 | function isInstalled(program: string) { 29 | return shell.which(program); 30 | } 31 | 32 | function checkEnv() { 33 | if (!isInstalled('node')) { 34 | console.log('node.js is not installed'); 35 | process.exit(1); 36 | } 37 | 38 | if (!isInstalled('npm')) { 39 | console.log('npm is not installed'); 40 | process.exit(1); 41 | } 42 | if (!isInstalled('git')) { 43 | console.log('git is not installed'); 44 | process.exit(1); 45 | } 46 | 47 | if (!isInstalled('yarn')) { 48 | console.log('yarn is not installed'); 49 | process.exit(1); 50 | } 51 | 52 | console.log('🧰 Env Info:'); 53 | console.log('------------'); 54 | shell.exec('git --version'); 55 | shell.exec('echo node Version: $(node -v)'); 56 | shell.exec('echo npm version: $(npm --version)'); 57 | shell.exec('echo yarn version: $(yarn --version)'); 58 | console.log('------------\n'); 59 | } 60 | 61 | function getSuggestedLibraryName() { 62 | return basename(resolve(__dirname, '..')) 63 | .replace(/[^\w\d]|_/g, '-') 64 | .replace(/^-+|-+$/g, '') 65 | .toLowerCase(); 66 | } 67 | // ----------------- // 68 | 69 | const questions = [ 70 | { 71 | type: 'input', 72 | name: 'libraryName', 73 | message: 'What is the name of your library?', 74 | initial: getSuggestedLibraryName(), 75 | }, 76 | { 77 | type: 'confirm', 78 | name: 'installExampleApp', 79 | message: 80 | 'Would you like to generate an example react app to test your library/component?', 81 | initial: true, 82 | }, 83 | ]; 84 | 85 | // ----------------- Program starts here -------------- // 86 | (async () => { 87 | console.log('🎉 Welcome to react-typescript-library generator!\n'); 88 | checkEnv(); 89 | const response = await enquirer.prompt(questions).catch(() => { 90 | console.log('Cancelled. Bye!'); 91 | process.exit(0); 92 | }); 93 | const { libraryName, installExampleApp } = response; 94 | if (!libraryName) { 95 | console.log('Cancelled. Bye!'); 96 | process.exit(0); 97 | } 98 | 99 | console.log( 100 | cyan( 101 | '\nThanks for the info. The last few changes are being made... hang tight!\n\n' 102 | ) 103 | ); 104 | 105 | // Get the Git username and email before the .git directory is removed 106 | const username = shell.exec('git config user.name').toString().trim(); 107 | const usermail = shell.exec('git config user.email').toString().trim(); 108 | 109 | if (installExampleApp) { 110 | yellow('Installing the test application into example/ directory...'); 111 | shell.exec('yarn create react-app --template=typescript example'); 112 | shell.exec('echo "SKIP_PREFLIGHT_CHECK=true" >> example/.env'); 113 | } 114 | shell.exec('mv tools/README.md README.md'); 115 | console.log(underline.white('Removed')); 116 | 117 | // The directories and files are combined here, to simplify the function, 118 | // as the 'rm' command checks the item type before attempting to remove it 119 | const rmItems = rmDirs.concat(rmFiles); 120 | 121 | shell.rm( 122 | '-rf', 123 | rmItems.map((f) => resolve(__dirname, '..', f)) 124 | ); 125 | 126 | console.log(red(rmItems.join('\n'))); 127 | console.log('\n'); 128 | 129 | const files = ['.gitignore'].map((f) => resolve(__dirname, '..', f)); 130 | replace.sync({ 131 | files, 132 | from: ['dist/', 'docs/'], 133 | to: '', 134 | }); 135 | 136 | console.log(underline.white('Modified')); 137 | 138 | const mFiles = modifyFiles.map((f) => resolve(__dirname, '..', f)); 139 | try { 140 | replace.sync({ 141 | files: mFiles, 142 | from: [ 143 | /--libraryname--/g, 144 | /--username--/g, 145 | /--usermail--/g, 146 | /--currentYear--/g, 147 | ], 148 | to: [libraryName, username, usermail, new Date().getFullYear()], 149 | }); 150 | console.log(yellow(modifyFiles.join('\n'))); 151 | } catch (error) { 152 | console.error('An error occurred modifying the file: ', error); 153 | } 154 | console.log('\n'); 155 | 156 | if (installExampleApp) { 157 | console.log(yellow('Linking packages to the example app...')); 158 | shell.exec( 159 | 'cd example && yarn add link:.. link:../node_modules/react link:../node_modules/react-dom && cd ..' 160 | ); 161 | } 162 | 163 | console.log(underline.white('Finalizing')); 164 | 165 | // Recreate Git folder 166 | const gitInitOutput = shell 167 | .exec('git init "' + resolve(__dirname, '..') + '"', {}) 168 | .toString(); 169 | console.log(green(gitInitOutput.replace(/(\n|\r)+/g, ''))); 170 | 171 | // Remove post-install command 172 | const jsonPackage = resolve(__dirname, '..', 'package.json'); 173 | const pkg = JSON.parse(readFileSync(jsonPackage) as any); 174 | 175 | // Note: Add items to remove from the package file here 176 | delete pkg.scripts.postinstall; 177 | 178 | // remove the dependencies that are required for the bootstrapping. 179 | [ 180 | '@types/shelljs', 181 | 'colors', 182 | 'enquirer', 183 | 'prompt', 184 | 'replace-in-file', 185 | 'shelljs', 186 | 'ts-node', 187 | ].forEach((dep) => { 188 | delete pkg.devDependencies[dep]; 189 | }); 190 | 191 | pkg.version = '0.1.0'; 192 | 193 | writeFileSync(jsonPackage, JSON.stringify(pkg, null, 2)); 194 | console.log(green('Postinstall script has been removed')); 195 | 196 | console.log(yellow('Removing yarn.lock and performing a clean install...')); 197 | shell.rm('yarn.lock && rm -rf node_modules && yarn install && yarn build'); 198 | console.log('\n'); 199 | shell.exec("git add . && git commit -am 'chore: init' --no-verify"); 200 | console.log('\n'); 201 | console.log(cyan("OK, you're all set. Happy coding!! ;)\n")); 202 | })(); 203 | --------------------------------------------------------------------------------