@teamturing/react-native-kit 0.1.0 → 1.2.0

package/src/hook/useDialogHandler.tsx

@@ -0,0 +1,33 @@
+import type { Ref } from 'react';
+import { useRef } from 'react';
+
+import type { DialogRef, DialogWithParamRef } from '../component/dialog/base/Dialog';
+
+import { useStableCallback } from './useStableCallback';
+
+export const useDialogHandler = () => {
+  const dialogRef = useRef<DialogRef>(null);
+  const open = useStableCallback(() => dialogRef.current?.open());
+  const close = useStableCallback(() => dialogRef.current?.close());
+  return {
+    dialogRef,
+    open,
+    close,
+  };
+};
+
+export type UseDialogWithParamsHandler<Params> = {
+  dialogRef: Ref<DialogWithParamRef<Params>>;
+  open: (params: Params) => void;
+  close: () => void;
+};
+export const useDialogWithParamsHandler = <Params,>(): UseDialogWithParamsHandler<Params> => {
+  const dialogRef = useRef<DialogWithParamRef<Params>>(null);
+  const open = useStableCallback((params: Params) => dialogRef.current?.open(params));
+  const close = useStableCallback(() => dialogRef.current?.close());
+  return {
+    dialogRef,
+    open,
+    close,
+  };
+};

package/src/hook/useFloatingKeyboard.ts

@@ -0,0 +1,30 @@
+import { is } from '@teamturing/react-native-kit';
+import { useEffect, useState } from 'react';
+import type { KeyboardEvent } from 'react-native';
+import { Keyboard } from 'react-native';
+
+import { useDynamicLayout } from '../component/Layout/Layout/LayoutProvider';
+
+/* Return true if keyboard width is not same with screen width */
+export function useIsIPadFloatingKeyboard() {
+  const { screenWidth } = useDynamicLayout();
+
+  const [floating, setFloating] = useState(false);
+
+  useEffect(() => {
+    if (!is.iOS()) {
+      return;
+    }
+
+    const onKeyboardWillChangeFrame = (event: KeyboardEvent) => {
+      setFloating(event.endCoordinates.width < screenWidth);
+    };
+
+    const subscription = Keyboard.addListener('keyboardWillChangeFrame', onKeyboardWillChangeFrame);
+    return () => {
+      subscription.remove();
+    };
+  }, [screenWidth]);
+
+  return floating;
+}

package/src/hook/useIntervalCallback.tsx

@@ -0,0 +1,19 @@
+import { useRef, useEffect } from 'react';
+
+import { useMount } from './useMount';
+import { setIntervalWithTimeout } from '@mj-studio/js-util';
+
+export function useIntervalCallback(callback: () => void, intervalSec = 1, doImmediately = false) {
+  const ref = useRef<Function>();
+  ref.current = callback;
+
+  useMount(() => {
+    if (doImmediately) {
+      ref.current?.();
+    }
+  });
+
+  useEffect(() => {
+    return setIntervalWithTimeout(() => ref.current?.(), intervalSec * 1000);
+  }, [intervalSec]);
+}

package/src/hook/useKeyboard.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+import { type KeyboardEventListener, Platform, Keyboard } from 'react-native';
+
+export function useKeyboard() {
+  const [shown, setShown] = useState(false);
+  const [keyboardHeight, setKeyboardHeight] = useState<number>(0);
+
+  const handleKeyboardDidShow: KeyboardEventListener = (e) => {
+    setShown(true);
+    setKeyboardHeight(e.endCoordinates.height);
+  };
+  const handleKeyboardDidHide: KeyboardEventListener = (e) => {
+    setShown(false);
+    if (e) {
+    } else {
+      setKeyboardHeight(0);
+    }
+  };
+
+  useEffect(() => {
+    const sub2 = Keyboard.addListener('keyboardDidShow', handleKeyboardDidShow);
+    const sub4 = Keyboard.addListener('keyboardDidHide', handleKeyboardDidHide);
+
+    return () => {
+      sub2.remove();
+      sub4.remove();
+    };
+  }, []);
+
+  return {
+    keyboardShown: shown,
+    keyboardHeight,
+    iosAdditionalBottomPadding: Platform.OS === 'ios' && shown ? keyboardHeight : 0,
+  };
+}

package/src/hook/useMount.ts

