# branding

This folder is home to branding-related aspects of OrchardGo.

## Components

### `<BrandingProvider/>`
At the root of the application, you will want to use a `BrandingProvider`:

```js
import { BrandingProvider } from './src/branding';

const App = (
    <BrandingProvider>
        ...
    </BrandingProvider>
);
````

### `<ThemeSwitch/>`

A switch component which allows you to render different components based on the theme:

```js
import { Text } from 'react-native';
import { Theme, ThemeSwitch } from "./src/branding";

const Component = () => (
    <ThemeSwitch>
        <Theme theme={ORCHARD_DARK}>
            <Text>This is the Orchard Dark component!</Text>
        </Theme>
        <Theme theme={AWAL_DARK}>
            <Text>This is the AWAL Dark component!</Text>
        </Theme>
    </ThemeSwitch>
);
```

## High-Order Components

### `withTheme`

Provides the `theme`, `colors`, and `typography` props to any component within the `<BrandingProvider/>` hierarchy:

```js
import { Text, View } from 'react-native';
import { ThemePropTypes, withTheme } from './src/branding';

const Component = ({ theme, colors, typography }) => (
    <View>
        <Text>{ theme }</Text>
        <Text>{ JSON.stringify(colors) }</Text>
        <Text>{ JSON.stringify(typography) }</Text>
    </View>
);

Component.propTypes = {
    theme: ThemePropTypes.theme.isRequired
};

export default withTheme(Component);
```

You must use the `withTheme` HOC (or the `useTheme` hook) on your components to make them aware of the application 
theme and be able to utilize a `ThemedStyleSheet` from `ThemedStyleSheet.create`.

## Hooks

### `useBrand`

Returns the `brand` associated with the application.

```js
import { Text, View } from 'react-native';
import { useBrand } from './src/branding';

const Component = {
    const brand = useBrand();
    return (
        <View>
            <Text>{brand}</Text>    
        </View>
    );
};
```

### `useTheme`

Hook to provide getting and setting the current application theme.

```js
import { Text, TouchableOpacity, View } from 'react-native';
import { useTheme } from './src/branding';

const Component = {
    const { colors, theme, typography, setTheme } = useTheme();
    return (
        <View>
            <Text>Current theme: {theme}</Text>
            <Text>Theme colors: {JSON.stringify(colors)}</Text>
            <Text>Theme typography: {JSON.stringify(colors)}</Text>
            <TouchableOpacity
                onPress={() => setTheme('another theme')}
            >
                <Text>Change theme!</Text>
            </TouchableOpacity>
        </View>
    );
};
```

### `useAvailableThemes`

Based on the applications binary branding, provide access to available themes:

```js
import { Text, View } from 'react-native';
import { useAvailableThemes } from './src/branding';

const Component = {
    const themes = useAvailableThemes();
    return (
        <View>{
            themes.map(theme => (
                <Text key={theme}>{theme}</Text>
            ))
        }</View>    
    );
};
```

## PropTypes

### ```ThemePropTypes.theme```

A string proptype which must correspond to one of the themes for the application.

### ```ThemePropTypes.style```

A proptype which must contain all values for themes as keys, with the value being a `ViewPropType.style`.

## Utils

### `ThemedStyleSheet.create`

A helper method which reads all application themes, and creates React `StyleSheet`s based on the theme. For example,
with themes defined as 

```js
const themes = {
    [ORCHARD_DARK]: {
        colors: {
            background: 'black'
        }
    },
    [ORCHARD_LIGHT]: {
        colors: {
            background: 'white'
        }   
    }
};
```
the following
```js
import { ThemedStyleSheet } from './src/branding';

console.log(
    ThemedStyleSheet.create(({ colors }) => ({
        container: {
            backgroundColor: colors.midnight900
        }
    }))
);
```
will output
```
{
    ORCHARD_DARK: {
        container: {
            backgroundColor: 'black'
        }
    },
    ORCHARD_LIGHT: {
        container: {
            backgroundColor: 'white'
        }    
    }
}
```