# Criação de Loja - Passo a passo

## Instalação

Caso você ainda não tenha um projeto FastStore rodando, poderá seguir o seguinte [passo-a-passo](https://www.faststore.dev/quickstart) para ter uma loja base, você poderá optar por **Gatsby** ou **Next.js**.

## Configuração

Agora você pode configurar o seu ambiente na loja. Neste pequeno [guia](https://www.faststore.dev/tutorials/gatsby/3#step-2-connecting-to-your-vtex-account) você encontrará tudo que precisa no momento. Em resumo, você irá configurar a sua **plataforma**, **conta** e **ambiente** no arquivo `store.config.js`.

Após isso, a loja já pode ser executada com o comando `yarn develop` e os produtos cadastrados no catálogo da sua conta já devem ser exibidos no site.

## Estilização

Para customização de estilo das páginas e componentes da loja, a FastStore faz uso de *tokens*. Os *tokens* globais definem o estilo base que formam o tema da loja e a partir deles, os *tokens* locais definem os estilos dos componentes e layout das páginas.

> Exemplos de *tokens* de cores utilizados pela biblioteca: `--fs-color-main-0`, `--fs-color-main-1`, `--fs-color-accent-0`, `--fs-color-accent-1`.

Além disso, os *tokens* seguem um esquema de nomenclatura para auxiliar na identificação e uso deles, como pode ser observado nos exemplos acima. Mais detalhes sobre os *tokens* podem ser encontrados na página [*Theming*](https://www.faststore.dev/how-to-guides/theming) da documentação da FastStore.

Para um uso eficiente dos *tokens*, recomenda-se definir bem os *tokens* globais, uma vez que eles servirão de base para estilizar especificamente cada componente e página. Para essa definição, deve-se utilizar o *design system* da marca da loja, uma vez que a partir dela as cores, fontes e outras regras de estilo serão definidas e encaminharão o estilo final da loja. Além disso, qualquer mudança no *design system* da marca terá apenas um ponto de alteração no código, reduzindo possíveis trabalhos futuros.

Para facilitar a estilização condicional dos componentes, a FastStore utiliza de *data-attributes* que são exemplificados na [documentação de princípios de design](https://www.faststore.dev/how-to-guides/contributing/design-principles#data-attributes-for-styling).

<List data-list>
    <li data-list-item>
        <Checkbox data-checkbox onChange={onChange} />
    </li>
</List>

> No exemplo acima, cada componente apresenta um *data-attribute*, sendo `data-list`, `data-list-item` e `data-checkbox` para os respectivos componentes: `List`, `li` e `Checkbox`

## Componentes

Para facilitar a customização da loja, a biblioteca FastStore oferece diversos componentes genéricos que podem ser encontrados na [seção UI da documentação](https://www.faststore.dev/reference/ui/components). A partir deles, implementou-se modificações que podem ser encontradas na pasta `src/components` no template da loja. Além dessas modificações, outros componentes mais específicos podem ser encontrados na pasta.

Para implementação de componentes, recomenda-se observar quais componentes já estão presentes na biblioteca ou na loja e a partir deles realizar modificações ou composições, evitando retrabalho.

### Utilizando o Storybook

A Faststore utiliza o [Storybook](https://storybook.js.org/) para documentar os componentes, seguindo a classificação [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/). Alguns componentes da FastStore já estão presentes no Storybook, mas você pode adicionar os componentes que você criou e está trabalhando, seguindo esse [guia](https://github.com/vtex/styleguide/blob/master/.github/CONTRIBUTING.md#storybook-organization).

Recomendamos olhar os componentes do template no Storybook para você conhecer e ter uma ideia geral dos componentes que você pode utilizar na sua loja.

Para utilizar o **Storybook**, abra seu terminal e digite `$ yarn storybook`, e o resultado irá aparecer em http://localhost:3000/ para uma loja Next.js ou na porta `8000` para o Gatsby.

### Criando componentes de forma eficiente

A partir do conhecimento dos componentes já ofertados, talvez seja necessário modificá-los ou até criar algum do zero para atingir o resultado desejado. Para criação de um componente eficiente, deve-se seguir algumas boas práticas que auxiliam na legibilidade e manutenção do código escrito.

Uma recomendação para estruturar um componente complexo é dividi-lo em três partes:
1. Um componente responsável apenas pela apresentação;
2. Um *hook* para obtenção de dados e controle de estados;
3. Outro componente responsável pela renderização do componente de apresentação.

Essa divisão ajuda a composição de componentes, além de se direcionar para o princípio da responsabilidade única ([SRP](https://en.wikipedia.org/wiki/Single-responsibility_principle)) e separação das responsabilidades ([SOC](https://en.wikipedia.org/wiki/Separation_of_concerns)). Para exemplificação dessa divisão e melhor entendimento, recomenda-se acessar a [documentação de componentes da FastStore](https://www.faststore.dev/how-to-guides/contributing/component).

## Obtenção de dados

### Estendendo o esquema GraphQL

A [**FastStore API**](https://www.faststore.dev/reference/api/faststore-api) usa [GraphQL](https://graphql.org/) para trazer as informações da sua plataforma de e-commerce ou *Headless* CMS para a aplicação frontend.

Por exemplo, para obtenção dos dados de um produto, pode-se utilizar a *query* `product` que oferece informações como o nome, a descrição, as ofertas, entre outras.

Caso precise de algum dado ou operação que não esteja presente nas [*queries*](https://www.faststore.dev/reference/api/queries) e [*mutations*](https://www.faststore.dev/reference/api/mutations) já fornecidas, pode-se estender o esquema GraphQL. Recomenda-se seguir esse [guia](https://www.faststore.dev/how-to-guides/faststore-api/extending-the-faststore-api#complete-code-example) para mais detalhes de como realizar essa extensão.

De forma resumida, define-se os novos tipos GraphQL que serão utilizados, como também a *query* que será utilizada:

const typeDefs = `
    type Category {
        id: ID!
        name: String!
    }
    
    type Query {
        categories: [Categories!]!
    }
`

Além disso, define-se a função *resolver* que será responsável por processar a *query* desejada:

const resolvers = {
    Query: {
        categories: async () => {
            const categories = await getCategoriesFromDb()
            
            return categories
        }
    }
}

Depois de qualquer mudança no esquema GraphQL, suba o servidor de desenvolvimento, para isso, abra seu terminal e digite:

`$ yarn develop`

Em seguida, abra outro terminal e digite:

`$ yarn generate`

Feito isso, as *queries* e fragmentos GraphQL estarão disponíveis para serem consumidas, disponibilizando os dados desejados para os componentes da aplicação.

### VTEX REST API

Ao utilizar a plataforma de catálogo da VTEX, alguns dados desejados podem estar indisponíveis na FastStore API. Se este for o caso, utilize-se das rotas definidas na [VTEX API Reference](https://developers.vtex.com/docs/api-reference) para obtê-los e estenda o esquema GraphQL, como citado acima, para disponibilizá-los para os componentes.

As chamadas para os *endpoints* da API REST podem ser realizadas nas funções *resolvers*, que foram exemplificadas acima.

Atente-se que apenas algumas rotas são públicas. Sendo assim, outras precisam de autenticação para serem utilizadas.