@hero-design/rn 7.2.2 → 7.3.2

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

@@ -1,23 +1,22 @@
 import { ReactNode } from 'react';
 import { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import { IconName } from '../Icon';
+export declare type ItemType = string | IconName | ((props: {
+    color: string;
+}) => ReactNode);
 export declare type TabType = {
     key: string;
-    title: string;
-    icon: IconName;
+    activeItem: ItemType;
+    inactiveItem?: ItemType;
     component: ReactNode;
     testID?: string;
+    showBadge?: boolean;
 };
-interface TabsProps extends ViewProps {
+export interface TabsProps extends ViewProps {
     /**
      * Callback which is called on tab press, receiving key of upcoming active Tab.
      */
     onTabPress: (key: string) => void;
-    /**
-     * Whether inactive tabs should be removed and unmounted in React.
-     * Defaults to `false`.
-     */
-    renderActiveTabOnly?: boolean;
     /**
      * Current selected tab key.
      */
@@ -25,21 +24,31 @@ interface TabsProps extends ViewProps {
     /**
      * List of Tabs to be rendered. Each Tab must have an unique key.
      */
-    tabs: {
-        key: string;
-        title: string;
-        icon: IconName;
-        component: ReactNode;
-        testID?: string;
-    }[];
+    tabs: TabType[];
     /**
-     * Addditional style.
+     * Style for the container of Tab.
      */
-    style?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Style for the tab navigation bar.
+     */
+    barStyle?: StyleProp<ViewStyle>;
+    /**
+     * Whether inactive screen should be removed and unmounted in React.
+     * Defaults value is `false`.
+     */
+    lazy?: boolean;
+    /**
+     * Only work when lazy is `true`. You can specify how many adjacent screens should be preloaded.
+     * Defaults value is `1`.
+     */
+    lazyPreloadDistance?: number;
     /**
      * Testing id of the component.
      */
     testID?: string;
 }
-declare const Tabs: ({ onTabPress, renderActiveTabOnly, selectedTabKey, tabs, ...nativeProps }: TabsProps) => JSX.Element;
-export default Tabs;
+declare const _default: (({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, }: TabsProps) => JSX.Element) & {
+    Scroll: ({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, }: TabsProps) => JSX.Element;
+};
+export default _default;

package/types/src/components/Tabs/utils.d.ts

@@ -0,0 +1,2 @@
+import { Animated } from 'react-native';
+export declare const useAnimatedValueArray: (initialValues: number[]) => Animated.Value[];

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { View, Text } from 'react-native';
+declare type ThemeIntent = 'success' | 'warning' | 'danger' | 'info';
+declare const StyledView: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeIntent: ThemeIntent;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledText: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeIntent: ThemeIntent;
+}, {}, {
+    ref?: import("react").Ref<Text> | undefined;
+}>;
+export { StyledView, StyledText };

package/types/src/components/Tag/__tests__/Tag.spec.d.ts

@@ -0,0 +1 @@
+export {};

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/.expo/README.md

@@ -1,15 +0,0 @@
-> Why do I have a folder named ".expo" in my project?
-
-The ".expo" folder is created when an Expo project is started using "expo start" command.
-
-> What do the files contain?
-
-- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
-- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
-- "settings.json": contains the server configuration that is used to serve the application manifest.
-
-> Should I commit the ".expo" folder?
-
-No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
-
-Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

package/.expo/packager-info.json

@@ -1,10 +0,0 @@
-{
-  "devToolsPort": 19002,
-  "expoServerPort": 19000,
-  "packagerPort": 19000,
-  "packagerPid": null,
-  "expoServerNgrokUrl": null,
-  "packagerNgrokUrl": null,
-  "ngrokPid": null,
-  "webpackServerPort": null
-}

package/.expo/settings.json

@@ -1,10 +0,0 @@
-{
-  "hostType": "lan",
-  "lanType": "ip",
-  "dev": true,
-  "minify": false,
-  "urlRandomness": null,
-  "https": false,
-  "scheme": null,
-  "devClient": false
-}

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>
-`;