@hero-design/rn 7.1.3-alpha5 → 7.1.3-alpha8

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

@@ -1,9 +1,9 @@
-declare const fonts: {
+interface Fonts {
     light: string;
     regular: string;
     semiBold: string;
-};
-declare const fontSizes: {
+}
+interface FontSizes {
     xxxxxlarge: number;
     xxxxlarge: number;
     xxxlarge: number;
@@ -13,16 +13,9 @@ declare const fontSizes: {
     medium: number;
     small: number;
     xsmall: number;
-};
-declare const lineHeights: {
-    xxxxxlarge: number;
-    xxxxlarge: number;
-    xxxlarge: number;
-    xxlarge: number;
-    xlarge: number;
-    large: number;
-    medium: number;
-    small: number;
-    xsmall: number;
-};
-export { fonts, fontSizes, lineHeights };
+}
+declare type LineHeights = FontSizes;
+declare const getFonts: (baseFont: string) => Fonts;
+declare const getFontSizes: (baseFontSize: number) => FontSizes;
+declare const getLineHeights: (fontSizes: FontSizes) => LineHeights;
+export { Fonts, FontSizes, LineHeights, getFonts, getFontSizes, getLineHeights, };

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

@@ -1,8 +1,9 @@
-import { GlobalTheme } from './global';
+import { GlobalTheme, Scale, SystemPalette } from './global';
 import getBadgeTheme from './components/badge';
 import getBottomNavigationTheme from './components/bottomNavigation';
 import getCardTheme from './components/card';
 import getDividerTheme from './components/divider';
+import getTabsTheme from './components/tabs';
 import getIconTheme from './components/icon';
 import getTypographyTheme from './components/typography';
 import getFABTheme from './components/fab';
@@ -13,11 +14,12 @@ declare type Theme = GlobalTheme & {
         card: ReturnType<typeof getCardTheme>;
         divider: ReturnType<typeof getDividerTheme>;
         icon: ReturnType<typeof getIconTheme>;
+        tabs: ReturnType<typeof getTabsTheme>;
         typography: ReturnType<typeof getTypographyTheme>;
         fab: ReturnType<typeof getFABTheme>;
     };
 };
-declare const getTheme: (theme?: GlobalTheme) => Theme;
+declare const getTheme: (scale?: Scale, systemPallete?: SystemPalette) => Theme;
 declare const theme: Theme;
 export { Theme, getTheme };
 export default theme;

package/types/src/types.d.ts

@@ -0,0 +1,5 @@
+import { BottomNavigationTabType } from './components/BottomNavigation';
+import { IconName } from './components/Icon';
+import { TabType } from './components/Tabs';
+import { Theme } from './theme';
+export type { BottomNavigationTabType, IconName, TabType, Theme };

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

@@ -1,36 +0,0 @@
-import React from 'react';
-import { render, RenderAPI } from '@testing-library/react-native';
-import { View } from 'react-native';
-import Card from '..';
-import { theme, ThemeProvider } from '../../../index';
-
-describe('Card', () => {
-  let wrapper: RenderAPI;
-
-  beforeEach(() => {
-    wrapper = render(
-      <ThemeProvider theme={theme}>
-        <Card
-          style={{ backgroundColor: theme.colors.backgroundDark }}
-          testID="card"
-          nativeID="card-native-id"
-          hitSlop={{ top: 1, left: 1, bottom: 1, right: 1 }}
-          pointerEvents="box-only"
-          removeClippedSubviews
-        >
-          <View testID="child-view" />
-        </Card>
-      </ThemeProvider>
-    );
-  });
-
-  it('renders correct', () => {
-    expect(wrapper.queryAllByTestId('card')).toHaveLength(1);
-
-    expect(wrapper.toJSON()).toMatchSnapshot();
-  });
-
-  it('has child', () => {
-    expect(wrapper.queryAllByTestId('child-view')).toHaveLength(1);
-  });
-});

package/src/components/FAB/StyledFABContainer.tsx

