@exodus-bluego/admin-ui v0.1.6

Admin UI

componentes personalizados por y para el equipo de bluego.

Contenido

• adminUI
  • contenido
    • boton
      • opciones
      • ejemplo
    • textfield
      • opciones
      • ejemplo
    • switch
      • opciones
      • ejemplo
    • Filtro Mapa
      • opciones
      • ejemplo
    • iconbutton
      • opciones
      • ejemplo
    • cardlogo
      • opciones
      • ejemplo
    • dropdown
      • opciones
      • ejemplo
    • Optionbutton
      • opciones
      • ejemplo
    • Avatar
      • opciones
      • ejemplo
    • AppBar
      • opciones
      • ejemplo
    • tabmenu
      • opciones
      • ejemplo
    • DispatchInfoMenu
      • opciones
      • ejemplo
    • StepperQuoteService
      • opciones
      • ejemplo
    • StepperDragabbleQuote
      • opciones
      • ejemplo
    • StepperCreateService
      • opciones
      • ejemplo
    • NumberTextfield
      • opciones
      • ejemplo
    • Modal
      • opciones
      • ejemplo
    • Pagination
      • opciones
      • ejemplo
    • card
      • opciones
      • ejemplo
    • DrawerPerfil
      • opciones
      • ejemplo
    • DrawerMenu
      • opciones
      • ejemplo
    • ToolTip
      • opciones
      • ejemplo

Boton

Desarrollado por Dan Lopez

Link componente

Opciones del boton

Ejemplo del boton

import React, { FC } from 'react';
import EBAButton from '@exodus-bluego/templete/EBAButton';

const fnButton = () => {
  console.log('funcion del componente');
};

const MiComponente: React.FC = () => {
  return (
    <EBAButton variant="contained" btnClass="aceptarBtn" onClick={() => fnButton()}>
      Texto del boton
    </EBAButton>
  );
};

textfield

Desarrollado por Alfredo Zum

Link componente

Opciones textfield

Ejemplo textfield

import React, { FC } from 'react';
import EBATextField from '@exodus-bluego/templete/EBATextField';

const fnChangeTextfield = event => {
  console.log('Cambio el valor del textfield a :' + event.currentTarget.value);
};

const MiComponenteTextfield: React.FC = () => {
  return (
    <EBATextField
      placeholder="Prueba placeholder"
      variant="outlined"
      size="medium"
      label="Prueba labek"
      fullWidth={false}
      multiline={false}
      disabled={false}
      color="primary"
      type="text"
      value="Prueba"
      onChange={fnChangeTextfield}
    />
  );
};

Switch

Desarrollado por Alfredo Zum

Link componente

Opciones switch

Ejemplo switch

import React, { FC } from 'react';
import EBASwitch from '@exodus-bluego/templete/EBASwitch';

const [value, setValue] = useState(true);
const fnChangeSwitch = (event: any): void => {
  event.preventDefault();
  const switchValue = event.currentTarget.value;
  setValue(switchValue);
};

const MiComponenteSwitch: React.FC = () => {
  return <EBASwitch disabled={false} checked={value} labelLeft="Inactico" labelRight="Actico" onChange={fnChangeTextfield} />;
};

Filtro Mapa

Desarrollado por Alfredo Zum

Link componente menu Link componente select Link componente button

Opciones Filtro Mapa

Se puede usar de dos maneras con un solo campo de seleccion (item) o con multiples (itemsMultiple) campos en el filtro

Ejemplo Filtro Mapa

import React, { FC } from "react";
import EBAFiltroMapa from '@exodus-bluego/templete/EBAFiltroMapa'

