feat: convert to typescript

* replace mocha with jest * example updated to run in vite * update packages * Add example for padding to docs * remove decorators back into main class (due to issues with typescript conversion)
jafin · Apr 3, 2022 · dc547c1 · dc547c1
1 parent 89429a9
commit dc547c1
Show file tree

Hide file tree

Showing 53 changed files with 32,443 additions and 23,035 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,4 +1,14 @@
 {
+  "env": {
+    "test": {
+      "presets": [
+        "@babel/preset-env",
+        "@babel/preset-typescript",
+        ["@babel/preset-react", { "runtime": "automatic" }]
+      ],
+      "plugins": []
+    }
+  },
   "plugins": [
     ["@babel/plugin-proposal-decorators", { "legacy": true }],
     "@babel/plugin-syntax-dynamic-import",
@@ -7,13 +17,13 @@
     "@babel/plugin-proposal-json-strings"
   ],
   "presets": [
-      [
-        "@babel/preset-env",
-        {
-          "useBuiltIns": "entry",
-          "corejs": "3.12"
-        }
-      ],
-      "@babel/preset-react"
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "entry",
+        "corejs": "3.21"
+      }
+    ],
+    "@babel/preset-react"
   ]
 }
diff --git a/.eslintrc b/.eslintrc
@@ -1,47 +1,57 @@
-{
-  "parser": "babel-eslint",
-  "extends": ["standard", "standard-react", "prettier", "eslint:recommended"],
-  "env": {
-    "es6": true,
-    "jest": true
-  },
-  "plugins": ["react", "prettier"],
-  "parserOptions": {
-    "sourceType": "module",
-    "ecmaVersion": 2018,
-    "ecmaFeatures": {
-      "impliedStrict": true,
-      "jsx": true,
-      "arrowFunctions": true,
-      "blockBindings": true,
-      "defaultParams": true,
-      "destructuring": true,
-      "forOf": true,
-      "generators": true,
-      "objectLiteralComputedProperties": true,
-      "objectLiteralShorthandMethods": true,
-      "objectLiteralShorthandProperties": true,
-      "experimentalObjectRestSpread": true,
-      "restParams": true,
-      "spread": true,
-      "templateStrings": true,
-      "modules": true,
-      "classes": true
-    }
-  },
-  "rules": {
-    "react/jsx-no-bind": "off",
-    "space-before-function-paren": 0,
-    "react/jsx-boolean-value": 0,
-    "max-len": [2, { "code": 120, "ignoreComments": true }],
-    "newline-per-chained-call": 0,
-    "no-trailing-spaces": ["error"],
-    "quotes": ["error", "single", { "avoidEscape": true }],
-    "comma-dangle": ["error", "never"],
-    "no-template-curly-in-string": "off",
-    "semi": ["error", "always"],
-    "object-curly-spacing": ["error", "always"],
-    "quote-props": ["error", "consistent"],
-    "no-var": ["error"]
-  }
-}
+{
+  "parser": "@typescript-eslint/parser",
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "extends": [
+    // "standard",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended"
+  ],
+  "env": {
+    //error with "es2021": true
+    "es6": true,
+    "jest": true,
+    "node": true,
+    "browser": true
+  },
+  "plugins": ["@typescript-eslint", "react", "react-hooks"],
+  "parserOptions": {
+    "ecmaVersion": 12,
+    "sourceType": "module",
+    "requireConfigFile": false,
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "rules": {
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "react/jsx-no-bind": [
+      "warn",
+      {
+        "ignoreRefs": true
+      }
+    ],
+    "space-before-function-paren": 0,
+    "react/jsx-boolean-value": 0,
+    "max-len": [2, { "code": 120, "ignoreComments": true }],
+    "newline-per-chained-call": 0,
+    "no-trailing-spaces": ["error"],
+    "quotes": ["error", "single", { "avoidEscape": true }],
+    "comma-dangle": ["error", "never"],
+    "no-template-curly-in-string": "off",
+    "semi": ["error", "always"],
+    "object-curly-spacing": ["error", "always"],
+    "quote-props": ["error", "consistent"],
+    "no-var": ["error"],
+    "indent": "off"
+  }
+}
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
@@ -0,0 +1,34 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [master, wip/react-18]
+  pull_request:
+    branches: [master]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'yarn'
+      - run: yarn install
+      - run: yarn test
+      - name: Semantic release
+        uses: cycjimmy/semantic-release-action@v3
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.gitignore b/.gitignore
@@ -12,3 +12,14 @@
 node_modules/
 dist/
 build/
+/out-tsc/**
+
+# yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+/example/.yarn/*
diff --git a/.husky/commit-msg b/.husky/commit-msg
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn commitlint --edit $1
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn pretest
diff --git a/.mocharc.jsonc b/.mocharc.jsonc
@@ -0,0 +1,9 @@
+{
+  // Specify "require" for CommonJS
+  "require": "ts-node/register",
+  // Specify "loader" for native ESM
+  "loader": "ts-node/esm",
+  "extensions": ["ts", "tsx"],
+  "spec": ["test/**/*.spec.*"],
+  "watch-files": ["src"]
+}
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -1,11 +1,10 @@
 // prettier.config.js or .prettierrc.js
 module.exports = {
   singleQuote: true,
-  trailingComma: "none",
+  trailingComma: 'none',
   tabWidth: 2,
   printWidth: 80,
   semi: true,
   bracketSpacing: true,
-  jsxBracketSameLine: false,
-  endOfLine: "lf"
+  endOfLine: 'lf'
 };
