import { Meta, Story } from '@storybook/addon-docs'
import { Grid } from '@material-ui/core'

import Intl from './Intl'
import RenderWithTheme from 'theme/RenderWithTheme'

<Meta title="Wiki/Texts" />

# Texts

## Examples

Define the messages in the messages:

```js
const messages = defineMessages({
  test: {
    id: 'module.task.test',
    defaultMessage: 'Test',
  },
})
`
```

Add the message where we want to display it:

```js
import { FormattedMessage } from 'react-intl'
...
<FormattedMessage {...messages.test} />
```

Or use funciton to get message:

```js
import { useIntl } from 'react-intl'
...
const { formatMessage } = useIntl()
const text = formatMessage(messages.test)
```

## Main structure for ids

<Grid container spacing={3}>
  <Grid>
    <ul>
      <li>
        inspector
        <ul>
          <li>timeline</li>
          <li>
            comment_inode
            <ul>
              <li>title</li>
              <li>save</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </Grid>
  <Grid>
    <ul>
      <li>
        module
        <ul>
          <li>home</li>
          <li>
            favorites
            <ul>
              <li>title</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </Grid>
  <Grid>
    <ul>
      <li>
        modal
        <ul>
          <li>newCase</li>
          <li>
            login
            <ul>
              <li>title</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </Grid>
  <Grid>
    <ul>
      <li>
        common
        <ul>
          <li>toolbar</li>
          <li>
            history
            <ul>
              <li>title</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </Grid>
  <Grid>
    <ul>
      <li>
        notification
        <ul>
          <li>login</li>
          <li>
            common
            <ul>
              <li>error</li>
              <li>ok</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </Grid>
  <Grid>
    <ul>
      <li>
        action_bar
        <ul>
          <li>
            home
            <ul>
              <li>rename</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </Grid>
</Grid>

## Text list

<RenderWithTheme>
  <Intl />
</RenderWithTheme>