fix: typescript error (#76)

src/core/hoc.tsx

@@ -1,54 +1,60 @@
-import React, { useContext, useMemo } from "react";
+import { useContext, useMemo } from "react";
 import { OsmiContext } from "./context";
 import { applyHelper } from "./apply";
 import { colorHelper } from "./color";
 
+// Types
+import type { FC, ComponentType } from "react";
 import type { NamedStyles, ApplyInstance } from "../types/osmi.types";
 
 export const withStyles =
   <P extends ApplyInstance = ApplyInstance>(
-    Component: React.ComponentType<P>
-  ): React.FC<Omit<P, keyof ApplyInstance>> =>
-    (props) => {
-      const themeContext = useContext(OsmiContext);
+    Component: ComponentType<P>
+  ): FC<Omit<P, keyof ApplyInstance>> =>
+  (props: Omit<P, keyof ApplyInstance>) => {
+    const themeContext = useContext(OsmiContext);
 
-      if (themeContext === null) {
-        throw new Error("You must wrap your components in a OsmiProvider.");
-      }
+    if (themeContext === null) {
+      throw new Error("You must wrap your components in a OsmiProvider.");
+    }
 
-      const { scaleWidth, scaleHeight, switchMode } = themeContext;
+    const { scaleWidth, scaleHeight, switchMode } = themeContext;
 
-      const apply = useMemo(
-        () =>
-          <T extends NamedStyles<T> | NamedStyles<any>>(...args: (string | boolean | undefined)[]) =>
-            applyHelper(...args)(themeContext)
-        ,
-        [themeContext]
-      );
+    const apply = useMemo(
+      () =>
+        <T extends NamedStyles<T> | NamedStyles<any>>(
+          ...args: (string | boolean | undefined)[]
+        ) =>
+          applyHelper(...args)(themeContext),
+      [themeContext]
+    );
 
-      const colors = useMemo(
-        () =>
-          (...args: (string | boolean | undefined)[]): string | string[] => {
-            if (args.length === 1) {
-              const arg = args[0];
-              return arg !== false && arg !== undefined ? colorHelper(arg)(themeContext) : "";
-            } else if (args.length === 2) {
-              return args.map(arg => arg !== false && arg !== undefined ? colorHelper(arg)(themeContext) : "");
-            }
+    const colors = useMemo(
+      () =>
+        <T extends string | string[]>(
+          ...args: (string | boolean | undefined)[]
+        ): T => {
+          if (args.length === 1) {
+            return colorHelper(args[0] as string)(themeContext) as T;
+          } else if (args.length === 2) {
+            return args.map((syntax) =>
+              colorHelper(syntax as string)(themeContext)
+            ) as T;
+          } else {
             throw Error("Invalid color syntax");
           }
-        ,
-        [themeContext]
-      );
+        },
+      [themeContext]
+    );
 
-      return (
-        <Component
-          {...(props as P)}
-          apply={apply}
-          colors={colors}
-          scaleWidth={scaleWidth}
-          scaleHeight={scaleHeight}
-          switchTheme={switchMode}
-        />
-      );
-    };
+    return (
+      <Component
+        {...(props as P)}
+        apply={apply}
+        colors={colors}
+        scaleWidth={scaleWidth}
+        scaleHeight={scaleHeight}
+        switchTheme={switchMode}
+      />
+    );
+  };

src/core/hooks.tsx

@@ -22,13 +22,13 @@ export const useStyles = (): ApplyInstance => {
 
   const colors = useMemo(
     () =>
-      (...args: (string | boolean | undefined)[]): string | string[] => {
+      <T extends string | string[]>(...args: (string | boolean | undefined)[]): T => {
         if (args.length === 1) {
-          return colorHelper(args[0] as string)(themeContext);
+          return colorHelper(args[0] as string)(themeContext) as T;
         } else if (args.length === 2) {
           return args.map((syntax) =>
             colorHelper(syntax as string)(themeContext)
-          );
+          ) as T;
         } else {
           throw Error("Invalid color syntax");
         }

src/processor/index.ts

@@ -27,7 +27,7 @@ export const customProcessor = (
   customTheme: CustomThemeType
 ): Record<string, string | object> => {
   const processors: Record<
-    string,
+    keyof CustomThemeType,
     (themeValue: any) => Record<string, unknown>
   > = {
     colors: customColors,
@@ -39,14 +39,19 @@ export const customProcessor = (
     shadow: customShadows,
   };
 
-  return Object.entries(processors).reduce((finalObject, [key, processor]) => {
-    const themeValue = customTheme[key as keyof CustomThemeType];
-    if (themeValue) {
-      finalObject = {
-        ...finalObject,
-        ...processor(themeValue),
-      };
-    }
-    return finalObject;
-  }, {} as Record<string, unknown>);
+  return Object.entries(processors).reduce<Record<string, any>>(
+    (finalObject, [key, processor]) => {
+      if (key in customTheme) {
+        const themeValue = customTheme[key as keyof CustomThemeType];
+        if (themeValue) {
+          finalObject = {
+            ...finalObject,
+            ...processor(themeValue),
+          };
+        }
+      }
+      return finalObject;
+    },
+    {}
+  );
 };