@jobber/components-native 0.2.1 → 0.4.0

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ActivityIndicatorProps } from "react-native";
+export declare function JobberActivityIndicator(props: ActivityIndicatorProps): JSX.Element;

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

@@ -0,0 +1 @@
+export { JobberActivityIndicator as ActivityIndicator } from "./ActivityIndicator";

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

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+export type Spacing = "none" | "base" | "small" | "smaller" | "smallest" | "large";
+export interface ContentProps {
+    /**
+     * The child or children that will be given spacing.
+     */
+    readonly children: ReactNode;
+    /**
+     * The amount of spacing that content will give.
+     */
+    readonly spacing?: Spacing;
+    /**
+     * The amount of spacing that will be applied between children.
+     */
+    readonly childSpacing?: Spacing;
+    readonly direction?: "horizontal" | "vertical";
+}
+export declare function Content({ children, spacing, childSpacing, direction, }: ContentProps): JSX.Element;

package/dist/types/src/Content/ContentHorizontal.style.d.ts

@@ -0,0 +1,28 @@
+export declare const horizontalStyles: {
+    wrapper: {
+        flexDirection: "row";
+    };
+    childWrapper: {
+        flexGrow: number;
+        flexShrink: number;
+        flexBasis: number;
+    };
+    noneChildSpace: {
+        padding: number;
+    };
+    smallestChildSpace: {
+        paddingLeft: number;
+    };
+    smallerChildSpace: {
+        paddingLeft: number;
+    };
+    smallChildSpace: {
+        paddingLeft: number;
+    };
+    baseChildSpace: {
+        paddingLeft: number;
+    };
+    largeChildSpace: {
+        paddingLeft: number;
+    };
+};

package/dist/types/src/Content/ContentSpaceAround.style.d.ts

@@ -0,0 +1,20 @@
+export declare const spaceStyles: {
+    noneSpace: {
+        padding: number;
+    };
+    smallestSpace: {
+        padding: number;
+    };
+    smallerSpace: {
+        padding: number;
+    };
+    smallSpace: {
+        padding: number;
+    };
+    baseSpace: {
+        padding: number;
+    };
+    largeSpace: {
+        padding: number;
+    };
+};

package/dist/types/src/Content/ContentVertical.style.d.ts

@@ -0,0 +1,22 @@
+export declare const verticalStyles: {
+    wrapper: {};
+    childWrapper: {};
+    noneChildSpace: {
+        padding: number;
+    };
+    smallestChildSpace: {
+        paddingTop: number;
+    };
+    smallerChildSpace: {
+        paddingTop: number;
+    };
+    smallChildSpace: {
+        paddingTop: number;
+    };
+    baseChildSpace: {
+        paddingTop: number;
+    };
+    largeChildSpace: {
+        paddingTop: number;
+    };
+};

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

@@ -0,0 +1,2 @@
+export { Content } from "./Content";
+export type { Spacing } from "./Content";

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

