react-essentials-functions 1.0.0

package/LICENCE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Maxime Golfier
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,13 @@
+# react-essentials-functions
+
+A collection of useful `hooks` and `components` for React that I use in my projects.
+
+## Installation
+
+```bash
+yarn add react-essentials-functions
+```
+
+## Usage
+
+Documentation is in progress...

package/build/components/ConditionnalWrapper.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export declare type ConditionnalWrapperProps = {
+    condition: boolean;
+    wrapper: (children: React.ReactNode) => React.ReactNode;
+    children: React.ReactNode;
+};
+export declare const ConditionalWrapper: ({ condition, wrapper, children, }: ConditionnalWrapperProps) => React.ReactNode;

package/build/components/ConditionnalWrapper.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConditionalWrapper = void 0;
+const ConditionalWrapper = ({ condition, wrapper, children, }) => (condition ? wrapper(children) : children);
+exports.ConditionalWrapper = ConditionalWrapper;
+// <ConditionalWrapper
+//      condition={link}
+//      wrapper={children => <a href={link}>{children}</a>}
+//    >
+//     .....
+//    </ConditionalWrapper>

package/build/components/index.d.ts

@@ -0,0 +1 @@
+export * from './ConditionnalWrapper';

package/build/components/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ConditionnalWrapper"), exports);

package/build/hooks/index.d.ts

@@ -0,0 +1,6 @@
+export * from './useDimensions';
+export * from './useSafeFetch';
+export * from './useSafeState';
+export * from './useScript';
+export * from './useTheme';
+export * from './useWindowDimensions';

package/build/hooks/index.js

@@ -0,0 +1,22 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useDimensions"), exports);
+__exportStar(require("./useSafeFetch"), exports);
+__exportStar(require("./useSafeState"), exports);
+__exportStar(require("./useScript"), exports);
+__exportStar(require("./useTheme"), exports);
+__exportStar(require("./useWindowDimensions"), exports);

package/build/hooks/useDimensions.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare function useDimensions(targetRef: React.RefObject<HTMLElement>): {
+    width: number;
+    height: number;
+};

package/build/hooks/useDimensions.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDimensions = void 0;
+const react_1 = require("react");
+function useDimensions(targetRef) {
+    const getDimensions = () => {
+        return {
+            width: targetRef.current ? targetRef.current.offsetWidth : 0,
+            height: targetRef.current ? targetRef.current.offsetHeight : 0,
+        };
+    };
+    const [dimensions, setDimensions] = (0, react_1.useState)(getDimensions);
+    const handleResize = () => {
+        setDimensions(getDimensions());
+    };
+    (0, react_1.useEffect)(() => {
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('scroll', handleResize);
+        window.addEventListener('load', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('scroll', handleResize);
+            window.addEventListener('load', handleResize);
+        };
+    }, []);
+    (0, react_1.useLayoutEffect)(() => {
+        handleResize();
+    }, []);
+    return dimensions;
+}
+exports.useDimensions = useDimensions;
+// const targetRef = useRef() // then set a ref to your component
+// const size = useDimensions(targetRef)
+// ....
+// return (div ref={targetRef}> .... <p>{size.width} - {size.height} </p> .... </div>);

package/build/hooks/useSafeFetch.d.ts

@@ -0,0 +1 @@
+export declare function useSafeFetch(): (url: string, options: Record<any, any>) => Promise<Response>;

package/build/hooks/useSafeFetch.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSafeFetch = void 0;
+const react_1 = require("react");
+function useSafeFetch() {
+    const abortController = (0, react_1.useRef)(new AbortController());
+    (0, react_1.useEffect)(() => () => abortController.current.abort(), []);
+    return (0, react_1.useCallback)((url, options) => fetch(url, { signal: abortController.current.signal, ...options }), []);
+}
+exports.useSafeFetch = useSafeFetch;

package/build/hooks/useSafeState.d.ts

@@ -0,0 +1 @@
+export declare function useSafeState(initialValue?: null): (((value: any) => void) | null)[];

package/build/hooks/useSafeState.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSafeState = void 0;
+const react_1 = require("react");
+function useSafeState(initialValue = null) {
+    const isMounted = (0, react_1.useRef)(true);
+    const [state, setState] = (0, react_1.useState)(initialValue);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    const setStateSafe = (0, react_1.useCallback)((value) => {
+        if (isMounted.current) {
+            setState(value);
+        }
+    }, []);
+    return [state, setStateSafe];
+}
+exports.useSafeState = useSafeState;

package/build/hooks/useScript.d.ts

@@ -0,0 +1 @@
+export declare const useScript: (url: string) => void;

package/build/hooks/useScript.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScript = void 0;
+const react_1 = require("react");
+const useScript = (url) => {
+    (0, react_1.useEffect)(() => {
+        const script = document.createElement('script');
+        script.src = url;
+        script.async = true;
+        document.body.appendChild(script);
+        return () => {
+            document.body.removeChild(script);
+        };
+    }, [url]);
+};
+exports.useScript = useScript;

package/build/hooks/useTheme.d.ts

