Merge pull request #288 from beautifulinteractions/feature/v1

Typescript rewrite (version 1.0.0)
antonioru · Aug 27, 2021 · 4eb3e37 · 4eb3e37
2 parents 271dc64 + 6f31a70
commit 4eb3e37
Show file tree

Hide file tree

Showing 145 changed files with 2,077 additions and 2,303 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.eslintignore b/.eslintignore
@@ -2,4 +2,3 @@
 /docs
 /test
 /docs
-index.d.ts
diff --git a/.eslintrc b/.eslintrc
@@ -1,16 +1,28 @@
 {
-  "extends": "airbnb",
-  "parser": "babel-eslint",
-  "plugins": ["chai-expect", "react-hooks"],
+  "extends": [
+    "airbnb-base",
+    "airbnb-typescript"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "project": "./tsconfig.esm.json"
+  },
+  "plugins": [
+    "chai-expect",
+    "react-hooks"
+  ],
   "env": {
     "browser": true,
     "mocha": true
   },
   "rules": {
-    "max-len": ["error", { "code": 120 }],
+    "max-len": ["error", {"code": 140}],
+    "semi": [2, "never"],
+    "@typescript-eslint/semi": "off",
     "linebreak-style": "off",
     "object-curly-newline": "off",
-    "react/jsx-filename-extension": [1, { "extensions": [ ".js", ".jsx" ] } ]
+    "react/jsx-filename-extension": "off"
   },
   "overrides": [
     {

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -17,7 +17,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 14
           registry-url: https://registry.npmjs.org/
 
       - name: NPM CI
@@ -45,7 +45,7 @@ jobs:
           github-token: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Prepare distribution
-        run: cp package.json index.d.ts README.md LICENSE CHANGELOG.md CONTRIBUTING.md CODE_OF_CONDUCT.md ./dist
+        run: cp package.json README.md LICENSE CHANGELOG.md CONTRIBUTING.md CODE_OF_CONDUCT.md ./dist
 
       - name: Publish
         run: |

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -725,3 +725,9 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 ### Added
 
 - `useSwipeEvents` exports`onSwipeEnd`,`onSwipeStart`
+
+## [1.0.0] - 2021-08-27
+
+### Change
+
+- Complete typescript rewrite
diff --git a/README.md b/README.md
@@ -48,8 +48,6 @@ to keep the learning curve as lower as possible so that the it can be used and s
 * Concise API
 * Small and lightweight
 * Easy to learn
-* Functional approach
-* Fully written in JS (although TS types are supported)
 
 <div>
   <p align="center">
@@ -134,21 +132,6 @@ To submit your custom hook, please make sure your read our [CONTRIBUTING](./CONT
 * [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro)
 * [@testing-library/react-hooks](https://react-hooks-testing-library.com/)
 
-
-### Credits
-
-This library is provided and sponsored by:
-
-<div>
-  <p>
-    <a href="https://beautifulinteractions.com/">
-      <img src="https://beautifulinteractions.com/img/logo-colorful.svg" alt="Beautiful interactions" width="140px" />
-    </a>
-  </p>
-</div>
-
-As part of our commitment to support and contribute to the open source community.
-
 ---
 
 Icon made by [Freepik](https://www.flaticon.com/authors/freepik) from [www.flaticon.com](https://www.flaticon.com/free-icon/hook_1081812)
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@babel/react', '@babel/env']
+}
diff --git a/docs/Installation.md b/docs/Installation.md
@@ -1,18 +1,20 @@
 # Getting started
 
-
 Using `npm`:
+
 ```bash
 $ npm i --save beautiful-react-hooks
 ```
 
 Using `yarn`:
+
 ```bash 
 $ yarn add beautiful-react-hooks
 ```
 
 then just import any hook described by the documentation in your React component file:
 
-```js
-import { useSomeHook } from 'beautiful-react-hooks';
-```
+```ts static
+import { useSomeHook } from 'beautiful-react-hooks'
+import useSomeHook from 'beautiful-react-hoks/useSomeHook'
+```
diff --git a/docs/Introduction.md b/docs/Introduction.md
@@ -10,33 +10,18 @@ components and hooks development.
 
 ## 💡 Why? 
 
-React custom hooks allow to abstract components' business logic into single reusable functions.<br />
+React custom hooks allow abstracting components' business logic into single reusable functions.<br />
 So far, I've found that most of the hooks I've created and therefore shared between my projects have quite often a 
 similar gist that involves callback references, events and components' lifecycle. <br />
 For this reason I've tried to sum up that gist into `beautiful-react-hooks`: a collection of (*hopefully*) useful 
 React hooks to possibly help other developers to speed up their development process.<br /><br />
 Furthermore, I've tried to create a concise yet concrete API having in mind the code readability, focusing 
 to keep the learning curve as lower as possible so that the it can be used and shared in bigger teams.
 
-
 ## ☕️ Features
 
 * Concise API
 * Small and lightweight
 * Easy to learn
 * Functional approach
 * Fully written in JS (although TS types are supported)
-
-### Credits
-
-This library is provided and sponsored by: 
-
-<div>
-  <p>
-    <a href="https://beautifulinteractions.com/">
-      <img src="https://beautifulinteractions.com/img/logo-colorful.svg" alt="Beautiful interactions" width="140px" />
-    </a>
-  </p>
-</div>
-
-As part of our commitment to support and provide the open source community.
diff --git a/docs/styleguidist/CustomComponentListRenderer.js b/docs/styleguidist/CustomComponentListRenderer.js
diff --git a/docs/styleguidist/CustomLogo.js b/docs/styleguidist/CustomLogo.js
diff --git a/docs/styleguidist/CustomSidebar.js b/docs/styleguidist/CustomSidebar.js
diff --git a/docs/styleguidist/getHooksDocFiles.js b/docs/styleguidist/getHooksDocFiles.js
diff --git a/docs/styleguidist/styleguidist.config.js b/docs/styleguidist/styleguidist.config.js
diff --git a/docs/styleguidist/webpack.config.js b/docs/styleguidist/webpack.config.js
diff --git a/docs/useValidatedState.md b/docs/useValidatedState.md
@@ -40,4 +40,4 @@ const ValidatedField = () => {
 
 #### ✅ good to know:
 
-- useValidatedState does not re-render your component twice to save the validation state.
+- useValidatedState does not re-render your component twice to save the validation state.
diff --git a/docs/utils/_CustomLogo.js b/docs/utils/_CustomLogo.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Styled from 'rsg-components/Styled'
+import logo from './_doc-logo.png'
+
+const styles = ({ fontFamily, color }) => ({
+  logo: {
+    display: 'block'
+  },
+  image: {
+    width: '100%'
+  }
+})
+
+const LogoRenderer = ({ classes }) => (
+  <h1 className={classes.logo}>
+    <img className={classes.image} src={logo} alt="Beautiful React Hooks" />
+  </h1>
+)
+
+LogoRenderer.propTypes = {
+  classes: PropTypes.object.isRequired,
+  children: PropTypes.node
+}
+
+export default Styled(styles)(LogoRenderer)
diff --git a/docs/styleguidist/EmptyComponent.js → docs/utils/_EmptyComponent.js b/docs/styleguidist/EmptyComponent.js → docs/utils/_EmptyComponent.js
diff --git a/docs/styleguidist/custom.css → docs/utils/_custom.css b/docs/styleguidist/custom.css → docs/utils/_custom.css
@@ -2,5 +2,5 @@
 @import "~beautiful-react-ui/beautiful-react-ui.css";
 
 body {
-  font-family: 'Ubuntu', sans-serif;
+    font-family: 'Ubuntu', sans-serif;
 }
diff --git a/docs/styleguidist/doc-logo.png → docs/utils/_doc-logo.png b/docs/styleguidist/doc-logo.png → docs/utils/_doc-logo.png
diff --git a/docs/styleguidist/setup.js → docs/utils/_setup.js b/docs/styleguidist/setup.js → docs/utils/_setup.js
diff --git a/docs/styleguidist/styleguidist.theme.js → docs/utils/_styleguidist.theme.js b/docs/styleguidist/styleguidist.theme.js → docs/utils/_styleguidist.theme.js
@@ -36,9 +36,6 @@ module.exports = {
       },
     },
     StyleGuide: {
-      logo: {
-        display: 'none',
-      },
       sidebar: {
         border: 0,
         width: '16rem',