DEV Community: Jairo Júnior

🎨 Light mode e Dark mode e temas customizados com Styled-components e NextJS com Typescript.

Jairo Júnior — Sun, 31 Jan 2021 15:56:19 +0000

Introdução as tecnologias

NextJS

NextJS é um framework React com o intuito de SSR (Server Side Rendering).

Styled-components

Styled-components é uma biblioteca para React que permite a escrita de CSS in JS.

Vamos começar!

Criando a aplicação

Para criar a aplicação iremos rodar o comando yarn create next-app <nome do projeto>, após executar esse comando ele irá começar a criar o seu projeto NextJs (pode demorar um pouquinho).

Estruturando a aplicação

Eu divido a minha estrutura do NextJS criando uma pasta src e colocando as minhas pastas e arquivos lá, apenas deixando a pasta public de fora, mas isso vai de acordo com o seu gosto!

Configurando o Typescript

Para configurar o Typescript no projeto é bem simples, iremos adicioná-lo como dependência de desenvolvimento no projeto yarn add typescript -D
Agora iremos criar o arquivo tsconfig.json, no seu terminal escreva touch tsconfig.json
Iremos modificar o nome das nossas páginas dentro de src/pages removendo a extensão .js e adicionando .tsx
E se tudo deu certo ~~pelo menos eu espero que sim~~, podemos rodar yarn dev no nosso terminal e abrirá a página do NextJS na porta :3000

Configurando o Styled-components

Vamos começar adicionado o styled-components no projeto, portanto escreve no seu terminal yarn add styled-components

Iremos criar um arquivo chamado _document.tsx dentro de src/pages, nele haverá o seguinte conteúdo. Isso é para as injeções de estilo no server side rendering.

import Document, { DocumentContext } from 'next/document';
import { ServerStyleSheet } from 'styled-components';

export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
}

Dentro da nossa pasta src/styles vamos criar o arquivo styled.d.ts para sobrescrevermos os tipos do styled-components.

import 'styled-components';

declare module 'styled-components' {
  export interface DefaultTheme {
    title: string;
    colors: {
      primary: string;
      secundary: string;

      background: string;
      text: string;
    };
    fontSizes: {
      small: string;
      medium: string;
      large: string;
    };
  }

  export interface CustomTheme {
    title: string;
    colors: {
      primary: string;
      secundary: string;

      background: string;
      text: string;
    };
  }
}

Dentro no nosso arquivo tsconfig.json vamos adicionar o seguinte atributo.
```
....
"files": [
    "src/styles/styled.d.ts"
  ]
```

Vamos rapidinho criar um estilo global para a aplicação, crie o arquivo global.ts dentro de src/styles

import { createGlobalStyle } from 'styled-components';

export default createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: 0;
  }

  body {
    background: #fff;
    color: black;
  }

  h1, h2, h3, h4, h5, h6, strong {
    font-weight: 700;
  }

  button {
    cursor: pointer;
  }
`;

Agora vamos importá-lo no arquivo index.tsx, delete os arquivos de estilo .css do projeto também!

import GlobalStyles from '../styles/global';

export default function Home() {
  return (
    <>
      <GlobalStyles />
    </>
  );
}

Criando os temas

Vamos criar os temas agora! Dentro da pasta src/styles vamos criar uma pasta themes e nela um arquivo dark.ts (para o dark mode) o arquivo light.ts para o (light mode ~~jura?~~) e um arquivo index.ts.

O arquivo dark.ts terá as seguintes cores (isso você decide de acordo com o seu design)

export default {
  title: 'dark',

  colors: {
    primary: '#161616',
    secundary: '#555',

    background: '#333',
    text: '#fff',
  },
};

O arquivo light.ts terá as seguintes cores

export default {
  title: 'light',

  colors: {
    primary: '#666',
    secundary: '#777',

    background: '#fff',
    text: '#333',
  },
};

O arquivo index.ts será responsável por misturar as cores de cada tema com o que seria comum entre os dois, exemplo: tamanho de fonte.

import { DefaultTheme, CustomTheme } from 'styled-components';
import dark from './dark';
import light from './light';

const defaultTheme = {
  fontSizes: {
    small: '16px',
    medium: '18px',
    large: '20px',
  },
};

function combineTheme(theme: CustomTheme): DefaultTheme {
  return { ...defaultTheme, ...theme };
}

export { combineTheme, dark, light };

Aplicando os temas!

Agora que já criamos nossos temas vamos importá-los e fazer as trocas dinâmicas de temas, em src/pages vamos fazer algumas alterações no nosso index.tsx, mas antes vamos adicionar um componente de switch para ficar mais estiloso já que estamos falando de temas, portanto, escreve yarn add react-switch no seu terminal

import React, { useState } from 'react';
import { DefaultTheme, ThemeProvider } from 'styled-components';
import Switch from 'react-switch';
import { combineTheme, dark, light } from '../styles/themes';
import GlobalStyles from '../styles/global';

const Home: React.FC = () => {
  const [theme, setTheme] = useState<DefaultTheme>(combineTheme(light));

  const toggleTheme = () => {
    setTheme(theme.title === 'light' ? combineTheme(dark) : combineTheme(light));
  };

  return (
    <ThemeProvider theme={theme}>
      <GlobalStyles />
      <Switch checked={theme.title === 'dark'} onChange={toggleTheme} />
    </ThemeProvider>
  );
};

export default Home;

Agora vamos em src/styles no nosso arquivo global.ts e vamos fazer as seguintes alterações!

import { createGlobalStyle } from 'styled-components';

export default createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: 0;
  }

  body {
    background: ${props => props.theme.colors.background};
    color: ${props => props.theme.colors.text};
    font-size: ${props => props.theme.fontSizes.small}
  }

  h1, h2, h3, h4, h5, h6, strong {
    font-weight: 700;
  }

  button {
    cursor: pointer;
  }
`;

