@hero-design/rn 8.33.1 → 8.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.33.1",
+  "version": "8.34.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.33.1",
+    "@hero-design/colors": "8.34.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -31,9 +31,10 @@
     "@react-native-community/slider": "4.1.12",
     "react": "18.0.0",
     "react-native": "0.69.7",
-    "react-native-gesture-handler": "^1.10.3 | ~2.1.0",
+    "react-native-gesture-handler": "^1.10.3 | ~2.5.0",
     "react-native-linear-gradient": "^2.6.2",
     "react-native-pager-view": "^5.4.25",
+    "react-native-root-siblings": "^4.1.1",
     "react-native-safe-area-context": "^3.0.2",
     "react-native-vector-icons": "^9.1.0",
     "react-native-webview": "^11.2.5"
@@ -45,7 +46,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.33.1",
+    "@hero-design/eslint-plugin": "8.34.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -61,13 +62,13 @@
     "@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.33.1",
+    "eslint-config-hd": "8.34.0",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.33.1",
+    "prettier-config-hd": "8.34.0",
     "react": "18.0.0",
     "react-native": "0.69.7",
-    "react-native-gesture-handler": "~2.1.0",
+    "react-native-gesture-handler": "~2.5.0",
     "react-native-linear-gradient": "^2.6.2",
     "react-native-pager-view": "^5.4.25",
     "react-native-safe-area-context": "^3.0.2",

package/rollup.config.js

