Devbsb-ui-kit NPM

DevBSB UI Kit 🌠

npm.io

Esse UI kit foi criado para facilitar a criação de aplicações ReactJS, com componentes prontos para ser utilizados. Utilizado nesse projeto: React, Typescript, Styled-Components, Storybook e React-Icons.

Storybook online 🌍

Código da aplicação no GitHub 📝

Instalações e uso ⚙

Crie um novo projeto com create react-app, ou utilize um existente e adicione o ui kit.

# Crie um novo projeto
$ yarn create react-app my-app

# Acesse a pasta do projeto
$ cd my-app/

# Instale o ui kit
$ yarn add devbsb-ui-kit

# Rode o projeto
$ yarn start

Pronto! Agora acesse nosso storybook, para utilizar os components.

Configuração e exemplo de uso ⌛

Para não ter erros de css nas notificações, radio button e checkbox é preciso ter um arquivo de reset css no seu projeto, contendo:

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

Exemplo de uso do componente Spinner.

import React from 'react';
import { Spinner } from 'devbsb-ui-kit';

function Loading() {
    return(<Spinner />);
}

export default Loading;

Fonte recomendada para utilização do UI kit: Roboto e Roboto Mono.

Desenvolvimento 📌

Clone ou faça o download desse repositório.

# Clone o repositório
$ git clone https://github.com/iaematt/ui-kit

# Acesse a pasta
$ cd ui-kit/

# Instale as dependencias
$ yarn

# Rode a aplicação
$ yarn storybook

# Para gerar sua aplicação
$ yarn build-storybook

Acesse localhost:8080 em seu navegador.