@@ -0,0 +1,2 @@
+import { MouseEventHandler } from 'react';
+export declare const useTheme: () => [string, MouseEventHandler, boolean];

package/build/hooks/useTheme.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTheme = void 0;
+const react_1 = require("react");
+const useTheme = () => {
+    const [theme, setTheme] = (0, react_1.useState)('light');
+    const [mountedComponent, setMountedComponent] = (0, react_1.useState)(false);
+    const setMode = (mode) => {
+        window.localStorage.setItem('theme', mode);
+        setTheme(mode);
+    };
+    const themeToggler = () => {
+        theme === 'light' ? setMode('dark') : setMode('light');
+    };
+    (0, react_1.useEffect)(() => {
+        const localTheme = window.localStorage.getItem('theme');
+        localTheme ? setTheme(localTheme) : setMode('light');
+        setMountedComponent(true);
+    }, []);
+    return [theme, themeToggler, mountedComponent];
+};
+exports.useTheme = useTheme;

package/build/hooks/useWindowDimensions.d.ts

@@ -0,0 +1,4 @@
+export default function useWindowDimensions(): {
+    width: number | null;
+    height: number | null;
+};

package/build/hooks/useWindowDimensions.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+function useWindowDimensions() {
+    const hasWindow = typeof window !== 'undefined';
+    function getWindowDimensions() {
+        const width = hasWindow ? window.innerWidth : null;
+        const height = hasWindow ? window.innerHeight : null;
+        return {
+            width,
+            height,
+        };
+    }
+    const [windowDimensions, setWindowDimensions] = (0, react_1.useState)(getWindowDimensions());
+    (0, react_1.useEffect)(() => {
+        if (hasWindow) {
+            // eslint-disable-next-line no-inner-declarations
+            function handleResize() {
+                setWindowDimensions(getWindowDimensions());
+            }
+            window.addEventListener('resize', handleResize);
+            return () => window.removeEventListener('resize', handleResize);
+        }
+    }, [hasWindow]);
+    return windowDimensions;
+}
+exports.default = useWindowDimensions;

package/build/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './hooks';

package/build/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);
+__exportStar(require("./hooks"), exports);

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "react-essentials-functions",
+  "version": "1.0.0",
+  "author": "maxgfr",
+  "license": "MIT",
+  "description": "A collection of zero-dependencies useful hooks and components for React",
+  "main": "./build/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/maxgfr/react-essentials-functions.git"
+  },
+  "bugs": {
+    "url": "https://github.com/maxgfr/react-essentials-functions/issues"
+  },
+  "homepage": "https://github.com/maxgfr/react-essentials-functions#readme",
+  "files": [
+    "build"
+  ],
+  "keywords": [
+    "hooks",
+    "react",
+    "components",
+    "useful"
+  ],
+  "scripts": {
+    "dev": "nodemon",
+    "develop": "node -r @swc-node/register ./src/index.ts",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "clean": "rimraf build",
+    "build": "tsc -p tsconfig.build.json",
+    "build:watch": "tsc -w -p tsconfig.build.json",
+    "build:swc": "swc ./src -d build",
+    "build:swc:watch": "swc ./src -d build -w",
+    "lint": "eslint ./src --ext .ts,.tsx",
+    "prettier": "prettier --write './src/**/*.{ts,js,json,tsx,jsx}'",
+    "storybook:start": "start-storybook -p 6006",
+    "storybook:build": "build-storybook",
+    "storybook:deploy": "npm run storybook:build && gh-pages -d storybook-static",
+    "storybook:deploy:action": "npm run storybook:build && gh-pages -d storybook-static -u \"github-actions-bot <support+actions@github.com>\"",
+    "release": "semantic-release"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.2",
+    "@semantic-release/changelog": "^6.0.2",
+    "@semantic-release/commit-analyzer": "^9.0.2",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^8.0.6",
+    "@semantic-release/npm": "^9.0.1",
+    "@semantic-release/release-notes-generator": "^10.0.3",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-interactions": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/builder-webpack4": "^6.5.13",
+    "@storybook/manager-webpack4": "^6.5.13",
+    "@storybook/react": "^6.5.13",
+    "@storybook/testing-library": "^0.0.13",
+    "@swc-node/register": "1.5.4",
+    "@swc/cli": "0.1.57",
+    "@swc/core": "1.3.19",
+    "@swc/jest": "0.2.23",
+    "@swc/plugin-styled-jsx": "^1.5.20",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "29.2.3",
+    "@types/node": "18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
+    "@typescript-eslint/eslint-plugin": "5.43.0",
+    "@typescript-eslint/parser": "5.43.0",
+    "babel-loader": "^9.0.0",
+    "eslint": "8.28.0",
+    "eslint-config-prettier": "8.5.0",
+    "eslint-plugin-jest": "27.1.5",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-storybook": "^0.6.7",
+    "gh-pages": "^4.0.0",
+    "jest": "29.3.1",
+    "jest-environment-jsdom": "^29.3.0",
+    "nodemon": "2.0.20",
+    "prettier": "2.7.1",
+    "rimraf": "3.0.2",
+    "semantic-release": "^19.0.5",
+    "typescript": "^4.8.4"
+  }
+}