diff --git a/src/core/hoc.tsx b/src/core/hoc.tsx
index 966c053..7de8ebb 100644
--- a/src/core/hoc.tsx
+++ b/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 =
(
- Component: React.ComponentType
- ): React.FC> =>
- (props) => {
- const themeContext = useContext(OsmiContext);
+ Component: ComponentType
+ ): FC> =>
+ (props: Omit) => {
+ 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(
- () =>
- | NamedStyles>(...args: (string | boolean | undefined)[]) =>
- applyHelper(...args)(themeContext)
- ,
- [themeContext]
- );
+ const apply = useMemo(
+ () =>
+ | NamedStyles>(
+ ...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(
+ () =>
+ (
+ ...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 (
-
- );
- };
+ return (
+
+ );
+ };
diff --git a/src/core/hooks.tsx b/src/core/hooks.tsx
index 8938b98..6ac6a01 100644
--- a/src/core/hooks.tsx
+++ b/src/core/hooks.tsx
@@ -22,13 +22,13 @@ export const useStyles = (): ApplyInstance => {
const colors = useMemo(
() =>
- (...args: (string | boolean | undefined)[]): 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");
}
diff --git a/src/processor/index.ts b/src/processor/index.ts
index 9ddaabd..fa73604 100644
--- a/src/processor/index.ts
+++ b/src/processor/index.ts
@@ -27,7 +27,7 @@ export const customProcessor = (
customTheme: CustomThemeType
): Record => {
const processors: Record<
- string,
+ keyof CustomThemeType,
(themeValue: any) => Record
> = {
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);
+ return Object.entries(processors).reduce>(
+ (finalObject, [key, processor]) => {
+ if (key in customTheme) {
+ const themeValue = customTheme[key as keyof CustomThemeType];
+ if (themeValue) {
+ finalObject = {
+ ...finalObject,
+ ...processor(themeValue),
+ };
+ }
+ }
+ return finalObject;
+ },
+ {}
+ );
};