sa-design-system v0.0.1

SuperApp Design System

React Native components library for OMNi's Super App.

Table of Contents

1. Quick Start
2. Tech Stack
3. Folder Structure
4. Branching Model
5. Standards
6. VS Code Settings
7. Miscellaneous

Dependencies

1. In order to implement correctly the Icons system it is required to install react-native-svg

Quick Start

Install all dependencies by running

yarn

To start storybook run:

start storybook

To start the react-native project, run in another terminal:

yarn start

To start the simulator, run in another terminal:

yarn run:ios

or:

yarn run:android

Testing

For this project we are using jest. Each unit testing for react components needs to implement the snapshots from @testing-library/react-native in order to verify the render method.

In order to perform the jest tests, run in the terminal:

yarn test

If you need to update your snapshots, run in the terminal:

yarn test:update

Tech Stack

• React Native
• Typescript
• Storybook (v5.3.21)
• Prettier
• ESLint

Simulator dependencies

• iOS
  • Cocoapods: cd ios && pod install && cd ..
• Androids
  • Android Studio

Folder Structure

TODO: Assets missing

├── components
│   └── Button
│   └── {ComponentName}
│       ├── {ComponentName}.stories.tsx
│       ├── {ComponentName}.styles.tsx
│       └── {ComponentName}.tsx
│       └── __snapshots__
│           └── {ComponentName}.test.tsx.snap
├── index.tsx
├── themes
│   ├── colors.ts
│   └── typography.ts
└── utils
    └── decorators.tsx

Example

.
src
├── components
│   └── Button
│       ├── Button.stories.tsx
│       ├── Button.styles.tsx
│       ├── Button.test.tsx
│       ├── Button.tsx
│       └── __snapshots__
│           └── Button.test.tsx.snap
├── index.tsx
├── themes
│   ├── colors.ts
│   └── typography.ts
└── utils
    └── decorators.tsx

Branching Model

Git flow: https://nvie.com/posts/a-successful-git-branching-model/

Standards

Branch naming standard

Commit message standard

File Naming Standard

• Airbnb Naming Standard: https://github.com/airbnb/javascript/tree/master/react#naming

Stories Naming Standard:

• Standard: {ComponentName}.stories.tsx
• Example: Button.stories.tsx

Component Styles

File Naming Standard

• Standard: {ComponentName}.styles.tsx
• Example: Button.styles.tsx

Attribute Naming Standard

• Standard: {blockName}__{elementName}__{modifierName}
• Example without a modifier: button__label
• Example with a modifier: button__label__outline

Stylesheet example

import { getTheme } from '../../themes/colors';
import { StyleSheet } from 'react-native';
import typography from '../../themes/typography';

export const getStyles = (themeName?: string) => {
  const theme = getTheme(themeName);

  return StyleSheet.create({
    button: {
      backgroundColor: theme.primary,
      borderColor: theme.secondary,
    },
    button__outline: {
      backgroundColor: 'transparent',
      borderColor: theme.primary,
    },
    button__text: {
      ...typography().buttonRegular,
      color: theme.white,
      alignSelf: 'center',
    },
    button__text__Outline: {
      color: theme.secondary,
    },
  });
};

Template

import { getTheme } from '../../themes/colors';
import { StyleSheet } from 'react-native';
import typography from '../../themes/typography';

export const getStyles = (themeName?: string) => {
  const theme = getTheme(themeName);

  return StyleSheet.create({});
};

Storybook addons (v5.3.21) in place

Important: Stoybook 6 isn't still compatible with React Native, when installing a new Storybook addon be sure to install the correct version by using @5.3.21 when adding it. For example:

yarn add @storybook/knobs@5.3.21 --dev

Actions

Documentation: https://github.com/storybookjs/storybook/tree/v5.3.21 (Needs to be confirmed)

Knobs

Documentation: https://github.com/storybookjs/storybook/tree/v5.3.21/addons/knobs

Label Naming standard

Prop name

VS Code Settings

This configuration is intend for ESLintcr to do all the heavy lifting in regards to validations and using prettier to format the code on save by using as a plugin.

{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
}

Miscellaneous

This section is meant for explain the characateristics of certain modules upon the app.

1. Icons: In order to add a new icon it is required to open an svg file with any text editor and search for the path tags there will be two or one path tag indentified by id's primary and secondary you should find the attr d which will be mapping to its matching key on the object (primary, secondary). In the file assets/icons/index there is an array with the following structure:

[ICON_NAME]: {
  primary: string;
  secondary?: string;
  transformPrimary?: string;
  transformSecondary?: string;
  viewBox: string;
}

the transfromProperties are also part of the path tag so if those are available it is required to map them into the object. For the least we have the viewBox which is located at the root svg tag so it should mapped in this object as well. I.E:

ARROW_DOWN: {
  viewBox: '0 0 24 24',
  primary:
    'M14.0959,17.5964 C13.8399,17.5964 13.5839,17.4984 13.3889,17.3034 L8.8889,12.8034 C8.4979,12.4124 8.4979,11.7804 8.8889,11.3894 L13.3889,6.8894 C13.7799,6.4984 14.4119,6.4984 14.8029,6.8894 C15.1939,7.2804 15.1939,7.9124 14.8029,8.3034 L11.0099,12.0964 L14.8029,15.8894 C15.1939,16.2804 15.1939,16.9124 14.8029,17.3034 C14.6079,17.4984 14.3519,17.5964 14.0959,17.5964',
  transformPrimary:
    'translate(11.845900, 12.096275) rotate(-90.000000) translate(-11.845900, -12.096275)',
}