How to use the effector-react.createComponent function in effector-react

//@flow

import * as React from 'react'
import {logs} from './domain'
import Console from '../components/Console'
import {createComponent} from 'effector-react'

export const LogsView = createComponent<
  {|
    style: any,
  |},
  Array<{|
    data: Array,
    id: number,
    method: *,
  |}>,
>(logs, ({style}, logs) => (
  
))

padding: 7px 15px;
  margin: 0;
  background-color: ${({isActive}) => (isActive ? 'white' : 'inherit')};
  border-bottom: ${({isActive}) => (isActive ? '1px solid #fff' : 'none')};
  margin-bottom: ${({isActive}) => (isActive ? '-1px' : '0')};
`

const TabContent = styled.div`
  overflow: auto;
`

const TabView = createComponent(tab, ({}, tab) => (
  {tab === 'console' && }
))

const ToolbarView = createComponent(tab, ({}, tab) => (
  <ul>
    
      Console
    
  </ul>
))

const SecondanaryTabs = styled.div`
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid #ddd;

  @media (max-width: 699px) {
    grid-column: 1 / span 1;
    grid-row: 11 / span 1;

markLine={codeMarkLine}
        setCursor={codeSetCursor}
        performLint={performLint}
        onCursorActivity={codeCursorActivity}
        value={sourceCode}
        mode={mode}
        onChange={changeSourcesDebounced}
        lineWrapping
        passive
      />
      
    
  ),
)

const VersionLinkView = createComponent(version, ({}, version) => (
  
))

//const versions = useStore(packageVersions)
//const selected = useStore(version)
//TODO: bug in createComponent, probably actually in watchers
//,
const VersionSelectorView = createComponent(
  {versions: packageVersions, selected: version},
  (_, {versions, selected}) => (
    
  ),

padding: 7px 15px;
  margin: 0;
  background-color: ${({isActive}) => (isActive ? 'white' : 'inherit')};
  border-bottom: ${({isActive}) => (isActive ? '1px solid #fff' : 'none')};
  margin-bottom: ${({isActive}) => (isActive ? '-1px' : '0')};
`

const TabContent = styled.div`
  overflow: auto;
`

const TabView = createComponent(tab, ({}, tab) => (
  {tab === 'console' && }
))

const ToolbarView = createComponent(tab, ({}, tab) => (
  
    
      Console
    
  
))

const SecondanaryTabs = styled.div`
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid #ddd;

  @media (max-width: 699px) {
    grid-column: 1 / span 1;
    grid-row: 11 / span 1;

const EventsWrapper = Card.extend`
 grid-area: events;
 display: grid;
 grid-template-columns: 10rem;
 grid-gap: 1rem;
`

const Main = styled.main`
 display: grid;
 grid-gap: 1rem;
 grid-template-areas:
  'header header'
  'events code';
`

const TodoList = createComponent(todosView, (props: {||}, state) => (
 
  
   
    Events
   
   +
  
  {state.map(item => )}
 
))

export const App = () => (
 <main>
  <header>
  
  <code></code></header></main>

const EventsHeader = styled.div`
 display: flex;
 justify-content: space-between;
`

const Item = ({text}) => (
 
  Event
  {text}
 
)
const CodeBox = Card.extend`
 grid-area: code;
`
const Code = createComponent(codeSource, (_: {||}, source) => (
 
  Source code
  <code>{source.map((line, i) =&gt; <p>{line}</p>)}</code>
 
))
const EventsWrapper = Card.extend`
 grid-area: events;
 display: grid;
 grid-template-columns: 10rem;
 grid-gap: 1rem;
`

const Main = styled.main`
 display: grid;
 grid-gap: 1rem;
 grid-template-areas:

//@flow

import * as React from 'react'
import {createComponent} from 'effector-react'
import {screenQueries} from './screenQueries'
import {orientationCheck, screenSizeCheck} from './queryCheck'

export const Screen = createComponent<
  {
    children: React.Node,
    small?: boolean,
    medium?: boolean,
    large?: boolean,
    portrait?: boolean,
    landscape?: boolean,
    ...
  },
  {|
    large: boolean,
    medium: boolean,
    portrait: boolean,
    small: boolean,
  |},
>(screenQueries, (props, queries) => {

if (tab === 'dom') return 'dom'
  if (event.length > 0) return 'events'
  if (store.length > 0) return 'storages'
  if (effect.length > 0) return 'effects'
  if (domain.length > 0) return 'domains'
  return 'events'
})
const api = createApi(tab, {
  showEvents: () => 'events',
  showStorages: () => 'storages',
  showEffects: () => 'effects',
  showDomains: () => 'domains',
  showDOM: () => 'dom',
})

const TabView = createComponent(tab, ({event, store, effect, domain}, tab) => {
  //TODO: unify this
  const className = `tab-content ${cx(
    tab === 'events' && 'show-events',
    tab === 'storages' && 'show-storages',
    tab === 'effects' && 'show-effects',
    tab === 'domains' && 'show-domains',
    tab === 'dom' && 'show-dom',
  )}`
  const mapper = item => {
    const name = item?.compositeName?.fullName || item?.shortName || item.id
    return <li>{name}</li>
  }
  return (
    <div>
      {tab === 'events' &amp;&amp; (
        <div></div></div>

const card = getCard(cardId)
  if (card) {
    setUsefulMark({ cardId: card.id, isUseful: !card.meta.isUseful })
  }
}

const selectCards = (props) =>
  $registry.map((reg) => props.ids.map((id) => reg[id]))

type Props = {
  ids: number[],
  renderCard?: (param: { card: Card, onUsefulClick: () => * }) => React.Node,
  renderEmpty?: () => React.Node,
}

export const CardsList = createComponent(
  selectCards,
  ({ renderCard = defaultCardRender, renderEmpty = emptyRenderer }, cards) => (
     (
        
          {list.filter(Boolean).map((card) =>
            renderCard({
              card,
              onUsefulClick: () => handleUsefulClick(card.id),
            }),
          )}
        
      )}
      renderEmpty={renderEmpty}
    />

border-right: 1px solid #ddd;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  padding: 7px 15px;
  margin: 0;
  background-color: ${({isActive}) => (isActive ? 'white' : 'inherit')};
  border-bottom: ${({isActive}) => (isActive ? '1px solid #fff' : 'none')};
  margin-bottom: ${({isActive}) => (isActive ? '-1px' : '0')};
`

const TabContent = styled.div`
  overflow: auto;
`

const TabView = createComponent(tab, ({}, tab) => (
  {tab === 'console' && }
))

const ToolbarView = createComponent(tab, ({}, tab) => (
  
    
      Console
    
  
))

const SecondanaryTabs = styled.div`
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid #ddd;