@hero-design/rn 7.3.1 → 7.5.0

package/src/theme/components/bottomSheet.ts

@@ -0,0 +1,34 @@
+import { GlobalTheme } from '../global';
+
+const getBottomSheetTheme = (theme: GlobalTheme) => {
+  const colors = {
+    shadow: theme.colors.backgroundDark,
+    background: theme.colors.platformBackground,
+    backdrop: theme.colors.backgroundDark,
+  };
+
+  const sizes = {
+    sectionHeight: 64,
+    closeIconWidth: 72,
+  };
+
+  const space = {
+    horizontalPadding: theme.space.large,
+    verticalPadding: theme.space.small,
+  };
+
+  const shadows = {
+    offset: { width: 0, height: 3 },
+    opacity: 0.27,
+    radius: 4.65,
+    elevation: 10,
+  };
+
+  const radii = {
+    default: theme.radii.xlarge,
+  };
+
+  return { colors, shadows, radii, sizes, space };
+};
+
+export default getBottomSheetTheme;

package/src/theme/components/contentNavigator.ts

@@ -0,0 +1,11 @@
+import { GlobalTheme } from '../global';
+
+const getContentNavigatorTheme = (theme: GlobalTheme) => {
+  const space = {
+    valueHorizontalPadding: theme.space.small,
+  };
+
+  return { space };
+};
+
+export default getContentNavigatorTheme;

package/src/theme/components/icon.ts

