<h1 id="design-system-para-react"><a href="#design-system-para-react" class="anchor">Design System para React</a></h1>
<p>Salve devs ✌🏾</p>
<p>Toda vez que iremos iniciar um novo projeto, surge as dúvidas referentes a qual pasta deve ficar cada arquivo, principalmente se você é júnior. Por conta disso hoje vou falar sobre Design System.</p>
<p>Já deixo claro aqui que este post não coloca aqui a melhor ou a pior forma de arquitetura de seu projeto. Apenas vou te mostrar a forma que estruturo.</p>
<p>Uma outra observação é que irei usar como exemplo em um projeto com <a href="https://reactjs.org/">React.js</a>, porém os conceitos podem ser utilizado em qualquer outro framework, até mesmo num projeto com Javascript puro (famoso vanilla js).</p>
<p>O design system que mais utilizo e gosto é o Atomic Design, desenvolvido por <a href="https://bradfrost.com/">Brad Frost</a>.</p>
<p>Não vou explicar muito sobre Atomic Design por meu objetivo é mostrar mesmo na prática.</p>
<p>Mas uma breve, muito breve mesmo, informação sobre é que essa arquitetura foi criada observando componentes químicos.</p>
<p>Onde encontramos 5 estágios: átomos, moléculas, organismos, modelos e paginas.</p>
<p><img src="/assets/img/posts/atomic-design.png" alt="Atomic Design" title="Atomic Design"></p>
<p>Num exemplo prático, átomos poderia ser um botão. A molécula seria esse botão (átomo) com outro átomo, talvez um icone. E assim por diante até chegarmos na maior composição que é a página.</p>
<p>Caso queira mais detalhes, este artigo é perfeito para você <a href="https://vidadeproduto.com.br/atomic-design/">https://vidadeproduto.com.br/atomic-design/</a></p>
<h3 id="vamos-para-prática"><a href="#vamos-para-pr%C3%A1tica" class="anchor">Vamos para prática</a></h3>
<p>Chegou a hora de aplicarmos tudo isso no nosso projeto.</p>
<p>Eu não gosto de usar as nomenclaturas oferecidas pelo atomic. Prefiro usar apenas a ideia de separação de componentes.</p>
<p>Primeira coisa que eu faço é deixar tudo dentro da pasta <code>src/</code></p>
<p>Dentro de dela, as pastas importantes para nosso design system são:</p>
<pre><code class="language-bash">  src/
    - Page
    - Template
    - DesignSystem
    - Components
</code></pre>
<h3 id="page"><a href="#page" class="anchor">Page</a></h3>
<p>Ficará apenas nossas páginas nada de styles ou coisas do tipo</p>
<pre><code class="language-bash">  Page/
    - Index.tsx
    - About.tsx
    - Contact.tsx
</code></pre>
<h3 id="template"><a href="#template" class="anchor">Template</a></h3>
<p>Colocaremos os possíveis templates que teremos.</p>
<p>Como assim?</p>
<p>Num sistema, costumamos ter diferentes formas de apresentar a informação para o cliente. Como por exemplo, a estrutura de paginas do signIn e SignUp são diferentes da estrutura de páginas de uma Dashboard.</p>
<p>É justamente aqui que montaremos essas estruturas onde cada página irá dizer qual estrutura ela deverá ser montada.</p>
<p>Aqui poderemos ter styles, por isso gosto de separar por pastas os templates</p>
<pre><code class="language-bash">  Template/
    - Auth/
      - Index.tsx
      - styles.scss
    - Dashboard/
      - Index.tsx
      - styles.scss
</code></pre>
<p>Nos próximos posts, estou querendo trazer de forma prática como fazer isso no <a href="https://nextjs.org/">Next.js</a>. Caso achar interessante, comenta aqui embaixo.</p>
<h3 id="designsystem"><a href="#designsystem" class="anchor">DesignSystem</a></h3>
<p>É aqui que a brincadeira fica cada vez mais interessante.</p>
<p>Dentro desta página, ficará nossos átomos e Moléculas.</p>
<p>Uma boa dica para ter ideias de como separar é olhar como é feito essa separação em design system como <a href="http://material-ui.com/">Material-ui</a>, <a href="https://chakra-ui.com/">Chakra-ui</a> e etc.</p>
<pre><code class="language-bash">  DesignSystem/
    - Form/
      - Button/
        - Index.tsx
        - styles.scss
      - Input/
        - Index.tsx
        - styles.scss
    - System/
      - Card/
        - Index.tsx
        - styles.scss
      - Tabs/
        - Index.tsx
        - styles.scss
