@jobber/components-native 0.1.4 → 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.4",
+  "version": "0.2.0",
   "license": "MIT",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -22,7 +22,8 @@
   },
   "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": {
@@ -38,5 +39,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "67a8aae8b181f43f4eef5d579ae28959d5b4b19f"
+  "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/Typography/Typography.style.ts

@@ -0,0 +1,364 @@
+import { StyleSheet, TextStyle } from "react-native";
+import { tokens } from "../utils/design";
+
+const extravagantLineHeight = tokens["typography--lineHeight-extravagant"];
+const jumboLineHeight = tokens["typography--lineHeight-jumbo"];
+const largestLineHeight = tokens["typography--lineHeight-largest"];
+const largerLineHeight = tokens["typography--lineHeight-larger"];
+const largeLineHeight = tokens["typography--lineHeight-large"];
+const baseLineHeight = tokens["typography--lineHeight-base"];
+const tightLineHeight = tokens["typography--lineHeight-tight"];
+const minisculeLineHeight = tokens["typography--lineHeight-miniscule"];
+
+/**
+ * `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 const typographyTokens: { [index: string]: TextStyle } = {
+  // This follows a pattern of
+  // { fontFamily }{ fontStyle }{ fontWeight }
+  baseRegularRegular: {
+    fontFamily: "inter-regular",
+  },
+
+  baseRegularMedium: {
+    fontFamily: "inter-medium",
+  },
+
+  baseRegularBold: {
+    fontFamily: "inter-bold",
+  },
+
+  baseRegularSemiBold: {
+    fontFamily: "inter-semibold",
+  },
+
+  baseRegularExtraBold: {
+    fontFamily: "inter-extrabold",
+  },
+
+  displayRegularBold: {
+    fontFamily: "jobberpro-bd",
+  },
+
+  displayRegularExtraBold: {
+    fontFamily: "jobberpro-xbd",
+  },
+
+  displayRegularBlack: {
+    fontFamily: "jobberpro-blk",
+  },
+
+  startAlign: {
+    textAlign: "left",
+  },
+
+  endAlign: {
+    textAlign: "right",
+  },
+
+  centerAlign: {
+    textAlign: "center",
+  },
+
+  justifyAlign: {
+    textAlign: "justify",
+  },
+
+  blue: {
+    color: tokens["color-heading"],
+  },
+
+  blueDark: {
+    color: tokens["color-blue--dark"],
+  },
+
+  white: {
+    color: tokens["color-white"],
+  },
+
+  green: {
+    color: tokens["color-green"],
+  },
+
+  greenDark: {
+    color: tokens["color-green--dark"],
+  },
+
+  grey: {
+    color: tokens["color-grey"],
+  },
+
+  greyDark: {
+    color: tokens["color-grey--dark"],
+  },
+
+  greyBlue: {
+    color: tokens["color-greyBlue"],
+  },
+
+  greyBlueDark: {
+    color: tokens["color-greyBlue--dark"],
+  },
+
+  lightBlue: {
+    color: tokens["color-lightBlue"],
+  },
+
+  lightBlueDark: {
+    color: tokens["color-lightBlue--dark"],
+  },
+
+  red: {
+    color: tokens["color-red"],
+  },
+
+  redDark: {
+    color: tokens["color-red--dark"],
+  },
+
+  yellow: {
+    color: tokens["color-yellow"],
+  },
+
+  yellowDark: {
+    color: tokens["color-yellow--dark"],
+  },
+
+  yellowGreenDark: {
+    color: tokens["color-yellowGreen--dark"],
+  },
+
+  orangeDark: {
+    color: tokens["color-orange--dark"],
+  },
+
+  navyDark: {
+    color: tokens["color-navy--dark"],
+  },
+
+  limeDark: {
+    color: tokens["color-lime--dark"],
+  },
+
+  purpleDark: {
+    color: tokens["color-purple--dark"],
+  },
+
+  pinkDark: {
+    color: tokens["color-pink--dark"],
+  },
+
+  tealDark: {
+    color: tokens["color-teal--dark"],
+  },
+
+  indigoDark: {
+    color: tokens["color-indigo--dark"],
+  },
+
+  navy: {
+    color: tokens["color-navy"],
+  },
+
+  heading: {
+    color: tokens["color-heading"],
+  },
+
+  headingReverse: {
+    color: tokens["color-text--reverse"],
+  },
+
+  text: {
+    color: tokens["color-text"],
+  },
+
+  textSecondary: {
+    color: tokens["color-text--secondary"],
+  },
+
+  textReverse: {
+    color: tokens["color-text--reverse"],
+  },
+
+  textReverseSecondary: {
+    color: tokens["color-text--reverse--secondary"],
+  },
+
+  success: {
+    color: tokens["color-success--onSurface"],
+  },
+
+  error: {
+    color: tokens["color-critical"],
+  },
+
+  base: {
+    color: tokens["color-text"],
+  },
+
+  subdued: {
+    color: tokens["color-text--secondary"],
+  },
+
+  warn: {
+    color: tokens["color-warning--onSurface"],
+  },
+
+  info: {
+    color: tokens["color-informative--onSurface"],
+  },
+
+  critical: {
+    color: tokens["color-critical"],
+  },
+
+  successReverse: {
+    color: tokens["color-success"],
+  },
+
+  errorReverse: {
+    color: tokens["color-critical"],
+  },
+
+  baseReverse: {
+    color: tokens["color-text--reverse"],
+  },
+
+  subduedReverse: {
+    color: tokens["color-text--reverse--secondary"],
+  },
+
+  warnReverse: {
+    color: tokens["color-warning"],
+  },
+
+  infoReverse: {
+    color: tokens["color-informative"],
+  },
+
+  criticalReverse: {
+    color: tokens["color-critical"],
+  },
+
+  interactive: {
+    color: tokens["color-interactive"],
+  },
+
+  destructive: {
+    color: tokens["color-destructive"],
+  },
+
+  learning: {
+    color: tokens["color-informative"],
+  },
+
+  subtle: {
+    color: tokens["color-interactive--subtle"],
+  },
+
+  onPrimary: {
+    color: tokens["color-surface"],
+  },
+
+  disabled: {
+    color: tokens["color-disabled"],
+  },
+
+  smallestSize: {
+    fontSize: tokens["typography--fontSize-smallest"],
+    lineHeight: minisculeLineHeight,
+  },
+
+  smallerSize: {
+    fontSize: tokens["typography--fontSize-smaller"],
+    lineHeight: tightLineHeight,
+  },
+
+  smallSize: {
+    fontSize: tokens["typography--fontSize-small"],
+    lineHeight: tightLineHeight,
+  },
+
+  defaultSize: {
+    fontSize: tokens["typography--fontSize-base"],
+    lineHeight: baseLineHeight,
+  },
+
+  largeSize: {
+    fontSize: tokens["typography--fontSize-large"],
+    lineHeight: largeLineHeight,
+  },
+
+  largerSize: {
+    fontSize: tokens["typography--fontSize-larger"],
+    lineHeight: largeLineHeight,
+  },
+
+  largestSize: {
+    fontSize: tokens["typography--fontSize-largest"],
+    lineHeight: largerLineHeight,
+  },
+
+  jumboSize: {
+    fontSize: tokens["typography--fontSize-jumbo"],
+    lineHeight: jumboLineHeight,
+  },
+
+  extravagantSize: {
+    fontSize: tokens["typography--fontSize-extravagant"],
+    lineHeight: extravagantLineHeight,
+  },
+
+  extravagantLineHeight: {
+    lineHeight: extravagantLineHeight,
+  },
+
+  jumboLineHeight: {
+    lineHeight: jumboLineHeight,
+  },
+
+  largestLineHeight: {
+    lineHeight: largestLineHeight,
+  },
+  largerLineHeight: {
+    lineHeight: largerLineHeight,
+  },
+
+  largeLineHeight: {
+    lineHeight: largeLineHeight,
+  },
+
+  baseLineHeight: {
+    lineHeight: baseLineHeight,
+  },
+
+  tightLineHeight: {
+    lineHeight: tightLineHeight,
+  },
+
+  baseLetterSpacing: {
+    letterSpacing: tokens["typography--letterSpacing-base"],
+  },
+
+  looseLetterSpacing: {
+    letterSpacing: tokens["typography--letterSpacing-loose"],
+  },
+
+  strikeThrough: {
+    textDecorationLine: "line-through",
+  },
+};
+
+export const typographyStyles: { [index: string]: TextStyle } =
+  StyleSheet.create(typographyTokens);