elentari

Framework web criado com React, MaterialUi, React Router para fornecer uma estrutura sólida para a aplicação e produtividade.

Storybook online

http://storybook.elentari.s3-website.us-east-2.amazonaws.com

Dependencies

Add the above dependecies to your package.json and run yarn install

    "@material-ui/core": "4.5.1",
    "@material-ui/icons": "4.5.1",
    "final-form": "^4.18.5",
    "final-form-material-ui": "^0.3.0",
    "material-ui-pickers": "^2.2.4",
    "ramda": "^0.26.1",
    "react-final-form": "^6.3.0",
    "react-final-form-listeners": "^1.0.2",
    "react-router-dom": "^5.0.0",
    "react-rte": "^0.16.1",
    "react-select": "^3.0.8",
    "react-text-mask": "^5.4.3",
    "styled-components": "^4.4.0",
    "string-mask": "^0.3.0"

Instalar o elentari a partir de um commit

Utilizar para testar uma alteração a partir de um commit direto do gitlab. Com esse comando você pode testar uma alteração do elentari no seu projeto.

Comando:

yarn add  "git+https://robo:[email protected]/eureka/elentari.git#<SEU_BRANCH>ou<COMMIT_ID>"

• No seu projeto, lembrar de voltar o elentari no package.json para o verdaccio*, pois ao rodar o comando acima no seu projeto ele será alterado.

Install

You will need to use Eureka's Verdaccio. It's a npm registry proxy. Elentari is in this registry.

$ yarn add elentari --registry https://verdaccio.eurekalabs.com.br/
or
$ npm install --save elentari --registry https://verdaccio.eurekalabs.com.br/

Comece a usar

Para começar a utilizar o Framework, a forma mais simples é utilizar o componente AppWrap. Ele é o esqueleto da aplicação, fornece um menu lateral, uma barra superior e no conteúdo dele vamos adicionar as telas.

No seu arquivo de css principal, index.css(se você usou create-react-app para criar sua aplicação), adicione o seguinte css.

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}


#root {
  height: 100%;
}

Agora no arquivo App.js adicione o seguinte código:

import React  from 'react'
import FitnessCenter from '@material-ui/icons/FitnessCenter'
import {BrowserRouter as Router, Switch, Redirect, Route} from 'react-router-dom'
import {AppWrap} from 'elentari'

const menuItems = [{
  label: 'Academias',
  icon: FitnessCenter,
  pathname: '/academias',
}, {
  label: 'Pessoas',
  pathname: '/pessoas',
  icon: FitnessCenter,
}]

const Pessoas = () => <h1>Pessoas</h1>
const Academias = () => <h1>Academias</h1>

const Home = () => (
  <AppWrap menuItems={menuItems}>
    <Switch>
      <Route path='/pessoas' component={Pessoas} />
      <Route path='/academias' component={Academias} />
      <Redirect from='/' to='/academias'/>
    </Switch>
  </AppWrap>
)

const App = () => (
  <Router>
    <Route path='/' component={Home} />
  </Router>
)

export default App

AppWrap - Light Theme

Passando a prop lightTheme, o tema do menu lateral e content ficarão com um tema claro.

const Home = () => {
  const classes = userStyles()
  return (
    <AppWrap menuItems={menuItems} lightTheme>
      <Switch>
        <Route path='/pessoas' component={Pessoas} />
        <Route path='/academias' component={Academias} />
        <Redirect from='/' to='/academias'/>
      </Switch>
    </AppWrap>
  )
}

AppWrap - Customização de cores

Passando a seguinte estilização para o AppWrap na propriedade 'classes' o tema do AppWrap será customizado, além disso na propriedade 'MenuItemsClasses' é possível customizar os items de menu.

const appWrapStyles = makeStyles({
  drawerMenu: {
    background: '#b0bec5'
  },
  drawerHeader: {
    backgroundColor: '#ffab00'
  },
  content: {
    backgroundColor: '#ffecb3'
  }
})

const menuItemsStyles = makeStyles({
  menuColor: {
    color: '#37474f'
  },
  menuColorActive: {
    color: '#ffc107'
  },
  active: {
    borderLeft: `solid 3px #ffc107`,
    borderImageSlice: 1
  }
})

const Home = () => {
  const classes = appWrapStyles()
  return (
    <AppWrap
      menuItems={menuItems}
      classes={appWrapStyles()}
      menuItemClasses={menuItemsStyles}>
      <Switch>
        <Route path='/pessoas' component={Pessoas} />
        <Route path='/academias' component={Academias} />
        <Redirect from='/' to='/academias'/>
      </Switch>
    </AppWrap>
  )
}

License

MIT © ktabriga