</code></pre>
<p>Uma outra dica, da qual aprendi com a galera do <a href="https://www.quintoandar.com.br/">Quinto Andar</a> neste <a href="https://www.youtube.com/watch?v=5fM4XuMxwkA">video do YouTube</a>, é que mesmo usando o componentes do material-ui (ou qualquer outro) é sempre implanta-los no seu design system, nunca no projeto direto.</p>
<p>Exemplo:</p>
<pre><code class="language-js">  import {
    Button as MuiButton,
    ButtonProps as MuiButtonProps
  } from '@material-ui/core'

  import * as S from './styles'

  export type ButtonProps = {
    title: string
    className?: string
  } &#x26; Pick&#x3C;MuiButtonProps, 'variant' | 'color'>

  export default function Button({
    title,
    className,
    variant = 'contained',
    color = 'primary'
  }: ButtonProps) {
    return (
      &#x3C;S.Wrapper className={className}>
        &#x3C;MuiButton color={color} variant={variant}>
          {title}
        &#x3C;/MuiButton>
      &#x3C;/S.Wrapper>
    )
  }
</code></pre>
<p>Caso futuramente o material mude alguma coisa no Button deles, basta você arrumar neste único componente seu, evitando aquela corrida de procurar em todos os lugares que colocou o Button do material-ui.</p>
<h3 id="components"><a href="#components" class="anchor">Components</a></h3>
<p>Por fim, mas não menos importante, são todos os componentes especifico de sua aplicação.</p>
<p>Digamos que você esta desenvolvendo um blog. Nele terá uma página mostrando os autores dele.</p>
<p>Então nesta página terá uma pasta especifica para os cartão do autor (AuthorCard).</p>
<pre><code class="language-bash">  Components/
    - AuthorCard/
      - Index.tsx
      - styles.scss
