@hero-design/rn 7.0.4 → 7.0.5

package/es/index.js

@@ -8130,7 +8130,7 @@ Processor$1["default"] = Processor$1;
 Root$2.registerProcessor(Processor$1);
 Document$1.registerProcessor(Processor$1);
 
-var _excluded$1 = ["inputs"],
+var _excluded$3 = ["inputs"],
     _excluded2 = ["inputId"];
 
 var Declaration$1 = declaration;
@@ -8147,7 +8147,7 @@ function fromJSON$1(json, inputs) {
   });
 
   var ownInputs = json.inputs,
-      defaults = _objectWithoutProperties$1(json, _excluded$1);
+      defaults = _objectWithoutProperties$1(json, _excluded$3);
 
   if (ownInputs) {
     inputs = [];
@@ -9983,13 +9983,13 @@ var getDividerTheme = function getDividerTheme(theme) {
     large: "".concat(theme.space.large, "px"),
     xlarge: "".concat(theme.space.xlarge, "px")
   };
-  var borderWiths = {
+  var borderWidths = {
     "default": "".concat(theme.borderWidths.base, "px")
   };
   return {
     colors: colors,
     space: space,
-    borderWiths: borderWiths
+    borderWidths: borderWidths
   };
 };
 
@@ -10100,17 +10100,21 @@ var StyledText$1 = styled(Text$1)(_templateObject3$2 || (_templateObject3$2 = _t
   });
 });
 
+var _excluded$2 = ["content", "intent", "style", "testID"];
+
 var Badge = function Badge(_ref) {
   var content = _ref.content,
       _ref$intent = _ref.intent,
       intent = _ref$intent === void 0 ? 'info' : _ref$intent,
       style = _ref.style,
-      testID = _ref.testID;
-  return /*#__PURE__*/React.createElement(StyledView, {
-    testID: testID,
+      testID = _ref.testID,
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$2);
+
+  return /*#__PURE__*/React.createElement(StyledView, _extends$1({
     themeIntent: intent,
-    style: style
-  }, /*#__PURE__*/React.createElement(StyledText$1, {
+    style: style,
+    testID: testID
+  }, nativeProps), /*#__PURE__*/React.createElement(StyledText$1, {
     themeIntent: intent
   }, content));
 };
@@ -10131,7 +10135,7 @@ var Card = function Card(props) {
 var _templateObject$2, _templateObject2$2, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11, _templateObject12, _templateObject13;
 var StyledDivider = styled(View)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  border-bottom-width: ", ";\n  border-bottom-color: ", ";\n  max-width: 100%;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
-  return theme.__hd__.divider.borderWiths["default"];
+  return theme.__hd__.divider.borderWidths["default"];
 }, function (_ref2) {
   var theme = _ref2.theme;
   return theme.__hd__.divider.colors["default"];
@@ -10183,13 +10187,21 @@ var StyledDivider = styled(View)(_templateObject$2 || (_templateObject$2 = _tagg
   }
 });
 
+var _excluded$1 = ["marginHorizontal", "marginVertical", "style", "testID"];
+
 var Divider = function Divider(_ref) {
   var marginHorizontal = _ref.marginHorizontal,
-      marginVertical = _ref.marginVertical;
-  return /*#__PURE__*/React.createElement(StyledDivider, {
+      marginVertical = _ref.marginVertical,
+      style = _ref.style,
+      testID = _ref.testID,
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$1);
+
+  return /*#__PURE__*/React.createElement(StyledDivider, _extends$1({
     themeMarginHorizontal: marginHorizontal,
-    themeMarginVertical: marginVertical
-  });
+    themeMarginVertical: marginVertical,
+    style: style,
+    testID: testID
+  }, nativeProps));
 };
 
 var dist = {};

package/lib/index.js

@@ -8139,7 +8139,7 @@ Processor$1["default"] = Processor$1;
 Root$2.registerProcessor(Processor$1);
 Document$1.registerProcessor(Processor$1);
 
-var _excluded$1 = ["inputs"],
+var _excluded$3 = ["inputs"],
     _excluded2 = ["inputId"];
 
 var Declaration$1 = declaration;
@@ -8156,7 +8156,7 @@ function fromJSON$1(json, inputs) {
   });
 
   var ownInputs = json.inputs,
-      defaults = _objectWithoutProperties$1(json, _excluded$1);
+      defaults = _objectWithoutProperties$1(json, _excluded$3);
 
   if (ownInputs) {
     inputs = [];
@@ -9992,13 +9992,13 @@ var getDividerTheme = function getDividerTheme(theme) {
     large: "".concat(theme.space.large, "px"),
     xlarge: "".concat(theme.space.xlarge, "px")
   };
-  var borderWiths = {
+  var borderWidths = {
     "default": "".concat(theme.borderWidths.base, "px")
   };
   return {
     colors: colors,
     space: space,
-    borderWiths: borderWiths
+    borderWidths: borderWidths
   };
 };
 
@@ -10109,17 +10109,21 @@ var StyledText$1 = styled(require$$0$1.Text)(_templateObject3$2 || (_templateObj
   });
 });
 
