Build, Style, & Typescript Hotfix (#42)

zakbutcher · web-flow · commit caec2cf8f528 · 2020-06-06T16:09:55.000-04:00
* Update absolute import paths to relative for better typescript support.  Update styles for better experience using grids.  Update build to ignore all test files

* move all tests into separate folder at root level and update import paths to stop after foundations directory to ensure index files are covered by tests

* Update grid image to reflect updated CSS
diff --git a/.loki/reference/chrome_laptop_Foundations_Layout_Grid.png b/.loki/reference/chrome_laptop_Foundations_Layout_Grid.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a950bc610affc752e1bfa7bcf48f3ad6c17c43760ca86ee41451ec970dc3ddb6
-size 62836
+oid sha256:5e096a060538193173ef09236e913c90ec470056bed75729b1011436787e2ea5
+size 62845
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "typescript.preferences.importModuleSpecifier": "relative"
+}
diff --git a/jest.config.js b/jest.config.js
@@ -16,6 +16,6 @@ module.exports = {
       statements: 100,
     },
   },
-  testMatch: ['**/__tests__/**/*.test.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
+  testMatch: ['**/test/**/*.test.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
   testPathIgnorePatterns: ['/node_modules/', '/dist/'],
 };
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
   ],
   "scripts": {
     "start": "tsdx watch",
-    "build": "tsdx build && yarn build-styles",
+    "build": "tsdx build --tsconfig ./tsconfig.json && yarn build-styles",
     "heroku-postbuild": "build-storybook",
     "test": "tsdx test --passWithNoTests",
     "test:ci-local-config": "circleci config process .circleci/config.yml > process.yml",
diff --git a/sass/foundations/layout.scss b/sass/foundations/layout.scss
@@ -136,6 +136,8 @@ $justification: flex-start, flex-end, center, stretch, space-between, space-arou
 }
 .grid {
   display: grid;
+  height: 100%;
+  width: 100%;
   $grid: &;
   @include align-self-and-items;
 
@@ -148,8 +150,8 @@ $justification: flex-start, flex-end, center, stretch, space-between, space-arou
   &--hbf {
     grid-template-columns: 1fr;
     grid-template-rows:
-      minmax(min-content, 1fr) minmax(min-content, auto)
-      minmax(min-content, 1fr);
+      minmax(min-content, max-content) minmax(min-content, auto)
+      minmax(min-content, max-content);
     grid-template-areas: 'header' 'body' 'footer';
     #{$grid}-header {
       grid-area: header;
diff --git a/src/_stories/foundations/color-story-components.tsx b/src/_stories/foundations/color-story-components.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import { Box, Column, Row } from 'foundations/layout';
-import { COLOR } from 'foundations/colors';
-import { Story, ColorStack, TRenderColorShade } from '_stories/story-components';
+import { COLOR, Box, Column, Row } from '../../foundations';
+import { Story, ColorStack, TRenderColorShade } from '../story-components';
 
 const renderColorShade: TRenderColorShade = ({ colorShade }) => (
   <Box bg={colorShade} />
diff --git a/src/_stories/foundations/layout/layout-story-components.tsx b/src/_stories/foundations/layout/layout-story-components.tsx
@@ -1,12 +1,18 @@
 import React from 'react';
-import { Flex as Fx, Fonts, Column, Grid as Gd, HBFGrid } from 'foundations';
 import { IKeyedObject } from '../../../utilities';
 import {
+  Fonts,
+  Flex as Fx,
+  Column,
+  Grid as Gd,
+  HBFGrid,
+} from '../../../foundations';
+import {
+  TRenderColorShade,
   Story,
-  ColorStack,
   FloatingPropTable,
-  TRenderColorShade,
-} from '_stories/story-components';
+  ColorStack,
+} from '../../story-components';
 
 const sizeMap = {
   '0': '0;',
@@ -47,7 +53,7 @@ const renderBgColorShade: TRenderColorShade = ({ shade, colorShade }) => (
     </Fonts.Body>
   </>
 );
-const renderBcColorShade: TRenderColorShade = ({ shade, colorShade }) => (
+const renderBcColorShade: TRenderColorShade = ({ colorShade }) => (
   <>
     <Fonts.Body weight="bold">{colorShade}</Fonts.Body>
     <Fx flex="grow" />
diff --git a/src/_stories/foundations/typography-story-components.tsx b/src/_stories/foundations/typography-story-components.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { Fonts } from 'foundations';
-import { Story, FloatingPropTable } from '_stories/story-components';
+import { Fonts } from '../../foundations';
+import { Story, FloatingPropTable } from '../story-components';
 
 const type = {
   display: '',
diff --git a/src/_stories/story-components/color-stack.tsx b/src/_stories/story-components/color-stack.tsx
@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
-import { Row, Fonts, SHADE, Flex } from 'foundations';
-import { TColorShade } from 'foundations/colors';
 import { isNullOrUndefined } from '../../utilities';
+import { Fonts, SHADE, TColorShade, Row, Flex } from '../../foundations';
 
 export interface IRenderColorShade {
   color: string;
diff --git a/src/_stories/story-components/floating-card.tsx b/src/_stories/story-components/floating-card.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
-import { IDefaultProps } from 'types';
-import { Flex } from 'foundations';
+import { Flex } from '../../foundations';
+import { IDefaultProps } from '../../types';
 
 export const FloatingCard: FC<IDefaultProps> = ({ children }) => (
   <Flex bg="grey-1">
diff --git a/src/_stories/story-components/floating-prop-table.tsx b/src/_stories/story-components/floating-prop-table.tsx
@@ -1,7 +1,8 @@
 import React, { FC } from 'react';
-import { IPropTable, FloatingCard, PropTable } from '_stories/story-components';
-import { Fonts, Flex } from 'foundations';
 import { isNullOrUndefined } from '../../utilities';
+import { Flex, Fonts } from '../../foundations';
+import { IPropTable, PropTable } from './prop-table';
+import { FloatingCard } from './floating-card';
 
 interface IFloatingPropTable extends Partial<IPropTable> {
   propName: string;
diff --git a/src/_stories/story-components/prop-table.tsx b/src/_stories/story-components/prop-table.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
-import { Row, Column, Fonts, Flex } from 'foundations';
 import { IKeyedObject } from '../../utilities';
+import { Column, Row, Fonts, Flex } from '../../foundations';
 
 export interface IPropTable {
   data: IKeyedObject<string>;
diff --git a/src/_stories/story-components/story.tsx b/src/_stories/story-components/story.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
-import { IDefaultProps } from 'types';
-import { Block } from 'foundations';
 import { Title } from './title';
+import { IDefaultProps } from '../../types';
+import { Block } from '../../foundations';
 
 interface IStory extends IDefaultProps {
   title: string;
diff --git a/src/_stories/story-components/title.tsx b/src/_stories/story-components/title.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
-import { Fonts, Block } from 'foundations';
-import { IDefaultProps } from 'types';
+import { IDefaultProps } from '../../types';
+import { Block, Fonts } from '../../foundations';
 
 export const Title: FC<IDefaultProps> = ({ children }) => (
   <Block p="l" bg="seafoam-6">
diff --git a/src/foundations/layout/box.tsx b/src/foundations/layout/box.tsx
@@ -1,8 +1,8 @@
 import React, { FC } from 'react';
 import classnames from 'classnames';
-import { TColorShade } from 'foundations';
 import { IDefaultProps, getDefaultProps } from '../../types';
 import { createClassName, isNullOrUndefined } from '../../utilities';
+import { TColorShade } from '../colors';
 
 //#region T Shirt Sizes
 export const SHIRT_SIZE = ['0', 's', 'm', 'l'] as const;
diff --git a/src/foundations/layout/index.ts b/src/foundations/layout/index.ts
@@ -1,7 +1,5 @@
-import { Box } from './box';
-import { Block } from './block';
-import { Grid } from './grid';
-import { HBFGrid } from './grids';
-import { Flex, Row, Column } from './flex';
-
-export { Block, Box, Flex, Row, Column, Grid, HBFGrid };
+export * from './box';
+export * from './block';
+export * from './flex';
+export * from './grid';
+export * from './grids';
diff --git a/src/foundations/typography/index.tsx b/src/foundations/typography/index.tsx
@@ -2,8 +2,8 @@ import React, { FC } from 'react';
 import classnames from 'classnames';
 import { createClassName, isNullOrUndefined } from '../../utilities';
 import { IDefaultProps, getDefaultProps } from '../../types';
-import { TColorShade } from 'foundations/colors';
-import { TShirtSize } from 'foundations/layout/box';
+import { TColorShade } from '../colors';
+import { TShirtSize } from '../layout/box';
 
 /**
  * Docs on everything you can do w/ fonts: https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals
diff --git a/src/utilities/index.ts b/src/utilities/index.ts
@@ -1,4 +1,3 @@
 export * from './create-class-name';
 export * from './key-map';
 export * from './type-guards';
-export * from './testing-utils';
diff --git a/test/foundations/__snapshots__/typography.test.tsx.snap b/test/foundations/__snapshots__/typography.test.tsx.snap
diff --git a/test/foundations/colors.test.ts b/test/foundations/colors.test.ts
@@ -9,7 +9,7 @@ import {
   isColorObject,
   colorIsInPalette,
   getPaletteColor,
-} from '..';
+} from '../../src/foundations';
 
 describe('Colors', () => {
   it('Shadeless Color List is default', () => {
diff --git a/test/foundations/layout/__snapshots__/block.test.tsx.snap b/test/foundations/layout/__snapshots__/block.test.tsx.snap
diff --git a/test/foundations/layout/__snapshots__/box.test.tsx.snap b/test/foundations/layout/__snapshots__/box.test.tsx.snap
diff --git a/test/foundations/layout/__snapshots__/flex.test.tsx.snap b/test/foundations/layout/__snapshots__/flex.test.tsx.snap
diff --git a/test/foundations/layout/block.test.tsx b/test/foundations/layout/block.test.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
-import { Block } from 'foundations';
 import { render } from '@testing-library/react';
 import {
   TEXT_OVERFLOW,
   BLOCK_DISPLAY,
   OVERFLOW,
   OVERFLOW_WRAP,
   WHITE_SPACE,
-} from '../block';
-import { renderAndTestProps } from '../../../utilities';
+  Block,
+} from '../../../src/foundations';
+import { renderAndTestProps } from '../../../src/utilities/testing-utils';
 
 describe('Block', () => {
   it('Renders default', () => {
diff --git a/test/foundations/layout/box.test.tsx b/test/foundations/layout/box.test.tsx
@@ -1,9 +1,7 @@
 import React from 'react';
-import { Box } from 'foundations';
 import { render } from '@testing-library/react';
-import { COLOR_SHADE } from 'foundations';
-import { SHIRT_SIZE, DISPLAY } from '../box';
-import { renderAndTestProps } from '../../../utilities';
+import { renderAndTestProps } from '../../../src/utilities/testing-utils';
+import { COLOR_SHADE, Box, SHIRT_SIZE, DISPLAY } from '../../../src/foundations';
 
 describe('Box', () => {
   it('Renders default', () => {
diff --git a/test/foundations/layout/flex.test.tsx b/test/foundations/layout/flex.test.tsx
@@ -1,14 +1,16 @@
 import React from 'react';
-import { Flex, Row, Column } from 'foundations';
 import { render } from '@testing-library/react';
-import { renderAndTestProps } from '../../../utilities';
+import { renderAndTestProps } from '../../../src/utilities/testing-utils';
 import {
   FLEX_DISPLAY,
   FLEX_DIRECTION,
   FLEX_ALIGN,
   JUSTIFY_CONTENT,
   FLEX,
-} from '../flex';
+  Flex,
+  Row,
+  Column,
+} from '../../../src/foundations';
 
 describe('Flex', () => {
   it('Renders default', () => {
diff --git a/test/foundations/layout/grid/__snapshots__/grid.test.tsx.snap b/test/foundations/layout/grid/__snapshots__/grid.test.tsx.snap
diff --git a/test/foundations/layout/grid/__snapshots__/header-body-footer.test.tsx.snap b/test/foundations/layout/grid/__snapshots__/header-body-footer.test.tsx.snap
diff --git a/test/foundations/layout/grid/grid.test.tsx b/test/foundations/layout/grid/grid.test.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
-import { Grid } from 'foundations';
 import { render } from '@testing-library/react';
-import { renderAndTestProps } from '../../../utilities';
-import { GRID_DISPLAY, GRID_TYPE } from '../grid';
+import { renderAndTestProps } from '../../../../src/utilities/testing-utils';
+import { GRID_DISPLAY, GRID_TYPE, Grid } from '../../../../src/foundations';
 
 describe('Grid', () => {
   describe('Base Grid', () => {
diff --git a/test/foundations/layout/grid/header-body-footer.test.tsx b/test/foundations/layout/grid/header-body-footer.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { HBFGrid } from 'foundations';
 import { render } from '@testing-library/react';
+import { HBFGrid } from '../../../../src/foundations';
 
 describe('Grid', () => {
   describe('HBF Grid', () => {
diff --git a/test/foundations/typography.test.tsx b/test/foundations/typography.test.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
-import { Fonts } from 'foundations';
 import { render } from '@testing-library/react';
-import { renderAndTestProps } from '../../../utilities';
-import { TEXT_ALIGN, TEXT_TRANSFORM } from '..';
-import { SHIRT_SIZE } from 'foundations/layout/box';
+import { renderAndTestProps } from '../../src/utilities/testing-utils';
+import {
+  SHIRT_SIZE,
+  Fonts,
+  TEXT_ALIGN,
+  TEXT_TRANSFORM,
+} from '../../src/foundations';
 
 describe('Typography', () => {
   it('Renders Default', () => {
diff --git a/test/utilities/create-class-name.test.ts b/test/utilities/create-class-name.test.ts
@@ -1,4 +1,4 @@
-import { createClassName } from '../../utilities';
+import { createClassName } from '../../src/utilities';
 
 describe('Utils - createClassName', () => {
   it('Returns empty array for null or undefined', () =>
diff --git a/test/utilities/key-map.test.ts b/test/utilities/key-map.test.ts
@@ -1,4 +1,4 @@
-import { getKeys, getProps } from '../key-map';
+import { getKeys, getProps } from '../../src/utilities';
 
 describe('Utils - Key Map', () => {
   describe('getKeys', () => {
diff --git a/test/utilities/type-guards.test.ts b/test/utilities/type-guards.test.ts
@@ -1,4 +1,9 @@
-import { isString, isNullOrUndefined, isNull, isUndefined } from '../../utilities';
+import {
+  isString,
+  isNullOrUndefined,
+  isNull,
+  isUndefined,
+} from '../../src/utilities';
 
 describe('Utils - Type Guards', () => {
   describe('isString', () => {
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "include": ["src"],
+  "exclude": ["**/test/**", "testing-utils.tsx"],
   "compilerOptions": {
     "target": "es5",
     "module": "esnext",

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "typescript.preferences.importModuleSpecifier": "relative"`
	`3`	`+}`