MeUndies Loom

!npm (scoped)

> 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:
1. path key maps the component to our codebase
1. zeplinNames key maps it to Zeplin ( )
1. storybook key maps it to Storybook

Contributing

This project follows the angular commit message guidelines. For more information,
see here:

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.

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 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
and 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.

$3

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.

$3

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.