@@ -0,0 +1,56 @@
+/// <reference types="react" />
+import { TextAlign, TextVariation, TruncateLength, TypographyProps } from "../Typography";
+interface TextProps extends Pick<TypographyProps<"base">, "maxFontScaleSize" | "selectable"> {
+    /**
+     * Visual hierarchy of the text
+     */
+    readonly level?: TextLevel;
+    /**
+     * Color variation of text
+     */
+    readonly variation?: TextVariation;
+    /**
+     * Change the appearance of the text
+     */
+    readonly emphasis?: "strong";
+    /**
+     * Allow text to be resized based on user's device display scale
+     */
+    readonly allowFontScaling?: boolean;
+    /**
+     * Determines whether text should be scaled down to fit based on maxLines prop
+     */
+    readonly adjustsFontSizeToFit?: boolean;
+    /**
+     * 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;
+    /**
+     * Alignment of text
+     */
+    readonly align?: TextAlign;
+    /**
+     * Text to display
+     */
+    readonly children?: string;
+    /**
+     * Reverse theme for better display on dark background
+     */
+    readonly reverseTheme?: boolean;
+    /**
+     * Have text styled with strike through
+     */
+    readonly strikeThrough?: boolean;
+    /**
+     * 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;
+}
+export type TextLevel = "text" | "textSupporting";
+export declare function Text({ level, variation, emphasis, allowFontScaling, adjustsFontSizeToFit, maxLines, align, children, reverseTheme, strikeThrough, hideFromScreenReader, maxFontScaleSize, selectable, }: TextProps): JSX.Element;
+export {};

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

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

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

@@ -1,3 +1,6 @@
 export * from "./Icon";
 export * from "./Divider";
 export * from "./Typography";
+export * from "./Text";
+export * from "./Content";
+export * from "./ActivityIndicator";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "license": "MIT",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -32,6 +32,7 @@
     "@types/react": "^18.0.28",
     "@types/react-native": "^0.71.6",
     "metro-react-native-babel-preset": "^0.76.0",
+    "react-test-renderer": "^18.2.0",
     "typescript": "^4.9.5"
   },
   "peerDependencies": {
@@ -39,5 +40,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "c75c7218a86253d86df8a0173fbb4595f2ff363a"
+  "gitHead": "d9e4bbca01e3aa0a05ade2c3251681a416214789"
 }

package/src/ActivityIndicator/ActivityIndicator.test.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { ActivityIndicator } from "./index";
+import { tokens } from "../utils/design";
+
+const testId = "ActivityIndicator";
+describe("ActivityIndicator", () => {
+  it("renders with the default color when no props are provided", () => {
+    const { getByTestId } = render(<ActivityIndicator />);
+    expect(getByTestId(testId).props.color).toBe(tokens["color-greyBlue"]);
+  });
+
+  it("renders with a custom color", () => {
+    const color = "red";
+    const { getByTestId } = render(<ActivityIndicator color={color} />);
+    expect(getByTestId(testId).props.color).toBe(color);
+  });
+
+  it("renders with large size", () => {
+    const size = "large";
+    const color = "red";
+    const { getByTestId } = render(
+      <ActivityIndicator color={color} size={size} />,
+    );
+    expect(getByTestId(testId).props.size).toBe(size);
+    expect(getByTestId(testId).props.color).toBe(color);
+  });
+});

package/src/ActivityIndicator/ActivityIndicator.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { ActivityIndicator, ActivityIndicatorProps } from "react-native";
+import { tokens } from "../utils/design";
+
+export function JobberActivityIndicator(
+  props: ActivityIndicatorProps,
+): JSX.Element {
+  return (
+    <ActivityIndicator
+      {...props}
+      color={props.color || tokens["color-greyBlue"]}
+      testID={props.testID || "ActivityIndicator"}
+    />
+  );
+}

package/src/ActivityIndicator/index.ts

@@ -0,0 +1 @@
+export { JobberActivityIndicator as ActivityIndicator } from "./ActivityIndicator";

package/src/Content/Content.test.tsx

@@ -0,0 +1,260 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { View } from "react-native";
+import { ReactTestInstance } from "react-test-renderer";
+import { Content, ContentProps } from "./Content";
+import { spaceStyles } from "./ContentSpaceAround.style";
+import { verticalStyles } from "./ContentVertical.style";
+import { horizontalStyles } from "./ContentHorizontal.style";
+import { Text } from "../Text";
+
+function getContentComponent(parentView: ReactTestInstance) {
+  return (parentView?.children[0] as ReactTestInstance)
+    ?.children[0] as ReactTestInstance;
+}
+
+function getContentChildren(contentView: ReactTestInstance) {
+  return (contentView.children[0] as ReactTestInstance)
+    ?.children as ReactTestInstance[];
+}
+
+const text = "🌚 I am the text 🌞";
+
+function setupContent(
+  props?: Pick<ContentProps, "spacing" | "childSpacing" | "direction">,
+) {
+  const container = render(
+    <View accessibilityLabel="contentView">
+      <Content
+        spacing={props?.spacing}
+        childSpacing={props?.childSpacing}
+        direction={props?.direction}
+      >
+        <Text>{text}</Text>
+        <Text>{text}</Text>
+      </Content>
+    </View>,
+  );
+
+  const parentView = container.getByLabelText("contentView");
+  const contentView = getContentComponent(parentView);
+  const contentChildren = getContentChildren(contentView);
+  return { ...container, parentView, contentView, contentChildren };
+}
+
+describe("Space around", () => {
+  it("should have a base padding around the component", () => {
+    const { contentView } = setupContent();
+    expect(contentView.props.style).toContainEqual(spaceStyles.baseSpace);
+  });
+
+  it("should have a small padding around the component", () => {
+    const { contentView } = setupContent({ spacing: "small" });
+    expect(contentView.props.style).toContainEqual(spaceStyles.smallSpace);
+  });
+
+  it("should have a large padding around the component", () => {
+    const { contentView } = setupContent({ spacing: "large" });
+    expect(contentView.props.style).toContainEqual(spaceStyles.largeSpace);
+  });
+
+  it("should have a no padding around the component", () => {
+    const { contentView } = setupContent({ spacing: "none" });
+    expect(contentView.props.style).toContainEqual(spaceStyles.noneSpace);
+  });
+
+  it("should have a smaller padding around the component", () => {
+    const { contentView } = setupContent({ spacing: "smaller" });
+    expect(contentView.props.style).toContainEqual(spaceStyles.smallerSpace);
+  });
+
+  it("should have the smallest padding around the component", () => {
+    const { contentView } = setupContent({ spacing: "smallest" });
+    expect(contentView.props.style).toContainEqual(spaceStyles.smallestSpace);
+  });
+});
+
+describe("Vertical", () => {
+  it("should have the vertical wrapper style", () => {
+    const { contentView } = setupContent();
+    expect(contentView.props.style).toContainEqual(verticalStyles.wrapper);
+  });
+
+  describe("Child space between", () => {
+    it("should have a base top padding on every child but the first", () => {
+      const { contentChildren } = setupContent({
+        direction: "vertical",
+        childSpacing: "base",
+      });
+
+      expect(contentChildren[0].props.style).toEqual([
+        verticalStyles.childWrapper,
+      ]);
+      expect(contentChildren[1].props.style).toContainEqual(
+        verticalStyles.baseChildSpace,
+      );
+    });
+
+    it("should have a small top padding on every child but the first", () => {
+      const { contentChildren } = setupContent({
+        direction: "vertical",
+        childSpacing: "small",
+      });
+
+      expect(contentChildren[0].props.style).toEqual([
+        verticalStyles.childWrapper,
+      ]);
+      expect(contentChildren[1].props.style).toContainEqual(
+        verticalStyles.smallChildSpace,
+      );
+    });
+
+    it("should have a large top padding on every child but the first", () => {
+      const { contentChildren } = setupContent({
+        direction: "vertical",
+        childSpacing: "large",
+      });
+
+      expect(contentChildren[0].props.style).toEqual([
+        verticalStyles.childWrapper,
+      ]);
+      expect(contentChildren[1].props.style).toContainEqual(
+        verticalStyles.largeChildSpace,
+      );
+    });
+
+    it("should have no top padding on every child but the first", () => {
+      const { contentChildren } = setupContent({
+        direction: "vertical",
+        childSpacing: "none",
+      });
+
+      expect(contentChildren[0].props.style).toEqual([
+        verticalStyles.childWrapper,
+      ]);
+      expect(contentChildren[1].props.style).toContainEqual(
+        verticalStyles.noneChildSpace,
+      );
+    });
+
+    it("should have a smaller top padding on every child but the first", () => {
+      const { contentChildren } = setupContent({
+        direction: "vertical",
+        childSpacing: "smaller",
+      });
+
+      expect(contentChildren[0].props.style).toEqual([
+        verticalStyles.childWrapper,
+      ]);
+      expect(contentChildren[1].props.style).toContainEqual(
+        verticalStyles.smallerChildSpace,
+      );
+    });
+
+    it("should have the smallest top padding on every child but the first", () => {
+      const { contentChildren } = setupContent({
+        direction: "vertical",
+        childSpacing: "smallest",
+      });
+
+      expect(contentChildren[0].props.style).toEqual([
+        verticalStyles.childWrapper,
+      ]);
+      expect(contentChildren[1].props.style).toContainEqual(
+        verticalStyles.smallestChildSpace,
+      );
+    });
+  });
+});
+
+describe("Horizontal", () => {
+  it("should have the horizontal wrapper style", () => {
+    const { contentView } = setupContent({ direction: "horizontal" });
+    expect(contentView.props.style).toContainEqual(horizontalStyles.wrapper);
+  });
+
+  describe("Child space between", () => {
+    it("should have a base left padding on every child but the first", () => {
+      const { contentChildren } = setupContent({
+        direction: "horizontal",
+        childSpacing: "base",
+      });
+
+      expect(contentChildren[0].props.style).toEqual([
+        horizontalStyles.childWrapper,
+      ]);
+      expect(contentChildren[1].props.style).toContainEqual(
+        horizontalStyles.baseChildSpace,
+      );
+    });
+
+    it("should have a small left padding on every child but the first", () => {
+      const { contentChildren } = setupContent({
+        direction: "horizontal",
+        childSpacing: "small",
+      });
+
+      expect(contentChildren[0].props.style).toEqual([
+        horizontalStyles.childWrapper,
+      ]);
+      expect(contentChildren[1].props.style).toContainEqual(
+        horizontalStyles.smallChildSpace,
+      );
+    });
+
+    it("should have a large left padding on every child but the first", () => {
+      const { contentChildren } = setupContent({
+        direction: "horizontal",
+        childSpacing: "large",
+      });
+
+      expect(contentChildren[0].props.style).toEqual([
+        horizontalStyles.childWrapper,
+      ]);
+      expect(contentChildren[1].props.style).toContainEqual(
+        horizontalStyles.largeChildSpace,
+      );
+    });
+
+    it("should have no left padding on every child but the first", () => {
+      const { contentChildren } = setupContent({
+        direction: "horizontal",
+        childSpacing: "none",
+      });
+
+      expect(contentChildren[0].props.style).toEqual([
+        horizontalStyles.childWrapper,
+      ]);
+      expect(contentChildren[1].props.style).toContainEqual(
+        horizontalStyles.noneChildSpace,
+      );
+    });
+
+    it("should have a smaller left padding on every child but the first", () => {
+      const { contentChildren } = setupContent({
+        direction: "horizontal",
+        childSpacing: "smaller",
+      });
+
+      expect(contentChildren[0].props.style).toEqual([
+        horizontalStyles.childWrapper,
+      ]);
+      expect(contentChildren[1].props.style).toContainEqual(
+        horizontalStyles.smallerChildSpace,
+      );
+    });
+    it("should have the smallest left padding on every child but the first", () => {
+      const { contentChildren } = setupContent({
+        direction: "horizontal",
+        childSpacing: "smallest",
+      });
+
+      expect(contentChildren[0].props.style).toEqual([
+        horizontalStyles.childWrapper,
+      ]);
+      expect(contentChildren[1].props.style).toContainEqual(
+        horizontalStyles.smallestChildSpace,
+      );
+    });
+  });
+});

package/src/Content/Content.tsx

@@ -0,0 +1,66 @@
+import React, { ReactNode } from "react";
+import { View } from "react-native";
+import { horizontalStyles } from "./ContentHorizontal.style";
+import { verticalStyles } from "./ContentVertical.style";
+import { spaceStyles } from "./ContentSpaceAround.style";
+
+export type Spacing =
+  | "none"
+  | "base"
+  | "small"
+  | "smaller"
+  | "smallest"
+  | "large";
+
+export interface ContentProps {
+  /**
+   * The child or children that will be given spacing.
+   */
+  readonly children: ReactNode;
+
+  /**
+   * The amount of spacing that content will give.
+   */
+  readonly spacing?: Spacing;
+
+  /**
+   * The amount of spacing that will be applied between children.
+   */
+  readonly childSpacing?: Spacing;
+
+  readonly direction?: "horizontal" | "vertical";
+}
+
+export function Content({
+  children,
+  spacing = "base",
+  childSpacing = "base",
+  direction = "vertical",
+}: ContentProps): JSX.Element {
+  const styles = direction === "horizontal" ? horizontalStyles : verticalStyles;
+  const styleName = `${spacing}Space` as const;
+  const containerStyle = spaceStyles[styleName];
+
+  return (
+    <View style={[styles.wrapper, containerStyle]}>{renderChildren()}</View>
+  );
+
+  function renderChildren() {
+    const childArray = React.Children.toArray(children);
+    if (childArray.length === 1) return children;
+
+    const spaceName = `${childSpacing}ChildSpace` as const;
+    const childContainerStyle = styles[spaceName];
+
+    return childArray.map((child, index) => {
+      // In order to get spacing between the children, we apply the child spacing on each of
+      // the children except for the first (top) child
+      const childStyle = index !== 0 ? [childContainerStyle] : [];
+      return (
+        <View key={index} style={[styles.childWrapper, ...childStyle]}>
+          {child}
+        </View>
+      );
+    });
+  }
+}

