@hero-design/rn 8.37.0 → 8.38.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.37.0",
+  "version": "8.38.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,14 +21,14 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.37.0",
+    "@hero-design/colors": "8.38.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21",
     "nanoid": "^4.0.2"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.37.0",
+    "@hero-design/react-native-month-year-picker": "^8.38.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "react": "18.0.0",
@@ -48,8 +48,8 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.37.0",
-    "@hero-design/react-native-month-year-picker": "^8.37.0",
+    "@hero-design/eslint-plugin": "8.38.0",
+    "@hero-design/react-native-month-year-picker": "^8.38.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -65,10 +65,10 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.37.0",
+    "eslint-config-hd": "8.38.0",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.37.0",
+    "prettier-config-hd": "8.38.0",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.5.0",

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

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HeroDesignProvider renders children correctly 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      Array [
+        Object {
+          "color": "#401960",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 42,
+          "letterSpacing": 0,
+          "lineHeight": 50,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="primary"
+    themeLevel="h1"
+    themeTypeface="neutral"
+  >
+    Test component
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      Array [
+        Object {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;

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

@@ -0,0 +1,78 @@
+import React from 'react';
+import { waitFor, within } from '@testing-library/react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Typography from '../../Typography';
+import HeroDesignProvider from '..';
+import { getTheme } from '../../../theme';
+import Toast from '../../Toast';
+import Box from '../../Box';
+import Portal from '../../Portal';
+
+const TestComponent = () => (
+  <Typography.Title intent="primary">Test component</Typography.Title>
+);
+const theme = getTheme();
+
+describe('HeroDesignProvider', () => {
+  it('renders children correctly', () => {
+    const { toJSON, getByText } = renderWithTheme(
+      <HeroDesignProvider theme={theme}>
+        <TestComponent />
+      </HeroDesignProvider>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('Test component')).toBeTruthy();
+    expect(getByText('Test component')).toHaveStyle({
+      color: theme.colors.primary,
+    });
+  });
+
+  it('renders toast correctly', async () => {
+    const Component = () => {
+      const toast = Toast.useToast();
+
+      React.useEffect(() => {
+        toast.show({
+          content: 'Your timesheet has been deleted.',
+          intent: 'warning',
+          variant: 'round',
+          duration: 50,
+        });
+      }, []);
+
+      return <TestComponent />;
+    };
+
+    const { queryByText } = renderWithTheme(
+      <HeroDesignProvider theme={theme}>
+        <Component />
+      </HeroDesignProvider>
+    );
+
+    expect(queryByText('Your timesheet has been deleted.')).toBeTruthy();
+
+    await waitFor(() =>
+      expect(queryByText('Your timesheet has been deleted.')).toBeFalsy()
+    );
+  });
+
+  it('renders portal content correctly', async () => {
+    const { getByTestId } = renderWithTheme(
+      <HeroDesignProvider theme={theme}>
+        <Box testID="portal-wrapper">
+          <Portal.Host name="host" />
+        </Box>
+        <Portal hostName="host">
+          <Typography.Body>Portal content</Typography.Body>;
+        </Portal>
+      </HeroDesignProvider>
+    );
+
+    await waitFor(() =>
+      expect(
+        within(getByTestId('portal-wrapper')).getByText('Portal content')
+      ).toBeDefined()
+    );
+  });
+});

package/src/components/HeroDesignProvider/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ThemeProvider, { ThemeProviderProps } from '../../theme/ThemeProvider';
+import Toast from '../Toast';
+import Portal from '../Portal';
+
+const HeroDesignProvider = ({ theme, children }: ThemeProviderProps) => (
+  <ThemeProvider theme={theme}>
+    <Toast.Provider>
+      <Portal.Provider>{children}</Portal.Provider>
+    </Toast.Provider>
+  </ThemeProvider>
+);
+
+export default HeroDesignProvider;

package/src/index.ts

@@ -34,6 +34,7 @@ import Drawer from './components/Drawer';
 import Empty from './components/Empty';
 import Error from './components/Error';
 import FAB from './components/FAB';
+import HeroDesignProvider from './components/HeroDesignProvider';
 import Icon from './components/Icon';
 import Image from './components/Image';
 import List from './components/List';
@@ -100,6 +101,7 @@ export {
   FAB,
   Icon,
   Image,
+  HeroDesignProvider,
   List,
   Modal,
   PinInput,

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

@@ -0,0 +1,3 @@
+import { ThemeProviderProps } from '../../theme/ThemeProvider';
+declare const HeroDesignProvider: ({ theme, children }: ThemeProviderProps) => JSX.Element;
+export default HeroDesignProvider;

package/types/index.d.ts

@@ -21,6 +21,7 @@ import Drawer from './components/Drawer';
 import Empty from './components/Empty';
 import Error from './components/Error';
 import FAB from './components/FAB';
+import HeroDesignProvider from './components/HeroDesignProvider';
 import Icon from './components/Icon';
 import Image from './components/Image';
 import List from './components/List';
@@ -48,5 +49,5 @@ import RefreshControl from './components/RefreshControl';
 import RichTextEditor from './components/RichTextEditor';
 import PageControl from './components/PageControl';
 import Portal from './components/Portal';
-export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, Icon, Image, List, Modal, PinInput, Progress, Portal, PageControl, Skeleton, Slider, Spinner, Swipeable, Radio, SectionHeading, Select, Success, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, Rate, RefreshControl, RichTextEditor, };
+export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, Icon, Image, HeroDesignProvider, List, Modal, PinInput, Progress, Portal, PageControl, Skeleton, Slider, Spinner, Swipeable, Radio, SectionHeading, Select, Success, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, Rate, RefreshControl, RichTextEditor, };
 export * from './types';