@jobber/components-native 0.7.0 → 0.9.0

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

@@ -0,0 +1,40 @@
+import { ReactNode } from "react";
+import { IconNames } from "@jobber/design";
+import { XOR } from "ts-xor";
+interface CardProps {
+    /**
+     * @deprecated Use <ActionItem /> with the title and onPress properties instead
+     */
+    readonly header?: HeaderProps;
+    readonly footer?: FooterProps;
+    readonly children?: ReactNode;
+    readonly reportCardHeight?: (height: number) => void;
+    readonly testID?: string;
+    readonly error?: string;
+    readonly elevation?: elevationProp;
+}
+type elevationProp = "none" | "low" | "base" | "high";
+export type HeaderProps = HeaderCommonProps & HeaderActionProps;
+interface FooterProps {
+    readonly onPress: () => void;
+    readonly title: string;
+}
+interface HeaderCommonProps {
+    readonly title: string;
+}
+type HeaderActionProps = {
+    readonly onPress?: never;
+    readonly actionItem?: never;
+} | {
+    readonly onPress: () => void;
+    readonly actionItem: ActionItem;
+};
+interface IconAction {
+    readonly iconName: IconNames;
+}
+interface ButtonAction {
+    readonly label: string;
+}
+export type ActionItem = XOR<IconAction, ButtonAction>;
+export declare function Card({ header, footer, children, reportCardHeight: onCardHeightChange, testID, error, elevation, }: CardProps): JSX.Element;
+export {};

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

@@ -0,0 +1,56 @@
+export declare const styles: {
+    container: {
+        width: string;
+        backgroundColor: string;
+    };
+    lowElevation: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    baseElevation: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    highElevation: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    headerTitle: {
+        flexGrow: number;
+        flex: number;
+    };
+    footer: {
+        height: number;
+        flex: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    pressed: {
+        opacity: number;
+    };
+    actionItem: {
+        height: number;
+        justifyContent: "center";
+    };
+    actionLabel: {
+        paddingTop: number;
+    };
+};

package/dist/types/src/Card/components/InternalCardHeader.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+interface InternalCardHeaderProps {
+    readonly children: ReactNode[] | ReactNode;
+    readonly onPress?: () => void;
+    readonly testID?: string;
+    readonly collapsable: boolean;
+}
+export declare function InternalCardHeader({ onPress, children, testID, collapsable, }: InternalCardHeaderProps): JSX.Element;
+export {};

package/dist/types/src/Card/components/InternalCardHeader.style.d.ts

@@ -0,0 +1,14 @@
+export declare const styles: {
+    header: {
+        flexDirection: "row";
+        alignItems: "flex-start";
+        paddingTop: number;
+        paddingHorizontal: number;
+    };
+    pressed: {
+        opacity: number;
+    };
+    noChildren: {
+        paddingBottom: number;
+    };
+};

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

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

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

@@ -0,0 +1,2 @@
+export { Card } from "./Card";
+export type { ActionItem, HeaderProps } from "./Card";

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+export type StatusType = "success" | "warning" | "critical" | "inactive" | "informative";
+export interface StatusLabelType {
+    readonly statusLabel: string;
+    readonly statusType?: StatusType;
+}
+interface StatusLabelProps {
+    /**
+     * Text to display.
+     */
+    readonly text: string;
+    /**
+     * Alignment of text
+     */
+    readonly alignment?: "start" | "end";
+    /**
+     * Status color of the square beside text
+     */
+    readonly status?: StatusType;
+}
+export declare function StatusLabel({ text, alignment, status, }: StatusLabelProps): JSX.Element;
+export {};

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

@@ -0,0 +1,23 @@
+export declare const styles: {
+    statusLabelRow: {
+        flexDirection: "row";
+        justifyContent: "flex-end";
+        flexWrap: "nowrap";
+    };
+    statusLabelText: {
+        flexShrink: number;
+    };
+    statusLabelIcon: {
+        borderRadius: number;
+        backgroundColor: string;
+        width: number;
+        height: number;
+        marginTop: number;
+    };
+    labelTextStartAligned: {
+        flexDirection: "row-reverse";
+    };
+    innerPad: {
+        width: number;
+    };
+};

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

@@ -0,0 +1,2 @@
+export { StatusLabel } from "./StatusLabel";
+export type { StatusType, StatusLabelType } from "./StatusLabel";

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

@@ -1,4 +1,10 @@
 import { TextStyle } from "react-native";
+/**
+ * Reusable typography tokens to ensure consistency for any client facing texts.
+ */
+export declare const typographyTokens: {
+    [index: string]: TextStyle;
+};
 /**
  * `StyleSheet` for Typography.tsx.
  *
@@ -9,12 +15,6 @@ import { TextStyle } from "react-native";
  * import { typographyStyles } from "@jobber/components-native"
  * ```
  */
-/**
- * Reusable typography tokens to ensure consistency for any client facing texts.
- */
-export declare const typographyTokens: {
-    [index: string]: TextStyle;
-};
 export declare const typographyStyles: {
     [index: string]: TextStyle;
 };

package/dist/types/src/Typography/webFonts.d.ts

@@ -0,0 +1,4 @@
+import { TextStyle } from "react-native";
+export declare const webFonts: {
+    [index: string]: TextStyle;
+};

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

@@ -6,4 +6,6 @@ export * from "./ErrorMessageWrapper";
 export * from "./ActionLabel";
 export * from "./Content";
 export * from "./ActivityIndicator";
+export * from "./Card";
+export * from "./StatusLabel";
 export * from "./AtlantisContext";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "license": "MIT",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -44,5 +44,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "d4d0fe8b51c3f1a1bbbc5f221bd64fc90dc6a3cd"
+  "gitHead": "f884bf403f42a1c85f7bf840a6317ae1642653e1"
 }

