@hero-design/rn 8.8.1 → 8.9.1

package/types/components/Toast/ToastContext.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ToastContainerProps, ToastProps } from './types';
 export declare type ToastControllerContextType = {
     show: (props: Omit<ToastProps, 'position'>) => string;

package/types/components/Toast/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const Toast: {
     Provider: ({ children, displayType, position: _position, }: {
         children?: import("react").ReactNode;

package/types/components/Toolbar/StyledToolbar.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TouchableOpacity, View } from 'react-native';
 import type { ViewProps } from 'react-native';
 declare const ToolbarWrapper: import("@emotion/native").StyledComponent<ViewProps & {

package/types/components/Typography/Text/StyledText.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Text } from 'react-native';
 declare const StyledText: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;

package/types/index.d.ts

@@ -28,7 +28,6 @@ import Progress from './components/Progress';
 import Slider from './components/Slider';
 import Spinner from './components/Spinner';
 import Swipeable from './components/Swipeable';
-import SwipeableV2 from './components/SwipeableV2';
 import Radio from './components/Radio';
 import SectionHeading from './components/SectionHeading';
 import Select from './components/Select';
@@ -43,5 +42,5 @@ import Typography from './components/Typography';
 import RefreshControl from './components/RefreshControl';
 import RichTextEditor from './components/RichTextEditor';
 import PageControl from './components/PageControl';
-export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, swagSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, FAB, Icon, Image, List, PinInput, Progress, PageControl, Slider, Spinner, Swipeable, SwipeableV2, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, RefreshControl, RichTextEditor, };
+export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, swagSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, FAB, Icon, Image, List, PinInput, Progress, PageControl, Slider, Spinner, Swipeable, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, RefreshControl, RichTextEditor, };
 export * from './types';

package/types/theme/ThemeProvider.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { Theme } from './getTheme';
 export interface ThemeProviderProps {
     theme: Partial<Theme> | ((outerTheme: Theme) => Theme);

package/types/theme/components/textInput.d.ts

@@ -47,11 +47,11 @@ declare const getTextInputTheme: (theme: GlobalTheme) => {
         labelPaddingBottom: number;
         labelHorizontalPadding: number;
         inputHorizontalMargin: number;
-        containerMarginVertical: number;
         errorContainerMarginRight: number;
         errorMarginLeft: number;
         maxLengthLabelMarginLeft: number;
         errorAndHelpTextContainerPaddingLeft: number;
+        containerMarginTop: number;
     };
     fontSizes: {
         text: number;
@@ -73,5 +73,8 @@ declare const getTextInputTheme: (theme: GlobalTheme) => {
         text: number;
         labelInsideTextInput: number;
     };
+    sizes: {
+        errorAndHelpTextContainerHeight: number;
+    };
 };
 export default getTextInputTheme;

package/src/components/SwipeableV2/StyledSwipeable.tsx

@@ -1,14 +0,0 @@
-import styled from '@emotion/native';
-import { Animated, View } from 'react-native';
-
-export type ActionIntent = 'primary' | 'success' | 'danger';
-
-const StyledWrapper = styled(View)(() => ({
-  flexDirection: 'row',
-}));
-
-const StyledContent = styled(Animated.View)(() => ({
-  flex: 1,
-}));
-
-export { StyledWrapper, StyledContent };

package/src/components/SwipeableV2/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1,161 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Swipeable renders correctly 1`] = `
-<View
-  onLayout={[Function]}
-  onMoveShouldSetResponder={[Function]}
-  onMoveShouldSetResponderCapture={[Function]}
-  onResponderEnd={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderReject={[Function]}
-  onResponderRelease={[Function]}
-  onResponderStart={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  onStartShouldSetResponderCapture={[Function]}
-  style={
-    Array [
-      Object {
-        "flexDirection": "row",
-      },
-      Array [
-        Object {
-          "flexDirection": "row",
-        },
-        undefined,
-      ],
-    ]
-  }
->
-  <View
-    collapsable={false}
-    style={
-      Object {
-        "marginLeft": -0,
-        "transform": Array [
-          Object {
-            "translateX": 0.5,
-          },
-        ],
-        "width": 0,
-      }
-    }
-  >
-    <View
-      style={
-        Array [
-          Object {
-            "alignItems": "flex-end",
-            "flex": 1,
-            "justifyContent": "center",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          Array [
-            Object {
-              "color": "#001f23",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 14,
-              "letterSpacing": 0.42,
-              "lineHeight": 22,
-            },
-            undefined,
-          ]
-        }
-        themeFontSize="medium"
-        themeFontWeight="regular"
-        themeIntent="body"
-        themeTypeface="neutral"
-      >
-        Archive
-      </Text>
-    </View>
-  </View>
-  <View
-    collapsable={false}
-    style={
-      Object {
-        "flex": 1,
-        "transform": Array [
-          Object {
-            "translateX": 0.5,
-          },
-        ],
-      }
-    }
-  >
-    <Text
-      style={
-        Array [
-          Object {
-            "color": "#001f23",
-            "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
-            "letterSpacing": 0.42,
-            "lineHeight": 22,
-          },
-          undefined,
-        ]
-      }
-      themeFontSize="medium"
-      themeFontWeight="regular"
-      themeIntent="body"
-      themeTypeface="neutral"
-    >
-      Swipeable Item
-    </Text>
-  </View>
-  <View
-    collapsable={false}
-    style={
-      Object {
-        "marginRight": -0,
-        "transform": Array [
-          Object {
-            "translateX": 0.5,
-          },
-        ],
-        "width": 0,
-      }
-    }
-  >
-    <View
-      style={
-        Array [
-          Object {
-            "alignItems": "flex-start",
-            "flex": 1,
-            "justifyContent": "center",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          Array [
-            Object {
-              "color": "#001f23",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 14,
-              "letterSpacing": 0.42,
-              "lineHeight": 22,
-            },
-            undefined,
-          ]
-        }
-        themeFontSize="medium"
-        themeFontWeight="regular"
-        themeIntent="body"
-        themeTypeface="neutral"
-      >
-        Approve
-      </Text>
-    </View>
-  </View>
-</View>
-`;

package/src/components/SwipeableV2/__tests__/index.spec.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import Typography from '../../Typography';
-import SwipeableV2 from '..';
-
-describe('Swipeable', () => {
-  it('renders correctly', () => {
-    const { toJSON, getByText } = renderWithTheme(
-      <SwipeableV2
-        leftContent={
-          <View
-            style={[
-              {
-                flex: 1,
-                alignItems: 'flex-end',
-                justifyContent: 'center',
-              },
-            ]}
-          >
-            <Typography.Text>Archive</Typography.Text>
-          </View>
-        }
-        rightContent={
-          <View
-            style={[
-              {
-                flex: 1,
-                alignItems: 'flex-start',
-                justifyContent: 'center',
-              },
-            ]}
-          >
-            <Typography.Text>Approve</Typography.Text>
-          </View>
-        }
-        rightActionsWidth={168}
-      >
-        <Typography.Text>Swipeable Item</Typography.Text>
-      </SwipeableV2>
-    );
-
-    expect(getByText('Swipeable Item')).toBeDefined();
-    expect(getByText('Archive')).toBeDefined();
-    expect(getByText('Approve')).toBeDefined();
-    expect(toJSON()).toMatchSnapshot();
-  });
-});

package/src/components/SwipeableV2/index.tsx

@@ -1,364 +0,0 @@
-import React, { useEffect } from 'react';
-import {
-  Animated,
-  Easing,
-  GestureResponderEvent,
-  PanResponder,
-  PanResponderGestureState,
-  StyleProp,
-  StyleSheet,
-  ViewStyle,
-} from 'react-native';
-import { noop } from '../../utils/functions';
-import { scale } from '../../utils/scale';
-import { StyledContent, StyledWrapper } from './StyledSwipeable';
-
-const swipeStartMinDistance = 15;
-
-export type SwipeableV2Props = {
-  /**
-   * Content panel that is going to be revealed from the left side when user swipes right.
-   */
-  leftContent?: React.ReactNode;
-  /**
-   * Content panel that is going to be revealed from the right side when user swipes left.
-   */
-  rightContent?: React.ReactNode;
-  /**
-   * If the user swipe a distance greater than this value, the callback onSwipeRightEnd is called.
-   */
-  leftActionsWidth?: number;
-  /**
-   * If the user swipe a distance greater than this value, the callback onSwipeLeftEnd is called.
-   */
-  rightActionsWidth?: number;
-  /**
-   * Callback when start swiping to left.
-   */
-  onSwipeLeftStart?: (
-    event: GestureResponderEvent,
-    gestureState: PanResponderGestureState
-  ) => void;
-  /**
-   * Callback when end swiping to left.
-   */
-  onSwipeLeftEnd?: (
-    event: GestureResponderEvent,
-    gestureState: PanResponderGestureState
-  ) => void;
-  /**
-   * Callback when start swiping to right.
-   */
-  onSwipeRightStart?: (
-    event: GestureResponderEvent,
-    gestureState: PanResponderGestureState
-  ) => void;
-  /**
-   * Callback when end swiping to right.
-   */
-  onSwipeRightEnd?: (
-    event: GestureResponderEvent,
-    gestureState: PanResponderGestureState
-  ) => void;
-  /**
-   * additional styles
-   */
-  style?: StyleProp<ViewStyle>;
-  /**
-   * React node that is swipeable.
-   */
-  children: React.ReactNode;
-};
-
-type PropsWithDefaultValue = Required<
-  Omit<SwipeableV2Props, 'leftContent' | 'rightContent' | 'style'>
-> &
-  Pick<SwipeableV2Props, 'leftContent' | 'rightContent' | 'style'>;
-
-type ContextValues = PropsWithDefaultValue & {
-  canSwipeLeft: boolean;
-  canSwipeRight: boolean;
-  unmountedRef: React.MutableRefObject<boolean>;
-};
-
-type State = {
-  pan: Animated.ValueXY;
-  lastOffset: { x: number; y: number };
-  leftActionActivated: boolean;
-  rightActionActivated: boolean;
-};
-
-const ReleaseAnimationConfig = {
-  toValue: { x: 0, y: 0 },
-  duration: 100,
-  easing: Easing.elastic(0.5),
-  useNativeDriver: true,
-};
-
-const animationToNewState = (pan: Animated.ValueXY) => {
-  const animationConfig = ReleaseAnimationConfig;
-
-  pan.flattenOffset();
-
-  return Animated.timing(pan, animationConfig);
-};
-
-const hanleOnPanResponderEnd = (
-  state: State,
-  contextValues: ContextValues,
-  event: GestureResponderEvent,
-  gestureState: PanResponderGestureState
-) => {
-  const { unmountedRef, onSwipeLeftEnd, onSwipeRightEnd } = contextValues;
-  const { leftActionActivated, rightActionActivated, pan } = state;
-  const animationConfig = ReleaseAnimationConfig;
-
-  animationToNewState(pan).start(() => {
-    if (unmountedRef.current) {
-      return;
-    }
-
-    if (leftActionActivated && onSwipeRightEnd) {
-      onSwipeRightEnd(event, gestureState);
-    }
-
-    if (rightActionActivated && onSwipeLeftEnd) {
-      onSwipeLeftEnd(event, gestureState);
-    }
-  });
-
-  return {
-    ...state,
-    lastOffset: {
-      x: animationConfig.toValue.x,
-      y: animationConfig.toValue.y,
-    },
-    leftActionActivated: false,
-    rightActionActivated: false,
-  };
-};
-
-const hanleOnPanResponderMove = (
-  state: State,
-  contextValues: ContextValues,
-  event: GestureResponderEvent,
-  gestureState: PanResponderGestureState
-) => {
-  const {
-    leftActionsWidth,
-    rightActionsWidth,
-    onSwipeLeftStart,
-    onSwipeRightStart,
-    canSwipeRight,
-    canSwipeLeft,
-  } = contextValues;
-  const { lastOffset, leftActionActivated, rightActionActivated } = state;
-
-  const { dx } = gestureState;
-  const x = dx + lastOffset.x;
-  let nextLeftActionActivated = leftActionActivated;
-  let nextRightActionActivated = rightActionActivated;
-
-  Animated.event(
-    [
-      null,
-      {
-        dx: state.pan.x,
-        dy: state.pan.y,
-      },
-    ],
-    { useNativeDriver: false }
-  )(event, gestureState);
-
-  if (!leftActionActivated && canSwipeRight && x >= leftActionsWidth) {
-    nextLeftActionActivated = true;
-    onSwipeRightStart(event, gestureState);
-  }
-
-  if (leftActionActivated && canSwipeRight && x < leftActionsWidth) {
-    nextLeftActionActivated = false;
-  }
-
-  if (!rightActionActivated && canSwipeLeft && x <= -rightActionsWidth) {
-    nextRightActionActivated = true;
-    onSwipeLeftStart(event, gestureState);
-  }
-
-  if (rightActionActivated && canSwipeLeft && x > -rightActionsWidth) {
-    nextRightActionActivated = false;
-  }
-
-  const needsUpdate =
-    nextLeftActionActivated !== leftActionActivated ||
-    nextRightActionActivated !== rightActionActivated;
-
-  if (needsUpdate) {
-    return {
-      ...state,
-      leftActionActivated: nextLeftActionActivated,
-      rightActionActivated: nextRightActionActivated,
-    };
-  }
-  return state;
-};
-
-const SwipeableV2 = ({
-  children,
-  leftContent,
-  rightContent,
-  style,
-  leftActionsWidth = scale(200),
-  onSwipeLeftStart = noop,
-  onSwipeLeftEnd = noop,
-  rightActionsWidth = scale(200),
-  onSwipeRightStart = noop,
-  onSwipeRightEnd = noop,
-  ...rest
-}: SwipeableV2Props) => {
-  const propsWithDefaultValue: PropsWithDefaultValue = {
-    children,
-    leftContent,
-    rightContent,
-    style,
-    leftActionsWidth,
-    onSwipeLeftStart,
-    onSwipeLeftEnd,
-    rightActionsWidth,
-    onSwipeRightStart,
-    onSwipeRightEnd,
-    ...rest,
-  };
-
-  const unmountedRef = React.useRef(false);
-  useEffect(() => {
-    return () => {
-      unmountedRef.current = true;
-    };
-  }, []);
-
-  const [width, setWidth] = React.useState(0);
-  const canSwipeRight = !!leftContent;
-
-  const canSwipeLeft = !!rightContent;
-
-  const propsRef = React.useRef<ContextValues>(
-    undefined as unknown as ContextValues
-  );
-
-  const [state, setState] = React.useState<State>({
-    pan: new Animated.ValueXY({
-      x: 0,
-      y: 0,
-    }),
-    lastOffset: { x: 0, y: 0 },
-    leftActionActivated: false,
-    rightActionActivated: false,
-  });
-
-  propsRef.current = {
-    ...propsWithDefaultValue,
-    canSwipeLeft,
-    canSwipeRight,
-    unmountedRef,
-  };
-
-  const transform = [
-    {
-      translateX: state.pan.x.interpolate({
-        inputRange: [canSwipeLeft ? -width : 0, canSwipeRight ? width : 0],
-        outputRange: [
-          canSwipeLeft ? -width + StyleSheet.hairlineWidth : 0,
-          canSwipeRight ? width - StyleSheet.hairlineWidth : 0,
-        ],
-        extrapolate: 'clamp',
-      }),
-    },
-  ];
-
-  const panResponder = React.useRef(
-    PanResponder.create({
-      onMoveShouldSetPanResponder: (
-        _: GestureResponderEvent,
-        gestureState: PanResponderGestureState
-      ) => {
-        return Math.abs(gestureState.dx) > swipeStartMinDistance;
-      },
-      onMoveShouldSetPanResponderCapture: (
-        _: GestureResponderEvent,
-        gestureState: PanResponderGestureState
-      ) => {
-        return Math.abs(gestureState.dx) > swipeStartMinDistance;
-      },
-      onPanResponderGrant: () => {
-        setState((prevState) => {
-          prevState.pan.setOffset(prevState.lastOffset);
-          return prevState;
-        });
-      },
-      onPanResponderMove: (event, gestureState) => {
-        setState((prevState) => {
-          return hanleOnPanResponderMove(
-            prevState,
-            propsRef.current,
-            event,
-            gestureState
-          );
-        });
-      },
-
-      onPanResponderRelease: (event, gestureState) => {
-        setState((prevState) => {
-          return hanleOnPanResponderEnd(
-            prevState,
-            propsRef.current,
-            event,
-            gestureState
-          );
-        });
-      },
-      onPanResponderTerminationRequest: () => {
-        return false;
-      },
-      onPanResponderTerminate: (event, gestureState) => {
-        setState((prevState) => {
-          return hanleOnPanResponderEnd(
-            prevState,
-            propsRef.current,
-            event,
-            gestureState
-          );
-        });
-      },
-    })
-  ).current;
-
-  return (
-    <StyledWrapper
-      onLayout={(event) => {
-        setWidth(event.nativeEvent.layout.width);
-      }}
-      style={[
-        {
-          flexDirection: 'row',
-        },
-        style,
-      ]}
-      {...panResponder.panHandlers}
-      {...rest}
-    >
-      {canSwipeRight && (
-        <Animated.View style={[{ transform, marginLeft: -width, width }]}>
-          {leftContent}
-        </Animated.View>
-      )}
-      <StyledContent style={{ transform }}>{children}</StyledContent>
-      {canSwipeLeft && (
-        <Animated.View style={[{ transform, marginRight: -width, width }]}>
-          {rightContent}
-        </Animated.View>
-      )}
-    </StyledWrapper>
-  );
-};
-
-export default SwipeableV2;

package/types/components/SwipeableV2/StyledSwipeable.d.ts

@@ -1,15 +0,0 @@
-import { Animated, View } from 'react-native';
-export declare type ActionIntent = 'primary' | 'success' | 'danger';
-declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, {}, {
-    ref?: import("react").Ref<View> | undefined;
-}>;
-declare const StyledContent: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
-    children?: import("react").ReactNode;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, {}, {}>;
-export { StyledWrapper, StyledContent };