Layouts dispostos (ft. React TypeScript)

Um dos blocos de construção de uma GUI é um layout; pode ser um layout único, um layout duplo ou também vários layouts. Enquanto vasculhava a rede em busca de soluções para a criação de um, achei bastante difícil encontrar uma abordagem de texto digitado por reação para construir layouts. Portanto, quando senti que havia compilado uma solução reutilizável decente, pensei que poderia compartilhá-la. Neste artigo, vou guiá-lo através do meu processo de desenvolvimento de layout, juntamente com todas as cristas e depressões que passei.

** Como este artigo destaca a construção de um layout, ele pressupõe pelo menos uma compreensão de nível iniciante do React-Typescript. **

Vamos falar sobre a estrutura do arquivo antes de chegar ao ponto crucial.
Normalmente existem três tipos de CSS listados abaixo:
- CSS Inline - CSS
Interno ou Embutido
- CSS Externo
Ao longo deste projeto, optei por usar CSS Externo, pois facilita a distinção nos arquivos. CSS externo conterá apenas propriedades de estilo com a ajuda de atributos de tag. Para resumir, eu uso:
1. one-column.tsx para envolver o conteúdo de exibição junto com os estilos em um único layout.
2. one-column.styles.ts para o css (e sass)
Um padrão semelhante é estabelecido para duas ou mais telas em painéis.
Todas as informações da tela serão codificadas nas respectivas pastas e contidas em screens.

...
layouts/
  nav-panel.styles.ts
  nav-panel.tsx
  one-column.styles.ts
  one-column.tsx  
  two-columns.styles.ts
  two-columns.tsx
  ...
routes/
  index.tsx
screens/
  screen-two/
    content-panel/
      index.tsx
    layout.tsx
...

import React from ‘react’;
import { ThemeProvider } from ‘react-jss’;
import theme from ‘../app-theme’;
import useStyles from ‘./one-column.style’;
export interface Props {
    contentPanel: React.ReactElement;
}
const OneColLayoutThemeWrapper: React.FC<Props> = (props) => (<ThemeProvider theme={theme}>
    <OneColLayout {…props} />
</ThemeProvider>);
const OneColLayout: React.FC<Props> = (props) => {
const styles = useStyles();
return <div className={styles.mainLayout}>
    {props.contentPanel}
</div>;
};
export default OneColLayoutThemeWrapper;

Os atributos css incluídos ( one-column.styles.ts) se parecem um pouco com isto:

import { ITheme } from “../app-theme”;
const { createUseStyles } = require(“react-jss”);
export default createUseStyles((theme: ITheme) => ({
    mainLayout: {
        minWidth:"1920px",
        minHeight: "1080px",
        fontSize: "25pt",
        backgroundColor: theme.palette.shade1,
    }
 }))

O objetivo desta tela é exibir uma única linha para fins de demonstração, portanto, ela é adicionada no content-panel/index.tsx

export interface Props {}
const ContentPanel: React.FC<Props> = (props) => {
    return <div>Wubba Lubba Dub Dub</div>;
};
export default ContentPanel;

export interface Props {}
const ScreenOneLayout: React.FC<Props> = (props) => {
  return <OneColLayoutThemeWrapper 
   contentPanel={<ContentPanel />}
  />
};
export default ScreenOneLayout;

Aqui, a primeira coluna corresponde ao painel de navegação e a segunda coluna corresponde ao painel de conteúdo. Nosso two-columns.tsx será moldado para conter duas colunas, portanto:

export interface Props {
  columnOne: React.ReactElement;
  columnTwo: React.ReactElement;
}
const TwoColsLayoutThemeWrapper: React.FC<Props> = (props) => 
(<ThemeProvider theme={theme}>
  <TwoColsLayout {...props} />
 </ThemeProvider>
);
const TwoColsLayout: React.FC<Props> = (props) => { 
  const styles = useStyles();
  return (
    <div className={styles.twoColumns}>
      <div className={styles.firstColumn}>{props.columnOne} </div>.   
      <div className={styles.secondColumn}>{props.columnTwo}</div>
    </div>
  );
};
export default TwoColsLayoutThemeWrapper;

twoColumns: {
  display: "flex",
  flexDirection: "row",
  width: "100%",
  minHeight: "100vh"
},
firstColumn: {
  minWidth:"300px",
  minHeight: "1080px",
  backgroundColor: theme.palette.shade4,
  display: "inline-block",
  color: theme.white.accent1
},
secondColumn: {
  width:"1620px",
  color: theme.palette.shade4,
  backgroundColor: theme.white.accent1,
  padding:"25px 45px 25px 45px",
}

const ScreenTwoLayout: React.FC<Props> = (props) => {
return (
  <TwoColsLayoutThemeWrapper
    columnOne={<NavPanel />}
    columnTwo={<ContentPanel />}
  />
)};

Obrigado por ler até aqui!