📕 Storybook Somapay Mobile

Esse repositório é destinado a criação de componentes reutilizáveis para o uso no projeto do app Somapay.

Aqui os componentes devem seguir o design system, como cores, tipologia, espaçamentos, etc.

💪 Como contribuir

Para contribuir com o projeto siga os passos abaixo

• Clone esse repositório
• Execute yarn ou npm install para instalar as dependências do pacote
• Na raiz da pasta execute npm pack
• Entre na pasta storybook-example
• Execute yarn add ../somapay-storybook-somapay-mobile-x.x.x.tgz onde o x.x.x representa a versão do pacote definida no package.json
• Na pasta execute yarn ou npm install para instalar as dependências da pré visualização no storybook
• Faça login na conta expo com expo login (Obtenha as credênciais com o responsável pelo projeto)
• Execute expo start
• Leia o QRCode que irá aparecer no terminal
• Crie seus componentes e os adicione em src/components/MeuComponente! ✨
• Crie um MeuComponente.stories.tsx em storybook-example/storybook
• Importe em storybook-example/stories/index.js para poder visualizá-lo
• Exporte seu componente em index.ts na raiz do projeto
• Crie testes para seu componente

Como criar um pacote npm e testá-lo antes de publicar

• Incremente a versão no package.json
• Na raiz do projeto execute npm pack, isso irá gerar um arquivo .tgz
• Entre em storybook-example e execute yarn add ../somapay-storybook-somapay-mobile-x.x.x.tgz onde o x.x.x representa a versão do pacote definida no package.json
• Vá ate o arquivo MeuComponente.stories.tsx em storybook-example/storybook e subistitua a importação local pela a da instalação como dependência npm. ex: troque import { MeuComponente } from '../../../src/components/MeuComponente' por import { MeuComponente } from '@somapay/storybook-somapay-mobile'
• Rode o projeto expo e veja se está tudo normal

🛠️ Tecnologias (clique nos items para ver a doc)

• React Native
• Expo
• React Native Paper
• Storybook