Type Rename

- rename StyledSystemCSSObject to ScalableCSS - rename StyledComponentsConfig to BaseConfig - update Blocks, Typography and TextInput to use new type names
heyjul3s · Jan 4, 2021 · cf331e4 · cf331e4
1 parent 212c60f
commit cf331e4
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 36 deletions.
diff --git a/packages/block/src/createBlocks.tsx b/packages/block/src/createBlocks.tsx
@@ -2,7 +2,7 @@ import {
   createComponents,
   ComponentsRecord,
   Settings,
-  StyledComponentConfig
+  BaseConfig
 } from '@artifak/component-generator';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -12,7 +12,7 @@ export function createBlocks<
   Props = Record<string, unknown>,
   Element = HTMLDivElement
 >(
-  base: StyledComponentConfig<Props, ThemeType, Element>,
+  base: BaseConfig<Props, ThemeType, Element>,
   settings: Settings<Element>
 ): ComponentsRecord<Config, Props, ThemeType> {
   return createComponents<Config, ThemeType, Props, Element>(base, settings);

diff --git a/packages/component-generator/src/createComponents.tsx b/packages/component-generator/src/createComponents.tsx
@@ -4,12 +4,7 @@ import isPlainObject from 'lodash.isplainobject';
 import isEmpty from 'lodash.isempty';
 import { createStyledComponent, createFC } from './createStyledComponent';
 
-import {
-  Settings,
-  StyledComponentConfig,
-  Variant,
-  ComponentsRecord
-} from './typings';
+import { Settings, BaseConfig, Variant, ComponentsRecord } from './typings';
 
 export function createComponents<
   Config = any,
@@ -18,7 +13,7 @@ export function createComponents<
   Element = HTMLDivElement
 >(
   base:
-    | StyledComponentConfig<Props, AllHTMLAttributes<Element>, ThemeType>
+    | BaseConfig<Props, AllHTMLAttributes<Element>, ThemeType>
     | React.FC<Props>,
   settings: Settings<Element>
 ): ComponentsRecord<Config, Props, ThemeType> {
@@ -71,7 +66,7 @@ export function generateComponent<
     styles: { ...base.styles, ...setting },
     attrs: { ...base.attrs, ...setting.attrs } || {},
     element: !!setting.as ? setting.as : base.element
-  } as StyledComponentConfig<Props & Variant<ThemeType>, ThemeType, AllHTMLAttributes<Element>>);
+  } as BaseConfig<Props & Variant<ThemeType>, ThemeType, AllHTMLAttributes<Element>>);
 }
 
 /* eslint-disable @typescript-eslint/no-explicit-any */

diff --git a/packages/component-generator/src/createStyledComponent.tsx b/packages/component-generator/src/createStyledComponent.tsx
@@ -15,7 +15,7 @@ import {
   typography
 } from 'styled-system';
 
-import { StyledComponentConfig, StyledSystemCSSObject } from './typings';
+import { BaseConfig, ScalableCSS } from './typings';
 
 const pipe = (...fns) => value => fns.reduce((acc, fn) => fn(acc), value);
 
@@ -24,13 +24,13 @@ export function createStyledComponent<
   Props extends any,
   Theme = void,
   Attributes = void
