dashmin
1.0.0
Olá dev.. aqui é Dashmin! Nada mais é do que uma base simples e elegante para auxiliá-lo no desenvolvimento do seu sistema administrativo. Ele ainda não possui muitos componentes, mas já possui algumas bibliotecas famosas como Material UI e Reactstrap integradas, então se você conhece algum deles será fácil criar suas páginas.. caso não queira usar nenhum deles eles, sinta-se à vontade para usar a biblioteca. ao seu gosto. Então vamos começar.
Caso queira criar seu admin usando DASHmin, siga o tutorial de instalação abaixo!
├── assets
│ ├── logo.png
│ ├── login.png
│ ├── dashmin.png
├── node_modules
├── public
├── src
│ ├── components
│ ├── helpers
│ ├── routes
│ ├── services
│ ├── store
│ ├── views
│ ├── App.js
│ ├── index.js
├── .editorconfig
├── .env
├── .gitignore
├── .travis.yml
├── package.json
├── README.md
└── LICENSE.mdUsuário: senha do Dashmin: 123
Demonstração ao vivo
Para executar este projeto, você precisa ter o Node.js instalado em sua máquina! Caso não tenha, acesse o site https://nodejs.org/en/ e baixe e instale conforme é ensinado na documentação!
Para começar, clone o repositório e instale as dependências usando os comandos abaixo.
git clone https://github.com/hiukky/dashmin-react.git -b master nameOfYourProject
cd nameOfYourProject
yarn install
npm install
Certo.. depois de instalar todas as dependências você pode rodar a aplicação e verificar se está tudo funcionando corretamente.
yarn run start
npm run start
Preparar!! se tudo correu bem, basta verificar sua aplicação no navegador http://127.0.0.1:3000/.
O Dashmin já está todo configurado, então para começar você pode criar suas visualizações em src/views/YourView e depois usá-las no arquivo de rotas em routes .
Dentro do diretório views , crie seu componente de visualização a ser renderizado.
// Imports
import React from 'react' ;
// Products
const Example01 = ( ) => (
< div >
< h1 > Example01 </ h1 >
</ div >
) ;
export default Example01 ; // Imports
import React from 'react' ;
// Products
const Example02 = ( ) => (
< div >
< h1 > Example02 </ h1 >
</ div >
) ;
export default Example02 ; Após criar sua visualização, acesse routes/index.js e importe as visualizações criadas.
// Views
import Example01 from 'pages/example01' ;
import Example02 from 'pages/example02' ;Defina suas rotas.
// Routes
const Routes = {
example01 : '/example01' ,
example02 : '/example02' ,
} ; Após definir as rotas, defina um const Dashmin passando as propriedades de definição. Dashmin requer informações para navbar , sidebar e content . por isso é importante informá-los.
const Dashmin = {
// navbar
navbar : {
}
// sidebar
sidebar : {
}
// Content
content : [
]
} Na navbar você precisa inserir um objeto suspenso contendo os objetos user e buttons .
// Serices
import { logout } from 'services/auth' ;
const Dashmin = {
// navbar
navbar : {
// Dropdown
dropdown : {
// User Profile
user : {
avatar : 'https://i.imgur.com/NpICPSl.jpg' ,
name : 'R o m u l l o' ,
jobRole : 'Administrator' ,
} ,
// Buttons events
buttons : {
settings : ( ) => { } ,
profile : ( ) => { } ,
logout : ( ) => {
logout ( ) ;
document . location . reload ( ) ;
}
}
}
} ,
} Para a sidebar você precisa passar brand e buttons . Para brand você precisa passar apenas o nome da sua organização inserindo o nome completo max e abreviado min . Para buttons , são necessários um name , icon e route .
Sobre os ícones .. o Dashmin usa o React icons , então você pode simplesmente importar os ícones que deseja usar e passar o componente para ícone.
// Icons
import {
IoMdOptions ,
IoMdPeople ,
} from 'react-icons/io' ;
const Dashmin = {
// sidebar
sidebar : {
// brand
brand : {
max : 'D A S H M I N' ,
min : 'dmin'
} ,
// buttons
buttons : [
{
name : 'Example01' ,
icon : < IoMdOptions /> ,
route : Routes . example01 ,
} ,
{
name : 'Example02' ,
icon : < IoMdOptions />
route : Routes . example02 ,
} ,
]
}
} Finalmente a parte do conteúdo. Para isso será necessário passar um array de objetos contendo a route e o componente de visualização para serem view de forma redentora.
// Views
import Example01 from 'pages/example01' ;
import Example02 from 'pages/example02' ;
const Dashmin = {
// content
content : [
{
route : Routes . example01 ,
view : Example01
} ,
{
route : Routes . example02 ,
view : Example02
} ,
]
}O arquivo Route contendo as configurações feitas acima.
// React
import React from 'react' ;
// Views
import Example01 from 'views/example01' ;
import Example02 from 'views/example02' ;
// Icons
import {
IoMdOptions ,
IoMdPeople ,
} from 'react-icons/io' ;
// Routes
const Routes = {
example01 : '/example01' ,
example02 : '/example02' ,
} ;
// Dashmin
const Dashmin = {
// Navbar
navbar : {
// Dropdown
dropdown : {
// User Profile
user : {
avatar : 'https://i.imgur.com/NpICPSl.jpg' ,
name : 'R o m u l l o' ,
jobRole : 'Administrator' ,
} ,
// Buttons events
buttons : {
settings : ( ) => { } ,
profile : ( ) => { } ,
logout : ( ) => {
logout ( ) ;
document . location . reload ( ) ;
}
}
}
} ,
// Sidebar
sidebar : {
// brand
brand : {
max : 'D A S H M I N' ,
min : 'dmin'
} ,
// buttons
buttons : [
{
name : 'Example01' ,
icon : < IoMdOptions /> ,
route : Routes . example01 ,
} ,
{
name : 'Example02' ,
icon : < IoMdOptions />
route : Routes . example02 ,
} ,
]
} ,
// Content
content : [
{
route : Routes . example01 ,
view : Example01
} ,
{
route : Routes . example02 ,
view : Example02
} ,
]
} ;
export default Dashmin ;Depois de seguir as etapas acima, você pode testar seu aplicativo usando um dos comandos abaixo, caso ainda não o tenha executado.
yarn run start
npm run start
Preparar!! se tudo correu bem, basta verificar sua aplicação no navegador http://127.0.0.1:3000/.
? IU de materiais
? Correia de reação
? Ícones de reação
? Dom do roteador React
? Redux
? Componentes estilizados
