Componetes ReactJS e MUI personalizados

Este pacote de componentes foi desenvolvido utilizando ReactJS e Material-UI para facilitar o desenvolvimento de aplicações web. Os componentes neste pacote são personalizáveis e fáceis de integrar com suas aplicações existentes.

Índice

• Requisitos
• Instalação
• Uso
• Componentes
• Suporte
• Licença

Requisitos

• Node.js versão 12.0 ou superior
• NPM versão 6.0 ou superior (ou Yarn)
• ReactJS versão 17.0 ou superior
• Material-UI versão 5.0 ou superior

Instalação

Para instalar o pacote de componentes em seu projeto, execute o seguinte comando:

npm install --save @kunizaki/mui-components-package

Ou, se você estiver usando o Yarn:

yarn add @kunizaki/mui-components-package

Uso

Para começar a usar os componentes em seu projeto, importe-os de acordo com a necessidade. Por exemplo:

import { NomeDoComponente } from '@kunizaki/mui-components-package';

function App() {
  return (
    <>
      <NomeDoComponente propriedade="valor" />
    </>
  );
}

export default App;

Componentes

Aqui está uma lista dos componentes disponíveis neste pacote:

Header: Criação de um cabeçalho fixo.

Lista de parâmetros:

• helpFunction => botão de ação para utilização na abertura do clique no ícone de ajuda
• logo => logomarca da empresa posicionada no ponto mais a esqueda da tela
• menuApps => menu modal suspenso acionado por um com ícone de grade localizado na parte esquerda
• menuUser => menu modal suspenso acionado por um ícone de usuário localizado na parte esquerda
• notifications => menu modal suspenso acionado por um ícone de notificações localizado na parte esquerda
• title => Títuilo da página é um texto localizado ao lado da logomarca
• userAvatar => imagem que atribui o ícone de usuário ou a foto do usuário

Exemplo de uso:

import { Header } from '@kunizaki/mui-components-package';

function Exemplo() {
  return (
    <Header 
        helpFunction={() => alert("Abrir Ajuda!")} 
        logo={logo} 
        menuApps={menuApps} 
        menuUser={menuUser} 
        notifications={notifications} 
        title="Área do Cliente" 
        userAvatar={avatar} 
    />
  );
}

export default Exemplo;

Loading: Gera o bloqueio da tela e exibição de mensagens no carregamento ou processamento dos dados.

Lista de parâmetros:

• helpFunction => botão de ação para utilização na abertura do clique no ícone de ajuda
• logo => logomarca da empresa posicionada no ponto mais a esqueda da tela
• menuApps => menu modal suspenso acionado por um com ícone de grade localizado na parte esquerda
• menuUser => menu modal suspenso acionado por um ícone de usuário localizado na parte esquerda
• notifications => menu modal suspenso acionado por um ícone de notificações localizado na parte esquerda
• title => Títuilo da página é um texto localizado ao lado da logomarca
• userAvatar => imagem que atribui o ícone de usuário ou a foto do usuário

Exemplo de uso:

import React, { useEffect, useState } from 'react';
import { Loading } from '@kunizaki/mui-components-package';

function Exemplo() {
  const informations = ["Processando...", "Aguarde!"];
  const [loading, setLoading] = useState(true);

  useEffect(() => {
        setTimeout(() => {
            setLoading(false);
        }, 5000)
    }, []);
  return (
    <>
        {loading && (
            <Loading loading={loading} informations={informations} />
        )}
    </>
  );
}

export default Exemplo;

MenuSidebar: Criação do menu para utilização no componente Sidebar.

Lista de parâmetros:

• menuItems => Array de objetos para montagem do menu

Exemplo de uso:

import React from 'react';
import { MenuSidebar } from '@kunizaki/mui-components-package';
import DashboardIcon from '@mui/icons-material/Dashboard';

const menuItems = [
    {
        title: 'Dashboard',
        path: '/',
        click: null,
        icon: <DashboardIcon />,
    },
    {
        title: 'ComSubMenu',
        icon: null,
        submenu: [
            {
                title: 'Exemplo',
                path: '/example',
                click: null,
                icon: null,
            },
            {
                title: 'Colapsado1',
                icon: null,
                children: [
                    {
                        title: 'Exemplos1',
                        path: '/example1',
                        click: null,
                        icon: null,
                    },
                    {
                        title: 'Colapsado2',
                        icon: null,
                        children: [
                            {
                                title: 'Exemplo2',
                                path: '/example2',
                                click: null,
                                icon: null,
                            },
                        ],
                    }
                ],
            },
        ]
    },
    {
        title: 'Alerta',
        path: null,
        click: () => alert("Evento de clique!"),
        icon: null,
    }
];

function Exemplo() {
    <MenuSidebar menuItems={menuItems} />
export default Exemplo;

Sidebar: Criação de uma área de menu lateral com colapsagem.

Lista de parâmetros:

• MenuSidebar => componente de menu criado no exemplo acima é passado por parâmetro para o Sidebar

Exemplo de uso:

import React, { useEffect, useState } from 'react';
import { Sidebar, MenuSidebar } from '@kunizaki/mui-components-package';
import menuItems from "../menuItems";

function Exemplo() {
  useEffect(() => {
        setTimeout(() => {
            setLoading(false);
        }, 5000)
    }, []);
  return (
    <>
        <Box component="main">
            <Sidebar MenuSidebar={<MenuSidebar menuItems={menuItems} />} />
        </Box>
    </>
  );
}

export default Exemplo;

Suporte

Se você encontrar algum problema ou tiver dúvidas sobre o uso deste pacote, entre em contato com André Kunizaki ([email protected]).

Licença

Este pacote de componentes está licenciado sob os termos da Licença GNU General Public License v3.0.