@jobber/components-native 0.1.4 → 0.2.0

package/dist/src/Divider/Divider.style.js

@@ -1,19 +1,18 @@
 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/dist/src/Typography/Typography.js

@@ -0,0 +1,98 @@
+import React from "react";
+import { I18nManager, StyleSheet, 
+// eslint-disable-next-line no-restricted-imports
+Text, } from "react-native";
+import { TypographyGestureDetector } from "./TypographyGestureDetector";
+import { typographyStyles as styles } from "./Typography.style";
+import { tokens } from "../utils/design";
+import { capitalize } from "../utils/intl";
+const maxNumberOfLines = {
+    single: 1,
+    small: 2,
+    base: 4,
+    large: 8,
+    extraLarge: 16,
+    unlimited: undefined,
+};
+export const Typography = React.memo(InternalTypography);
+function InternalTypography({ fontFamily, fontStyle, fontWeight, transform, color, align, size = "default", children, maxLines = "unlimited", allowFontScaling = true, maxFontScaleSize, adjustsFontSizeToFit = false, lineHeight, letterSpacing, reverseTheme = false, hideFromScreenReader = false, accessibilityRole = "text", strikeThrough = false, selectable = true, }) {
+    const sizeAndHeight = getSizeAndHeightStyle(size, lineHeight);
+    const style = [
+        getFontStyle(fontFamily, fontStyle, fontWeight),
+        getColorStyle(color, reverseTheme),
+        getAlignStyle(align),
+        sizeAndHeight,
+        getLetterSpacingStyle(letterSpacing),
+    ];
+    if (strikeThrough) {
+        style.push(styles.strikeThrough);
+    }
+    const numberOfLinesForNativeText = maxNumberOfLines[maxLines];
+    const text = getTransformedText(children, transform);
+    const accessibilityProps = hideFromScreenReader
+        ? {
+            accessibilityRole: "none",
+            accessible: false,
+            importantForAccessibility: "no-hide-descendants",
+        }
+        : { accessibilityRole };
+    return (React.createElement(TypographyGestureDetector, null,
+        React.createElement(Text, Object.assign({}, {
+            allowFontScaling,
+            adjustsFontSizeToFit,
+            style,
+            numberOfLines: numberOfLinesForNativeText,
+        }, accessibilityProps, { maxFontSizeMultiplier: getScaleMultiplier(maxFontScaleSize, sizeAndHeight.fontSize), selectable: selectable, selectionColor: tokens["color-brand--highlight"] }), text)));
+}
+function getScaleMultiplier(maxFontScaleSize = 0, size = 1) {
+    if (maxFontScaleSize === 0)
+        return undefined;
+    return maxFontScaleSize / size;
+}
+function getFontStyle(fontFamily = "base", fontStyle = "regular", fontWeight = "regular") {
+    const defaultBaseFontStyling = styles.baseRegularRegular;
+    const defaultDisplayFontStyling = styles.displayRegularBold;
+    const styleKey = `${fontFamily}${capitalize(fontStyle)}${capitalize(fontWeight)}`;
+    const fontStyling = styles[styleKey];
+    if (fontStyling) {
+        return fontStyling;
+    }
+    else {
+        return fontFamily === "display"
+            ? defaultDisplayFontStyling
+            : defaultBaseFontStyling;
+    }
+}
+function getTransformedText(text, transform) {
+    switch (transform) {
+        case "lowercase":
+            return text === null || text === void 0 ? void 0 : text.toLocaleLowerCase();
+        case "uppercase":
+            return text === null || text === void 0 ? void 0 : text.toLocaleUpperCase();
+        case "capitalize":
+            return capitalize(text || "");
+        default:
+            return text;
+    }
+}
+function getColorStyle(color, reverseTheme) {
+    if (color === "default" || !color) {
+        return styles.greyBlue;
+    }
+    const colorStyleKey = `${color}${reverseTheme ? "Reverse" : ""}`;
+    return styles[`${colorStyleKey}`];
+}
+function getAlignStyle(alignStyle = I18nManager.isRTL ? "end" : "start") {
+    return styles[`${alignStyle}Align`];
+}
+function getSizeAndHeightStyle(textSize, lineHeightOverwrite) {
+    const fontSize = styles[`${textSize}Size`];
+    if (lineHeightOverwrite) {
+        const lineHeight = styles[`${lineHeightOverwrite}LineHeight`];
+        return StyleSheet.flatten([fontSize, lineHeight]);
+    }
+    return fontSize;
+}
+function getLetterSpacingStyle(letterSpacing = "base") {
+    return styles[`${letterSpacing}LetterSpacing`];
+}

package/dist/src/Typography/Typography.style.js

@@ -0,0 +1,280 @@
+import { StyleSheet } 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 = {
+    // 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 = StyleSheet.create(typographyTokens);

package/dist/src/Typography/TypographyGestureDetector.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+/**
+ * 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 function TypographyGestureDetector(props) {
+    return React.createElement(GestureDetector, Object.assign({}, props, { gesture: Gesture.Native() }));
+}

package/dist/src/Typography/index.js

@@ -0,0 +1,3 @@
+export { Typography } from "./Typography";
+export { typographyStyles } from "./Typography.style";
+export { TypographyGestureDetector } from "./TypographyGestureDetector";

package/dist/src/index.js

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

package/dist/src/utils/design/index.js

@@ -0,0 +1,6 @@
+import { Platform } from "react-native";
+export const tokens = Platform.select({
+    ios: () => require("@jobber/design/foundation.ios").JobberStyle,
+    android: () => require("@jobber/design/foundation.android").JobberStyle,
+    default: () => require("@jobber/design/foundation.native").JobberStyle,
+})();

package/dist/src/utils/intl/capitalize.js

@@ -0,0 +1,6 @@
+export function capitalize(text) {
+    if (!text) {
+        return "";
+    }
+    return text.charAt(0).toLocaleUpperCase("en-US") + text.slice(1);
+}

package/dist/src/utils/intl/index.js

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