Merge 74019c7 into 111f533

heyjul3s · Jan 2, 2021 · d07ed9c · d07ed9c
2 parents 111f533 + 74019c7
commit d07ed9c
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 14 deletions.
diff --git a/packages/component-generator/src/createComponents.tsx b/packages/component-generator/src/createComponents.tsx
@@ -32,7 +32,7 @@ export function createComponents<
       if (hasKey(settings, prop)) {
         dict[prop] = isConfigBase
           ? generateComponent<ThemeType, Props, Element>(base, setting)
-          : createFC(base, setting);
+          : createFC<Props>(base, setting);
         dict[prop].displayName = prop;
       }
       return dict;
@@ -45,12 +45,17 @@ export function createComponents<
 export function createBaseComponent<
   Config = any,
   ThemeType = any,
-  Props = Record<string, unknown>
+  Props = Record<string, unknown>,
+  Element = HTMLDivElement
 >(base): ComponentsRecord<Config, Props, ThemeType> {
   const dict = {} as ComponentsRecord<Config, Props, ThemeType>;
 
   if (isPlainObject(base)) {
-    dict.Base = createStyledComponent(base);
+    dict.Base = createStyledComponent<
+      Props,
+      ThemeType,
+      AllHTMLAttributes<Element>
+    >(base);
   }
 
   return dict;
@@ -61,12 +66,12 @@ export function generateComponent<
   Props = Record<string, unknown>,
   Element = HTMLDivElement
 >(base, setting) {
-  return createStyledComponent({
+  return createStyledComponent<Props, ThemeType, AllHTMLAttributes<Element>>({
     ...base,
     styles: { ...base.styles, ...setting },
     attrs: { ...base.attrs, ...setting.attrs } || {},
     element: !!setting.as ? setting.as : base.element
-  } as StyledComponentConfig<Props & Variant<ThemeType>, AllHTMLAttributes<Element>, ThemeType>);
+  } as StyledComponentConfig<Props & Variant<ThemeType>, ThemeType, AllHTMLAttributes<Element>>);
 }
 
 /* eslint-disable @typescript-eslint/no-explicit-any */

diff --git a/packages/component-generator/src/typings.ts b/packages/component-generator/src/typings.ts
@@ -60,9 +60,7 @@ export type CSSPseudos = { [K in CSS.Pseudos]?: CSSObjectWithScale };
 export type StyledSystemCSSObject = CSSObjectWithScale & CSSPseudos;
 
 export type ComponentsRecord<Dict, Props, ThemeType> = {
-  [key in keyof Dict | 'Base']: React.FC<
-    Props & BaseProps<ThemeType> & Variant<ThemeType>
-  >;
+  [key in keyof Dict | 'Base']: React.FC<Props & BaseProps<ThemeType>>;
 };
 
 export type Settings<Element = HTMLDivElement> = {

diff --git a/packages/text-input/index.stories.tsx b/packages/text-input/index.stories.tsx
@@ -23,14 +23,25 @@ const inputs = {
   }
 };
 
+type BasicUsageProps = {
+  disabled?: boolean;
+  placeholder?: string;
+  onBlur?: () => void;
+};
+
 const { Base: InputText, InputSearch, InputUrl } = createTextInputs<
-  typeof inputs.components
+  typeof inputs.components,
+  BasicUsageProps
 >(inputs.base, inputs.components);
 
 export function BasicUsage() {
+  const onBlur = (text: string) => () => {
+    console.log('Blur', text);
+  };
+
   return (
     <>
-      <InputText />
+      <InputText onBlur={onBlur('Hello')} />
       <InputSearch />
       <InputUrl />
     </>

diff --git a/packages/text-input/src/createTextInputs.tsx b/packages/text-input/src/createTextInputs.tsx
@@ -1,9 +1,9 @@
-import React, { AllHTMLAttributes } from 'react';
+import { AllHTMLAttributes } from 'react';
 import {
   createComponents,
+  ComponentsRecord,
   Settings,
-  StyledComponentConfig,
-  Variant
+  StyledComponentConfig
 } from '@artifak/component-generator';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -15,7 +15,7 @@ export function createTextInputs<
 >(
   base: StyledComponentConfig<Props, ThemeType, AllHTMLAttributes<Element>>,
   settings: Settings<Element>
-): { [key in keyof Config | 'Base']: React.FC<Props & Variant<ThemeType>> } {
+): ComponentsRecord<Config, Props, ThemeType> {
   return createComponents<Config, ThemeType, Props, Element>(
     {
       element: 'input',