@hero-design/rn 7.22.3 → 7.24.0

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

@@ -59,12 +59,13 @@ exports[`Spinner renders correctly 1`] = `
                 "backgroundColor": "#001f23",
                 "borderRadius": 999,
                 "height": 16,
-                "opacity": 1,
+                "opacity": 0.9,
                 "width": 16,
               },
               Object {},
             ]
           }
+          themeIntent="primary"
           themePosition="topLeft"
           themeSize="medium"
         />
@@ -78,12 +79,13 @@ exports[`Spinner renders correctly 1`] = `
                 "borderRadius": 999,
                 "height": 16,
                 "marginLeft": 8,
-                "opacity": 0.75,
+                "opacity": 0.675,
                 "width": 16,
               },
               Object {},
             ]
           }
+          themeIntent="primary"
           themePosition="topRight"
           themeSize="medium"
         />
@@ -112,12 +114,13 @@ exports[`Spinner renders correctly 1`] = `
                 "backgroundColor": "#001f23",
                 "borderRadius": 999,
                 "height": 16,
-                "opacity": 0.5,
+                "opacity": 0.45,
                 "width": 16,
               },
               Object {},
             ]
           }
+          themeIntent="primary"
           themePosition="bottomLeft"
           themeSize="medium"
         />
@@ -131,12 +134,13 @@ exports[`Spinner renders correctly 1`] = `
                 "borderRadius": 999,
                 "height": 16,
                 "marginLeft": 8,
-                "opacity": 0.25,
+                "opacity": 0.225,
                 "width": 16,
               },
               Object {},
             ]
           }
+          themeIntent="primary"
           themePosition="bottomRight"
           themeSize="medium"
         />

package/src/components/Spinner/index.tsx

