0.1.0-alpha.16 • Published 3 years ago

@anzi-credible/credible-common-ui v0.1.0-alpha.16

Weekly downloads
-
License
UNLICENSED
Repository
github
Last release
3 years ago

Credible Common UI

Common UI components styled with Tailwindcss

NMP Version

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.

namebranchdeploys onstatusurl
storybook-devdevelopPRs and MergeNetlify Statuscredible-common-ui.netlify.app
storybook-prodmainPRs and Mergen/an/a

Development

Please review the contributing notes before proceeding.

branchci statuscoveragenotes
developCircleCIcodecovwork in progress
mainCircleCIcodecovproduction 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

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:

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

Run the Storybook

npm start

Open localhost:6006 to view it in the browser.

The site will reload if you make edits. You will also see any lint errors in the console.

Run the unit tests

npm test

Launches the test runner in interactive watch mode.

Build a release

npm run build

Publish a release

You must be a member of the ANZi-Credible organisation on npmjs.com.

Read the section on creating a production release in the contributing notes.

Contributing

Please see the contributing notes.

0.1.0-alpha.16

3 years ago

0.1.0-alpha.15

3 years ago

0.1.0-alpha.14

3 years ago

0.1.0-alpha.13

3 years ago

0.1.0-alpha.12

3 years ago

0.1.0-alpha.11

3 years ago

0.1.0-alpha.10

3 years ago

0.1.0-alpha.9

3 years ago

0.1.0-alpha.7

3 years ago

0.1.0-alpha.8

3 years ago

0.1.0-alpha.6

3 years ago

0.1.0-alpha.5

3 years ago

0.1.0-alpha.4

3 years ago

0.1.0-alpha.3

3 years ago

0.1.0-alpha.2

3 years ago

0.1.0-alpha.1

3 years ago