@jobber/components-native 0.1.3 → 0.2.0

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

@@ -0,0 +1,101 @@
+import React from "react";
+import { TextProps } from "react-native";
+export interface TypographyProps<T extends FontFamily> extends Pick<TextProps, "selectable"> {
+    /**
+     * Text capitalization
+     */
+    readonly transform?: TextTransform;
+    /**
+     * Color of text
+     */
+    readonly color?: TextColor;
+    /**
+     * Alignment of text
+     */
+    readonly align?: TextAlign;
+    /**
+     * Font size
+     */
+    readonly size?: TextSize;
+    /**
+     * Text to display
+     */
+    readonly children?: string;
+    /**
+     * The maximum amount of lines the text can occupy before being truncated with "...".
+     * Uses predefined string values that correspond to a doubling scale for the amount of lines.
+     */
+    readonly maxLines?: TruncateLength;
+    /**
+     * Allow text to be resized based on user's device display scale
+     */
+    readonly allowFontScaling?: boolean;
+    /**
+     * Set the maximum font the text can go to size when the user scales their
+     * device font size
+     */
+    readonly maxFontScaleSize?: number;
+    /**
+     * Determines whether text should be scaled down to fit based on maxLines prop
+     */
+    readonly adjustsFontSizeToFit?: boolean;
+    /**
+     * Line Height
+     */
+    readonly lineHeight?: LineHeight;
+    /**
+     * Spacing between letters
+     */
+    readonly letterSpacing?: LetterSpacing;
+    /**
+     * Font Family
+     */
+    readonly fontFamily?: T;
+    /**
+     * Font style
+     */
+    readonly fontStyle?: T extends "base" ? BaseStyle : DisplayStyle;
+    /**
+     * Font weight
+     */
+    readonly fontWeight?: T extends "base" ? BaseWeight : DisplayWeight;
+    /**
+     * Reverse theme for better display on dark background
+     */
+    readonly reverseTheme?: boolean;
+    /**
+     * Accessibility role describing the context of the text
+     */
+    readonly accessibilityRole?: TextAccessibilityRole;
+    /**
+     * This will make the text inaccessible to the screen reader.
+     * This should be avoided unless there is a good reason.
+     * For example this is used in InputText to make it so the label isn't
+     * selectable because it is already read from the accessibilityLabel
+     * of the TextInput
+     */
+    readonly hideFromScreenReader?: boolean;
+    /**
+     * Have text styled with strike through
+     */
+    readonly strikeThrough?: boolean;
+}
+export declare const Typography: React.MemoExoticComponent<typeof InternalTypography>;
+declare function InternalTypography<T extends FontFamily = "base">({ fontFamily, fontStyle, fontWeight, transform, color, align, size, children, maxLines, allowFontScaling, maxFontScaleSize, adjustsFontSizeToFit, lineHeight, letterSpacing, reverseTheme, hideFromScreenReader, accessibilityRole, strikeThrough, selectable, }: TypographyProps<T>): JSX.Element;
+export type FontFamily = "base" | "display";
+export type FontStyle = "regular" | "italic";
+export type FontWeight = "regular" | "medium" | "bold" | "semiBold" | "extraBold" | "black";
+export type BaseWeight = Extract<FontWeight, "regular" | "medium" | "semiBold" | "bold" | "extraBold">;
+export type DisplayWeight = Extract<FontWeight, "semiBold" | "bold" | "extraBold" | "black">;
+export type BaseStyle = FontStyle;
+export type DisplayStyle = Extract<FontStyle, "regular">;
+export type TextColor = TextVariation | "default" | "blue" | "blueDark" | "white" | "green" | "greenDark" | "grey" | "greyDark" | "greyBlue" | "greyBlueDark" | "lightBlue" | "lightBlueDark" | "red" | "redDark" | "yellow" | "yellowDark" | "yellowGreenDark" | "orangeDark" | "navyDark" | "limeDark" | "purpleDark" | "pinkDark" | "tealDark" | "indigoDark" | "navy" | "text" | "heading" | "textSecondary" | "textReverse" | "textReverseSecondary" | "interactive" | "destructive" | "learning" | "subtle" | "onPrimary";
+export type TextVariation = "success" | "interactive" | "error" | "base" | "subdued" | "warn" | "info" | "disabled" | "critical";
+export type TextTransform = "uppercase" | "lowercase" | "capitalize" | "none";
+export type TextSize = "smallest" | "smaller" | "small" | "default" | "large" | "larger" | "largest" | "jumbo" | "extravagant";
+export type TextAlign = "start" | "end" | "center" | "justify";
+export type LineHeight = "extravagant" | "jumbo" | "largest" | "larger" | "large" | "base" | "tight";
+export type LetterSpacing = "base" | "loose";
+export type TextAccessibilityRole = "text" | "header";
+export type TruncateLength = "single" | "small" | "base" | "large" | "extraLarge" | "unlimited";
+export {};

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

@@ -0,0 +1,20 @@
+import { TextStyle } from "react-native";
+/**
+ * `StyleSheet` for Typography.tsx.
+ *
+ * If you find yourself needing to use what's inside this object on files other
+ * than `<Typography />`, please import from `@jobber/components-native` instead.
+ *
+ * ```
+ * 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/TypographyGestureDetector.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from "react";
+/**
+ * This is a workaround suggested by react-native-gesture-handler to prevent
+ * accidental highlighting of text in Android devices
+ * https://github.com/software-mansion/react-native-gesture-handler/issues/1372
+ */
+export declare function TypographyGestureDetector(props: PropsWithChildren<unknown>): JSX.Element;

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

@@ -0,0 +1,4 @@
+export { Typography } from "./Typography";
+export type { FontFamily, FontStyle, FontWeight, BaseWeight, DisplayWeight, BaseStyle, DisplayStyle, TextColor, TextTransform, TextSize, TextAlign, LineHeight, LetterSpacing, TextAccessibilityRole, TextVariation, TypographyProps, TruncateLength, } from "./Typography";
+export { typographyStyles } from "./Typography.style";
+export { TypographyGestureDetector } from "./TypographyGestureDetector";

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

@@ -1,2 +1,3 @@
 export * from "./Icon";
 export * from "./Divider";
+export * from "./Typography";

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

@@ -0,0 +1,2 @@
+import { JobberStyle as mobileFoundationBase } from "@jobber/design/foundation.native";
+export declare const tokens: typeof mobileFoundationBase;

package/dist/types/src/utils/intl/capitalize.d.ts

@@ -0,0 +1 @@
+export declare function capitalize(text: string): string;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "license": "MIT",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -22,10 +22,13 @@
   },
   "dependencies": {
     "@jobber/design": "^0.39.0",
-    "react-native-svg": "^12.4.4",
+    "react-native-gesture-handler": "^2.10.0",
+    "react-native-svg": "^13.9.0",
     "ts-xor": "^1.1.0"
   },
   "devDependencies": {
+    "@testing-library/jest-native": "^5.4.2",
+    "@testing-library/react-native": "^12.0.1",
     "@types/react": "^18.0.28",
     "@types/react-native": "^0.71.6",
     "metro-react-native-babel-preset": "^0.76.0",
@@ -36,5 +39,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "ee6d0ff34cc6b097c94a320e6b0391fc83907c66"
+  "gitHead": "9e11e1953c6542432db3498bede05d1a5814f584"
 }

package/src/Divider/Divider.style.ts

@@ -1,20 +1,19 @@
 import { StyleSheet } from "react-native";
-// eslint-disable-next-line import/no-internal-modules
-import { JobberStyle } from "@jobber/design/foundation";
+import { tokens } from "../utils/design";
 
 export const styles = StyleSheet.create({
   base: {
-    height: JobberStyle["space-minuscule"],
+    height: tokens["space-minuscule"],
     margin: 0,
-    borderBottomWidth: JobberStyle["border-base"],
-    borderBottomColor: JobberStyle["color-border"],
+    borderBottomWidth: tokens["border-base"],
+    borderBottomColor: tokens["color-border"],
   },
   large: {
-    borderBottomWidth: JobberStyle["border-thick"],
+    borderBottomWidth: tokens["border-thick"],
     opacity: 0.875,
   },
   largest: {
-    borderBottomWidth: JobberStyle["space-small"],
+    borderBottomWidth: tokens["space-small"],
     opacity: 0.375,
   },
 });