@@ -9,6 +9,10 @@ interface SpinnerProps extends ViewProps {
    * Size of Spinner.
    */
   size?: 'small' | 'medium';
+  /**
+   * Spinner's variant.
+   */
+  intent?: 'primary' | 'inverted';
   /**
    * Testing id of the component.
    */
@@ -18,11 +22,12 @@ interface SpinnerProps extends ViewProps {
 const Spinner = ({
   testID,
   size = 'medium',
+  intent = 'primary',
   ...nativeProps
 }: SpinnerProps): ReactElement => (
   <StyledView {...nativeProps}>
     <StyledSpinnerContainer testID={testID}>
-      <AnimatedSpinner size={size} />
+      <AnimatedSpinner size={size} intent={intent} />
     </StyledSpinnerContainer>
   </StyledView>
 );

package/src/components/Swipeable/StyledSwipeable.tsx

@@ -0,0 +1,11 @@
+import styled from '@emotion/native';
+import { TouchableOpacity } from 'react-native';
+
+export type ActionIntent = 'primary' | 'success' | 'danger';
+
+export const StyledRectButton = styled(TouchableOpacity)<{
+  themeIntent: ActionIntent;
+}>(({ theme, themeIntent }) => ({
+  flex: 1,
+  backgroundColor: theme.__hd__.swipeable.colors[themeIntent],
+}));

package/src/components/Swipeable/SwipeableAction.tsx

@@ -0,0 +1,45 @@
+import React, { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { ActionIntent, StyledRectButton } from './StyledSwipeable';
+
+export interface SwipeableActionProps {
+  /**
+   * Visual intent color applied to action.
+   */
+  intent?: ActionIntent;
+  /**
+   * Callback when the action button is pressed.
+   */
+  onPress?: () => void;
+  /**
+   * Action button's content
+   */
+  children?: ReactNode;
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const SwipeableAction = ({
+  intent = 'primary',
+  onPress,
+  style,
+  children,
+  testID,
+}: SwipeableActionProps) => (
+  <StyledRectButton
+    onPress={onPress}
+    themeIntent={intent}
+    style={style}
+    testID={testID}
+  >
+    {children}
+  </StyledRectButton>
+);
+
+export default SwipeableAction;

package/src/components/Swipeable/__tests__/SwipeableAction.spec.tsx

@@ -0,0 +1,37 @@
+import { fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Typography from '../../Typography';
+import SwipeableAction from '../SwipeableAction';
+
+describe('rendering', () => {
+  it.each`
+    intent
+    ${'primary'}
+    ${'success'}
+    ${'danger'}
+  `('renders correctly when intent is $intent', ({ intent }) => {
+    const { toJSON, getByText } = renderWithTheme(
+      <SwipeableAction intent={intent}>
+        <Typography.Text>Action title</Typography.Text>
+      </SwipeableAction>
+    );
+
+    expect(getByText('Action title')).toBeDefined();
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('behavior', () => {
+  it('calls onPress', () => {
+    const onPress = jest.fn();
+    const { getByText } = renderWithTheme(
+      <SwipeableAction onPress={onPress}>
+        <Typography.Text>Action title</Typography.Text>
+      </SwipeableAction>
+    );
+
+    fireEvent.press(getByText('Action title'));
+    expect(onPress).toBeCalledTimes(1);
+  });
+});

package/src/components/Swipeable/__tests__/__snapshots__/SwipeableAction.spec.tsx.snap

@@ -0,0 +1,130 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering renders correctly when intent is danger 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "backgroundColor": "#f46363",
+      "flex": 1,
+      "opacity": 1,
+    }
+  }
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+    Action title
+  </Text>
+</View>
+`;
+
+exports[`rendering renders correctly when intent is primary 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "backgroundColor": "#001f23",
+      "flex": 1,
+      "opacity": 1,
+    }
+  }
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+    Action title
+  </Text>
+</View>
+`;
+
+exports[`rendering renders correctly when intent is success 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "backgroundColor": "#5ace7d",
+      "flex": 1,
+      "opacity": 1,
+    }
+  }
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+    Action title
+  </Text>
+</View>
+`;

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

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Swipeable renders correctly 1`] = `
+<View>
+  <View
+    onSwipeableClose={[Function]}
+    onSwipeableLeftOpen={[Function]}
+    onSwipeableRightOpen={[Function]}
+    renderLeftActions={[Function]}
+    renderRightActions={[Function]}
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+    >
+      Swipeable Item
+    </Text>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Typography from '../../Typography';
+import Swipeable from '..';
+
+describe('Swipeable', () => {
+  it('renders correctly', () => {
+    const { toJSON, getByText } = renderWithTheme(
+      <Swipeable
+        leftActions={
+          <Swipeable.Action intent="primary">
+            <Typography.Text intent="inverted">Archived</Typography.Text>
+          </Swipeable.Action>
+        }
+        rightActions={
+          <>
+            <Swipeable.Action intent="success">
+              <Typography.Text>Approve</Typography.Text>
+            </Swipeable.Action>
+            <Swipeable.Action intent="danger">
+              <Typography.Text>Decline</Typography.Text>
+            </Swipeable.Action>
+          </>
+        }
+        rightActionsWidth={168}
+      >
+        <Typography.Text>Swipeable Item</Typography.Text>
+      </Swipeable>
+    );
+
+    expect(getByText('Swipeable Item')).toBeDefined();
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Swipeable/index.tsx

@@ -0,0 +1,148 @@
+import React, { ReactNode, useCallback, useEffect, useRef } from 'react';
+import { Animated, useWindowDimensions } from 'react-native';
+import type { SwipeableProps as RnghSwipeableProps } from 'react-native-gesture-handler/Swipeable';
+import {
+  Swipeable as RnghSwipeable,
+  GestureHandlerRootView,
+  RectButton,
+} from 'react-native-gesture-handler';
+import SwipeableAction from './SwipeableAction';
+
+type State = 'closed' | 'leftOpen' | 'rightOpen';
+export interface SwipeableProps
+  extends Pick<
+    RnghSwipeableProps,
+    | 'enableTrackpadTwoFingerGesture'
+    | 'friction'
+    | 'leftThreshold'
+    | 'rightThreshold'
+    | 'overshootLeft'
+    | 'overshootRight'
+    | 'overshootFriction'
+    | 'useNativeAnimations'
+    | 'containerStyle'
+    | 'childrenContainerStyle'
+  > {
+  /**
+   * React node that is swipeable.
+   */
+  children: ReactNode;
+  /**
+   * State of the component.
+   */
+  state?: 'closed' | 'leftOpen' | 'rightOpen';
+  /**
+   * Callback when the state of the component changes.
+   */
+  onStateChange?: (state: State) => void;
+  /**
+   * Action panel that is going to be revealed from the left side when user swipes right.
+   */
+  leftActions?: ReactNode;
+  /**
+   * Width of the left action panel.
+   * By default, it will take up the whole width of the device.
+   */
+  leftActionsWidth?: number;
+  /**
+   * Action panel that is going to be revealed from the right side when user swipes left.
+   */
+  rightActions?: ReactNode;
+  /**
+   * Width of the right action panel.
+   * By default, it will take up the whole width of the device.
+   */
+  rightActionsWidth?: number;
+}
+
+const renderActions = (
+  actions: ReactNode,
+  width: number,
+  progress: Animated.AnimatedInterpolation,
+  direction: 'left' | 'right'
+) => {
+  const trans = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: direction === 'left' ? [-width, 0] : [width, 0],
+    extrapolate: 'clamp',
+  });
+
+  return (
+    <Animated.View
+      style={{
+        width,
+        flexDirection: 'row',
+        transform: [{ translateX: trans }],
+      }}
+    >
+      {actions}
+    </Animated.View>
+  );
+};
+
+const Swipeable = ({
+  children,
+  state,
+  onStateChange,
+  leftActions,
+  leftActionsWidth,
+  rightActions,
+  rightActionsWidth,
+  ...swipeableProps
+}: SwipeableProps) => {
+  const { width } = useWindowDimensions();
+  const swipeableRef = useRef<RnghSwipeable>(null);
+
+  const renderLeftActions = useCallback(
+    (progress: Animated.AnimatedInterpolation) =>
+      renderActions(leftActions, leftActionsWidth || width, progress, 'left'),
+    [leftActions, leftActionsWidth, width]
+  );
+  const renderRightActions = useCallback(
+    (progress: Animated.AnimatedInterpolation) =>
+      renderActions(
+        rightActions,
+        rightActionsWidth || width,
+        progress,
+        'right'
+      ),
+    [rightActions, rightActionsWidth, width]
+  );
+
+  useEffect(() => {
+    if (swipeableRef.current === null) return;
+
+    switch (state) {
+      case 'leftOpen':
+        swipeableRef.current.openLeft();
+        break;
+      case 'rightOpen':
+        swipeableRef.current.openRight();
+        break;
+      case 'closed':
+        swipeableRef.current.close();
+        break;
+    }
+  }, [state]);
+
+  return (
+    <GestureHandlerRootView>
+      <RnghSwipeable
+        {...swipeableProps}
+        ref={swipeableRef}
+        {...(leftActions !== undefined && { renderLeftActions })}
+        {...(rightActions !== undefined && { renderRightActions })}
+        onSwipeableLeftOpen={() => onStateChange?.('leftOpen')}
+        onSwipeableRightOpen={() => onStateChange?.('rightOpen')}
+        onSwipeableClose={() => onStateChange?.('closed')}
+      >
+        {children}
+      </RnghSwipeable>
+    </GestureHandlerRootView>
+  );
+};
+
+export default Object.assign(Swipeable, {
+  Action: SwipeableAction,
+  Content: RectButton,
+});

package/src/components/TextInput/StyledTextInput.tsx

@@ -2,27 +2,11 @@ import { TextInput, View, StyleSheet } from 'react-native';
 import styled from '@emotion/native';
 import Typography from '../Typography';
 
-export type Variant =
-  | 'default'
-  | 'filled'
-  | 'focused'
-  | 'disabled'
-  | 'readonly'
-  | 'error';
-
-const StyledContainer = styled(View)<{
-  themeVariant: Variant;
-}>(({ theme, themeVariant }) => ({
+export type Variant = 'default' | 'filled' | 'disabled' | 'readonly' | 'error';
+
+const StyledContainer = styled(View)(({ theme }) => ({
   width: '100%',
   marginVertical: theme.__hd__.textInput.space.containerMarginVertical,
-  borderWidth:
-    themeVariant === 'focused'
-      ? theme.__hd__.textInput.borderWidths.container.focused
-      : theme.__hd__.textInput.borderWidths.container.normal,
-  borderRadius: theme.__hd__.textInput.radii.container,
-  borderColor:
-    theme.__hd__.textInput.colors.borders[themeVariant] ??
-    theme.__hd__.textInput.colors.borders.default,
 }));
 
 const StyledLabelContainer = styled(View)(({ theme }) => ({
@@ -107,6 +91,20 @@ const StyledTextInput = styled(TextInput)(({ theme }) => ({
   marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin,
 }));
 
+const StyledBorderBackDrop = styled(View)<{
+  themeVariant: Variant;
+  themeFocused: boolean;
+}>(({ theme, themeFocused, themeVariant }) => ({
+  ...StyleSheet.absoluteFillObject,
+  borderWidth: themeFocused
+    ? theme.__hd__.textInput.borderWidths.container.focused
+    : theme.__hd__.textInput.borderWidths.container.normal,
+  borderRadius: theme.__hd__.textInput.radii.container,
+  borderColor:
+    theme.__hd__.textInput.colors.borders[themeVariant] ??
+    theme.__hd__.textInput.colors.borders.default,
+}));
+
 const StyledTextInputContainer = styled(View)(({ theme }) => ({
   flexDirection: 'row',
   alignItems: 'center',
@@ -147,5 +145,6 @@ export {
   StyledTextInputAndLabelContainer,
   StyledLabelContainerInsideTextInput,
   StyledErrorAndHelpTextContainer,
+  StyledBorderBackDrop,
   StyledErrorAndMaxLengthContainer,
 };

package/src/components/TextInput/__tests__/StyledTextInput.spec.tsx

@@ -10,7 +10,7 @@ import {
   StyledAsteriskLabel,
   StyledLabelContainer,
   StyledLabelInsideTextInput,
-  StyledContainer,
+  StyledBorderBackDrop,
 } from '../StyledTextInput';
 
 describe('Label', () => {
@@ -18,7 +18,6 @@ describe('Label', () => {
     themeVariant
     ${'default'}
     ${'filled'}
-    ${'focused'}
     ${'error'}
     ${'disabled'}
     ${'readonly'}
@@ -35,7 +34,6 @@ describe('LabelInsideTextInput', () => {
     themeVariant
     ${'default'}
     ${'filled'}
-    ${'focused'}
     ${'error'}
     ${'disabled'}
     ${'readonly'}
@@ -66,7 +64,6 @@ describe('StyledAsteriskLabel', () => {
     themeVariant
     ${'default'}
     ${'filled'}
-    ${'focused'}
     ${'error'}
     ${'disabled'}
     ${'readonly'}
@@ -105,7 +102,6 @@ describe('StyledMaxLengthMessage', () => {
     themeVariant
     ${'default'}
     ${'filled'}
-    ${'focused'}
     ${'error'}
     ${'disabled'}
     ${'readonly'}
@@ -133,12 +129,11 @@ describe('StyledHelperText', () => {
   });
 });
 
-describe('StyledContainer', () => {
+describe('StyledBorderBackDrop', () => {
   it.each`
     themeVariant
     ${'default'}
     ${'filled'}
-    ${'focused'}
     ${'error'}
     ${'disabled'}
     ${'readonly'}
@@ -146,12 +141,23 @@ describe('StyledContainer', () => {
     'renders correctly with themeVariant $themeVariant',
     ({ themeVariant }): void => {
       const { toJSON } = renderWithTheme(
-        <StyledContainer themeVariant={themeVariant} />
+        <StyledBorderBackDrop
+          themeVariant={themeVariant}
+          themeFocused={false}
+        />
       );
 
       expect(toJSON()).toMatchSnapshot();
     }
   );
+
+  it('renders correctly when focused', (): void => {
+    const { toJSON } = renderWithTheme(
+      <StyledBorderBackDrop themeVariant="error" themeFocused />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
 });
 
 describe('StyledTextInput', () => {