@estuary-solutions/rn-core-ui 0.0.5 → 0.1.0

package/src/Texts/Text.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import {
+  Text as RNText,
+  TextProps as RNTextProps,
+  TextStyle,
+  StyleProp,
+} from 'react-native';
+
+import type { ResolvedTheme } from '../theme/types';
+import { useTheme } from '../theme/useTheme';
+
+/** Typography roles defined by the theme; kept in sync with tokens/semantic/typography.json by a test. */
+export const TEXT_VARIANTS = [
+  'display',
+  'h1',
+  'h2',
+  'h3',
+  'title',
+  'bodyLg',
+  'body',
+  'bodySm',
+  'label',
+  'caption',
+] as const satisfies readonly Exclude<
+  keyof ResolvedTheme['typography'],
+  'fontFamily' | 'maxFontSizeMultiplier'
+>[];
+export type TextVariant = (typeof TEXT_VARIANTS)[number];
+
+export interface TextProps extends RNTextProps {
+  /** Typography role from the theme; defaults to `body`. */
+  variant?: TextVariant;
+  style?: StyleProp<TextStyle>;
+  /** Text colour; defaults to `color.text.primary`. */
+  color?: string;
+  bold?: boolean;
+  italic?: boolean;
+  light?: boolean;
+  medium?: boolean;
+  semiBold?: boolean;
+  /** Font size override in dp. */
+  size?: number;
+  thin?: boolean;
+  children?: React.ReactNode;
+}
+
+type WeightFlags = Pick<
+  TextProps,
+  'bold' | 'semiBold' | 'medium' | 'light' | 'thin'
+>;
+
+const resolveWeight = ({
+  bold,
+  semiBold,
+  medium,
+  light,
+  thin,
+}: WeightFlags): TextStyle['fontWeight'] | undefined => {
+  if (thin) {
+    return '100';
+  }
+  if (light) {
+    return '300';
+  }
+  if (medium) {
+    return '500';
+  }
+  if (semiBold) {
+    return '600';
+  }
+  if (bold) {
+    return '700';
+  }
+  return undefined;
+};
+
+/**
+ * Themed text. Picks a typography role with `variant`; `size`, the weight flags,
+ * `color` and `style` refine it. OS font scaling is capped by the theme.
+ */
+const Text: React.FC<TextProps> = ({
+  variant = 'body',
+  bold,
+  italic = false,
+  light,
+  medium,
+  semiBold,
+  thin,
+  color,
+  size,
+  style,
+  maxFontSizeMultiplier,
+  ...rest
+}) => {
+  const theme = useTheme();
+  const role = theme.typography[variant];
+  const weight = resolveWeight({ bold, semiBold, medium, light, thin });
+
+  const textStyle: TextStyle = {
+    fontFamily: role.fontFamily,
+    fontSize: size ?? role.fontSize,
+    lineHeight: size === undefined ? role.lineHeight : undefined,
+    letterSpacing: role.letterSpacing,
+    fontWeight: weight ?? (role.fontWeight as TextStyle['fontWeight']),
+    fontStyle: italic ? 'italic' : 'normal',
+    color: color ?? theme.color.text.primary,
+  };
+
+  return (
+    <RNText
+      maxFontSizeMultiplier={
+        maxFontSizeMultiplier ?? theme.typography.maxFontSizeMultiplier
+      }
+      {...rest}
+      style={[textStyle, style]}
+    />
+  );
+};
+
+export default Text;

package/src/__fixtures__/renderWithTheme.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, type RenderOptions } from '@testing-library/react-native';
+
+import { createTheme } from '../theme/createTheme';
+import { ThemeProvider } from '../theme/ThemeProvider';
+import type { SchemePreference, Theme } from '../theme/types';
+
+// Test-only helpers; excluded from the published build (__fixtures__).
+
+export const hafele = createTheme({
+  name: 'hafele',
+  light: { color: { brand: '#df1c29', accent: '#df1c29' } },
+});
+
+interface ThemeRenderOptions extends RenderOptions {
+  theme?: Theme;
+  scheme?: SchemePreference;
+}
+
+export function renderWithTheme(
+  ui: React.ReactElement,
+  { theme, scheme = 'light', ...options }: ThemeRenderOptions = {},
+) {
+  return render(
+    <ThemeProvider theme={theme} scheme={scheme}>
+      {ui}
+    </ThemeProvider>,
+    options,
+  );
+}