package/src/Card/Card.style.ts

@@ -0,0 +1,46 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+export const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    backgroundColor: tokens["color-surface"],
+  },
+
+  lowElevation: {
+    ...tokens["shadow-low"],
+  },
+
+  baseElevation: {
+    ...tokens["shadow-base"],
+  },
+
+  highElevation: {
+    ...tokens["shadow-high"],
+  },
+
+  headerTitle: {
+    flexGrow: 1,
+    flex: 1,
+  },
+
+  footer: {
+    height: tokens["space-largest"],
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+
+  pressed: {
+    opacity: tokens["opacity-pressed"],
+  },
+
+  actionItem: {
+    height: tokens["typography--lineHeight-base"],
+    justifyContent: "center",
+  },
+
+  actionLabel: {
+    paddingTop: tokens["space-smallest"],
+  },
+});

package/src/Card/Card.test.tsx

@@ -0,0 +1,128 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { Card } from "./Card";
+import { Text } from "../Text";
+
+const cardHeaderTestID = "cardHeader";
+const cardFooterTestID = "cardFooter";
+
+it("renders with only a header title", () => {
+  const title = "Foobar";
+  const { getByTestId, getByText, queryAllByRole } = render(
+    <Card header={{ title }} />,
+  );
+
+  expect(getByText(title)).toBeDefined();
+  expect(getByTestId(cardHeaderTestID)).toBeDefined();
+  expect(queryAllByRole("button")).toEqual([]);
+});
+
+it("renders with an icon action", () => {
+  const iconName = "plus2";
+  const { getByTestId } = render(
+    <Card
+      header={{
+        title: "Foobar",
+        actionItem: { iconName },
+        onPress: jest.fn(),
+      }}
+    />,
+  );
+
+  expect(getByTestId(iconName)).toBeDefined();
+});
+
+it("renders with a button action", () => {
+  const label = "Edit";
+  const { getByText } = render(
+    <Card
+      header={{
+        title: "Foobar",
+        actionItem: { label },
+        onPress: jest.fn(),
+      }}
+    />,
+  );
+
+  expect(getByText(label)).toBeDefined();
+});
+
+it("renders without a header and footer", () => {
+  const content = "I am the content";
+  const { getByText, queryByTestId } = render(
+    <Card>
+      <Text>{content}</Text>
+    </Card>,
+  );
+
+  expect(getByText(content)).toBeDefined();
+  expect(queryByTestId(cardHeaderTestID)).toBeNull();
+  expect(queryByTestId(cardFooterTestID)).toBeNull();
+});
+
+it("should call the onPress when pressing the header", () => {
+  const pressHandler = jest.fn();
+
+  const { getByText } = render(
+    <Card
+      header={{
+        title: "Header",
+        actionItem: { iconName: "plus2" },
+        onPress: pressHandler,
+      }}
+    />,
+  );
+
+  fireEvent.press(getByText("Header"));
+  expect(pressHandler).toHaveBeenCalled();
+});
+
+it("should call the onPress when pressing the action button", () => {
+  const pressHandler = jest.fn();
+
+  const { getByText } = render(
+    <Card
+      header={{
+        title: "Header",
+        actionItem: { label: "Edit" },
+        onPress: pressHandler,
+      }}
+    />,
+  );
+
+  fireEvent.press(getByText("Edit"));
+  expect(pressHandler).toHaveBeenCalled();
+});
+
+it("renders with a footer", () => {
+  const title = "View All";
+  const { getByText, getByTestId, queryByTestId } = render(
+    <Card footer={{ title: title, onPress: jest.fn() }} />,
+  );
+
+  expect(getByText(title)).toBeDefined();
+  expect(getByTestId(cardFooterTestID)).toBeDefined();
+  expect(queryByTestId(cardHeaderTestID)).toBeNull();
+});
+
+it("should call the onPress when pressing the footer", () => {
+  const headerPressHandler = jest.fn();
+  const footerPressHandler = jest.fn();
+
+  const { getByText } = render(
+    <Card
+      header={{
+        title: "Header",
+        actionItem: { iconName: "plus2" },
+        onPress: headerPressHandler,
+      }}
+      footer={{
+        title: "View All",
+        onPress: footerPressHandler,
+      }}
+    />,
+  );
+
+  fireEvent.press(getByText("View All"));
+  expect(footerPressHandler).toHaveBeenCalled();
+});

package/src/Card/Card.tsx

@@ -0,0 +1,145 @@
+import React, { ReactNode } from "react";
+import {
+  LayoutChangeEvent,
+  Pressable,
+  PressableStateCallbackType,
+  View,
+} from "react-native";
+import { IconNames } from "@jobber/design";
+import { XOR } from "ts-xor";
+import { styles } from "./Card.style";
+// eslint-disable-next-line import/no-internal-modules
+import { InternalCardHeader } from "./components/InternalCardHeader";
+import { ErrorMessageWrapper } from "../ErrorMessageWrapper";
+import { ActionLabel } from "../ActionLabel";
+import { Typography } from "../Typography";
+import { Icon } from "../Icon";
+
+interface CardProps {
+  /**
+   * @deprecated Use <ActionItem /> with the title and onPress properties instead
+   */
+  readonly header?: HeaderProps;
+
+  readonly footer?: FooterProps;
+  readonly children?: ReactNode;
+  readonly reportCardHeight?: (height: number) => void;
+  readonly testID?: string;
+  readonly error?: string;
+  readonly elevation?: elevationProp;
+}
+
+type elevationProp = "none" | "low" | "base" | "high";
+
+export type HeaderProps = HeaderCommonProps & HeaderActionProps;
+
+interface FooterProps {
+  readonly onPress: () => void;
+  readonly title: string;
+}
+
+interface HeaderCommonProps {
+  readonly title: string;
+}
+
+type HeaderActionProps =
+  | {
+      readonly onPress?: never;
+      readonly actionItem?: never;
+    }
+  | {
+      readonly onPress: () => void;
+      readonly actionItem: ActionItem;
+    };
+
+interface IconAction {
+  readonly iconName: IconNames;
+}
+
+interface ButtonAction {
+  readonly label: string;
+}
+
+export type ActionItem = XOR<IconAction, ButtonAction>;
+
+function getElevationStyle(elevation: elevationProp) {
+  if (elevation === "none") {
+    return undefined;
+  }
+  return styles[`${elevation}Elevation`];
+}
+
+export function Card({
+  header,
+  footer,
+  children,
+  reportCardHeight: onCardHeightChange,
+  testID = "card",
+  error,
+  elevation = "none",
+}: CardProps): JSX.Element {
+  return (
+    <ErrorMessageWrapper message={error} wrapFor="card">
+      <View
+        onLayout={handleLayoutChange}
+        style={[styles.container, getElevationStyle(elevation)]}
+        testID={testID}
+      >
+        {header && (
+          <>
+            <InternalCardHeader
+              onPress={header.onPress}
+              testID={`${testID}Header`}
+              collapsable={!!children}
+            >
+              <View style={styles.headerTitle}>
+                <Typography
+                  color="heading"
+                  fontFamily="base"
+                  fontWeight="bold"
+                  size="default"
+                  lineHeight="base"
+                  accessibilityRole="header"
+                >
+                  {header.title}
+                </Typography>
+              </View>
+              <View style={styles.actionItem}>
+                {!!header.actionItem?.label && (
+                  <View style={styles.actionLabel}>
+                    <ActionLabel type="cardTitle">
+                      {header.actionItem.label}
+                    </ActionLabel>
+                  </View>
+                )}
+
+                {header.actionItem?.iconName && (
+                  <Icon name={header.actionItem.iconName} color="interactive" />
+                )}
+              </View>
+            </InternalCardHeader>
+          </>
+        )}
+        {children}
+        {footer && (
+          <Pressable
+            testID={`${testID}Footer`}
+            onPress={footer.onPress}
+            style={({ pressed }: PressableStateCallbackType) => [
+              styles.footer,
+              pressed && styles.pressed,
+            ]}
+            accessibilityRole={"button"}
+          >
+            <ActionLabel>{footer.title}</ActionLabel>
+          </Pressable>
+        )}
+      </View>
+    </ErrorMessageWrapper>
+  );
+
+  function handleLayoutChange(event: LayoutChangeEvent) {
+    const { height } = event.nativeEvent.layout;
+    onCardHeightChange?.(height);
+  }
+}

