@engloba-tech/englobity

Customs web components with React and Material

Usage no npm install needed!

<script type="module">
  import englobaTechEnglobity from 'https://cdn.skypack.dev/@engloba-tech/englobity';
</script>

README

Englobity

React Material-ui custom web components

Installation

npm i --save @material-ui/pickers @material-ui/core @material-ui/lab @engloba-tech/englobity

After Instalation, we must initiate englobityTheme.

Create your own styles in your root project

styles/color.styles.js

export const color = {
    basic: {
        brightest: '',
        brighter: '',
        bright: '',
        normal: '',
        semidark: '',
        dark: '',
        darker: '',
    },
    primary: {
        dark: '',
        light: '',
        main: '',
    },
    secondary: {
        dark: '',
        light: '',
        main: '',
    },
    action: {
        error: '',
        activeButton: '',
    },
};

styles/globals.styles.js

import { color } from './color.styles';

export const globals = {
    html: {
        fontSize: '',
    },
    body: {
        backgroundColor: color.secondary.main,
    },
};

And use methon createEnglobaMaterialTheme to define the Theme

styles/index.js

import { color } from './color.styles';
import { globals } from './globals.styles';
import { createEnglobaMaterialTheme } from '@engloba-tech/englobity';

// create material engloba theme
const fontFamily = ['Poppins', 'Roboto'].join(',');
const theme = createEnglobaMaterialTheme(color, globals, fontFamily);

export default theme;

This theme, you must instanciate at your index.js

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import globalStyles from './styles';
import { ThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';

[. . .]

ReactDOM.render(
  <ThemeProvider theme={globalStyles}>
    {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
    <CssBaseline />
    <App />
  </ThemeProvider>,
document.getElementById('root'));

More def information