@teamturing/react-native-kit 1.1.0 → 1.2.0

package/src/component/Layout/AdaptiveWindowLayout.tsx

@@ -0,0 +1,55 @@
+import type React from 'react';
+
+import is from '../../util/is';
+
+import { useDynamicLayout } from './Layout/LayoutProvider';
+import type { WindowSizeClass } from './Layout/WindowSizeClass';
+
+export type AdaptiveLayoutProps = {
+  ifElement?: React.ReactElement | null;
+  elseElement?: React.ReactElement | null;
+  windowWidthSizeClassMin?: WindowSizeClass;
+  windowHeightSizeClassMin?: WindowSizeClass;
+  windowWidthMin?: number;
+  windowHeightMin?: number;
+};
+/**
+ * All properties indicate inclusive.
+ * for example, if windowWidthSizeClassMin is MEDIUM then MEDIUM, EXAPDNED devices will pass condition
+ * */
+const AdaptiveWindowLayout = (props: AdaptiveLayoutProps) => {
+  assertProperties(props);
+  const { windowWidthSizeClassMin, windowWidthMin, windowHeightMin, ifElement, elseElement, windowHeightSizeClassMin } =
+    props;
+  const { isWindowHeightSizeClassAtLeast, isWindowWidthSizeClassAtLeast, screenWidth, screenHeight } =
+    useDynamicLayout();
+
+  const shouldRender =
+    (windowWidthSizeClassMin ? isWindowWidthSizeClassAtLeast(windowWidthSizeClassMin) : true) &&
+    (windowHeightSizeClassMin ? isWindowHeightSizeClassAtLeast(windowHeightSizeClassMin) : true) &&
+    (is.number(windowWidthMin) ? screenWidth >= windowWidthMin : true) &&
+    (is.number(windowHeightMin) ? screenHeight >= windowHeightMin : true);
+
+  if (shouldRender) {
+    return ifElement || null;
+  } else {
+    return elseElement || null;
+  }
+};
+
+function assertProperties({
+  windowHeightSizeClassMin,
+  windowWidthSizeClassMin,
+  windowHeightMin,
+  windowWidthMin,
+}: AdaptiveLayoutProps) {
+  if (is.number(windowWidthMin) && windowWidthSizeClassMin) {
+    throw new Error('windowWidthMin not able to be set with windowWidthSizeClassMin');
+  }
+
+  if (is.number(windowHeightMin) && windowHeightSizeClassMin) {
+    throw new Error('windowHeightMin not able to be set with windowHeightSizeClassMin');
+  }
+}
+
+export { AdaptiveWindowLayout };

package/src/component/Layout/Column.tsx

@@ -0,0 +1,16 @@
+import type { SxProps } from '@react-native-styled-system/core';
+import type { PropsWithChildren } from 'react';
+import type { ViewProps } from 'react-native';
+
+import { Box } from '../Box';
+
+type Props = { reverse?: boolean } & PropsWithChildren<ViewProps & SxProps>;
+const Column = (props: Props) => {
+  return <Box flexDirection={props.reverse ? 'column-reverse' : 'column'} {...props} />;
+};
+export const ColumnCenter = (props: Props) => {
+  return <Column alignItems={'center'} {...props} />;
+};
+
+export { Column };
+export type { Props as ColumnProps };

package/src/component/Layout/FixedBottomLayout.tsx