@@ -8,6 +8,7 @@ const getIconTheme = (theme: GlobalTheme) => {
     danger: theme.colors.danger,
     success: theme.colors.success,
     warning: theme.colors.warning,
+    disabledText: theme.colors.disabledText,
   };
 
   const sizes = {

package/src/theme/components/radio.ts

@@ -0,0 +1,34 @@
+import { scale } from '../../utils/scale';
+import { GlobalTheme } from '../global';
+
+const getRadioTheme = (theme: GlobalTheme) => {
+  const colors = {
+    circle: theme.colors.black,
+    checkedCircle: theme.colors.primary,
+    wrapper: theme.colors.platformBackground,
+    checkedWrapper: theme.colors.primaryBackground,
+  };
+
+  const space = {
+    wrapperPadding: theme.space.medium, // left padding should be 12 according to the design
+    circleLeftMargin: theme.space.small,
+    groupTopMargin: theme.space.xsmall,
+  };
+
+  const sizes = {
+    circle: scale(20),
+    innerCircle: scale(10),
+  };
+
+  const borderWidths = {
+    circle: theme.borderWidths.medium,
+  };
+
+  const radii = {
+    wrapper: theme.radii.base,
+  };
+
+  return { sizes, borderWidths, space, colors, radii };
+};
+
+export default getRadioTheme;

package/src/theme/components/spinner.ts

@@ -0,0 +1,21 @@
+import { GlobalTheme } from '../global';
+
+const getSpinnerTheme = (theme: GlobalTheme) => {
+  const color = {
+    default: theme.colors.primary,
+  };
+
+  const space = {
+    spinnerDot: theme.space.medium,
+    spinnerDotPadding: theme.space.small,
+    spinnerTextPaddingTop: theme.space.small,
+  };
+
+  const radii = {
+    default: theme.radii.medium,
+  };
+
+  return { color, space, radii };
+};
+
+export default getSpinnerTheme;

package/src/theme/components/textInput.ts

@@ -0,0 +1,32 @@
+import { GlobalTheme } from '../global';
+
+const getTextInputTheme = (theme: GlobalTheme) => {
+  const colors = {
+    labelBackground: theme.colors.platformBackground,
+    border: theme.colors.text,
+  };
+
+  const space = {
+    containerPadding: theme.space.medium,
+    labelLeft: theme.space.medium,
+    labelTop: theme.lineHeights.small / -2,
+    labelHorizontalPadding: theme.space.xsmall,
+    prefixMarginRight: theme.space.small,
+  };
+
+  const fontSizes = {
+    text: theme.fontSizes.large,
+  };
+
+  const borderWidths = {
+    container: theme.borderWidths.base,
+  };
+
+  const radii = {
+    container: theme.radii.medium,
+  };
+
+  return { colors, space, fontSizes, borderWidths, radii };
+};
+
+export default getTextInputTheme;

package/src/theme/global/borders.ts

@@ -1,21 +1,27 @@
 interface BorderWidths {
   base: number;
+  medium: number;
 }
 
 interface Radii {
   rounded: number;
   base: number;
   medium: number;
+  large: number;
+  xlarge: number;
 }
 
 const getBorderWidths = (baseBorderWidth: number): BorderWidths => ({
   base: baseBorderWidth,
+  medium: baseBorderWidth * 2,
 });
 
 const getRadii = (baseRadius: number): Radii => ({
   rounded: 999,
   base: baseRadius,
   medium: baseRadius * 2,
+  large: baseRadius * 3,
+  xlarge: baseRadius * 4,
 });
 
 export { BorderWidths, getBorderWidths, Radii, getRadii };

package/src/theme/global/colors.ts

@@ -8,6 +8,7 @@ const systemPalette = {
   secondary: palette.dodgerBlue,
   secondaryLight: palette.dodgerBlueLight75,
   info: palette.dodgerBlue,
+  infoMediumLight: palette.blue,
   infoLight: palette.dodgerBlueLight75,
   infoBackground: palette.dodgerBlueLight90,
   success: palette.green,
@@ -28,6 +29,7 @@ const systemPalette = {
   invertedText: palette.white,
   outline: palette.greyLight60,
   archived: palette.greyLight45,
+  black: palette.black,
 };
 
 type SystemPalette = typeof systemPalette;

package/src/theme/index.ts

@@ -7,35 +7,47 @@ import {
   defaultSystemPalette,
 } from './global';
 
+import getAlertTheme from './components/alert';
+import getAvatarTheme from './components/avatar';
 import getBadgeTheme from './components/badge';
 import getBottomNavigationTheme from './components/bottomNavigation';
+import getBottomSheetTheme from './components/bottomSheet';
 import getButtonTheme from './components/button';
 import getCardTheme from './components/card';
+import getContentNavigatorTheme from './components/contentNavigator';
 import getDividerTheme from './components/divider';
 import getDrawerTheme from './components/drawer';
-import getTabsTheme from './components/tabs';
-import getTagTheme from './components/tag';
+import getFABTheme from './components/fab';
 import getIconTheme from './components/icon';
 import getProgressTheme from './components/progress';
+import getSpinnerTheme from './components/spinner';
+import getRadioTheme from './components/radio';
+import getTabsTheme from './components/tabs';
+import getTagTheme from './components/tag';
+import getTextInputTheme from './components/textInput';
 import getTypographyTheme from './components/typography';
-import getFABTheme from './components/fab';
-import getAvatarTheme from './components/avatar';
 
 type Theme = GlobalTheme & {
   __hd__: {
+    alert: ReturnType<typeof getAlertTheme>;
     avatar: ReturnType<typeof getAvatarTheme>;
     badge: ReturnType<typeof getBadgeTheme>;
     bottomNavigation: ReturnType<typeof getBottomNavigationTheme>;
+    bottomSheet: ReturnType<typeof getBottomSheetTheme>;
     button: ReturnType<typeof getButtonTheme>;
     card: ReturnType<typeof getCardTheme>;
+    contentNavigator: ReturnType<typeof getContentNavigatorTheme>;
     divider: ReturnType<typeof getDividerTheme>;
     drawer: ReturnType<typeof getDrawerTheme>;
+    fab: ReturnType<typeof getFABTheme>;
     icon: ReturnType<typeof getIconTheme>;
     progress: ReturnType<typeof getProgressTheme>;
+    spinner: ReturnType<typeof getSpinnerTheme>;
+    radio: ReturnType<typeof getRadioTheme>;
     tabs: ReturnType<typeof getTabsTheme>;
     tag: ReturnType<typeof getTagTheme>;
+    textInput: ReturnType<typeof getTextInputTheme>;
     typography: ReturnType<typeof getTypographyTheme>;
-    fab: ReturnType<typeof getFABTheme>;
   };
 };
 
@@ -48,18 +60,24 @@ const getTheme = (
     ...globalTheme,
     __hd__: {
       avatar: getAvatarTheme(globalTheme),
+      alert: getAlertTheme(globalTheme),
       badge: getBadgeTheme(globalTheme),
       bottomNavigation: getBottomNavigationTheme(globalTheme),
+      bottomSheet: getBottomSheetTheme(globalTheme),
       button: getButtonTheme(globalTheme),
       card: getCardTheme(globalTheme),
+      contentNavigator: getContentNavigatorTheme(globalTheme),
       divider: getDividerTheme(globalTheme),
       drawer: getDrawerTheme(globalTheme),
-      progress: getProgressTheme(globalTheme),
+      fab: getFABTheme(globalTheme),
       icon: getIconTheme(globalTheme),
+      spinner: getSpinnerTheme(globalTheme),
+      progress: getProgressTheme(globalTheme),
+      radio: getRadioTheme(globalTheme),
       tabs: getTabsTheme(globalTheme),
       tag: getTagTheme(globalTheme),
+      textInput: getTextInputTheme(globalTheme),
       typography: getTypographyTheme(globalTheme),
-      fab: getFABTheme(globalTheme),
     },
   };
 };

package/tsconfig.json

@@ -5,6 +5,7 @@
     "outDir": "types",
     "moduleResolution": "node",
     "esModuleInterop": true,
+    "resolveJsonModule": true,
     "jsx": "react-native",
     "strict": true,
     "allowUnreachableCode": false,
@@ -12,9 +13,16 @@
     "noImplicitThis": true,
     "noUnusedLocals": true,
     "skipLibCheck": true,
-    "types": ["jest"],
+    "types": [
+      "jest"
+    ]
   },
