- Projeto pensado para front-end React que irá se comunicar com back-end graphql.
- Possui suporte a PWA
- Padronização de código: Utilização de Eslint e editor.config
Veja as principais tecnologias utilizadas:
- Next JS - Versão do 12 do framework.
- Jest - Framework para realização de testes.
- Storybook - Construir componentes, testa-los e documenta-los.
- Design System - Construa seu próprio design system com Stitches.
- UI components - Construção de componentes individualizados e primitivos com Radix
- Apollo - Comunicação com graphql
- Graphql Code Generator - Gerar os tipos (typescript) do schema graphql
Recomendado utilizar Node.js até a versão 16.13.2.
Instale os pacotes do projeto:
yarn
Para rodar o projeto em ambiente de desenvolvimento:
yarn dev
No projeto há o pacote plop.js para agilizar a criação de um novo componente, execute o seguinte comando:
yarn generate NomeDoComponente
Será gerado dentro da pasta components
, uma pasta com o nome específicado com os seguintes arquivos:
Nome do arquivo | Função |
---|---|
index.tsx |
Arquivo principal do componente |
stories.tsx |
A documentação do componente no storybook |
test.tsx |
Arquivo para realização de testes do componente |
Este template se comunica com Graphql através do Apollo, a configuração está em: src/graphql/apollo.config.ts
.
Os dados de conexão estão em variáveis de ambiente, você pode customizar a sua maneira.
const httpLink = new HttpLink({
uri: process.env.GRAPH_CMS_API_ENDPOINT,
headers: {
authorization: process.env.GRAPH_CMS_API_KEY
}
})
As queries ficam em src/graphql/queries
, consta um exemplo em data.ts.
Essa pasta será utilizada para gerar os tipos das propriedades.
Na raíz do projeto, existe o arquivo codegen.yml
, nele é preciso atualizar o ENDPOINT do schema graphql.
Sempre que criar ou alterar as queries, é preciso gerar os tipos, para isso execute o seguinte comando:
yarn gen