package/src/constants/DraggableFlatList/constants.ts

@@ -0,0 +1,32 @@
+import { PanGestureHandlerProperties } from 'react-native-gesture-handler';
+import { useSharedValue, WithSpringConfig } from 'react-native-reanimated';
+
+// Fire onScrollComplete when within this many px of target offset
+export const SCROLL_POSITION_TOLERANCE = 2;
+export const DEFAULT_ANIMATION_CONFIG: WithSpringConfig = {
+  damping: 20,
+  mass: 0.2,
+  stiffness: 100,
+  overshootClamping: false,
+  restSpeedThreshold: 0.2,
+  restDisplacementThreshold: 0.2,
+};
+
+export const DEFAULT_PROPS = {
+  autoscrollThreshold: 30,
+  autoscrollSpeed: 100,
+  animationConfig: DEFAULT_ANIMATION_CONFIG,
+  scrollEnabled: true,
+  dragHitSlop: 0 as PanGestureHandlerProperties['hitSlop'],
+  activationDistance: 0,
+  dragItemOverflow: false,
+};
+
+// Is there a better way to check for v2?
+export const isReanimatedV2 = !!useSharedValue;
+
+if (!isReanimatedV2) {
+  throw new Error(
+    'Your version of react-native-reanimated is too old for react-native-draggable-flatlist!',
+  );
+}

package/src/constants/DraggableFlatList/draggable.d.ts

@@ -0,0 +1,10 @@
+export {};
+
+declare global {
+  var LayoutAnimationRepository: {
+    configs: Record<number, unknown>;
+    registerConfig: (tag: number, config: unknown) => void;
+    removeConfig: (tag: number) => void;
+  };
+  var RNDFLLayoutAnimationConfigStash: Record<number, unknown> | undefined;
+}

package/src/constants/DraggableFlatList/types.ts

