Addi Mobile Storybook

Mobile Storybook is a components collection for Addi App

📋 Documentation

Complete documentation in our notion Local Environment

⚙️ Storybook Visual Structure

The storyBook is organized in this way:

.
├── Brand
│  ├── Components like: logos or brand themes.
├── Layout
│  ├── Components like: headers or cards.
├── Controls
│  ├── Components like: Buttons and Links.
├── Media
│  ├── Components like: Carousels, galleries, sliders, video players, etc.
├── Inputs
│  ├── Components like: Custom inputs, searchs, error inputs, OTP codes, etc.
├── Visualizations
│  ├── Other components like: modals, currencys, store items, purchase, etc.
├── Typographies
│  ├── Everything related to fonts in our design foundation.

🎲 First Steps

Mobile Storybook uses Expo React Native Framework and Storybook StoryBook

• Environment Setup -> This project uses Expo CLI

🕹️ Getting started

Please follow the next guide before to working:

Located on platform/ui-mobile/src/apps/mobile-storybook

$ yarn install

Launch iOS

$ yarn mobile-storybook:ios

Launch Android

$ yarn mobile-storybook:android

Launch both platforms (recomended)

$ yarn mobile-storybook:start

Using Storybook

• If you have added a new story component, you will be able to see it after running $ yarn mobile-storybook:prestorybook. This command will go through the app folder looking for files with .stories extensions and in case it finds a new one it will add it to the storyLoader file.

Utils

• Execute yarn run ts for typescript live reload check (Compile ts project)
• Use react-native-elements

📚 Libraries used

• React Native version: 0.64.3.
• TypeScript
• Styled Components
• Storybook

VSCode extensions

• Prettier
• ESLint
• Editorconfig

:v: Enjoy!