Checkout UI Library

Storybook can be accessed at the following URL for testing:

http://checkout-storybook.s3-website-eu-west-1.amazonaws.com/

TODO: only allow our IP to access said URL.

How to Publish: Guidelines

Projects generally start at 1.0.0.

After this, changes should be handled as follows:

• Bug fixes and other minor changes: Patch release, increment the last number, e.g. 1.0.1

npm version patch --no-git-tag-version

• New features which don't break existing features: Minor release, increment the middle number, e.g. 1.1.0

npm version minor --no-git-tag-version

• Changes which break backwards compatibility: Major release, increment the first number, e.g. 2.0.0

npm version major --no-git-tag-version

The command --no-git-tag-version is necessary if we don't want git to add an unnecessary commit.

Npm will tag your latest npm publish with latest.

More info here Semver guidelines

CI Pipeline

The pipeline has three separate stages:

• Build (tests are running here);
• Push image to registry;
• Publish to private npm.

Environmental variables are set in Pipeline > Settings.

Notes

• While $SERVER_IP in the echo command is the name of the EC2 instance without the http, the $PRIVATE_REGISTRY is a full URL (with http).

Go to this http://52.209.246.15/ to see the repo online.

Publish to private npm

In order to push to private npm follow readme instructions on how to publish on that repo.

Flow typed

Flow typed is a dependency used by Flow to deal with third party libraries.

From the Flow documentation: "If a third-party library that has no type information is used by your project, Flow should treat it like any other untyped dependency and mark all of its exports as any." This does not seem to be actually happening and Flow fails at the import with Required module not found.

There are two solutions:

• Download the flow-typed library definitions from the flow-typed repo with:

flow-typed install your-package@version;

• Write a definition yourself, if the above fails (see flow-typed/polished.js for an example).

You will need to install flow-typed globally.

Testing

Styled Components

Our styled components rely on a theme prop passed down via context from ThemeProvider. Our components will not have access to this when we render them in our tests, which means the style snapshots will be incorrect.

To correct this we must either:

1. Import the theme and pass it as a prop directly on the component (if there are no children, or you are shallow rendering with Enzyme).

import theme from '../../themes/resale/base';
const el = renderer.create(
  <Button theme={theme}}>
    Click me
  </Button>
);

2. Wrap our component in the Themify helper (to ensure all children get the theme prop).

import Themify from '../../styles/themify';
const el = renderer.create(
  <Themify>
    <RadioField {...props} />
  </Themify>
);