Merge pull request #3 from Devlander-Software/create-npm-package

Create npm package

README.md

@@ -213,3 +213,5 @@ This project is licensed under the Apache License - see the [LICENSE](https://gi
 - Follow us on [Twitter](https://bit.ly/landonwjohnson-on-twitter)
 - Join our [Discord](https://bit.ly/devlander-discord-invite)
 - Watch us on [Twitch](https://bit.ly/devlander-twitch)
+
+### [Become a Sponsor!](https://bit.ly/sponsor-landonjohnson-github/)

external-modules/auto-export.js

@@ -12,16 +12,18 @@ const main = () => {
       ".hoc.tsx",
       ".component.tsx",
       ".styles.tsx",
+      ".util.tsx",
       ".types.tsx",
-      '.type.ts',
+      ".type.ts",
       ".types.ts",
     ],
 
     rootDir: "./src",
     allowedExtensions: [
       ".ts",
-      '.type.ts',
-
+      ".type.ts",
+      ".util.ts",
+      ".util.tsx",
       ".tsx",
       ".tsx",
       ".hoc.tsx",

package.json

@@ -1,7 +1,6 @@
-
 {
   "name": "@devlander/higher-order-components",
-  "version": "0.0.6",
+  "version": "0.0.10",
   "description": "A comprehensive collection of higher-order components for React and React Native projects, enhancing functionality and development efficiency.",
   "main": "dist/umd/index.js",
   "module": "dist/esm/index.js",
@@ -13,6 +12,7 @@
     "build:index": "node ./external-modules/auto-export.js",
     "build:esm": "tsc",
     "test": "jest",
+    "docs": "typedoc --out ./docs ./src",
     "format": "prettier --write 'src/**/*.{ts,tsx}'",
     "lint": "eslint ./src --ext .ts,.tsx --fix && yarn run format && yarn run typecheck",
     "typecheck": "tsc --project tsconfig.json --noEmit --emitDeclarationOnly false",
@@ -36,7 +36,6 @@
     "devlander",
     "landon johnson",
     "hoc",
-    "react hooks",
     "react native components",
     "component library",
     "UI components",
@@ -134,7 +133,8 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-swc-preserve-directives": "^0.5.0",
     "stylex": "^0.3.0",
-    "tslib": "^2.6.2"
+    "tslib": "^2.6.2",
+    "typedoc": "^0.26.5"
   },
   "dependencies": {
     "@devlander/hooks": "^0.0.204",

src/hocs/withDefaultProps/withDefaultProps.hoc.tsx

@@ -0,0 +1,20 @@
+import type { ComponentType } from "react"
+import React from "react"
+import { getDisplayName } from "../../utils/getDisplayName.util"
+
+/**
+ * Higher-Order Component to add default props to a component
+ * @param defaultProps - The default props to apply
+ * @returns A function that takes a component and returns a new component with default props
+ */
+export const withDefaultProps =
+  <P extends object>(defaultProps: Partial<P>) =>
+  (WrappedComponent: ComponentType<P>): ComponentType<P> => {
+    const WithDefaultPropsComponent: React.FC<P> = (props) => {
+      return <WrappedComponent {...defaultProps} {...props} />
+    }
+
+    WithDefaultPropsComponent.displayName = `WithDefaultProps(${getDisplayName(WrappedComponent)})`
+
+    return WithDefaultPropsComponent
+  }

src/index.tsx

@@ -42,6 +42,10 @@ export * from "./components/organisms/LoadingIndicatorOnBackdrop/LoadingIndicato
  * TSDoc for withBorders.hoc
  */
 export * from "./hocs/withBorders/withBorders.hoc";
+/**
+ * TSDoc for withDefaultProps.hoc
+ */
+export * from "./hocs/withDefaultProps/withDefaultProps.hoc";
 /**
  * TSDoc for withDimensions.hoc
  */
@@ -81,4 +85,8 @@ export * from "./types/with-borders.type";
 /**
  * TSDoc for with-data.type
  */
-export * from "./types/with-data.type";
+export * from "./types/with-data.type";
+/**
+ * TSDoc for getDisplayName.util
+ */
+export * from "./utils/getDisplayName.util";

src/types/container-style.type.ts

@@ -1,8 +1,8 @@
 import type { LayoutStyleProperties } from "@devlander/styled-components-theme"
 import type { ViewStyle } from "react-native"
 
-export type ContainerStyle = ViewStyle | ViewStyle[]
-export type ContainerStyleFromTheme = LayoutStyleProperties<number>
+export type ContainerStyle = ViewStyle | ViewStyle[] | undefined
+export type ContainerStyleFromTheme = LayoutStyleProperties<number> | undefined
 
 export interface ContainerStyleProps {
   containerStyleFromTheme?: ContainerStyleFromTheme

src/utils/getDisplayName.util.ts

@@ -0,0 +1,12 @@
+import type { ComponentType } from "react"
+
+/**
+ * Helper function to get the display name of a component
+ * @param WrappedComponent - The component to get the display name of
+ * @returns The display name of the component
+ */
+export const getDisplayName = <P extends object>(
+  WrappedComponent: ComponentType<P>,
+): string => {
+  return WrappedComponent.displayName || WrappedComponent.name || "Component"
+}

tsconfig.json

@@ -37,7 +37,7 @@
     "target": "ESNext"
 
   },
-  "include": ["./src/*.type.ts", "./src/types", "**/*.ts", "**/*.tsx", "src/rollup.config.js", "**/*.web.ts", "**/*.web.tsx", "**/*.native.ts", "**/*.native.tsx", "**/*.hoc.tsx", "**/*.component.tsx", "**/*.styles.tsx"],
+  "include": ["**/*.util.tsx", "**/*.util.ts", "./src/*.type.ts", "./src/types", "**/*.ts", "**/*.tsx", "src/rollup.config.js", "**/*.web.ts", "**/*.web.tsx", "**/*.native.ts", "**/*.native.tsx", "**/*.hoc.tsx", "**/*.component.tsx", "**/*.styles.tsx"],
   "exclude": ["node_modules", "dist", "types", "*/**/.d.ts", "typings"],
 
 }

typings/hocs/withDefaultProps/withDefaultProps.hoc.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentType } from "react";
+/**
+ * Higher-Order Component to add default props to a component
+ * @param defaultProps - The default props to apply
+ * @returns A function that takes a component and returns a new component with default props
+ */
+export declare const withDefaultProps: <P extends object>(defaultProps: Partial<P>) => (WrappedComponent: ComponentType<P>) => ComponentType<P>;

typings/index.d.ts

@@ -42,6 +42,10 @@ export * from "./components/organisms/LoadingIndicatorOnBackdrop/LoadingIndicato
  * TSDoc for withBorders.hoc
  */
 export * from "./hocs/withBorders/withBorders.hoc";
+/**
+ * TSDoc for withDefaultProps.hoc
+ */
+export * from "./hocs/withDefaultProps/withDefaultProps.hoc";
 /**
  * TSDoc for withDimensions.hoc
  */
@@ -82,3 +86,7 @@ export * from "./types/with-borders.type";
  * TSDoc for with-data.type
  */
 export * from "./types/with-data.type";
+/**
+ * TSDoc for getDisplayName.util
+ */
+export * from "./utils/getDisplayName.util";

typings/types/container-style.type.d.ts

@@ -1,7 +1,7 @@
 import type { LayoutStyleProperties } from "@devlander/styled-components-theme";
 import type { ViewStyle } from "react-native";
-export type ContainerStyle = ViewStyle | ViewStyle[];
-export type ContainerStyleFromTheme = LayoutStyleProperties<number>;
+export type ContainerStyle = ViewStyle | ViewStyle[] | undefined;
+export type ContainerStyleFromTheme = LayoutStyleProperties<number> | undefined;
 export interface ContainerStyleProps {
     containerStyleFromTheme?: ContainerStyleFromTheme;
     containerStyle?: ContainerStyle;

typings/utils/getDisplayName.util.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentType } from "react";
+/**
+ * Helper function to get the display name of a component
+ * @param WrappedComponent - The component to get the display name of
+ * @returns The display name of the component
+ */
+export declare const getDisplayName: <P extends object>(WrappedComponent: ComponentType<P>) => string;

yarn.lock

@@ -1657,6 +1657,13 @@
     estree-walker "^2.0.2"
     picomatch "^2.3.1"
 
+"@shikijs/[email protected]":
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/@shikijs/core/-/core-1.11.2.tgz#d70c2bfc58408c6d23e7921767d4c693db78bcf6"
+  integrity sha512-9IBY31lvOo2uhrZjqRt2wTqfqfrXJnddnIx0PFL5E8a5RQUNOhkx+PD11PogZtyrIHlL4aTYDVlb+eyryzy+pQ==
+  dependencies:
+    "@types/hast" "^3.0.4"
+
 "@sinclair/typebox@^0.27.8":
   version "0.27.8"
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.27.8.tgz#6667fac16c436b5434a387a34dedb013198f6e6e"
@@ -1912,6 +1919,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/hast@^3.0.4":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/hast/-/hast-3.0.4.tgz#1d6b39993b82cea6ad783945b0508c25903e15aa"
+  integrity sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==
+  dependencies:
+    "@types/unist" "*"
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz#7739c232a1fee9b4d3ce8985f314c0c6d33549d7"
@@ -2037,6 +2051,11 @@
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.5.tgz#cb6e2a691b70cb177c6e3ae9c1d2e8b2ea8cd304"
   integrity sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==
 
+"@types/unist@*":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-3.0.2.tgz#6dd61e43ef60b34086287f83683a5c1b2dc53d20"
+  integrity sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==
+
 "@types/yargs-parser@*":
   version "21.0.3"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.3.tgz#815e30b786d2e8f0dcd85fd5bcf5e1a04d008f15"
@@ -4815,6 +4834,13 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+linkify-it@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-5.0.0.tgz#9ef238bfa6dc70bd8e7f9572b52d369af569b421"
+  integrity sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==
+  dependencies:
+    uc.micro "^2.0.0"
+
 locate-path@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
@@ -4858,6 +4884,11 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
+lunr@^2.3.9:
+  version "2.3.9"
+  resolved "https://registry.yarnpkg.com/lunr/-/lunr-2.3.9.tgz#18b123142832337dd6e964df1a5a7707b25d35e1"
+  integrity sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==
+
 magic-string@^0.30.10, magic-string@^0.30.3:
   version "0.30.10"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.10.tgz#123d9c41a0cb5640c892b041d4cfb3bd0aa4b39e"
@@ -4892,11 +4923,28 @@ [email protected]:
   dependencies:
     tmpl "1.0.5"
 
+markdown-it@^14.1.0:
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-14.1.0.tgz#3c3c5992883c633db4714ccb4d7b5935d98b7d45"
+  integrity sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==
+  dependencies:
+    argparse "^2.0.1"
+    entities "^4.4.0"
+    linkify-it "^5.0.0"
+    mdurl "^2.0.0"
+    punycode.js "^2.3.1"
+    uc.micro "^2.1.0"
+
 [email protected]:
   version "2.0.30"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.30.tgz#ce4df6f80af6cfbe218ecd5c552ba13c4dfa08cc"
   integrity sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==
 
+mdurl@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-2.0.0.tgz#80676ec0433025dd3e17ee983d0fe8de5a2237e0"
+  integrity sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==
+
 memoize-one@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
@@ -4963,6 +5011,13 @@ minimatch@^5.0.1:
   dependencies:
     brace-expansion "^2.0.1"
 
+minimatch@^9.0.5:
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"
+  integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimist@^1.2.0, minimist@^1.2.6:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
@@ -5318,6 +5373,11 @@ psl@^1.1.33:
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"
   integrity sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==
 
+punycode.js@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/punycode.js/-/punycode.js-2.3.1.tgz#6b53e56ad75588234e79f4affa90972c7dd8cdb7"
+  integrity sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==
+
 punycode@^2.1.0, punycode@^2.1.1, punycode@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
@@ -5754,6 +5814,14 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
+shiki@^1.9.1:
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/shiki/-/shiki-1.11.2.tgz#3d0b65f4cc3a45632900e1432f09d4eab2e83cb3"
+  integrity sha512-WEHfKf+JWEKm/p8BoiE5F4m6VwV6LzY7nFfwRz0nAj+sVD1sRyWiODYScDu3Q8P/Dpi7xKe1TDJF3ZOQnhfT1g==
+  dependencies:
+    "@shikijs/core" "1.11.2"
+    "@types/hast" "^3.0.4"
+
 side-channel@^1.0.4, side-channel@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.6.tgz#abd25fb7cd24baf45466406b1096b7831c9215f2"
@@ -6230,6 +6298,17 @@ typed-array-length@^1.0.6:
     is-typed-array "^1.1.13"
     possible-typed-array-names "^1.0.0"
 
+typedoc@^0.26.5:
+  version "0.26.5"
+  resolved "https://registry.yarnpkg.com/typedoc/-/typedoc-0.26.5.tgz#08032bd57cac3d56e8ac296a07e3482dc0c645ac"
+  integrity sha512-Vn9YKdjKtDZqSk+by7beZ+xzkkr8T8CYoiasqyt4TTRFy5+UHzL/mF/o4wGBjRF+rlWQHDb0t6xCpA3JNL5phg==
+  dependencies:
+    lunr "^2.3.9"
+    markdown-it "^14.1.0"
+    minimatch "^9.0.5"
+    shiki "^1.9.1"
+    yaml "^2.4.5"
+
 typescript@^5.2.2:
   version "5.5.3"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.3.tgz#e1b0a3c394190838a0b168e771b0ad56a0af0faa"
@@ -6240,6 +6319,11 @@ ua-parser-js@^1.0.35:
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.38.tgz#66bb0c4c0e322fe48edfe6d446df6042e62f25e2"
   integrity sha512-Aq5ppTOfvrCMgAPneW1HfWj66Xi7XL+/mIy996R1/CLS/rcyJQm6QZdsKrUeivDFQ+Oc9Wyuwor8Ze8peEoUoQ==
 
+uc.micro@^2.0.0, uc.micro@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-2.1.0.tgz#f8d3f7d0ec4c3dea35a7e3c8efa4cb8b45c9e7ee"
+  integrity sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==
+
 unbox-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"
@@ -6551,6 +6635,11 @@ yallist@^3.0.2:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
   integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
 
+yaml@^2.4.5:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.5.0.tgz#c6165a721cf8000e91c36490a41d7be25176cf5d"
+  integrity sha512-2wWLbGbYDiSqqIKoPjar3MPgB94ErzCtrNE1FdqGuaO0pi2JGjmE8aW8TDZwzU7vuxcGRdL/4gPQwQ7hD5AMSw==
+
 yargs-parser@^21.0.1, yargs-parser@^21.1.1:
   version "21.1.1"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"