Jcicl NPM | npm.io

Welcome to the Johnson County Component Library!

Quick Start

Runtime Enviromnent

Please download and install NVM for Windows
nvm install 22.11.0
nvm use 22

Usage

npm install jcicl@latest

import Button, { ButtonProps } from 'jcicl/Button';
import Nav, { NavProps } from 'jcicl/Nav';

const Component: React.FC<ButtonProps> = ({ ...buttonProps }) => <Button {...buttonProps}>Johnson County Button</Button>;

Adding the fonts and scrollbar styles

In your project entry point (most likely main.tsx), 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';
import 'overlayscrollbars/overlayscrollbars.css';

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" />

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 and components/index.ts.
Export any newly created types for the component from (base/(super)composite/templates)/[NewComponent]/index.ts
Publish the library and update relevant project dependencies