Jccomponentlibrary NPM

Welcome to the Johnson County Component Library!

Usage

Runtime Enviromnent

Please download and install NVM for Windows
Run nvm install 20.18.0 to install the current LTS version of node
Run nvm use 20

Quick Start

Usage within an existing React project

To add the Johnson County Component Library to your React project, from the root directory of your project, please run npm install jccomponentlibrary

Add the fonts

npm install @fontsource/roboto
npm install @fontsource/material-icons
npm install @mui/icons-material

Then, in your project entry (most likely main.tsx) point, add:

import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';
import '@fontsource/material-icons';

Alternatively, add to project root index.html <head />:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />

After installation, import any components you wish to use: import { Component } from jccomponentlibrary

Viewing Storybook Documentation

We are using Storybook to document our component library

Please use npm run storybook or npm start from the root directory to start the storybook application. You can see helpful documentation links under the Configure your project section of the Storybook application.

Development

Getting started

Please ensure your react development environment is set up.

From the root project directory, please run npm install

Dependencies

For this component library, we are extending Material UI and customizing with Emotion/Styled

Components Directory Structure

In each components folder, you should see a [Component].stories.tsx file. You can copy the established pattern to create stories for new components, or customize as you please according to the above documentation

Base

Base components are intended to be the foundational building blocks of our web pages here at Johnson County

Composite

Composite components are intended to be reusable chunks of HTML built from base components and complimentary TSX (TypeScript XML)

Superomposite

Composite with a higher level of complexity

Templates

Templates are intended to render the HTML for predefined page layouts comprised of composite components, base components, and complimentary TSX

All of the above component types are inteded to be importable and reusable throughout the suite of Johnson County web applications 😊

Process

Add or update any components you wish. For new components, please create the associated [NewComponent].stories.tsx file to allow for documentation. In .storybook/main.ts, we are using the default string matching pattern to automatically index *.stories.* files 😊
Export any newly created components in the relevant index files: (base/(super)composite/templates)/[NewComponent]/index.ts, (base/(super)composite/templates)/index.ts, and components/index.ts. src/index.ts, the entry point for our complied library, automatically exports everything from components/index.ts
Publish the library and update relevant project dependencies