@anzi-credible/credible-common-ui v0.1.0-alpha.16
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 anonClick
handler in the props.makeIndexReducer
— handy when you need to index an object by itsid
,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 nothingserialCommaList
— 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 currentwidth
and attaches awindow.resize
handler to maintain thatwidth
.
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 usenvm
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 yournode_modules
folder, then rm package-lock.json
to get rid of the brokenpackage-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 removebabel-loader
andwebpack
fromdependencies
and save it. - 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.
- See storybook.js.org for more information.
Run the unit tests
npm test
Launches the test runner in interactive watch mode.
- See create-react-app/docs/running tests for more information.
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.
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago