@hero-design/rn 6.7.4-1 → 7.0.1

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

@@ -0,0 +1,7 @@
+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/__tests__/StyledDivider.spec.d.ts

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

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

@@ -0,0 +1,12 @@
+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/index.d.ts

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

package/types/theme/__tests__/index.spec.d.ts

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

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

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

@@ -0,0 +1,17 @@
+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/global/borders.d.ts

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

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

@@ -16,9 +16,11 @@ declare const systemPalette: {
     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

@@ -16,10 +16,12 @@ declare const globalTheme: {
         warningDark: string;
         warningBackground: string;
         platformBackground: string;
+        backgroundLight: string;
         backgroundDark: string;
         text: string;
         disabledText: string;
         invertedText: string;
+        outline: string;
     };
     space: {
         xxsmall: number;
@@ -52,6 +54,9 @@ declare const globalTheme: {
         small: number;
         xsmall: number;
     };
+    borderWidths: {
+        base: number;
+    };
 };
 declare type GlobalTheme = typeof globalTheme;
 export { GlobalTheme };

package/types/theme/index.d.ts

@@ -1,8 +1,10 @@
 import { GlobalTheme } from './global';
-import getExampleComponentTheme from './components/exampleComponent';
+import getDividerTheme from './components/divider';
+import getCardTheme from './components/card';
 declare type Theme = GlobalTheme & {
     __hd__: {
-        exampleComponent: ReturnType<typeof getExampleComponentTheme>;
+        divider: ReturnType<typeof getDividerTheme>;
+        card: ReturnType<typeof getCardTheme>;
     };
 };
 declare const getTheme: (theme?: GlobalTheme) => Theme;

package/playground/components/ExampleComponent.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import { ExampleComponent } from '../../src/index';
-
-const ExampleComponentPlayground = () => (
-  <ExampleComponent size="large" margin="large" bgColor="primary" />
-);
-
-export default ExampleComponentPlayground;

package/src/components/ExampleComponent/StyledView.tsx

@@ -1,68 +0,0 @@
-import { View } from 'react-native';
-import styled, { css } from '../../styled-components';
-
-const Square = styled(View)<{
-  themeSize: 'small' | 'medium' | 'large';
-  themeMargin: 'small' | 'medium' | 'large';
-  themeBgColor: 'primary' | 'danger' | 'warning';
-}>`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  ${({ themeSize }) => {
-    switch (themeSize) {
-      case 'small':
-        return css`
-          height: 50px;
-          width: 200px;
-        `;
-      case 'medium':
-        return css`
-          height: 100px;
-          width: 250px;
-        `;
-      case 'large':
-        return css`
-          height: 150px;
-          width: 300px;
-        `;
-    }
-  }}
-
-  ${({ themeMargin, theme }) => {
-    switch (themeMargin) {
-      case 'small':
-        return css`
-          margin: ${theme.__hd__.exampleComponent.space.smallMargin}px;
-        `;
-      case 'medium':
-        return css`
-          margin: ${theme.__hd__.exampleComponent.space.mediumMargin}px;
-        `;
-      case 'large':
-        return css`
-          margin: ${theme.__hd__.exampleComponent.space.largeMargin}px;
-        `;
-    }
-  }}
-
-  ${({ themeBgColor, theme }) => {
-    switch (themeBgColor) {
-      case 'primary':
-        return css`
-          background-color: ${theme.__hd__.exampleComponent.colors.primaryBg};
-        `;
-      case 'danger':
-        return css`
-          background-color: ${theme.__hd__.exampleComponent.colors.dangerBg};
-        `;
-      case 'warning':
-        return css`
-          background-color: ${theme.__hd__.exampleComponent.colors.warningBg};
-        `;
-    }
-  }}
-`;
-
-export { Square };

package/src/components/ExampleComponent/__tests__/__snapshots__/StyledView.spec.tsx.snap

@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StyledView renders correct styling 1`] = `
-<View
-  style={
-    Object {
-      "alignItems": "center",
-      "backgroundColor": "#c8a7ef",
-      "display": "flex",
-      "height": 100,
-      "justifyContent": "center",
-      "marginBottom": 16,
-      "marginLeft": 16,
-      "marginRight": 16,
-      "marginTop": 16,
-      "width": 250,
-    }
-  }
-  themeBgColor="primary"
-  themeMargin="medium"
-  themeSize="medium"
-/>
-`;

package/src/components/ExampleComponent/index.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { Text } from 'react-native';
-import { Square } from './StyledView';
-
-interface Props {
-  /**
-   * Size.
-   */
-  size?: 'small' | 'medium' | 'large';
-  /**
-   * Margin.
-   */
-  margin: 'small' | 'medium' | 'large';
-  /**
-   * Background color.
-   */
-  bgColor: 'primary' | 'danger' | 'warning';
-}
-
-const ExampleComponent = ({ size = 'small', margin, bgColor }: Props) => (
-  <Square themeSize={size} themeMargin={margin} themeBgColor={bgColor}>
-    <Text>{`Square with ${size} size, ${margin} margin and ${bgColor} background.`}</Text>
-  </Square>
-);
-
-export default ExampleComponent;

package/src/theme/components/exampleComponent.ts

@@ -1,19 +0,0 @@
-import { GlobalTheme } from '../global';
-
-const getExampleComponentTheme = (theme: GlobalTheme) => {
-  const colors = {
-    primaryBg: theme.colors.primaryLight,
-    dangerBg: theme.colors.dangerBackground,
-    warningBg: theme.colors.warningBackground,
-  };
-
-  const space = {
-    smallMargin: theme.space.xxsmall,
-    mediumMargin: theme.space.medium,
-    largeMargin: theme.space.xxxxlarge,
-  };
-
-  return { colors, space };
-};
-
-export default getExampleComponentTheme;