@hero-design/rn 7.1.3-alpha8 → 7.2.2

package/.expo/packager-info.json

@@ -1,6 +1,6 @@
 {
   "devToolsPort": 19002,
-  "expoServerPort": null,
+  "expoServerPort": 19000,
   "packagerPort": 19000,
   "packagerPid": null,
   "expoServerNgrokUrl": null,

package/.turbo/turbo-build.log

@@ -0,0 +1,8 @@
+@hero-design/rn:build: cache hit, replaying output 27643cfcbb96545b
+@hero-design/rn:build: $ yarn build:js && yarn build:types
+@hero-design/rn:build: $ rollup -c
+@hero-design/rn:build: 
+@hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
+@hero-design/rn:build: (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
+@hero-design/rn:build: created lib/index.js, es/index.js in 15.1s
+@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly

package/es/index.js

@@ -1563,6 +1563,7 @@ var palette = {
   smaltDark75: '#000d20',
   smaltLight30: '#4d72a6',
   smaltLight45: '#7390b9',
+  smaltLight75: '#bfcddf',
   smaltLight90: '#e6ebf2',
   violet: '#7622d7',
   violetDark15: '#641db7',
@@ -1776,16 +1777,12 @@ var getBottomNavigationTheme = function getBottomNavigationTheme(theme) {
   };
 };
 
-var getCardTheme = function getCardTheme(theme) {
+var getCardTheme = function getCardTheme() {
   var radii = {
     "default": 12
   };
-  var padding = {
-    "default": theme.space.small
-  };
   return {
-    radii: radii,
-    padding: padding
+    radii: radii
   };
 };
 
@@ -1941,7 +1938,7 @@ var getTheme = function getTheme() {
     __hd__: {
       badge: getBadgeTheme(globalTheme),
       bottomNavigation: getBottomNavigationTheme(globalTheme),
-      card: getCardTheme(globalTheme),
+      card: getCardTheme(),
       divider: getDividerTheme(globalTheme),
       icon: getIconTheme(globalTheme),
       tabs: getTabsTheme(globalTheme),
@@ -13801,7 +13798,6 @@ var StyledCard = index$1(View)(function (_ref) {
   var theme = _ref.theme;
   return {
     borderRadius: theme.__hd__.card.radii["default"],
-    padding: theme.__hd__.card.padding["default"],
     overflow: 'hidden'
   };
 });

package/lib/index.js

@@ -1590,6 +1590,7 @@ var palette = {
   smaltDark75: '#000d20',
   smaltLight30: '#4d72a6',
   smaltLight45: '#7390b9',
+  smaltLight75: '#bfcddf',
   smaltLight90: '#e6ebf2',
   violet: '#7622d7',
   violetDark15: '#641db7',
@@ -1803,16 +1804,12 @@ var getBottomNavigationTheme = function getBottomNavigationTheme(theme) {
   };
 };
 
-var getCardTheme = function getCardTheme(theme) {
+var getCardTheme = function getCardTheme() {
   var radii = {
     "default": 12
   };
-  var padding = {
-    "default": theme.space.small
-  };
   return {
-    radii: radii,
-    padding: padding
+    radii: radii
   };
 };
 
@@ -1968,7 +1965,7 @@ var getTheme = function getTheme() {
     __hd__: {
       badge: getBadgeTheme(globalTheme),
       bottomNavigation: getBottomNavigationTheme(globalTheme),
-      card: getCardTheme(globalTheme),
+      card: getCardTheme(),
       divider: getDividerTheme(globalTheme),
       icon: getIconTheme(globalTheme),
       tabs: getTabsTheme(globalTheme),
@@ -13828,7 +13825,6 @@ var StyledCard = index$1(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
     borderRadius: theme.__hd__.card.radii["default"],
-    padding: theme.__hd__.card.padding["default"],
     overflow: 'hidden'
   };
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.1.3-alpha8",
+  "version": "7.2.2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.1.2"
+    "@hero-design/colors": "7.2.2"
   },
   "peerDependencies": {
     "react": "17.0.2",
@@ -70,41 +70,5 @@
     "rollup-plugin-copy": "^3.4.0",
     "ts-jest": "^27.0.7",
     "typescript": "^4.5.5"
-  },
-  "nx": {
-    "targets": {
-      "type-check": {
-        "dependsOn": [
-          {
-            "target": "build:types",
-            "projects": "dependencies"
-          }
-        ]
-      },
-      "lint": {
-        "dependsOn": [
-          {
-            "target": "build:js",
-            "projects": "dependencies"
-          }
-        ]
-      },
-      "test:ci": {
-        "dependsOn": [
-          {
-            "target": "build",
-            "projects": "dependencies"
-          }
-        ]
-      },
-      "dev": {
-        "dependsOn": [
-          {
-            "target": "build",
-            "projects": "dependencies"
-          }
-        ]
-      }
-    }
   }
 }

package/playground/components/Card.tsx

@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   ScrollView,
 } from 'react-native';
-import { palette } from '@hero-design/colors';
+import palette from '@hero-design/colors';
 import {
   scale,
   Card,
@@ -71,13 +71,7 @@ const ApprovalCard = ({ style }: ViewProps) => {
   return (
     <Card
       style={StyleSheet.flatten([
-        {
-          backgroundColor: palette.greyLight90,
-          paddingTop: 0,
-          paddingRight: 0,
-          paddingBottom: 0,
-          paddingLeft: 0,
-        },
+        { backgroundColor: palette.greyLight90 },
         style,
       ])}
     >
@@ -117,7 +111,7 @@ const DashboardCard = ({
   const theme = useTheme();
 
   return (
-    <Card style={style}>
+    <Card style={StyleSheet.flatten([{ padding: theme.space.small }, style])}>
       <View style={{ flex: 1, alignItems: 'flex-end' }}>
         <Icon icon={icon} />
       </View>
@@ -175,6 +169,7 @@ const RostersCard = (props: ViewProps) => {
           flexDirection: 'row',
           alignItems: 'center',
           backgroundColor: palette.greyLight90,
+          padding: theme.space.small,
         },
         style,
       ])}
@@ -211,10 +206,6 @@ const MyLeaveCard = (props: ViewProps) => {
       style={StyleSheet.flatten([
         {
           backgroundColor: palette.greyLight90,
-          paddingBottom: 0,
-          paddingTop: 0,
-          paddingRight: 0,
-          paddingLeft: 0,
         },
         style,
       ])}

package/playground/index.tsx

@@ -6,8 +6,15 @@ import {
   NativeStackScreenProps,
 } from '@react-navigation/native-stack';
 import { useFonts } from 'expo-font';
-import { SafeAreaView, FlatList } from 'react-native';
-import { ThemeProvider, theme, useTheme, Typography } from '../src/index';
+import { SafeAreaView, FlatList, View, TouchableOpacity } from 'react-native';
+import {
+  ThemeProvider,
+  theme,
+  useTheme,
+  Typography,
+  Icon,
+  Divider,
+} from '../src/index';
 import BadgePlayground from './components/Badge';
 import BottomNavigation from './components/BottomNavigation';
 import Button from './components/Button';
@@ -52,44 +59,45 @@ const components = [
   { name: 'Typography', component: TypographyPlayground },
 ] as const;
 
-const ComponentItem = ({
-  name,
-  onPress,
-}: {
-  name: string;
-  onPress: () => void;
-}) => {
+const ComponentItem = ({ name }: { name: string }) => {
   const hdTheme = useTheme();
   return (
-    <Typography.Text
-      fontSize="large"
-      onPress={onPress}
+    <View
       style={{
-        marginTop: hdTheme.space.medium,
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginHorizontal: hdTheme.space.medium,
+        marginVertical: hdTheme.space.medium,
       }}
     >
-      {name}
-    </Typography.Text>
-  );
-};
-
-const ComponentList = ({ navigation }: Navigation) => {
-  const hdTheme = useTheme();
-  return (
-    <SafeAreaView style={{ marginHorizontal: hdTheme.space.large }}>
-      <FlatList
-        data={components}
-        renderItem={({ item }) => (
-          <ComponentItem
-            name={item.name}
-            onPress={() => navigation.navigate(item.name)}
-          />
-        )}
+      <Typography.Text fontSize="large">{name}</Typography.Text>
+      <Icon
+        icon="arrow-right"
+        size="small"
+        style={{ color: hdTheme.colors.disabledText }}
       />
-    </SafeAreaView>
+    </View>
   );
 };
 
+const ComponentList = ({ navigation }: Navigation) => (
+  <SafeAreaView>
+    <FlatList
+      data={components}
+      renderItem={({ item }) => (
+        <>
+          <TouchableOpacity onPress={() => navigation.navigate(item.name)}>
+            <ComponentItem name={item.name} />
+          </TouchableOpacity>
+          <Divider marginHorizontal="small" />
+        </>
+      )}
+    />
+  </SafeAreaView>
+);
+
 const App = () => {
   const CustomNavigationTheme = {
     ...DefaultTheme,

package/src/components/Card/StyledCard.tsx

@@ -3,7 +3,6 @@ import styled from '@emotion/native';
 
 const StyledCard = styled(View)(({ theme }) => ({
   borderRadius: theme.__hd__.card.radii.default,
-  padding: theme.__hd__.card.padding.default,
   overflow: 'hidden',
 }));
 

package/src/components/Card/__tests__/__snapshots__/StyledCard.spec.tsx.snap

@@ -7,7 +7,6 @@ exports[`StyledCard renders correct style 1`] = `
       Object {
         "borderRadius": 12,
         "overflow": "hidden",
-        "padding": 8,
       },
       undefined,
     ]

package/src/components/Card/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Card renders correct 1`] = `
+exports[`Card renders correctly 1`] = `
 <View
   hitSlop={
     Object {
@@ -18,7 +18,6 @@ exports[`Card renders correct 1`] = `
       Object {
         "borderRadius": 12,
         "overflow": "hidden",
-        "padding": 8,
       },
       Object {
         "backgroundColor": "#292a2b",

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

@@ -23,7 +23,7 @@ describe('Card', () => {
     );
   });
 
-  it('renders correct', () => {
+  it('renders correctly', () => {
     expect(wrapper.queryAllByTestId('card')).toHaveLength(1);
 
     expect(wrapper.toJSON()).toMatchSnapshot();

package/src/components/FAB/ActionGroup/index.tsx

@@ -25,7 +25,7 @@ const ActionItemsListComponent = ({
 );
 
 export interface ActionGroupProps {
-  /*
+  /**
    * Title of the action group header.
    */
   headerTitle?: string;
@@ -37,7 +37,6 @@ export interface ActionGroupProps {
    * Specify if the FAB button is in active state and the action group is shown.
    * */
   active?: boolean;
-
   /**
    * Additional style.
    */

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

@@ -53,9 +53,6 @@ Object {
       },
     },
     "card": Object {
-      "padding": Object {
-        "default": 8,
-      },
       "radii": Object {
         "default": 12,
       },

package/src/theme/components/card.ts

@@ -1,15 +1,9 @@
-import { GlobalTheme } from '../global';
-
-const getCardTheme = (theme: GlobalTheme) => {
+const getCardTheme = () => {
   const radii = {
     default: 12,
   };
 
-  const padding = {
-    default: theme.space.small,
-  };
-
-  return { radii, padding };
+  return { radii };
 };
 
 export default getCardTheme;

package/src/theme/global/colors.ts

@@ -1,4 +1,4 @@
-import { palette } from '@hero-design/colors';
+import palette from '@hero-design/colors';
 
 const systemPalette = {
   primary: palette.violet,

package/src/theme/index.ts

@@ -39,7 +39,7 @@ const getTheme = (
     __hd__: {
       badge: getBadgeTheme(globalTheme),
       bottomNavigation: getBottomNavigationTheme(globalTheme),
-      card: getCardTheme(globalTheme),
+      card: getCardTheme(),
       divider: getDividerTheme(globalTheme),
       icon: getIconTheme(globalTheme),
       tabs: getTabsTheme(globalTheme),

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

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

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

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

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

@@ -1,6 +1,9 @@
 import { StyleProp, ViewStyle } from 'react-native';
 import { ActionItemProps } from './ActionItem';
 export interface ActionGroupProps {
+    /**
+     * Title of the action group header.
+     */
     headerTitle?: string;
     /**
      * This function is called on pressing the FAB button.

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__/StyledFABContainer.spec.d.ts

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

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

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

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

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

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

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

package/types/src/styled-components.d.ts

@@ -0,0 +1,6 @@
+/// <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/src/theme/components/card.d.ts

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