Invertase UI

A set of UI components for products managed by Invertase.

Installation

# Using npm
npm i --save @invertase/ui

# Using Yarn
yarn add @invertase/ui

The project you're the library must have the react & tailwindcss packages installed.

Usage

#install dependencies
yarn
#run typescipt transpiler
yarn watch

Components

Components can be directly imported from the package:

import { Button, FloatingActionButton } from '@invertase/ui';

See the Storybook for a full list of available components.

Themes & Styles

Invertase UI is built on top of TailwindCSS, allowing you to take advantage of the features tailwind provides out of the box.

By default, the UI provides a base "blue" theme, which can be overridden via the tailwind configuration file:

// tailwind.config.js
module.exports = {
  theme: {},
  variants: {},
  plugins: [require('@invertase/ui/dist/tailwind-plugin')()],
};

To change the default theme, provide a tailwind color to the plugin:

require('@invertase/ui/dist/tailwind-plugin')('red');

Custom themes

To provide a custom theme to the UI, update your stylesheet to provide a custom class, for example to create a "Twitter" theme:

// tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

.theme-twitter {
  --color-primary: #3ca1f2;
  --color-primary-hover: #3c80d1;
}

Inside of your React application, wrap the ThemeProvider with the name of your chosen theme:

import React from 'react';
import { ThemeProvider } from '@invertase/ui';

function App() {
  return <ThemeProvider value="twitter">...</ThemeProvider>;
}

If the theme could not be found, the default theme provided to the plugin will be used instead.

Updating the theme

If you need to update the theme, you have two options:

1. Update the value passed to the ThemeProvider (e.g. via local state).
2. Call the updateTheme method provided by the useTheme hook:

import React from 'react';

function ChangeTheme() {
  const { updateTheme } = useTheme();

  return <button onClick={() => updateTheme('foobar')}>Change Theme</button>;
}

Troubleshooting

PostCSS + Tailwind

If using PostCSS to deduce the Tailwind bundle size, you'll need to ensure the distributed files are being scanned for tailwind class names:

// postcss.config.js
if (process.env.NODE_ENV === 'production') {
  // Remove unused CSS classes
  productionOnly.push(
    require('@fullhuman/postcss-purgecss')({
      content: [
        // ...other content paths
        './node_modules/@invertase/ui/dist/**.tsx',
      ],
    }),
  );
}

module.exports = () => ({
  plugins: [
    require('tailwindcss')('./tailwind.config.js'),
    // ... other plugins
    ...productionOnly,
  ],
});

React

Hooks can only be called inside the body of a function component.

Ensure that only one copy of React is being bundled, for example if using Gatsby:

const path = require('path');

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        react: path.resolve('./node_modules/react'),
        'react-dom': path.resolve('./node_modules/react-dom'),
      },
    },
  });
};