+var _excluded$2 = ["content", "intent", "style", "testID"];
+
 var Badge = function Badge(_ref) {
   var content = _ref.content,
       _ref$intent = _ref.intent,
       intent = _ref$intent === void 0 ? 'info' : _ref$intent,
       style = _ref.style,
-      testID = _ref.testID;
-  return /*#__PURE__*/React__default["default"].createElement(StyledView, {
-    testID: testID,
+      testID = _ref.testID,
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$2);
+
+  return /*#__PURE__*/React__default["default"].createElement(StyledView, _extends$1({
     themeIntent: intent,
-    style: style
-  }, /*#__PURE__*/React__default["default"].createElement(StyledText$1, {
+    style: style,
+    testID: testID
+  }, nativeProps), /*#__PURE__*/React__default["default"].createElement(StyledText$1, {
     themeIntent: intent
   }, content));
 };
@@ -10140,7 +10144,7 @@ var Card = function Card(props) {
 var _templateObject$2, _templateObject2$2, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11, _templateObject12, _templateObject13;
 var StyledDivider = styled(require$$0$1.View)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  border-bottom-width: ", ";\n  border-bottom-color: ", ";\n  max-width: 100%;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
-  return theme.__hd__.divider.borderWiths["default"];
+  return theme.__hd__.divider.borderWidths["default"];
 }, function (_ref2) {
   var theme = _ref2.theme;
   return theme.__hd__.divider.colors["default"];
@@ -10192,13 +10196,21 @@ var StyledDivider = styled(require$$0$1.View)(_templateObject$2 || (_templateObj
   }
 });
 
+var _excluded$1 = ["marginHorizontal", "marginVertical", "style", "testID"];
+
 var Divider = function Divider(_ref) {
   var marginHorizontal = _ref.marginHorizontal,
-      marginVertical = _ref.marginVertical;
-  return /*#__PURE__*/React__default["default"].createElement(StyledDivider, {
+      marginVertical = _ref.marginVertical,
+      style = _ref.style,
+      testID = _ref.testID,
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$1);
+
+  return /*#__PURE__*/React__default["default"].createElement(StyledDivider, _extends$1({
     themeMarginHorizontal: marginHorizontal,
-    themeMarginVertical: marginVertical
-  });
+    themeMarginVertical: marginVertical,
+    style: style,
+    testID: testID
+  }, nativeProps));
 };
 
 var dist = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.0.4",
+  "version": "7.0.5",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -9,7 +9,8 @@
     "lint": "eslint src playground --ext .js,.jsx,.ts,.tsx --ignore-path ../../.gitignore",
     "type-check": "tsc --noEmit",
     "dev": "expo start",
-    "test": "jest --runInBand --watch",
+    "test": "jest --runInBand",
+    "test:watch": "jest --runInBand --watch",
     "test:ci": "jest --runInBand --logHeapUsage",
     "build:js": "rollup -c",
     "build:types": "tsc --noEmit false --emitDeclarationOnly",
@@ -17,7 +18,7 @@
     "publish:npm": "yarn publish --access public"
   },
   "dependencies": {
-    "@hero-design/colors": "7.0.4",
+    "@hero-design/colors": "7.0.5",
     "styled-components": "6.0.0-alpha.5"
   },
   "peerDependencies": {
@@ -67,6 +68,7 @@
     "react-native-vector-icons": "^9.1.0",
     "react-test-renderer": "17.0.2",
     "rollup": "^2.68.0",
+    "rollup-plugin-copy": "^3.4.0",
     "ts-jest": "^27.0.7",
     "typescript": "^4.5.5"
   },

package/playground/components/Card.tsx

@@ -141,8 +141,8 @@ const MyLeaveCard = (props: ViewProps) => {
           My Leave
         </Typography.Text>
 
-        <View style={{ flexDirection: 'row' }}>
-          <Typography.Text fontWeight="semi-bold">Add /view</Typography.Text>
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <Typography.Text fontWeight="semi-bold">Add / view</Typography.Text>
           <Icon
             icon="circle-add-outlined"
             size="xsmall"

package/rollup.config.js

@@ -4,6 +4,7 @@ import { babel } from '@rollup/plugin-babel';
 import typescript from '@rollup/plugin-typescript';
 import json from '@rollup/plugin-json';
 import replace from '@rollup/plugin-replace';
+import copy from 'rollup-plugin-copy';
 
 import pkg from './package.json';
 
@@ -23,13 +24,21 @@ export default {
   ],
   external: ['react', 'react-native'],
   plugins: [
-    replace(({
+    replace({
       'process.env.NODE_ENV': JSON.stringify('production'),
-    })),
+    }),
     nodeResolve({ extensions, browser: true }),
     commonjs(),
     json(),
     typescript(),
     babel({ extensions, babelHelpers: 'bundled' }),
+    copy({
+      targets: [
+        {
+          src: 'assets/fonts/hero-icons.ttf',
+          dest: 'lib/assets/fonts',
+        },
+      ],
+    }),
   ],
 };

