@hero-design/rn 8.74.1 → 8.75.0-alpha.0

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarMessage.spec.tsx.snap

@@ -0,0 +1,382 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ToolbarMessage disabled renders correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+          "height": 64,
+          "justifyContent": "space-between",
+          "paddingHorizontal": 8,
+          "paddingVertical": 12,
+        },
+        undefined,
+      ]
+    }
+    testID="toolbar-message"
+  >
+    <View
+      pointerEvents="none"
+      style={
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#f6f6f7",
+            "borderRadius": 999,
+            "flex": 1,
+            "flexDirection": "row",
+            "height": 40,
+            "paddingHorizontal": 12,
+            "paddingVertical": 8,
+          },
+          undefined,
+        ]
+      }
+      testID="toolbar-message-input-container"
+    >
+      <TextInput
+        editable={true}
+        onChangeText={[MockFunction]}
+        placeholder="Message"
+        style={
+          [
+            {
+              "alignSelf": "stretch",
+              "flexGrow": 1,
+              "flexShrink": 1,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "textAlignVertical": "center",
+            },
+            undefined,
+          ]
+        }
+        testID="toolbar-message-input"
+        value="Jisoo"
+      />
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`ToolbarMessage filled renders correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+          "height": 64,
+          "justifyContent": "space-between",
+          "paddingHorizontal": 8,
+          "paddingVertical": 12,
+        },
+        undefined,
+      ]
+    }
+    testID="toolbar-message"
+  >
+    <View
+      pointerEvents="auto"
+      style={
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#f6f6f7",
+            "borderRadius": 999,
+            "flex": 1,
+            "flexDirection": "row",
+            "height": 40,
+            "paddingHorizontal": 12,
+            "paddingVertical": 8,
+          },
+          undefined,
+        ]
+      }
+      testID="toolbar-message-input-container"
+    >
+      <TextInput
+        editable={true}
+        placeholder="Message"
+        style={
+          [
+            {
+              "alignSelf": "stretch",
+              "flexGrow": 1,
+              "flexShrink": 1,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "textAlignVertical": "center",
+            },
+            undefined,
+          ]
+        }
+        testID="toolbar-message-input"
+        value="Jennie Kim"
+      />
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`ToolbarMessage idle renders correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+          "height": 64,
+          "justifyContent": "space-between",
+          "paddingHorizontal": 8,
+          "paddingVertical": 12,
+        },
+        undefined,
+      ]
+    }
+    testID="toolbar-message"
+  >
+    <View
+      style={
+        [
+          {
+            "marginRight": 16,
+            "maxHeight": "100%",
+          },
+          undefined,
+        ]
+      }
+      testID="toolbar-message-prefix"
+    >
+      prefix
+    </View>
+    <View
+      pointerEvents="auto"
+      style={
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#f6f6f7",
+            "borderRadius": 999,
+            "flex": 1,
+            "flexDirection": "row",
+            "height": 40,
+            "paddingHorizontal": 12,
+            "paddingVertical": 8,
+          },
+          undefined,
+        ]
+      }
+      testID="toolbar-message-input-container"
+    >
+      <TextInput
+        editable={true}
+        placeholder="Message"
+        style={
+          [
+            {
+              "alignSelf": "stretch",
+              "flexGrow": 1,
+              "flexShrink": 1,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "textAlignVertical": "center",
+            },
+            undefined,
+          ]
+        }
+        testID="toolbar-message-input"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "marginLeft": 16,
+            "maxHeight": "100%",
+          },
+          undefined,
+        ]
+      }
+      testID="toolbar-message-suffix"
+    >
+      suffix
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`ToolbarMessage readonly renders correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+          "height": 64,
+          "justifyContent": "space-between",
+          "paddingHorizontal": 8,
+          "paddingVertical": 12,
+        },
+        undefined,
+      ]
+    }
+    testID="toolbar-message"
+  >
+    <View
+      pointerEvents="auto"
+      style={
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#f6f6f7",
+            "borderRadius": 999,
+            "flex": 1,
+            "flexDirection": "row",
+            "height": 40,
+            "paddingHorizontal": 12,
+            "paddingVertical": 8,
+          },
+          undefined,
+        ]
+      }
+      testID="toolbar-message-input-container"
+    >
+      <TextInput
+        editable={true}
+        onChangeText={[MockFunction]}
+        placeholder="Message"
+        style={
+          [
+            {
+              "alignSelf": "stretch",
+              "flexGrow": 1,
+              "flexShrink": 1,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "textAlignVertical": "center",
+            },
+            undefined,
+          ]
+        }
+        testID="toolbar-message-input"
+        value="Lalisa"
+      />
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;

package/src/components/Toolbar/index.tsx

@@ -3,6 +3,7 @@ import type { ReactNode } from 'react';
 import { ViewProps } from 'react-native';
 import { ToolbarWrapper } from './StyledToolbar';
 import ToolbarGroup from './ToolbarGroup';
+import ToolbarMessage from './ToolbarMessage';
 
 export interface ToolbarProps extends Omit<ViewProps, 'style'> {
   /**
@@ -17,4 +18,5 @@ const Toolbar = ({ children, ...rest }: ToolbarProps) => (
 
 export default Object.assign(Toolbar, {
   Group: ToolbarGroup,
+  Message: ToolbarMessage,
 });

package/src/index.ts

@@ -71,6 +71,7 @@ import {
   FlatListWithFAB,
 } from './components/AnimatedScroller';
 import Search from './components/Search';
+import FloatingIsland from './components/FloatingIsland';
 
 export {
   theme,
@@ -143,6 +144,7 @@ export {
   Rate,
   RefreshControl,
   RichTextEditor,
+  FloatingIsland,
 };
 
 export * from './types';

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

@@ -590,6 +590,36 @@ exports[`theme returns correct theme object 1`] = `
         "titleMarginHorizontal": 8,
       },
     },
