@hero-design/rn 7.0.5 → 7.1.1

package/playground/components/FAB.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+/* eslint-disable import/no-extraneous-dependencies */
+import {
+  SafeAreaProvider,
+  SafeAreaView,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
+import { FAB, useTheme } from '../../src/index';
+
+const FABPlayground = (): JSX.Element => {
+  const [active, setActive] = useState(false);
+  const insets = useSafeAreaInsets();
+  const theme = useTheme();
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={{ flex: 1 }} edges={['right', 'left']}>
+        <FAB
+          icon="add"
+          onPress={() => {
+            setActive(!active);
+          }}
+          animated
+          active={active}
+          style={{
+            position: 'absolute',
+            bottom: Math.max(insets.bottom, theme.space.large),
+            right: theme.space.large,
+          }}
+        />
+
+        <FAB
+          icon="share-1"
+          onPress={() => {
+            alert('button pressed');
+          }}
+          style={{
+            backgroundColor: theme.colors.primary,
+            position: 'absolute',
+            bottom: Math.max(insets.bottom, theme.space.large),
+            left: theme.space.large,
+          }}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+export default FABPlayground;

package/playground/index.tsx

@@ -6,7 +6,6 @@ import {
   NativeStackScreenProps,
 } from '@react-navigation/native-stack';
 import { useFonts } from 'expo-font';
-/* eslint-enable import/no-extraneous-dependencies */
 import { SafeAreaView, FlatList, Text } from 'react-native';
 import { ThemeProvider, theme, useTheme } from '../src/index';
 import BadgePlayground from './components/Badge';
@@ -14,6 +13,7 @@ import CardPlayground from './components/Card';
 import DividerPlayground from './components/Divider';
 import IconPlayground from './components/Icon';
 import TypographyPlayground from './components/Typography';
+import FABPlayground from './components/FAB';
 
 const heroIconFontPath = require('../assets/fonts/hero-icons.ttf');
 
@@ -24,6 +24,7 @@ type RootStackParamList = {
   Divider: undefined;
   Icon: undefined;
   Typography: undefined;
+  FAB: undefined;
 };
 
 type Navigation = NativeStackScreenProps<RootStackParamList>;
@@ -36,6 +37,7 @@ const components = [
   { name: 'Divider', component: DividerPlayground },
   { name: 'Icon', component: IconPlayground },
   { name: 'Typography', component: TypographyPlayground },
+  { name: 'FAB', component: FABPlayground },
 ] as const;
 
 const ComponentItem = ({

package/src/components/Card/StyledCard.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components-native';
 const StyledCard = styled(View)<{}>`
   border-radius: ${({ theme }) => theme.__hd__.card.radii.default};
   padding: ${({ theme }) => theme.__hd__.card.padding.default};
+  overflow: hidden;
 `;
 
 export { StyledCard };

package/src/components/Card/__tests__/__snapshots__/Card.spec.tsx.snap

@@ -20,10 +20,11 @@ exports[`Card renders correct 1`] = `
         "borderBottomRightRadius": 12,
         "borderTopLeftRadius": 12,
         "borderTopRightRadius": 12,
-        "paddingBottom": 16,
-        "paddingLeft": 16,
-        "paddingRight": 16,
-        "paddingTop": 16,
+        "overflow": "hidden",
+        "paddingBottom": 8,
+        "paddingLeft": 8,
+        "paddingRight": 8,
+        "paddingTop": 8,
       },
       Object {
         "backgroundColor": "#292a2b",

package/src/components/Card/__tests__/__snapshots__/StyledCard.spec.tsx.snap

@@ -8,10 +8,11 @@ exports[`StyledCard renders correct style 1`] = `
       "borderBottomRightRadius": 12,
       "borderTopLeftRadius": 12,
       "borderTopRightRadius": 12,
-      "paddingBottom": 16,
-      "paddingLeft": 16,
-      "paddingRight": 16,
-      "paddingTop": 16,
+      "overflow": "hidden",
+      "paddingBottom": 8,
+      "paddingLeft": 8,
+      "paddingRight": 8,
+      "paddingTop": 8,
     }
   }
 />

package/src/components/FAB/AnimatedFABIcon.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, StyleSheet } from 'react-native';
+import { IconProps } from '../Icon';
+import { StyledFABIcon } from './StyledFABIcon';
+
+const AnimatedIcons = Animated.createAnimatedComponent(StyledFABIcon);
+
+type Props = {
+  active?: boolean;
+} & IconProps;
+
+const AnimatedFABIcon = ({ active, ...iconProps }: Props) => {
+  const rotateAnimation = useRef<Animated.Value>(
+    new Animated.Value(active ? 1 : 0)
+  );
+  useEffect(() => {
+    const animation = Animated.timing(rotateAnimation.current, {
+      toValue: active ? 1 : 0,
+      useNativeDriver: true,
+    });
+
+    animation.start();
+
+    return () => {
+      animation.stop();
+    };
+  }, [active]);
+
+  const interpolatedRotateAnimation = rotateAnimation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '-45deg'],
+  });
+
+  return (
+    <Animated.View
+      style={StyleSheet.flatten([
+        {
+          transform: [{ rotate: interpolatedRotateAnimation }],
+        },
+      ])}
+    >
+      <AnimatedIcons {...iconProps} />
+    </Animated.View>
+  );
+};
+
+export { AnimatedFABIcon };

