PoolTogether React Tailwind UI Components

React UI components using tailwindcss

Components:

Component Groups

• Buttons
• Containers
• Icons
• Input
• Layout
• Links
• Loading
• Modal
• Navigation
• PageHeader

Top level components

• PageTitleAndBreadcrumbs
• PoolCurrencyIcon
• ThemeContextProvider

Installation:

yarn add @pooltogether/pooltogether-react-components

Usage

Required:

// tailwind.config.js
const pooltogetherTheme = require("@pooltogether/pooltogether-react-components");
module.exports = pooltogetherTheme({
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
});

Wrap your app in ThemeContextProvider

// _app.jsx
import { ThemeContextProvider } from '@pooltogether/react-components'
import '@pooltogether/react-components/dist/globals.css'

Now you can use any components you want:

import React from "react";
import { Button } from "@pooltogether/pooltogether-react-components";

<Button type="submit">Submit</Button>;

// -------------------

import React from "react";
import Link from "next/link";
import { ButtonLink } from "@pooltogether/pooltogether-react-components";

// External links
<ButtonLink href={href}>View</ButtonLink>
// Internal links
<Link as={'/home'} href={'/home'}><ButtonLink>Home</ButtonLink></Link>

Local development (yalc)

In pooltogether-react-components: yarn yalc publish

In the app you're importing pooltogether-react-components: yalc add @pooltogether/react-components

Local development (yarn)

TODO: Make this better...

In pooltogether-react-components: yarn yarn link

In the app you're importing pooltogether-react-components: yarn link-components

In pooltogether-react-components: yarn link-local yarn start

In the app you're importing pooltogether-react-components: yarn dev

And your app will hot reload when changes are detected in the components folder!

Testing

• yarn test will run jest

TODO:

• integrate prettier/husky with our default prettier config
• copy unit tests over and get them running in this lib