💅 KODE UI kit

React Native имплементация UI-кита от компании KODE

🛠️ Минимальные требования

• iOS 16
• Android 7.0 (API 24)
• React Native 0.78.0+
• New Architecture Enabled ❗
• Xcode 16+ (recommended 16.3+)

⚠️ Зависимости

• react-native-unistyles v3+
• react-native-reanimated
• react-native-gesture-handler
• react-native-bottom-sheet
• react-native-keyboard-controller
• react-native-safe-area-context
• @react-navigation/native
• @react-navigation/bottom-tabs
• react-native-screens

📥 Установка

• установить все зависимости выше, согласно их документации
• yarn add @kode-frontend/uikit-rn
• Настроить react-native-unistyles/plugin плагин

//bebel.config.js

module.exports = function (api) {
  api.cache(true)

  return {
    ...
    plugins: [
      ... // any plugins
      [
        'react-native-unistyles/plugin',
        {
          root: 'src',
          /*
            Нужно добавить `autoProcessPaths`
          */
          autoProcessPaths: [
            '@kode-frontend/uikit-rn',
          ],
        },
      ],
    ],
  }
}

🧑‍💻 Использование

1. Задекларируй темы

//ui-kit.d.ts

import { type DefaultTheme } from '@kode-frontend/uikit-rn';

import 'react-native-unistyles';

declare module 'react-native-unistyles' {
  export type AppThemes = {
    dark: DefaultTheme;
    light: DefaultTheme;
  };

  export interface UnistylesThemes extends AppThemes {}
}

2. Создай темы

const light: DefaultTheme = createTheme(...)
const dark: DefaultTheme = createTheme(...)

3. оберни приложение в контекст UI kit'а

// index.js (.ts)

AppRegistry.registerComponent(...) <- удали эту строку

// замени ее на:
createThemedApp('your_app_name', () => App, {
  settings: {
    adaptiveThemes: true,
  },
  themes: {
    dark, // <- твоя тема, должна наследоваться от DefaultTheme
    light,// <- твоя тема
  },
})

4. используй компоненты

import { Typography } from '@kode-frontend/uikit-rn/primitives';
import { TextField } from '@kode-frontend/uikit-rn/components';
import { BottomSheet } from '@kode-frontend/uikit-rn/layouts';

5. используй темы со всеми преимуществами unistyles

import { StyleSheet } from '@kode-frontend/uikit-rn';

const styles = StyleSheet.create((theme) => ({
  box: {
    backgroundColor: theme.palette.surface.background,
  },
}));

📦 Состав UI kit'а

• primitives
  • Touchable
  • Typography
  • ActivityIndicator
  • RefreshControl
  • TextInput
  • transitions
    • FadeTransition
    • CollapseTransition
    • SwitchTransition
• components
  • buttons
    • Button
    • IconButton
  • form-fields
    • FormField
    • TextField
    • TextAreaField
    • SelectField
  • Divider
  • Cell
  • Checkbox
  • Snackbar
  • Radio
  • Tabs
  • EmptyState
• layouts
  • bottom-sheet
• layouts
  • bottom-sheet
    • BottomSheet
    • BottomSheetFlatList
    • BottomSheetHeader
    • BottomSheetScrollView
    • BottomSheetSectionList
    • BottomSheetView
  • page
    • Page
    • PageList
    • PageFooter
• hooks
  • useTheme
• lib
  • createTheme

🚀 Хочу внести свой вклад в развитие, как мне это сделать?

тебе сюда