Forge-components NPM

WARNING: This dependency has been deprecated.

Please use this private repository https://gheprod.corp.costco.com/costco-developers/forge.costco.web

The output from this repository is available on NPM at:

Details pertaining to change can be found in this document: React Development at Costco

The Forge Storybook design system

Learn more at The Forge.

Prereq's

Install Nodejs. Use a v14.15.1 or higher LTS version.
Install latest version of Yarn.
On Windows device or image make sure to use a bash shell.

Required skills:

Getting Started (assuming you've checked out the source and you're at the project root)

Install dependencies

yarn install

Start storybook

yarn storybook

Unit testing (using Jest)

See ./src/components/AlertHeader/index.test.js for an example of how to write a Jest unit test. Notice how we wrap the component being tested with a provider so the Costco style is injected.

To run your tests for Storybook:

yarn test:generate-output

Once this command finishes you may start storybook to view the results of your test in Storybook

Contributing

Tips

Images for testing your components reside in the public directory
Locales also reside in the public directory
Please follow the existing directory / filename structure: ./src/stories//>ComponentName>/
HTML namespaces (xml) is not supported in JSX
Follow the templates in src/story-template as a guide
When exporting your component for others to use be sure to update index.js.
Feature branch off of the develop branch.

How to work locally with your Forge feature branch?

Install yalc globally

yarn -g add yalc

Make sure your .gitignore has been updated to exclude the .yalc repo from a git commit.

.yalc
yalc.lock

On your local Forge feature branch:

yarn build
yalc publish

On your local project branch:

yalc add forge-components

To restore the NPM instance of forge components in local your project:

yarn add forge-components

Note it is safe to delete the .yalc directory.

Reference

Deployment targets

Merges to master will trigger a github action that deploys to Azure:

https://lively-smoke-0981b5d1e.azurestaticapps.net/?path=/story/the-forge--page

Style guides

Airbnb JavaScript Style Guide

NOTE: I have a bit of hesitations with the Airbnb styleguide. With forge we want to make use of function components and hooks (no class components please) and component files don't have to be named with the extension .jsx. Also the use fat arrows => in component signatures are file too. Other than that the style guide is a great starting point.