@@ -34,6 +34,7 @@ export default {
     'react-native-pager-view',
     'react-native-vector-icons',
     'react-native-linear-gradient',
+    'react-native-root-siblings',
   ],
   plugins: [
     replace({

package/src/components/Accordion/AccordionItem.tsx

@@ -32,9 +32,7 @@ const AccordionItem = ({
   <StyledItemWrapper themeVariant={variant} style={style} testID={testID}>
     <StyledHeaderWrapper onPress={onPress}>
       {typeof header === 'string' ? (
-        <Typography.Text fontSize="large" fontWeight="semi-bold">
-          {header}
-        </Typography.Text>
+        <Typography.Body variant="regular-bold">{header}</Typography.Body>
       ) : (
         header
       )}

package/src/components/Accordion/__tests__/AccordionItem.spec.tsx

@@ -8,7 +8,7 @@ describe('AccordionItem', () => {
     const wrapper = renderWithTheme(
       <AccordionItem
         header="Accordion header"
-        content={<Typography.Text>Accordion content</Typography.Text>}
+        content={<Typography.Body>Accordion content</Typography.Body>}
       />
     );
 
@@ -20,8 +20,8 @@ describe('AccordionItem', () => {
   it('renders correctly when header is an element', () => {
     const wrapper = renderWithTheme(
       <AccordionItem
-        header={<Typography.Text>Accordion header</Typography.Text>}
-        content={<Typography.Text>Accordion content</Typography.Text>}
+        header={<Typography.Body>Accordion header</Typography.Body>}
+        content={<Typography.Body>Accordion content</Typography.Body>}
       />
     );
 
@@ -34,7 +34,7 @@ describe('AccordionItem', () => {
     const wrapper = renderWithTheme(
       <AccordionItem
         header="Accordion header"
-        content={<Typography.Text>Accordion content</Typography.Text>}
+        content={<Typography.Body>Accordion content</Typography.Body>}
         variant="card"
       />
     );
@@ -46,7 +46,7 @@ describe('AccordionItem', () => {
     const wrapper = renderWithTheme(
       <AccordionItem
         header="Accordion header"
-        content={<Typography.Text>Accordion content</Typography.Text>}
+        content={<Typography.Body>Accordion content</Typography.Body>}
         open
       />
     );

package/src/components/Accordion/__tests__/__snapshots__/AccordionItem.spec.tsx.snap

@@ -40,17 +40,16 @@ exports[`AccordionItem renders correctly when header is an element 1`] = `
           Object {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
-            "letterSpacing": 0.42,
-            "lineHeight": 22,
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
           },
           undefined,
         ]
       }
-      themeFontSize="medium"
-      themeFontWeight="regular"
       themeIntent="body"
       themeTypeface="neutral"
+      themeVariant="regular"
     >
       Accordion header
     </Text>
@@ -115,17 +114,16 @@ exports[`AccordionItem renders correctly when header is an element 1`] = `
               Object {
                 "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 14,
-                "letterSpacing": 0.42,
-                "lineHeight": 22,
+                "fontSize": 16,
+                "letterSpacing": 0.48,
+                "lineHeight": 24,
               },
               undefined,
             ]
           }
-          themeFontSize="medium"
-          themeFontWeight="regular"
           themeIntent="body"
           themeTypeface="neutral"
+          themeVariant="regular"
         >
           Accordion content
         </Text>
@@ -176,16 +174,15 @@ exports[`AccordionItem renders correctly when header is string 1`] = `
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 16,
-            "letterSpacing": 0.48,
+            "letterSpacing": 0.24,
             "lineHeight": 24,
           },
           undefined,
         ]
       }
-      themeFontSize="large"
-      themeFontWeight="semi-bold"
       themeIntent="body"
       themeTypeface="neutral"
+      themeVariant="regular-bold"
     >
       Accordion header
     </Text>
@@ -250,17 +247,16 @@ exports[`AccordionItem renders correctly when header is string 1`] = `
               Object {
                 "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 14,
-                "letterSpacing": 0.42,
-                "lineHeight": 22,
+                "fontSize": 16,
+                "letterSpacing": 0.48,
+                "lineHeight": 24,
               },
               undefined,
             ]
           }
-          themeFontSize="medium"
-          themeFontWeight="regular"
           themeIntent="body"
           themeTypeface="neutral"
+          themeVariant="regular"
         >
           Accordion content
         </Text>
@@ -311,16 +307,15 @@ exports[`AccordionItem renders correctly when open 1`] = `
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 16,
-            "letterSpacing": 0.48,
+            "letterSpacing": 0.24,
             "lineHeight": 24,
           },
           undefined,
         ]
       }
-      themeFontSize="large"
-      themeFontWeight="semi-bold"
       themeIntent="body"
       themeTypeface="neutral"
+      themeVariant="regular-bold"
     >
       Accordion header
     </Text>
@@ -385,17 +380,16 @@ exports[`AccordionItem renders correctly when open 1`] = `
               Object {
                 "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 14,
-                "letterSpacing": 0.42,
-                "lineHeight": 22,
+                "fontSize": 16,
+                "letterSpacing": 0.48,
+                "lineHeight": 24,
               },
               undefined,
             ]
           }
-          themeFontSize="medium"
-          themeFontWeight="regular"
           themeIntent="body"
           themeTypeface="neutral"
+          themeVariant="regular"
         >
           Accordion content
         </Text>
@@ -446,16 +440,15 @@ exports[`AccordionItem renders correctly when variant is card 1`] = `
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 16,
-            "letterSpacing": 0.48,
+            "letterSpacing": 0.24,
             "lineHeight": 24,
           },
           undefined,
         ]
       }
-      themeFontSize="large"
-      themeFontWeight="semi-bold"
       themeIntent="body"
       themeTypeface="neutral"
+      themeVariant="regular-bold"
     >
       Accordion header
     </Text>
@@ -520,17 +513,16 @@ exports[`AccordionItem renders correctly when variant is card 1`] = `
               Object {
                 "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 14,
-                "letterSpacing": 0.42,
-                "lineHeight": 22,
+                "fontSize": 16,
+                "letterSpacing": 0.48,
+                "lineHeight": 24,
               },
               undefined,
             ]
           }
-          themeFontSize="medium"
-          themeFontWeight="regular"
           themeIntent="body"
           themeTypeface="neutral"
+          themeVariant="regular"
         >
           Accordion content
         </Text>

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

@@ -49,16 +49,15 @@ exports[`Accordion allows fully controlled 1`] = `
               "color": "#001f23",
               "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 16,
-              "letterSpacing": 0.48,
+              "letterSpacing": 0.24,
               "lineHeight": 24,
             },
             undefined,
           ]
         }
-        themeFontSize="large"
-        themeFontWeight="semi-bold"
         themeIntent="body"
         themeTypeface="neutral"
+        themeVariant="regular-bold"
       >
         Accordion header 1
       </Text>
@@ -123,17 +122,16 @@ exports[`Accordion allows fully controlled 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.42,
-                  "lineHeight": 22,
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
                 },
                 undefined,
               ]
             }
-            themeFontSize="medium"
-            themeFontWeight="regular"
             themeIntent="body"
             themeTypeface="neutral"
+            themeVariant="regular"
           >
             Accordion content 1
           </Text>
@@ -181,16 +179,15 @@ exports[`Accordion allows fully controlled 1`] = `
               "color": "#001f23",
               "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 16,
-              "letterSpacing": 0.48,
+              "letterSpacing": 0.24,
               "lineHeight": 24,
             },
             undefined,
           ]
         }
-        themeFontSize="large"
-        themeFontWeight="semi-bold"
         themeIntent="body"
         themeTypeface="neutral"
+        themeVariant="regular-bold"
       >
         Accordion header 2
       </Text>
@@ -255,17 +252,16 @@ exports[`Accordion allows fully controlled 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.42,
-                  "lineHeight": 22,
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
                 },
                 undefined,
               ]
             }
-            themeFontSize="medium"
-            themeFontWeight="regular"
             themeIntent="body"
             themeTypeface="neutral"
+            themeVariant="regular"
           >
             Accordion content 2
           </Text>
@@ -325,16 +321,15 @@ exports[`Accordion renders correctly 1`] = `
               "color": "#001f23",
               "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 16,
-              "letterSpacing": 0.48,
+              "letterSpacing": 0.24,
               "lineHeight": 24,
             },
             undefined,
           ]
         }
-        themeFontSize="large"
-        themeFontWeight="semi-bold"
         themeIntent="body"
         themeTypeface="neutral"
+        themeVariant="regular-bold"
       >
         Accordion header 1
       </Text>
@@ -399,17 +394,16 @@ exports[`Accordion renders correctly 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.42,
-                  "lineHeight": 22,
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
                 },
                 undefined,
               ]
             }
