Refactor Notion component detection

[sashachabin]

• Create list of typography components for ekaterinburg-ui (ask designers @kryaazh, @tramakarov)
• Add base component. 3 variants:
  • <Typography.H1>
  • <H1>, <H2> ...
  • <Typography as="h1">
• Set text as children prop
• Refactor
  • Rename columnItem prop for typograpy components
  • Add <table> to separate component. Add this to file
  • Separate components. One component — one file (exclude subcomponent)
  • Switch-case must return equal types (components or objects)

TODO
Allow write content inside columns (now all tags in col)

3 component variants library

<>
  {/* Вариант 1. Комопненты имплементирующие элементы

Плюсы
- Настройка любых props
- Интуитивно

Минусы
- Сложно поддерживать обртаную совместимость с HTML (W3C). Пример табилцы
- А не проще использовать HTML + CSS?
*/}
  <H1>Заголовок 1</H1>
  <H2>Заголовок 2</H2>
  <H3>Заголовок 3</H3>
  <H4>Заголовок 4</H4>
  <H5>Заголовок 5</H5>

  <Ul size="xl">
    <Li></Li>
    <Li></Li>
    <Li></Li>
    <Li></Li>
  </Ul>

  <Hr />

  <Ol>
    <Li></Li>
    <Li></Li>
    <Li></Li>
    <Li></Li>
  </Ol>

  <P></P>

  <Table>
    <Thead></Thead>
    <Tbody>
      <Tr>
        <Td></Td>
        <Td></Td>
      </Tr>
    </Tbody>
  </Table>
</>;


<>
  {/* Вариант 2. Комопненты имплементирующие элементы

Плюсы
- Подсказка тегов при наборе Typography (можно `<T />`)
- Удобный доступ render(Typography[componentName])

Минусы
- Громоздко
- Должен быть унифицированный набор props. Скорее всего, многие должны быть перегруженными.
  То есть `size` может обозначать что-угодно для элементов Table и H1
*/}
  <Typography.H1>Заголовок 1</Typography.H1>
  <Typography.H2>Заголовок 2</Typography.H2>
  <Typography.H3>Заголовок 3</Typography.H3>
  <Typography.H4>Заголовок 4</Typography.H4>
  <Typography.H5>Заголовок 5</Typography.H5>

  <Typography.Ul size="xl">
    <Typography.Li></Typography.Li>
    <Typography.Li></Typography.Li>
    <Typography.Li></Typography.Li>
    <Typography.Li></Typography.Li>
    <Typography.Li></Typography.Li>
    <Typography.Li></Typography.Li>
    <Typography.Li></Typography.Li>
  </Typography.Ul>

  <Typography.Hr />

  <Typography.Ol>
    <Typography.Li></Typography.Li>
    <Typography.Li></Typography.Li>
    <Typography.Li></Typography.Li>
    <Typography.Li></Typography.Li>
  </Typography.Ol>

  <Typography.P></Typography.P>

  <Typography.Table>
    <Typography.Thead></Typography.Thead>
    <Typography.Tbody>
      <Typography.Tr>
        <Typography.Td></Typography.Td>
        <Typography.Td></Typography.Td>
      </Typography.Tr>
    </Typography.Tbody>
  </Typography.Table>
</>;


<>
  {/* Вариант 3. Комопненты имплементирующие элементы

Плюсы
- Подсказка тегов при наборе пропа type
- Удобный доступ <Typography type={componentType} />
- Есть возможность отделять внешний вид от тега, когда они совпадают. 

Минусы
- Громоздко
*/}
  <Typography type="h1">Заголовок 1</Typography>
  <Typography type="h2">Заголовок 2</Typography>
  <Typography type="h3">Заголовок 3</Typography>
  <Typography type="h4">Заголовок 4</Typography>
  <Typography type="h5">Заголовок 5</Typography>

  <Typography type="ul">
    <Typography type="li"></Typography>
    <Typography type="li"></Typography>
    <Typography type="li"></Typography>
    <Typography type="li"></Typography>
    <Typography type="li"></Typography>
    <Typography type="li"></Typography>
    <Typography type="li"></Typography>
  </Typography>

  <Typography type="hr" />

  <Typography type="ol">
    <Typography type="li"></Typography>
    <Typography type="li"></Typography>
    <Typography type="li"></Typography>
    <Typography type="li"></Typography>
  </Typography>

  <Typography type="p"></Typography>

  <Typography type="table">
    <Typography type="thead"></Typography>
    <Typography type="tbody">
      <Typography type="tr">
        <Typography type="td"></Typography>
        <Typography type="td"></Typography>
      </Typography>
    </Typography>
  </Typography>
</>