# @sibipro/caffeine

Component library for Sibi. Not really intended for public consumption.

Components here are built around the [Material-UI library](https://material-ui.com), and in some cases those components are exposed directly.

Check out [http://caffeine.sibi.sh](http://caffeine.sibi.sh) for information about the components.

## Installation

Install the package and all peer dependencies.

```sh
// yarn is the best, use it
yarn add @sibipro/caffeine

// add peer dependencies
yarn add react react-dom prop-types
```

## Usage

You can use components directly, and they will automatically use the "website" theme.

```js
import React from 'react';
import Button from '@sibipro/caffeine/components/Button';

const App = () => (
  <>
    <p>I am some React app.</p>
    <Button color="primary" variant="contained" onClick={() => alert('You clicked me!')}>Click Me</Button>
  </>
);
```

If you would like to modify the appearance of your components by using a different theme, use the `<ThemeProvider />` component. This is a provider that you pass the theme into, then make the rest of your app a child of it.

```js
import React from 'react';
import theme from '@sibipro/caffeine/themes/website'
import ThemeProvider from '@sibipro/caffeine/components/ThemeProvider';
import Button from '@sibipro/caffeine/components/Button';

const App = () => (
  <ThemeProvider theme={theme}>
    <p>I am some React app.</p>
    <Button color="primary" variant="contained" onClick={() => alert('You clicked me!')}>Click Me</Button>
  </ThemeProvider>
);

export default App;
```

You can also override a theme by nesting another `<ThemeProvider />` in the main app. This works exactly like the [Material-UI Theme Provider](https://material-ui.com/customization/themes/#theme-provider).