DesignSystem as a class + Stores.hydrate & Services.init

kanzitelli · Oct 20, 2022 · 7cedd66 · 7cedd66
1 parent 2a98ad0
commit 7cedd66
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 96 deletions.
diff --git 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
@@ -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
@@ -5,30 +5,32 @@ 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();
   onStart = new OnStartService();
 }
 export const services = new Services();
 
+// Providers and hooks
 const ServicesContext = React.createContext<Services>(services);
 export const ServicesProvider = ({children}: any) => (
   <ServicesContext.Provider value={services}>
     {children}
   </ServicesContext.Provider>
 );
 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
@@ -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
@@ -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>(stores);
 export const StoresProvider = ({children}: any) => (
   <StoresContext.Provider value={stores}>{children}</StoresContext.Provider>
 );
 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
@@ -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<Appearance, ThemeColors> = {
-  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<Appearance, ThemeColors> = {
+    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
@@ -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);
     },
   );