@hero-design/rn 7.2.2 → 7.3.0

package/types/src/components/Tag/index.d.ts

@@ -0,0 +1,21 @@
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
+interface TagProps extends ViewProps {
+    /**
+     * Content of the Tag.
+     */
+    content: string;
+    /**
+     * Visual intent color to apply to Tag.
+     */
+    intent?: 'success' | 'warning' | 'danger' | 'info';
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Tag: ({ content, intent, style, testID, ...nativeProps }: TagProps) => JSX.Element;
+export default Tag;

package/types/src/index.d.ts

@@ -1,14 +1,19 @@
 import { ThemeProvider, useTheme } from '@emotion/react';
 import theme, { getTheme } from './theme';
 import { scale } from './utils/scale';
+import Avatar from './components/Avatar';
 import Badge from './components/Badge';
 import BottomNavigation from './components/BottomNavigation';
 import Button from './components/Button';
 import Card from './components/Card';
+import Collapse from './components/Collapse';
 import Divider from './components/Divider';
+import Drawer from './components/Drawer';
 import FAB from './components/FAB';
 import Icon from './components/Icon';
+import Progress from './components/Progress';
 import Tabs from './components/Tabs';
+import Tag from './components/Tag';
 import Typography from './components/Typography';
-export { theme, getTheme, useTheme, scale, ThemeProvider, Badge, BottomNavigation, Button, Card, Divider, FAB, Icon, Tabs, Typography, };
+export { theme, getTheme, useTheme, scale, ThemeProvider, Avatar, Badge, BottomNavigation, Button, Card, Collapse, Divider, Drawer, FAB, Icon, Progress, Tabs, Tag, Typography, };
 export * from './types';

package/types/src/theme/components/avatar.d.ts

@@ -0,0 +1,32 @@
+import { GlobalTheme } from '../global';
+declare const getAvatarTheme: (theme: GlobalTheme) => {
+    colors: {
+        primary: string;
+        info: string;
+        danger: string;
+        success: string;
+        warning: string;
+    };
+    sizes: {
+        small: number;
+        medium: number;
+        large: number;
+        xlarge: number;
+    };
+    radii: {
+        small: number;
+        medium: number;
+        large: number;
+        xlarge: number;
+    };
+    borderWidths: {
+        default: number;
+    };
+    fontSizes: {
+        small: number;
+        medium: number;
+        large: number;
+        xlarge: number;
+    };
+};
+export default getAvatarTheme;

package/types/src/theme/components/badge.d.ts

@@ -1,30 +1,29 @@
 import { GlobalTheme } from '../global';
 declare const getBadgeTheme: (theme: GlobalTheme) => {
-    borderWidths: {
-        default: number;
-    };
     colors: {
         danger: string;
-        dangerBackground: string;
         info: string;
-        infoBackground: string;
         success: string;
-        successBackground: string;
         warning: string;
-        warningBackground: string;
+        archived: string;
+        text: string;
     };
-    font: {
+    fonts: {
         default: string;
     };
-    fontSize: {
+    fontSizes: {
         default: number;
     };
+    sizes: {
+        height: number;
+        minWidth: number;
+        statusHeight: number;
+        statusWidth: number;
+    };
     space: {
         horizontalPadding: number;
-        verticalPadding: number;
-    };
-    radii: {
-        default: number;
+        statusPositionTop: number;
+        statusPositionRight: number;
     };
 };
 export default getBadgeTheme;

package/types/src/theme/components/button.d.ts

@@ -0,0 +1,37 @@
+import { GlobalTheme } from '../global';
+declare const getButtonTheme: (theme: GlobalTheme) => {
+    borderWidth: {
+        default: number;
+    };
+    fonts: {
+        default: string;
+    };
+    fontSize: {
+        default: number;
+    };
+    sizes: {
+        iconSize: number;
+    };
+    radii: {
+        default: number;
+    };
+    colors: {
+        primary: string;
+        pressedPrimary: string;
+        secondary: string;
+        pressedSecondary: string;
+        defaultText: string;
+        disabledText: string;
+        disabledBorder: string;
+        disabledBackground: string;
+        invertedText: string;
+    };
+    lineHeight: {
+        default: number;
+    };
+    space: {
+        buttonPadding: number;
+        iconPadding: number;
+    };
+};
+export default getButtonTheme;

package/types/src/theme/components/card.d.ts

@@ -1,4 +1,8 @@
-declare const getCardTheme: () => {
+import { GlobalTheme } from '../global';
+declare const getCardTheme: (theme: GlobalTheme) => {
+    colors: {
+        dataCardIndicator: string;
+    };
     radii: {
         default: number;
     };

package/types/src/theme/components/drawer.d.ts

@@ -0,0 +1,21 @@
+import { GlobalTheme } from '../global';
+declare const getDrawerTheme: (theme: GlobalTheme) => {
+    colors: {
+        shadow: string;
+        background: string;
+        backdrop: string;
+    };
+    radii: {
+        default: number;
+    };
+    shadows: {
+        offset: {
+            width: number;
+            height: number;
+        };
+        opacity: number;
+        radius: number;
+        elevation: number;
+    };
+};
+export default getDrawerTheme;

package/types/src/theme/components/fab.d.ts

@@ -6,11 +6,12 @@ declare const getFABTheme: (theme: GlobalTheme) => {
     fonts: {
         header: string;
         actionItemText: string;
+        title: string;
     };
     fontSizes: {
         header: number;
-        buttonIcon: number;
         actionItemText: number;
+        title: number;
     };
     colors: {
         buttonBackground: string;
@@ -18,6 +19,7 @@ declare const getFABTheme: (theme: GlobalTheme) => {
         headerText: string;
         actionItemBackground: string;
         backdropBackground: string;
+        titleText: string;
     };
     sizes: {
         width: number;
@@ -26,6 +28,8 @@ declare const getFABTheme: (theme: GlobalTheme) => {
     lineHeights: {
         header: number;
         actionItemText: number;
+        title: number;
+        icon: number;
     };
     space: {
         actionItemPaddingLeft: number;
@@ -39,6 +43,9 @@ declare const getFABTheme: (theme: GlobalTheme) => {
         buttonMarginRight: number;
         headerTextMarginRight: number;
         headerTextMarginBottom: number;
+        containerPaddingHorizontal: number;
+        containerPaddingVertical: number;
+        titleMarginHorizontal: number;
     };
 };
 export default getFABTheme;

package/types/src/theme/components/progress.d.ts

@@ -0,0 +1,21 @@
+import { GlobalTheme } from '../global';
+declare const getProgressTheme: (theme: GlobalTheme) => {
+    colors: {
+        primary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+        background: string;
+        innerBackground: string;
+    };
+    sizes: {
+        radius: number;
+        strokeWidth: number;
+        barHeight: number;
+    };
+    radii: {
+        default: number;
+    };
+};
+export default getProgressTheme;

package/types/src/theme/components/tabs.d.ts

@@ -1,15 +1,27 @@
 import { GlobalTheme } from '../global';
 declare const getTabsTheme: (theme: GlobalTheme) => {
+    borderWidths: {
+        headerBottom: number;
+    };
     colors: {
-        background: string;
         active: string;
         inactive: string;
+        activeBackground: string;
+        headerBottom: string;
+        text: string;
     };
     space: {
         flatListHorizontalPadding: number;
-        titleMarginLeft: number;
         itemHorizontalPadding: number;
         itemVerticalPadding: number;
+        outlineHorizontalPadding: number;
+        outlineVerticalPadding: number;
+    };
+    radii: {
+        outline: number;
+    };
+    sizes: {
+        indicator: number;
     };
 };
 export default getTabsTheme;

package/types/src/theme/components/tag.d.ts

@@ -0,0 +1,30 @@
+import { GlobalTheme } from '../global';
+declare const getTagTheme: (theme: GlobalTheme) => {
+    borderWidths: {
+        default: number;
+    };
+    colors: {
+        danger: string;
+        dangerBackground: string;
+        info: string;
+        infoBackground: string;
+        success: string;
+        successBackground: string;
+        warning: string;
+        warningBackground: string;
+    };
+    fonts: {
+        default: string;
+    };
+    fontSizes: {
+        default: number;
+    };
+    space: {
+        horizontalPadding: number;
+        verticalPadding: number;
+    };
+    radii: {
+        default: number;
+    };
+};
+export default getTagTheme;

package/types/src/theme/global/borders.d.ts

@@ -1,5 +1,11 @@
 interface BorderWidths {
     base: number;
 }
+interface Radii {
+    rounded: number;
+    base: number;
+    medium: number;
+}
 declare const getBorderWidths: (baseBorderWidth: number) => BorderWidths;
-export { BorderWidths, getBorderWidths };
+declare const getRadii: (baseRadius: number) => Radii;
+export { BorderWidths, getBorderWidths, Radii, getRadii };

package/types/src/theme/global/colors.d.ts

@@ -1,12 +1,15 @@
 declare const systemPalette: {
     primary: string;
     primaryLight: string;
+    primaryDark: string;
+    primaryBackground: string;
+    secondary: string;
+    secondaryLight: string;
     info: string;
     infoLight: string;
     infoBackground: string;
     success: string;
     successDark: string;
-    successLight: string;
     successBackground: string;
     danger: string;
     dangerLight: string;
@@ -19,8 +22,10 @@ declare const systemPalette: {
     backgroundDark: string;
     text: string;
     disabledText: string;
+    disabledLightText: string;
     invertedText: string;
     outline: string;
+    archived: string;
 };
 declare type SystemPalette = typeof systemPalette;
 export { systemPalette, SystemPalette };

package/types/src/theme/global/index.d.ts

@@ -4,12 +4,15 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
     colors: {
         primary: string;
         primaryLight: string;
+        primaryDark: string;
+        primaryBackground: string;
+        secondary: string;
+        secondaryLight: string;
         info: string;
         infoLight: string;
         infoBackground: string;
         success: string;
         successDark: string;
-        successLight: string;
         successBackground: string;
         danger: string;
         dangerLight: string;
@@ -22,14 +25,17 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
         backgroundDark: string;
         text: string;
         disabledText: string;
+        disabledLightText: string;
         invertedText: string;
         outline: string;
+        archived: string;
     };
     fonts: import("./typography").Fonts;
     fontSizes: import("./typography").FontSizes;
     lineHeights: import("./typography").FontSizes;
     borderWidths: import("./borders").BorderWidths;
     space: import("./space").Space;
+    radii: import("./borders").Radii;
 };
 declare type GlobalTheme = ReturnType<typeof getGlobalTheme>;
 export { GlobalTheme, Scale, SystemPalette, getGlobalTheme, defaultScale, defaultSystemPalette, };

package/types/src/theme/global/scale.d.ts

@@ -3,6 +3,7 @@ declare const scale: {
     space: number;
     font: string;
     fontSize: number;
+    radius: number;
 };
 declare type Scale = typeof scale;
 export { scale, Scale };

package/types/src/theme/index.d.ts

@@ -1,20 +1,30 @@
 import { GlobalTheme, Scale, SystemPalette } from './global';
 import getBadgeTheme from './components/badge';
 import getBottomNavigationTheme from './components/bottomNavigation';
+import getButtonTheme from './components/button';
 import getCardTheme from './components/card';
 import getDividerTheme from './components/divider';
+import getDrawerTheme from './components/drawer';
 import getTabsTheme from './components/tabs';
+import getTagTheme from './components/tag';
 import getIconTheme from './components/icon';
+import getProgressTheme from './components/progress';
 import getTypographyTheme from './components/typography';
 import getFABTheme from './components/fab';
+import getAvatarTheme from './components/avatar';
 declare type Theme = GlobalTheme & {
     __hd__: {
+        avatar: ReturnType<typeof getAvatarTheme>;
         badge: ReturnType<typeof getBadgeTheme>;
         bottomNavigation: ReturnType<typeof getBottomNavigationTheme>;
+        button: ReturnType<typeof getButtonTheme>;
         card: ReturnType<typeof getCardTheme>;
         divider: ReturnType<typeof getDividerTheme>;
+        drawer: ReturnType<typeof getDrawerTheme>;
         icon: ReturnType<typeof getIconTheme>;
+        progress: ReturnType<typeof getProgressTheme>;
         tabs: ReturnType<typeof getTabsTheme>;
+        tag: ReturnType<typeof getTagTheme>;
         typography: ReturnType<typeof getTypographyTheme>;
         fab: ReturnType<typeof getFABTheme>;
     };

package/types/src/utils/hooks.d.ts

@@ -0,0 +1 @@
+export declare const usePrevious: <T>(value: T) => T | undefined;

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

@@ -1,33 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Card renders correctly 1`] = `
-<View
-  hitSlop={
-    Object {
-      "bottom": 1,
-      "left": 1,
-      "right": 1,
-      "top": 1,
-    }
-  }
-  nativeID="card-native-id"
-  pointerEvents="box-only"
-  removeClippedSubviews={true}
-  style={
-    Array [
-      Object {
-        "borderRadius": 12,
-        "overflow": "hidden",
-      },
-      Object {
-        "backgroundColor": "#292a2b",
-      },
-    ]
-  }
-  testID="card"
->
-  <View
-    testID="child-view"
-  />
-</View>
-`;

package/testUtils/setup.ts

@@ -1,18 +0,0 @@
-jest.mock('react-native-vector-icons', () => ({
-  createIconSetFromIcoMoon: jest.fn(() => 'HeroIcon'),
-}));
-
-jest.mock('react-native', () => {
-  const RN = jest.requireActual('react-native');
-
-  RN.Animated.timing = () => ({
-    start: () => jest.fn(),
-    stop: () => jest.fn(),
-  });
-
-  return RN;
-});
-
-jest.mock('../src/utils/scale', () => ({
-  scale: jest.fn(size => size),
-}));

package/types/src/components/FAB/StyledFABContainer.d.ts

@@ -1,3 +0,0 @@
-import { TouchableHighlight, TouchableHighlightProps } from 'react-native';
-declare const StyledFABContainer: import("styled-components").StyledComponent<typeof TouchableHighlight, import("../../theme").Theme, TouchableHighlightProps, never>;
-export { StyledFABContainer };

package/types/src/components/FAB/StyledFABIcon.d.ts

@@ -1,3 +0,0 @@
-import { IconProps } from '../Icon';
-declare const StyledFABIcon: import("styled-components").StyledComponent<({ icon, style, size, intent, testID, }: IconProps) => JSX.Element, import("../../theme").Theme, IconProps, never>;
-export { StyledFABIcon };

package/types/src/styled-components.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="styled-components-react-native" />
-import * as styledComponents from 'styled-components/native';
-import type { Theme } from './theme';
-declare const styled: styledComponents.ReactNativeStyledInterface<Theme>, useTheme: () => Theme, css: import("styled-components").ThemedCssFunction<Theme>, ThemeProvider: import("styled-components").ThemeProviderComponent<Theme, Theme>;
-export { useTheme, css, ThemeProvider };
-export default styled;