@@ -1,14 +0,0 @@
-import { TouchableHighlight, TouchableHighlightProps } from 'react-native';
-import styled from 'styled-components-native';
-
-const StyledFABContainer = styled(TouchableHighlight)<TouchableHighlightProps>`
-  height: ${({ theme }) => theme.__hd__.fab.sizes.height};
-  width: ${({ theme }) => theme.__hd__.fab.sizes.width};
-  background-color: ${({ theme }) => theme.__hd__.fab.colors.buttonBackground};
-  border-radius: 999px;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-`;
-
-export { StyledFABContainer };

package/src/components/FAB/StyledFABIcon.tsx

@@ -1,9 +0,0 @@
-import styled from 'styled-components-native';
-import Icon, { IconProps } from '../Icon';
-
-const StyledFABIcon = styled(Icon)<IconProps>`
-  color: ${({ theme }) => theme.__hd__.fab.colors.icon};
-  font-size: ${({ theme }) => theme.__hd__.fab.fontSizes.buttonIcon};
-`;
-
-export { StyledFABIcon };

package/src/components/FAB/__tests__/StyledFABContainer.spec.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react-native';
-import { ThemeProvider, theme, Typography } from '../../../index';
-import { StyledFABContainer } from '../StyledFABContainer';
-
-describe('StyledFABContainer', () => {
-  it('renders correctly', () => {
-    const { toJSON } = render(
-      <ThemeProvider theme={theme}>
-        <StyledFABContainer>
-          <Typography.Text> button </Typography.Text>
-        </StyledFABContainer>
-      </ThemeProvider>
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-});

package/src/components/FAB/__tests__/StyledFABIcon.spec.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react-native';
-import { ThemeProvider, theme } from '../../../index';
-import { StyledFABIcon } from '../StyledFABIcon';
-
-describe('StyledFABIcon', () => {
-  it('renders correctly', () => {
-    const { toJSON } = render(
-      <ThemeProvider theme={theme}>
-        <StyledFABIcon icon="add" />
-      </ThemeProvider>
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-});

package/src/components/FAB/__tests__/__snapshots__/StyledFABContainer.spec.tsx.snap

@@ -1,46 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StyledFABContainer renders correctly 1`] = `
-<View
-  accessible={true}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "alignItems": "center",
-      "backgroundColor": "#292a2b",
-      "borderBottomLeftRadius": 999,
-      "borderBottomRightRadius": 999,
-      "borderTopLeftRadius": 999,
-      "borderTopRightRadius": 999,
-      "height": 64,
-      "justifyContent": "center",
-      "overflow": "hidden",
-      "width": 64,
-    }
-  }
->
-  <Text
-    style={
-      Object {
-        "color": "#292a2b",
-        "fontFamily": "Be Vietnam Pro Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      }
-    }
-    themeFontSize="medium"
-    themeFontWeight="regular"
-    themeIntent="body"
-  >
-     button 
-  </Text>
-</View>
-`;

package/src/components/FAB/__tests__/__snapshots__/StyledFABIcon.spec.tsx.snap

@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StyledFABIcon renders correctly 1`] = `
-<HeroIcon
-  name="add"
-  style={
-    Array [
-      Object {
-        "color": "#292a2b",
-        "fontSize": 24,
-      },
-      Object {
-        "color": "#ffffff",
-        "fontSize": 24,
-      },
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
-`;

package/src/components/Icon/__tests__/Icon.spec.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react-native';
-import { ThemeProvider, theme } from '../../../index';
-import Icon from '..';
-
-describe('Icon', () => {
-  it('renders correctly', () => {
-    const { toJSON } = render(
-      <ThemeProvider theme={theme}>
-        <Icon icon="home" />
-      </ThemeProvider>
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('renders correctly with intent', () => {
-    const { toJSON } = render(
-      <ThemeProvider theme={theme}>
-        <Icon icon="home" intent="primary" />
-      </ThemeProvider>
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('renders correctly with color and size', () => {
-    const { toJSON } = render(
-      <ThemeProvider theme={theme}>
-        <Icon icon="home" intent="danger" size="large" />
-      </ThemeProvider>
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-});

package/src/styled-components.ts

@@ -1,14 +0,0 @@
-import * as styledComponents from 'styled-components/native';
-
-import type { Theme } from './theme';
-
-const {
-  default: styled,
-  useTheme,
-  css,
-  ThemeProvider,
-} = styledComponents as styledComponents.ReactNativeThemedStyledComponentsModule<Theme>;
-
-export { useTheme, css, ThemeProvider };
-
-export default styled;

package/src/styled.d.ts

@@ -1,7 +0,0 @@
-import 'styled-components/native';
-
-import { Theme } from './theme';
-
-declare module 'styled-components/native' {
-  export interface DefaultTheme extends Theme {}
-}

package/types/components/Card/StyledCard.d.ts

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

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

@@ -1,5 +0,0 @@
-import { ViewProps } from 'react-native';
-interface CardProps extends ViewProps {
-}
-declare const Card: (props: CardProps) => JSX.Element;
-export default Card;

package/types/components/Divider/StyledDivider.d.ts

@@ -1,7 +0,0 @@
-import { View } from 'react-native';
-declare type MarginSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-declare const StyledDivider: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {
-    themeMarginHorizontal?: MarginSize | undefined;
-    themeMarginVertical?: MarginSize | undefined;
-}, never>;
-export { StyledDivider };

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

@@ -1,12 +0,0 @@
-interface DividerProps {
-    /**
-     * Horizontal margin size. There is no margin by default.
-     */
-    marginHorizontal?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-    /**
-     * Vertical margin size. There is no margin by default.
-     */
-    marginVertical?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-}
-declare const Divider: ({ marginHorizontal, marginVertical }: DividerProps) => JSX.Element;
-export default Divider;

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,5 +0,0 @@
-import { ThemeProvider, useTheme } from 'styled-components-native';
-import theme, { getTheme } from './theme';
-import Divider from './components/Divider';
-import Card from './components/Card';
-export { theme, getTheme, useTheme, ThemeProvider, Divider, Card };

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

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

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

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

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/components/FAB/__tests__/StyledFABContainer.spec.d.ts

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

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

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

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

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

package/types/src/components/Typography/Text/__test__/StyledText.spec.d.ts

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

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;

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/components/card.d.ts

@@ -1,10 +0,0 @@
-import { GlobalTheme } from '../global';
-declare const getCardTheme: (theme: GlobalTheme) => {
-    radii: {
-        default: string;
-    };
-    padding: {
-        default: string;
-    };
-};
-export default getCardTheme;

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

@@ -1,17 +0,0 @@
-import { GlobalTheme } from '../global';
-declare const getDividerTheme: (theme: GlobalTheme) => {
-    colors: {
-        default: string;
-    };
-    space: {
-        xsmall: string;
-        small: string;
-        medium: string;
-        large: string;
-        xlarge: string;
-    };
-    borderWiths: {
-        default: string;
-    };
-};
-export default getDividerTheme;

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/borders.d.ts

@@ -1,4 +0,0 @@
-declare const borderWidths: {
-    base: number;
-};
-export { borderWidths };

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

@@ -1,26 +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;
-    backgroundLight: string;
-    backgroundDark: string;
-    text: string;
-    disabledText: string;
-    invertedText: string;
-    outline: string;
-};
-export { palette, systemPalette };

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

@@ -1,63 +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;
-        backgroundLight: string;
-        backgroundDark: string;
-        text: string;
-        disabledText: string;
-        invertedText: string;
-        outline: 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;
-    };
-    borderWidths: {
-        base: 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,13 +0,0 @@
-import { GlobalTheme } from './global';
-import getDividerTheme from './components/divider';
-import getCardTheme from './components/card';
-declare type Theme = GlobalTheme & {
-    __hd__: {
-        divider: ReturnType<typeof getDividerTheme>;
-        card: ReturnType<typeof getCardTheme>;
-    };
-};
-declare const getTheme: (theme?: GlobalTheme) => Theme;
-declare const theme: Theme;
-export { Theme, getTheme };
-export default theme;