Skip to content

Instantly share code, notes, and snippets.

@JRobsonJr
Last active Aug 19, 2020
Embed
What would you like to do?
VTEX no Andromedev

Built-in Components

Descrição do projeto

Na VTEX existem diversos produtos e aplicações para diferentes necessidades e fins e, por isso, cada um possui seu próprio design system com uma identidade visual única que se aplica ao seu contexto de usuários.

No contexto da empresa, um design system é composto por diferentes componentes React que seguem um tema configurado com ThemeUI. Considerando as singularidades de cada um, existe a necessidade de haver diferentes documentações que demonstrem os variados casos de uso dos componentes.

A ideia desse projeto é criar diversos componentes para que desenvolvedores de design system possam usar nas suas documentações, a fim de demonstrar as funcionalidades de seus componentes e suas especificações de design.

O que eu ganho participando desse projeto?

A primeira vantagem é que a aprendiz ou o aprendiz terá uma experiência inicial com o ecossistema da VTEX, tendo a oportunidade de trabalhar em conjunto com membros da parceria com a UFCG e também com funcionários da empresa para alinhar seu progresso. Dessa forma, haverá uma troca tanto de conhecimento técnico como também de cultura, o que poderá contribuir para o seu crescimento profissional.

Além disso, a aprendiz ou o aprendiz estará ajudando a criar uma base que será irá potencialmente deixar um impacto real no processo de desenvolvimento dos funcionários (desenvolvedores e designers) da VTEX. Vai ficar de fora dessa?

Quais tecnologias e ferramentas devem ser utilizadas?

Obrigatórias

  • Javascript
  • Typescript
  • React
  • ThemeUI
  • Reakit

Opcionais

  • MDX
  • Storybook
  • Jest

Links úteis

Qual perfil de aprendiz se espera?

Espera-se que a aprendiz ou o aprendiz já tenha noção de desenvolvimento web com tecnologias modernas (JavaScript, HTML e um pouco de CSS) para facilitar o processo. É desejável também que tenha conhecimento de componentização e de React, que será a principal tecnologia utilizada.

Cronograma sugerido

1ª fase de desenvolvimento

  • Fase de aprendizado
  • Planejamento da arquitetura e funcionamento do código
  • Configuração do(s) repositório(s)

2ª fase de desenvolvimento

  • Configuração para componentes terem estilos customizáveis
  • Implementação do PropsTable para exibir propriedades de um componente, incluindo suas descrições e valores possíveis
  • Implementação do Usage para demonstrar a importação e utilização básica de um componente

3ª fase de desenvolvimento

  • Implementação do CodeBlock para exibir blocos de código ilustrando uso dos componentes
  • Implementação do LiveCode para permitir edição de código com resultados em tempo real

Adicional

  • Integração com Codepen, CodeSandbox e semelhantes
  • Implementação do componente de Guidelines

Sobre o mentor

Robson Junior trabalha atualmente na parceria entre UFCG e VTEX como desenvolvedor de software, com ênfase em desenvolvimento web, e é membro do core team da OpenDevUFCG. É estudante de Ciência da Computação na UFCG, cursando o nono (e penúltimo) período da graduação.

Contate-me

VTEX Design Systems Docs

Descrição do projeto

Na VTEX existem diversos produtos e aplicações para diferentes necessidades e fins e, por isso, cada um possui seu próprio design system com uma identidade visual única que se aplica ao seu contexto de usuários.

No contexto da empresa, um design system é composto por diferentes componentes React que seguem um tema configurado com ThemeUI. Considerando as singularidades de cada um, existe a necessidade de haver diferentes documentações que demonstrem os variados casos de uso dos componentes.

A ideia desse projeto é criar uma base usando Gatsby para criação de sites de documentação para design systems, propondo uma solução única e extensível. Num cenário ideal, os desenvolvedores e designers que utilizem essa solução poderão ignorar as preocupações adicionais relacionadas com a configuração de seus portais de documentação e, dessa forma, focar no conteúdo: a documentação.

O que eu ganho participando desse projeto?

A primeira vantagem é que a aprendiz ou o aprendiz terá uma experiência inicial com o ecossistema da VTEX, tendo a oportunidade de trabalhar em conjunto com membros da parceria com a UFCG e também com funcionários da empresa para alinhar seu progresso. Dessa forma, haverá uma troca tanto de conhecimento técnico como também de cultura, o que poderá contribuir para o seu crescimento profissional.

Além disso, a aprendiz ou o aprendiz estará ajudando a criar uma base que será irá potencialmente deixar um impacto real no processo de desenvolvimento dos funcionários (desenvolvedores e designers) da VTEX. Vai ficar de fora dessa?

Quais tecnologias e ferramentas devem ser utilizadas?

  • Javascript
  • Typescript
  • React
  • MDX
  • ThemeUI
  • Reakit
  • Gatsby

Links úteis

Qual perfil de aprendiz se espera?

Espera-se que a aprendiz ou o aprendiz já tenha noção de desenvolvimento web com tecnologias modernas (JavaScript, HTML e um pouco de CSS) para facilitar o processo. É desejável também que tenha conhecimento de componentização e de React, que será a principal tecnologia utilizada.

Cronograma sugerido

1ª fase de desenvolvimento

  • Fase de aprendizado
  • Planejamento da arquitetura e funcionamento do código
  • Configuração do(s) repositório(s)

2ª fase de desenvolvimento

  • Adicionar geração de páginas básica com MDX
  • Adicionar estrutura de uma página para cada componente
    • Criar template para página de componente para ser utilizado por todos
  • Adicionar customização para: título do site, descrição, tema, repositório

3ª fase de desenvolvimento

  • Configurar navegação
  • Adicionar navbar
  • Implementar funcionalidade de pesquisa

Adicional

  • Controle de versão
  • Internacionalização
  • Tema Dark

Sobre a mentora

Thayanne Sousa trabalha atualmente na parceria entre UFCG e VTEX como desenvolvedora de software, com ênfase em desenvolvimento web, e é membro do core team da OpenDevUFCG. É estudante de Ciência da Computação na UFCG, cursando o sexto período da graduação.

Contate-me

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment