Overview

An interface library for Playbooks built with Tailwind.

Prerequisites

• Font Awesome
• React
• Next
• Tailwind

Installation

npm install @playbooks/ui

Usage

Wrap your application with the and pass in the necessary props.

# _app.tsx

import { AppProps } from 'next/app';
import '@playbooks/ui/styles.css';
import { UIProvider } from '@playbooks/ui/context';

const App = ({ Component, pageProps }: AppProps) => {

	// Render
	return (
		<UIProvider meta={meta}>
      <Component ssr={pageProps} {...contexts} />
		</UIProvider>
	);
};

export default App;

Then, import the components you want to use and compose from there.

import { Accordion, AccordionBody, AccordionText, AccordionTitle, AccordionToggle } from '@playbooks/ui/accordions';
import { Span } from '@playbooks/ui/html';
import { FarIcon } from '@playbooks/ui/icons';

const FaqAccordion = ({ title, text }) => {
	const [open, setOpen] = useState(false);

	// Methods
	const onToggle = () => setOpen(!open);

	// Render
	return (
		<Accordion open={open} border='border' borderRadius='rounded-md' spacing='mb-4'>
			<AccordionToggle size='' open={open} onClick={onToggle} borderRadius='' spacing='p-6'>
				<Span display='flex-start' space='space-x-4'>
					<FarIcon icon='circle-question' fontSize='text-lg' />
					<AccordionTitle fontSize='text-base'>{title}</AccordionTitle>
				</Span>
			</AccordionToggle>

			<AccordionBody open={open} spacing='px-4 py-6' animate>
				<AccordionText>{text}</AccordionText>
			</AccordionBody>
		</Accordion>
	);
};

export { FaqAccordion };

Development

This project is designed for development using the yalc library.

• npm run dev
• switch to project
• npx yalc add @playbooks/ui
• You may need to restart your application server
• After that, this library will hot reload into the consuming application

Scripts

We've included a couple of helpful scripts for faster development.

• npm run deploy -- 'commit message'
• npm run publish -- 'commit message' [major|minor|patch]

Husky

• Husky configuration is setup to lint and format the repo on every commit
• Edit the .husky/pre-commit file to change your settings

Author

• Eric Hubbell
• [email protected]

Notes

To see this library in action, checkout these related projects:

• playbooks
• playbooks/ui
• playbooks/theme