@jobber/components-native 0.98.3 → 0.98.5

package/dist/types/src/Chip/Chip.style.d.ts

@@ -5,8 +5,6 @@ export declare const useStyles: () => {
         flexDirection: "row";
         height: number;
         justifyContent: "center";
-        marginHorizontal: number;
-        marginTop: number;
         paddingHorizontal: number;
     };
     iconLeft: {

package/dist/types/src/index.d.ts

@@ -35,7 +35,6 @@ export * from "./InputPressable";
 export * from "./InputSearch";
 export * from "./InputText";
 export * from "./InputTime";
-export * from "./Menu";
 export * from "./ProgressBar";
 export * from "./Select";
 export * from "./StatusLabel";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.98.3",
+  "version": "0.98.5",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -96,5 +96,5 @@
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "4edff1d8859ef42cd6ee00024ef9d40a598d825c"
+  "gitHead": "60dbce9880c63f02f43d8b3f1f5ef9090dba32e3"
 }

package/src/Chip/Chip.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { View } from "react-native";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Chip } from "@jobber/components-native";
+import { Chip, useAtlantisTheme } from "@jobber/components-native";
 
 const meta = {
   title: "Components/Selections/Chip",
@@ -29,43 +29,54 @@ export const Basic: Story = {
   },
 };
 
