@h1-card/h1-fe-components v0.0.5-development

H1 FE Components

H1 Frontend Components.

npm install @h1-card/h1-fe-components

You need to define a theme to load css styles, this can be done using the wrapper:

import theme from '@h1-card/h1-fe-theme';
import {ThemeProvider} from 'styled-components';
<ThemeProvider theme={theme}>
...
</ThemeProvider>

Makefile

makefile contains commands to build and deploy the storybook to a S3 bucket to run locally, be sure to have an AWS profile configured with the correct credentials, then run:

AWS_PROFILE=my-h1-profile make deploy-storybook

also deployable via github actions

Storybook

To run Storybook

npm run storybook

Add a component

There is a command-line script Es: ./make_component.sh atoms Button

This will create a folder with the given name (second argument) of the Component (Button in the example above) inside the first argument (atoms) and these files:

• index.js
• Button.js
• StyledButton.js
• Button.spec.js
• Button.stories.js

The script used to create such files is make_component.sh

Dev

To test a single file by passing it's name.

Es:

npm test button

A report of coverage can be created by running:

npm run test -- --coverage

To build the app for production to the build folder.

npm run build