@vegait/lyra v1.0.1

Lyra Ui

Bem-vindo ao Lyra Ui - uma biblioteca de componentes UI desenvolvida com React, TypeScript e Material-UI. Projetada para simplificar e aprimorar o desenvolvimento de interfaces de usuário, nossa biblioteca oferece uma variedade de componentes reutilizáveis, otimizados para facilitar a criação de experiências visuais consistentes e agradáveis.

Instalação

    yarn add @vegait/lyra

Utilização

É necessária a utilização do Provider em seu projeto React disponibilizado pela biblioteca para que o tema Vega I.T. seja aplicado corretamente na aplicação. O local adequado para aplicar o Provider é no nível mais alto de sua aplicação. Encapsulando o App.

Os componentes seguem o padão Material UI. Todas as propriedas e comportamentos serão herdados.

//Main.ts
import ReactDOM from 'react-dom/client';
import { App } from './App.tsx';
import { LyraThemeProvider } from '@vegait/lyra';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <LyraThemeProvider>
      <App />
    </LyraThemeProvider>
  </React.StrictMode>
);

//MeuApp.ts
import { Button } from '@vegait/lyra';

const MeuApp = () => {
  return (
        <Button>Enviar</Button>
  );
};

Manutençao

A estrutura de pastas de cada componente deve seguir o seguinte padrão:

components
 ┣ Button
 ┃ ┣ button.d.ts
 ┃ ┣ Button.schema.ts
 ┃ ┣ Button.tsx
 ┃ ┗ index.ts
 ┗ index.ts

//button.d.ts
import '@mui/material/Button';

declare module '@mui/material/Button' {
  interface ButtonPropsVariantOverrides {
    contained: false;
    outlined: false;
    text: false;
    primary: true;
    secondary: true;
  }
}

button.d.ts: arquivo responsável por sobrescrever as propriedades padrão do Material Ui caso haja necessidade. Esse padrão de escrita segue as instruções da documentação oficial do Material

//Button.schema.ts
import { ButtonProps as MuiButtonProps } from '@mui/material';

export interface ButtonProps extends MuiButtonProps {
  loading?: boolean;
}

Button.schema.ts: arquivo responsável pela tipagem das propriedades que o componente Button possui. Podemos perceber que as propriedades deverão ser extendidas do Material Ui. Para que os comportamentos mantenham a consistencia. Neste caso as propriedades estão sendo extendidas e uma nova propriedade opcional loading está sendo adicionada.

//Button.ts
import { Button as MuiButton, CircularProgress, useTheme } from '@mui/material';
import { ButtonProps } from './Button.schema';

const Button = ({ loading = false, children, ...rest }: ButtonProps) => {
  const { palette } = useTheme();

  return (
    <MuiButton {...rest} disabled={loading}>
      {!loading ? (
        children
      ) : (
        <CircularProgress
          size={24}
          sx={{
            color: palette.primary.main,
          }}
        />
      )}
    </MuiButton>
  );
};

export default Button;

Button.ts: arquivo responsável pelo componente. Toda lógica que envolve a criação e comportamentos do componente deverá ficar neste arquivo. É altamente recomendável que qualquer manipulação Javascript que acesse o DOM por fora do framework (React) seja evitada. Manipulações do tipo: document.getElementById(...).forEach(...). Esse tipo de manipulação desvincula o controle das variáveis pelo React. Realize práticas como essa apenas se tiver plena certeza do que está fazendo. Todas as funções que o componente tiver serão herdadas do Material Ui. Sugiro fortemente a leitura da Documentação para criação de um componente de sua respectiva utilização.

//index.ts
import Button from './Button';

export default Button;

index.ts: arquivo responsável por facilitar o import/export do componente.

Estilização

O propósito da utilização da biblioteca Material UI é para facilitar a utilização dos métodos e comportamentos ja existentes e fortemente construídos pela biblioteca. Com isso, devemos apenas sobrescrever a pré-estilização nativa do Material UI. Com isso, segue estrutura da pasta styles:

styles
 ┣ styles.d.ts
 ┗ theme.ts

//styles.d.ts
import '@mui/material/styles';

declare module '@mui/material/styles' {
  interface Palette {
    complementary: {
      beluga: Palette['primary'];
      monument: Palette['primary'];
    };
    disabled: Palette['primary'];
  }

  interface PaletteOptions {
    complementary: {
      beluga: PaletteOptions['primary'];
      monument: PaletteOptions['primary'];
    };
    disabled: PaletteOptions['primary'];
  }
}

