Gerar componentes React

Gere componentes React com visões do seu modelo de arquitetura.

Instalação

Certifique-se de incluir likec4 nas dependências do projeto:

npm i likec4

pnpm add likec4

yarn add likec4

bun add likec4

React

O comando a seguir gera um bundle JavaScript com o componente React e seu arquivo de declarações de tipos (.d.ts):

npx likec4 codegen react --outfile ./src/likec4.generated.js

pnpx likec4 codegen react --outfile ./src/likec4.generated.js

yarn dlx likec4 codegen react --outfile ./src/likec4.generated.js

bunx likec4 codegen react --outfile ./src/likec4.generated.js

# Aliases
npx likec4 generate react -o ./src/likec4.generated.js
npx likec4 gen react -o ./src/likec4.generated.js

Para utilizar o componente:

import { LikeC4View } from './likec4.generated'

const App = () => {
  return (
    <div>
      <LikeC4View viewId="index" />
    </div>
  )
}

Propriedade	Descrição
`viewId`	Enumeração tipada das suas visões
`where`	Opcional; consulte filtro
`injectFontCss`	Injeta CSS com a fonte IBM Plex Sans Variable pela CDN. O padrão é `true`

Filtro

where utiliza o mesmo conceito de predicado de visão, mas é aplicado dinamicamente e permite exibir ou ocultar elementos conforme o contexto. Por exemplo:

import { LikeC4View } from './likec4.generated'

// Keeps elements and relationships where:
// - tag is not 'legacy'
// - and
// - tag is 'v1' or 'v2'
const App = () => {
  return (
    <div>
      <LikeC4View
        viewId="index"
        where={{
          and: [
            { tag: { neq: 'legacy' } },
            {
              or: [
                { tag: { eq: 'v1' } },
                { tag: { eq: 'v2' } }
              ]
            }
          ]
        }}/>
    </div>
  )
}

O layout permanece inalterado, ou seja, os elementos não são reorganizados.
Atenção: where é aplicado tanto a elementos quanto a relacionamentos.

ReactLikeC4

LikeC4View renderiza as visões do modelo e permite explorá-las em uma janela de navegação.
O componente atende à maioria dos casos de uso, mas, se precisar de mais funcionalidades, utilize ReactLikeC4:

import { ReactLikeC4, type $ViewId } from './likec4.generated'
import { useState } from 'react'

const App = () => {
  const [viewId, setViewId] = useState<$ViewId>('index')
  return (
    <ReactLikeC4
      viewId={viewId}
      pannable
      zoomable={false}
      keepAspectRatio
      showNavigationButtons
      enableDynamicViewWalkthrough={false}
      enableElementDetails
      enableRelationshipDetails
      onNavigateTo={setViewId}
      onNodeClick={...}
    />
  )
}

ReactLikeC4 é um componente de baixo nível que oferece mais controle e permite reagir aos eventos. Consulte o código-fonte para conhecer as opções disponíveis.

Compartilhe suas ideias ou tire dúvidas nas discussões do GitHub.

A geração de código prepara um componente que já está vinculado ao seu modelo.
Mas também é possível utilizar um componente genérico da biblioteca:

import { ReactLikeC4, LikeC4ModelProvider } from 'likec4/react'
import { RenderIcon, likec4model } from './likec4.generated'

const App = () => {
  return (
    <LikeC4ModelProvider likec4model={likec4model}>
      <ReactLikeC4
        viewId={"index"}
        renderIcon={RenderIcon} // Optional, used for bundled icons
        onEdgeClick={...}
      />
    </LikeC4ModelProvider>
  )
}