Merge pull request #14 from heyjul3s/chore/pkg-update

Chore/pkg update

.nvmrc

@@ -1 +1 @@
-14.15.0
+14.15.1

.travis.yml

@@ -1,12 +1,13 @@
 language: node_js
 node_js:
-  - 14.5.0
+  - 14.15.1
 
 before_script:
   - yarn build
 
 script:
+  - yarn bundlesize
   - yarn lint
-  - yarn test -u
+  - yarn test
 
 after_success: yarn coverage

package.json

@@ -28,35 +28,36 @@
     "react-dom": "16.11.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.3",
+    "@babel/core": "^7.12.7",
     "@babel/plugin-transform-runtime": "^7.12.1",
-    "@storybook/addon-actions": "^6.0.28",
-    "@storybook/addon-essentials": "^6.0.28",
-    "@storybook/addon-links": "^6.0.28",
-    "@storybook/addon-storyshots": "^6.0.28",
-    "@storybook/react": "^6.0.28",
-    "@testing-library/jest-dom": "^5.11.5",
-    "@testing-library/react": "^11.1.1",
+    "@babel/preset-typescript": "^7.12.7",
+    "@storybook/addon-actions": "^6.1.2",
+    "@storybook/addon-essentials": "^6.1.2",
+    "@storybook/addon-links": "^6.1.2",
+    "@storybook/addon-storyshots": "^6.1.2",
+    "@storybook/react": "^6.1.2",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.2.2",
     "@types/jest": "^26.0.15",
-    "@typescript-eslint/eslint-plugin": "^4.6.1",
-    "@typescript-eslint/parser": "^4.6.1",
+    "@typescript-eslint/eslint-plugin": "^4.8.1",
+    "@typescript-eslint/parser": "^4.8.1",
     "babel-jest": "^26.6.3",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "^8.2.1",
     "coveralls": "^3.1.0",
-    "eslint": "^7.12.1",
+    "eslint": "^7.14.0",
     "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.21.5",
     "eslint-watch": "^7.0.0",
     "jest": "^26.6.3",
     "jest-dom": "^4.0.0",
     "jest-runner-eslint": "^0.10.0",
-    "jest-styled-components": "^6.3.4",
+    "jest-styled-components": "^7.0.3",
     "lerna": "^3.22.1",
     "react-is": "^17.0.1",
     "rimraf": "^3.0.2",
