Merge 1d8114f into f849d97

heyjul3s · Dec 8, 2020 · 4488554 · 4488554
2 parents f849d97 + 1d8114f
commit 4488554
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 28 deletions.
diff --git a/packages/block/src/createBlockComponents.tsx b/packages/block/src/createBlockComponents.tsx
@@ -3,6 +3,7 @@ import { createBaseComponents } from '@artifak/component-generator';
 import { BlockBaseProps } from './typings';
 import { BlockBase } from './BlockBase';
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export function createBlockComponents<S>(
   styles: S
 ): { [key in keyof any]: React.ComponentType<BlockBaseProps> } {

diff --git a/packages/component-generator/src/createBaseComponents.tsx b/packages/component-generator/src/createBaseComponents.tsx
@@ -1,35 +1,28 @@
 import React, { HTMLAttributes } from 'react';
 import { AnyStyledComponent } from 'styled-components';
-import { ComponentVariant, Settings, StyledSystemCSSObject } from './typings';
+import { Variant, Settings, StyledSystemCSSObject } from './typings';
 
 export function createBaseComponents<
   S,
   P = Record<string, unknown>,
   E = HTMLDivElement
 >(
-  BaseStyledComponent: AnyStyledComponent,
+  Base: AnyStyledComponent,
   settings:
-    | {
-        [key in keyof S]: Settings<HTMLAttributes<E>>;
-      }
-    | {
-        [key in keyof S]: StyledSystemCSSObject;
-      }
-): { [key in keyof S]: React.ComponentType<P & ComponentVariant> } {
-  const acc = {} as {
-    [key in keyof S]: React.ComponentType<P & ComponentVariant>;
-  };
+    | { [key in keyof S]: Settings<HTMLAttributes<E>> }
+    | { [key in keyof S]: StyledSystemCSSObject }
+): { [key in keyof S]: React.ComponentType<P & Variant> } {
+  const acc = {} as { [key in keyof S]: React.ComponentType<P & Variant> };
 
   return !!settings && Object.keys(settings).length >= 1
     ? Object.entries(settings).reduce((acc, entry) => {
         const [prop, setting] = entry;
-        const entrySetting = extractSettings<E>(setting);
+        const entrySetting = extractSettings<E>(
+          setting as Settings<HTMLAttributes<E>> | StyledSystemCSSObject
+        );
 
         if (hasKey(settings, prop)) {
-          acc[prop] = createStyledFunctionComponent<E, P>(
-            BaseStyledComponent,
-            entrySetting
-          );
+          acc[prop] = createStyledFunctionComponent<E, P>(Base, entrySetting);
 
           acc[prop].displayName = prop;
         }
@@ -39,6 +32,19 @@ export function createBaseComponents<
     : acc;
 }
 
+export function extractSettings<E>(
+  setting: Settings<HTMLAttributes<E>>
+): StyledSystemCSSObject & HTMLAttributes<E>;
+
+export function extractSettings<E>(
+  setting: StyledSystemCSSObject
+): StyledSystemCSSObject & HTMLAttributes<E>;
+
+export function extractSettings<E>(
+  setting: Settings<HTMLAttributes<E>> | StyledSystemCSSObject
+): StyledSystemCSSObject & HTMLAttributes<E>;
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export function extractSettings<E>(
   setting: any
 ): StyledSystemCSSObject & HTMLAttributes<E> {
@@ -48,13 +54,13 @@ export function extractSettings<E>(
 }
 
 export function createStyledFunctionComponent<E, P>(
-  BaseStyledComponent: AnyStyledComponent,
+  Base: AnyStyledComponent,
   setting: StyledSystemCSSObject & HTMLAttributes<E>
-): React.ComponentType<P> {
+): React.FC<P> {
   return props => (
-    <BaseStyledComponent {...setting} {...props}>
+    <Base {...setting} {...props}>
       {props.children}
-    </BaseStyledComponent>
+    </Base>
   );
 }
 

diff --git a/packages/component-generator/src/createStyledComponent.ts b/packages/component-generator/src/createStyledComponent.ts
@@ -74,7 +74,12 @@ export function applyStyledComponent<
   styles = {},
   variants,
   styleProps = []
-}: StyledComponentConfig<Props, Theme, Attributes>) {
+}: StyledComponentConfig<Props, Theme, Attributes>): StyledComponent<
+  keyof JSX.IntrinsicElements | React.ComponentType<Props>,
+  Theme | any,
+  React.ComponentType<Props & BaseComponentProps>,
+  keyof any
+> {
   return component(
     styles,
     variant({ variants }),

diff --git a/packages/component-generator/src/index.tsx b/packages/component-generator/src/index.tsx
@@ -5,8 +5,4 @@ export {
 
 export { createStyledComponent } from './createStyledComponent';
 
-export {
-  BaseComponentProps,
-  ComponentVariant,
-  StyledComponentConfig
-} from './typings';
+export { BaseComponentProps, Variant, StyledComponentConfig } from './typings';
diff --git a/packages/component-generator/src/typings.ts b/packages/component-generator/src/typings.ts
@@ -33,7 +33,7 @@ export type BaseComponentProps =
   | SpaceProps
   | TypographyProps;
 
-export type ComponentVariant<ThemeType = void> = {
+export type Variant<ThemeType = void> = {
   variant?: ResponsiveValue<string | number, ThemeType>;
 };