Feature - Spacing & Layout

[zakbutcher]

Net New

• added .eslintrc.js from tsdx's project to enable eslint support in vscode
• vscode snippet for defining types based on an array of strings
• Procfile, app.json, & static.json files to deploy PRs to a Heroku dyno 😎
• layout styles supporting basic block & flex styling
• background color support for all colors in palette
• margin & padding via tshirt sizes (s, m, & l)
• font color support for all colors in palette
• mixin for creating tshirt size styles (e.g. margin & padding)
• mixin for generating styles to enable all colors in the color palette for a provided css style (e.g. background & font colors)
• various components to consistently build storybook documentation pages for each component
• color constants and types for use within project
• Box, Block, & Flex components to manage layout
• interface defining default props for most components
• utility functions getKeys & getProps for retrieving specific key-value pairs from a given object. generally used to parse things like props into a subset of values instead of manually destructuring named keys so they can be spread into a component later on, e.g.:

// proposed approach
export const Component = props => (
  const DEFAULT_PROPS = ['id', 'className', 'children'];
  const defaultProps = getProps(props);
  return <div {...defaultProps} />
)

vs

// traditional / alternative approach
export const Component = props => (
  const {
    id,
    className,
    children,
  } = props
  return (
    <div id={id} className={className}>
      {children}
    </div>
  )
)

Updates

• update circleci checks to test coverage 💯
• update jest.config.js to enforce 100% test code coverage 💅
• update package.json to actually make this thing work as a package 👍
• remove @use statements from SASS files because they weren't necessary and were being passed through to the generated CSS bundle
• replace all experimental boolean props with traditional react props due to lack of reliable typescript support (I might just not be doing it right 🤷‍♂️)