Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/design-system-fitbank/design-system-fitbank-450
Design system usado nas aplicações da Fit Bank Pagamentos Eletronicos
https://github.com/design-system-fitbank/design-system-fitbank-450
cypress react reactjs storybook styled-components
Last synced: about 2 months ago
JSON representation
Design system usado nas aplicações da Fit Bank Pagamentos Eletronicos
- Host: GitHub
- URL: https://github.com/design-system-fitbank/design-system-fitbank-450
- Owner: Design-System-FitBank
- Created: 2022-10-04T18:14:26.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-06-16T14:19:16.000Z (over 1 year ago)
- Last Synced: 2024-10-30T07:00:08.963Z (about 2 months ago)
- Topics: cypress, react, reactjs, storybook, styled-components
- Language: TypeScript
- Homepage:
- Size: 4.19 MB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Design System FitBank 450
> Design system usado nas aplicações da FitBank pagamentos eletrônicos
## Pre-requisitos
Este design system requer [React](https://pt-br.reactjs.org/docs/create-a-new-react-app.html) e [React-Dom](https://pt-br.reactjs.org/docs/create-a-new-react-app.html) na versão 18.2.0 e [Styled Components](https://styled-components.com/docs/basics#installation) na versão 5.x.x.. Além disso é necessário ter a font [Roboto](https://fonts.google.com/specimen/Roboto) na head do projeto.
## Sumario
- [Descrição](#design-system-fitBank-450)
- [Pre-requisitos](#pre-requisitos)
- [Sumario](#sumario)
- [Instalação](#instalação)
- [Modo de uso](#modo-de-uso)
- [Documentação](#documentação)
- [Versionamento](#versionamento)
- [Autores](#autores)
- [License](#license)
## Instalação
**ANTES DA INSTALAÇÃO:** por favor leia [Pre-requisitos](#pre-requisitos)
Para instalar a biblioteca, rode:
```sh
npm install design-system-fitbank-450
```
Ou se preferir usando o Yarn:
```sh
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](https://github.com/Fitbank-Pagamentos-Eletronicos/Design-System/blob/main/src/theme/styled.d.ts)
```js
import { ThemeDSProvider } from 'design-system-fitbank-450'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
);
```
ou essa alternativa com tema personalizado
```js
import { ThemeDSProvider } from 'design-system-fitbank-450'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
);
```
Agora pode usar os componentes no local onde quiser
```js
import {Button} from 'design-system-fitbank-450'
function App() {
return (Teste);
}
export default App;
```
## Documentação
Documentação completa dos componentes [StoryBook](https://sharedimages.fitbank.com.br/sharedimages/designSystemDoc/index.html?path=/story/button--default).
## Versionamento
Para as versões disponíveis, consulte o [Versões](https://github.com/Design-System-FitBank/design-system-fitbank-450/releases)
## Autores
[Autores](https://github.com/Design-System-FitBank/design-system-fitbank-450/graphs/contributors)
----------------------------------