Skip to content

Commit dc547c1

Browse files
jafinjafin
committed
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)
1 parent 89429a9 commit dc547c1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+32443
-23035
lines changed

‎.babelrc

+18-8
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
11
{
2+
"env": {
3+
"test": {
4+
"presets": [
5+
"@babel/preset-env",
6+
"@babel/preset-typescript",
7+
["@babel/preset-react", { "runtime": "automatic" }]
8+
],
9+
"plugins": []
10+
}
11+
},
212
"plugins": [
313
["@babel/plugin-proposal-decorators", { "legacy": true }],
414
"@babel/plugin-syntax-dynamic-import",
@@ -7,13 +17,13 @@
717
"@babel/plugin-proposal-json-strings"
818
],
919
"presets": [
10-
[
11-
"@babel/preset-env",
12-
{
13-
"useBuiltIns": "entry",
14-
"corejs": "3.12"
15-
}
16-
],
17-
"@babel/preset-react"
20+
[
21+
"@babel/preset-env",
22+
{
23+
"useBuiltIns": "entry",
24+
"corejs": "3.21"
25+
}
26+
],
27+
"@babel/preset-react"
1828
]
1929
}

‎.eslintrc

+57-47
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,57 @@
1-
{
2-
"parser": "babel-eslint",
3-
"extends": ["standard", "standard-react", "prettier", "eslint:recommended"],
4-
"env": {
5-
"es6": true,
6-
"jest": true
7-
},
8-
"plugins": ["react", "prettier"],
9-
"parserOptions": {
10-
"sourceType": "module",
11-
"ecmaVersion": 2018,
12-
"ecmaFeatures": {
13-
"impliedStrict": true,
14-
"jsx": true,
15-
"arrowFunctions": true,
16-
"blockBindings": true,
17-
"defaultParams": true,
18-
"destructuring": true,
19-
"forOf": true,
20-
"generators": true,
21-
"objectLiteralComputedProperties": true,
22-
"objectLiteralShorthandMethods": true,
23-
"objectLiteralShorthandProperties": true,
24-
"experimentalObjectRestSpread": true,
25-
"restParams": true,
26-
"spread": true,
27-
"templateStrings": true,
28-
"modules": true,
29-
"classes": true
30-
}
31-
},
32-
"rules": {
33-
"react/jsx-no-bind": "off",
34-
"space-before-function-paren": 0,
35-
"react/jsx-boolean-value": 0,
36-
"max-len": [2, { "code": 120, "ignoreComments": true }],
37-
"newline-per-chained-call": 0,
38-
"no-trailing-spaces": ["error"],
39-
"quotes": ["error", "single", { "avoidEscape": true }],
40-
"comma-dangle": ["error", "never"],
41-
"no-template-curly-in-string": "off",
42-
"semi": ["error", "always"],
43-
"object-curly-spacing": ["error", "always"],
44-
"quote-props": ["error", "consistent"],
45-
"no-var": ["error"]
46-
}
47-
}
1+
{
2+
"parser": "@typescript-eslint/parser",
3+
"settings": {
4+
"react": {
5+
"version": "detect"
6+
}
7+
},
8+
"extends": [
9+
// "standard",
10+
"eslint:recommended",
11+
"plugin:@typescript-eslint/recommended",
12+
"plugin:react/recommended"
13+
],
14+
"env": {
15+
//error with "es2021": true
16+
"es6": true,
17+
"jest": true,
18+
"node": true,
19+
"browser": true
20+
},
21+
"plugins": ["@typescript-eslint", "react", "react-hooks"],
22+
"parserOptions": {
23+
"ecmaVersion": 12,
24+
"sourceType": "module",
25+
"requireConfigFile": false,
26+
"ecmaFeatures": {
27+
"jsx": true
28+
}
29+
},
30+
"rules": {
31+
"react/jsx-uses-react": "off",
32+
"react/react-in-jsx-scope": "off",
33+
"react/prop-types": "off",
34+
"react-hooks/rules-of-hooks": "error",
35+
"react-hooks/exhaustive-deps": "warn",
36+
"@typescript-eslint/explicit-module-boundary-types": "off",
37+
"react/jsx-no-bind": [
38+
"warn",
39+
{
40+
"ignoreRefs": true
41+
}
42+
],
43+
"space-before-function-paren": 0,
44+
"react/jsx-boolean-value": 0,
45+
"max-len": [2, { "code": 120, "ignoreComments": true }],
46+
"newline-per-chained-call": 0,
47+
"no-trailing-spaces": ["error"],
48+
"quotes": ["error", "single", { "avoidEscape": true }],
49+
"comma-dangle": ["error", "never"],
50+
"no-template-curly-in-string": "off",
51+
"semi": ["error", "always"],
52+
"object-curly-spacing": ["error", "always"],
53+
"quote-props": ["error", "consistent"],
54+
"no-var": ["error"],
55+
"indent": "off"
56+
}
57+
}

‎.github/workflows/node.js.yml

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# 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
2+
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
3+
4+
name: Node.js CI
5+
6+
on:
7+
push:
8+
branches: [master, wip/react-18]
9+
pull_request:
10+
branches: [master]
11+
12+
jobs:
13+
build:
14+
runs-on: ubuntu-latest
15+
16+
strategy:
17+
matrix:
18+
node-version: [16.x]
19+
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
20+
21+
steps:
22+
- uses: actions/checkout@v3
23+
- name: Use Node.js ${{ matrix.node-version }}
24+
uses: actions/setup-node@v3
25+
with:
26+
node-version: ${{ matrix.node-version }}
27+
cache: 'yarn'
28+
- run: yarn install
29+
- run: yarn test
30+
- name: Semantic release
31+
uses: cycjimmy/semantic-release-action@v3
32+
env:
33+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
34+
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