package/src/Divider/Divider.test.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { cleanup, render } from "@testing-library/react-native";
+import { Divider } from "./Divider";
+import { styles } from "./Divider.style";
+
+afterEach(cleanup);
+
+const dividerTestId = "Divider";
+
+describe("Divider", () => {
+  it("renders a default Divider", () => {
+    const { getByTestId } = render(<Divider />);
+    const dividerStyle = getByTestId(dividerTestId).props.style;
+    expect(dividerStyle).toContainEqual(styles.base);
+    expect(dividerStyle).not.toContainEqual(styles.large);
+    expect(dividerStyle).not.toContainEqual(styles.largest);
+  });
+
+  it("renders a large Divider", () => {
+    const { getByTestId } = render(<Divider size="large" />);
+    const dividerStyle = getByTestId(dividerTestId).props.style;
+    expect(dividerStyle).toContainEqual(styles.base);
+    expect(dividerStyle).toContainEqual(styles.large);
+    expect(dividerStyle).not.toContainEqual(styles.largest);
+  });
+
+  it("renders a largest Divider", () => {
+    const { getByTestId } = render(<Divider size="largest" />);
+    const dividerStyle = getByTestId(dividerTestId).props.style;
+    expect(dividerStyle).toContainEqual(styles.base);
+    expect(dividerStyle).not.toContainEqual(styles.large);
+    expect(dividerStyle).toContainEqual(styles.largest);
+  });
+});

