UI Library

The Sense UI Library is a collection of portable components and utilities that can be deployed in any Sense JavaScript code base.

Because Sense code bases use webpack to resolve imports, this package does not provide bundled, ready-to-run code. Instead, it provides ready-to-build ECMAScript modules and CSS modules. This allows each application to be entirely in charge of how it bundles and splits these modules, but it also means applications must conform to a strict webpack configuration in order to use them.

Installation and Usage

Install using github. (This may change.)

yarn add git+ssh://[email protected]/Spaced-Out/ui-lib.git#3d2945e5802c16b2ac411466bc3cf9a07b6997f2
# or
# npm install --save git+ssh://[email protected]/Spaced-Out/ui-lib.git#3d2945e5802c16b2ac411466bc3cf9a07b6997f2

Then import specific modules.

// @flow

import * as React from 'react';
import classify from '@spaced-out/ui-lib/lib/classify';

export default function MyComponent({className}) {
  return <div classify={classify('my-class', className)}>
    Hello
  </div>;
}

Development

Storybook

We use storybook to view and develop components.

npm run storybook

Generally, developers should create adjacent stories like so.

mymodule/mymodule.jsx
mymodule/mymodule.stories.jsx

These will automatically be compiled and listed in the Storybook UI.

Type Safety

All code should be type safe using Flow. (We may add TypeScript support later.) You can check code using the check script.

npm run check

Testing

We use the Jest testing library. The preferred file name for tests is an adjacent .test file like so.

myutil/myutil.js
myutil/myutil.test.js

Building

We use gulp (I know) to transpile our modules. Currently, built code should be committed and pushed to the repo, but in the future we may use NPM for this.

npm run build
git add lib
git commit
git push

Test Builds

We can take advantage of hash-tagged-releases to do test builds of the ui lib, a one-liner that sort of automates this looks like:

HASHVER=$(git rev-parse --short=9 head)  npm version "0.0.0-${HASHVER}" && npm publish &&  npm dist-tag add "@spaced-out/[email protected]${HASHVER}" next

this grabs the current short hash, sets the version of the library, and then publishes while adding a dist-tag for "next" with the current hash version. Anyone who installs @spaced-out/ui-lib@next will get this version. it's intentionally meant to be fragile, although the hashed version will remain stable for some time.

this is a reasonable way to reference a build for staging.