From 7cedd66d130e02099879a6d9f4951967f12a40de Mon Sep 17 00:00:00 2001 From: Batyr Kanzitdinov Date: Thu, 20 Oct 2022 15:17:22 +0200 Subject: [PATCH] DesignSystem as a class + Stores.hydrate & Services.init --- App.tsx | 12 ++-- README.md | 2 +- src/services/index.tsx | 28 ++++---- src/services/navigation/options.ts | 16 ++--- src/stores/index.tsx | 28 ++++---- src/utils/designSystem.tsx | 107 +++++++++++++++-------------- src/utils/hooks.tsx | 4 +- 7 files changed, 101 insertions(+), 96 deletions(-) diff --git a/App.tsx b/App.tsx index 821a224..8401721 100644 --- a/App.tsx +++ b/App.tsx @@ -2,22 +2,22 @@ import {LogBox} from 'react-native'; import {Root, Screen, BottomTabs} from 'rnn-screens'; import {screens} from './src/screens'; -import {initServices} from './src/services'; -import {hydrateStores} from './src/stores'; -import {configureDesignSystem} from './src/utils/designSystem'; +import {Services} from './src/services'; +import {Stores} from './src/stores'; +import {DesignSystem} from './src/utils/designSystem'; import SplashScreen from 'react-native-splash-screen'; LogBox.ignoreLogs(['Require', 'RCTBridge']); export const beforeStart = async (): PVoid => { // 1. hydrate stores - await hydrateStores(); + await Stores.hydrate(); // 2. configure design system - await configureDesignSystem(); + await DesignSystem.configure(); // 3. init services - await initServices(); + await Services.init(); // 4. hide splash screen SplashScreen.hide(); diff --git a/README.md b/README.md index 63815ef..abdbdd6 100644 --- a/README.md +++ b/README.md @@ -129,7 +129,7 @@ Now, splash screens for iOS and Android must be generated and you should manuall This starter is using [RN UI lib](https://github.com/wix/react-native-ui-lib) as a design system, UI toolset and a source of ready-to-go components. -`configureDesignSystem()` - a method where all settings for an app's design system is taking place. You can customize colors, schemes, typegraphy, spacings, etc. Located at `src/utils/designSystem.tsx`. +`DesignSystem` - a class where all settings for an app's design system is taking place. You can customize colors, schemes, typegraphy, spacings, etc. Located at `src/utils/designSystem.tsx`. https://user-images.githubusercontent.com/4402166/191782125-31bc8d9e-6d84-40b2-ae8e-798eda968d50.MP4 diff --git a/src/services/index.tsx b/src/services/index.tsx index 0623b44..cbc18d0 100644 --- a/src/services/index.tsx +++ b/src/services/index.tsx @@ -5,7 +5,20 @@ import {NavigationService} from './navigation'; import {TranslateService} from './translate'; import {ApiService} from './api'; -class Services { +export class Services { + static async init(): PVoid { + for (const key in services) { + if (Object.prototype.hasOwnProperty.call(services, key)) { + const s = (services as any)[key] as IService; + + if (s.init) { + await s.init(); + } + } + } + } + + // services list t = new TranslateService(); api = new ApiService(); nav = new NavigationService(); @@ -13,6 +26,7 @@ class Services { } export const services = new Services(); +// Providers and hooks const ServicesContext = React.createContext(services); export const ServicesProvider = ({children}: any) => ( @@ -20,15 +34,3 @@ export const ServicesProvider = ({children}: any) => ( ); export const useServices = (): Services => React.useContext(ServicesContext); - -export const initServices = async (): PVoid => { - for (const key in services) { - if (Object.prototype.hasOwnProperty.call(services, key)) { - const s = (services as any)[key] as IService; - - if (s.init) { - await s.init(); - } - } - } -}; diff --git a/src/services/navigation/options.ts b/src/services/navigation/options.ts index 6099ad6..224e763 100644 --- a/src/services/navigation/options.ts +++ b/src/services/navigation/options.ts @@ -3,7 +3,7 @@ import {Options, OptionsTopBar} from 'react-native-navigation'; import {Colors} from 'react-native-ui-lib'; import Ionicons from 'react-native-vector-icons/Ionicons'; import { - getThemeColor, + DesignSystem, getThemeRNStatusBarStyle, getThemeStatusBarStyle, } from '../../utils/designSystem'; @@ -15,7 +15,7 @@ export const screenDefaultOptions = (): Options => { return { topBar: { background: { - color: getThemeColor('bgColor'), + color: DesignSystem.themeColor('bgColor'), }, backButton: { color: Colors.primary, @@ -25,11 +25,11 @@ export const screenDefaultOptions = (): Options => { rightButtonColor: Colors.primary, leftButtonColor: Colors.primary, title: { - color: getThemeColor('textColor'), + color: DesignSystem.themeColor('textColor'), }, largeTitle: { visible: true, - color: getThemeColor('textColor'), + color: DesignSystem.themeColor('textColor'), }, }, }; @@ -50,7 +50,7 @@ export const tabsDefaultOptions = (): Options => { return { bottomTabs: { titleDisplayMode: 'alwaysShow', - backgroundColor: getThemeColor('bgColor'), + backgroundColor: DesignSystem.themeColor('bgColor'), hideShadow: true, elevation: 0, }, @@ -65,12 +65,12 @@ export const navDefaultOptions = (): Options => { return { layout: { orientation: ['portrait'], - componentBackgroundColor: getThemeColor('bgColor'), - backgroundColor: getThemeColor('bgColor'), + componentBackgroundColor: DesignSystem.themeColor('bgColor'), + backgroundColor: DesignSystem.themeColor('bgColor'), }, statusBar: { style: getThemeStatusBarStyle(), - backgroundColor: getThemeColor('bgColor'), + backgroundColor: DesignSystem.themeColor('bgColor'), }, ...screenDefaultOptions(), diff --git a/src/stores/index.tsx b/src/stores/index.tsx index 864a68e..ca7d0b5 100644 --- a/src/stores/index.tsx +++ b/src/stores/index.tsx @@ -4,26 +4,28 @@ import './_hydration'; import {UIStore} from './ui'; import {CounterStore} from './counter'; -class Stores { +export class Stores { + static async hydrate(): PVoid { + for (const key in stores) { + if (Object.prototype.hasOwnProperty.call(stores, key)) { + const s = (stores as any)[key] as IStore; + + if (s.hydrate) { + await s.hydrate(); + } + } + } + } + + // stores list ui = new UIStore(); counter = new CounterStore(); } export const stores = new Stores(); +// Providers and hooks const StoresContext = React.createContext(stores); export const StoresProvider = ({children}: any) => ( {children} ); export const useStores = (): Stores => React.useContext(StoresContext); - -export const hydrateStores = async (): PVoid => { - for (const key in stores) { - if (Object.prototype.hasOwnProperty.call(stores, key)) { - const s = (stores as any)[key] as IStore; - - if (s.hydrate) { - await s.hydrate(); - } - } - } -}; diff --git a/src/utils/designSystem.tsx b/src/utils/designSystem.tsx index 37fb365..5f59deb 100644 --- a/src/utils/designSystem.tsx +++ b/src/utils/designSystem.tsx @@ -4,68 +4,69 @@ import {Colors, Typography} from 'react-native-ui-lib'; import {stores} from '../stores'; import {Appearance} from './types/enums'; -const colors = { - primary: '#5383b8', // blue - secondary: '#469c57', // green - accent: '#fed330', // yellow - _black: Colors.rgba(20, 20, 20, 1), - _black2: Colors.rgba(50, 50, 50, 1), - _white: Colors.rgba(250, 250, 250, 1), - _white2: Colors.rgba(230, 230, 230, 1), -}; +export class DesignSystem { + static colors = { + primary: '#5383b8', // blue + secondary: '#469c57', // green + accent: '#fed330', // yellow + _black: Colors.rgba(20, 20, 20, 1), + _black2: Colors.rgba(50, 50, 50, 1), + _white: Colors.rgba(250, 250, 250, 1), + _white2: Colors.rgba(230, 230, 230, 1), + }; -const themes: Record = { - system: {} as any, - light: { - textColor: colors._black, - bgColor: colors._white, - bg2Color: colors._white2, - }, - dark: { - textColor: colors._white, - bgColor: colors._black, - bg2Color: colors._black2, - }, -}; + static themes: Record = { + system: {} as any, + light: { + textColor: this.colors._black, + bgColor: this.colors._white, + bg2Color: this.colors._white2, + }, + dark: { + textColor: this.colors._white, + bgColor: this.colors._black, + bg2Color: this.colors._black2, + }, + }; -// for more information - https://wix.github.io/react-native-ui-lib/foundation/style -export const configureDesignSystem = async (): PVoid => { - const {ui} = stores; + // for more information - https://wix.github.io/react-native-ui-lib/foundation/style + static async configure(): PVoid { + const {ui} = stores; - setColorsScheme(ui.appearance); // needed here - if (ui.isAppearanceSystem) { - Colors.loadColors(colors); - Colors.loadSchemes(themes); - } else { - Colors.loadColors({...colors, ...themes[ui.appearance]}); - Colors.loadSchemes({dark: {}, light: {}}); - } + // setting scheme in advance (needed for dark mode) + if (ui.appearance === 'system') { + Colors.setScheme('default'); + } else { + Colors.setScheme(ui.appearance); + } - Typography.loadTypographies({ - section: {fontSize: 26, fontWeight: '600'}, - }); -}; + // loading colors + if (ui.isAppearanceSystem) { + Colors.loadColors(this.colors); + Colors.loadSchemes(this.themes); + } else { + Colors.loadColors({...this.colors, ...this.themes[ui.appearance]}); + Colors.loadSchemes({dark: {}, light: {}}); + } -const setColorsScheme = (appearance: Appearance) => { - if (appearance === 'system') { - Colors.setScheme('default'); - } else { - Colors.setScheme(appearance); + Typography.loadTypographies({ + section: {fontSize: 26, fontWeight: '600'}, + }); } -}; -export const getThemeColor = (c: keyof ThemeColors): Color => { - const {ui} = stores; + static themeColor(c: keyof ThemeColors): Color { + const {ui} = stores; - if (ui.isAppearanceSystem) { - return { - dark: themes.dark[c], - light: themes.light[c], - }; - } else { - return themes[ui.appearance][c]; + if (ui.isAppearanceSystem) { + return { + dark: this.themes.dark[c], + light: this.themes.light[c], + }; + } else { + return this.themes[ui.appearance][c]; + } } -}; +} export const getThemeStatusBarStyle = (): StatusBarStyle => { const {ui} = stores; diff --git a/src/utils/hooks.tsx b/src/utils/hooks.tsx index 37ee65f..faa9293 100644 --- a/src/utils/hooks.tsx +++ b/src/utils/hooks.tsx @@ -3,7 +3,7 @@ import {useColorScheme} from 'react-native'; import {reaction} from 'mobx'; import {stores} from '../stores'; -import {configureDesignSystem} from './designSystem'; +import {DesignSystem} from './designSystem'; import {services} from '../services'; import { NavigationComponentProps, @@ -24,7 +24,7 @@ export const useAppearance = () => { reaction( () => ui.appearance, value => { - configureDesignSystem(); + DesignSystem.configure(); setAppearance(value); }, );