@@ -0,0 +1,87 @@
+import React from 'react';
+import {
+  FlatListProps,
+  LayoutChangeEvent,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { FlatList } from 'react-native-gesture-handler';
+import Animated, {
+  AnimateProps,
+  WithSpringConfig,
+} from 'react-native-reanimated';
+
+import { useAnimatedValues } from '../../context/DraggableFlatList/animatedValueContext';
+import { DEFAULT_PROPS } from './constants';
+
+export type DragEndParams<T> = {
+  data: T[];
+  from: number;
+  to: number;
+};
+type Modify<T, R> = Omit<T, keyof R> & R;
+
+type DefaultProps = Readonly<typeof DEFAULT_PROPS>;
+
+export type DraggableFlatListProps<T> = Modify<
+  FlatListProps<T>,
+  {
+    data: T[];
+    activationDistance?: number;
+    animationConfig?: Partial<WithSpringConfig>;
+    autoscrollSpeed?: number;
+    autoscrollThreshold?: number;
+    containerStyle?: StyleProp<ViewStyle>;
+    debug?: boolean;
+    dragItemOverflow?: boolean;
+    keyExtractor: (item: T, index: number) => string;
+    onDragBegin?: (index: number) => void;
+    onDragEnd?: (params: DragEndParams<T>) => void;
+    onPlaceholderIndexChange?: (placeholderIndex: number) => void;
+    onRelease?: (index: number) => void;
+    onScrollOffsetChange?: (scrollOffset: number) => void;
+    renderItem: RenderItem<T>;
+    renderPlaceholder?: RenderPlaceholder<T>;
+    simultaneousHandlers?: React.Ref<any> | React.Ref<any>[];
+    outerScrollOffset?: Animated.SharedValue<number>;
+    onAnimValInit?: (animVals: ReturnType<typeof useAnimatedValues>) => void;
+    itemEnteringAnimation?: AnimateProps<Animated.View>['entering'];
+    itemExitingAnimation?: AnimateProps<Animated.View>['exiting'];
+    itemLayoutAnimation?: AnimateProps<Animated.View>['layout'];
+    enableLayoutAnimationExperimental?: boolean;
+    onContainerLayout?: (params: {
+      layout: LayoutChangeEvent['nativeEvent']['layout'];
+      containerRef: React.RefObject<Animated.View>;
+    }) => void;
+  } & Partial<DefaultProps>
+>;
+
+export type RenderPlaceholder<T> = (params: {
+  item: T;
+  index: number;
+}) => JSX.Element;
+
+export type RenderItemParams<T> = {
+  item: T;
+  getIndex: () => number | undefined; // This is technically a "last known index" since cells don't necessarily rerender when their index changes
+  drag: () => void;
+  isActive: boolean;
+};
+
+export type RenderItem<T> = (params: RenderItemParams<T>) => React.ReactNode;
+
+export type AnimatedFlatListType = <T>(
+  props: Animated.AnimateProps<
+    FlatListProps<T> & {
+      ref: React.Ref<FlatList<T>>;
+      simultaneousHandlers?: React.Ref<any> | React.Ref<any>[];
+    }
+  >,
+) => React.ReactElement;
+
+export type CellData = {
+  measurements: {
+    size: number;
+    offset: number;
+  };
+};

package/src/constants/DraggableFlatList/types.web.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { DraggableFlatListProps, RenderItemParams } from './types';
+
+export interface WebDraggableFlatListProps<T>
+  extends Omit<DraggableFlatListProps<T>, 'renderItem' | 'containerStyle'> {
+  renderItem: (params: RenderItemParams<T>) => React.ReactNode;
+  containerStyle?: React.CSSProperties;
+}

package/src/constants/consts.ts

@@ -0,0 +1,24 @@
+export const FORMAT_TIME_DMY_ = 'DD/MM/YYYY';
+
+export const FORMAT_TIME_DMY = 'DD-MM-YYYY';
+
+export const FORMAT_TIME = 'YYYY-MM-DD HH:mm';
+
+export const FORMAT_TIME_DMYHMS = 'DD/MM/YYYY HH:mm:ss';
+
+export const FORMAT_TIME_DMYHM = 'DD/MM/YYYY HH:mm';
+
+export const FORMAT_TIME_VH = 'MMMM DD, YYYY HH:mm';
+
+export const FORMAT_TIME_DDMMM = 'DD MMM';
+
+export const FORMAT_TIME_YMD = 'YYYY-MM-DD';
+
+export const FORMAT_TIME_FILTER = 'DD/MM/YY';
+
+export const FORMAT_TIME_L = 'L';
+export const FORMAT_TIME_LL = 'LL';
+export const FORMAT_TIME_LLL = 'LLL';
+export const FORMAT_TIME_LLLL = 'LLLL';
+export const FORMAT_TIME_LT = 'LT';
+export const FORMAT_TIME_LTS = 'LTS';

package/src/constants/types.ts

@@ -0,0 +1,22 @@
+export const MIME_TYPES = {
+  csv: 'text/csv',
+  doc: 'application/msword',
+  docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  jpeg: 'image/jpeg',
+  jpg: 'image/jpeg',
+  mp4: 'video/mp4',
+  pdf: 'application/pdf',
+  png: 'image/png',
+  ppt: 'application/vnd.ms-powerpoint',
+  pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+  webm: 'video/webm',
+  xls: 'application/vnd.ms-excel',
+  xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+};
+
+export const FILE_TYPE = {
+  empty: -1,
+  pdf: 1,
+  video: 2,
+  other: 3,
+};

package/src/context/DraggableFlatList/animatedValueContext.tsx

@@ -0,0 +1,221 @@
+import React from 'react';
+import {
+  useAnimatedReaction,
+  useDerivedValue,
+  useSharedValue,
+} from 'react-native-reanimated';
+import { State as GestureState } from 'react-native-gesture-handler';
+
+import { useProps } from './propsContext';
+
+const AnimatedValueContext = React.createContext<
+  ReturnType<typeof useSetupAnimatedValues> | undefined
+>(undefined);
+
+export default function AnimatedValueProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const value = useSetupAnimatedValues();
+  return (
+    <AnimatedValueContext.Provider value={value}>
+      {children}
+    </AnimatedValueContext.Provider>
+  );
+}
+
+export function useAnimatedValues() {
+  const value = React.useContext(AnimatedValueContext);
+  if (!value) {
+    throw new Error(
+      'useAnimatedValues must be called from within AnimatedValueProvider!',
+    );
+  }
+  return value;
+}
+
+function useSetupAnimatedValues<T>() {
+  const props = useProps<T>();
+
+  const DEFAULT_VAL = useSharedValue(0);
+
+  const containerSize = useSharedValue(0);
+  const scrollViewSize = useSharedValue(0);
+
+  const panGestureState = useSharedValue<GestureState>(
+    GestureState.UNDETERMINED,
+  );
+  const touchTranslate = useSharedValue(0);
+
+  const isTouchActiveNative = useSharedValue(false);
+
+  const hasMoved = useSharedValue(0);
+  const disabled = useSharedValue(false);
+
+  const horizontalAnim = useSharedValue(!!props.horizontal);
+
+  const activeIndexAnim = useSharedValue(-1); // Index of hovering cell
+  const spacerIndexAnim = useSharedValue(-1); // Index of hovered-over cell
+
+  const activeCellSize = useSharedValue(0); // Height or width of acctive cell
+  const activeCellOffset = useSharedValue(0); // Distance between active cell and edge of container
+
+  const scrollOffset = useSharedValue(0);
+  const scrollInit = useSharedValue(0);
+
+  const viewableIndexMin = useSharedValue(0);
+  const viewableIndexMax = useSharedValue(0);
+
+  // If list is nested there may be an outer scrollview
+  const outerScrollOffset = props.outerScrollOffset || DEFAULT_VAL;
+  const outerScrollInit = useSharedValue(0);
+
+  useAnimatedReaction(
+    () => {
+      return activeIndexAnim.value;
+    },
+    (cur, prev) => {
+      if (cur !== prev && cur >= 0) {
+        scrollInit.value = scrollOffset.value;
+        outerScrollInit.value = outerScrollOffset.value;
+      }
+    },
+    [outerScrollOffset],
+  );
+
+  const placeholderOffset = useSharedValue(0);
+
+  const isDraggingCell = useDerivedValue(() => {
+    return isTouchActiveNative.value && activeIndexAnim.value >= 0;
+  }, []);
+
+  const autoScrollDistance = useDerivedValue(() => {
+    if (!isDraggingCell.value) {
+      return 0;
+    }
+    const innerScrollDiff = scrollOffset.value - scrollInit.value;
+    // If list is nested there may be an outer scroll diff
+    const outerScrollDiff = outerScrollOffset.value - outerScrollInit.value;
+    const scrollDiff = innerScrollDiff + outerScrollDiff;
+    return scrollDiff;
+  }, []);
+
+  const touchPositionDiff = useDerivedValue(() => {
+    const extraTranslate = isTouchActiveNative.value
+      ? autoScrollDistance.value
+      : 0;
+    return touchTranslate.value + extraTranslate;
+  }, []);
+
+  const touchPositionDiffConstrained = useDerivedValue(() => {
+    const containerMinusActiveCell =
+      containerSize.value - activeCellSize.value + scrollOffset.value;
+
+    const offsetRelativeToScrollTop =
+      touchPositionDiff.value + activeCellOffset.value;
+    const constrained = Math.min(
+      containerMinusActiveCell,
+      Math.max(scrollOffset.value, offsetRelativeToScrollTop),
+    );
+
+    const maxTranslateNegative = -activeCellOffset.value;
+    const maxTranslatePositive =
+      scrollViewSize.value - (activeCellOffset.value + activeCellSize.value);
+
+    // Only constrain the touch position while the finger is on the screen. This allows the active cell
+    // to snap above/below the fold once let go, if the drag ends at the top/bottom of the screen.
+    const constrainedBase = isTouchActiveNative.value
+      ? constrained - activeCellOffset.value
+      : touchPositionDiff.value;
+
+    // Make sure item is constrained to the boundaries of the scrollview
+    return Math.min(
+      Math.max(constrainedBase, maxTranslateNegative),
+      maxTranslatePositive,
+    );
+  }, []);
+
+  const dragItemOverflow = props.dragItemOverflow;
+  const hoverAnim = useDerivedValue(() => {
+    if (activeIndexAnim.value < 0) {
+      return 0;
+    }
+    return dragItemOverflow
+      ? touchPositionDiff.value
+      : touchPositionDiffConstrained.value;
+  }, []);
+
+  const hoverOffset = useDerivedValue(() => {
+    return hoverAnim.value + activeCellOffset.value;
+  }, [hoverAnim, activeCellOffset]);
+
+  useDerivedValue(() => {
+    // Reset spacer index when we stop hovering
+    const isHovering = activeIndexAnim.value >= 0;
+    if (!isHovering && spacerIndexAnim.value >= 0) {
+      spacerIndexAnim.value = -1;
+    }
+  }, []);
+
+  // Note: this could use a refactor as it combines touch state + cell animation
+  const resetTouchedCell = React.useCallback(() => {
+    activeCellOffset.value = 0;
+    hasMoved.value = 0;
+  }, []);
+
+  const value = React.useMemo(
+    () => ({
+      activeCellOffset,
+      activeCellSize,
+      activeIndexAnim,
+      containerSize,
+      disabled,
+      horizontalAnim,
+      hoverAnim,
+      hoverOffset,
+      isDraggingCell,
+      isTouchActiveNative,
+      panGestureState,
+      placeholderOffset,
+      resetTouchedCell,
+      scrollOffset,
+      scrollViewSize,
+      spacerIndexAnim,
+      touchPositionDiff,
+      touchTranslate,
+      autoScrollDistance,
+      viewableIndexMin,
+      viewableIndexMax,
+    }),
+    [
+      activeCellOffset,
+      activeCellSize,
+      activeIndexAnim,
+      containerSize,
+      disabled,
+      horizontalAnim,
+      hoverAnim,
+      hoverOffset,
+      isDraggingCell,
+      isTouchActiveNative,
+      panGestureState,
+      placeholderOffset,
+      resetTouchedCell,
+      scrollOffset,
+      scrollViewSize,
+      spacerIndexAnim,
+      touchPositionDiff,
+      touchTranslate,
+      autoScrollDistance,
+      viewableIndexMin,
+      viewableIndexMax,
+    ],
+  );
+
+  React.useEffect(() => {
+    props.onAnimValInit?.(value);
+  }, [value]);
+
+  return value;
+}