package/src/components/FAB/StyledFABContainer.tsx

@@ -0,0 +1,14 @@
+import { TouchableHighlight, TouchableHighlightProps } from 'react-native';
+import styled from 'styled-components-native';
+
+const StyledFABContainer = styled(TouchableHighlight)<TouchableHighlightProps>`
+  height: ${({ theme }) => theme.__hd__.fab.sizes.height};
+  width: ${({ theme }) => theme.__hd__.fab.sizes.width};
+  background-color: ${({ theme }) => theme.__hd__.fab.colors.buttonBackground};
+  border-radius: 999px;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+`;
+
+export { StyledFABContainer };

package/src/components/FAB/StyledFABIcon.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components-native';
+import Icon, { IconProps } from '../Icon';
+
+const StyledFABIcon = styled(Icon)<IconProps>`
+  color: ${({ theme }) => theme.__hd__.fab.colors.icon};
+  font-size: ${({ theme }) => theme.__hd__.fab.fontSizes.default};
+`;
+
+export { StyledFABIcon };

package/src/components/FAB/__tests__/AnimatedFABIcon.spec.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider, theme } from '../../../index';
+import { AnimatedFABIcon } from '../AnimatedFABIcon';
+
+describe('AnimatedFABIcon', () => {
+  it.each`
+    active
+    ${true}
+    ${false}
+  `('renders correctly when isActive is $active', ({ active }) => {
+    const { toJSON } = render(
+      <ThemeProvider theme={theme}>
+        <AnimatedFABIcon active={active} icon="add" />
+      </ThemeProvider>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/FAB/__tests__/StyledFABContainer.spec.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider, theme, Typography } from '../../../index';
+import { StyledFABContainer } from '../StyledFABContainer';
+
+describe('StyledFABContainer', () => {
+  it('renders correctly', () => {
+    const { toJSON } = render(
+      <ThemeProvider theme={theme}>
+        <StyledFABContainer>
+          <Typography.Text> button </Typography.Text>
+        </StyledFABContainer>
+      </ThemeProvider>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/FAB/__tests__/StyledFABIcon.spec.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider, theme } from '../../../index';
+import { StyledFABIcon } from '../StyledFABIcon';
+
+describe('StyledFABIcon', () => {
+  it('renders correctly', () => {
+    const { toJSON } = render(
+      <ThemeProvider theme={theme}>
+        <StyledFABIcon icon="add" />
+      </ThemeProvider>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/FAB/__tests__/__snapshots__/AnimatedFABIcon.spec.tsx.snap

@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AnimatedFABIcon renders correctly when isActive is false 1`] = `
+<View
+  collapsable={false}
+  nativeID="animatedComponent"
+  style={
+    Object {
+      "transform": Array [
+        Object {
+          "rotate": "0deg",
+        },
+      ],
+    }
+  }
+>
+  <HeroIcon
+    name="add"
+    style={
+      Array [
+        Object {
+          "color": "#292a2b",
+          "fontSize": 24,
+        },
+        Object {
+          "color": "#ffffff",
+          "fontSize": 28,
+        },
+        Object {},
+      ]
+    }
+    themeIntent="text"
+    themeSize="medium"
+  />
+</View>
+`;
+
+exports[`AnimatedFABIcon renders correctly when isActive is true 1`] = `
+<View
+  collapsable={false}
+  nativeID="animatedComponent"
+  style={
+    Object {
+      "transform": Array [
+        Object {
+          "rotate": "-45deg",
+        },
+      ],
+    }
+  }
+>
+  <HeroIcon
+    name="add"
+    style={
+      Array [
+        Object {
+          "color": "#292a2b",
+          "fontSize": 24,
+        },
+        Object {
+          "color": "#ffffff",
+          "fontSize": 28,
+        },
+        Object {},
+      ]
+    }
+    themeIntent="text"
+    themeSize="medium"
+  />
+</View>
+`;

package/src/components/FAB/__tests__/__snapshots__/StyledFABContainer.spec.tsx.snap

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledFABContainer renders correctly 1`] = `
+<View
+  accessible={true}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#292a2b",
+      "borderBottomLeftRadius": 999,
+      "borderBottomRightRadius": 999,
+      "borderTopLeftRadius": 999,
+      "borderTopRightRadius": 999,
+      "height": 64,
+      "justifyContent": "center",
+      "overflow": "hidden",
+      "width": 64,
+    }
+  }
+>
+  <Text
+    style={
+      Object {
+        "color": "#292a2b",
+        "fontSize": 14,
+        "fontWeight": "400",
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      }
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+     button 
+  </Text>
+</View>
+`;

package/src/components/FAB/__tests__/__snapshots__/StyledFABIcon.spec.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledFABIcon renders correctly 1`] = `
+<HeroIcon
+  name="add"
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontSize": 24,
+      },
+      Object {
+        "color": "#ffffff",
+        "fontSize": 28,
+      },
+    ]
+  }
+  themeIntent="text"
+  themeSize="medium"
+/>
+`;

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

@@ -0,0 +1,120 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FAB when animated is false renders styledFABIcon 1`] = `
+<View
+  accessible={true}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#292a2b",
+        "borderBottomLeftRadius": 999,
+        "borderBottomRightRadius": 999,
+        "borderTopLeftRadius": 999,
+        "borderTopRightRadius": 999,
+        "height": 64,
+        "justifyContent": "center",
+        "overflow": "hidden",
+        "width": 64,
+      },
+      Object {
+        "backgroundColor": "#292a2b",
+      },
+    ]
+  }
+>
+  <HeroIcon
+    name="add"
+    style={
+      Array [
+        Object {
+          "color": "#292a2b",
+          "fontSize": 24,
+        },
+        Object {
+          "color": "#ffffff",
+          "fontSize": 28,
+        },
+      ]
+    }
+    testID="styledFABIcon"
+    themeIntent="text"
+    themeSize="medium"
+  />
+</View>
+`;
+
+exports[`FAB when animated is true renders animatedFABIcon 1`] = `
+<View
+  accessible={true}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#292a2b",
+        "borderBottomLeftRadius": 999,
+        "borderBottomRightRadius": 999,
+        "borderTopLeftRadius": 999,
+        "borderTopRightRadius": 999,
+        "height": 64,
+        "justifyContent": "center",
+        "overflow": "hidden",
+        "width": 64,
+      },
+      Object {
+        "backgroundColor": "#292a2b",
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "rotate": "0deg",
+          },
+        ],
+      }
+    }
+  >
+    <HeroIcon
+      name="add"
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 24,
+          },
+          Object {
+            "color": "#ffffff",
+            "fontSize": 28,
+          },
+          Object {},
+        ]
+      }
+      testID="animatedFABIcon"
+      themeIntent="text"
+      themeSize="medium"
+    />
+  </View>
+</View>
+`;

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react-native';
+import { ThemeProvider, theme } from '../../../index';
+import FAB from '..';
+
+describe('FAB', () => {
+  describe('when animated is true', () => {
+    it('renders animatedFABIcon', () => {
+      const { queryAllByTestId, toJSON } = render(
+        <ThemeProvider theme={theme}>
+          <FAB
+            icon="add"
+            animated
+            style={{ backgroundColor: theme.colors.backgroundDark }}
+          />
+        </ThemeProvider>
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryAllByTestId('animatedFABIcon')).toHaveLength(1);
+    });
+  });
+
+  describe('when animated is false', () => {
+    it('renders styledFABIcon', () => {
+      const { queryAllByTestId, toJSON } = render(
+        <ThemeProvider theme={theme}>
+          <FAB
+            icon="add"
+            style={{ backgroundColor: theme.colors.backgroundDark }}
+          />
+        </ThemeProvider>
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryAllByTestId('styledFABIcon')).toHaveLength(1);
+    });
+  });
+
+  describe('when onPress', () => {
+    it('triggers onPress', () => {
+      const onPressSpy = jest.fn();
+      const { getByTestId } = render(
+        <ThemeProvider theme={theme}>
+          <FAB
+            onPress={onPressSpy}
+            icon="add"
+            style={{ backgroundColor: theme.colors.backgroundDark }}
+            testID="FAB"
+          />
+        </ThemeProvider>
+      );
+
+      fireEvent(getByTestId('FAB'), 'press');
+      expect(onPressSpy).toBeCalledTimes(1);
+    });
+  });
+});

package/src/components/FAB/index.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { IconProps } from '../Icon';
+import { AnimatedFABIcon } from './AnimatedFABIcon';
+import { StyledFABContainer } from './StyledFABContainer';
+import { StyledFABIcon } from './StyledFABIcon';
+
+interface FABProps {
+  /**
+   * Name of the Icon.
+   */
+  icon: IconProps['icon'];
+
+  /**
+   * This function is called on pressing the button.
+   * */
+  onPress?: () => void;
+
+  /**
+   * Specify if the button is animated.
+   */
+  animated?: boolean;
+
+  /**
+   * Specify if the button is in active state. It only works if animated is true.
+   */
+  active?: boolean;
+  /**
+   * Addditional style.
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const FAB = ({ onPress, icon, animated, testID, active, style }: FABProps) => (
+  <StyledFABContainer
+    testID={testID}
+    onPress={() => {
+      onPress?.();
+    }}
+    activeOpacity={0.6}
+    style={style}
+  >
+    {animated ? (
+      <AnimatedFABIcon active={active} icon={icon} testID="animatedFABIcon" />
+    ) : (
+      <StyledFABIcon icon={icon} testID="styledFABIcon" />
+    )}
+  </StyledFABContainer>
+);
+
+export default FAB;

package/src/components/Icon/index.tsx

@@ -5,7 +5,7 @@ import HeroIcon from './HeroIcon';
 
 type IconName = typeof IconList[number];
 
-interface IconProps {
+export interface IconProps {
   /**
    * Name of the Icon.
    */

package/src/index.ts

@@ -1,20 +1,24 @@
 import { ThemeProvider, useTheme } from 'styled-components-native';
 import theme, { getTheme } from './theme';
+import { scale } from './utils/scale';
 
 import Badge from './components/Badge';
 import Card from './components/Card';
 import Divider from './components/Divider';
 import Icon from './components/Icon';
 import Typography from './components/Typography';
+import FAB from './components/FAB';
 
 export {
   theme,
   getTheme,
   useTheme,
+  scale,
   ThemeProvider,
   Badge,
   Card,
   Divider,
   Icon,
   Typography,
+  FAB,
 };