package/src/Content/ContentHorizontal.style.ts

@@ -0,0 +1,38 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+export const horizontalStyles = StyleSheet.create({
+  wrapper: {
+    flexDirection: "row",
+  },
+
+  childWrapper: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 0,
+  },
+
+  noneChildSpace: {
+    padding: 0,
+  },
+
+  smallestChildSpace: {
+    paddingLeft: tokens["space-smallest"],
+  },
+
+  smallerChildSpace: {
+    paddingLeft: tokens["space-smaller"],
+  },
+
+  smallChildSpace: {
+    paddingLeft: tokens["space-small"],
+  },
+
+  baseChildSpace: {
+    paddingLeft: tokens["space-base"],
+  },
+
+  largeChildSpace: {
+    paddingLeft: tokens["space-large"],
+  },
+});

package/src/Content/ContentSpaceAround.style.ts

@@ -0,0 +1,28 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+export const spaceStyles = StyleSheet.create({
+  noneSpace: {
+    padding: 0,
+  },
+
+  smallestSpace: {
+    padding: tokens["space-smallest"],
+  },
+
+  smallerSpace: {
+    padding: tokens["space-smaller"],
+  },
+
+  smallSpace: {
+    padding: tokens["space-small"],
+  },
+
+  baseSpace: {
+    padding: tokens["space-base"],
+  },
+
+  largeSpace: {
+    padding: tokens["space-large"],
+  },
+});

package/src/Content/ContentVertical.style.ts

@@ -0,0 +1,38 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+export const verticalStyles = StyleSheet.create({
+  wrapper: {
+    // No style. Default `<View />` styling should suffice.
+    // Only need this key to exist.
+  },
+
+  childWrapper: {
+    // No style. Default `<View />` styling should suffice.
+    // Only need this key to exist.
+  },
+
+  noneChildSpace: {
+    padding: 0,
+  },
+
+  smallestChildSpace: {
+    paddingTop: tokens["space-smallest"],
+  },
+
+  smallerChildSpace: {
+    paddingTop: tokens["space-smaller"],
+  },
+
+  smallChildSpace: {
+    paddingTop: tokens["space-small"],
+  },
+
+  baseChildSpace: {
+    paddingTop: tokens["space-base"],
+  },
+
+  largeChildSpace: {
+    paddingTop: tokens["space-large"],
+  },
+});

package/src/Content/index.ts

@@ -0,0 +1,2 @@
+export { Content } from "./Content";
+export type { Spacing } from "./Content";