[add] Type Echo component & animate() utility

ReadMe.md

@@ -16,7 +16,11 @@ A **[React][1] advanced components library** based on [TypeScript][2] & [Bootstr
 />
 <link
     rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
+    href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
+/>
+<link
+    rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/[email protected]/animate.min.css"
 />
 ```
 
@@ -27,13 +31,18 @@ A **[React][1] advanced components library** based on [TypeScript][2] & [Bootstr
 3. [Icon](source/Icon.tsx)
 4. [Avatar](source/Avatar.tsx)
 5. [Nameplate](source/Nameplate.tsx)
-6. [Filter Input](source/FilterInput/index.tsx)
-7. [File Picker](source/FilePicker/index.tsx)
-8. [Editor](source/Editor.tsx)
+6. [TypeEcho](source/TypeEcho.tsx)
+7. [Filter Input](source/FilterInput/index.tsx)
+8. [File Picker](source/FilePicker/index.tsx)
+9. [Editor](source/Editor.tsx)
     - extra: `npm i @editorjs/editorjs react-editor-js`
-9. [Editor HTML](source/EditorHTML.tsx)
+10. [Editor HTML](source/EditorHTML.tsx)
     - extra: `npm i editorjs-html`
 
+## Utilities
+
+1. [`animate()`](source/animate.ts)
+
 ## Scaffolds
 
 1. MobX: [demo][8] & [usage][9]

package.json

@@ -1,6 +1,6 @@
 {
     "name": "idea-react",
-    "version": "0.9.6",
+    "version": "0.10.0",
     "license": "LGPL-3.0",
     "author": "[email protected]",
     "description": "A React advanced components library based on TypeScript & Bootstrap, built by idea2app remote developers team.",
@@ -26,27 +26,27 @@
         "classnames": "^2.3.1",
         "lodash": "^4.17.21",
         "react": "17.0.2",
-        "react-bootstrap": "^2.0.4",
+        "react-bootstrap": "^2.1.2",
         "react-dom": "17.0.2",
-        "web-utility": "^2.9.6"
+        "web-utility": "^3.4.2"
     },
     "peerDependencies": {
-        "@editorjs/editorjs": "^2.22.2",
-        "editorjs-html": "^3.4.2",
-        "react-editor-js": "^2.0.3"
+        "@editorjs/editorjs": "^2.0.0",
+        "editorjs-html": "^3.0.0",
+        "react-editor-js": "^2.0.0"
     },
     "devDependencies": {
-        "@editorjs/editorjs": "^2.22.2",
-        "@types/lodash": "^4.14.178",
+        "@editorjs/editorjs": "^2.23.2",
+        "@types/lodash": "^4.14.179",
         "husky": "^7.0.4",
         "less": "^4.1.2",
-        "lint-staged": "^12.1.4",
+        "lint-staged": "^12.3.4",
         "microbundle": "^0.14.2",
         "open-cli": "^7.0.1",
         "prettier": "^2.5.1",
-        "typedoc": "^0.22.10",
-        "typedoc-plugin-mdn-links": "^1.0.4",
-        "typescript": "~4.5.4"
+        "typedoc": "^0.22.12",
+        "typedoc-plugin-mdn-links": "^1.0.5",
+        "typescript": "~4.3.5"
     },
     "prettier": {
         "singleQuote": true,
@@ -57,12 +57,6 @@
     "lint-staged": {
         "*.{md,less,json,yml,ts,tsx}": "prettier --write"
     },
-    "browserslist": "> 0.5%, last 2 versions, not dead",
-    "targets": {
-        "main": {
-            "optimize": true
-        }
-    },
     "scripts": {
         "prepare": "husky install",
         "test": "lint-staged",

source/TypeEcho.tsx

@@ -0,0 +1,39 @@
+import { sleep } from 'web-utility';
+import classNames from 'classnames';
+import React, { PropsWithoutRef, RefCallback, PureComponent } from 'react';
+
+export type TypeEchoProps = PropsWithoutRef<{
+    className?: string;
+    text: string;
+    intervals?: number;
+}>;
+type State = { echoed: string };
+
+export class TypeEcho extends PureComponent<TypeEchoProps, State> {
+    state: Readonly<State> = { echoed: '' };
+
+    init: RefCallback<HTMLPreElement> = node =>
+        node &&
+        new IntersectionObserver(async ([{ isIntersecting }]) => {
+            if (!isIntersecting) return;
+
+            const { text, intervals = 150 } = this.props;
+
+            for (const char of text) {
+                await sleep(intervals / 1000);
+
+                this.setState({ echoed: this.state.echoed + char });
+            }
+        }).observe(node);
+
+    render() {
+        const { className, text } = this.props,
+            { echoed } = this.state;
+
+        return (
+            <pre className={classNames('text-wrap', className)} ref={this.init}>
+                {echoed + (echoed === text ? '' : '_')}
+            </pre>
+        );
+    }
+}

source/animate.ts

@@ -0,0 +1,20 @@
+import { RefCallback } from 'react';
+
+export function animate(name: string): RefCallback<Element> {
+    return element =>
+        element &&
+        new IntersectionObserver(([{ isIntersecting, target }], observer) => {
+            if (!isIntersecting) return;
+
+            const classes = ['animate__animated', `animate__${name}`];
+
+            target.classList.add(...classes);
+
+            (target as HTMLElement).addEventListener(
+                'animationend',
+                () => target.classList.remove(...classes),
+                { once: true }
+            );
+            observer.disconnect();
+        }).observe(element);
+}

source/index.ts

@@ -3,7 +3,10 @@ export * from './PaginationBar';
 export * from './Icon';
 export * from './Avatar';
 export * from './Nameplate';
+export * from './TypeEcho';
 export * from './FilterInput';
 export * from './FilePicker';
 export * from './Editor';
 export * from './EditorHTML';
+
+export * from './animate';

tsconfig.json

@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "target": "ES5",
         "esModuleInterop": true,
         "jsx": "react",
         "skipLibCheck": true,