mz-mobile-ui-kit

mz-mobile-ui-kit представляет из себя npm-пакет с цветами, константами, и готовыми компонентами для приложения

Структура компонентов в пакете повторяет структуру визуальных компонентов в Figma и основана на паттерне Атомарный дизайн/Atomic Design

Добавление UI-kit в приложение

• добавить пакет

yarn add mz-mobile-ui-kit

• открыть файл package.json проекта mz-mobile-ui-kit и установить все пакеты из секции peerDependencies, соблюдая указанные там версии
• если версия зависимости в peerDependencies mz-mobile-ui-kit и в целевом приложении(которое использует ui-кит) должна отличаться, то эту зависимость необходимо прописать в секции expo файла package.json целевого приложения:

"expo": {
  "autolinking": {
    "exclude": [
      "react-native-reanimated"
    ]
  }
}

Разработка пакета UI-kit

Запуск на устройстве

сам UI-кит - это npm-пакет, наблюдение за изменениями в нем при разработке ведется через приложение "example", лежащее в отдельной директории проекта. В приложении example пакет mz-mobile-ui-kit подключен из локальной директории проекта, UI-кит не нужно опубликовывать для получения изменений

для начала разработки необходимо:

• установить приложение Expo Go на тестовое устройство
• поставить зависимости в корневой директории проекта

yarn

• запустить expo-бандлер в директории example

cd example
expo start

• запустить Expo Go на устройстве и подключиться к запущенному бандлеру

Установка нового пакета в UI-kit

Нативный пакет

Очень желательно, чтобы нативный пакет поддерживался версией expo приложения example, иначе в приложении example нельзя будет использовать этот нативный пакет и отлаживать ui-кит будет сложнее

для проверки этого можно запустить в директории example команду

expo install <native-package-name>

Это установит подходящую для expo версию пакета. Или не установит вообще :-)
Установленную версию пакета нужно использовать в дальнейших действиях ниже

добавить новый пакет как зависимость в файл package.json в секции:

• devDependencies(нужно для приложения example)

"devDependencies": {
  ......

  "react-native-reanimated": "2.8.0",

  ......
},

• peerDependencies(нужно для работы в целевом приложении)

"peerDependencies": {
  ......

  "react-native-reanimated": ">= 2.8.0",

  ......
},

Обычный пакет

добавить новый пакет как зависимость в файл package.json в секции:

• devDependencies(нужно для приложения example)

"devDependencies": {
  ......

  "react-native-reanimated": "2.8.0",

  ......
},

• dependencies(для каскадного подключения зависимости в целевое приложение)

"dependencies": {
  ......

  "react-native-reanimated": ">= 2.8.0",

  ......
},

после всех изменений запустить установку пакетов в корневой директории UI-кита

yarn

Добавление новой иконки в UI-kit

1. найти в Figma новую иконку и экспортировать как svg, причем нужно экспортировать не саму группу иконки, а весь фрейм размером 24×24

2. в проекте, в директории src/assets/svg создать файл для новой иконки NewIcon.tsx

import * as React from 'react'
import { Svg, Path, SvgProps } from 'react-native-svg'

import { Colors } from 'src/constants'

export const NewIcon = ({ fill = Colors.Text.SECONDARY, ...props }: SvgProps) => (
  <Svg viewBox="0 0 24 24" fill="none" {...props}>
    <Path
      fill={fill}
      fillRule="evenodd"
      clipRule="evenodd"
      d="M2.253 6.256a.855.855 .... 0 0 1 1.22  0 1 0-1.236Z"
    />
  </Svg>
)

3. открыть экспортированный svg-файл в IDE, скопировать из него пропсы каждого из html-тегов(кроме <svg> - он уже подготовлен в примере выше), в некоторых иконках может быть два <path /> - тогда нужно будет добавить еще один <Path ... /> или могу встречаться другие html-теги - для них нужно создать соответствующие JSX-элементы из react-native-svg и скопировать их пропсы в эти JSX-элементы, в каждом JSX-элементе не забываем дописывать пропс fill={fill}

4. в файле index.tsx:

• в src/assets/svg добавляем импорт новой иконки:

import { NewIcon } from './NewIcon'

• в export type IconName дописать название иконки new-icon
• в export const Svg дописать в switch .. case

case 'new-icon':
  return <NewIcon {...props} />

Добавление нового компонента в UI-kit

• необходимо соблюдать атомарную структуру компонентов и класть компонент в соответствующую директорию(уровень нового компонента(ов) должен быть прописан в Figma)
• компоненты не должны иметь дефолтного экспорта, только именованные
• у функции/класса компонента обязательно должно быть прописано свойство displayName в виде NewComponent.displayName = 'NewComponent'
• ссылку на новый компонент необходимо добавить в вышележащий index.ts
• после создания компонента необходимо добавить примеры его использования в подходящий раздел/экран приложения example

License

MIT