Design System FitBank 450

Design system usado nas aplicações da FitBank pagamentos eletrônicos

Pre-requisitos

Este design system requer React e React-Dom na versão 18.2.0 e Styled Components na versão 5.x.x.. Além disso é necessário ter a font Roboto na head do projeto.

Sumario

• Descrição
• Pre-requisitos
• Sumario
• Instalação
• Modo de uso
• Documentação
• Versionamento
• Autores
• License

Instalação

ANTES DA INSTALAÇÃO: por favor leia Pre-requisitos

Para instalar a biblioteca, rode:

npm install design-system-fitbank-450

Ou se preferir usando o Yarn:

yarn add design-system-fitbank-450

Modo de uso

O atributo tema é opcional caso não seja passado assumira o padrão do FitBank e envolva o componente raiz do seu projeto. Caso passe um tema personalizado deve seguir essa tipificação Styled.d.ts

import { ThemeDSProvider } from 'design-system-fitbank-450'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <ThemeDSProvider>
      <App />
    </ThemeDSProvider>
  </React.StrictMode>
);

ou essa alternativa com tema personalizado

import { ThemeDSProvider } from 'design-system-fitbank-450'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <ThemeDSProvider theme={temaPersonalizado}>
      <App />
    </ThemeDSProvider>
  </React.StrictMode>
);

Agora pode usar os componentes no local onde quiser

import {Button} from 'design-system-fitbank-450'

function App() {
  return (<Button>Teste</Button>);
}

export default App;

Documentação

Documentação completa dos componentes StoryBook.

Versionamento

Para as versões disponíveis, consulte o Versões

Autores

Autores