Forecast - TruePlan Design System

Forecast is a design system used to build accessible, consistent, and high quality public-facing experiences at TruePlan.

Local Development

Clone the Forecast repository anywhere on your computer.

git clone git@github.com:trueplan/forecast.git

Install and bootstrap Forecast dependencies.

yarn install

Build Forecast.

yarn build

Run Storybook.

yarn storybook

Local Development with Dev Containers

This repo has dev containers set up to quickly get your developer environment set up. You will need the following set up as a prerequisite: Docker, VS Code, and the VS Code Remote - Containers extension.

Open up the folder in VS Code and you'll get a prompt to reopen the folder in a container. Alternatively, you can run >Remote-Containers: Open Folder in Container through the VS Code Command Palette (⇧⌘P on Mac or Ctrl+Shift+P in Windows/Linux).

Once it's running (the first time will take a couple minutes), you can run yarn storybook to get started.

Getting Started

👋 Hi. Follow the steps below to begin building with Forecast

1. Install external dependencies

Package	Version
react	18.x
react-dom	18.x

npm install --save react react-dom

2. Install Forecast packages

Install the following packages so you can consume Forecast's tokens and themes to build custom page sections.

npm install --save @trueplan/forecast-theme @trueplan/forecast-icons @trueplan/forecast-components

3. Build some cool stuff.

Enough said.

4. Feedback

Let us know if you have any feedback or issues.

Generators

This repo leverage Plop to help scaffold out the files that you need when you're creating a new component.

New Components

Running yarn generate:component will create the folder and files you need to start building out your component. Each component at the very least should have an export, documentation, testing, and a story file.