-const AccentTemplate = (args: Story["args"]) => (
-  <View style={{ display: "flex", flexDirection: "row", flexWrap: "wrap" }}>
-    <Chip {...args} />
-    <Chip
-      label="Select requests"
-      accent="request"
-      icon="request"
-      onPress={() => alert("Requests")}
-      accessibilityLabel={"Select Requests"}
-      isActive={true}
-    />
-    <Chip
-      label="Select quotes"
-      accent="quote"
-      icon="quote"
-      onPress={() => alert("Quotes")}
-      accessibilityLabel={"Select Quotes"}
-      isActive={true}
-    />
-    <Chip
-      label="Select jobs"
-      accent="job"
-      icon="job"
-      onPress={() => alert("Jobs")}
-      accessibilityLabel={"Select Jobs"}
-      isActive={true}
-    />
-    <Chip
-      label="Select invoices"
-      accent="invoice"
-      icon="invoice"
-      onPress={() => alert("Invoices")}
-      accessibilityLabel={"Select Invoices"}
-      isActive={true}
-    />
-  </View>
-);
+const AccentTemplate = (args: Story["args"]) => {
+  const { tokens } = useAtlantisTheme();
+
+  return (
+    <View
+      style={{
+        display: "flex",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        gap: tokens["space-small"],
+      }}
+    >
+      <Chip {...args} />
+      <Chip
+        label="Select requests"
+        accent="request"
+        icon="request"
+        onPress={() => alert("Requests")}
+        accessibilityLabel={"Select Requests"}
+        isActive={true}
+      />
+      <Chip
+        label="Select quotes"
+        accent="quote"
+        icon="quote"
+        onPress={() => alert("Quotes")}
+        accessibilityLabel={"Select Quotes"}
+        isActive={true}
+      />
+      <Chip
+        label="Select jobs"
+        accent="job"
+        icon="job"
+        onPress={() => alert("Jobs")}
+        accessibilityLabel={"Select Jobs"}
+        isActive={true}
+      />
+      <Chip
+        label="Select invoices"
+        accent="invoice"
+        icon="invoice"
+        onPress={() => alert("Invoices")}
+        accessibilityLabel={"Select Invoices"}
+        isActive={true}
+      />
+    </View>
+  );
+};
 
 export const Accent: Story = {
   render: AccentTemplate,

package/src/Chip/Chip.style.ts

@@ -10,8 +10,6 @@ export const useStyles = buildThemedStyles(tokens => {
       flexDirection: "row",
       height: chipHeight,
       justifyContent: "center",
-      marginHorizontal: tokens["space-smaller"],
-      marginTop: tokens["space-small"],
       paddingHorizontal: tokens["space-base"],
     },
     iconLeft: {

package/src/index.ts

@@ -35,7 +35,6 @@ export * from "./InputPressable";
 export * from "./InputSearch";
 export * from "./InputText";
 export * from "./InputTime";
-export * from "./Menu";
 export * from "./ProgressBar";
 export * from "./Select";
 export * from "./StatusLabel";

package/src/utils/meta/meta.json

@@ -56,7 +56,6 @@
     "InputSearch",
     "InputText",
     "InputTime",
-    "Menu",
     "Option",
     "ProgressBar",
     "Select",

package/dist/src/Menu/Menu.js

@@ -1,85 +0,0 @@
-import React, { useCallback, useRef, useState } from "react";
-import { Keyboard, Platform, Pressable, View, useWindowDimensions, } from "react-native";
-import { Portal } from "react-native-portalize";
-import { useSafeAreaFrame } from "react-native-safe-area-context";
-import { useStyles } from "./Menu.style";
-import { findViewpoint } from "./utils";
-import { MenuOption } from "./components/MenuOption";
-import { Overlay } from "./components/Overlay";
-import { Button } from "../Button";
-import { Content } from "../Content";
-import { useAtlantisContext } from "../AtlantisContext";
-import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
-import { useAtlantisTheme } from "../AtlantisThemeContext";
-export function Menu({ menuOptions, customActivator }) {
-    const [open, setOpen] = useState(false);
-    const [menuPosition, setMenuPosition] = useState();
-    const activatorLayout = useRef(null);
-    const menuButtonRef = useRef(null);
-    const screenInfo = useScreenInformation();
-    const { t } = useAtlantisI18n();
-    const styles = useStyles();
-    const findMenuLayout = useCallback(() => {
-        if (activatorLayout.current) {
-            setMenuPosition(findViewpoint(screenInfo, activatorLayout.current, styles));
-        }
-    }, [screenInfo, activatorLayout, styles]);
-    const openMenu = () => {
-        var _a;
-        (_a = menuButtonRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow((x, y, width, height) => {
-            activatorLayout.current = {
-                x,
-                y,
-                width,
-                height,
-            };
-            findMenuLayout();
-            setOpen(true);
-        });
-    };
-    const activatorOnPress = (onPress) => {
-        onPress && onPress();
-        if (Platform.OS === "ios" && Keyboard.isVisible()) {
-            // On iOS, the keyboard height causes problems with the menu positioning logic.
-            // Wait until the keyboard is fully hidden before we show the menu.
-            onKeyboardDidHide(openMenu);
-            Keyboard.dismiss();
-        }
-        else {
-            openMenu();
-        }
-    };
-    const { tokens } = useAtlantisTheme();
-    return (React.createElement(React.Fragment, null,
-        React.createElement(View, { ref: ref => {
-                menuButtonRef.current = ref;
-            }, collapsable: false },
-            customActivator && (React.createElement(Pressable, { style: ({ pressed }) => [
-                    {
-                        opacity: pressed ? tokens["opacity-pressed"] : 1,
-                    },
-                ], pointerEvents: "box-only", onPress: () => {
-                    activatorOnPress(customActivator.props.onPress);
-                }, onLongPress: customActivator.props.onLongPress }, customActivator)),
-            !customActivator && (React.createElement(Button, { icon: "more", accessibilityLabel: t("menu"), variation: "cancel", type: "tertiary", onPress: () => {
-                    activatorOnPress();
-                } }))),
-        React.createElement(Portal, null, open && (React.createElement(React.Fragment, null,
-            React.createElement(Overlay, { setOpen: setOpen }),
-            React.createElement(View, { style: [open && menuPosition, styles.menu] },
-                React.createElement(Content, { spacing: "none", childSpacing: "small" }, menuOptions === null || menuOptions === void 0 ? void 0 : menuOptions.map((menuOption, index) => {
-                    return (React.createElement(MenuOption, Object.assign({}, menuOption, { key: index, setOpen: setOpen })));
-                }))))))));
-}
-function useScreenInformation() {
-    const { headerHeight } = useAtlantisContext();
-    const windowWidth = useWindowDimensions().width;
-    const { height: windowHeight } = useSafeAreaFrame();
-    return { headerHeight, windowWidth, windowHeight };
-}
-function onKeyboardDidHide(callback) {
-    const listener = Keyboard.addListener("keyboardDidHide", () => {
-        listener.remove();
-        callback();
-    });
-}

package/dist/src/Menu/Menu.style.js

@@ -1,7 +0,0 @@
-import { buildThemedStyles } from "../AtlantisThemeContext";
-const menuWidth = 208;
-export const useStyles = buildThemedStyles(tokens => {
-    return {
-        menu: Object.assign({ position: "absolute", backgroundColor: tokens["color-surface"], paddingHorizontal: tokens["space-small"], paddingVertical: tokens["space-small"] + tokens["space-smallest"], borderRadius: tokens["radius-base"], width: menuWidth }, tokens["shadow-high"]),
-    };
-});

package/dist/src/Menu/components/MenuOption/MenuOption.js

@@ -1,27 +0,0 @@
-import React from "react";
-import { Pressable, View } from "react-native";
-import capitalize from "lodash/capitalize";
-import { useStyles } from "./MenuOption.style";
-import { Flex } from "../../../Flex";
-import { Typography } from "../../../Typography";
-import { Icon } from "../../../Icon";
-import { useAtlantisTheme } from "../../../AtlantisThemeContext";
-export function MenuOption({ label, icon, iconColor = "heading", textAlign, destructive, textTransform = "capitalize", onPress, setOpen, }) {
-    const destructiveColor = "destructive";
-    const textVariation = destructive ? destructiveColor : "heading";
-    const styles = useStyles();
-    const { tokens } = useAtlantisTheme();
-    return (React.createElement(View, { testID: "ATL-MENU-OPTIONS" },
-        React.createElement(Pressable, { style: ({ pressed }) => [
-                styles.menuOption,
-                { opacity: pressed ? tokens["opacity-pressed"] : 1 },
-            ], onPress: () => {
-                onPress();
-                setOpen(false);
-            }, accessibilityLabel: label },
-            React.createElement(Flex, { template: ["grow", "shrink"], align: "flex-start", gap: "smaller" },
-                React.createElement(Typography, { selectable: false, color: textVariation, fontWeight: "semiBold", lineHeight: "large", align: textAlign }, textTransform === "capitalize"
-                    ? capitalize(label.toLocaleLowerCase())
-                    : label),
-                icon && (React.createElement(Icon, { name: icon, color: destructive ? destructiveColor : iconColor }))))));
-}

package/dist/src/Menu/components/MenuOption/MenuOption.style.js

@@ -1,11 +0,0 @@
-import { buildThemedStyles } from "../../../AtlantisThemeContext";
-export const useStyles = buildThemedStyles(tokens => {
-    return {
-        menuOption: {
-            display: "flex",
-            paddingHorizontal: tokens["space-base"],
-            paddingVertical: tokens["space-small"],
-            borderRadius: tokens["radius-large"],
-        },
-    };
-});

package/dist/src/Menu/components/MenuOption/index.js

@@ -1 +0,0 @@
-export { MenuOption } from "./MenuOption";

package/dist/src/Menu/components/Overlay/Overlay.js

@@ -1,10 +0,0 @@
-import React from "react";
-import { Pressable, View } from "react-native";
-import { useStyles } from "./Overlay.style";
-export function Overlay({ setOpen }) {
-    const styles = useStyles();
-    return (React.createElement(Pressable, { onPressIn: () => {
-            setOpen(false);
-        } },
-        React.createElement(View, { style: styles.overlay })));
-}

package/dist/src/Menu/components/Overlay/Overlay.style.js

@@ -1,8 +0,0 @@
-import { Dimensions, StyleSheet } from "react-native";
-import { buildThemedStyles } from "../../../AtlantisThemeContext";
-const { height } = Dimensions.get("window");
-export const useStyles = buildThemedStyles(tokens => {
-    return {
-        overlay: Object.assign(Object.assign({}, StyleSheet.absoluteFillObject), { backgroundColor: tokens["color-overlay"], opacity: 0, height }),
-    };
-});

package/dist/src/Menu/components/Overlay/index.js

@@ -1 +0,0 @@
-export { Overlay } from "./Overlay";

package/dist/src/Menu/index.js

@@ -1 +0,0 @@
-export { Menu } from "./Menu";

package/dist/src/Menu/types.js

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

package/dist/src/Menu/utils.js

@@ -1,78 +0,0 @@
-export function findViewpoint(screenInfo, activatorLayout, styles) {
-    const { windowHeight, windowWidth, headerHeight } = screenInfo;
-    const pos = {};
-    const menuWidth = styles.menu.width;
-    const windowHalf = (windowHeight - headerHeight) / 2 + headerHeight;
-    const menuPositionVertical = activatorLayout.y + activatorLayout.height > windowHalf
-        ? "menuAbove"
-        : "menuBelow";
-    const menuPositionHorizontal = windowWidth / 2 > activatorLayout.width / 2 + activatorLayout.x
-        ? "menuRight"
-        : "menuLeft";
-    const menuPadding = 36;
-    getVerticalPosition(pos, windowHeight, activatorLayout, menuPositionVertical);
-    getHorizontalPosition(pos, activatorLayout, windowWidth, menuPadding, menuWidth, menuPositionHorizontal);
-    return pos;
-}
-function getVerticalPosition(pos, windowHeight, activatorLayout, menuPositionVertical) {
-    if (menuPositionVertical === "menuAbove") {
-        getAbovePosition(pos, windowHeight, activatorLayout);
-    }
-    if (menuPositionVertical === "menuBelow") {
-        getBelowPosition(pos, activatorLayout);
-    }
-}
-function getBelowPosition(pos, activatorLayout) {
-    pos.top = activatorLayout.y + activatorLayout.height;
-}
-function getAbovePosition(pos, windowHeight, activatorLayout) {
-    pos.bottom = windowHeight - activatorLayout.y;
-}
-function getHorizontalPosition(pos, activatorLayout, windowWidth, menuPadding, menuWidth, menuPositionHorizontal) {
-    if (menuPositionHorizontal === "menuRight") {
-        getRightPosition(pos, activatorLayout, windowWidth, menuPadding, menuWidth);
-    }
-    if (menuPositionHorizontal === "menuLeft") {
-        getLeftPosition(pos, activatorLayout, windowWidth, menuPadding, menuWidth);
-    }
-}
-function getLeftPosition(pos, activatorLayout, windowWidth, menuHorizontalPadding, menuWidth) {
-    const overflowLeft = windowWidth -
-        activatorLayout.x -
-        activatorLayout.width +
-        activatorLayout.width / 2 -
-        menuHorizontalPadding +
-        menuWidth >
-        windowWidth;
-    const overflowRight = windowWidth -
-        activatorLayout.x -
-        activatorLayout.width +
-        activatorLayout.width / 2 -
-        menuHorizontalPadding <
-        0;
-    if (overflowLeft) {
-        pos.right = undefined;
-        pos.left = 0;
-    }
-    else if (overflowRight) {
-        pos.right = 0;
-    }
-    else {
-        pos.right = windowWidth - activatorLayout.x - activatorLayout.width;
-    }
-}
-function getRightPosition(pos, activatorLayout, windowWidth, menuPadding, menuWidth) {
-    const overflowRight = activatorLayout.x + activatorLayout.width / 2 - menuPadding + menuWidth >
-        windowWidth;
-    const overflowLeft = activatorLayout.x + activatorLayout.width / 2 - menuPadding < 0;
-    if (overflowRight) {
-        pos.left = undefined;
-        pos.right = 0;
-    }
-    else if (overflowLeft) {
-        pos.left = 0;
-    }
-    else {
-        pos.left = activatorLayout.x;
-    }
-}

package/dist/types/src/Menu/Menu.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-import type { MenuProps } from "./types";
-export declare function Menu({ menuOptions, customActivator }: MenuProps): React.JSX.Element;

package/dist/types/src/Menu/Menu.style.d.ts

@@ -1,18 +0,0 @@
-export declare const useStyles: () => {
-    menu: {
-        shadowColor: string;
-        shadowOffset: {
-            width: number;
-            height: number;
-        };
-        shadowOpacity: number;
-        shadowRadius: number;
-        elevation: number;
-        position: "absolute";
-        backgroundColor: string;
-        paddingHorizontal: number;
-        paddingVertical: number;
-        borderRadius: number;
-        width: number;
-    };
-};

package/dist/types/src/Menu/components/MenuOption/MenuOption.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-import type { MenuOptionInternalProps } from "../../types";
-export declare function MenuOption({ label, icon, iconColor, textAlign, destructive, textTransform, onPress, setOpen, }: MenuOptionInternalProps): React.JSX.Element;

package/dist/types/src/Menu/components/MenuOption/MenuOption.style.d.ts

@@ -1,8 +0,0 @@
-export declare const useStyles: () => {
-    menuOption: {
-        display: "flex";
-        paddingHorizontal: number;
-        paddingVertical: number;
-        borderRadius: number;
-    };
-};

package/dist/types/src/Menu/components/MenuOption/index.d.ts

@@ -1 +0,0 @@
-export { MenuOption } from "./MenuOption";

package/dist/types/src/Menu/components/Overlay/Overlay.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-import type { OverlayProp } from "../../types";
-export declare function Overlay({ setOpen }: OverlayProp): React.JSX.Element;

package/dist/types/src/Menu/components/Overlay/Overlay.style.d.ts

@@ -1,12 +0,0 @@
-export declare const useStyles: () => {
-    overlay: {
-        backgroundColor: string;
-        opacity: number;
-        height: number;
-        position: "absolute";
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-    };
-};

package/dist/types/src/Menu/components/Overlay/index.d.ts

@@ -1 +0,0 @@
-export { Overlay } from "./Overlay";

package/dist/types/src/Menu/index.d.ts

@@ -1,2 +0,0 @@
-export { Menu } from "./Menu";
-export type { MenuProps, MenuOptionProps, MenuOptionInternalProps, } from "./types";

package/dist/types/src/Menu/types.d.ts

@@ -1,26 +0,0 @@
-import type { ReactElement } from "react";
-import type { IconColorNames, IconNames } from "@jobber/design";
-import type { TextAlign } from "../Typography";
-export interface MenuOptionProps {
-    readonly label: string;
-    readonly icon?: IconNames;
-    readonly iconColor?: IconColorNames;
-    readonly textAlign?: TextAlign;
-    readonly destructive?: boolean;
-    readonly textTransform?: "none" | "capitalize";
-    onPress: () => void;
-}
-export interface MenuOptionInternalProps extends MenuOptionProps {
-    setOpen: (bool: boolean) => void;
-}
-export interface CustomActivatorProps {
-    readonly onPress?: () => void;
-    readonly onLongPress?: () => void;
-}
-export interface MenuProps {
-    readonly menuOptions?: MenuOptionProps[];
-    readonly customActivator?: ReactElement<CustomActivatorProps>;
-}
-export interface OverlayProp {
-    setOpen: (bool: boolean) => void;
-}

package/dist/types/src/Menu/utils.d.ts

@@ -1,11 +0,0 @@
-import type { LayoutRectangle } from "react-native";
-import type { useStyles } from "./Menu.style";
-interface ScreenInfo {
-    windowHeight: number;
-    headerHeight: number;
-    windowWidth: number;
-}
-export declare function findViewpoint(screenInfo: ScreenInfo, activatorLayout: LayoutRectangle, styles: ReturnType<typeof useStyles>): {
-    [key: string]: number | undefined;
-};
-export {};

package/src/Menu/Menu.stories.tsx

@@ -1,52 +0,0 @@
-import React, { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import type { IconNames } from "@jobber/design";
-import { SafeAreaProvider } from "react-native-safe-area-context";
-import { Host } from "react-native-portalize";
-import { Menu } from "@jobber/components-native";
-
-const meta = {
-  title: "Components/Navigation/Menu",
-  component: Menu,
-  parameters: {
-    viewport: { defaultViewport: "mobile1" },
-    showNativeOnWebDisclaimer: true,
-  },
-} satisfies Meta<typeof Menu>;
-export default meta;
-type Story = StoryObj<Partial<React.ComponentProps<typeof Menu>>>;
-
-const BasicTemplate = (args: Story["args"]) => {
-  const [selected, setSelected] = useState(0);
-
-  const menuOptions = [
-    {
-      label: "Option one",
-      icon: selected === 1 ? ("checkmark" as IconNames) : undefined,
-      onPress: () => setSelected(1),
-    },
-    {
-      label: "Option two",
-      icon: selected === 2 ? ("checkmark" as IconNames) : undefined,
-      onPress: () => setSelected(2),
-    },
-    {
-      label: "Option three",
-      icon: selected === 3 ? ("checkmark" as IconNames) : undefined,
-      onPress: () => setSelected(3),
-    },
-  ];
-
-  return (
-    <SafeAreaProvider>
-      <Host>
-        <Menu {...args} menuOptions={menuOptions} />
-      </Host>
-    </SafeAreaProvider>
-  );
-};
-
-export const Basic: Story = {
-  render: BasicTemplate,
-  args: {},
-};

package/src/Menu/Menu.style.ts

@@ -1,17 +0,0 @@
-import { buildThemedStyles } from "../AtlantisThemeContext";
-
-const menuWidth = 208;
-
-export const useStyles = buildThemedStyles(tokens => {
-  return {
-    menu: {
-      position: "absolute",
-      backgroundColor: tokens["color-surface"],
-      paddingHorizontal: tokens["space-small"],
-      paddingVertical: tokens["space-small"] + tokens["space-smallest"],
-      borderRadius: tokens["radius-base"],
-      width: menuWidth,
-      ...tokens["shadow-high"],
-    },
-  };
-});