@hero-design/rn 7.18.1 → 7.20.0

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

@@ -0,0 +1,155 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Box from '..';
+
+describe('Box', () => {
+  it('renders content correctly', () => {
+    const { toJSON, getByTestId, getByText } = renderWithTheme(
+      <Box testID="box-test-id">
+        <Text>Box Content</Text>
+      </Box>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByTestId('box-test-id')).toBeTruthy();
+    expect(getByText('Box Content')).toBeTruthy();
+  });
+  it.each`
+    color
+    ${'warning'}
+    ${'danger'}
+    ${'success'}
+    ${'backgroundDark'}
+  `('map prop to valid property and correct color from theme', ({ color }) => {
+    const { toJSON } = renderWithTheme(
+      <Box
+        backgroundColor={color}
+        borderColor={color}
+        borderTopColor={color}
+        borderBottomColor={color}
+        borderStartColor={color}
+        borderEndColor={color}
+        borderLeftColor={color}
+        borderRightColor={color}
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it.each`
+    color
+    ${'warning'}
+    ${'danger'}
+    ${'success'}
+    ${'backgroundDark'}
+  `(
+    'map prop with shortcut name to valid property and correct color from theme',
+    ({ color }) => {
+      const { toJSON } = renderWithTheme(<Box bgColor={color} />);
+
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+
+  it.each`
+    space
+    ${'large'}
+    ${'medium'}
+    ${'small'}
+    ${'xlarge'}
+  `('map prop to valid property and correct space from theme', ({ space }) => {
+    const { toJSON } = renderWithTheme(
+      <Box
+        margin={space}
+        marginBottom={space}
+        marginEnd={space}
+        marginHorizontal={space}
+        marginLeft={space}
+        marginRight={space}
+        marginStart={space}
+        marginTop={space}
+        marginVertical={space}
+        padding={space}
+        paddingBottom={space}
+        paddingEnd={space}
+        paddingHorizontal={space}
+        paddingLeft={space}
+        paddingRight={space}
+        paddingStart={space}
+        paddingTop={space}
+        paddingVertical={space}
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it.each`
+    radii
+    ${'base'}
+    ${'large'}
+    ${'medium'}
+    ${'xlarge'}
+    ${'rounded'}
+  `('map prop to valid property and correct radius from theme', ({ radii }) => {
+    const { toJSON } = renderWithTheme(
+      <Box
+        borderBottomEndRadius={radii}
+        borderBottomLeftRadius={radii}
+        borderBottomRightRadius={radii}
+        borderBottomStartRadius={radii}
+        borderTopEndRadius={radii}
+        borderTopLeftRadius={radii}
+        borderTopRightRadius={radii}
+        borderTopStartRadius={radii}
+        borderRadius={radii}
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it.each`
+    width
+    ${'base'}
+    ${'medium'}
+  `(
+    'map prop to valid property and correctborderWidth from theme',
+    ({ width }) => {
+      const { toJSON } = renderWithTheme(
+        <Box
+          borderWidth={width}
+          borderBottomWidth={width}
+          borderTopWidth={width}
+          borderLeftWidth={width}
+          borderRightWidth={width}
+        />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+
+  it('allows flex props', () => {
+    const { toJSON } = renderWithTheme(
+      <Box
+        alignContent="center"
+        alignItems="flex-end"
+        alignSelf="baseline"
+        display="flex"
+        flex={1}
+        flexBasis={20}
+        flexDirection="row"
+        flexGrow={3}
+        flexShrink={5}
+        flexWrap="wrap"
+        justifyContent="space-around"
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Box/config.ts

@@ -0,0 +1,201 @@
+const colors = {
+  backgroundColor: {
+    property: 'backgroundColor',
+    scale: 'colors',
+  },
+  bgColor: {
+    property: 'backgroundColor',
+    scale: 'colors',
+  },
+  borderColor: {
+    property: 'borderColor',
+    scale: 'colors',
+  },
+  borderTopColor: {
+    property: 'borderTopColor',
+    scale: 'colors',
+  },
+  borderBottomColor: {
+    property: 'borderBottomColor',
+    scale: 'colors',
+  },
+  borderStartColor: {
+    property: 'borderStartColor',
+    scale: 'colors',
+  },
+  borderEndColor: {
+    property: 'borderEndColor',
+    scale: 'colors',
+  },
+  borderLeftColor: {
+    property: 'borderLeftColor',
+    scale: 'colors',
+  },
+  borderRightColor: {
+    property: 'borderRightColor',
+    scale: 'colors',
+  },
+} as const;
+
+const space = {
+  margin: {
+    property: 'margin',
+    scale: 'space',
+  },
+  marginBottom: {
+    property: 'marginBottom',
+    scale: 'space',
+  },
+  marginEnd: {
+    property: 'marginEnd',
+    scale: 'space',
+  },
+  marginHorizontal: {
+    property: 'marginHorizontal',
+    scale: 'space',
+  },
+  marginLeft: {
+    property: 'marginLeft',
+    scale: 'space',
+  },
+  marginRight: {
+    property: 'marginRight',
+    scale: 'space',
+  },
+  marginStart: {
+    property: 'marginStart',
+    scale: 'space',
+  },
+  marginTop: {
+    property: 'marginTop',
+    scale: 'space',
+  },
+  marginVertical: {
+    property: 'marginVertical',
+    scale: 'space',
+  },
+  padding: {
+    property: 'padding',
+    scale: 'space',
+  },
+  paddingBottom: {
+    property: 'paddingBottom',
+    scale: 'space',
+  },
+  paddingEnd: {
+    property: 'paddingEnd',
+    scale: 'space',
+  },
+  paddingHorizontal: {
+    property: 'paddingHorizontal',
+    scale: 'space',
+  },
+  paddingLeft: {
+    property: 'paddingLeft',
+    scale: 'space',
+  },
+  paddingRight: {
+    property: 'paddingRight',
+    scale: 'space',
+  },
+  paddingStart: {
+    property: 'paddingStart',
+    scale: 'space',
+  },
+  paddingTop: {
+    property: 'paddingTop',
+    scale: 'space',
+  },
+  paddingVertical: {
+    property: 'paddingVertical',
+    scale: 'space',
+  },
+} as const;
+
+const radii = {
+  borderBottomEndRadius: {
+    property: 'borderBottomEndRadius',
+    scale: 'radii',
+  },
+  borderBottomLeftRadius: {
+    property: 'borderBottomLeftRadius',
+    scale: 'radii',
+  },
+  borderBottomRightRadius: {
+    property: 'borderBottomRightRadius',
+    scale: 'radii',
+  },
+  borderBottomStartRadius: {
+    property: 'borderBottomStartRadius',
+    scale: 'radii',
+  },
+  borderTopEndRadius: {
+    property: 'borderTopEndRadius',
+    scale: 'radii',
+  },
+  borderTopLeftRadius: {
+    property: 'borderTopLeftRadius',
+    scale: 'radii',
+  },
+  borderTopRightRadius: {
+    property: 'borderTopRightRadius',
+    scale: 'radii',
+  },
+  borderTopStartRadius: {
+    property: 'borderTopStartRadius',
+    scale: 'radii',
+  },
+  borderRadius: {
+    property: 'borderRadius',
+    scale: 'radii',
+  },
+} as const;
+
+const borderWidths = {
+  borderWidth: {
+    property: 'borderWidth',
+    scale: 'borderWidths',
+  },
+  borderBottomWidth: {
+    property: 'borderBottomWidth',
+    scale: 'borderWidths',
+  },
+  borderTopWidth: {
+    property: 'borderTopWidth',
+    scale: 'borderWidths',
+  },
+  borderLeftWidth: {
+    property: 'borderLeftWidth',
+    scale: 'borderWidths',
+  },
+  borderRightWidth: {
+    property: 'borderRightWidth',
+    scale: 'borderWidths',
+  },
+} as const;
+
+const config = {
+  ...colors,
+  ...space,
+  ...radii,
+  ...borderWidths,
+} as const;
+
+export const flexPropsKey = [
+  'alignContent',
+  'alignItems',
+  'alignSelf',
+  'display',
+  'flex',
+  'flexBasis',
+  'flexDirection',
+  'flexGrow',
+  'flexShrink',
+  'flexWrap',
+  'justifyContent',
+] as const;
+
+export type ConfigType = typeof config;
+export type FlexPropsKeyType = typeof flexPropsKey[number];
+
+export default config;

package/src/components/Box/helpers.ts

@@ -0,0 +1,10 @@
+export const pick = (keys: Array<string>, props: Record<string, any>) =>
+  keys
+    .filter(key => key in props)
+    .reduce(
+      (result, cur) => ({
+        ...result,
+        [cur]: props[cur],
+      }),
+      {}
+    );

package/src/components/Box/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { StyledBox } from './StyledBox';
+import type { BoxViewProps, FlexStyleProps, StyleProps } from './types';
+
+export interface BoxProps extends StyleProps, FlexStyleProps, BoxViewProps {}
+
+const Box = ({ children, style, testID, ...otherProps }: BoxProps) => (
+  <StyledBox {...otherProps} style={style} testID={testID}>
+    {children}
+  </StyledBox>
+);
+
+export default Box;

package/src/components/Box/types.ts

@@ -0,0 +1,38 @@
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
+
+import { SystemPalette } from '../../theme/global';
+import { BorderWidths, Radii } from '../../theme/global/borders';
+import { Space } from '../../theme/global/space';
+import { ConfigType, FlexPropsKeyType } from './config';
+
+export interface ThemeScale {
+  colors: keyof SystemPalette;
+  space: keyof Space;
+  radii: keyof Radii;
+  borderWidths: keyof BorderWidths;
+}
+
+type ConfigKeyType = keyof ConfigType;
+
+export type StyleProps = {
+  [key in ConfigKeyType]?: ThemeScale[ConfigType[key]['scale']];
+};
+export type FlexStyleProps = Pick<
+  Omit<ViewStyle, keyof StyleProps>,
+  FlexPropsKeyType
+>;
+
+export interface BoxViewProps extends ViewProps {
+  /**
+   * Box's content.
+   */
+  children?: React.ReactNode;
+  /**
+   * Addtional styles.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}

package/src/components/Button/Button.tsx

@@ -1,17 +1,16 @@
 import { useTheme } from '@emotion/react';
-import React, { ReactChild } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-
-import { IconName } from '../Icon';
+import React from 'react';
+import type { ReactChild } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import LoadingIndicator from './LoadingIndicator';
 import {
-  Intent,
   StyledButtonContainer,
   StyledButtonText,
   StyledButtonIconWrapper,
   StyledButtonIcon,
-  ThemeVariant,
 } from './StyledButton';
+import type { IconName } from '../Icon';
+import type { Intent, ThemeVariant } from './StyledButton';
 
 export interface ButtonProps {
   /**

package/src/components/Button/IconButton.tsx

@@ -1,13 +1,10 @@
 import React from 'react';
 
-import {
-  StyleProp,
-  ViewStyle,
-  TouchableOpacity,
-  TouchableOpacityProps,
-} from 'react-native';
+import { TouchableOpacity } from 'react-native';
 
-import Icon, { IconProps, IconName } from '../Icon';
+import type { StyleProp, ViewStyle, TouchableOpacityProps } from 'react-native';
+import Icon from '../Icon';
+import type { IconProps, IconName } from '../Icon';
 
 export interface IconButtonProps {
   /**

package/src/components/Button/LoadingIndicator/StyledLoadingIndicator.tsx

@@ -1,6 +1,8 @@
-import { View, ViewProps } from 'react-native';
-import styled, { ReactNativeStyle } from '@emotion/native';
-import { Theme } from '@emotion/react';
+import { View } from 'react-native';
+import styled from '@emotion/native';
+import type { ViewProps } from 'react-native';
+import type { ReactNativeStyle } from '@emotion/native';
+import type { Theme } from '@emotion/react';
 
 type Intent = 'primary' | 'secondary' | 'danger';
 

package/src/components/Button/LoadingIndicator/index.tsx

@@ -1,12 +1,6 @@
 import React, { useEffect, useRef } from 'react';
-import {
-  Animated,
-  Easing,
-  StyleSheet,
-  StyleProp,
-  ViewStyle,
-  ViewProps,
-} from 'react-native';
+import { Animated, Easing, StyleSheet } from 'react-native';
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import {
   StyledLoadingDot,
   StyledLoadingIndicatorWrapper,

package/src/components/Button/StyledButton.tsx

@@ -1,7 +1,7 @@
 import { TouchableHighlight, View } from 'react-native';
-import styled, { ReactNativeStyle } from '@emotion/native';
-import { Theme } from '@emotion/react';
-
+import styled from '@emotion/native';
+import type { ReactNativeStyle } from '@emotion/native';
+import type { Theme } from '@emotion/react';
 import Icon from '../Icon';
 import Typography from '../Typography';
 
@@ -316,6 +316,5 @@ export {
   StyledButtonText,
   StyledButtonIconWrapper,
   StyledButtonIcon,
-  Intent,
-  ThemeVariant,
 };
+export type { Intent, ThemeVariant };

package/src/components/Button/UtilityButton/index.tsx

@@ -1,12 +1,13 @@
-import React, { ReactChild } from 'react';
-import { ViewProps } from 'react-native';
-
-import Icon, { IconName } from '../../Icon';
+import React from 'react';
+import type { ReactChild } from 'react';
+import type { ViewProps } from 'react-native';
+import Icon from '../../Icon';
 import {
   ButtonContainer,
   IconWrapper,
   ButtonText,
 } from './StyledUtilityButton';
+import type { IconName } from '../../Icon';
 
 export interface UtilityButtonProps extends ViewProps {
   /**

package/src/components/Button/index.tsx

@@ -1,7 +1,8 @@
-import { FunctionComponent } from 'react';
-import Button, { ButtonProps } from './Button';
+import type { FunctionComponent } from 'react';
+import Button from './Button';
 import IconButton from './IconButton';
 import UtilityButton from './UtilityButton';
+import type { ButtonProps } from './Button';
 
 interface CompoundButtonProps extends FunctionComponent<ButtonProps> {
   Icon: typeof IconButton;

package/src/components/Calendar/StyledCalendar.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/native';
-import { TouchableOpacity, View, ViewProps } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
+import type { ViewProps } from 'react-native';
 
 const StyledContainer = styled(View)(({ theme }) => ({
   backgroundColor: theme.__hd__.calendar.colors.background,

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

@@ -60,23 +60,19 @@ describe('Calendar', () => {
     const onTitlePress = jest.fn();
     const onPreviousPress = jest.fn();
     const onNextPress = jest.fn();
-    const {
-      getByText,
-      queryByText,
-      queryAllByTestId,
-      queryByTestId,
-    } = renderWithTheme(
-      <Calendar
-        value={new Date(2022, 10, 5)}
-        visibleDate={new Date(2022, 10, 5)}
-        onChange={onChange}
-        onTitlePress={onTitlePress}
-        onPreviousPress={onPreviousPress}
-        onNextPress={onNextPress}
-        minDate={new Date(2022, 10, 3)}
-        maxDate={new Date(2022, 10, 27)}
-      />
-    );
+    const { getByText, queryByText, queryAllByTestId, queryByTestId } =
+      renderWithTheme(
+        <Calendar
+          value={new Date(2022, 10, 5)}
+          visibleDate={new Date(2022, 10, 5)}
+          onChange={onChange}
+          onTitlePress={onTitlePress}
+          onPreviousPress={onPreviousPress}
+          onNextPress={onNextPress}
+          minDate={new Date(2022, 10, 3)}
+          maxDate={new Date(2022, 10, 27)}
+        />
+      );
 
     expect(queryAllByTestId('calendar-date-cell')).toHaveLength(25);
     expect(queryAllByTestId('calendar-disabled-cell')).toHaveLength(17);

package/src/components/Card/DataCard/StyledDataCard.tsx

@@ -8,9 +8,15 @@ const StyledDataCard = styled(View)(({ theme }) => ({
 }));
 
 const Indicator = styled(View)<{
-  themeIntent: 'success' | 'info' | 'warning' | 'danger' | 'archived';
+  themeIntent:
+    | 'success'
+    | 'info'
+    | 'warning'
+    | 'danger'
+    | 'archived'
+    | 'primary';
 }>(({ theme, themeIntent }) => ({
-  backgroundColor: theme.__hd__.card.colors.indicator[themeIntent],
+  backgroundColor: theme.__hd__.card.colors[themeIntent],
   width: theme.__hd__.card.sizes.indicatorWidth,
   height: '100%',
 }));

package/src/components/Card/DataCard/__tests__/StyledDataCard.spec.tsx

@@ -12,6 +12,7 @@ describe('StyledDataCard', () => {
 describe('Indicator', () => {
   it.each`
     intent
+    ${'primary'}
     ${'success'}
     ${'info'}
     ${'warning'}

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

@@ -48,6 +48,22 @@ exports[`Indicator renders correctly when intent is info 1`] = `
 />
 `;
 
+exports[`Indicator renders correctly when intent is primary 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#c38cee",
+        "height": "100%",
+        "width": 16,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="primary"
+/>
+`;
+
 exports[`Indicator renders correctly when intent is success 1`] = `
 <View
   style={

package/src/components/Card/DataCard/index.tsx

@@ -1,5 +1,6 @@
-import React, { ReactNode } from 'react';
-import { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import { StyledDataCard, Indicator } from './StyledDataCard';
 
 export interface DataCardProps extends ViewProps {
@@ -10,7 +11,7 @@ export interface DataCardProps extends ViewProps {
   /**
    * Visual intent color to apply to card.
    */
-  intent?: 'success' | 'info' | 'warning' | 'danger' | 'archived';
+  intent?: 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
   /**
    * Additional style.
    */