@teamturing/react-native-kit 0.1.0 → 1.2.0

package/src/util/AppEvent.ts

@@ -0,0 +1,75 @@
+import { useEffect, useCallback, useRef } from 'react';
+
+export type Listener<T> = (payload: T) => void;
+export type AsyncListener<T> = (payload: T) => Promise<void>;
+
+export type EventType = string;
+
+class AppEvent {
+  #listenerMap = new Map<EventType, (Listener<any> | AsyncListener<any>)[]>();
+
+  emitEvent<Payload>(type: EventType, payload?: Payload): boolean {
+    let anyListener = false;
+    this.#listenerMap.get(type)?.forEach((listener) => {
+      anyListener = true;
+      listener(payload);
+    });
+    return anyListener;
+  }
+
+  async awaitEmitEvent<Payload>(type: EventType, payload?: Payload): Promise<void> {
+    const listeners = this.#listenerMap.get(type) || [];
+    for (let i = 0; i < listeners.length; i++) {
+      await listeners[i](payload);
+    }
+  }
+
+  addEventListener<Payload>(type: EventType, listener: Listener<Payload> | AsyncListener<Payload>) {
+    const currentList = this.#listenerMap.get(type);
+    if (!currentList) {
+      this.#listenerMap.set(type, [listener]);
+    } else {
+      currentList.push(listener);
+    }
+  }
+
+  removeEventListener<Payload>(type: EventType, listener: Listener<Payload> | AsyncListener<Payload>) {
+    const currentList = this.#listenerMap.get(type);
+    if (currentList) {
+      this.#listenerMap.set(
+        type,
+        currentList.filter((l) => l !== listener),
+      );
+    }
+  }
+}
+
+const appEventInstance = new AppEvent();
+
+const useAppEventListener = <T>(type: EventType, listener: Listener<T>, unsubscribe?: () => void) => {
+  const listenerRef = useRef<Listener<any> | null>(null);
+  const unsubscribeRef = useRef<() => void>();
+
+  listenerRef.current = listener;
+  unsubscribeRef.current = unsubscribe;
+
+  const listenerCallback = useCallback((payload: any) => listenerRef.current?.(payload), []);
+
+  useEffect(() => {
+    appEventInstance.addEventListener(type, listenerCallback);
+
+    return () => {
+      unsubscribeRef.current?.();
+      appEventInstance.removeEventListener(type, listenerCallback);
+    };
+  }, [type, listenerCallback]);
+};
+
+/**
+ * Event Emitter will wait the result of the listeners.
+ */
+const useAsyncAppEventListener = <T>(type: EventType, listener: AsyncListener<T>, unsubscribe?: () => void) => {
+  useAppEventListener(type, listener, unsubscribe);
+};
+
+export { appEventInstance as AppEvent, useAppEventListener, useAsyncAppEventListener };

package/src/util/ColorUtil.test.ts

@@ -0,0 +1,26 @@
+import { applyOpacity } from './ColorUtil';
+
+describe('applyOpacity', () => {
+  it('색이 7자리가 아니면 그대로 반환된다', () => {
+    expect(applyOpacity('#FFFFFFFF', 0)).toBe('#FFFFFFFF');
+  });
+
+  it('opacity가 0~100 사이가 아니면 clamp 된다', () => {
+    expect(applyOpacity('#FFFFFF', -100)).toBe('#FFFFFF00');
+    expect(applyOpacity('#FFFFFF', 200)).toBe('#FFFFFFFF');
+  });
+
+  it('성공 케이스', () => {
+    expect(applyOpacity('#FFFFFF', 0)).toBe('#FFFFFF00');
+    expect(applyOpacity('#FFFFFF', 10)).toBe('#FFFFFF1A');
+    expect(applyOpacity('#FFFFFF', 20)).toBe('#FFFFFF33');
+    expect(applyOpacity('#FFFFFF', 30)).toBe('#FFFFFF4D');
+    expect(applyOpacity('#FFFFFF', 40)).toBe('#FFFFFF66');
+    expect(applyOpacity('#FFFFFF', 50)).toBe('#FFFFFF7F');
+    expect(applyOpacity('#FFFFFF', 60)).toBe('#FFFFFF99');
+    expect(applyOpacity('#FFFFFF', 70)).toBe('#FFFFFFB3');
+    expect(applyOpacity('#FFFFFF', 80)).toBe('#FFFFFFCC');
+    expect(applyOpacity('#FFFFFF', 90)).toBe('#FFFFFFE5');
+    expect(applyOpacity('#FFFFFF', 100)).toBe('#FFFFFFFF');
+  });
+});

package/src/util/ColorUtil.ts

