import { Meta, Story } from '@storybook/addon-docs'

<Meta title="Wiki/ProfilProvder" />

# Profil provder

Here you can find how to implement providers inside a profile:

```js
import {
  IconProvider,
  ThemeProvider,
  LanguageProvider,
} from ‘@imtf/react-components’

...

IMTFPlugins.register(
  IMTFPlugins.TYPES.REACT_COMPONENTS_PROVIDER,
  IMTFPlugins.PROVIDER_TYPES.THEME,
  ThemeProvider
)
IMTFPlugins.register(
  IMTFPlugins.TYPES.REACT_COMPONENTS_PROVIDER,
  IMTFPlugins.PROVIDER_TYPES.ICON,
  IconProvider
)
IMTFPlugins.register(
  IMTFPlugins.TYPES.REACT_COMPONENTS_PROVIDER,
  IMTFPlugins.PROVIDER_TYPES.LANGUAGE,
  LanguageProvider
)
`
```

With this code you are able to use `Theme` object with all styles defined inside dms-core.

```js
import styled from 'styled-components'

...

const Errors = styled.div`
  margin-bottom: 16px;
  color: $ {props => props.theme.palette.error.main};
  border: 1px solid $ {props => props.theme.palette.error.main};
  padding: 8px 16px;
  border-radius: 2px;
`
```

```js
import { Button, withStyles } from '@material-ui/core'

...

const ButtonStyled = withStyles(theme => ({
  root: props => ({
    height: 44,
    boxShadow: 'none',
    fontWeight: 'bold',
    fontSize: theme.functions.pxToRem('12px'),
    backgroundColor: props.principal
      ? theme.palette.primary.main
      : theme.functions.getBackgroundContrastGrey(500, 600),
    borderRight: 'none !important',
  }),
}))(Button)
```

Use useTheme :

```js
import { useTheme } from '@imtf/react-components'


...

export default React.memo(({ customer }) => {
  const theme = useTheme()
  return <div>{theme.palette.warning.main}</div>
}
```

Inject message :

```js
import { Line } from '@imtf/react-components'

import messages from '../messages'
...

 <Line message={messages.title} />
```