BJS Components

This project contains a series of React Components designed bespokely for BJS Home Delivery. In order to reduce boilerplate, this library also consumes from Ant Design with several overrides to maintain the BJS look and feel defined in the guidelines.

Overview

Project

The project is built with TypeScript to ensure all component props can be defined statically and further integration with storybooks. CJS and ES modules are supported, though all components should be defined in ES for consistency purposes and its ability for tree-shaking.

Rollup is used to bundle the project.

Component styles are built with Styled Components to allow CSS to be defined at JSX level and should be followed as convention.

Defining a component

Please ensure that the exportation format matches the following:

index.tsx (Project root)

export type { Props } from "./package";
export { default as Component } from "./package";

index.tsx (Component root)

import Component from './component';

export { Utilities } from './utility-components';

export { Props } from './component';
export default Component;

This allows for components to be referenced from the top level, drilling downwards - rather than needing to import from the sub-level. Interfacing can also be used for a general component parent, but should be done sparingly. Code-splitting should occur within services consuming the components, rather than this library, making named exports a must (as per Palmer Guidelines)

Running

yarn run start #or npm run start

The default example imports and live reloads whatever is in /dist, making use of Parcel's aliasing.

Testing

DOM testing of components should occur within this repository, with functional testing residing on the consumer.

Deployment

In order to deploy to NPM, the following should be executed:

yarn build # or npm build
npm publish