declare module '@mui/material/Typography' {
  interface TypographyPropsVariantOverrides {
    overline: false;
    subtitle1: false;
    subtitle2: false;
    h5: false;
    h6: false;
  }
}

styles.d.ts: arquivo responsável por sobrescrever as tipagens nativas do Material UI de acordo com a adaptação no tema criado por nós desenvolvedores.

//theme.ts
import { createTheme } from '@mui/material';
import '@mui/material/styles/createPalette';

enum Colors {
  white = '#fff',
  black = '#000',
  primary = '#1f2e52',
  secondary = '#EF802D',
  error = '#ec5858',
  success = '#5bd098',
  beluga = '#f8f8f8',
  monument = '#',
  disabled = '#d9dcdc',
  textPrimary = '#444040',
}

export const defaultTheme = createTheme({
  palette: {
    common: {
      white: Colors.white,
      black: Colors.black,
    },
    primary: {
      main: Colors.primary,
    },
    secondary: {
      main: Colors.secondary,
    },
    error: {
      main: Colors.error,
    },
    success: {
      main: Colors.success,
    },
    complementary: {
      beluga: {
        main: Colors.beluga,
      },
      monument: {
        main: Colors.monument,
      },
    },
    disabled: {
      main: Colors.disabled,
    },
    text: {
      primary: Colors.textPrimary,
    },
    action: {
      disabled: undefined,
    },
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: `
            * {
                margin: 0;
                padding:0;
                box-sizing: border-box;
            }
            html {
                font-size: 62.5%;
            }
            `,
    },
    MuiButton: {
      defaultProps: {
        variant: 'primary',
      },
      variants: [
        {
          props: {
            variant: 'primary',
          },
          style: ({ theme }) => ({
            backgroundColor: theme.palette.primary.main,
            color: theme.palette.common.white,
            width: `200px`,
            ':hover': {
              background: theme.palette.secondary.main,
            },
          }),
        },
        {
          props: {
            variant: 'secondary',
          },
          style: ({ theme }) => ({
            background: theme.palette.secondary.main,
            color: theme.palette.common.white,
            ':hover': {
              color: theme.palette.common.white,
              background: theme.palette.primary.main,
            },
          }),
        },
      ],
    },
  },
});

theme.ts: arquivo responsável por armazenar as cores que serão fornecidas ao tema customizado. E a respectiva criação do tema com as estilizações sobrescritas e adaptadas.

Publicação e atualização

O Lyra UI está hospeado no NPM. Para efetuar a atualização/publicação do pacote no serviço de hospedagem devemos ter atenção em alguns detalhes:

• A conta responsável pelo pacote está em um plano gratuito. Fazendo com que o respectivo pacote seja público. Caso haja a necessidade deste pacote ser privado recomendo a documentação oficial do NPM para adaptação do serviço.

• A conta responsável pela hospedagem está no endereço produtos@vegait.com. Com as credenciais devidamente alocadas no sysPass.

• Para o versionamento do pacote devemos ter como base o versionamento semantico documentado pelo NPM.

Instruções

• Para publicação manual do pacote devemos estar com o terminal aberto na pasta que contem o projeto. E em seguida realizar o login no NPM. Executando o comando npm login. As credenciais serão solicitadas ou uma aba no navegador será aberta para que o login seja efetuado. É importante que algum membro da equipe tenha acesso as credenciais da conta NPM pois um código de autenticação será enviado para o email responsável pela conta (produtos@vegait.com) para que o login seja efetuado.

• Após o login realizado devemos nos atentar a versão atual do pacote e atualizar diretamente no package.json da aplicação antes da publicação do serviço. Devemos nos orientar pelo versionamento semantico de acordo com as mudanças que foram feitas no código.

• É de suma importância que o repositório oficial do pacote esteja devidamente atualizado com a versão publicada no NPM.

• Após realizar as mudanças necessárias no código, atualizar a versão do pacote e subir o codigo para o repositório oficial. Chegou a hora de publicar o pacote. Fazemos isso da seguinte maneira: yarn build-lib para que o Rollup faça o processo de empacotamento do nosso projeto. Uma pasta dist será criada na raiz do nosso diretório. Essa pasta é o Bundle que precisamos para publicar e utilizar o Lyra em outras aplicações.

• Com a pasta dist criada podemos digitar o seguinte comando no terminal: npm publish --access public. Isso informa para o NPM que a publicação deverá ser feita com o acesso publico. Ou seja, pacote publico.

• Após a publicação do serviço ja estamos aptos a utilizar a versão mais recente do Lyra UI.

Contribuição

Gabriel Gutierrez - Vega I.T

Licensa

MIT