Merge 93ffe24 into 9d0b7a8

packages/artifak/src/index.tsx

@@ -3,7 +3,7 @@ export {
   createComponents
 } from '@artifak/component-generator';
 
-export { BlockBase, createBlockComponents } from '@artifak/block';
+export { BlockBase, createBlocks } from '@artifak/block';
 export { BlockBaseProps } from '@artifak/block';
 
 export { FlexRow, FlexRowBase, FlexCol, FlexColBase } from '@artifak/flex';
@@ -13,7 +13,7 @@ export { Grid, GridBase, GridItem, GridItemBase } from '@artifak/grid';
 export { GridBaseProps, GridItemBaseProps } from '@artifak/grid';
 
 export {
-  createTypoComponents,
+  createTypography,
   fontWeight,
   TypographyBase
 } from '@artifak/typography';

packages/block/__tests__/block.test.ts

@@ -1,19 +1,35 @@
-import { createBlockComponents } from '../src';
-import { mockBlockStyles } from '../__mocks__/block.mock';
+import { createBlocks } from '../src';
 
 describe('@artifak/block', () => {
-  describe('createBlockComponents - generates Block React components based on styles object argument provided', () => {
+  describe('createBlocks - generates Block React components based on styles object argument provided', () => {
     it('should return the base Typography system component when provided with an invalid argument', () => {
       const expected = {};
-      expect(createBlockComponents({} as any)).toEqual(expected);
-      expect(createBlockComponents(null as any)).toEqual(expected);
-      expect(createBlockComponents(false as any)).toEqual(expected);
-      expect(createBlockComponents(0 as any)).toEqual(expected);
-      expect(createBlockComponents(void 0 as any)).toEqual(expected);
+      expect(createBlocks({} as any, {} as any)).toEqual(expected);
+      expect(createBlocks(null as any, null as any)).toEqual(expected);
+      expect(createBlocks(false as any, false as any)).toEqual(expected);
+      expect(createBlocks(0 as any, 0 as any)).toEqual(expected);
+      expect(createBlocks(void 0 as any, void 0 as any)).toEqual(expected);
     });
 
     it('should create React components', () => {
-      expect(createBlockComponents(mockBlockStyles)).toBeDefined();
+      expect(
+        createBlocks(
+          {
+            styles: {
+              display: 'block'
+            }
+          },
+          {
+            BlockPadSM: {
+              padding: [15]
+            },
+
+            BlockPadMD: {
+              padding: [15, 30]
+            }
+          }
+        )
+      ).toBeDefined();
     });
   });
 });

packages/block/index.stories.tsx

@@ -1,4 +1,4 @@
-import { BlockBase, createBlockComponents } from './src';
+import { BlockBase, createBlocks } from './src';
 
 export function BlockBaseUsage() {
   return <BlockBase>A Block Base</BlockBase>;
@@ -23,9 +23,10 @@ const components = {
   }
 };
 
-const { FlexContainer, UnpaddedContainer } = createBlockComponents<
-  typeof components
->(base, components);
+const { FlexContainer, UnpaddedContainer } = createBlocks<typeof components>(
+  base,
+  components
+);
 
 export function CreateBlocksUsage() {
   return (

packages/block/src/createBlockComponents.tsx → packages/block/src/createBlocks.tsx

@@ -7,7 +7,7 @@ import {
 } from '@artifak/component-generator';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
-export function createBlockComponents<
+export function createBlocks<
   Config,
   ThemeType = any,
   Props = Record<string, unknown>,

packages/block/src/index.tsx

@@ -1,3 +1,3 @@
-export { createBlockComponents } from './createBlockComponents';
+export { createBlocks } from './createBlocks';
 export { BlockBase } from './BlockBase';
 export { BlockBaseProps } from './typings';

packages/component-generator/src/createComponents.tsx

@@ -38,7 +38,8 @@ export function createComponents<
         if (hasKey(settings, prop)) {
           acc[prop] = createStyledComponent({
             ...base,
-            styles: { ...base.styles, ...setting }
+            styles: { ...base.styles, ...setting },
+            element: !!setting.as ? setting.as : base.element
           } as StyledComponentConfig<Props & Variant<ThemeType>, ThemeType, HTMLAttributes<Element>>);
 
           acc[prop].displayName = prop;

packages/component-generator/src/typings.ts

@@ -63,5 +63,5 @@ export type GenericRecord<Dict, Type> = {
 };
 
 export type Settings = {
-  [key: string]: StyledSystemCSSObject & { as?: keyof JSX.IntrinsicElements };
+  [key: string]: StyledSystemCSSObject & { as?: string };
 };

packages/typography/__tests__/createTypography.test.ts

@@ -0,0 +1,28 @@
+import { position } from 'styled-system';
+import { createTypography, getStyleProps, fontWeight } from '../src';
+
+describe('createTypography - generates typography React components based on styles object argument provided', () => {
+  it('should return the base Typography system component when provided with an invalid argument', () => {
+    expect(createTypography({} as any, {} as any)).toHaveProperty('Base');
+    expect(createTypography(null as any, null as any)).toHaveProperty('Base');
+    expect(createTypography(false as any, false as any)).toHaveProperty('Base');
+    expect(createTypography(0 as any, 0 as any)).toHaveProperty('Base');
+    expect(createTypography(void 0 as any, void 0 as any)).toHaveProperty(
+      'Base'
+    );
+  });
+
+  it('should create React components', () => {
+    expect(
+      createTypography(
+        {},
+        {
+          H1: {
+            marginBottom: [15],
+            as: 'h1'
+          }
+        }
+      )
+    ).toBeDefined();
+  });
+});

packages/typography/index.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createTypographyComponents, fluidSizing } from './src';
+import { createTypography } from './src';
 import styled from 'styled-components';
 import { variant } from 'styled-system';
 
@@ -11,7 +11,7 @@ const base = {
 
 const components = {
   H1: {
-    fontSize: fluidSizing(48, 96, 300, 1200),
+    fontSize: [48, 96],
     margin: '0 0 0.25em',
     as: 'h1'
   },
@@ -82,7 +82,7 @@ const {
   SmallLead,
   Paragraph,
   SmallParagraph
-} = createTypographyComponents<typeof components>(base, components);
+} = createTypography<typeof components>(base, components);
 
 const SysH1 = styled(H1)(
   variant({

packages/typography/src/createTypoComponents.ts → packages/typography/src/createTypography.ts

@@ -10,7 +10,7 @@ import { TypographyBaseProps } from './typings';
 import { typographyStyleProps } from './TypographyBase';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
-export function createTypoComponents<
+export function createTypography<
   Config,
   ThemeType = any,
   Props = Record<string, unknown>,

packages/typography/src/index.tsx

@@ -1,4 +1,4 @@
-export { createTypoComponents, getStyleProps } from './createTypoComponents';
+export { createTypography, getStyleProps } from './createTypography';
 export { TypographyBase } from './TypographyBase';
 export { fontWeight } from './fontWeight';
 export { TypographyBaseProps } from './typings';