const fnChange = (event) => {
  console.log('Filtros selecionados);
}

const fnChange = (event) => {
  const newValue = event.target;
  console.log(`Se cambio el valor a ${newValue.value} del campo ${newValue.name}`);
}
const fnClose = (event) => {
  console.log(`El resultado de los filtros son`, event.target);
}
const fnClean = () => {console.log("Se limpio los campos del formulario")}

const MiComponenteFiltroMapaMultiple: React.FC = () => {

  return (
    <EBAFiltroMapa
      "itemsMultiple": [
        {
          'type': 'select',
          'title': 'Columna',
          'items': [
            'Id',
            'Nombre',
            'Repartidores',
            'Estatus'
          ],
          'value': 'Id'
        },
        {
          'type': 'date',
          'title': 'Fecha',
          'value': new Date('2022-01-31')
        },
      ],
      onChange={fnChange}
      onClose={fnClose}
      onClean={fnClean}
      onClick={fnClick}
    >
      {<children /> | "Filtro"}
    </EBAFiltroMapa>
  );
};

IconButton

Desarrollado por Dan Lopez

Link componente

Opciones del iconbutton

Ejemplo del iconbutton

import React, { FC } from 'react';
import EBAIconButton from '@exodus-bluego/templete/EBAIconButton';

const fnButton = () => {
  console.log('funcion del componente');
};

const MiComponente: React.FC = () => {
  return (
    <EBAButton variant="contained" onClick={() => fnButton()}>
      {<Icon />}
    </EBAButton>
  );
};

CardLogo

Desarrollado por Dan Lopez

Link componente

Opciones del cardLogo

Ejemplo del cardLogo

import React, { FC } from 'react';
import EBACardLogo from '@exodus-bluego/templete/EBACardLogo';

const fnButton = () => {
  console.log('funcion del componente');
};

const MiComponente: React.FC = () => {
  return <EBACardLogo showIcon={<Icon />} onClick={() => fnButton()} />;
};

DropDown

Desarrollado por Dan Lopez

Link componente

Opciones del dropDown

Ejemplo del dropDown

import React, { FC } from 'react';
import EBADropDown from '@exodus-bluego/templete/EBADropDown';

const fnButton = () => {
  console.log('funcion del componente');
};

const MiComponente: React.FC = () => {
  return <EBADropDown currencies={estados} areaLabel="initialvalue" selectedValue="Guanajuato" />;
};

OptionButton

Desarrollado por Dan Lopez

Link componente Link componente

Opciones del OptionButton

Ejemplo del OptionButton

import React, { FC } from "react";
import EBAOptionButton from '@exodus-bluego/templete/EBAOptionButton'

const newArray: typeArray (name: string, id: number, isDisable: boolean, nameStyle: "chkCyan"| "chkPink"| "chkGreen"| "chkYellow"| "chkRed"| "chkBlue") => {
  return ({ "primero", 1, false,  "chkCyan" },{ "segundo", 2, false,  "chkGreen" })
}

const fnButton = () => {console.log("funcion del componente")}
const fnChange = () => {console.log("funcion del componente")}

const MiComponente: React.FC = () => {

  return (
      <EBAOptionButton
        onClick={fnButton}
        onChange={fnChange}
        currencies={newArray}
      />
  );
};

Avatar

Desarrollado por Alfredo Zum

Link componente menu Link componente button Link componente avatar

Opciones Avatar

Se puede usar de dos maneras default con los campos preestablecido o agregar tus propio componentes al menu

Ejemplo Avatar

import React, { FC } from 'react';
import EBAAvatar from '@exodus-bluego/templete/EBAAvatar';

const fnClick = event => {
  console.log(`Se clickeo el boton ${event.target.value}`);
};

const fnClose = event => {
  console.log('Se cerro el menu');
};

const MiComponenteAvatar: React.FC = () => {
  return (
    <EBAAvatar
      src="https://mui.com/static/images/avatar/2.jpg"
      alt="BlueGo Admin"
      nameAvatar="Carlos Ramirez"
      emailAvatar="carlos.ramirez@exodus.com"
      enableColorOnDark={false}
      onChange={fnClick}
      onClose={fnClose}
    />
  );
};

const MiComponenteCustomAvatar: React.FC = () => {
  return (
    <EBAAvatar src="https://mui.com/static/images/avatar/2.jpg" alt="BlueGo Admin" nameAvatar="Carlos Ramirez">
      {<children /> | <p style={{ textAlign: 'center' }}>Avatar Menu</p>}
    </EBAAvatar>
  );
};

AppBar

Desarrollado por Alfredo Zum

Link componente appbar Link componente toolbar

Opciones AppBar

Ejemplo AppBar

import React, { FC } from 'react';
import EBAAppBar from '@exodus-bluego/templete/EBAAppBar';

const leadingComponent = () => {
  return <label>Logo</label>;
};

const avatarComponent = () => {
  return <label>Avatar componente</label>;
};

const MiComponente: React.FC = () => {
  return (
    <EBAAppBar
      elevation={0}
      position="fixed"
      color="transparent"
      enableColorOnDark={false}
      rightChild={leadingComponent()}
      leftChild={leadingComponent()}
    />
  );
};

TabMenu

Desarrollado por Dan Lopez

Link componente

Opciones de TabMenu

Ejemplo de TabMenu

import React, { FC } from 'react';
import EBATabMenu from '@exodus-bluego/templete/EBATabMenu';

const currencies = [
  {
    name: 'one',
    id: 1,
  },
  {
    name: 'two',
    id: 2,
  },
  {
    name: 'three',
    id: 3,
  },
  {
    name: 'four',
    id: 4,
  },
];

const MiComponente: React.FC = () => {
  return <EBATabMenu currencies={currencies} />;
};

DispatchInfoMenu

Desarrollado por Alfredo Zum

Link componente menu Link componente button Link componente textfield

Opciones del DispatchInfoMenu

Ejemplo DispatchInfoMenu

import React, { FC } from 'react';
import EBADispatchInfoMenu from '@exodus-bluego/templete/EBADispatchInfoMenu';

const fnClick = () => console.log(`Se clickeo el boton darkmode`);

const fnCancel = () => console.log(`Se clickeo el boton notificacion`);

const MiComponenteAppBar: React.FC = () => {
  return (
    <EBADispatchInfoMenu name="Nombre" phone="Telefono" comment="Comentario" onClick={onClick} onCancel={onCancel}>
      {<children /> | 'Abrir Formulario'}
    </EBADispatchInfoMenu>
  );
};

StepperQuoteService

Desarrollado por Alfredo Zum

Link componente stepper

Opciones StepperQuoteService

Ejemplo StepperQuoteService

import React, { FC } from 'react';
import EBAStepperQuoteService from '@exodus-bluego/templete/EBAStepperQuoteService';

const MiComponenteStepperQuoteService: React.FC = () => {
  const steps = [
    {
      children: <p>step 1</p>,
    },
    {
      children: <p>step 2</p>,
    },
    {
      children: <p>step 3</p>,
    },
  ];

  return <EBAStepperQuoteService steps={steps} />;
};

StepperDragabbleQuote

Desarrollado por Alfredo Zum

Link draggable

Opciones StepperDragabbleQuote

Ejemplo StepperDragabbleQuote

import React, { FC } from 'react';
import EBAStepperDraggableQuote from '@exodus-bluego/templete/EBAStepperDraggableQuote';

const MiComponenteStepperQuoteService: React.FC = () => {
  const steps = [
    {
      id: 'step 1',
      children: <p>step 1</p>,
      error: false,
      completed: false,
    },
    {
      id: 'step 2',
      children: <p>step 2</p>,
      error: false,
      completed: false,
    },
    {
      id: 'step 3',
      children: <p>step 3</p>,
      error: false,
      completed: false,
    },
  ];

  return <EBAStepperDraggableQuote steps={steps} />;
};

StepperCreateService

Desarrollado por Alfredo Zum

Link componente stepper

Opciones StepperCreateService

Ejemplo StepperCreateService

import React, { FC } from 'react';
import EBAStepperCreateService from '@exodus-bluego/templete/EBAStepperCreateService';

const MiComponenteStepperCreateService: React.FC = () => {
  const steps = [
    {
      title: 'Recolección',
      label: 'Lugar de recolección',
      address: 'Plaza aleira Avenida Juan Gil Preciado, parques Zapopan',
      children: <p>step 1</p>,
    },
    {
      title: 'Entrega 1',
      label: 'Lugar de entrega',
      address: 'Plaza aleira Avenida Juan Gil Preciado, parques Zapopan',
      children: <p>step 2</p>,
    },
    {
      title: 'Entrega 2',
      label: 'Lugar de entrega',
      address: 'Plaza aleira Avenida Juan Gil Preciado, parques Zapopan',
      children: <p>step 3</p>,
    },
  ];

  return <EBAStepperCreateService steps={steps} />;
};

NumberTextfield

Desarrollado por Alfredo Zum

Link componente textfield Link componente iconbutton

Opciones NumberTextfield

Ejemplo NumberTextfield

import React, { FC } from 'react';
import EBANumberTextfield from '@exodus-bluego/templete/EBANumberTextfield';

const MiComponenteNumberTextfield: React.FC = () => {
  const fnClick = (value: number) => console.log(`El valor es ${value}`);

  return <EBANumberTextfield value={0} onClick={fnClick} />;
};

Modal

Desarrollado por Alfredo Zum

Link componente modal

Opciones Modal

Ejemplo Modal

import React, { FC } from 'react';
import EBAModal from '@exodus-bluego/templete/EBAModal';

const fnCloseModal = (_, reason) => console.log(`Se cerro el modal mediante: ${reason}`);

const MiComponenteModal: React.FC = () => {
  return (
    <EBAModal open={true} width="600px" heigth="80vh" onClose={fnCloseModal}>
      {<children /> | 'Modal componente'}
    </EBAModal>
  );
};

Pagination

Desarrollado por Alfredo Zum

Link componente pagination

Opciones Pagination

Ejemplo Pagination

import React, { FC } from 'react';
import EBAPagination from '@exodus-bluego/templete/EBAPagination';

const onPageChange = (event, newPage) => console.log(`Se cambio a la pagina ${newPage}`);

const onRowsPerPageChange = event => console.log(`Se mostraran ${event.target.value} elementos por tabla`);

const MiComponenteAppBar: React.FC = () => {
  return <Pagination count={100} page={0} rowsPerPage={10} onPageChange={onPageChange} onRowsPerPageChange={onRowsPerPageChange} />;
};

Card

Desarrollado por Alfredo Zum

Link componente

Opciones de Card

Ejemplo de Card

import React, { FC } from 'react';
import EBACard from '@exodus-bluego/templete/EBACard';

const MiComponenteCard: React.FC = () => {
  return <EBACard>{<children /> | 'Card componente'}</EBACard>;
};

DrawerPerfil

Desarrollado por Alfredo Zum

Link componente list Link componente modal

Opciones de DrawerPerfil

Ejemplo de DrawerPerfil

import React, { FC } from 'react';
import EBADrawerPerfil from '@exodus-bluego/templete/DrawerPerfil';

const listItems = [
  {
    title: 'Mis datos',
    page: '/my-data',
    active: true,
  },
  {
    title: 'Contacto',
    page: '/contact',
  },
];

const fnOnClick = (page: string, index: number) => console.log(`Se cambio a la pagina a ${page}`);
const fnOnLogout = () => console.log(`Se cerro el modal mediante la sesión`);

const MiComponenteDrawerPerfil: React.FC = () => {
  return <EBADrawerPerfil listItems={listItems} onClick={fnOnClick} onLogout={fnOnLogout} />;
};

DrawerMenu

Desarrollado por Alfredo Zum

Link componente listItem Link componente grid

Opciones DrawerMenu

Ejemplo DrawerMenu

import React, { FC } from 'react';
import EBADrawerMenu from '@exodus-bluego/templete/EBADrawerMenu';
import MUIHomeIcon from '@mui/icons-material/Home';

const fnClick = (page: string, index: number) => console.log(`Se cambio el valor a la pagina ${page}`);

const listItems = [
  {
    title: 'INICIO',
    icon: <MUIHomeIcon />,
    page: '/inicio',
    active: true,
  },
];

const MiComponenteDrawerMenu: React.FC = () => {
  return <EBADrawerMenu listItems={listItems} onClick={fnClick} />;
};

Tooltip

Desarrollado por Dan Lopez

Link componente

Opciones del tooltip

Ejemplo del tooltip

import React, { FC } from 'react';
import EBAToolTip from '@exodus-bluego/templete/EBAToolTip';

const MiComponente: React.FC = () => {
  return (
    <EBAToolTip title="tooltip del componente">
      <span>componente</span>
    </EBAToolTip>
  );
};