</code></pre>
<p>Exemplo do nosso componente AuthorCard utilizando suas moléculas.</p>
<pre><code class="language-js">  import { Card } from 'src/DesignSystem/System/Card'

  import * as S from './styles'

  export type AuthorCardProps = {
    name: string
    description?: string
  }

  export default function AuthorCard({
    title,
    description
    return (
      &#x3C;Card>
        &#x3C;S.Title>
          {title}
        &#x3C;/S.Title>
        &#x3C;S.Description>
          {description}
        &#x3C;/S.Description>
      &#x3C;/Card>
    )
  }
</code></pre>
<p>Então é isso galera. Isso não é a melhor arquitetura do mundo, mas é a arquitetura que até o momento mais tem me agradado e me feito mais produtivo.</p>


# Como criar templates de páginas no Next.js

Salve devs ✌🏾

Como prometido no texto passado, irei falar sobre como criar templates/Layout para suas páginas no [Next.js](https://nextjs.org/).

Em um sistema web é muito comum termos páginas com estruturas diferentes, um exemplo prático são as páginas de um dashboard ou admin e login.

Muito comum uma página de dashboard/admin ter um menu ao lado, um header com informações do usuário logado e N coisas diferentes da página de login, onde é mais comum apenas um formulário centralizado.

O problema é que num essa estrutura de dashboard/admin se repete em várias páginas: página de listas, página de edição do usuário e etc.
Para a estrutura do login a mesma coisa: login, cadastro, esqueci a senha e etc.

### O que fazer então?

Basta você "copiar e colocar" as mesmas coisas (header, menu, footer) em todas as páginas.
Ok, isso funciona. Mas a nossa ideia é termos um código limpo sem repetições. Então não basta apenas fazê-lo funcionar; temos que gerar códigos de fácil compreensão para um próximo dev dar manutenção.

### Como eu faço no React?

No [React.js](https://reactjs.org/) não tinha muito segredo, bastava arrumar isso nos arquivos de rota.

```bash
./index.ts
```
```js
import React from 'react';
import { Switch } from 'react-router-dom';

import DashboardLayout from '../_layout/Dashboard';
import AuthLayout from '../_layout/Auth';
import Dashboard from '../pages/Dashboard';
import SignIn from '../pages/SignIn';
import SignUp from '../pages/SignUp';
import Route from './Route';

const Routes: React.FC = () => (
  <Switch>
    <Route path="/sign-in" component={SignIn} />
    <Route path="/sign-up" component={SignUp} layout={AuthLayout} />
    <Route path="/dashboard" component={Dashboard} layout={DashboardLayout} />
  </Switch>
);

export default Routes;
```

```bash
./Route.ts
```
```js
import React from 'react';
import {
  RouteProps as ReactRouteProps,
  Route as ReactRoute,
} from 'react-router-dom';


interface RouteProps extends ReactRouteProps {
  component: React.ComponentType;
  layout?: React.ComponentType;
}

const Route: React.FC<RouteProps> = ({
  component: Component,
  layout: Layout
}) => {

  return (
    <ReactRoute
      {...rest}
      render={() => (
        <>
          {Layout ? (
            <Layout>
              <Component />
            </Layout>
          ) : (
            <Component />
          )}
        </>
      )}
    />
  );
};

export default Route;
```

Fácil não? Agora se você já trabalhou com o Next, sabe muito bem que no next não temos controle nas rotas. Basta criar um aquivo na pasta `pages` e teremos a rota com o mesmo nome do arquivo.

### Então como fazer no Next.js?

Vou passar aqui o passo a passo de um método que tenho feito. Lembrando que aqui não tem certo nem errado, apenas um modo diferente. Então se você faz de uma outra forma, por favor, nos fale para aprendermos uma nova forma. 😉

Primeira coisa para organizar é criar a pasta `Templates` para deixarmos tudo relacionado a isso nela.
Dentro dela vamos criar 2 templates: Um para auth (sign in, sign up etc) e um para admin (dashboard).
Gosto de criar esses arquivos desta forma `./TemplateAdmin/index.tsx` pois podemos e iremos ter arquivos de styles. Assim fica mais organizado.

` ./TemplateAdmin/index.tsx`

```js
import { ReactNode } from 'react'

type TemplateAdminProps = {
  children: ReactNode
}
export default function TemplateAdmin({ ...props }: TemplateAdminProps) {
  return (
    <>
      <header>Header da admin</header>
      <aside>Menu</aside>
      <main>
        <h1>Template Admin</h1>
        {props.children}
      </main>
      <footer>Footer da admin</footer>
    </>
  )
}
```
` ./TemplateAuth/index.tsx`
```js
import { ReactNode } from 'react'

type TemplateAuthProps = {
  children: ReactNode
}
export default function TemplateAuth({ ...props }: TemplateAuthProps) {
  return (
    <>
      <main>
        <h1>Template Auth</h1>
        {props.children}
      </main>
      <footer>Footer</footer>
    </>
  )
}
```

Agora poderemos criar por exemplo o componente `Header` e apenas importa-lo no template admin. Da mesma forma o `Footer`, `Navbar` e etc.

Ainda dentro da pasta `.Templates` vamos criar o arquivo `TemplateWrapper.tsx` que será nosso aquivo principal.

` ./TemplateWrapper.tsx`
```js
import { AppProps } from 'next/dist/next-server/lib/router/router'
import TemplateAdmin from './TemplateAdmin'
import TemplateAuth from './TemplateAuth'

type TemplateWrapperProps = AppProps & {
  layout?: 'auth' | 'admin'
}

export default function TemplateWrapper({
  layout,
  ...props
}: TemplateWrapperProps) {
  switch (layout) {
    case 'admin':
      return <TemplateAdmin>{props.children}</TemplateAdmin>
      break
    case 'auth':
      return <TemplateAuth>{props.children}</TemplateAuth>
      break
    default:
      return <>{props.children}</>
      break
  }
}
```

Bom, neste arquivo receberemos por `props` qual o template deverá ser renderizado na tela.
Colocando em `switch` pois poderemos ter 2, 3, x templates diferentes.

No nosso arquivo `pages/_app.tsx`, nosso arquivo principal das páginas do next.js, vamos renderizar nosso `TemplateWrapper.tsx`

```js
...
import TemplateWrapper from 'Template/TemplateWrapper'

function App({ Component, pageProps }: AppProps) {
  ...
    <TemplateWrapper {...pageProps}>
      <Component {...pageProps} />
    </TemplateWrapper>
  ...
}

export default App
```

Pronto, nossa lógica de templates esta criada. Basta em nosso arquivo de página, mandarmos nossa `prop layout`

Mas, vou colocar na prática, bora lá!

`pages/sign-in.tsx`

```js
...
export default function SignIn() {
  ...
}

export const getInitialProps = () => {
  return {
    layout: 'auth'
  }
}
```

Agora vamos criar nossa página de dashboard também, porém para mudarmos, ao invés de ser uma página com `getInitialProps`, vamos criar uma com SSR.

`pages/dashboard.tsx`

```js
...
export default function Dashboard() {
  ...
}

export const getServerSideProps = () => {
  return {
    props: {
      layout: 'admin'
    }
  }
}

```

Reparem que no `getServerSideProps` no `return` precisamos colocar nosso prop `layout` dentro do objeto `props`.

É isso galera, basta aplicar nas suas próximas páginas e ser feliz 😁. Caso queira ver, subi este tutorial no meu [GitHub](https://github.com/douglasporto/next-with-template) aproveita e me segue lá 😅.

Você faz de outra forma? Achou algum problema nessa solução? Da aquele help e compartilha conosco. 🤗


Como criar templates de páginas no Next.js

Criando templates para páginas com Next.js

### No texto anterior…

* Precisei me adaptar a um novo estilo de trabalho. Praticamente começar uma profissão do zero;
* Aprendi que para empreender, não necessariamente precisa sair do seu emprego atual;
* Trabalhe em um lugar que respeite a meritocracia.

Caso queira ver o texto completo [clique aqui](https://douglasporto.com.br/blog/mudan%C3%A7as-empreendedor-interno/)

### Conhecendo mercado financeiro

Se você não veio por alguma rede social minha (procure por DgsApenas em qualquer rede social), provavelmente não sabe da minha paixão pelo mercado financeiro.

Conheci sobre já velho, admito. Foi só após os 26 anos que recomecei a poupar e investir meu dinheiro.

Aprendi muito sobre negócios lendo sobre o assunto. Mercado financeiro e empreendedorismo andam lado a lado. Não foi preciso muito para tomar gosto pelo assunto.

Com isso formamos os 3 pilares que procurava no meio profissional.

* Tecnologia
* Empreendimento
* Investimento

Buscava um local onde não apenas trocasse meu trabalho por um salário. Meu alvo era um local que tivesse evolução em tecnologia, me desse autonomia para empreender internamente e por fim, que não fosse um funcionário para sempre.

### Me tornei um acionista da Fabapp

Não me recordo ao certo a data, mas recebi uma ligação do [Hugo Yang](https://www.linkedin.com/in/hugobyang/), CEO da [Fabapp](http://fabricadeaplicativos.com.br/), no segundo semestre de 2020.

Não foi uma surpresa a ligação, pois o mesmo me liga algumas vezes para tratar de diversos assuntos.

Porém, o assunto da ligação me surpreendeu muito, recebi este convite.

Foram alguns meses de conversa para fechar o acordo e o contrato. Muitas páginas a serem lidas, mudadas, adicionadas e etc.

Enfim, no dia 29 de Março de 2021 foi assinado o contrato e me tornava o mais novo acionista da Fábrica de Aplicativos.

### Conclusão

Não, esse não é o fim da história, é o começo. Um novo desafio me aguarda. Uma nova etapa me aguarda com muitas alegrias e decepções, porém ambos com muito aprendizado.

Agora meu recado é para você que leu esses 3 textos.

Não importa a dificuldade que esteja passando no meio profissional. Você, só você pode sair disso.

Só você poderá decidir acordar mais cedo, ir dormir até tarde, perder o sono, almoçar mal, para conseguir o seu objetivo. Acordar todo dia reclamando do emprego que tem e não fazer nada para mudar, não irá mudar nada.

**(MUDANÇA, se antecipar, MUDA, se esperar, DANÇA)**


Mudanças: virando um acionista

Arquitetura e Design System em React

Arquitetura na prática para aquele seu projeto em react