-            themeFontSize="medium"
-            themeFontWeight="regular"
             themeIntent="body"
             themeTypeface="neutral"
+            themeVariant="regular"
           >
             Accordion content 1
           </Text>
@@ -457,16 +451,15 @@ exports[`Accordion renders correctly 1`] = `
               "color": "#001f23",
               "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 16,
-              "letterSpacing": 0.48,
+              "letterSpacing": 0.24,
               "lineHeight": 24,
             },
             undefined,
           ]
         }
-        themeFontSize="large"
-        themeFontWeight="semi-bold"
         themeIntent="body"
         themeTypeface="neutral"
+        themeVariant="regular-bold"
       >
         Accordion header 2
       </Text>
@@ -531,17 +524,16 @@ exports[`Accordion renders correctly 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.42,
-                  "lineHeight": 22,
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
                 },
                 undefined,
               ]
             }
-            themeFontSize="medium"
-            themeFontWeight="regular"
             themeIntent="body"
             themeTypeface="neutral"
+            themeVariant="regular"
           >
             Accordion content 2
           </Text>
@@ -601,16 +593,15 @@ exports[`Accordion renders correctly when variant is card 1`] = `
               "color": "#001f23",
               "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 16,
-              "letterSpacing": 0.48,
+              "letterSpacing": 0.24,
               "lineHeight": 24,
             },
             undefined,
           ]
         }
-        themeFontSize="large"
-        themeFontWeight="semi-bold"
         themeIntent="body"
         themeTypeface="neutral"
+        themeVariant="regular-bold"
       >
         Accordion header 1
       </Text>
@@ -675,17 +666,16 @@ exports[`Accordion renders correctly when variant is card 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.42,
-                  "lineHeight": 22,
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
                 },
                 undefined,
               ]
             }
-            themeFontSize="medium"
-            themeFontWeight="regular"
             themeIntent="body"
             themeTypeface="neutral"
+            themeVariant="regular"
           >
             Accordion content 1
           </Text>
@@ -744,16 +734,15 @@ exports[`Accordion renders correctly when variant is card 1`] = `
               "color": "#001f23",
               "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 16,
-              "letterSpacing": 0.48,
+              "letterSpacing": 0.24,
               "lineHeight": 24,
             },
             undefined,
           ]
         }
-        themeFontSize="large"
-        themeFontWeight="semi-bold"
         themeIntent="body"
         themeTypeface="neutral"
+        themeVariant="regular-bold"
       >
         Accordion header 2
       </Text>
@@ -818,17 +807,16 @@ exports[`Accordion renders correctly when variant is card 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.42,
-                  "lineHeight": 22,
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
                 },
                 undefined,
               ]
             }
-            themeFontSize="medium"
-            themeFontWeight="regular"
             themeIntent="body"
             themeTypeface="neutral"
+            themeVariant="regular"
           >
             Accordion content 2
           </Text>

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

@@ -9,12 +9,12 @@ const AccordionExample = (props: Omit<AccordionProps<string>, 'items'>) => (
     items={[
       {
         header: 'Accordion header 1',
-        content: <Typography.Text>Accordion content 1</Typography.Text>,
+        content: <Typography.Body>Accordion content 1</Typography.Body>,
         key: 'acc1',
       },
       {
         header: 'Accordion header 2',
-        content: <Typography.Text>Accordion content 2</Typography.Text>,
+        content: <Typography.Body>Accordion content 2</Typography.Body>,
         key: 'acc2',
       },
     ]}