@component-book/react

Description

@component-book/react is a library designed to simplify the rendering of all frontend components in a React application. Eliminate complexity in building interfaces by easily visualizing all components in your application. This library provides a streamlined alternative to Storybook. With @component-book/react, you don't need to worry about complex configurations or waste time waiting for another project to run to view your application components.

Package Information

Installation

To start using @component-book/react in your project, install it via npm:

npm install @component-book/react

Note: If you are using Next.js 14, make sure to add the 'use client' directive to ensure proper compatibility.

Usage

Import the necessary components in your files and start using them in your code.

import { ComponentBook } from "@component-book/react";

import '@component-book/react/dist/index.css';

Now let's display it on the screen:

const items = [
  {
    name: "Button Red",
    component: Component,
    props: props,
    group: "Buttons",
    scope: "Components",
    options: {
      key: {
        description: "its description here",
        types: [
          { label: "Description 1", value: "Button description 1" },
          { label: "Description 2", value: "Button description 2" },
        ],
      },
    },
  },
];

return <ComponentBook items={items} defaultTheme="dark" />;

The item object receives the following properties:

• name: Receives the name of the component.
• component: Receives the component.
• props: Receives a mock of the props to initialize the component.
• group: Receives the group to which the component belongs.
• scope: Receives the scope to which the component belongs.

The options property of the item object is special and associates keys with the keys received in the props.

• description: For each key in options, like options.[key].description, displays the description associated with the [key] property in the props object.
• types: For each key in options, like options.[key].types[], maps each option within the associated types array to the [key] property and creates an <option> element for each one.
• label: Each options.[key].types[].label will be displayed in the <select> shown on the screen.
• value: Each options.[key].types[].value will be the value assigned to the property.

This structure provides dynamic configuration, allowing customization of options based on the keys received in the props. This is particularly useful when creating reusable and configurable components.

The defaultTheme variable provides the ability to set the default theme for displaying components, allowing users to easily choose between "light" and "dark" themes, adapting the appearance of components according to individual preferences.

Coming Soon: The library will receive a new styling, providing an enhanced visual experience.

Tradução para português BR

Descrição

O @component-book/react é uma biblioteca projetada para simplificar a renderização de todos os componentes frontend em uma aplicação React. Elimine a complexidade na construção de interfaces visualizando facilmente todos os componentes da sua aplicação. Esta biblioteca oferece uma alternativa simplificada ao Storybook. Com o @component-book/react, você não precisa se preocupar com configurações complexas ou perder tempo aguardando a execução de outro projeto para visualizar os componentes da sua aplicação.

Instalação

Para começar a usar o @component-book/react em seu projeto, instale-o via npm:

npm install @component-book/react

Observação: Se estiver utilizando o Next.js 14, certifique-se de adicionar a diretiva 'use cliente' para garantir a compatibilidade adequada

Uso

Importe os componentes necessários em seus arquivos e comece a usá-los em seu código.

import { ComponentBook } from "@component-book/react";

import '@component-book/react/dist/index.css';

agora vamos exibi-lo em tela:

const items = [
  {
    name: "Button Red",
    component: Component,
    props: props,
    group: "Buttons",
    scope: "Components",
    options: {
      key: {
        description: "its description here",
        types: [
          { label: "Description 1", value: "Button description 1" },
          { label: "Description 2", value: "Button description 2" },
        ],
      },
    },
  },
];

return <ComponentBook items={items} defaultTheme="dark" />;

O objeto item recebe as seguintes propriedades:

• name: Recebe o nome do componente.
• component: Recebe o componente.
• props: Recebe um mock das props para iniciar o componente.
• group: Recebe o grupo ao qual o componente pertence.
• scope: Recebe o escopo ao qual o componente pertence.

A propriedade options do objeto item é especial e associa as chaves às chaves recebidas nas props.

• description: Para cada chave em options, como options.[key].description, exibe a descrição associada à propriedade [key] no objeto props.
• types: Para cada chave em options, como options.[key].types[], mapeia cada opção dentro do array types associado à propriedade [key] e cria um elemento <option> para cada uma.
• label: Cada options.[key].types[].label será exibido no <select> que será mostrado em tela.
• value: Cada options.[key].types[].value será o valor atribuído à propriedade.

Essa estrutura oferece uma configuração dinâmica, permitindo a personalização de opções com base nas chaves recebidas nas props. Isso é particularmente útil ao criar componentes reutilizáveis e configuráveis.

A variável defaultTheme oferece a capacidade de definir o tema padrão para a exibição dos componentes. permitindo que escolham entre temas "light" e "dark" com facilidade, adaptando a aparência dos componentes de acordo com as preferências individuais.

Em Breve: A biblioteca receberá uma nova estilização, proporcionando uma experiência visual aprimorada.