E pronto!!! O resultado final ficará assim

Projeto no Github
Linkedin

CI/CD com Github Actions, Fastlane e React Native

Jairo Júnior — Sat, 23 Jan 2021 13:46:57 +0000

Por que utilizar ?

Com os benefícios que a utilização que o CI/CD nos trazem nos permite automatizar processos que consumiriam tempo de um profissional para realizá-los, assim tendo maior foco nos requisitos do projeto, qualidade e segurança do código.

Introdução as tecnologias

Fastlane

Fastlane é uma ferramenta para automatizar processo de desenvolvimento e lançamento dos apps.

Github Actions

Github Actions é uma ferramenta para executar seus processos de desenvolvimento, sendo totalmente personalizável.

React Native

É um framework baseado no React, é utilizado para construções de aplicativos híbridos (iOS/Android).

Pré-requisitos

Fastlane CLI
XCODE (apenas se quiser fazer para iOS)
Seus aplicativos PRECISAM estar assinados para darmos o deploy.

Entendendo a estrutura.

Crie a pasta fastlane na raiz do seu projeto.

O arquivo Fastfile é o responsável pelas execuções do CI/CD.
O arquivo Appfile contém as informações do seu aplicativo iOS.
O arquivo Matchfile contém as informações para executar a função match.
O arquivo Pluginfile é o arquivo que contém os plugins que você deseja utilizar.

Construção do Fastfile

Entendendo os funções

Usaremos uma lista de funções fornecidas pelo próprio Fastlane, vamos explicar cada uma delas.

before_all

Essa função executará antes de todas as lanes que teremos.

before_all do
  # Insira seu código.
end

is_ci

Essa função verifica se quem está rodando é um usuário ou uma máquina (Github Actions, Travis, Jenkins)

if is_ci
  puts "I'm a computer"
else
  say "Hi Human!"
end

create_keychain

Essa função é necessária para criar uma keychain, para guardarmos as informações dos certificados temporariamente.

create_keychain(
        name: ENV["CI_KEYCHAIN_NAME"],
        password: ENV["CI_KEYCHAIN_PASSWORD"],
        default_keychain: is_ci,
        unlock: true,
        timeout: 3600,
        lock_when_sleeps: false
      )

match

Permite você sincronizar seus certificados e perfil com seu time. Nesse exemplo criei um repositório privado para guardar os certificados.

match(
        git_basic_authorization: Base64.strict_encode64(GIT_ACCESS),
        git_url: GIT_URL,
        app_identifier: APP_IDENTIFIER",
        type: "development",
        keychain_name: keychain_name,
        keychain_password: keychain_password,
        readonly: true
      )

Obs: se vc tiver vários perfis de aplicação DEBUG, STAGING, PROD..., é necessário fazer o match para cada uma de acordo com seu type:adhoc, development, appstore.

testflight

Função para lançar seu app para o Apple Testflight.

testflight(
      skip_submission: true,
      skip_waiting_for_build_processing: true
    )

gym

Realiza o Build do seu applicativo assinado ipa ou app file.

gym(
      scheme: PROJECT_NAME,
      export_method: "app-store",
      workspace: XCODE_WORKSPACE,
      silent: true,
      include_bitcode: true
    )

gradle

Realiza as ações do gradle.

gradle(
      project_dir: "android/",
      task: "assemble",
      flavor: "Production",
      build_type: "Release"
    )

upload_to_play_store

~~Esse aqui é meio díficil de explicar.~~ Realiza o upload da sua aplicação para a Play Store.

upload_to_play_store(track: 'production', json_key: 'path...')

GitHub Access Token

Será preciso gerar um Personal Token da sua conta do github com o intuito de conseguirmos acessar o projeto dos certificados no GitHub Actions, para isso acesse o seu GitHub > Developer settings > Personal access tokens > Generate new token > Dê um nome > Marque a opção REPO > Salve o token > Copie-o.

Agora iremos adicionar o seu Personal Token nos SECRETS do seu projeto do GitHub.

Finalmente o Fastfile...

Seu Fastfile ficará parecido com esse abaixo, porém com suas varíaveis e podendo haver mudanças de acordo com a sua necessidade.

Workflows do Github Actions

Cria uma pasta na raiz do seu projeto com o nome .github e dentro dela crie uma pasta workflows é lá que iremos colocar nossos workflows (jura ??????)

Agora iremos fazer nossos workflows do Github Actions, no total tenho 5 workflows.
Lembrando que MATCH_PASSWORD é a senha dos repositório do certificado e FASTLANE_PASSWORD é a senha de acesso para a Apple.

Executa testes e Linter no projeto

Android QA

Android Produção

iOS QA

iOS Produção

Espero que essa publicação consiga te ajudar!

Github
Linkedin