@nath-green/ui

A library of accessibility-focused style-agnostic React UI components.

• Button
• Spinner
• Pill
• Input

Installation and setup

yarn add @nath-green/ui

Built for use with Tailwind - bring your own classes and styles!

Usage

✅  Components have elements

• The basic building blocks of the component, each individually stylable

✅  Components have states

• States like; default, loading, disabled etc

✅  Component elements are styled by their state

Lets style the Button component using the button element with the default state using the classNames object prop.

<Button classNames={{ button: { default: 'bg-blue-500 p-4' } }}>

Now lets add classes for the loading state of the button element and style the spinner element.

<Button
  loading={loading}
  classNames={{
    button: {
      default: 'bg-blue-500 p-4',
      loading: 'bg-gray-200 p-4'
    },
    spinner: {
      default: 'w-4 h-4'
    }
  }}
/>

Global styles / themes

✅  Style each component individually using the classNames object, or create global themes for consistency.

Importing the GlobalStyles context provider, you can create any number of themes and global styles for each component (and elements within the components).

⚡  The default theme is named default, but when a different theme is used, simply pass the theme prop to the component.

Create global themes

The global styles object starts with the component name, with an uppercase letter.

export const GLOBAL_STYLES = {
  Button: {
  }
}

This is followed by the theme name.

export const GLOBAL_STYLES = {
  Button: {
    default: {}
  }
}

Each element is then defined (if necessary).

export const GLOBAL_STYLES = {
  Button: {
    default: {
      button: {},
      spinner: {}
    }
  }
}

Each state per element is then defined (if necessary).

⚡ The default state cannot change name and is different to the theme name.

export const GLOBAL_STYLES = {
  Button: {
    default: {
      button: {
        default: 'bg-red-500 px-4 h-12'
      },
      spinner: {
        default: 'w-4 h-4'
      }
    }
  }
}

In the example below, the button element has different styles for the default and loading states.

export const GLOBAL_STYLES = {
  Button: {
    default: {
      button: {
        default: 'bg-red-500 px-4 h-12',
        loading: 'bg-gray-500 px-4 h-12'
      },
      spinner: {
        default: 'w-4 h-4'
      }
    }
  }
}

Lets add a second theme named primary

export const GLOBAL_STYLES = {
  Button: {
    default: {
      button: {
        default: 'bg-red-500 px-4 h-12',
        loading: 'bg-gray-500 px-4 h-12'
      },
      spinner: {
        default: 'w-4 h-4'
      }
    },
    primary: {
      button: {
        default: 'bg-blue-500 hover:bg-blue-800 px-4 h-12',
        loading: 'bg-gray-500 px-4 h-12'
      },
      spinner: {
        default: 'w-4 h-4'
      }
    }
  }
}

Apply global styles to provider

Import your styles object and pass it to the provider. The example below shows the two themed buttons being used.

import { GlobalStyles, Button } from '@nath-green/ui`;
import { GLOBAL_STYLES } from '../constants';

// high level in your app
<GlobalStyles.Provider value={GLOBAL_STYLES}>
  <Button>Default button</Button>
  <Button theme="primary">Primary button</Button>
</GlobalStyles.Provider>

Multiple contexts

⚡  Reuse the GlobalStyles.Provider in different parts of your app to section themes.

⚡  Ad-hoc context can also be passed to the components using the context prop, which will take precedence over the GlobalStyles context even though it is a descendent.

<Input theme="material" context={NEW_CONTEXT_OBJ} />

Additional classes

⚡  Additional classes can be added to a component (and element) basis. This will use the themes classes as well with the additional classes.

<Input
  theme="gold"
  additionalClassNames={{ input: { default: 'pl-8' } }}
/>

Overrides

⚡  You can override the theme completely on a component (and element) basis. This will use only the class names specified for that element rather than the theme of any context.

<Input theme="chilled" />

<Input classNames={{ input: { default: 'bg-blue-100' } }} />