CT OEC Component Library

This library provides a uniform collection of reusable UX components, static assets and functional units specific to the State of Connecticut's Office of Early Childhood.

Setup

The following steps will allow you to quickly get set up for local development of these components. Ensure you are using at least Node v14.18.1.

1. Ensure you have the following libraries installed on your machine:

   • Visual Studio
   • Node 14
   • Yarn

2. Install all yarn packages.

   yarn install --frozen-lockfile

Usage

Bringing this library into your application is a pretty straightforward process, no different from most other component libraries.

1. Install the package.

   yarn add @ctoec/component-library

2. Once installed, manually import the stylesheets.

   import '@ctoec/component-library/dist/assets/styles/index.scss'

3. That's it! Now you can import any component as needed.

   import { ComponentOfYourChoice } from @ctoec/component-library;

Publish

Publishing a new version of our library (which we do with virtually every substantive change made) is a super simple process.

1. Increment version in package.json
2. npm publish (If this is the first time, you will need to authenticate yourself by running npm login)

Gotchas

This library uses USWDS for layout, component styles, and most icons. Due to a React bug affecting the way that SVG imports as react components from node modules into this library are handled in any application using this library, USWDS icons are copied into src/assets/images/uswds. To re-copy files from USWDS into that folder, run cp -r node_modules/uswds/dist/img/* src/assets/images/uswds.