@@ -0,0 +1,54 @@
+import { is, spacing } from '@teamturing/react-native-kit';
+import React, { useState, useEffect } from 'react';
+import { Keyboard } from 'react-native';
+
+import { Box } from '../Box';
+
+import { useDynamicLayout } from './Layout/LayoutProvider';
+
+type Props = { excludeSafeAreaBottom?: boolean };
+
+const FixedBottomLayout = ({ excludeSafeAreaBottom = false, children }: React.PropsWithChildren<Props>) => {
+  const { sfBottom, screenWidth, screenHeight } = useDynamicLayout();
+
+  const [iosKeyboardPaddingBottom, setIosKeyboardPaddingBottom] = useState(0);
+
+  /* iOS Handling */
+  useEffect(() => {
+    if (!is.iOS()) {
+      return;
+    }
+    const subscription = Keyboard.addListener(
+      'keyboardWillChangeFrame',
+      ({ endCoordinates: { screenY, width }, isEventFromThisApp }) => {
+        if (isEventFromThisApp) {
+          const isFloatingKeyboard = width < screenWidth;
+          const keyboardHeight = screenHeight - screenY;
+          if (isFloatingKeyboard) {
+            const isOpen = keyboardHeight > 0 && !(screenY === 0);
+            if (isOpen) {
+              setIosKeyboardPaddingBottom(40);
+            } else {
+              setIosKeyboardPaddingBottom(0);
+            }
+          } else {
+            const isOpen = keyboardHeight > 0;
+            setIosKeyboardPaddingBottom(!isOpen ? 0 : keyboardHeight - sfBottom);
+          }
+        }
+      },
+    );
+    return subscription.remove;
+  }, [screenHeight, screenWidth, sfBottom, iosKeyboardPaddingBottom]);
+
+  const paddingBottom = (excludeSafeAreaBottom ? 0 : sfBottom) + spacing[4] + iosKeyboardPaddingBottom;
+
+  return (
+    <Box pos={'absolute'} right={0} left={0} bottom={0} pt={12} pb={`${paddingBottom}px`} pointerEvents={'box-none'}>
+      {children}
+    </Box>
+  );
+};
+
+export { FixedBottomLayout };
+export type { Props as FixedBottomLayoutProps };

package/src/component/Layout/Gap.tsx

@@ -0,0 +1,16 @@
+import { View } from 'react-native';
+
+import { type Spacing, spacing } from '../../theme';
+
+type Props = {
+  unit: Spacing;
+};
+export const GapW = ({ unit }: Props) => {
+  return <View style={{ marginLeft: spacing[unit] }} aria-hidden />;
+};
+export const GapH = ({ unit }: Props) => {
+  return <View style={{ marginTop: spacing[unit] }} aria-hidden />;
+};
+export const GapFlex = ({ flex = 1 }: { flex?: number }) => {
+  return <View style={{ flex }} aria-hidden />;
+};