@@ -0,0 +1,15 @@
+export function applyOpacity(color: string, opacity: number): string {
+  if (color.length !== 7) {
+    return color;
+  }
+
+  if (opacity < 0) {
+    opacity = 0;
+  } else if (opacity > 100) {
+    opacity = 100;
+  }
+
+  opacity = Math.round(opacity * 2.55);
+
+  return color + opacity.toString(16).toUpperCase().padStart(2, '0');
+}

package/src/util/EnvironmentUtil.ts

@@ -0,0 +1,19 @@
+export function isTestEnvironment(): boolean {
+  return process.env.JEST_WORKER_ID !== undefined || process.env.NODE_ENV === 'test';
+}
+
+export function isDev(): boolean {
+  return __DEV__;
+}
+
+export function isDevButTestEnvironment(): boolean {
+  return __DEV__ && !isTestEnvironment();
+}
+
+export function isHermes(): boolean {
+  return !!(global as any)?.HermesInternal;
+}
+
+export function isNewArch(): boolean {
+  return global.__turboModuleProxy != null;
+}

package/src/util/Px.ts

@@ -0,0 +1,8 @@
+import is from './is';
+
+export function px(x: number): `${number}px` {
+  if (!is.number(x)) {
+    return '0px';
+  }
+  return `${x}px`;
+}

package/src/util/StyleUtil.ts

@@ -0,0 +1,66 @@
+import { is } from '@teamturing/react-native-kit';
+import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+
+export function flatStyle<S extends ViewStyle | ImageStyle | TextStyle>(style?: StyleProp<S>): S {
+  return (StyleSheet.flatten(style) || {}) as S;
+}
+
+interface NormalizedLayout {
+  marginTop: number;
+  marginLeft: number;
+  marginRight: number;
+  marginBottom: number;
+  marginVertical: number;
+  marginHorizontal: number;
+  paddingTop: number;
+  paddingLeft: number;
+  paddingRight: number;
+  paddingBottom: number;
+  paddingVertical: number;
+  paddingHorizontal: number;
+}
+// Get normalized margin, padding number.
+// If style prop contains these value with other type instead of number(string, etc...) then it will be ignored and will be retunned 0.
+export function normalizeStyleLayout<S extends ViewStyle | ImageStyle | TextStyle>(
+  style?: StyleProp<S>,
+): NormalizedLayout {
+  const flatten = flatStyle(style);
+
+  const marginLeft = parse(flatten.marginLeft, flatten.marginHorizontal, flatten.margin);
+  const marginRight = parse(flatten.marginRight, flatten.marginHorizontal, flatten.margin);
+  const marginHorizontal = marginLeft === marginRight ? marginLeft : 0;
+  const marginTop = parse(flatten.marginTop, flatten.marginVertical, flatten.margin);
+  const marginBottom = parse(flatten.marginBottom, flatten.marginVertical, flatten.margin);
+  const marginVertical = marginTop === marginBottom ? marginTop : 0;
+
+  const paddingLeft = parse(flatten.paddingLeft, flatten.paddingHorizontal, flatten.padding);
+  const paddingRight = parse(flatten.paddingRight, flatten.paddingHorizontal, flatten.padding);
+  const paddingHorizontal = paddingLeft === paddingRight ? paddingLeft : 0;
+  const paddingTop = parse(flatten.paddingTop, flatten.paddingVertical, flatten.padding);
+  const paddingBottom = parse(flatten.paddingBottom, flatten.paddingVertical, flatten.padding);
+  const paddingVertical = paddingTop === paddingBottom ? paddingTop : 0;
+
+  return {
+    marginBottom,
+    marginHorizontal,
+    marginLeft,
+    marginRight,
+    marginTop,
+    marginVertical,
+    paddingBottom,
+    paddingHorizontal,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingVertical,
+  };
+
+  function parse(a, b, c): number {
+    return num(a) || num(b) || num(c) || 0;
+  }
+
+  function num(x) {
+    return is.number(x) ? x : undefined;
+  }
+}

package/src/util/createCtx.ts