@@ -0,0 +1,19 @@
+import type { EffectCallback } from 'react';
+import { useEffect } from 'react';
+
+/**
+ * This is a kind of react hooks for initial configuration in Functional React Component
+ * It is equivalent with componentDidMount() in class React Component
+ * This hooks doesn't accept function returning function like useEffect for preventing re-invoke during componentWillUnmount
+ *
+ * @param callback function will be invoked during componentDidMount
+ * @author MJ
+ */
+const useMount = (callback: EffectCallback): void => {
+  useEffect(() => {
+    callback();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};
+
+export { useMount };

package/src/hook/useRefValue.ts

@@ -0,0 +1,6 @@
+import { useState } from 'react';
+
+export function useRefValue<T>(init: () => T): T {
+  const [ref] = useState(() => init());
+  return ref;
+}

package/src/hook/useScrollViewOnEndReachedConfig.ts

@@ -0,0 +1,42 @@
+import { useRef } from 'react';
+import { type NativeScrollEvent, type NativeSyntheticEvent, Platform } from 'react-native';
+
+import { useStableCallback } from './useStableCallback';
+
+export const useScrollViewOnEndReachedConfig = ({
+  disabled,
+  onEndReached: _onEndReached,
+}: {
+  disabled?: boolean;
+  onEndReached?: () => void;
+}): {
+  onEndReached: () => void;
+  onMomentumScrollBegin: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  onEndReachedThreshold: number;
+  scrollEventThrottle: number;
+} => {
+  const isScrollStartedToBottomDirection = useRef(false);
+  const lastLoadUnixMs = useRef(0);
+  const onEndReached = useStableCallback(async () => {
+    if (
+      !disabled &&
+      (Platform.OS === 'web' ? true : isScrollStartedToBottomDirection.current) &&
+      Date.now() - lastLoadUnixMs.current > 500
+    ) {
+      isScrollStartedToBottomDirection.current = false;
+      lastLoadUnixMs.current = Date.now();
+      _onEndReached?.();
+    }
+  });
+  const onMomentumScrollBegin = useStableCallback(() => {
+    if (!disabled) {
+      isScrollStartedToBottomDirection.current = true;
+    }
+  });
+  return {
+    onEndReached,
+    onMomentumScrollBegin,
+    onEndReachedThreshold: Platform.OS === 'web' ? 0.2 : 0.1,
+    scrollEventThrottle: 16,
+  };
+};

package/src/hook/useStableCallback.ts

@@ -0,0 +1,28 @@
+/**
+ * Returns a stabilized callback reference which delegates to the most recent unstable callback
+ *
+ * This is similar to useCallback, but allows unstableCallback to access the most recent values from the closure.
+ * This can be useful if the callback is being stored long term, such as in the Transition Hook registry.
+ *
+ * Example:
+ * ```jsx
+ * const latestValueFromProps = props.value
+ * const transitionHook = useStableCallback(() => console.log(latestValueFromProps));
+ * useEffect(() => {
+ *   const deregister = transitionService.onBefore({ exiting: 'someState' }, transitionHook);
+ *   return () => deregister();
+ * }, []);
+ * ```
+ */
+import { useCallback, useRef } from 'react';
+
+export function useStableCallback<T extends Function>(unstableCallback: T): T {
+  const ref = useRef<T>(unstableCallback);
+  ref.current = unstableCallback;
+  const callback = useCallback(function () {
+    // @ts-ignore
+    // eslint-disable-next-line prefer-rest-params
+    return ref.current && ref.current.apply(this, arguments);
+  }, []);
+  return callback as unknown as T;
+}

package/src/hook/useTimeoutHandler.test.ts

@@ -0,0 +1,110 @@
+import { useTimeoutHandler, useTimeoutHandlers } from '@teamturing/react-native-kit';
+import { renderHook } from '@testing-library/react-native';
+
+import { waitRealTime } from '../../test/util/RealTimerUtil';
+
+jest.useRealTimers();
+describe('useTimeoutHandler', () => {
+  it('callback is invoked before unmount', async () => {
+    const callback = jest.fn();
+
+    const {
+      result: { current },
+    } = renderHook(() => useTimeoutHandler());
+
+    current.current = setTimeout(callback, 50);
+    await waitRealTime(100);
+
+    expect(callback).toBeCalled();
+  });
+
+  it('callback is not invoked after unmount', async () => {
+    const callback = jest.fn();
+
+    const {
+      result: { current },
+      unmount,
+    } = renderHook(() => useTimeoutHandler());
+
+    current.current = setTimeout(callback, 50);
+    unmount();
+    await waitRealTime(100);
+
+    expect(callback).not.toBeCalled();
+  });
+});
+
+describe('useTimeoutHandlers', () => {
+  it('callback should be cleared automatically', async () => {
+    const callback = jest.fn();
+
+    const {
+      result: {
+        current: { clearTimerAtUnmount },
+      },
+      unmount,
+    } = renderHook(() => useTimeoutHandlers());
+
+    clearTimerAtUnmount(setTimeout(callback, 50));
+
+    unmount();
+    await waitRealTime(100);
+
+    expect(callback).not.toBeCalled();
+  });
+
+  it('clear pending callbacks using withClear option', async () => {
+    const callback1 = jest.fn();
+    const callback2 = jest.fn();
+
+    const {
+      result: {
+        current: { clearTimerAtUnmount },
+      },
+    } = renderHook(() => useTimeoutHandlers());
+
+    clearTimerAtUnmount(setTimeout(callback1, 50));
+    await waitRealTime(25);
+    clearTimerAtUnmount(setTimeout(callback2, 50), { withClear: true });
+
+    await waitRealTime(100);
+
+    expect(callback1).not.toBeCalled();
+    expect(callback2).toBeCalled();
+  });
+
+  it('setAutoClearTimeout', async () => {
+    const callback = jest.fn();
+
+    const {
+      result: {
+        current: { setAutoClearTimeout },
+      },
+      unmount,
+    } = renderHook(() => useTimeoutHandlers());
+
+    setAutoClearTimeout(callback, 50);
+    unmount();
+    await waitRealTime(100);
+
+    expect(callback).not.toBeCalled();
+  });
+
+  it('setAutoClearTimeout using withClear', async () => {
+    const callback1 = jest.fn();
+    const callback2 = jest.fn();
+
+    const {
+      result: {
+        current: { setAutoClearTimeout },
+      },
+    } = renderHook(() => useTimeoutHandlers());
+
+    setAutoClearTimeout(callback1, 50);
+    setAutoClearTimeout(callback2, 50, { withClear: true });
+    await waitRealTime(100);
+
+    expect(callback1).not.toBeCalled();
+    expect(callback2).toBeCalled();
+  });
+});

package/src/hook/useTimeoutHandler.ts

@@ -0,0 +1,50 @@
+import { useRef } from 'react';
+
+import { useStableCallback } from './useStableCallback';
+import { useUnmount } from './useUnmount';
+
+function useTimeoutHandler() {
+  const handler = useRef<any>(-1);
+
+  useUnmount(() => {
+    clearTimeout(handler.current);
+  });
+
+  return handler;
+}
+
+function useTimeoutHandlers() {
+  const handler = useRef<number[]>([]);
+
+  useUnmount(() => {
+    handler.current.forEach(clearTimeout);
+  });
+
+  const clearAllTimers = useStableCallback(() => {
+    handler.current.forEach(clearTimeout);
+    handler.current = [];
+  });
+
+  const clearTimerAtUnmount = useStableCallback(
+    (id: any, { withClear }: { withClear?: boolean } = { withClear: false }) => {
+      if (withClear) {
+        clearAllTimers();
+      }
+      handler.current.push(id);
+      return id;
+    },
+  );
+
+  const setAutoClearTimeout = useStableCallback(
+    (callback: () => void, ms: number, { withClear }: { withClear?: boolean } = { withClear: false }) => {
+      if (withClear) {
+        clearAllTimers();
+      }
+      return clearTimerAtUnmount(setTimeout(callback, ms));
+    },
+  );
+
+  return { clearTimerAtUnmount, clearAllTimers, setAutoClearTimeout };
+}
+
+export { useTimeoutHandler, useTimeoutHandlers };

package/src/hook/useUnmount.ts

@@ -0,0 +1,21 @@
+import type { EffectCallback } from 'react';
+import { useEffect, useRef } from 'react';
+
+/**
+ * This is a kind of react hooks for cleanup resources when useEffect clean up phase like componentWillUnmount.
+ *
+ * @param callback function will be invoked during componentWillUnmount.
+ * @see useComponentDidMount
+ * @author MJ
+ */
+const useUnmount = (callback: EffectCallback) => {
+  const callbackRef = useRef<() => void>();
+  callbackRef.current = callback;
+  useEffect(() => {
+    return () => {
+      callbackRef.current?.();
+    };
+  }, []);
+};
+
+export { useUnmount };

package/src/index.tsx

@@ -1,3 +1,4 @@
-export function multiply(a: number, b: number): Promise<number> {
-  return Promise.resolve(a * b);
-}
+export * from './hook';
+export * from './theme';
+export * from './component';
+export * from './util';

package/src/theme/StyledSystemTheme.ts

@@ -0,0 +1,37 @@
+import type { ThemedDict } from '@react-native-styled-system/core';
+
+import { palette, spacing } from './token';
+
+const safeAreaMock = {
+  sfTop: 0 /* injected */,
+  sfRight: 0 /* injected */,
+  sfBottom: 0 /* injected */,
+  sfLeft: 0 /* injected */,
+};
+
+const screenDimensionMock = {
+  screenWidth: 0 /* injected */,
+  screenWidthWithPadding: 0 /* injected */,
+  screenHeight: 0 /* injected */,
+};
+
+const StyledSystemAppTheme: ThemedDict = {
+  colors: palette,
+  space: {
+    ...spacing,
+    ...screenDimensionMock,
+    ...safeAreaMock,
+    pageScrollBottom: 128,
+    sidePadding: 0 /* injected */,
+  },
+  sizes: { ...spacing, ...screenDimensionMock, ...safeAreaMock },
+  radii: {
+    // Don't add numeric value like `1: 4`. We use radius with numeric literal as itself
+    bottomSheet: 40,
+    dialog: 20,
+  },
+  typography: {},
+};
+
+export { StyledSystemAppTheme };
+export default StyledSystemAppTheme;

package/src/theme/index.ts

@@ -0,0 +1,4 @@
+import { StyledSystemAppTheme } from './StyledSystemTheme';
+
+export * from './token';
+export { StyledSystemAppTheme };

package/src/theme/token/gradient.ts

@@ -0,0 +1,103 @@
+export type GradientProps = {
+  colors: string[];
+  locations: number[];
+  start?: { x: number; y: number };
+  end?: { x: number; y: number };
+};
+
+const gradient: Record<
+  | 'gradient1'
+  | 'gradient2'
+  | 'gradient3'
+  | 'gradient4'
+  | 'gradient5'
+  | 'shortsPlayerTop'
+  | 'shortsPlayeBottomPlaybackHidden'
+  | 'shortsPlayerBottomPlaybackShowing'
+  | 'problemSolveBottomSheet'
+  | 'fkffkf'
+  | 'friendInviteTab'
+  | 'gold',
+  GradientProps
+> = {
+  gradient1: {
+    colors: ['#03216D', '#3F28D1', '#F14BFF'],
+    locations: [0, 0.39, 1],
+    start: { x: 0, y: 0 },
+    end: { x: 1, y: 1 },
+  },
+  gradient2: {
+    colors: ['#8155FD', '#3624FF'],
+    locations: [0.08, 0.92],
+    start: { x: 0, y: 0 },
+    end: { x: 1, y: 1 },
+  },
+  gradient3: {
+    colors: ['#0E0E0E', '#595959'],
+    locations: [0.1, 0.9],
+    start: { x: 0, y: 0 },
+    end: { x: 1, y: 1 },
+  },
+  gradient4: {
+    colors: ['#8E6CF0', '#CF75F3'],
+    locations: [0, 1],
+    start: { x: 0, y: 0 },
+    end: { x: 1, y: 1 },
+  },
+  gradient5: {
+    colors: ['#C6B5F6', '#C6B5F6'],
+    locations: [0, 1],
+    start: { x: 0, y: 0 },
+    end: { x: 1, y: 1 },
+  },
+
+  shortsPlayerTop: {
+    colors: ['#00000066', '#0000001A', '#FFFFFF00'],
+    locations: [0, 0.5, 1],
+    start: { x: 0, y: 0 },
+    end: { x: 0, y: 1 },
+  },
+  shortsPlayeBottomPlaybackHidden: {
+    colors: ['#00000000', '#0000001A', '#00000066'],
+    locations: [0, 0.5, 1],
+    start: { x: 0, y: 0 },
+    end: { x: 0, y: 1 },
+  },
+  shortsPlayerBottomPlaybackShowing: {
+    colors: ['#00000000', '#0000004D', '#00000099'],
+    locations: [0, 0.54, 1],
+    start: { x: 0, y: 0 },
+    end: { x: 0, y: 1 },
+  },
+
+  problemSolveBottomSheet: {
+    colors: ['#00000000', '#00000044'],
+    locations: [0, 1],
+    start: { x: 0, y: 0 },
+    end: { x: 0, y: 1 },
+  },
+
+  fkffkf: {
+    colors: ['#273863', '#372763'],
+    locations: [0, 1],
+    start: { x: 0, y: 0 },
+    end: { x: 0, y: 1 },
+  },
+
+  friendInviteTab: {
+    colors: ['#CE99F1', '#F9CFAF', '#F9F5DC'],
+    locations: [0, 0.55, 1],
+    start: { x: 0, y: 0 },
+    end: { x: 1, y: 0 },
+  },
+
+  gold: {
+    colors: ['#FEE68F', '#FFFBEF', '#FEEDB2', '#FFC85E'],
+    locations: [0.26, 0.39, 0.51, 0.79],
+    start: { x: 0, y: 0 },
+    end: { x: 1, y: 1 },
+  },
+};
+export type GradientType = keyof typeof gradient;
+
+export { gradient };

package/src/theme/token/index.ts

@@ -0,0 +1,3 @@
+export * from './gradient';
+export * from './palette';
+export * from './spacing';

package/src/theme/token/palette.ts

@@ -0,0 +1,60 @@
+const palette = {
+  white: '#FFFFFF',
+  black: '#000000',
+  transparent: '#FFFFFF00',
+  gray50: '#F9FAFB',
+  gray100: '#F3F4F6',
+  gray200: '#E5E7EB',
+  gray300: '#D1D5DB',
+  gray400: '#8D94A0',
+  gray500: '#7A828D',
+  gray600: '#6F7680',
+  gray700: '#575C64',
+  gray800: '#43484E',
+  gray900: '#33373B',
+  violet50: '#F3EFFD',
+  violet100: '#E8E1FB',
+  violet200: '#D9CDF9',
+  violet300: '#C6B5F6',
+  violet400: '#9C7EEF',
+  violet500: '#835EEB',
+  violet600: '#7756D6',
+  violet700: '#5D43A7',
+  violet800: '#483481',
+  violet900: '#372763',
+  green50: '#E9FAF6',
+  green100: '#BAEFE2',
+  green200: '#98E8D4',
+  green300: '#69DDC0',
+  green400: '#4CD6B4',
+  green500: '#1FCCA1',
+  green600: '#169172',
+  yellow50: '#FFF9E6',
+  yellow100: '#FFECB2',
+  yellow200: '#FFE28D',
+  yellow300: '#FFD559',
+  yellow400: '#FFCD39',
+  yellow500: '#FFC107',
+  yellow600: '#E8B006',
+  red50: '#FEE9EB',
+  red100: '#FBBCC0',
+  red200: '#F99CA2',
+  red300: '#F66E78',
+  red400: '#F5525D',
+  red500: '#F22735',
+  red600: '#DC2330',
+  blue50: '#edf2fd',
+  blue100: '#c6d8fa',
+  blue200: '#abc5f7',
+  blue300: '#84aaf4',
+  blue400: '#6d99f1',
+  blue500: '#4880ee',
+  blue600: '#4274d9',
+  blue700: '#335ba9',
+  blue800: '#284683',
+  blue900: '#1e3664',
+} as const;
+
+export type PaletteColor = keyof typeof palette;
+
+export { palette };

package/src/theme/token/spacing.ts

@@ -0,0 +1,35 @@
+const unit = 4;
+const spacing = {
+  0: 0 * unit, // 0px
+  px: 1, // 1px
+  0.5: 0.5 * unit, // 2px
+  1: 1 * unit, // 4px
+  2: 2 * unit, // 8px
+  3: 3 * unit, // 12px
+  4: 4 * unit, // 16px
+  5: 5 * unit, // 20px
+  6: 6 * unit, // 24px
+  7: 7 * unit, // 28px
+  8: 8 * unit, // 32px
+  9: 9 * unit, // 36px
+  10: 10 * unit, // 40px
+  11: 11 * unit, // 44px
+  12: 12 * unit, // 48px
+  13: 13 * unit, // 52px
+  14: 14 * unit, // 56px
+  15: 15 * unit, // 60px
+  16: 16 * unit, // 64px
+  17: 17 * unit, // 68px
+  18: 18 * unit, // 72px
+  19: 19 * unit, // 76px
+  20: 20 * unit, // 80px
+  24: 24 * unit, // 96px
+  28: 28 * unit, // 112px
+  30: 30 * unit, // 120px
+  32: 32 * unit, // 128px
+  40: 40 * unit, // 160px
+  48: 48 * unit, // 192px
+} as const;
+export type Spacing = keyof typeof spacing;
+
+export { spacing };

package/src/type/environment.d.ts

@@ -0,0 +1,28 @@
+declare module '*.svg' {
+  import React from 'react';
+  import { SvgProps } from 'react-native-svg';
+  const content: React.FC<SvgProps>;
+  export default content;
+}
+
+declare module '*.json' {
+  const content;
+  export default content;
+}
+
+declare module '*.png' {
+  import { ImageRequireSource } from 'react-native';
+  const content: ImageRequireSource;
+  export default content;
+}
+
+declare module '*.jpg' {
+  import { ImageRequireSource } from 'react-native';
+  const content: ImageRequireSource;
+  export default content;
+}
+
+declare module '*.html' {
+  const content: string;
+  export default content;
+}