MeUndies Loom

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.
2. Pass the className prop to components, so that style extensions and overrides work reliably on all components.
3. For interactive components, include an interactive example.
4. Interactive components should be keyboard accessible. Use the a11y tab to check for common issues.
5. Tests should at a minimum contain the following three tests:
   1. no default export
   2. properly named export
   3. a "normal" render snapshot
6. Use mount or render for snapshot testing, so that our tools recognize different prop combinations for code coverage.
7. 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
   2. path key maps the component to our codebase
   3. zeplinNames key maps it to Zeplin ( )
   4. 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 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.

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.