IsraelSampaio/mercado-dojo

Segundo dia -> Coding Dojo: Finalizar design tokens e inicia UIKit(componentes)

Verificar quais plataforma fazer o build

• SASS
• Json
• Javascript

Verificar tokens faltando para criar componentes

• Button
• Header
• Card

Criar estrutura do projeto

• iniciar projeto com React cli
• instalar storybook
• instalar dependências para build
  • cross-env
  • babel → @babel/cli @babel/core babel-loader
• configurar babel
  • https://gist.github.com/IsraelSampaio/49ddd491b570fa88b7165c12abefb42f
• executar o build
  • cross-env BABEL_ENV=production babel src -d dist

Criar componentes

• Button
• Header
• Card

Extra: consumir componentes no projeto em Nextjs

Exemplos

https://storybook.js.org/tutorials/design-systems-for-developers/react/en/introduction/

------------------------------------

Primeiro dia -> Coding Dojo: Design Tokens

Estruturar projeto

• Criar um monorepo
• Separar pacotes
  • next
  • design tokens
  • ui-components

Pacote design tokens

• Instalar cli do style dictionary

  https://amzn.github.io/style-dictionary/#/quick_start

Verificar quais plataforma fazer o build

• SASS
• Flutter
• Json
• Javascript

Montar tokens

• colors
• spacing
  • margin
  • padding
• font size

Consumindo tokens

• Realizar o build no Design tokens
  • colocar o build para ser realizado quando instalar as dependências
• importar tokens na folha de estilo

Exemplos

Flutter

https://github.com/amzn/style-dictionary/tree/master/examples/advanced/flutter

Multi brand and Multi platform

https://github.com/amzn/style-dictionary/tree/master/examples/advanced/multi-brand-multi-platform

Auto Rebuild Watcher

https://github.com/amzn/style-dictionary/tree/master/examples/advanced/auto-rebuild-watcher