Meus Documentos

Barra Lateral Multi-raiz

flex-layout

  • Getting Started

  • Guides

  • Reference

typed-rx-http

  • Getting Started

  • Guides

  • Reference

global-rx-state

  • Getting Started

  • Guides

  • Reference

webflux-fe-dev-assistant

reactive-mongo-dsl

Para você
Byeolnaerim
Isso será.

Criamos ferramentas que conectam frontend e backend, focando na segurança de tipos e na produtividade reativa.
Front: RxJS/React/Next · Back: WebFlux/MongoDB
Código ABERTO
Frontend · RxJS
@byeolnaerim/typed-rx-http

Cliente HTTP seguro baseado em tipos com RxJS

HTTP
RxJS
Cliente
npm i @byeolnaerim/typed-rx-http rxjs
Frontend · React UI
@byeolnaerim/flex-layout

Componente de layout React para visualização dividida redimensionável

React
Visualização Dividida
Redimensionável
npm i @byeolnaerim/flex-layout rxjs react
Frontend · React State
Hooks de divisão / arrastar

Pequeno primitive de estado React que fornece estado global nomeado singleton com RxJS, reducer e persistência opcional

React
RxJS
Estado
npm i @byeolnaerim/global-rx-state rxjs react
Backend · WebFlux
com.byeolnaerim:webflux-fe-dev-assistant

Gera OpenAPI·AsyncAPI, esqueleto de manipulador e enumeração de campo MongoDB com base na fonte do backend para reduzir a duplicação com o frontend

WebFlux
OpenAPI
AsyncAPI
implementation("com.byeolnaerim:webflux-fe-dev-assistant:<version>")
Backend · MongoDB
com.byeolnaerim:reactive-mongo-dsl

DSL para compor query·agregação·lookup·atualização atômica·bulk·Atlas Search·Vector Search com o MongoDB Reactive Streams Driver e baseado em Reactor.

MongoDB
Reativo
DSL
implementation("com.byeolnaerim:reactive-mongo-dsl:1.0.0")
LAYOUT FLEX
Uso básico do FlexLayout

Exemplo de configuração de uma Split View redimensionável na forma mais simples.
À esquerda está o código, à direita está a tela de execução real com a mesma estrutura.

Código

import { FlexLayout, FlexLayoutContainer } from "@byeolnaerim/flex-layout";

<FlexLayout direction="column" layoutName="column-layout">
  <FlexLayoutContainer containerName="top-container" isResizePanel>
    <FlexLayout direction="row" layoutName="top-layout">
      <FlexLayoutContainer containerName="top-left" isResizePanel grow={1.3}>
        ...
      </FlexLayoutContainer>
      <FlexLayoutContainer containerName="top-right" grow={0.7}>
        ...
      </FlexLayoutContainer>
    </FlexLayout>
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="bottom-container">
    <FlexLayout direction="row" layoutName="bottom-layout">
      <FlexLayoutContainer containerName="bottom-left" isResizePanel grow={0.3}>
        ...
      </FlexLayoutContainer>
      <FlexLayoutContainer containerName="bottom-right" grow={1.7}>
        ...
      </FlexLayoutContainer>
    </FlexLayout>
  </FlexLayoutContainer>
</FlexLayout>
© 2026 Byeolnaerim. Todos os direitos reservados.IntroduçãoPolítica de Privacidade