-  "include": ["src", "playground"],
-  "exclude": ["node_modules"],
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "playground"
+  ],
   "extends": "expo/tsconfig.base"
 }

package/types/components/Alert/StyledAlert.d.ts

@@ -0,0 +1,37 @@
+import { TouchableOpacity, View, ViewProps } from 'react-native';
+declare const Container: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeVariant: 'default' | 'round';
+    themeIntent: 'success' | 'info' | 'warning' | 'error';
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const IconContainer: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const TextContainer: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const ContentContainer: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    showDivider: boolean;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const CTAWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
+}>;
+export { Container, ContentContainer, TextContainer, IconContainer, CTAWrapper, };

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

@@ -0,0 +1,42 @@
+import { ReactElement } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { IconName } from '../Icon';
+interface AlertProps {
+    /**
+     * Alert title.
+     */
+    title?: string | ReactElement;
+    /**
+     * Alert content.
+     */
+    content: string | ReactElement;
+    /**
+     * Icon name of the alert.
+     * - undefined: use default icon according to Alert intent.
+     * - null: no icon at all.
+     * - IconName: an icon identifier from hero-design icon list.
+     */
+    icon?: null | IconName;
+    /**
+     * Visual intent color to apply to alert.
+     */
+    intent?: 'success' | 'info' | 'warning' | 'error';
+    /**
+     * Closing callback. When onClose is available, an X button will be rendered on the right side of alert. The callback will be called when user clicks on X button.
+     */
+    onClose?: () => void;
+    /**
+     * Use rounded variant.
+     */
+    variant?: 'default' | 'round';
+    /**
+     * Addtional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Alert: ({ content, icon, title, intent, onClose, variant, style, testID, }: AlertProps) => JSX.Element;
+export default Alert;

package/types/{src/components → components}/Avatar/StyledAvatar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { View, Image, TouchableOpacity, Text } from 'react-native';
 declare type ThemeSize = 'small' | 'medium' | 'large' | 'xlarge';
 declare type ThemeIntent = 'primary' | 'info' | 'danger' | 'success' | 'warning';

package/types/{src/components → components}/Badge/StyledBadge.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Animated, Text } from 'react-native';
 declare type ThemeIntent = 'success' | 'warning' | 'danger' | 'info' | 'archived';
 declare type ThemePadding = 'narrowContent' | 'wideContent';

package/types/{src/components → components}/BottomNavigation/StyledBottomNavigation.d.ts

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

package/types/components/BottomSheet/Footer.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+declare const Footer: ({ children, showDivider, }: {
+    children: ReactNode;
+    showDivider: boolean;
+}) => JSX.Element;
+export default Footer;

package/types/components/BottomSheet/Header.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+declare const Header: ({ content, showDivider, onRequestClose, showCloseButton, }: {
+    content: string | ReactElement;
+    showDivider: boolean;
+    onRequestClose?: (() => void) | undefined;
+    showCloseButton: boolean;
+}) => JSX.Element;
+export default Header;

package/types/components/BottomSheet/StyledBottomSheet.d.ts

@@ -0,0 +1,46 @@
+import { Animated, View, ViewProps } from 'react-native';
+declare const StyledWrapper: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledBottomSheet: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledBackdrop: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").PressableProps & import("react").RefAttributes<View>> & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledHeaderWrapper: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledHeader: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    adjacentIcon: boolean;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledFooter: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledIconWrapper: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { StyledWrapper, StyledHeaderWrapper, StyledHeader, StyledFooter, StyledIconWrapper, StyledBottomSheet, StyledBackdrop, };

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

@@ -0,0 +1,51 @@
+import { ReactElement, ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+interface BottomSheetProps {
+    /**
+     * Bottom sheet open state.
+     */
+    open: boolean;
+    /**
+     * Bottom sheet's header.
+     */
+    header?: string | ReactElement;
+    /**
+     * Bottom sheet's footer.
+     */
+    footer?: ReactNode;
+    /**
+     * Bottom sheet's content.
+     */
+    children?: ReactNode;
+    /**
+     * Callback is called when the Bottom Sheet is opened.
+     */
+    onOpen?: () => void;
+    /**
+     * Callback is called when the user taps the back button on Android or when the bottom sheet
+     * is being dismiss by interacting outside of the bottom sheet.
+     */
+    onRequestClose?: () => void;
+    /**
+     * Displays an X button on bottom sheet header that will invoke onRequestClose callback on press.
+     */
+    showCloseButton?: boolean;
+    /**
+     * Enable the bottom sheet's backdrop.
+     */
+    hasBackdrop?: boolean;
+    /**
+     * Displays dividers between header, footer and body.
+     */
+    showDivider?: boolean;
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const BottomSheet: ({ open, header, footer, children, onOpen, onRequestClose, showCloseButton, hasBackdrop, showDivider, style, testID, }: BottomSheetProps) => JSX.Element;
+export default BottomSheet;

package/types/{src/components → components}/Button/IconButton.d.ts

@@ -9,6 +9,10 @@ export interface IconButtonProps {
      * Name of the Icon.
      */
     icon: IconName;
+    /**
+     * Disable state of button.
+     */
+    disabled?: boolean;
     /**
      * Intent of the Icon.
      */
@@ -30,5 +34,5 @@ export interface IconButtonProps {
      */
     testID?: string;
 }
-declare const IconButton: ({ hitSlop, onPress, icon, testID, style, size, intent, }: IconButtonProps) => JSX.Element;
+declare const IconButton: ({ hitSlop, onPress, icon, disabled, testID, style, size, intent, }: IconButtonProps) => JSX.Element;
 export default IconButton;

package/types/{src/components → components}/Button/LoadingIndicator/StyledLoadingIndicator.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { View, ViewProps } from 'react-native';
 import { Theme } from '@emotion/react';
 declare type ThemeVariant = 'basic-transparent' | 'filled-primary' | 'filled-secondary' | 'outlined-primary' | 'outlined-secondary';

package/types/{src/components → components}/Button/StyledButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { View } from 'react-native';
 import { Theme } from '@emotion/react';
 declare type Intent = 'primary' | 'secondary';

package/types/{src/components → components}/Card/StyledCard.d.ts

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

package/types/{src/components → components}/Collapse/StyledCollapse.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Animated, View } from 'react-native';
 declare const StyledWrapper: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
     children?: import("react").ReactNode;
@@ -6,10 +5,21 @@ declare const StyledWrapper: import("@emotion/native").StyledComponent<Animated.
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
+/**
+ * Height need to be high enough to cover most scenario
+ * This container's purpose is only to help get correct children height and returns it
+ * to use with Animated.timing
+ */
+declare const StyledHiddenWrapper: 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 StyledChildWrapper: 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;
 }>;
-export { StyledWrapper, StyledChildWrapper };
+export { StyledWrapper, StyledHiddenWrapper, StyledChildWrapper };