Loop UI

Installation

npm i -S @loophq/ui

Usage

Recommended

Components can be imported via named imports:

import { BaseCard } from '@loophq/ui;

To import all and register globally (not recommended), run this in your main.js:

import LoopComponents from '@loophq/ui';

app.use(LoopComponents);

Project setup

npm i

Compiles and hot-reloads docs for development

npm run dev

Creates index.js to export all components

npm run build-library

Compiles and minifies library index file for production

npm run build

Publishes a new version of the library

The package.json version must be updated before publishing a new version. The version number should be updated according to the SemVer versioning scheme.

npm publish

With a specific tag

npm publish --tag <tag>

Running Storybook

npm run storybook

Lints and fixes files (JS and CSS)

npm run lint:fix
npm run stylelint:fix

Run your unit tests

Run the entire suite of tests:

npm run test

Run a specific test file:

npm run test <MyTestName>

Using your local loophq/ui as a node module

If you'd like to test the implementation of a component while developing, you can do so with npm link.

In your design-system-2 directory, run:

npm run build-library && npm run build && npm link

In the directory of the project you wish to use the component library, run:

npm link @loophq/ui

Keep in mind, you'll have to rebuild (npm run build) for every change you make to the component library.

Releasing

0. If this is your first time releasing, ask in the engineering team channel to be added to the loop npm organization. Make sure you log in to npm in your terminal as well. Another engineer can also publish the package for you if you're not comfortable with this process.

1. On your machine, check out the branch you'd like to release. This can either be a feature branch or a release branch if you have multiple features to package together as a release. This branch should be PRed into main and be approved by a peer before releasing.

2. Compile and build the component library

   npm run library:build
   npm run build

   (Optional) Commit any file changes the build script made. This is not always necessary but when adding new components this will generally be necessary.

3. Figure out the version number this release will be. We follow SemVer, and the general rule of thumb is that if you're adding new components, bump the minor version, everything else should just bump the patch version. Major versions bumps are rare and should be a team decision. Update the version number in package.json.

4. Publish the library to npm.

   npm publish

5. Commit the version bump and push the changes to Github.

   git add package.json
   git commit -m "Bump version to x.x.x"
   git push

6. In Github, merge the release branch into main.

Documentation

https://loop-ui.netlify.app/?path=/docs/introduction--docs

The documentation is built using Storybook. Components should be documented in the src/stories directory. The documentation is automatically built and deployed to Netlify on every push to the main branch.