+    "floatingIsland": {
+      "colors": {
+        "wrapperBackground": "#ffffff",
+      },
+      "fontSizes": {
+        "iconSize": 14,
+      },
+      "radii": {
+        "wrapper": 999,
+      },
+      "shadows": {
+        "wrapper": {
+          "elevation": 3,
+          "shadowColor": "#001f23",
+          "shadowOffset": {
+            "height": 2,
+            "width": 0,
+          },
+          "shadowOpacity": 0.12,
+          "shadowRadius": 4,
+        },
+      },
+      "space": {
+        "iconPadding": 12,
+        "prefixMarginRight": 8,
+        "suffixMarginLeft": 16,
+        "wrapperPadding": 8,
+        "wrapperTop": 12,
+      },
+    },
     "icon": {
       "colors": {
         "danger": "#cb300a",
@@ -1286,20 +1316,36 @@ exports[`theme returns correct theme object 1`] = `
         "error": "#f46363",
         "iconButtonBackground": "#ece8ef",
         "info": "#b5c3fd",
+        "inputContainerBackground": "#f6f6f7",
         "primary": "#401960",
         "secondary": "#4d6265",
         "success": "#5ace7d",
       },
+      "fontSizes": {
+        "text": 16,
+      },
+      "fonts": {
+        "text": "BeVietnamPro-Regular",
+      },
       "radii": {
         "iconButtonWrapperBorderRadius": 24,
+        "messageContainer": 999,
       },
       "sizes": {
         "itemWrapperHeight": 64,
+        "messageInputHeight": 40,
+        "messageWrapperHeight": 64,
       },
       "space": {
+        "affixInnerMargin": 16,
         "horizontalPadding": 8,
         "iconButtonLabelMarginLeft": 8,
         "iconButtonWrapperPadding": 12,
+        "messageInputPaddingHorizontal": 12,
+        "messageInputPaddingVertical": 8,
+        "messageWrapperMarginHorizontal": 8,
+        "messageWrapperPaddingHorizontal": 8,
+        "messageWrapperPaddingVertical": 12,
         "verticalPadding": 8,
       },
     },

package/src/theme/components/floatingIsland.ts

@@ -0,0 +1,31 @@
+import type { GlobalTheme } from '../global';
+
+const getFloatingIslandTheme = (theme: GlobalTheme) => {
+  const colors = {
+    wrapperBackground: theme.colors.defaultGlobalSurface,
+  };
+
+  const radii = {
+    wrapper: theme.radii.rounded,
+  };
+
+  const shadows = {
+    wrapper: theme.shadows.default,
+  };
+
+  const space = {
+    wrapperPadding: theme.space.small,
+    wrapperTop: theme.space.smallMedium,
+    prefixMarginRight: theme.space.small,
+    suffixMarginLeft: theme.space.medium,
+    iconPadding: theme.space.smallMedium,
+  };
+
+  const fontSizes = {
+    iconSize: theme.fontSizes.medium,
+  };
+
+  return { colors, radii, shadows, space, fontSizes };
+};
+
+export default getFloatingIslandTheme;

package/src/theme/components/toolbar.ts

@@ -13,6 +13,7 @@ const getToolbarTheme = (theme: GlobalTheme) => {
     error: theme.colors.error,
     disabled: theme.colors.disabledOnDefaultGlobalSurface,
     iconButtonBackground: theme.colors.highlightedSurface,
+    inputContainerBackground: theme.colors.neutralGlobalSurface,
   };
 
   const space = {
@@ -20,6 +21,12 @@ const getToolbarTheme = (theme: GlobalTheme) => {
     horizontalPadding: theme.space.small,
     iconButtonLabelMarginLeft: theme.space.small,
     iconButtonWrapperPadding: theme.space.smallMedium,
+    messageWrapperMarginHorizontal: theme.space.small,
+    messageWrapperPaddingVertical: theme.space.smallMedium,
+    messageWrapperPaddingHorizontal: theme.space.small,
+    messageInputPaddingHorizontal: theme.space.smallMedium,
+    messageInputPaddingVertical: theme.space.small,
+    affixInnerMargin: theme.space.medium,
   };
 
   const borderWidths = {
@@ -28,13 +35,24 @@ const getToolbarTheme = (theme: GlobalTheme) => {
 
   const sizes = {
     itemWrapperHeight: scale(64),
+    messageWrapperHeight: scale(64),
+    messageInputHeight: 40,
   };
 
   const radii = {
     iconButtonWrapperBorderRadius: theme.radii.xxxlarge,
+    messageContainer: theme.radii.rounded,
   };
 
-  return { colors, space, borderWidths, sizes, radii };
+  const fontSizes = {
+    text: theme.fontSizes.large,
+  };
+
+  const fonts = {
+    text: theme.fonts.neutral.regular,
+  };
+
+  return { colors, space, borderWidths, sizes, radii, fontSizes, fonts };
 };
 
 export default getToolbarTheme;

package/src/theme/getTheme.ts

@@ -50,6 +50,7 @@ import getTypographyTheme from './components/typography';
 import type { GlobalTheme, Scale, SystemPalette } from './global';
 import getSearchTheme from './components/search';
 import getMapPinTheme from './components/mapPin';
+import getFloatingIslandTheme from './components/floatingIsland';
 
 type Theme = GlobalTheme & {
   __hd__: {
@@ -101,6 +102,7 @@ type Theme = GlobalTheme & {
     toast: ReturnType<typeof getToastTheme>;
     toolbar: ReturnType<typeof getToolbarTheme>;
     typography: ReturnType<typeof getTypographyTheme>;
+    floatingIsland: ReturnType<typeof getFloatingIslandTheme>;
   };
 };
 
@@ -160,6 +162,7 @@ const getTheme = (
       toast: getToastTheme(globalTheme),
       toolbar: getToolbarTheme(globalTheme),
       typography: getTypographyTheme(globalTheme),
+      floatingIsland: getFloatingIslandTheme(globalTheme),
     },
   };
 };