@hero-design/rn 9.0.0-0 → 9.0.0-alpha.0

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Rate from '..';
+
+const ratingData = [
+  { value: 1 },
+  { value: 2 },
+  { value: 3 },
+  { value: 4 },
+  { value: 5 },
+];
+
+describe('Rate', () => {
+  it('renders correctly', () => {
+    const onChange = jest.fn();
+    const { toJSON, getByTestId } = renderWithTheme(
+      <Rate value={3} onChange={onChange} options={ratingData} />
+    );
+
+    fireEvent.press(getByTestId('1'));
+    expect(onChange).toHaveBeenCalled();
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly it is readonly', () => {
+    const onChange = jest.fn();
+    const { getByTestId, toJSON } = renderWithTheme(
+      <Rate readonly value={3} onChange={onChange} options={ratingData} />
+    );
+
+    fireEvent.press(getByTestId('1'));
+    expect(onChange).toBeCalledTimes(0);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly when disabled', () => {
+    const onChange = jest.fn();
+    const { getByTestId, toJSON } = renderWithTheme(
+      <Rate disabled value={3} onChange={onChange} options={ratingData} />
+    );
+
+    fireEvent.press(getByTestId('1'));
+    expect(onChange).toBeCalledTimes(0);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Rate/index.tsx

@@ -0,0 +1,90 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { Animated, Platform, Pressable, ViewProps } from 'react-native';
+import Icon from '../Icon';
+import { StyledIconWrapper, StyledWrapper } from './StyledRate';
+
+export interface RateOption<T extends string | number> {
+  value: T;
+}
+
+export interface RateProps<T extends string | number> extends ViewProps {
+  /**
+   * Options for rate component.
+   */
+  options: RateOption<T>[];
+  /**
+   * Value of the component.
+   */
+  value?: T;
+  /**
+   * Callback when value changes.
+   */
+  onChange?: (value: T) => void;
+  /**
+   * Whether the component is readonly.
+   */
+  readonly?: boolean;
+  /**
+   * Whether the component is disabled.
+   */
+  disabled?: boolean;
+}
+
+const Rate = <T extends string | number>({
+  options,
+  value,
+  onChange,
+  readonly = false,
+  disabled = false,
+  ...otherProps
+}: RateProps<T>) => {
+  const valueIndex = useMemo(
+    () => options.findIndex((item) => item.value === value),
+    [value, options]
+  );
+
+  const animatedValue = useRef(new Animated.Value(0)).current;
+
+  const scale = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0.8, 1],
+  });
+
+  useEffect(() => {
+    animatedValue.setValue(0);
+
+    Animated.spring(animatedValue, {
+      toValue: 1,
+      useNativeDriver: Platform.OS !== 'web',
+    }).start();
+  }, [value, animatedValue]);
+
+  return (
+    <StyledWrapper {...otherProps}>
+      {options.length > 0 &&
+        options.map((item, index) => (
+          <Pressable
+            key={item.value}
+            disabled={disabled || readonly}
+            onPress={() => onChange?.(item.value)}
+            testID={item.value.toString()}
+          >
+            <StyledIconWrapper
+              style={
+                valueIndex === index && {
+                  transform: [{ scale }],
+                }
+              }
+            >
+              <Icon
+                icon={index <= valueIndex ? 'star' : 'star-outlined'}
+                intent={disabled ? 'disabled-text' : 'primary'}
+              />
+            </StyledIconWrapper>
+          </Pressable>
+        ))}
+    </StyledWrapper>
+  );
+};
+
+export default Rate;

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

@@ -1,69 +1,153 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`RefreshControl render correctly with props 1`] = `
-<RCTScrollView
-  contentContainerStyle={
-    Object {
+<View
+  style={
+    {
       "flex": 1,
     }
   }
-  refreshControl={
-    <RefreshControl
-      onRefresh={[MockFunction]}
-      progressViewOffset={100}
-      refreshing={true}
-    />
-  }
 >
-  <RCTRefreshControl />
-  <View>
-    <Text>
-      Pull down to see RefreshControl indicator
-    </Text>
-  </View>
-</RCTScrollView>
+  <RCTScrollView
+    contentContainerStyle={
+      {
+        "flex": 1,
+      }
+    }
+    refreshControl={
+      <RefreshControl
+        onRefresh={[MockFunction]}
+        progressViewOffset={100}
+        refreshing={true}
+      />
+    }
+  >
+    <RCTRefreshControl />
+    <View>
+      <Text>
+        Pull down to see RefreshControl indicator
+      </Text>
+    </View>
+  </RCTScrollView>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`RefreshControl renders correctly when refreshing is false 1`] = `
-<RCTScrollView
-  contentContainerStyle={
-    Object {
+<View
+  style={
+    {
       "flex": 1,
     }
   }
-  refreshControl={
-    <RefreshControl
-      refreshing={false}
-    />
-  }
 >
-  <RCTRefreshControl />
-  <View>
-    <Text>
-      Pull down to see RefreshControl indicator
-    </Text>
-  </View>
-</RCTScrollView>
+  <RCTScrollView
+    contentContainerStyle={
+      {
+        "flex": 1,
+      }
+    }
+    refreshControl={
+      <RefreshControl
+        refreshing={false}
+      />
+    }
+  >
+    <RCTRefreshControl />
+    <View>
+      <Text>
+        Pull down to see RefreshControl indicator
+      </Text>
+    </View>
+  </RCTScrollView>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`RefreshControl renders correctly when refreshing is true 1`] = `
-<RCTScrollView
-  contentContainerStyle={
-    Object {
+<View
+  style={
+    {
       "flex": 1,
     }
   }
-  refreshControl={
-    <RefreshControl
-      refreshing={true}
-    />
-  }
 >
-  <RCTRefreshControl />
-  <View>
-    <Text>
-      Pull down to see RefreshControl indicator
-    </Text>
-  </View>
-</RCTScrollView>
+  <RCTScrollView
+    contentContainerStyle={
+      {
+        "flex": 1,
+      }
+    }
+    refreshControl={
+      <RefreshControl
+        refreshing={true}
+      />
+    }
+  >
+    <RCTRefreshControl />
+    <View>
+      <Text>
+        Pull down to see RefreshControl indicator
+      </Text>
+    </View>
+  </RCTScrollView>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -10,15 +10,14 @@ import React, {
   useState,
 } from 'react';
 
-import { TouchableWithoutFeedback } from 'react-native';
+import { Animated, TouchableWithoutFeedback, Easing } from 'react-native';
 import { WebView } from 'react-native-webview';
 import type { ComponentType, ReactElement, Ref } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle, LayoutChangeEvent } from 'react-native';
 import heroEditorApp from './heroEditorApp';
 import { isAndroid } from '../../utils/helpers';
 import Icon from '../Icon';
 import {
-  StyledAsteriskLabel,
   StyledAsteriskLabelInsideTextInput,
   StyledBorderBackDrop,
   StyledContainer,
@@ -27,8 +26,6 @@ import {
   StyledErrorAndMaxLengthContainer,
   StyledErrorContainer,
   StyledHelperText,
-  StyledLabel,
-  StyledLabelContainer,
   StyledLabelContainerInsideTextInput,
   StyledLabelInsideTextInput,
   StyledTextInputAndLabelContainer,
@@ -40,6 +37,7 @@ import { StyledWebView } from './StyledRichTextEditor';
 import * as Events from './utils/events';
 import { postMessage, requestBlurEditor } from './utils/rnWebView';
 import type { WebViewEventMessage } from './utils/rnWebView';
+import { LABEL_ANIMATION_DURATION } from '../TextInput';
 
 export interface RichTextEditorRef {
   requestBlur: VoidFunction;
@@ -150,6 +148,32 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
       postMessage(webview.current, message);
     }
   };
+  const [inputSize, setInputSize] = React.useState<{
+    height: number;
+    width: number;
+  }>({ height: 0, width: 0 });
+  const [labelWidth, setLabelWidth] = React.useState<number>(0);
+
+  const focusAnimation = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.timing(focusAnimation, {
+      toValue: isFocused || !isEmptyValue ? 1 : 0,
+      duration: LABEL_ANIMATION_DURATION,
+      easing: Easing.bezier(0.4, 0, 0.2, 1),
+      useNativeDriver: true,
+    }).start();
+  }, [focusAnimation, isEmptyValue, isFocused]);
+
+  const onLayout = useCallback((event: LayoutChangeEvent) => {
+    const { height, width } = event.nativeEvent.layout;
+    setInputSize((prev) => ({ ...prev, height, width }));
+  }, []);
+
+  const onLabelLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width } = event.nativeEvent.layout;
+    setLabelWidth(width);
+  }, []);
 
   useEffect(() => {
     const removeFocusListener = Events.on(
@@ -307,48 +331,68 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
 
   return (
     <StyledContainer testID={testID}>
-      <StyledTextInputContainer>
-        <StyledBorderBackDrop themeState={state} themeFocused={isFocused} />
-        {(isFocused || (label && !isEmptyValue)) && (
-          <StyledLabelContainer pointerEvents="none">
-            {required && (
-              <StyledAsteriskLabel themeState={state} fontSize="small">
-                *
-              </StyledAsteriskLabel>
-            )}
-            {!!label && (
-              <StyledLabel
-                testID="input-label"
-                fontSize="small"
-                themeState={state}
-              >
-                {label}
-              </StyledLabel>
-            )}
-          </StyledLabelContainer>
+      <StyledLabelContainerInsideTextInput
+        themeVariant="text"
+        pointerEvents="none"
+        testID="input-label-container"
+        style={[
+          {
+            position: 'absolute',
+          },
+          {
+            transform: [
+              {
+                translateY: focusAnimation.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [inputSize.height / 2, 0],
+                }),
+              },
+              {
+                translateX: focusAnimation.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [
+                    -inputSize.width / 2 + labelWidth / 2 + theme.space.large,
+                    -inputSize.width / 2 + labelWidth / 2 + theme.space.small,
+                  ],
+                }),
+              },
+              {
+                scale: focusAnimation.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [1, 0.75],
+                }),
+              },
+            ],
+          },
+        ]}
+      >
+        {required && (
+          <StyledAsteriskLabelInsideTextInput
+            style={{
+              backgroundColor: theme.__hd__.textInput.colors.labelBackground,
+            }}
+            themeState={state}
+          >
+            *
+          </StyledAsteriskLabelInsideTextInput>
         )}
+        {!!label && (
+          <StyledLabelInsideTextInput
+            style={{
+              backgroundColor: theme.__hd__.textInput.colors.labelBackground,
+            }}
+            testID="input-label"
+            themeState={state}
+            onLayout={onLabelLayout}
+          >
+            {label}
+          </StyledLabelInsideTextInput>
+        )}
+      </StyledLabelContainerInsideTextInput>
+      <StyledTextInputContainer onLayout={onLayout}>
+        <StyledBorderBackDrop themeState={state} themeFocused={isFocused} />
+
         <StyledTextInputAndLabelContainer>
-          {!isFocused && isEmptyValue && (
-            <StyledLabelContainerInsideTextInput
-              themeVariant="text"
-              pointerEvents="none"
-            >
-              {required && (
-                <StyledAsteriskLabelInsideTextInput themeState={state}>
-                  *
-                </StyledAsteriskLabelInsideTextInput>
-              )}
-              {!!label && (
-                <StyledLabelInsideTextInput
-                  testID="input-label"
-                  fontSize="medium"
-                  themeState={state}
-                >
-                  {label}
-                </StyledLabelInsideTextInput>
-              )}
-            </StyledLabelContainerInsideTextInput>
-          )}
           <TouchableWithoutFeedback onPress={(e) => e.stopPropagation()}>
             <StyledWebView
               ref={webview}
@@ -385,8 +429,11 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
     </StyledContainer>
   );
 };
-
-export default forwardRef<
+const RichTextEditorWithRef = forwardRef<
   RichTextEditorRef,
   Omit<RichTextEditorProps, 'forwardedRef'>
 >((props, ref) => <RichTextEditor {...props} forwardedRef={ref} />);
+
+RichTextEditorWithRef.displayName = 'RichTextEditor';
+
+export default RichTextEditorWithRef;

package/src/components/RichTextEditor/__tests__/EditorToolbar.spec.tsx

@@ -9,8 +9,11 @@ import * as Events from '../utils/events';
 
 describe('EditorToolbar', () => {
   it('should not render toolbar when the editor is not focused', () => {
-    const wrapper = renderWithTheme(<EditorToolbar name="toolbar" />);
-    expect(wrapper.toJSON()).toBeNull();
+    const wrapper = renderWithTheme(
+      <EditorToolbar testID="editor-toolbar" name="toolbar" />
+    );
+    const toolbar = wrapper.queryByTestId('editor-toolbar');
+    expect(toolbar).toBeNull();
   });
 
   describe('when the editor is focused', () => {

package/src/components/RichTextEditor/__tests__/RichTextEditor.spec.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 
 import { act } from '@testing-library/react-native';
 
-import { ThemeProvider } from '@emotion/react';
 import type { ReactElement } from 'react';
 import type { RenderAPI } from '@testing-library/react-native';
 import * as Events from '../utils/events';
@@ -10,6 +9,7 @@ import { emitter as EditorEventEmitter } from '../EditorEvent';
 import RichTextEditor from '../RichTextEditor';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import { theme } from '../../../index';
+import HeroDesignProvider from '../../HeroDesignProvider';
 
 type OnMessageCallback = (event: {
   nativeEvent: { data: string };
@@ -188,7 +188,7 @@ describe('RichTextEditor', () => {
         });
 
         wrapper.update(
-          <ThemeProvider theme={theme}>
+          <HeroDesignProvider theme={theme}>
             <RichTextEditor
               onChange={jest.fn()}
               label="Rich Text Editor"
@@ -196,7 +196,7 @@ describe('RichTextEditor', () => {
               error="this is error"
               style={{ backgroundColor: 'yellow' }}
             />
-          </ThemeProvider>
+          </HeroDesignProvider>
         );
 
         expect(wrapper.toJSON()).toMatchSnapshot();