Wooy 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

• TransactionStatusChecker
• PageTitleAndBreadcrumbs
• PoolCurrencyIcon
• ThemeContextProvider
• TxStatus

Installation:

yarn add @wooy/react-components

Usage

Required:

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

// _app.jsx
import "@wooy/react-components/dist/index.css";

Now you can use any components you want:

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

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

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

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

<ButtonLink Link={Link} href={href} as={as}>View</Button>

Local development (yalc)

In react-components: yalc publish

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

Local development (yarn)

TODO: Make this better...

In react-components: yarn link

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

In react-components: yarn link-local yarn start

In the app you're importing 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