@hero-design/rn 7.0.5 → 7.1.1

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -32,7 +32,7 @@ Object {
     },
     "card": Object {
       "padding": Object {
-        "default": "16px",
+        "default": "8px",
       },
       "radii": Object {
         "default": "12px",
@@ -53,6 +53,19 @@ Object {
         "xsmall": "4px",
       },
     },
+    "fab": Object {
+      "colors": Object {
+        "buttonBackground": "#292a2b",
+        "icon": "#ffffff",
+      },
+      "fontSizes": Object {
+        "default": "28px",
+      },
+      "sizes": Object {
+        "height": "64px",
+        "width": "64px",
+      },
+    },
     "icon": Object {
       "colors": Object {
         "danger": "#de350b",

package/src/theme/components/card.ts

@@ -6,7 +6,7 @@ const getCardTheme = (theme: GlobalTheme) => {
   };
 
   const padding = {
-    default: `${theme.space.medium}px`,
+    default: `${theme.space.small}px`,
   };
 
   return { radii, padding };

package/src/theme/components/fab.ts

@@ -0,0 +1,21 @@
+import { GlobalTheme } from '../global';
+
+const getFABTheme = (theme: GlobalTheme) => {
+  const colors = {
+    buttonBackground: theme.colors.backgroundDark,
+    icon: theme.colors.invertedText,
+  };
+
+  const sizes = {
+    width: '64px',
+    height: '64px',
+  };
+
+  const fontSizes = {
+    default: `${theme.fontSizes.xxxxlarge}px`,
+  };
+
+  return { fontSizes, colors, sizes };
+};
+
+export default getFABTheme;

package/src/theme/global/space.ts

@@ -1,15 +1,17 @@
+import { scale } from '../../utils/scale';
+
 const BASE = 8;
 
 const space = {
-  xxsmall: BASE * 0.25,
-  xsmall: BASE * 0.5,
-  small: BASE,
-  medium: BASE * 2,
-  large: BASE * 3,
-  xlarge: BASE * 4,
-  xxlarge: BASE * 5,
-  xxxlarge: BASE * 6,
-  xxxxlarge: BASE * 7,
+  xxsmall: scale(BASE * 0.25),
+  xsmall: scale(BASE * 0.5),
+  small: scale(BASE),
+  medium: scale(BASE * 2),
+  large: scale(BASE * 3),
+  xlarge: scale(BASE * 4),
+  xxlarge: scale(BASE * 5),
+  xxxlarge: scale(BASE * 6),
+  xxxxlarge: scale(BASE * 7),
 };
 
 export { space };

package/src/theme/global/typography.ts

@@ -1,15 +1,17 @@
+import { scale } from '../../utils/scale';
+
 const BASE = 16;
 
 const fontSizes = {
-  xxxxxlarge: BASE * 2, // 32
-  xxxxlarge: BASE * 1.75, // 28
-  xxxlarge: BASE * 1.5, // 24
-  xxlarge: BASE * 1.25, // 20
-  xlarge: BASE * 1.125, // 18
-  large: BASE, // 16
-  medium: BASE * 0.875, // 14
-  small: BASE * 0.75, // 12
-  xsmall: BASE * 0.625, // 10
+  xxxxxlarge: scale(BASE * 2), //      32
+  xxxxlarge: scale(BASE * 1.75), //    28
+  xxxlarge: scale(BASE * 1.5), //      24
+  xxlarge: scale(BASE * 1.25), //      20
+  xlarge: scale(BASE * 1.125), //      18
+  large: scale(BASE), //               16
+  medium: scale(BASE * 0.875), //      14
+  small: scale(BASE * 0.75), //        12
+  xsmall: scale(BASE * 0.625), //      10
 };
 
 const fontWeights = {

package/src/theme/index.ts

@@ -5,6 +5,7 @@ import getCardTheme from './components/card';
 import getDividerTheme from './components/divider';
 import getIconTheme from './components/icon';
 import getTypographyTheme from './components/typography';
+import getFABTheme from './components/fab';
 
 type Theme = GlobalTheme & {
   __hd__: {
@@ -13,6 +14,7 @@ type Theme = GlobalTheme & {
     divider: ReturnType<typeof getDividerTheme>;
     icon: ReturnType<typeof getIconTheme>;
     typography: ReturnType<typeof getTypographyTheme>;
+    fab: ReturnType<typeof getFABTheme>;
   };
 };
 
@@ -24,6 +26,7 @@ const getTheme = (theme: GlobalTheme = globalTheme): Theme => ({
     divider: getDividerTheme(theme),
     icon: getIconTheme(theme),
     typography: getTypographyTheme(theme),
+    fab: getFABTheme(theme),
   },
 });
 

package/src/utils/__tests__/scale.spec.ts

@@ -0,0 +1,26 @@
+import { Dimensions } from 'react-native';
+import { scale, BASE_WIDTH } from '../scale';
+
+jest.unmock('../scale'); // Unmock global mocking of scale for other tests
+
+describe('scale', () => {
+  it('returns scale based on width when width < height', () => {
+    jest
+      .spyOn(Dimensions, 'get')
+      .mockReturnValue({ width: 400, height: 500, scale: 1, fontScale: 1 });
+
+    const size = 10;
+
+    expect(scale(size)).toBe((400 / BASE_WIDTH) * size);
+  });
+
+  it('returns scale based on height when width > height', () => {
+    jest
+      .spyOn(Dimensions, 'get')
+      .mockReturnValue({ width: 700, height: 350, scale: 1, fontScale: 1 });
+
+    const size = 10;
+
+    expect(scale(size)).toBe((350 / BASE_WIDTH) * size);
+  });
+});

package/src/utils/scale.ts

@@ -0,0 +1,10 @@
+import { Dimensions } from 'react-native';
+
+export const BASE_WIDTH = 390; // Based on iPhone 13's viewport size
+
+export const scale = (size: number) => {
+  const { width, height } = Dimensions.get('window');
+  const shortDimension = width < height ? width : height;
+
+  return (shortDimension / BASE_WIDTH) * size;
+};

package/testUtils/setup.ts

@@ -1,3 +1,7 @@
 jest.mock('react-native-vector-icons', () => ({
   createIconSetFromIcoMoon: jest.fn(() => 'HeroIcon'),
 }));
+
+jest.mock('../src/utils/scale', () => ({
+  scale: jest.fn(size => size),
+}));

package/types/playground/components/FAB.d.ts

@@ -0,0 +1,2 @@
+declare const FABPlayground: () => JSX.Element;
+export default FABPlayground;

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

@@ -0,0 +1,6 @@
+import { IconProps } from '../Icon';
+declare type Props = {
+    active?: boolean;
+} & IconProps;
+declare const AnimatedFABIcon: ({ active, ...iconProps }: Props) => JSX.Element;
+export { AnimatedFABIcon };

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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,3 @@
+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/components/FAB/__tests__/index.spec.d.ts

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

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

@@ -0,0 +1,30 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import { IconProps } from '../Icon';
+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;
+}
+declare const FAB: ({ onPress, icon, animated, testID, active, style }: FABProps) => JSX.Element;
+export default FAB;

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

@@ -1,7 +1,7 @@
 import { StyleProp, TextStyle } from 'react-native';
 import IconList from './IconList';
 declare type IconName = typeof IconList[number];
-interface IconProps {
+export interface IconProps {
     /**
      * Name of the Icon.
      */

package/types/src/index.d.ts

@@ -1,8 +1,10 @@
 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';
-export { theme, getTheme, useTheme, ThemeProvider, Badge, Card, Divider, Icon, Typography, };
+import FAB from './components/FAB';
+export { theme, getTheme, useTheme, scale, ThemeProvider, Badge, Card, Divider, Icon, Typography, FAB, };

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

@@ -0,0 +1,15 @@
+import { GlobalTheme } from '../global';
+declare const getFABTheme: (theme: GlobalTheme) => {
+    fontSizes: {
+        default: string;
+    };
+    colors: {
+        buttonBackground: string;
+        icon: string;
+    };
+    sizes: {
+        width: string;
+        height: string;
+    };
+};
+export default getFABTheme;

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

@@ -4,6 +4,7 @@ import getCardTheme from './components/card';
 import getDividerTheme from './components/divider';
 import getIconTheme from './components/icon';
 import getTypographyTheme from './components/typography';
+import getFABTheme from './components/fab';
 declare type Theme = GlobalTheme & {
     __hd__: {
         badge: ReturnType<typeof getBadgeTheme>;
@@ -11,6 +12,7 @@ declare type Theme = GlobalTheme & {
         divider: ReturnType<typeof getDividerTheme>;
         icon: ReturnType<typeof getIconTheme>;
         typography: ReturnType<typeof getTypographyTheme>;
+        fab: ReturnType<typeof getFABTheme>;
     };
 };
 declare const getTheme: (theme?: GlobalTheme) => Theme;

package/types/src/utils/__tests__/scale.spec.d.ts

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

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

@@ -0,0 +1,2 @@
+export declare const BASE_WIDTH = 390;
+export declare const scale: (size: number) => number;

package/types/components/ExampleComponent/StyledView.d.ts

@@ -1,7 +0,0 @@
-import { View } from 'react-native';
-declare const Square: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {
-    themeSize: 'small' | 'medium' | 'large';
-    themeMargin: 'small' | 'medium' | 'large';
-    themeBgColor: 'primary' | 'danger' | 'warning';
-}, never>;
-export { Square };

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

@@ -1,16 +0,0 @@
-interface Props {
-    /**
-     * Size.
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * Margin.
-     */
-    margin: 'small' | 'medium' | 'large';
-    /**
-     * Background color.
-     */
-    bgColor: 'primary' | 'danger' | 'warning';
-}
-declare const ExampleComponent: ({ size, margin, bgColor }: Props) => JSX.Element;
-export default ExampleComponent;

package/types/index.d.ts

@@ -1,4 +0,0 @@
-import { ThemeProvider, useTheme } from './styled-components';
-import theme, { getTheme } from './theme';
-import ExampleComponent from './components/ExampleComponent';
-export { theme, getTheme, useTheme, ThemeProvider, ExampleComponent };

package/types/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;

package/types/theme/colors.d.ts

@@ -1,24 +0,0 @@
-import { palette } from '@hero-design/colors';
-declare const systemPalette: {
-    primary: string;
-    primaryLight: string;
-    info: string;
-    infoLight: string;
-    infoBackground: string;
-    success: string;
-    successDark: string;
-    successLight: string;
-    successBackground: string;
-    danger: string;
-    dangerLight: string;
-    dangerBackground: string;
-    warning: string;
-    warningDark: string;
-    warningBackground: string;
-    platformBackground: string;
-    backgroundDark: string;
-    text: string;
-    disabledText: string;
-    invertedText: string;
-};
-export { palette, systemPalette };

package/types/theme/components/demoStyle.d.ts

@@ -1,11 +0,0 @@
-declare const demoStyleColors: {
-    primaryBg: string;
-    dangerBg: string;
-    warningBg: string;
-};
-declare const demoStyleSpace: {
-    smallMargin: number;
-    mediumMargin: number;
-    largeMargin: number;
-};
-export { demoStyleColors, demoStyleSpace };

package/types/theme/components/exampleComponent.d.ts

@@ -1,14 +0,0 @@
-import { GlobalTheme } from '../global';
-declare const getExampleComponentTheme: (theme: GlobalTheme) => {
-    colors: {
-        primaryBg: string;
-        dangerBg: string;
-        warningBg: string;
-    };
-    space: {
-        smallMargin: number;
-        mediumMargin: number;
-        largeMargin: number;
-    };
-};
-export default getExampleComponentTheme;

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

@@ -1,24 +0,0 @@
-import { palette } from '@hero-design/colors';
-declare const systemPalette: {
-    primary: string;
-    primaryLight: string;
-    info: string;
-    infoLight: string;
-    infoBackground: string;
-    success: string;
-    successDark: string;
-    successLight: string;
-    successBackground: string;
-    danger: string;
-    dangerLight: string;
-    dangerBackground: string;
-    warning: string;
-    warningDark: string;
-    warningBackground: string;
-    platformBackground: string;
-    backgroundDark: string;
-    text: string;
-    disabledText: string;
-    invertedText: string;
-};
-export { palette, systemPalette };

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

@@ -1,58 +0,0 @@
-declare const globalTheme: {
-    colors: {
-        primary: string;
-        primaryLight: string;
-        info: string;
-        infoLight: string;
-        infoBackground: string;
-        success: string;
-        successDark: string;
-        successLight: string;
-        successBackground: string;
-        danger: string;
-        dangerLight: string;
-        dangerBackground: string;
-        warning: string;
-        warningDark: string;
-        warningBackground: string;
-        platformBackground: string;
-        backgroundDark: string;
-        text: string;
-        disabledText: string;
-        invertedText: string;
-    };
-    space: {
-        xxsmall: number;
-        xsmall: number;
-        small: number;
-        medium: number;
-        large: number;
-        xlarge: number;
-        xxlarge: number;
-        xxxlarge: number;
-        xxxxlarge: number;
-    };
-    fontSizes: {
-        xlarge: number;
-        large: number;
-        medium: number;
-        small: number;
-        xsmall: number;
-    };
-    fontWeights: {
-        light: number;
-        regular: number;
-        semiBold: number;
-        bold: number;
-    };
-    lineHeights: {
-        xlarge: number;
-        large: number;
-        medium: number;
-        small: number;
-        xsmall: number;
-    };
-};
-declare type GlobalTheme = typeof globalTheme;
-export { GlobalTheme };
-export default globalTheme;

package/types/theme/global/space.d.ts

@@ -1,12 +0,0 @@
-declare const space: {
-    xxsmall: number;
-    xsmall: number;
-    small: number;
-    medium: number;
-    large: number;
-    xlarge: number;
-    xxlarge: number;
-    xxxlarge: number;
-    xxxxlarge: number;
-};
-export { space };

package/types/theme/global/typography.d.ts

@@ -1,21 +0,0 @@
-declare const fontSizes: {
-    xlarge: number;
-    large: number;
-    medium: number;
-    small: number;
-    xsmall: number;
-};
-declare const fontWeights: {
-    light: number;
-    regular: number;
-    semiBold: number;
-    bold: number;
-};
-declare const lineHeights: {
-    xlarge: number;
-    large: number;
-    medium: number;
-    small: number;
-    xsmall: number;
-};
-export { fontSizes, fontWeights, lineHeights };

package/types/theme/index.d.ts

@@ -1,11 +0,0 @@
-import { GlobalTheme } from './global';
-import getExampleComponentTheme from './components/exampleComponent';
-declare type Theme = GlobalTheme & {
-    __hd__: {
-        exampleComponent: ReturnType<typeof getExampleComponentTheme>;
-    };
-};
-declare const getTheme: (theme?: GlobalTheme) => Theme;
-declare const theme: Theme;
-export { Theme, getTheme };
-export default theme;

package/types/theme/space.d.ts

@@ -1,12 +0,0 @@
-declare const space: {
-    xxsmall: number;
-    xsmall: number;
-    small: number;
-    medium: number;
-    large: number;
-    xlarge: number;
-    xxlarge: number;
-    xxxlarge: number;
-    xxxxlarge: number;
-};
-export { space };

package/types/theme/typography.d.ts

@@ -1,21 +0,0 @@
-declare const fontSizes: {
-    xlarge: number;
-    large: number;
-    medium: number;
-    small: number;
-    xsmall: number;
-};
-declare const fontWeights: {
-    light: number;
-    regular: number;
-    semiBold: number;
-    bold: number;
-};
-declare const lineHeights: {
-    xlarge: number;
-    large: number;
-    medium: number;
-    small: number;
-    xsmall: number;
-};
-export { fontSizes, fontWeights, lineHeights };