package/src/Card/components/InternalCardHeader.style.ts

@@ -0,0 +1,19 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../utils/design";
+
+export const styles = StyleSheet.create({
+  header: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    paddingTop: tokens["space-small"] + tokens["space-smaller"],
+    paddingHorizontal: tokens["space-base"],
+  },
+
+  pressed: {
+    opacity: tokens["opacity-pressed"],
+  },
+
+  noChildren: {
+    paddingBottom: tokens["space-small"] + tokens["space-smaller"],
+  },
+});

package/src/Card/components/InternalCardHeader.test.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { InternalCardHeader } from "./InternalCardHeader";
+
+it("should render a pressable header", () => {
+  const handlePress = jest.fn();
+  const screen = render(
+    <InternalCardHeader collapsable onPress={handlePress} testID="cardHeader">
+      🍩
+    </InternalCardHeader>,
+  );
+
+  const header = screen.getByTestId("cardHeader");
+  expect(header).toBeDefined();
+  expect(header.props.accessibilityRole).toBe("button");
+
+  fireEvent.press(header);
+  expect(handlePress).toHaveBeenCalled();
+});
+
+it("should render an un-pressable header", () => {
+  const screen = render(
+    <InternalCardHeader collapsable testID="cardHeader">
+      🌞
+    </InternalCardHeader>,
+  );
+
+  const header = screen.getByTestId("cardHeader");
+  expect(header).toBeDefined();
+  expect(header.props.onPress).toBeUndefined();
+});

package/src/Card/components/InternalCardHeader.tsx

@@ -0,0 +1,41 @@
+import React, { ReactNode } from "react";
+import { Pressable, View } from "react-native";
+import { styles } from "./InternalCardHeader.style";
+
+interface InternalCardHeaderProps {
+  readonly children: ReactNode[] | ReactNode;
+  readonly onPress?: () => void;
+  readonly testID?: string;
+  readonly collapsable: boolean;
+}
+
+export function InternalCardHeader({
+  onPress,
+  children,
+  testID,
+  collapsable,
+}: InternalCardHeaderProps): JSX.Element {
+  const conditionalChildStyling = collapsable ? undefined : styles.noChildren;
+  if (onPress) {
+    return (
+      <Pressable
+        testID={testID}
+        onPress={onPress}
+        style={({ pressed }) => [
+          styles.header,
+          pressed && styles.pressed,
+          conditionalChildStyling,
+        ]}
+        accessibilityRole={"button"}
+      >
+        {children}
+      </Pressable>
+    );
+  }
+
+  return (
+    <View testID={testID} style={[styles.header, conditionalChildStyling]}>
+      {children}
+    </View>
+  );
+}

package/src/Card/components/index.ts

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

package/src/Card/index.ts

@@ -0,0 +1,2 @@
+export { Card } from "./Card";
+export type { ActionItem, HeaderProps } from "./Card";

package/src/StatusLabel/StatusLabel.style.ts

@@ -0,0 +1,30 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+const statusLabelIconDiameter = tokens["space-base"] - tokens["space-smaller"]; //12px
+
+const indicatorOffset = tokens["space-smallest"] + tokens["space-minuscule"];
+
+export const styles = StyleSheet.create({
+  statusLabelRow: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    flexWrap: "nowrap",
+  },
+  statusLabelText: {
+    flexShrink: 1,
+  },
+  statusLabelIcon: {
+    borderRadius: tokens["radius-base"],
+    backgroundColor: tokens["color-success"],
+    width: statusLabelIconDiameter,
+    height: statusLabelIconDiameter,
+    marginTop: indicatorOffset,
+  },
+  labelTextStartAligned: {
+    flexDirection: "row-reverse",
+  },
+  innerPad: {
+    width: tokens["space-small"],
+  },
+});