package/src/component/Layout/Grid.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import type { FlexAlignType, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+
+import { spacing as tokenSpacing, type Spacing } from '../../theme/token/spacing';
+
+import type { LayoutStyle } from './LayoutStyle';
+
+type Props = {
+  spacing?: Spacing;
+  alignItems?: FlexAlignType;
+  wrap?: boolean;
+  reverse?: boolean;
+  layout?: LayoutStyle;
+};
+
+const Grid = ({
+  children,
+  spacing = 0,
+  reverse = false,
+  alignItems = 'center',
+  wrap = true,
+  layout,
+}: React.PropsWithChildren<Props>) => {
+  const childStyle: StyleProp<ViewStyle> = {
+    paddingTop: tokenSpacing[spacing],
+    paddingHorizontal: tokenSpacing[spacing] / 2,
+  };
+
+  const childrenWithProps = React.Children.map(children, (child) => {
+    if (React.isValidElement(child)) {
+      const childProps = {
+        ...((child as React.ReactElement<UnitProps>).props || {}),
+        style: StyleSheet.flatten([childStyle, (child as React.ReactElement<UnitProps>).props.style]),
+      };
+      return React.cloneElement(child, childProps);
+    }
+    return child;
+  });
+
+  return (
+    <View style={layout}>
+      <View
+        style={{
+          flexDirection: reverse ? 'row-reverse' : 'row',
+          flexWrap: wrap && reverse ? 'wrap-reverse' : wrap ? 'wrap' : 'nowrap',
+          alignItems,
+          marginHorizontal: -tokenSpacing[spacing] / 2,
+          marginTop: -tokenSpacing[spacing],
+        }}
+      >
+        {childrenWithProps}
+      </View>
+    </View>
+  );
+};
+
+type UnitProps = {
+  size: 'min' | 'max' | number;
+  style?: StyleProp<ViewStyle>;
+};
+
+const Unit = ({ style, children, size }: React.PropsWithChildren<UnitProps>) => {
+  const percetage = Math.round((size as number) * 100 * 10000) / 10000;
+  return (
+    <View
+      style={[
+        size === 'min'
+          ? {
+              flexGrow: 0,
+              flexBasis: 'auto',
+              width: 'auto',
+            }
+          : size === 'max'
+          ? {
+              flexGrow: 1,
+              flex: 1,
+              flexBasis: 'auto',
+              width: 'auto',
+              maxWidth: '100%',
+            }
+          : {
+              flexGrow: 1,
+              flexBasis: `${percetage}%`,
+              maxWidth: `${percetage}%`,
+            },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+};
+
+Grid.Unit = Unit;
+
+export { Grid };

package/src/component/Layout/ItemList.tsx

@@ -0,0 +1,34 @@
+import { type Spacing, is, spacing } from '@teamturing/react-native-kit';
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { View } from 'react-native';
+
+type Props<T> = {
+  items: T[];
+  renderItem: (item: T, i: number) => React.ReactNode;
+  renderItemWrapper?: (children: React.ReactNode, item: T, i: number) => React.ReactNode;
+  emptyState?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  gap?: Spacing;
+};
+
+const ItemList = <T,>({
+  items,
+  renderItem,
+  renderItemWrapper = (children) => children,
+  emptyState = null,
+  gap = 0,
+  style,
+}: Props<T>) => {
+  if (is.emptyArray(items)) {
+    return emptyState as JSX.Element;
+  }
+  return (
+    <View style={[{ gap: spacing[gap] }, style]}>
+      {items.map((item, i) => renderItemWrapper(renderItem(item, i), item, i))}
+    </View>
+  );
+};
+
+export { ItemList };
+export type { Props as ItemListProps };

package/src/component/Layout/Layout/LayoutProvider.tsx

@@ -0,0 +1,139 @@
+import { createCtx, useStableCallback } from '@teamturing/react-native-kit';
+import { useCallback, useMemo, useState } from 'react';
+import { Dimensions, StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { WindowSizeClass, decideWindowWidthSizeClass, decideWindowHeightSizeClass } from './WindowSizeClass';
+import { useDynamicDimensions } from './useDynamicDimensions';
+
+export const [useDynamicLayout, LayoutProvider] = createCtx(
+  (
+    { useSafeAreaInsetsHook = useSafeAreaInsets }: { useSafeAreaInsetsHook?: typeof useSafeAreaInsets },
+    transformChildren,
+  ) => {
+    const [windowWidth, setWindowWidth] = useState(Math.ceil(Dimensions.get('window').width));
+    const [windowHeight, setWindowHeight] = useState(Math.ceil(Dimensions.get('window').height));
+    const windowShortLen = Math.min(windowWidth, windowHeight);
+    const windowLongLen = Math.max(windowWidth, windowHeight);
+    const _insets: { top: number; bottom: number; left: number; right: number } = useSafeAreaInsetsHook();
+    const insets = {
+      top: Math.ceil(_insets.top),
+      bottom: Math.ceil(_insets.bottom),
+      left: Math.ceil(_insets.left),
+      right: Math.ceil(_insets.right),
+    } as const;
+
+    const windowWidthSizeClass: WindowSizeClass = useMemo(() => decideWindowWidthSizeClass(windowWidth), [windowWidth]);
+    const windowHeightSizeClass: WindowSizeClass = useMemo(
+      () => decideWindowHeightSizeClass(windowHeight),
+      [windowHeight],
+    );
+    const isWindowWidthSizeClassAtLeast = useCallback(
+      (sizeClass: WindowSizeClass) => windowWidthSizeClass >= sizeClass,
+      [windowWidthSizeClass],
+    );
+    const isWindowHeightSizeClassAtLeast = useCallback(
+      (sizeClass: WindowSizeClass) => windowHeightSizeClass >= sizeClass,
+      [windowHeightSizeClass],
+    );
+
+    const isWidthAtLeastMedium = isWindowWidthSizeClassAtLeast(WindowSizeClass.MEDIUM);
+    const isWidthAtLeastExpanded = isWindowWidthSizeClassAtLeast(WindowSizeClass.EXPANDED);
+
+    const isHeightAtLeastMedium = isWindowHeightSizeClassAtLeast(WindowSizeClass.MEDIUM);
+    const isHeightAtLeastExpanded = isWindowHeightSizeClassAtLeast(WindowSizeClass.EXPANDED);
+
+    const dimensions = useDynamicDimensions({
+      screenShortLen: windowShortLen,
+      safeAreaBottom: insets.bottom,
+      screenWidth: windowWidth,
+      windowWidthSizeClass,
+      windowHeightSizeClass,
+    });
+
+    const updateScreenSizesBeforeRotation = useCallback(
+      (orientation: 'portrait' | 'landscape') => {
+        if (orientation === 'portrait') {
+          setWindowWidth(windowShortLen);
+          setWindowHeight(windowLongLen);
+        } else if (orientation === 'landscape') {
+          setWindowWidth(windowLongLen);
+          setWindowHeight(windowShortLen);
+        }
+      },
+      [windowLongLen, windowShortLen],
+    );
+
+    const localImageDimensionProps = useStableCallback(
+      (
+        imageWidth: number,
+        imageHeight: number,
+        { containerWidth }: { containerWidth: 'full-width' | 'padding-width' | number } = {
+          containerWidth: 'padding-width',
+        },
+      ) => {
+        if (containerWidth === 'full-width') {
+          const w = Math.min(windowWidth, imageWidth);
+          return {
+            width: w,
+            height: (w * imageHeight) / imageWidth,
+          };
+        } else if (containerWidth === 'padding-width') {
+          const w = Math.min(windowWidth - 2 * dimensions.sidePadding, imageWidth);
+          return {
+            width: w,
+            height: (w * imageHeight) / imageWidth,
+          };
+        } else {
+          const w = Math.min(containerWidth, imageWidth);
+          return {
+            width: w,
+            height: (w * imageHeight) / imageWidth,
+          };
+        }
+      },
+    );
+
+    transformChildren((children) => (
+      <View
+        testID={'LayoutProvider'}
+        style={StyleSheet.absoluteFill}
+        onLayout={({
+          nativeEvent: {
+            layout: { width, height },
+          },
+        }) => {
+          setWindowWidth(Math.ceil(width));
+          setWindowHeight(Math.ceil(height));
+        }}
+      >
+        {children}
+      </View>
+    ));
+
+    return {
+      ...dimensions,
+      screenHeight: windowHeight,
+      screenWidth: windowWidth,
+      screenWidthWithPadding: windowWidth - 2 * dimensions.sidePadding,
+      screenShortLen: windowShortLen,
+      screenLongLen: windowLongLen,
+      updateScreenSizesBeforeRotation,
+      safeAreaInsets: insets,
+      sfTop: insets.top,
+      sfLeft: insets.left,
+      sfRight: insets.right,
+      sfBottom: insets.bottom,
+      windowWidthSizeClass,
+      windowHeightSizeClass,
+      isWindowHeightSizeClassAtLeast,
+      isWidthAtLeastMedium,
+      isWidthAtLeastExpanded,
+      isHeightAtLeastMedium,
+      isHeightAtLeastExpanded,
+      isWindowWidthSizeClassAtLeast,
+      localImageDimensionProps,
+    };
+  },
+  'Layout',
+);

package/src/component/Layout/Layout/WindowSizeClass.ts

@@ -0,0 +1,51 @@
+import { is } from '@teamturing/react-native-kit';
+
+export enum WindowSizeClass {
+  COMPACT = 1,
+  MEDIUM = 2,
+  EXPANDED = 3,
+}
+export function createWindowSizeClassRecord<T>({ expanded, medium, compact }: { compact: T; medium: T; expanded: T }) {
+  return {
+    [WindowSizeClass.COMPACT]: compact,
+    [WindowSizeClass.MEDIUM]: medium,
+    [WindowSizeClass.EXPANDED]: expanded,
+  };
+}
+
+export function createWindowSizeClassIntRecord({
+  compact,
+  medium,
+  expanded,
+  fallback = 0,
+}: {
+  compact?: number;
+  medium?: number;
+  expanded?: number;
+  fallback?: number;
+}) {
+  return createWindowSizeClassRecord({
+    compact: is.number(compact) ? compact : fallback,
+    medium: is.number(medium) ? medium : fallback,
+    expanded: is.number(expanded) ? expanded : fallback,
+  });
+}
+
+export function decideWindowWidthSizeClass(windowWidth: number): WindowSizeClass {
+  if (windowWidth < 600) {
+    return WindowSizeClass.COMPACT;
+  }
+  if (windowWidth < 840) {
+    return WindowSizeClass.MEDIUM;
+  }
+  return WindowSizeClass.EXPANDED;
+}
+export function decideWindowHeightSizeClass(windowHeight: number): WindowSizeClass {
+  if (windowHeight < 480) {
+    return WindowSizeClass.COMPACT;
+  }
+  if (windowHeight < 900) {
+    return WindowSizeClass.MEDIUM;
+  }
+  return WindowSizeClass.EXPANDED;
+}

package/src/component/Layout/Layout/index.ts

@@ -0,0 +1,3 @@
+export * from './LayoutProvider';
+export * from './useDynamicDimensions';
+export * from './WindowSizeClass';

package/src/component/Layout/Layout/useDynamicDimensions.ts

@@ -0,0 +1,28 @@
+import { spacing } from '@teamturing/react-native-kit';
+import { useMemo } from 'react';
+
+import type { WindowSizeClass } from './WindowSizeClass';
+import { createWindowSizeClassIntRecord } from './WindowSizeClass';
+
+export function useDynamicDimensions({
+  windowWidthSizeClass,
+  screenWidth,
+}: {
+  windowWidthSizeClass: WindowSizeClass;
+  windowHeightSizeClass: WindowSizeClass;
+  screenShortLen: number;
+  safeAreaBottom: number;
+  screenWidth: number;
+}) {
+  return useMemo(() => {
+    const sidePadding = createWindowSizeClassIntRecord({
+      compact: spacing[5],
+      medium: spacing[20],
+      expanded: spacing[32],
+    })[windowWidthSizeClass];
+    return {
+      sidePadding,
+      dialogWidth: Math.min(screenWidth * 0.85, 320),
+    };
+  }, [windowWidthSizeClass, screenWidth]);
+}

package/src/component/Layout/LayoutStyle.ts

@@ -0,0 +1,28 @@
+import type { FlexStyle } from 'react-native';
+
+export type LayoutStyle = Pick<
+  FlexStyle,
+  | 'flex'
+  | 'padding'
+  | 'paddingTop'
+  | 'paddingRight'
+  | 'paddingBottom'
+  | 'paddingLeft'
+  | 'paddingVertical'
+  | 'paddingHorizontal'
+  | 'position'
+  | 'top'
+  | 'right'
+  | 'bottom'
+  | 'left'
+  | 'margin'
+  | 'marginTop'
+  | 'marginRight'
+  | 'marginBottom'
+  | 'marginLeft'
+  | 'marginHorizontal'
+  | 'marginVertical'
+  | 'alignSelf'
+>;
+
+export type FlexibleLayoutStyle = LayoutStyle & { flex?: number };

package/src/component/Layout/Row.tsx

@@ -0,0 +1,15 @@
+import type { SxProps } from '@react-native-styled-system/core';
+import type { PropsWithChildren } from 'react';
+import type { ViewProps } from 'react-native';
+
+import { Box } from '../Box';
+
+type Props = { reverse?: boolean } & PropsWithChildren<ViewProps & SxProps>;
+const Row = (props: Props) => {
+  return <Box flexDirection={props.reverse ? 'row-reverse' : 'row'} {...props} />;
+};
+export const RowCenter = (props: Props) => {
+  return <Row alignItems={'center'} {...props} />;
+};
+
+export { Row };

package/src/component/Layout/SectionLayout/Section.tsx

@@ -0,0 +1,23 @@
+import type { SxProps } from '@react-native-styled-system/core';
+import { useSx } from '@react-native-styled-system/core';
+import React from 'react';
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import { View } from 'react-native';
+
+type Props = {
+  style?: StyleProp<ViewStyle>;
+} & Pick<ViewProps, 'onLayout'> &
+  SxProps;
+
+const Section = (props: React.PropsWithChildren<Props>) => {
+  const { children, onLayout } = props;
+  const { getStyle } = useSx(props, { fallback: { bg: 'white' } });
+  return (
+    <View style={getStyle()} {...{ onLayout }}>
+      {children}
+    </View>
+  );
+};
+
+export default Section;
+export type { Props as SectionProps };

package/src/component/Layout/SectionLayout/SectionLayout.tsx

@@ -0,0 +1,46 @@
+import type { SxProps } from '@react-native-styled-system/core';
+import { useSx } from '@react-native-styled-system/core';
+import { palette, spacing } from '@teamturing/react-native-kit';
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+
+import { type ColumnProps, Column } from '../Column';
+
+import type { SectionProps } from './Section';
+
+type Props = {
+  style?: StyleProp<ViewStyle>;
+} & SxProps;
+
+const SectionLayout = (props: React.PropsWithChildren<Props>) => {
+  const { getStyle } = useSx(props, { fallback: { bg: 'gray100' } });
+  const { children } = props;
+
+  const childSectionStyle: ViewStyle = { marginTop: spacing[4] };
+  let childSectionStyleCanBeInjected = false;
+
+  const childrenWithProps = React.Children.map(children, (child, i) => {
+    if (React.isValidElement(child)) {
+      const childProps = {
+        ...((child as React.ReactElement<SectionProps>).props || {}),
+        style: StyleSheet.flatten([
+          i !== 0 && childSectionStyleCanBeInjected ? childSectionStyle : {},
+          (child as React.ReactElement<SectionProps>).props.style,
+        ]),
+      };
+
+      childSectionStyleCanBeInjected = true;
+      return React.cloneElement(child, childProps);
+    }
+    return child;
+  });
+
+  return <Column style={getStyle()}>{childrenWithProps}</Column>;
+};
+
+export const SectionDivider = (props: ColumnProps) => (
+  <Column {...props} style={[props?.style, { height: spacing[4], backgroundColor: palette.gray100 }]} />
+);
+
+export default SectionLayout;

package/src/component/Layout/SectionLayout/index.ts

@@ -0,0 +1,4 @@
+import Section from './Section';
+import SectionLayout from './SectionLayout';
+
+export { Section, SectionLayout };

package/src/component/Layout/SingleOrTwoColumnCellLayout.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { View } from 'react-native';
+
+type Props = React.PropsWithChildren<{
+  columnCount: 1 | 2;
+  horizontalGap?: number;
+  marginHorizontal?: number;
+  itemIndex: number;
+  isLastItem: boolean;
+  addDummyViewIfLastProblemRightEmpty?: boolean;
+}>;
+const SingleOrTwoColumnCellLayout = ({
+  columnCount,
+  horizontalGap = 0,
+  children,
+  itemIndex,
+  marginHorizontal = 0,
+  isLastItem,
+  addDummyViewIfLastProblemRightEmpty = true,
+}: Props) => {
+  return (
+    <>
+      <View
+        style={{
+          flex: 1,
+          marginRight: columnCount === 2 && itemIndex % 2 === 0 ? horizontalGap : marginHorizontal,
+          justifyContent: 'flex-end',
+          marginLeft: columnCount === 1 || itemIndex % 2 === 0 ? marginHorizontal : 0,
+        }}
+      >
+        {children}
+      </View>
+      {isLastItem && addDummyViewIfLastProblemRightEmpty && itemIndex % 2 === 0 && (
+        <View style={{ flex: 1, marginRight: marginHorizontal }} />
+      )}
+    </>
+  );
+};
+
+export { SingleOrTwoColumnCellLayout };