npm package: @meundies/loom
Description: Weaving MeUndies
Author: Robert Zablit
Latest version: 9.13.4

# MeUndies Loom

<!-- markdownlint-disable MD033 -->
<div align="center">
  <a href="https://github.com/MeUndies/loom">
    <img width="200" height="200" src="https://user-images.githubusercontent.com/1624718/59139766-230ab400-894a-11e9-94be-b6e91f5f6946.png">
  </a>

  [![Maintainability](https://api.codeclimate.com/v1/badges/9fa4c271886987888566/maintainability)](https://codeclimate.com/repos/5d7c1f1a26c31b01770008cf/maintainability)
  [![Test Coverage](https://api.codeclimate.com/v1/badges/9fa4c271886987888566/test_coverage)](https://codeclimate.com/repos/5d7c1f1a26c31b01770008cf/test_coverage)
  [![CircleCI](https://circleci.com/gh/MeUndies/loom.svg?style=svg&circle-token=81decdbd3d82d3ebeae30f2b5bcfb18f34ca3aa4)](https://circleci.com/gh/MeUndies/loom)
  [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://meundies.github.io/loom)
  ![npm (scoped)](https://img.shields.io/npm/v/@meundies/loom)
</div>
<!-- markdownlint-enable MD033 -->

<https://meundies.github.io/loom>
<https://loom.meundies.dev>

> Weaving MeUndies, one thread at a time.

## Getting Started

To start, download and clone this repository, then install dependencies using `yarn`.

New components can be developed in storybook. Use `yarn run storybook` to start
the storybook server. Each new component should contain stories and be properly
tested using enzyme.

New sub-directories will need to be whitelisted in `package.json` under the `files`
object, or they will be pruned during the build process.

## Component Conventions

For component development, we use the following conventions:

1. No default exports.
1. Pass the `className` prop to components, so that style extensions and overrides
work reliably on all components.
1. For interactive components, include an interactive example.
1. Interactive components should be keyboard accessible. Use the a11y tab to check
for common issues.
1. Tests should at a minimum contain the following three tests:
    1. no default export
    1. properly named export
    1. a "normal" render snapshot
1. Use mount or render for snapshot testing, so that our tools recognize different
prop combinations for code coverage.
1. Connect the component to Zeplin by adding to `.zeplin/components.json`.
`zeplin connect` is run in CI and pulls from our this json file to sync Zeplin
and Storybook to our codebase whenever we merge to master.
    1. Documentation: <https://github.com/zeplin/connected-components-docs>
    1. `path` key maps the component to our codebase
    1. `zeplinNames` key maps it to Zeplin ( )
    1. `storybook` key maps it to Storybook
    <https://github.com/zeplin/connected-components-docs/blob/master/docs/link/STORYBOOK.md>

## Contributing

This project follows the angular commit message guidelines. For more information,
see here: <https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit>

## Using the package from npm

In your project, install using `yarn add @meundies/loom`. Components can be
used as such:

`import { Button } from '@meundies/loom/components'`

## Configuring Fonts

Next, configure your fonts by declaring your body and header font familys as css
variables, following the examples below. You may also use
`./storybook/preview-head.html` as a reference as well.

`
  :root {
    --font-family-body: 'ProximaNova';
    --font-family-header: 'SharpSansNo1';
  }

  @font-face { ...body font }
  @font-face { ...header font }
`

Note: loom is configured to use `bold` over `600` for bold fonts. For best browser
compatibility, define your bold fonts to use `font-weight: bold` instead of `font-weight:
600`. Doing the later can result in inconsistent font weights across Chrome and Firefox.

## Consuming Loom components

The safest way to consume and modify Loom components is to use the props built
in to the component. These are tested and work as intended.

_However_, there may be cases where you may need to style Loom components beyond
what we have natively exposed. Loom components are made using `styled-components`
and follow their best practices so that `styled(LoomComponent)` and other
re-styling syntaxes are facilitated.

<https://styled-components.com/docs/basics#styling-any-component>
<https://styled-components.com/docs/advanced#styling-normal-react-components>

Examples of CSS properties that you might commonly use to extend our
components are: `position`, `margin`, `padding`, `opacity`.

## Using the package locally

We recommend using [yalc](https://www.npmjs.com/package/yalc) for local development.
It accurately reproduces the build and package process used by NPM, and should also
be able to share the package between different node versions you have installed locally.

## Testing

To test changes, run `yarn test`. Components are tested using [Jest](https://jestjs.io/)
and [Enzyme](https://airbnb.io/enzyme/). Snapshots will be generated when a new test
is first run. When a component is changed, snapshots can be updated using
`yarn run test:jest -u`.

## A note on dependencies

All dependencies will likely fall into two buckets - `peerDependencies` or `devDependencies`.

### `peerDependencies`

These are dependencies that the consumer must install, and are required for
this package to work. Some examples are `react` and `react-dom` - both libraries
are not included with loom, but are required for loom to run. When updating these
packages, it also requires the client to update their version as well.

### `devDependencies`

These are dependencies that are only used for development, which are not used by
loom at run time. This includes libraries such as babel, storybook, and typescript.