feat(styling): add makeStyles

add makeStyles which exposes a useStyles hook with mergeDeep function

resolves #20

Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>

src/index.ts

@@ -1 +1,2 @@
 export * from './components/Email';
+export * from './utils';

src/utils/mergeDeep.ts

@@ -0,0 +1,38 @@
+import { CSSProperties } from 'react';
+import { CSSClasses } from './stylings';
+
+const isObject = (item: CSSClasses | CSSProperties): boolean => {
+  return item && typeof item === 'object' && !Array.isArray(item);
+};
+
+export const mergeDeep = (target: CSSClasses, ...sources: CSSClasses[]): CSSClasses => {
+  if (!sources.length) return target;
+  const source: CSSClasses = sources.shift() as CSSClasses;
+
+  if (isObject(target) && isObject(source)) {
+    for (const key in source) {
+      if (isObject(source[key])) {
+        if (!target[key]) {
+          Object.assign(target, {
+            [key]: source[key],
+          });
+        } else {
+          const targetObject = { ...target[key] };
+          const srcObject = { ...source[key] };
+          const mergedObject = Object.assign(targetObject, srcObject);
+          target[key] = mergedObject;
+        }
+      } else {
+        Object.assign(target, {
+          [key]: source[key],
+        });
+      }
+    }
+  }
+
+  if (sources.length) {
+    return mergeDeep(target, ...sources);
+  } else {
+    return target;
+  }
+};

src/utils/stylings.ts

@@ -1,8 +1,9 @@
 import { CSSProperties } from 'react';
+import { mergeDeep } from './mergeDeep';
 
-// interface CSSClasses {
-//   [key: string]: CSSProperties;
-// }
+export interface CSSClasses {
+  [key: string]: CSSProperties;
+}
 
 export const sx = (...args: CSSProperties[]): CSSProperties => {
   const initialValue: CSSProperties = {};
@@ -13,3 +14,9 @@ export const sx = (...args: CSSProperties[]): CSSProperties => {
 
   return result;
 };
+
+export const makeStyles = (classes: CSSClasses) => {
+  return (classes_: CSSClasses) => {
+    return mergeDeep(classes, classes_);
+  };
+};