package/src/context/DraggableFlatList/cellContext.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { typedMemo } from '../../utils/DraggableFlatList/typedMemo';
+
+type CellContextValue = {
+  isActive: boolean;
+};
+
+const CellContext = React.createContext<CellContextValue | undefined>(
+  undefined,
+);
+
+type Props = {
+  isActive: boolean;
+  children: React.ReactNode;
+};
+
+export function CellProvider({ isActive, children }: Props) {
+  const value = React.useMemo(
+    () => ({
+      isActive,
+    }),
+    [isActive],
+  );
+  return <CellContext.Provider value={value}>{children}</CellContext.Provider>;
+}
+
+export default typedMemo(CellProvider);
+
+export function useIsActive() {
+  const value = React.useContext(CellContext);
+  if (!value) {
+    throw new Error('useIsActive must be called from within CellProvider!');
+  }
+  return value.isActive;
+}

package/src/context/DraggableFlatList/draggableFlatListContext.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+type Props<T> = {
+  activeKey: string | null;
+  keyExtractor: (item: T, index: number) => string;
+  horizontal: boolean;
+  layoutAnimationDisabled: boolean;
+  children: React.ReactNode;
+};
+
+type DraggableFlatListContextValue<T> = Omit<Props<T>, 'children'>;
+
+const DraggableFlatListContext = React.createContext<
+  DraggableFlatListContextValue<any> | undefined
+>(undefined);
+
+export default function DraggableFlatListProvider<T>({
+  activeKey,
+  keyExtractor,
+  horizontal,
+  layoutAnimationDisabled,
+  children,
+}: Props<T>) {
+  const value = React.useMemo(
+    () => ({
+      activeKey,
+      keyExtractor,
+      horizontal,
+      layoutAnimationDisabled,
+    }),
+    [activeKey, keyExtractor, horizontal, layoutAnimationDisabled],
+  );
+
+  return (
+    <DraggableFlatListContext.Provider value={value}>
+      {children}
+    </DraggableFlatListContext.Provider>
+  );
+}
+
+export function useDraggableFlatListContext<T>() {
+  const value = React.useContext(DraggableFlatListContext);
+  if (!value) {
+    throw new Error(
+      'useDraggableFlatListContext must be called within DraggableFlatListProvider',
+    );
+  }
+  return value as DraggableFlatListContextValue<T>;
+}