-    "ts-jest": "^26.4.3",
-    "typescript": "^4.0.5"
+    "ts-jest": "^26.4.4",
+    "typescript": "^4.1.2"
   },
   "dependencies": {
     "@changesets/cli": "^2.11.2"

packages/block/src/createBlockComponents.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
-import { createBaseComponents } from '@artifak/component-generator';
+import React, { HTMLAttributes } from 'react';
+import { createBaseComponents, Settings } 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
+export function createBlockComponents<S, A = HTMLDivElement>(
+  settings: { [key in keyof S]: Settings<HTMLAttributes<A>> }
 ): { [key in keyof any]: React.FC<BlockBaseProps> } {
-  return createBaseComponents<S, BlockBaseProps>(BlockBase, styles);
+  return createBaseComponents<S, BlockBaseProps, A>(BlockBase, settings);
 }

packages/component-generator/src/createBaseComponents.tsx

@@ -1,14 +1,12 @@
 import React, { HTMLAttributes } from 'react';
 import { AnyStyledComponent } from 'styled-components';
-import { ComponentVariant } from './typings';
+import { ComponentVariant, Settings } from './typings';
 
-export type Settings<A> = {
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  styles: { [key in keyof any]: string | string[] | number | number[] };
-  attrs?: A;
-};
-
-export function createBaseComponents<S, P, A>(
+export function createBaseComponents<
+  S,
+  P = Record<string, unknown>,
+  A = HTMLDivElement
+>(
   BaseStyledComponent: AnyStyledComponent,
   settings: { [key in keyof S]: Settings<HTMLAttributes<A>> }
 ): { [key in keyof S]: React.FC<P & ComponentVariant> } {

packages/component-generator/src/createStyledComponent.ts

@@ -16,7 +16,7 @@ import {
 
 import { BaseComponentProps, CreateStyledComponent } from './typings';
 
-export function createStyledComponent<P>(
+export function createStyledComponent<P = void>(
   config: CreateStyledComponent
 ): AnyStyledComponent {
   const {

packages/component-generator/src/index.tsx

@@ -10,5 +10,6 @@ export {
   StyledReactComponent,
   ComponentVariant,
   CreateStyledComponent,
-  CreateBaseComponentsConfig
+  CreateBaseComponentsConfig,
+  Settings
 } from './typings';

packages/component-generator/src/typings.ts

@@ -57,3 +57,9 @@ export interface CreateBaseComponentsConfig {
     as?: keyof JSX.IntrinsicElements;
   } & CSSObject;
 }
+
+export type Settings<A = void> = {
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  styles: { [key in keyof any]: string | string[] | number | number[] };
+  attrs?: A;
+};

packages/flex/__tests__/__snapshots__/flexCol.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`FlexCol FlexCol should render 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa iEqPSd"
+    class="sc-bdVaJa fOFgQS"
   >
     Test
   </div>

packages/flex/__tests__/__snapshots__/flexRow.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`FlexRow FlexRow component should render 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa fbcjFX"
+    class="sc-bdVaJa dZjhST"
   >
     Flex Row
   </div>
@@ -13,7 +13,7 @@ exports[`FlexRow FlexRow component should render 1`] = `
 exports[`FlexRow FlexRow component should render row-reverse 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa fbcjFX"
+    class="sc-bdVaJa tvNuj"
   >
     Flex Row Reverse
   </div>

packages/grid/__tests__/__snapshots__/gridItem.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`GridItem should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa jHtUIz"
+    class="sc-bdVaJa bDWFJH"
   >
     Grid Item
   </div>
@@ -13,7 +13,7 @@ exports[`GridItem should render correctly 1`] = `
 exports[`GridItemBase should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa jHtUIz"
+    class="sc-bdVaJa bDWFJH"
   >
     Grid Item Base
   </div>

packages/imagery/__tests__/__snapshots__/Imagery.test.tsx.snap

@@ -2,9 +2,9 @@
 
 exports[`Img should render an img element with src and alt defined 1`] = `
 <DocumentFragment>
-  <div
+  <img
     alt="hello world"
-    class="sc-bdVaJa kDzGxq"
+    class="sc-bdVaJa hHijb"
     src="https://source.unsplash.com/random/10x10"
   />
 </DocumentFragment>

packages/imagery/__tests__/__snapshots__/ImageryBase.test.tsx.snap

@@ -2,16 +2,16 @@
 
 exports[`ImageryBase should render 1`] = `
 <DocumentFragment>
-  <div
-    class="sc-bdVaJa kDzGxq"
+  <img
+    class="sc-bdVaJa hHijb"
   />
 </DocumentFragment>
 `;
 
 exports[`ImageryBase should render styles object-fit and object-position 1`] = `
 <DocumentFragment>
-  <div
-    class="sc-bdVaJa kDzGxq"
+  <img
+    class="sc-bdVaJa hgNDTD"
   />
 </DocumentFragment>
 `;

packages/typography/src/createTypographyComponents.ts

@@ -1,9 +1,16 @@
-import { createBaseComponents } from '@artifak/component-generator';
+import { HTMLAttributes } from 'react';
+import { createBaseComponents, Settings } from '@artifak/component-generator';
 import { TypographyBaseProps } from './typings';
 import { TypographyBase } from './TypographyBase';
 
-export function createTypographyComponents<S>(
-  styles: S
+export function createTypographyComponents<
+  S,
+  A = HTMLHeadingElement & HTMLParagraphElement
+>(
+  settings: { [key in keyof S]: Settings<HTMLAttributes<A>> }
 ): { [key in keyof S]: React.FC<TypographyBaseProps> } {
-  return createBaseComponents<S, TypographyBaseProps>(TypographyBase, styles);
+  return createBaseComponents<S, TypographyBaseProps, A>(
+    TypographyBase,
+    settings
+  );
 }