@sibipro/caffeine

sibi-component-demo

Project Scripts

Note: All Commands Must Be Run inside the packages/components/ directory

yarn new

Used to scaffold new assets from templates in this repo. Running this command will ask some questions about what you need and will produce what you need based on your answers.

yarn storybook

Starts storybook server to preview components. Available at localhost:9002.

yarn build

Build app for production to ./dist folder.

yarn build:watch

Watches for changes in src/ and rebuilds the bundle on save.

yarn test

Run jest tests. Use yarn test --watch to run in watch mode.

NOTE: Warning messages are hidden by default. Use JEST_SHOW_WARNING=1 yarn test to show them.

yarn test:watch

Same as using yarn test --watch, but automatically runs files that differ from master.

yarn test:ci

Run jest tests for CI context

• Bails out if any fail.
• Avoids printing unecessary output.
• Generates coverage reports.

Development

propTypes needs to be as strict as possible

A component's propTypes act as documentation and enforce usage. This also means that you should never spread props into the child component when they are part of our API; any prop that we rely on, and this should include nearly all props, need to be defined in the propTypes for the component.

• Never use PropType.object as a top-level propType, and rarely when nested, always prefer PropType.shape
• Prefer PropType.oneOf([]) over PropType.string
• Try to use .isRequired when possible, but fall back to defaultProps as needed

Don't hard-code appearance styles

Styles that control appearance, like borders, border radius, colors, etc, should never be hard-coded. The values you need should exist as part of the theme, often as a component override.

And more generally, all values should be pulled from the theme. This leaves the power in the theme and allows components to be re-used across assets. Instead of using values like 4px or red, reference the theme object instead.

Calculating classNames

Use clsx to calculate classNames on a component. Its use will be optimized in the build. You can read more about this module here.

Adding warnings in development

Use tiny-warning, which will be wrapped in a production check in the build. Example:

// src/index.js
import warning from 'tiny-warning';

warning(true, 'I am warning you');

// dist/index.js
import warning from 'tiny-warning';

process.env.NODE_ENV !== 'production' && warning(true, 'I am warning you');

Adding data attributes for test selection

Use data-test attributes on components if you need to select them in tests. These attributes will be removed from the build.

Example:

// src/component.js
const Componet = () => <div data-test="myTestSubject">Test Me</div>;

// dist/component.js
const Componet = () => <div>Test Me</div>;

Deployments

Automatic release on version change

The postversion script will automatically run the release script each time a new version tag is pushed. Here's the procedure for publishing a new version:

• npm version (major|minor|patch)
• git add package.json
• Commit the version bump in the package.json file
• Create matching tag with git tag vx.x.x (where x.x.x is the new version)
• git push && git push --tags

Deploying storybook site

The storybook site, available at http://caffeine.sibi.sh, is built and deployed on now.sh. Deployments happen from the root of the project.

# From project root, not package root
yarn now

This will build the site and show a URL. Use the hash-based url, not your user alias (the one in cyan). You can load it and verify that everything worked, then you can promote that to the main site with the following command:

# XXXXX below is your unique hash
yarn now alias set caffeine-XXXXX.sibi.sh caffeine.sibi.sh