@anzi-credible/credible-common-ui NPM

Credible Common UI

Common UI components styled with Tailwindcss

Use

The Credible Common UI package exposes a collection of Tailwind CSS formatted UI components, intended for use within the ANZi-Credible suits of projects.

Install it

npm i @anzi-credible/credible-common-ui

Also install the various peer dependencies

I'm going to assume you have react and react-dom installed, but you will need the following FontAwesome libraries.

npm i @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

You'll also need react-router-dom, as we use its Link component.

npm i react-router-dom

Use the components

import {
  ActionCard,
  ActivityCard,
  AdminCard,
  Alert,
  Avatar,
  AvatarGroup,
  Badge,
  BadgeGroup,
  Banner,
  Breadcrumbs,
  Button,
  ButtonWithModal,
  CollapsibleCard,
  DateCard,
  DropdownMenu,
  EventCard,
  Icon,
  InlineEditor,
  InfoCard,
  Modal,
  Navbar,
  NotificationBadge,
  SectionTitle,
  Sidebar,
  StackedEditor,
  Stepper,
  SubHeader,
  Table,
  TabNav,
  TaskCard,
  Toggle,
  ToolTip,
  UserCard
} from '@anzi-credible/credible-common-ui'

Utils

import { utils } from '@anzi-credible/credible-common-ui'

classNames — combines various individual class names together into a single string, and eliminates any that are null, empty or otherwise falsy.
clickable — a wrapper around a component that applies a clickable button if there is an onClick handler in the props.
makeIndexReducer — handy when you need to index an object by its id, name, slug, or whatever.
makeVariantFinder — a factory for making variant finders given a set of variants and an optional default key.
noop - a function that does nothing
serialCommaList — a function that formats a list of words separated by commas, including an Oxford comma as appropriate.

Hooks

import { hooks } from '@anzi-credible/credible-common-ui'

useViewport — returns a current width and attaches a window.resize handler to maintain that width.

Storybook

You can preview the components via the following storybooks.

name	branch	deploys on	status	url
`storybook-dev`	`develop`	PRs and Merge		`credible-common-ui.netlify.app`
`storybook-prod`	`main`	PRs and Merge	n/a	n/a

Development

Please review the contributing notes before proceeding.

branch	ci status	coverage	notes
`develop`			work in progress
`main`			production release

Prerequisites

NodeJS, version 14.17.3 (LTS) (I use nvm to manage Node versions — brew install nvm.)
npm, version 6.x This is installed with NodeJS on mac and linux systems by default.

Handy to have

credible-platform DNS configuration via GoDaddy (You'll need the correct permissions for this to work).
ANZi-Credible account on Netlify.

Install dependencies

npm ci

Installation troubleshooting

If you find yourself needing to do a complete wipe and reinstall of dependencies you'll discover that the versions of babel-loader and webpack that Storybook uses are not aligned with the versions in react-scripts. This will cause all kinds of errors.

To fix this:

First rm -rf node_modules to nuke your node_modules folder, then
rm package-lock.json to get rid of the broken package-lock.json file.
Now run npm i --package-lock-only babel-loader@8.1.0 webpack@4.44.2.
Open up your package.json file and remove babel-loader and webpack from dependencies and save it.
Now you can run npm install and the dependencies will be correctly aligned.