UI Kit Web

Bem-vindo ao UI Kit, uma biblioteca de componentes reutilizáveis para as aplicações Zemo Bank.

Instalação

Instale o pacote através do npm ou yarn:

npm i @zemobanksa/ui-kit-web

# ou

yarn add @zemobanksa/ui-kit-web

Como Usar

Para começar a utilizar o UI Kit, você precisa realizar dois passos essenciais:

1. Importar o arquivo de estilos global
2. Envolver sua aplicação com o Provider do UI Kit

1. Importar o arquivo de estilos

No arquivo principal da sua aplicação, importe o arquivo de estilo global para garantir que todos os componentes tenham o estilo adequado:

import '@zemobanksa/ui-kit-web/styles.css'

2. Envolver a aplicação com o Provider

Envolva sua aplicação com o UIKitProvider para configurar o contexto necessário para o funcionamento dos componentes. Isso deve ser feito no nível mais alto da aplicação:

import { UIKitProvider } from '@zemobanksa/ui-kit-web';

function App() {
  return (
    <UIKitProvider>
      <div className="App">
        {/*Seus componentes aqui*/}
      </div>
    </UIKitProvider>
  );
}

export default App;

Exemplos

Aqui está um exemplo de como usar um componente básico do UI Kit:

import { Button } from '@zemobanksa/ui-kit-web';

function MyComponent() {
  return (
    <Button onClick={() => alert('Clicou!')}>
      Clique aqui
    </Button>
  );
}

export default MyComponent;

Visualização dos Componentes com Storybook

Para visualizar e testar todos os componentes disponíveis no UI Kit Web, você pode acessar o Storybook hospedado no Chromatic.

Acessando o Storybook

Você pode visualizar os componentes diretamente através do seguinte link:

Storybook no Chromatic

O Storybook oferece um ambiente interativo onde você pode explorar e testar os componentes de forma isolada, além de ver as variações e propriedades disponíveis para cada um.