jci18 v0.0.1
Welcome to the Johnson County Component Library!
Quick Start
Runtime Enviromnent
- Please download and install NVM for Windows
nvm install 22.11.0nvm 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.tsxfile 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.tsandcomponents/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
Publishing the library
The library will automatically publish a new minor version on merges to master. If you need to manually publish a new version:
npm run bp
- Creates a new minor version (
0.0.x), builds, and publishes the library to the npm registry
npm run bpMinor for minor versions (0.x.0), and npm run bpMajor for major versions (x.0.0)
For more details on scripting commands, please see the npm CLI documentation
Deploying storybook
TODO: Automate
Build the library with npm run storybook, then copy all of the files in storybook-static into windu\E:\ComponentLibrary