jcicl

v0.0.57

Published

17 hours ago

Component library for the websites of Johnson County Iowa

Downloads

2,929

0High
0Medium
0Low

mckev92

Welcome to the Johnson County Component Library!

Quick Start

Runtime Enviromnent

Please download and install NVM for Windows
nvm install 20.18.0
nvm use 20

Usage

npm install jcicl@latest

import Button, { ButtonProps } from 'jcicl/base/Button';
import Nav, { NavProps } from 'jcicl/supercomposite/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, (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

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