diff --git a/.releaserc.json b/.releaserc.json
@@ -0,0 +1,11 @@
+{
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/changelog",
+    "@semantic-release/npm",
+    "@semantic-release/git"
+  ],
+  "ci": true,
+  "debug": true
+}
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -1,6 +1,7 @@
 {
-  "extends": "stylelint-config-standard",
-  "ignoreFiles": [
-  	"src/decorators/*.js"
-  ]
+  "extends": "stylelint-config-standard-scss",
+  "ignoreFiles": ["src/decorators/*.js", "src/*.jsx", "**/*.js"],
+  "rules": {
+    "selector-class-pattern": null
+  }
 }
diff --git a/.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs b/.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
diff --git a/.yarn/releases/yarn-3.2.0.cjs b/.yarn/releases/yarn-3.2.0.cjs
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -0,0 +1,7 @@
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: '@yarnpkg/plugin-interactive-tools'
+
+yarnPath: .yarn/releases/yarn-3.2.0.cjs
diff --git a/README.md b/README.md
@@ -84,7 +84,7 @@ Notes:
 | padding          | data-padding          | String        | e.g. `8px 21px`                                                                                                                       | Popup padding style                                                                                                                                                                                 |
 | multiline        | data-multiline        | Bool          | true, false                                                                                                                           | support `<br>`, `<br />` to make multiline                                                                                                                                                          |
 | className        | data-class            | String        |                                                                                                                                       | extra custom class, can use !important to overwrite react-tooltip's default class                                                                                                                   |
-| html             | data-html             | Bool          | true, false                                                                                                                           | `<p data-tip="<p>HTML tooltip</p>" data-html={true}></p>` or `<ReactTooltip html={true} />`, but see [Security Note](#security-note) below.<br/>When using JSX, see [this note](#jsx-note) below.                                                        |
+| html             | data-html             | Bool          | true, false                                                                                                                           | `<p data-tip="<p>HTML tooltip</p>" data-html={true}></p>` or `<ReactTooltip html={true} />`, but see [Security Note](#security-note) below.<br/>When using JSX, see [this note](#jsx-note) below.   |
 | delayHide        | data-delay-hide       | Number        |                                                                                                                                       | `<p data-tip="tooltip" data-delay-hide='1000'></p>` or `<ReactTooltip delayHide={1000} />`                                                                                                          |
 | delayShow        | data-delay-show       | Number        |                                                                                                                                       | `<p data-tip="tooltip" data-delay-show='1000'></p>` or `<ReactTooltip delayShow={1000} />`                                                                                                          |
 | delayUpdate      | data-delay-update     | Number        |                                                                                                                                       | `<p data-tip="tooltip" data-delay-update='1000'></p>` or `<ReactTooltip delayUpdate={1000} />` Sets a delay in calling getContent if the tooltip is already shown and you mouse over another target |
@@ -109,8 +109,10 @@ Notes:
 The `html` option allows a tooltip to directly display raw HTML. This is a security risk if any of that content is supplied by the user. Any user-supplied content must be sanitized, using a package like [sanitize-html](https://www.npmjs.com/package/sanitize-html). We chose not to include sanitization after discovering it [increased our package size](https://github.com/wwayne/react-tooltip/issues/429) too much - we don't want to penalize people who don't use the `html` option.
 
 #### JSX Note
+
 You can use React's [`renderToStaticMarkup`-function](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup) to use JSX instead of HTML. You still need to set `data-html={true}`.
 **Example:**
+
 ```jsx
 import ReactDOMServer from 'react-dom/server';
 [...]
@@ -186,22 +188,22 @@ Same for empty children, if you don't want show the tooltip when the children is
 
 ### 3. Tooltip not binding to dynamic content
 
-When you render `<ReactTooltip>` ahead of dynamic content, and are using `data-for={id}` attributes 
-on new dynamic content, the tooltip will not register its event listener.  
+When you render `<ReactTooltip>` ahead of dynamic content, and are using `data-for={id}` attributes
+on new dynamic content, the tooltip will not register its event listener.
 
 For example, you render a generic tooltip in the root of your app, then load a list of content async.
 Elements in the list use the `data-for={id}` attribute to bind the tooltip on hover.
 Since the tooltip has already scanned for data-tip these new elements will not trigger.
 
-One workaround for this is to trigger `ReactTooltip.rebuild()` after the data load to scan for the attribute again, 
+One workaround for this is to trigger `ReactTooltip.rebuild()` after the data load to scan for the attribute again,
 to allow event wireup.
 
 #### Example
 
 ```jsx
 <app>
   <ReactTooltip id="foo" />
-  <list/>
+  <list />
 </app>
 ```
 

diff --git a/bower.json b/bower.json
diff --git a/commitlint.config.js b/commitlint.config.js
@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] };
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite React TypeScript Tailwind Starter</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>