package/src/components/Badge/index.tsx

@@ -1,18 +1,18 @@
-import { StyleProp, ViewStyle } from 'react-native';
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import React, { ReactElement } from 'react';
 import { StyledView, StyledText } from './StyledBadge';
 
-interface BadgeProps {
+interface BadgeProps extends ViewProps {
   /**
-   * Content of the `Badge`.
+   * Content of the Badge.
    */
   content: string;
   /**
-   * Visual intent color to apply to `Badge`.
+   * Visual intent color to apply to Badge.
    */
   intent?: 'success' | 'warning' | 'danger' | 'info';
   /**
-   * Addditional style to be applied for `Badge`.
+   * Addditional style.
    */
   style?: StyleProp<ViewStyle>;
   /**
@@ -26,8 +26,14 @@ const Badge = ({
   intent = 'info',
   style,
   testID,
+  ...nativeProps
 }: BadgeProps): ReactElement => (
-  <StyledView testID={testID} themeIntent={intent} style={style}>
+  <StyledView
+    themeIntent={intent}
+    style={style}
+    testID={testID}
+    {...nativeProps}
+  >
     <StyledText themeIntent={intent}>{content}</StyledText>
   </StyledView>
 );

package/src/components/Card/index.tsx

@@ -1,8 +1,21 @@
-import React from 'react';
-import { ViewProps } from 'react-native';
+import React, { ReactNode } from 'react';
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import { StyledCard } from './StyledCard';
 
-interface CardProps extends ViewProps {}
+interface CardProps extends ViewProps {
+  /**
+   * Card's content.
+   */
+  children?: ReactNode;
+  /**
+   * Addditional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
 
 const Card = (props: CardProps): JSX.Element => <StyledCard {...props} />;
 

package/src/components/Divider/StyledDivider.tsx

@@ -8,7 +8,7 @@ const StyledDivider = styled(View)<{
   themeMarginVertical?: MarginSize;
 }>`
   border-bottom-width: ${({ theme }) =>
-    theme.__hd__.divider.borderWiths.default};
+    theme.__hd__.divider.borderWidths.default};
   border-bottom-color: ${({ theme }) => theme.__hd__.divider.colors.default};
   max-width: 100%;
 

package/src/components/Divider/index.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import { StyledDivider } from './StyledDivider';
 
-interface DividerProps {
+interface DividerProps extends ViewProps {
   /**
    * Horizontal margin size. There is no margin by default.
    */
@@ -10,12 +11,29 @@ interface DividerProps {
    * Vertical margin size. There is no margin by default.
    */
   marginVertical?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+  /**
+   * Addditional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
 }
 
-const Divider = ({ marginHorizontal, marginVertical }: DividerProps) => (
+const Divider = ({
+  marginHorizontal,
+  marginVertical,
+  style,
+  testID,
+  ...nativeProps
+}: DividerProps) => (
   <StyledDivider
     themeMarginHorizontal={marginHorizontal}
     themeMarginVertical={marginVertical}
+    style={style}
+    testID={testID}
+    {...nativeProps}
   />
 );
 

package/src/components/Icon/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
+import { StyleProp, TextStyle } from 'react-native';
 import IconList from './IconList';
 import HeroIcon from './HeroIcon';
 
@@ -7,21 +7,21 @@ type IconName = typeof IconList[number];
 
 interface IconProps {
   /**
-   * Name of the `Icon`.
+   * Name of the Icon.
    */
   icon: IconName;
   /**
-   * Addditional style to be applied for `Icon`.
+   * Intent of the Icon.
    */
-  style?: StyleProp<ViewStyle>;
+  intent?: 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning';
   /**
-   * Size of the `Icon`.
+   * Size of the Icon.
    */
   size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
   /**
-   * Intent of the `Icon`.
+   * Addditional style.
    */
-  intent?: 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning';
+  style?: StyleProp<TextStyle>;
   /**
    * Testing id of the component.
    */

package/src/components/Typography/Text/index.tsx

@@ -1,5 +1,9 @@
 import React, { ReactNode } from 'react';
-import { TextProps as NativeTextProps } from 'react-native';
+import {
+  TextProps as NativeTextProps,
+  StyleProp,
+  TextStyle,
+} from 'react-native';
 import { StyledText } from './StyledText';
 
 interface TextProps extends NativeTextProps {
@@ -19,6 +23,14 @@ interface TextProps extends NativeTextProps {
    * Visual intent color to apply to the text.
    */
   intent?: 'body' | 'subdued';
+  /**
+   * Addditional style.
+   */
+  style?: StyleProp<TextStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
 }
 
 const Text = ({

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

@@ -39,7 +39,7 @@ Object {
       },
     },
     "divider": Object {
-      "borderWiths": Object {
+      "borderWidths": Object {
         "default": "1px",
       },
       "colors": Object {

package/src/theme/components/divider.ts

@@ -13,11 +13,11 @@ const getDividerTheme = (theme: GlobalTheme) => {
     xlarge: `${theme.space.xlarge}px`,
   };
 
-  const borderWiths = {
+  const borderWidths = {
     default: `${theme.borderWidths.base}px`,
   };
 
-  return { colors, space, borderWiths };
+  return { colors, space, borderWidths };
 };
 
 export default getDividerTheme;

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

@@ -1,16 +1,16 @@
-import { StyleProp, ViewStyle } from 'react-native';
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import { ReactElement } from 'react';
-interface BadgeProps {
+interface BadgeProps extends ViewProps {
     /**
-     * Content of the `Badge`.
+     * Content of the Badge.
      */
     content: string;
     /**
-     * Visual intent color to apply to `Badge`.
+     * Visual intent color to apply to Badge.
      */
     intent?: 'success' | 'warning' | 'danger' | 'info';
     /**
-     * Addditional style to be applied for `Badge`.
+     * Addditional style.
      */
     style?: StyleProp<ViewStyle>;
     /**
@@ -18,5 +18,5 @@ interface BadgeProps {
      */
     testID?: string;
 }
-declare const Badge: ({ content, intent, style, testID, }: BadgeProps) => ReactElement;
+declare const Badge: ({ content, intent, style, testID, ...nativeProps }: BadgeProps) => ReactElement;
 export default Badge;

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

@@ -1,5 +1,18 @@
-import { ViewProps } from 'react-native';
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
 interface CardProps extends ViewProps {
+    /**
+     * Card's content.
+     */
+    children?: ReactNode;
+    /**
+     * Addditional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
 }
 declare const Card: (props: CardProps) => JSX.Element;
 export default Card;

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

@@ -1,4 +1,5 @@
-interface DividerProps {
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
+interface DividerProps extends ViewProps {
     /**
      * Horizontal margin size. There is no margin by default.
      */
@@ -7,6 +8,14 @@ interface DividerProps {
      * Vertical margin size. There is no margin by default.
      */
     marginVertical?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+    /**
+     * Addditional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
 }
-declare const Divider: ({ marginHorizontal, marginVertical }: DividerProps) => JSX.Element;
+declare const Divider: ({ marginHorizontal, marginVertical, style, testID, ...nativeProps }: DividerProps) => JSX.Element;
 export default Divider;

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

@@ -1,23 +1,23 @@
-import { StyleProp, ViewStyle } from 'react-native';
+import { StyleProp, TextStyle } from 'react-native';
 import IconList from './IconList';
 declare type IconName = typeof IconList[number];
 interface IconProps {
     /**
-     * Name of the `Icon`.
+     * Name of the Icon.
      */
     icon: IconName;
     /**
-     * Addditional style to be applied for `Icon`.
+     * Intent of the Icon.
      */
-    style?: StyleProp<ViewStyle>;
+    intent?: 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning';
     /**
-     * Size of the `Icon`.
+     * Size of the Icon.
      */
     size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
     /**
-     * Intent of the `Icon`.
+     * Addditional style.
      */
-    intent?: 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning';
+    style?: StyleProp<TextStyle>;
     /**
      * Testing id of the component.
      */

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

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

package/types/src/components/Typography/Text/__tests__/index.spec.d.ts

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

package/types/src/components/Typography/Text/index.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { TextProps as NativeTextProps } from 'react-native';
+import { TextProps as NativeTextProps, StyleProp, TextStyle } from 'react-native';
 interface TextProps extends NativeTextProps {
     /**
      * Text content.
@@ -17,6 +17,14 @@ interface TextProps extends NativeTextProps {
      * Visual intent color to apply to the text.
      */
     intent?: 'body' | 'subdued';
+    /**
+     * Addditional style.
+     */
+    style?: StyleProp<TextStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
 }
 declare const Text: ({ children, fontSize, fontWeight, intent, ...nativeProps }: TextProps) => JSX.Element;
 export default Text;

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

@@ -10,7 +10,7 @@ declare const getDividerTheme: (theme: GlobalTheme) => {
         large: string;
         xlarge: string;
     };
-    borderWiths: {
+    borderWidths: {
         default: string;
     };
 };