‎.gitignore

+11
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,14 @@
1212
node_modules/
1313
dist/
1414
build/
15+
/out-tsc/**
16+
17+
# yarn
18+
.pnp.*
19+
.yarn/*
20+
!.yarn/patches
21+
!.yarn/plugins
22+
!.yarn/releases
23+
!.yarn/sdks
24+
!.yarn/versions
25+
/example/.yarn/*

‎.husky/commit-msg

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#!/bin/sh
2+
. "$(dirname "$0")/_/husky.sh"
3+
4+
yarn commitlint --edit $1

‎.husky/pre-commit

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#!/bin/sh
2+
. "$(dirname "$0")/_/husky.sh"
3+
4+
yarn pretest

‎.mocharc.jsonc

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
// Specify "require" for CommonJS
3+
"require": "ts-node/register",
4+
// Specify "loader" for native ESM
5+
"loader": "ts-node/esm",
6+
"extensions": ["ts", "tsx"],
7+
"spec": ["test/**/*.spec.*"],
8+
"watch-files": ["src"]
9+
}

‎.prettierrc.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
// prettier.config.js or .prettierrc.js
22
module.exports = {
33
singleQuote: true,
4-
trailingComma: "none",
4+
trailingComma: 'none',
55
tabWidth: 2,
66
printWidth: 80,
77
semi: true,
88
bracketSpacing: true,
9-
jsxBracketSameLine: false,
10-
endOfLine: "lf"
9+
endOfLine: 'lf'
1110
};

‎.releaserc.json

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"plugins": [
3+
"@semantic-release/commit-analyzer",
4+
"@semantic-release/release-notes-generator",
5+
"@semantic-release/changelog",
6+
"@semantic-release/npm",
7+
"@semantic-release/git"
8+
],
9+
"ci": true,
10+
"debug": true
11+
}

‎.stylelintrc.json

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
2-
"extends": "stylelint-config-standard",
3-
"ignoreFiles": [
4-
"src/decorators/*.js"
5-
]
2+
"extends": "stylelint-config-standard-scss",
3+
"ignoreFiles": ["src/decorators/*.js", "src/*.jsx", "**/*.js"],
4+
"rules": {
5+
"selector-class-pattern": null
6+
}
67
}

‎.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs

+546
Large diffs are not rendered by default.

‎.yarn/releases/yarn-3.2.0.cjs

+785
Large diffs are not rendered by default.

‎.yarnrc.yml

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
nodeLinker: node-modules
2+
3+
plugins:
4+
- path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
5+
spec: '@yarnpkg/plugin-interactive-tools'
6+
7+
yarnPath: .yarn/releases/yarn-3.2.0.cjs

‎README.md

+7-5
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ Notes:
8484
| padding | data-padding | String | e.g. `8px 21px` | Popup padding style |
8585
| multiline | data-multiline | Bool | true, false | support `<br>`, `<br />` to make multiline |
8686
| className | data-class | String | | extra custom class, can use !important to overwrite react-tooltip's default class |
87-
| 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. |
87+
| 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. |
8888
| delayHide | data-delay-hide | Number | | `<p data-tip="tooltip" data-delay-hide='1000'></p>` or `<ReactTooltip delayHide={1000} />` |
8989
| delayShow | data-delay-show | Number | | `<p data-tip="tooltip" data-delay-show='1000'></p>` or `<ReactTooltip delayShow={1000} />` |
9090
| 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:
109109
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.
110110

111111
#### JSX Note
112+
112113
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}`.
113114
**Example:**
115+
114116
```jsx
115117
import ReactDOMServer from 'react-dom/server';
116118
[...]
@@ -186,22 +188,22 @@ Same for empty children, if you don't want show the tooltip when the children is
186188

187189
### 3. Tooltip not binding to dynamic content
188190

189-
When you render `<ReactTooltip>` ahead of dynamic content, and are using `data-for={id}` attributes
190-
on new dynamic content, the tooltip will not register its event listener.
191+
When you render `<ReactTooltip>` ahead of dynamic content, and are using `data-for={id}` attributes
192+
on new dynamic content, the tooltip will not register its event listener.
191193

192194
For example, you render a generic tooltip in the root of your app, then load a list of content async.
193195
Elements in the list use the `data-for={id}` attribute to bind the tooltip on hover.
194196
Since the tooltip has already scanned for data-tip these new elements will not trigger.
195197

196-
One workaround for this is to trigger `ReactTooltip.rebuild()` after the data load to scan for the attribute again,
198+
One workaround for this is to trigger `ReactTooltip.rebuild()` after the data load to scan for the attribute again,
197199
to allow event wireup.
198200

199201
#### Example
200202

201203
```jsx
202204
<app>
203205
<ReactTooltip id="foo" />
204-
<list/>
206+
<list />
205207
</app>
206208
```
207209

‎bower.json

-33
This file was deleted.

‎commitlint.config.js

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

‎example/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="src/favicon.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite React TypeScript Tailwind Starter</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/index.tsx"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)