# React Component Library

### Themes

Monstrosity ships with two default themes
1. Light 
2. Dark

A custom theme can be provided by providing a theme of type Theme.
If you are using js you will need to look [here](https://link-to-theme.d.ts) for the correct object schema.

The best way to consume these components is by using the provider.
This way you get the theme as designed by the creator in either a dark or light mode and with correct fonts.

**examples**
```jsx
import { ThemedProvider } from '@monstrosity/utilities/providers/theme';
import { BarButton } from '@monstrosity/components/core';
import { ButtonStyle } from '@monstrosity/enums/button-style';

render() {
  return (
    <ThemedProvider isDark>
        <Container>
            <BarButton
                onClick={onClick}
                buttonStyle={ButtonStyle.Secondary}
                id="1"
                label="Click Me"
            />
        </Container>
    </ThemedProvider>
  )
}
```

Please note that a single item must be parsed into the provider (due to the way ThemeProvider functions).
To use multiple components wrap the children in a parent ie `<React.Fragment> ... </React.Fragment>`.

### Using a component

All components must be wrapped in the styled components theme provider.
I recommend that this is done at the highest possible level.
The theme property is then passed to every child component behind the scenes.

This can be done by adding a decorator to your storybook config.

```jsx
addDecorator(( story ) => (
  <ThemeProvider theme={MyTheme}>
    { story() }
  </ThemeProvider>
))
```

Or in the application root.

```jsx
class ApplicationRoot extends React.PureComponent {

  render() {
    return (
      <ThemeProvider theme={MyTheme}>
        /* Application */
      </ThemeProvider>
    );
  }
}
```

With other providers.

```jsx
class ApplicationRoot extends React.PureComponent {

  render() {
    return (
      <Provider store={MyStore}>
        <ThemeProvider theme={MyTheme}>
          /* Application */
        </ThemeProvider>
      </Provider>
    );
  }
}
```

However you can also directly supply a theme to a component if you so choose.
```jsx
<Icon theme={MyTheme} icon={IconName.Folder} />
```

Or by wrapping a single component in a provider.
```jsx
<ThemeProvider theme={MyTheme}>
  <Icon icon={IconName.Folder} />
</ThemeProvider>
```

**Button Example**

```jsx
import React from 'react';
import ReactDOM from 'react-dom';

import { BarButton } from '@monstrosity/components/core';
import { ThemeProvider } from '@monstrosity/utilities/themed-components';
import { Light } from '@monstrosity/utilities/themed-components/light';

const Demo = () => { 
  const onClick = (id) => alert(id);

  return (
    <ThemeProvider theme={Light}>
      <BarButton
        id="3"
        label="Click on me"
        onClick={onClick}
        buttonStyle={ButtonStyle.Primary}
        isSlim
      />
    </ThemeProvider>
  )
};

ReactDOM.render(<Demo />, document.getElementById('root'));
```


### Attribution  
Avatar Icons made by [Freepik](https://www.flaticon.com/authors/freepik) from [flaticon.com](https://www.flaticon.com/).  
Remix Icons by [Remix](https://remixicon.com).
Bootstrap Icons by [Bootstrap](https://getbootstrap.com).   
Font Awesome Free Icons by [Font Awesome](https://fontawesome.com).  
Feather Icons by [Feather](https://feathericons.com/).   

Tyson Skiba 2019
