Merge e9b63e8 into dd0c3c7

heyjul3s · Nov 9, 2020 · e32b783 · e32b783
2 parents dd0c3c7 + e9b63e8
commit e32b783
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 18 deletions.
diff --git a/packages/component-generator/src/createBaseComponents.tsx b/packages/component-generator/src/createBaseComponents.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import { AnyStyledComponent } from 'styled-components';
+import { ComponentVariant } from './typings';
 
 export function createBaseComponents<ST, CP>(
   BaseStyledComponent: AnyStyledComponent,
   styles: ST
-): { [key in keyof ST]: React.FC<CP> } {
+): { [key in keyof ST]: React.FC<CP & ComponentVariant> } {
   return !!styles && Object.keys(styles).length >= 1
     ? Object.entries(styles).reduce((acc, entry) => {
         const [prop, style] = entry;
@@ -18,8 +19,8 @@ export function createBaseComponents<ST, CP>(
         }
 
         return acc;
-      }, {} as { [key in keyof ST]: React.FC<CP> })
-    : ({} as { [key in keyof ST]: React.FC<CP> });
+      }, {} as { [key in keyof ST]: React.FC<CP & ComponentVariant> })
+    : ({} as { [key in keyof ST]: React.FC<CP & ComponentVariant> });
 }
 
 export function createStyledFunctionComponent<ST, CP>(

diff --git a/packages/component-generator/src/createStyledComponent.ts b/packages/component-generator/src/createStyledComponent.ts
@@ -11,18 +11,22 @@ import {
   shadow,
   space,
   typography,
+  variant,
+  VariantArgs,
   styleFn
 } from 'styled-system';
 
 import { BaseComponentProps } from './typings';
 
 export function createStyledComponent<CP>(
-  systemStyleProps: styleFn[] = [],
   baseStyles: CSSObject = {},
+  variants: VariantArgs<Record<string, unknown>, string, string> = {},
+  systemStyleProps: styleFn[] = [],
   element: keyof JSX.IntrinsicElements = 'div'
 ): AnyStyledComponent {
   return styled(element)<BaseComponentProps & CP>(
     baseStyles,
+    variant(variants),
     compose(
       background,
       border,

diff --git a/packages/component-generator/src/typings.ts b/packages/component-generator/src/typings.ts
@@ -30,3 +30,5 @@ export type BaseComponentProps =
   | ShadowProps
   | SpaceProps
   | TypographyProps;
+
+export type ComponentVariant = { variant?: string };
diff --git a/packages/flex/src/FlexColBase.tsx b/packages/flex/src/FlexColBase.tsx
@@ -2,8 +2,12 @@ import { flexbox } from 'styled-system';
 import { createStyledComponent } from '@artifak/component-generator';
 import { FlexColBaseProps } from './typings';
 
-export const FlexColBase = createStyledComponent<FlexColBaseProps>([flexbox], {
-  boxSizing: 'border-box',
-  position: 'relative',
-  flex: '0 0 auto'
-});
+export const FlexColBase = createStyledComponent<FlexColBaseProps>(
+  {
+    boxSizing: 'border-box',
+    position: 'relative',
+    flex: '0 0 auto'
+  },
+  {},
+  [flexbox]
+);
diff --git a/packages/flex/src/FlexRowBase.tsx b/packages/flex/src/FlexRowBase.tsx
@@ -2,8 +2,12 @@ import { flexbox } from 'styled-system';
 import { createStyledComponent } from '@artifak/component-generator';
 import { FlexRowBaseProps } from './typings';
 
-export const FlexRowBase = createStyledComponent<FlexRowBaseProps>([flexbox], {
-  display: 'flex',
-  flex: '0 1 auto',
-  flexWrap: 'wrap'
-});
+export const FlexRowBase = createStyledComponent<FlexRowBaseProps>(
+  {
+    display: 'flex',
+    flex: '0 1 auto',
+    flexWrap: 'wrap'
+  },
+  {},
+  [flexbox]
+);
diff --git a/packages/grid/src/GridBase.tsx b/packages/grid/src/GridBase.tsx
@@ -10,7 +10,7 @@ import {
 
 import { GridBaseProps } from './typings';
 
-export const GridBase = createStyledComponent<GridBaseProps>([
+export const GridBase = createStyledComponent<GridBaseProps>({}, {}, [
   alignItems,
   alignContent,
   justifyItems,

diff --git a/packages/grid/src/GridItemBase.tsx b/packages/grid/src/GridItemBase.tsx
@@ -10,7 +10,7 @@ import {
 
 import { GridItemBaseProps } from './typings';
 
-export const GridItemBase = createStyledComponent<GridItemBaseProps>([
+export const GridItemBase = createStyledComponent<GridItemBaseProps>({}, {}, [
   alignSelf,
   gridArea,
   gridRow,

diff --git a/packages/imagery/src/ImageryBase.tsx b/packages/imagery/src/ImageryBase.tsx
@@ -13,7 +13,8 @@ const imageStylesConfig = system({
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 export const ImageryBase = createStyledComponent<Partial<ImageryProps>>(
-  [imageStylesConfig],
   { display: 'block', width: '100%', height: 'auto' },
+  {},
+  [imageStylesConfig],
   'img'
 );
diff --git a/packages/typography/src/TypographyBase.tsx b/packages/typography/src/TypographyBase.tsx
@@ -13,4 +13,4 @@ const typographyStylesConfig = system({
 
 export const TypographyBase = createStyledComponent<
   typeof typographyStylesConfig
->([typographyStylesConfig]);
+>({}, {}, [typographyStylesConfig]);