@@ -0,0 +1,42 @@
+import type { ReactNode, ReactElement, Context } from 'react';
+import React, { createElement } from 'react';
+
+export type ChildrenTransformer = (children?: ReactNode) => ReactNode | undefined;
+
+type CreatedContext<T, P> = readonly [
+  () => T,
+  (props: { children?: ReactNode } & P) => ReactElement,
+  React.Consumer<T>,
+  () => T | undefined,
+  Context<T | undefined>,
+];
+function createCtx<T, P extends object>(
+  delegate: (props: P, transformChildren: (transformer: ChildrenTransformer) => void) => T,
+  name = '',
+): CreatedContext<T, P> {
+  const context = React.createContext<T | undefined>(undefined);
+
+  return [
+    (): T => {
+      const c = React.useContext(context);
+      if (!c) {
+        throw new Error(`useContext를 특정 ${name ?? '특정'}Provider 내부에서 사용하지 않았습니다.`);
+      }
+      return c;
+    },
+    ({ children: _children, ...props }: { children?: ReactNode } & P): ReactElement => {
+      let children = _children;
+      const value = delegate(props as P, (transformer) => {
+        children = transformer(children);
+      });
+      return createElement(context.Provider, { value }, children);
+    },
+    context.Consumer as React.Consumer<T>,
+    (): T | undefined => {
+      return React.useContext(context);
+    },
+    context,
+  ] as const;
+}
+
+export { createCtx };

package/src/util/index.ts

@@ -0,0 +1,7 @@
+export { default as is } from './is';
+export * from './ColorUtil';
+export * from './StyleUtil';
+export * from './Px';
+export * from './EnvironmentUtil';
+export * from './createCtx';
+export * from './runAfterFlushMacroQueue';

package/src/util/is.ts

@@ -0,0 +1,78 @@
+import { Platform } from 'react-native';
+
+type Falsy = undefined | null | 0 | false | '';
+type Func = (...args: any[]) => any;
+
+const isType = {
+  number: (candidate: any): candidate is number => typeof candidate === 'number' && !isNaN(candidate),
+  string: (candidate: any): candidate is string => typeof candidate === 'string',
+  integerString: (candidate: any): candidate is string =>
+    is.notEmptyString(candidate) && is.number(Number(candidate)) && /^-?\d+$/.test(candidate),
+  numberString: (candidate: any): candidate is string =>
+    is.notEmptyString(candidate) && is.number(Number(candidate)) && /^-?\d+(\.\d+)?$/.test(candidate),
+  null: (candidate: any): candidate is null => candidate === null,
+  undefined: (candidate: any): candidate is undefined => candidate === undefined,
+  nullOrUndefined: (candidate: any): candidate is undefined | null => candidate === undefined || candidate === null,
+  falsy: <T>(candidate: T | Falsy): candidate is Falsy => !candidate,
+  truthy: <T>(candidate: T | Falsy): candidate is T => !!candidate,
+  function: <T extends Func, R>(candidate: T | R): candidate is T => typeof candidate === 'function',
+  object: (candidate: any): candidate is Record<string, unknown> => typeof candidate === 'object' && candidate !== null,
+  plainObject: (candidate: any): candidate is Record<string, unknown> => isPlainObject(candidate),
+  array: <T>(candidate: any): candidate is T[] => Array.isArray(candidate),
+  boolean: (candidate: any): candidate is boolean => typeof candidate === 'boolean',
+  promise: <T>(p: Promise<T> | any): p is Promise<T> => {
+    if (p !== null && typeof p === 'object' && typeof p.then === 'function' && typeof p.catch === 'function') {
+      return true;
+    }
+
+    return false;
+  },
+};
+
+const isCheck = {
+  notEmptyString: (candidate: any): candidate is string => isType.string(candidate) && candidate.length > 0,
+  emptyString: (candidate: any): candidate is string => isType.string(candidate) && candidate.length === 0,
+  emptyArray: (candidate: any): boolean => isType.array(candidate) && candidate.length === 0,
+  notEmptyArray: <T>(candidate: any): candidate is T[] => isType.array(candidate) && candidate.length > 0,
+};
+
+const isPlatform = {
+  iOS: (): boolean => Platform.OS === 'ios',
+  android: (): boolean => Platform.OS === 'android',
+};
+
+/**
+ * check any varaible is an javascript plain object
+ *
+ * [isPlainObject.js](https://github.com/lodash/lodash/blob/master/isPlainObject.js)
+ * @param value
+ */
+function isPlainObject(value: any): value is object {
+  if (!value || !isObject(value)) {
+    return false;
+  }
+
+  if (Object.getPrototypeOf(value) === null) {
+    return true;
+  }
+
+  let proto = value;
+
+  while (Object.getPrototypeOf(proto) !== null) {
+    proto = Object.getPrototypeOf(proto);
+  }
+
+  return Object.getPrototypeOf(value) === proto;
+
+  function isObject(any: any): any is object {
+    return typeof any === 'object';
+  }
+}
+
+const is = {
+  ...isType,
+  ...isCheck,
+  ...isPlatform,
+};
+
+export default is;

package/src/util/runAfterFlushMacroQueue.ts

@@ -0,0 +1,5 @@
+export function runAfterFlushMacroQueue(fn: Function, delayMs = 0): number {
+  return setTimeout(() => {
+    fn();
+  }, delayMs) as unknown as number;
+}