Package Exports

@ctoec/component-library

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@ctoec/component-library) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 have the following libraries installed on your machine:
Install all yarn packages.
```
yarn install --frozen-lockfile
```
(Optional) We have Storybook configured for some easy viewing of these components. If interested, you can build and run it locally (on port 9009, by default).
```
yarn storybook
```

Usage

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

Install the package.
```
yarn add @ctoec/component-library
```

Once installed, manually import the stylesheets.

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

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

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

Examples

If you're looking for some specific UX examples, we have a Storybook site deployed to GitHub Pages, showcasing all of the components within this library.

You can check it out live at http://ctoec.github.io/component-library/.

You can also see all of these components in action in the data collection project.

Deploy

Our Storybook deployments are handled with the storybook-deployer package, using the gh-pages branch of this repository as the site's source. Additionally, all commits to our core base branch will trigger an associated GitHub Action that automatically updates our Storybook site. So it'll be kept up to date with the latest state of our library at all times!

Regardless, if there's ever a need for the site to be updated manually, the following command should be run from project root:

yarn run deploy-storybook

Publish

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

Increment version in package.json
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.