->(config: StyledComponentConfig<Props, Theme, Attributes>): React.FC<Props> {
+>(config: BaseConfig<Props, Theme, Attributes>): React.FC<Props> {
   const Styled = createStyled<Props, Theme, Attributes>(config);
   return createFC<Props>(Styled, config.styles);
 }
 
 export function createStyled<Props = void, Theme = void, Attributes = void>(
-  config: StyledComponentConfig<Props, Theme, Attributes>
+  config: BaseConfig<Props, Theme, Attributes>
 ) {
   return pipe(
     createStyledElement,
@@ -52,8 +52,8 @@ export function createStyledElement<
   Theme = void,
   Attributes = void
 >(
-  config: StyledComponentConfig<Props, Theme, Attributes>
-): StyledComponentConfig<Props, Theme, Attributes> {
+  config: BaseConfig<Props, Theme, Attributes>
+): BaseConfig<Props, Theme, Attributes> {
   const { element = 'div' } = config;
   return {
     ...config,
@@ -67,8 +67,8 @@ export function createStyledAttributes<
   Theme = void,
   Attributes = void
 >(
-  config: StyledComponentConfig<Props, Theme, Attributes>
-): StyledComponentConfig<Props, Theme, Attributes> {
+  config: BaseConfig<Props, Theme, Attributes>
+): BaseConfig<Props, Theme, Attributes> {
   const { attrs = {} } = config;
   return !!config.component && config.hasOwnProperty('attrs') && !isEmpty(attrs)
     ? { ...config, component: config.component.attrs(attrs) }
@@ -83,7 +83,7 @@ export function applyStyledProps<
   component = styled.div,
   styleProps = [],
   styles
-}: StyledComponentConfig<Props, Theme, Attributes>) {
+}: BaseConfig<Props, Theme, Attributes>) {
   const pseudoStyles = extractStylePseudos(styles);
 
   return component(
@@ -103,9 +103,7 @@ export function applyStyledProps<
   );
 }
 
-export function extractStylePseudos(
-  styles: StyledSystemCSSObject = {}
-): CSSObject {
+export function extractStylePseudos(styles: ScalableCSS = {}): CSSObject {
   return Object.keys(styles).reduce((acc, key) => {
     if (key.includes('&:')) {
       acc[key] = styles[key];

diff --git a/packages/component-generator/src/index.tsx b/packages/component-generator/src/index.tsx
@@ -9,6 +9,7 @@ export {
   BaseComponentProps,
   ComponentsRecord,
   Settings,
-  StyledComponentConfig,
+  BaseConfig,
+  ScalableCSS,
   Variant
 } from './typings';
diff --git a/packages/component-generator/src/typings.ts b/packages/component-generator/src/typings.ts
@@ -38,12 +38,8 @@ export type Attrs<Props, Attributes extends Partial<Props>, ThemeType> =
   | Attributes;
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
-export type StyledComponentConfig<
-  Props = void,
-  Attributes = void,
-  ThemeType = void
-> = {
-  styles?: StyledSystemCSSObject;
+export type BaseConfig<Props = void, Attributes = void, ThemeType = void> = {
+  styles?: ScalableCSS;
   attrs?: Attributes;
   styleProps?: styleFn[];
   element?: keyof JSX.IntrinsicElements;
@@ -57,14 +53,14 @@ export type StyledComponentConfig<
 
 export type CSSObjectWithScale = CSS.Properties<string | number | Scale>;
 export type CSSPseudos = { [K in CSS.Pseudos]?: CSSObjectWithScale };
-export type StyledSystemCSSObject = CSSObjectWithScale & CSSPseudos;
+export type ScalableCSS = CSSObjectWithScale & CSSPseudos;
 
 export type ComponentsRecord<Dict, Props, ThemeType> = {
   [key in keyof Dict | 'Base']: React.FC<Props & BaseProps<ThemeType>>;
 };
 
 export type Settings<Element = HTMLDivElement> = {
-  [key: string]: StyledSystemCSSObject & {
+  [key: string]: ScalableCSS & {
     as?: string;
     attrs?: AllHTMLAttributes<Element>;
   };

diff --git a/packages/text-input/src/createTextInputs.tsx b/packages/text-input/src/createTextInputs.tsx
@@ -3,7 +3,7 @@ import {
   createComponents,
   ComponentsRecord,
   Settings,
-  StyledComponentConfig
+  BaseConfig
 } from '@artifak/component-generator';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -13,7 +13,7 @@ export function createTextInputs<
   ThemeType = any,
   Element = HTMLInputElement
 >(
-  base: StyledComponentConfig<Props, ThemeType, AllHTMLAttributes<Element>>,
+  base: BaseConfig<Props, ThemeType, AllHTMLAttributes<Element>>,
   settings: Settings<Element>
 ): ComponentsRecord<Config, Props, ThemeType> {
   return createComponents<Config, ThemeType, Props, Element>(

diff --git a/packages/typography/src/createTypography.ts b/packages/typography/src/createTypography.ts
@@ -2,7 +2,7 @@ import {
   ComponentsRecord,
   createComponents,
   Settings,
-  StyledComponentConfig
+  BaseConfig
 } from '@artifak/component-generator';
 import { styleFn } from 'styled-system';
 import { TypographyBaseProps } from './typings';
@@ -15,7 +15,7 @@ export function createTypography<
   Props = Record<string, unknown>,
   Element = HTMLDivElement
 >(
-  base: StyledComponentConfig<Props, ThemeType, Element>,
+  base: BaseConfig<Props, ThemeType, Element>,
   settings: Settings<Element>
 ): ComponentsRecord<Config, Props & TypographyBaseProps, ThemeType> {
   const { styleProps } = getStyleProps(base);
@@ -40,8 +40,8 @@ export function getStyleProps<
   Props = Record<string, unknown>,
   Element = HTMLDivElement
 >(
-  base: StyledComponentConfig<Props, ThemeType, Element>
-): StyledComponentConfig<Props, ThemeType, Element> {
+  base: BaseConfig<Props, ThemeType, Element>
+): BaseConfig<Props, ThemeType, Element> {
   if (!base || !Object.keys(base).length) {
     return { styleProps: [] };
   }