package/src/Icon/Icon.test.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { Icon } from ".";
+
+it("renders home icon", () => {
+  const tree = render(<Icon name="home" />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it("renders apple icon", () => {
+  const tree = render(<Icon name="apple" />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it("renders large arrowDown icon", () => {
+  const tree = render(<Icon name="arrowDown" size="large" />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it("renders thumbsDown icon", () => {
+  const tree = render(<Icon name="thumbsDown" />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it("renders small more icon", () => {
+  const tree = render(<Icon name="more" size="small" />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it("renders star icon with custom color", () => {
+  const tree = render(<Icon name="star" customColor="#f33323" />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it("renders quote icon with themed color", () => {
+  // The intention is to make sure the color prop can be applied to an icon with a built-in default color
+  const tree = render(<Icon name="quote" color="brand" />).toJSON();
+  expect(tree).toMatchSnapshot();
+});

package/src/Icon/__snapshots__/Icon.test.tsx.snap

@@ -0,0 +1,403 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders apple icon 1`] = `
+<RNSVGSvgView
+  align="xMidYMid"
+  bbHeight={24}
+  bbWidth={24}
+  focusable={false}
+  meetOrSlice={0}
+  minX={0}
+  minY={0}
+  style={
+    [
+      {
+        "backgroundColor": "transparent",
+        "borderWidth": 0,
+      },
+      {
+        "display": "flex",
+        "fill": "rgba(101, 120, 132, 1)",
+        "height": 24,
+        "verticalAlign": "middle",
+        "width": 24,
+      },
+      {
+        "flex": 0,
+        "height": 24,
+        "width": 24,
+      },
+    ]
+  }
+  testID="apple"
+  vbHeight={24}
+  vbWidth={24}
+>
+  <RNSVGGroup
+    fill={4284840068}
+    propList={
+      [
+        "fill",
+      ]
+    }
+  >
+    <RNSVGPath
+      d="M18.467 12.754c-.027-2.996 2.453-4.453 2.566-4.52-1.404-2.048-3.581-2.328-4.346-2.35-1.828-.193-3.601 1.094-4.533 1.094-.95 0-2.384-1.076-3.93-1.044-1.988.03-3.849 1.182-4.87 2.97C1.25 12.55 2.82 17.91 4.838 20.856c1.01 1.443 2.189 3.055 3.733 2.998 1.51-.062 2.074-.963 3.897-.963 1.806 0 2.335.963 3.91.927 1.62-.026 2.641-1.45 3.615-2.907 1.166-1.654 1.635-3.283 1.653-3.367-.038-.013-3.147-1.2-3.178-4.79Zm-2.974-8.81c.812-1.015 1.368-2.397 1.213-3.8-1.175.053-2.646.814-3.492 1.807-.75.876-1.418 2.31-1.246 3.66 1.321.099 2.677-.666 3.525-1.666Z"
+      fill={4284840068}
+      propList={
+        [
+          "fill",
+        ]
+      }
+    />
+  </RNSVGGroup>
+</RNSVGSvgView>
+`;
+
+exports[`renders home icon 1`] = `
+<RNSVGSvgView
+  align="xMidYMid"
+  bbHeight={24}
+  bbWidth={24}
+  focusable={false}
+  meetOrSlice={0}
+  minX={0}
+  minY={0}
+  style={
+    [
+      {
+        "backgroundColor": "transparent",
+        "borderWidth": 0,
+      },
+      {
+        "display": "flex",
+        "fill": "rgba(101, 120, 132, 1)",
+        "height": 24,
+        "verticalAlign": "middle",
+        "width": 24,
+      },
+      {
+        "flex": 0,
+        "height": 24,
+        "width": 24,
+      },
+    ]
+  }
+  testID="home"
+  vbHeight={24}
+  vbWidth={24}
+>
+  <RNSVGGroup
+    fill={4284840068}
+    propList={
+      [
+        "fill",
+      ]
+    }
+  >
+    <RNSVGPath
+      d="M13.147 3.582a2 2 0 0 0-2.294 0l-9.426 6.599a1 1 0 1 0 1.147 1.638L5 10.121V18a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-7.88l2.427 1.7a1 1 0 0 0 1.146-1.64l-9.426-6.598ZM17 8.721V18a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V8.72l5-3.5 5 3.5Z"
+      fill={4284840068}
+      propList={
+        [
+          "fill",
+        ]
+      }
+    />
+  </RNSVGGroup>
+</RNSVGSvgView>
+`;
+
+exports[`renders large arrowDown icon 1`] = `
+<RNSVGSvgView
+  align="xMidYMid"
+  bbHeight={32}
+  bbWidth={32}
+  focusable={false}
+  meetOrSlice={0}
+  minX={0}
+  minY={0}
+  style={
+    [
+      {
+        "backgroundColor": "transparent",
+        "borderWidth": 0,
+      },
+      {
+        "display": "flex",
+        "fill": "rgba(101, 120, 132, 1)",
+        "height": 32,
+        "verticalAlign": "middle",
+        "width": 32,
+      },
+      {
+        "flex": 0,
+        "height": 32,
+        "width": 32,
+      },
+    ]
+  }
+  testID="arrowDown"
+  vbHeight={24}
+  vbWidth={24}
+>
+  <RNSVGGroup
+    fill={4284840068}
+    propList={
+      [
+        "fill",
+      ]
+    }
+  >
+    <RNSVGPath
+      d="M7.703 8.291a.996.996 0 0 0-1.41.001.994.994 0 0 0 0 1.41l5 5.005a.998.998 0 0 0 1.415 0l5-5a.994.994 0 0 0 0-1.41.995.995 0 0 0-1.411-.001L12 12.584 7.703 8.291Z"
+      fill={4284840068}
+      propList={
+        [
+          "fill",
+        ]
+      }
+    />
+  </RNSVGGroup>
+</RNSVGSvgView>
+`;
+
+exports[`renders quote icon with themed color 1`] = `
+<RNSVGSvgView
+  align="xMidYMid"
+  bbHeight={24}
+  bbWidth={24}
+  focusable={false}
+  meetOrSlice={0}
+  minX={0}
+  minY={0}
+  style={
+    [
+      {
+        "backgroundColor": "transparent",
+        "borderWidth": 0,
+      },
+      {
+        "display": "flex",
+        "fill": "rgb(125, 176, 14)",
+        "height": 24,
+        "verticalAlign": "middle",
+        "width": 24,
+      },
+      {
+        "flex": 0,
+        "height": 24,
+        "width": 24,
+      },
+    ]
+  }
+  testID="quote"
+  vbHeight={24}
+  vbWidth={24}
+>
+  <RNSVGGroup
+    fill={4286427150}
+    propList={
+      [
+        "fill",
+      ]
+    }
+  >
+    <RNSVGPath
+      d="M14 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm-2 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z"
+      fill={4286427150}
+      propList={
+        [
+          "fill",
+        ]
+      }
+    />
+    <RNSVGPath
+      d="M3.586 6C3.196 6.39 3 6.902 3 7.414c0 .512.195 1.024.586 1.414l.99.991C4.315 10.554 4 11.175 4 12a7 7 0 0 0 7 7h9v1a1 1 0 1 0 2 0v-2a1 1 0 0 0-1-1h-3v-5a7 7 0 0 0-7-7c-.825 0-1.446.314-2.18.577l-.992-.991A1.994 1.994 0 0 0 6.414 4c-.512 0-1.023.195-1.414.586L3.586 6Zm3.393.565A7.041 7.041 0 0 0 5.565 7.98L5 7.414 6.414 6l.565.565ZM11 7a5 5 0 0 1 5 5v5h-5a5 5 0 0 1 0-10Z"
+      fill={4286427150}
+      propList={
+        [
+          "fill",
+        ]
+      }
+    />
+  </RNSVGGroup>
+</RNSVGSvgView>
+`;
+
+exports[`renders small more icon 1`] = `
+<RNSVGSvgView
+  align="xMidYMid"
+  bbHeight={16}
+  bbWidth={16}
+  focusable={false}
+  meetOrSlice={0}
+  minX={0}
+  minY={0}
+  style={
+    [
+      {
+        "backgroundColor": "transparent",
+        "borderWidth": 0,
+      },
+      {
+        "display": "flex",
+        "fill": "rgba(101, 120, 132, 1)",
+        "height": 16,
+        "verticalAlign": "middle",
+        "width": 16,
+      },
+      {
+        "flex": 0,
+        "height": 16,
+        "width": 16,
+      },
+    ]
+  }
+  testID="more"
+  vbHeight={24}
+  vbWidth={24}
+>
+  <RNSVGGroup
+    fill={4284840068}
+    propList={
+      [
+        "fill",
+      ]
+    }
+  >
+    <RNSVGPath
+      d="M4 12a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm6 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm8-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"
+      fill={4284840068}
+      propList={
+        [
+          "fill",
+        ]
+      }
+    />
+  </RNSVGGroup>
+</RNSVGSvgView>
+`;
+
+exports[`renders star icon with custom color 1`] = `
+<RNSVGSvgView
+  align="xMidYMid"
+  bbHeight={24}
+  bbWidth={24}
+  focusable={false}
+  meetOrSlice={0}
+  minX={0}
+  minY={0}
+  style={
+    [
+      {
+        "backgroundColor": "transparent",
+        "borderWidth": 0,
+      },
+      {
+        "display": "flex",
+        "fill": "rgba(101, 120, 132, 1)",
+        "height": 24,
+        "verticalAlign": "middle",
+        "width": 24,
+      },
+      {
+        "flex": 0,
+        "height": 24,
+        "width": 24,
+      },
+    ]
+  }
+  testID="star"
+  vbHeight={24}
+  vbWidth={24}
+>
+  <RNSVGGroup
+    fill={4284840068}
+    propList={
+      [
+        "fill",
+      ]
+    }
+  >
+    <RNSVGPath
+      d="m15.673 13.337 3.673-3.58-5.076-.738-2.27-4.6-2.27 4.6-5.076.738 3.673 3.58-.867 5.176L12 16.006l4.54 2.386-.867-5.055ZM12 18.335l-4.505 2.49a1.546 1.546 0 0 1-2.244-1.63l.86-5.137-3.644-3.553a1.546 1.546 0 0 1 .857-2.637l5.037-.732 2.252-4.273a1.547 1.547 0 0 1 2.774 0l2.252 4.273 5.037.732a1.546 1.546 0 0 1 .857 2.637l-3.645 3.553.86 5.139a1.547 1.547 0 0 1-2.243 1.63L12 18.334Z"
+      fill={4294128419}
+      propList={
+        [
+          "fill",
+        ]
+      }
+    />
+  </RNSVGGroup>
+</RNSVGSvgView>
+`;
+
+exports[`renders thumbsDown icon 1`] = `
+<RNSVGSvgView
+  align="xMidYMid"
+  bbHeight={24}
+  bbWidth={24}
+  focusable={false}
+  meetOrSlice={0}
+  minX={0}
+  minY={0}
+  style={
+    [
+      {
+        "backgroundColor": "transparent",
+        "borderWidth": 0,
+      },
+      {
+        "display": "flex",
+        "fill": "rgba(101, 120, 132, 1)",
+        "height": 24,
+        "transform": [
+          {
+            "scaleY": -1,
+          },
+        ],
+        "verticalAlign": "middle",
+        "width": 24,
+      },
+      {
+        "flex": 0,
+        "height": 24,
+        "width": 24,
+      },
+    ]
+  }
+  testID="thumbsDown"
+  vbHeight={24}
+  vbWidth={24}
+>
+  <RNSVGGroup
+    fill={4284840068}
+    matrix={
+      [
+        1,
+        0,
+        0,
+        1,
+        0,
+        0,
+      ]
+    }
+    propList={
+      [
+        "fill",
+      ]
+    }
+  >
+    <RNSVGPath
+      d="M8 11.78V19h8l3-5.76v-1.29h-7.639l1.036-7.944L8 11.78ZM6.134 11l4.555-8.034c1.124-1.846 3.971-.844 3.691 1.299l-.74 5.685h6.86a.5.5 0 0 1 .5.5v3a1 1 0 0 1-.084.4l-3.276 6.648a.95.95 0 0 1-.44.453c-.132.065-.276.049-.423.049H4c-1.105 0-2-1.045-2-2.15V13a2 2 0 0 1 2-2h2.134ZM6 13H4v6h2v-6Z"
+      fill={4284840068}
+      propList={
+        [
+          "fill",
+        ]
+      }
+    />
+  </RNSVGGroup>
+</RNSVGSvgView>
+`;