@jobber/components-native 0.76.0 → 0.76.1-JOB-116234-d279b0f.20

package/src/Glimmer/Glimmer.style.ts

@@ -1,23 +1,25 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { tokens as staticTokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const shineWidth = tokens["space-largest"];
+export const shineWidth = staticTokens["space-largest"];
 
-export const styles = StyleSheet.create({
-  container: {
-    backgroundColor: "rgba(0, 0, 0, 0.05)",
-    overflow: "hidden",
-    position: "relative",
-    width: "100%",
-    height: tokens["space-base"],
-    borderRadius: tokens["radius-base"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    container: {
+      backgroundColor: "rgba(0, 0, 0, 0.05)",
+      overflow: "hidden",
+      position: "relative",
+      width: "100%",
+      height: tokens["space-base"],
+      borderRadius: tokens["radius-base"],
+    },
 
-  shine: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: shineWidth,
-    height: "100%",
-  },
+    shine: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: shineWidth,
+      height: "100%",
+    },
+  };
 });

package/src/Glimmer/Glimmer.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Animated, Easing, LayoutChangeEvent, View } from "react-native";
 import Svg, { Defs, LinearGradient, Rect, Stop } from "react-native-svg";
-import { shineWidth, styles } from "./Glimmer.style";
-import { sizeStyles } from "./Glimmer.size.style";
-import { shapeStyles } from "./Glimmer.shape.style";
+import { shineWidth, useStyles } from "./Glimmer.style";
+import { useSizeStyles } from "./Glimmer.size.style";
+import { useShapeStyles } from "./Glimmer.shape.style";
 import { tokens } from "../utils/design";
 
-export type GlimmerShapes = keyof typeof shapeStyles;
-export type GlimmerSizes = keyof typeof sizeStyles;
+export type GlimmerShapes = keyof ReturnType<typeof useShapeStyles>;
+export type GlimmerSizes = keyof ReturnType<typeof useSizeStyles>;
 export type GlimmerTimings = "base" | "fast";
 
 interface GlimmerProps {
@@ -65,6 +65,10 @@ export function Glimmer({
     return shine.stop;
   }, [parentWidth]);
 
+  const styles = useStyles();
+  const sizeStyles = useSizeStyles();
+  const shapeStyles = useShapeStyles();
+
   return (
     <View
       style={[

package/src/IconButton/IconButton.style.ts

@@ -1,11 +1,12 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  container: {
-    width: tokens["space-largest"],
-    height: tokens["space-largest"],
-    justifyContent: "center",
-    alignItems: "center",
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    container: {
+      width: tokens["space-largest"],
+      height: tokens["space-largest"],
+      justifyContent: "center",
+      alignItems: "center",
+    },
+  };
 });

package/src/IconButton/IconButton.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { TouchableOpacity } from "react-native";
 import { IconColorNames, IconNames } from "@jobber/design";
-import { styles } from "./IconButton.style";
+import { useStyles } from "./IconButton.style";
 import { Icon } from "../Icon";
 
 interface IconButtonProps {
@@ -51,6 +51,8 @@ export function IconButton({
   accessibilityLabel,
   testID,
 }: IconButtonProps): JSX.Element {
+  const styles = useStyles();
+
   return (
     <TouchableOpacity
       onPress={onPress}

package/src/InputFieldWrapper/CommonInputStyles.style.ts

@@ -1,10 +1,20 @@
-import { StyleSheet } from "react-native";
-import { typographyStyles } from "../Typography";
-import { tokens } from "../utils/design";
+import { StyleSheet, TextStyle, ViewStyle } from "react-native";
+import {
+  AtlantisThemeContextValue,
+  buildThemedStyles,
+} from "../AtlantisThemeContext";
+import {
+  typographyStyles as staticTypographyStyles,
+  useTypographyStyles,
+} from "../Typography";
+import { tokens as staticTokens } from "../utils/design";
 
-export const commonInputStyles = StyleSheet.create({
+export const createCommonInputTokens = (
+  tokens: AtlantisThemeContextValue["tokens"] | typeof staticTokens,
+  typographyStyles: Record<string, TextStyle>,
+): Record<string, ViewStyle | TextStyle> => ({
   input: {
-    width: "100%",
+    width: "100%" as const,
     flexShrink: 1,
     flexGrow: 1,
     color: tokens["color-text"],
@@ -37,3 +47,19 @@ export const commonInputStyles = StyleSheet.create({
     borderRadius: tokens["radius-base"],
   },
 });
+
+/**
+ * @deprecated Use useCommonInputStyles instead
+ */
+export const commonInputStyles = StyleSheet.create(
+  createCommonInputTokens(staticTokens, staticTypographyStyles),
+);
+
+export const useCommonInputStyles = () => {
+  const typographyStyles = useTypographyStyles();
+  const themedStyles = buildThemedStyles(tokens =>
+    createCommonInputTokens(tokens, typographyStyles),
+  )();
+
+  return themedStyles;
+};

package/src/InputFieldWrapper/InputFieldWrapper.style.ts

@@ -1,140 +1,145 @@
 import { StyleSheet } from "react-native";
-import { commonInputStyles } from "./CommonInputStyles.style";
-import { tokens } from "../utils/design";
-import { typographyStyles } from "../Typography";
-
-export const styles = StyleSheet.create({
-  container: StyleSheet.flatten([
-    commonInputStyles.container,
-    {
-      flexDirection: "column",
-    },
-  ]),
-
-  field: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
-
-  inputContainer: {
-    flexDirection: "row",
-    flex: 1,
-    justifyContent: "flex-start",
-  },
-
-  inputFocused: {
-    borderColor: tokens["color-interactive"],
-  },
-
-  inputInvalid: {
-    borderColor: tokens["color-critical"],
-  },
-
-  label: {
-    // for placeholder
-    position: "absolute",
-    display: "flex",
-    justifyContent: "center",
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-  },
-
-  miniLabel: {
-    top: 0,
-    paddingTop: tokens["space-small"] - tokens["space-smallest"],
-    backgroundColor: tokens["color-surface"],
-    marginRight: tokens["space-small"],
-    maxHeight:
-      (typographyStyles.defaultSize.lineHeight || 0) + tokens["space-smaller"],
-    zIndex: 1,
-  },
-  // Prevents the miniLabel from cutting off the ClearAction button
-  miniLabelShowClearAction: {
-    backgroundColor: "transparent",
-  },
-
-  disabled: {
-    backgroundColor: tokens["color-disabled--secondary"],
-  },
-
-  fieldAffix: {
-    flexDirection: "row",
-  },
-
-  fieldAffixMiniLabel: {
-    paddingTop: tokens["space-small"] - tokens["space-smallest"],
-    // @ts-expect-error tsc-ci
-    top: typographyStyles.smallSize.fontSize / 2,
-    right: 0,
-    bottom: 0,
-    left: 0,
-  },
-
-  prefixIcon: {
-    justifyContent: "center",
-    paddingRight: tokens["space-small"],
-  },
-
-  prefixLabel: {
-    justifyContent: "center",
-    paddingTop: tokens["space-minuscule"],
-    paddingRight: tokens["space-minuscule"],
-  },
-
-  suffixIcon: {
-    justifyContent: "center",
-    paddingRight: tokens["space-small"],
-  },
-
-  suffixLabel: {
-    justifyContent: "center",
-    paddingTop: tokens["space-minuscule"],
-    paddingRight: tokens["space-small"],
-  },
-
-  suffixIconMargin: {
-    marginLeft: tokens["space-small"] + tokens["space-smaller"],
-  },
-
-  suffixLabelMargin: {
-    marginLeft: tokens["space-smallest"],
-  },
-
-  inputEndContainer: {
-    flexDirection: "row",
-    zIndex: 1,
-  },
-
-  toolbar: {
-    flexBasis: "100%",
-    flexDirection: "row",
-    gap: tokens["space-small"],
-    paddingBottom: tokens["space-small"],
-  },
-
-  loadingSpinner: {
-    justifyContent: "center",
-    paddingRight: tokens["space-small"],
-  },
-
-  loadingGlimmers: {
-    position: "absolute",
-    top: tokens["space-base"],
-    bottom: tokens["space-base"],
-    left: 0,
-    right: 0,
-    gap: tokens["space-small"],
-    paddingTop: tokens["space-small"],
-    paddingRight: tokens["space-large"],
-    backgroundColor: tokens["color-surface"],
-    overflow: "hidden",
-  },
-
-  loadingGlimmersHasValue: {
-    top: tokens["space-large"],
-    paddingTop: tokens["space-base"] - tokens["space-smaller"],
-    bottom: tokens["space-smaller"],
-  },
-});
+import { useCommonInputStyles } from "./CommonInputStyles.style";
+import { buildThemedStyles } from "../AtlantisThemeContext";
+import { useTypographyStyles } from "../Typography";
+
+export const useStyles = () => {
+  const commonInputStyles = useCommonInputStyles();
+  const typographyStyles = useTypographyStyles();
+
+  return buildThemedStyles(tokens => ({
+    container: StyleSheet.flatten([
+      commonInputStyles.container,
+      {
+        flexDirection: "column",
+      },
+    ]),
+    field: {
+      flexDirection: "row",
+      alignItems: "center",
+    },
+
+    inputContainer: {
+      flexDirection: "row",
+      flex: 1,
+      justifyContent: "flex-start",
+    },
+
+    inputFocused: {
+      borderColor: tokens["color-interactive"],
+    },
+
+    inputInvalid: {
+      borderColor: tokens["color-critical"],
+    },
+
+    label: {
+      // for placeholder
+      position: "absolute",
+      display: "flex",
+      justifyContent: "center",
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    },
+
+    miniLabel: {
+      top: 0,
+      paddingTop: tokens["space-small"] - tokens["space-smallest"],
+      backgroundColor: tokens["color-surface"],
+      marginRight: tokens["space-small"],
+      maxHeight:
+        (typographyStyles.defaultSize.lineHeight || 0) +
+        tokens["space-smaller"],
+      zIndex: 1,
+    },
+    // Prevents the miniLabel from cutting off the ClearAction button
+    miniLabelShowClearAction: {
+      backgroundColor: "transparent",
+    },
+
+    disabled: {
+      backgroundColor: tokens["color-disabled--secondary"],
+    },
+
+    fieldAffix: {
+      flexDirection: "row",
+    },
+
+    fieldAffixMiniLabel: {
+      paddingTop: tokens["space-small"] - tokens["space-smallest"],
+      // @ts-expect-error tsc-ci
+      top: typographyStyles.smallSize.fontSize / 2,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    },
+
+    prefixIcon: {
+      justifyContent: "center",
+      paddingRight: tokens["space-small"],
+    },
+
+    prefixLabel: {
+      justifyContent: "center",
+      paddingTop: tokens["space-minuscule"],
+      paddingRight: tokens["space-minuscule"],
+    },
+
+    suffixIcon: {
+      justifyContent: "center",
+      paddingRight: tokens["space-small"],
+    },
+
+    suffixLabel: {
+      justifyContent: "center",
+      paddingTop: tokens["space-minuscule"],
+      paddingRight: tokens["space-small"],
+    },
+
+    suffixIconMargin: {
+      marginLeft: tokens["space-small"] + tokens["space-smaller"],
+    },
+
+    suffixLabelMargin: {
+      marginLeft: tokens["space-smallest"],
+    },
+
+    inputEndContainer: {
+      flexDirection: "row",
+      zIndex: 1,
+    },
+
+    toolbar: {
+      flexBasis: "100%",
+      flexDirection: "row",
+      gap: tokens["space-small"],
+      paddingBottom: tokens["space-small"],
+    },
+
+    loadingSpinner: {
+      justifyContent: "center",
+      paddingRight: tokens["space-small"],
+    },
+
+    loadingGlimmers: {
+      position: "absolute",
+      top: tokens["space-base"],
+      bottom: tokens["space-base"],
+      left: 0,
+      right: 0,
+      gap: tokens["space-small"],
+      paddingTop: tokens["space-small"],
+      paddingRight: tokens["space-large"],
+      backgroundColor: tokens["color-surface"],
+      overflow: "hidden",
+    },
+
+    loadingGlimmersHasValue: {
+      top: tokens["space-large"],
+      paddingTop: tokens["space-base"] - tokens["space-smaller"],
+      bottom: tokens["space-smaller"],
+    },
+  }))();
+};

package/src/InputFieldWrapper/InputFieldWrapper.test.tsx

@@ -1,20 +1,39 @@
 import React from "react";
-import { RenderAPI, fireEvent, render } from "@testing-library/react-native";
+import {
+  RenderAPI,
+  fireEvent,
+  render,
+  renderHook,
+} from "@testing-library/react-native";
 import { Text, ViewStyle } from "react-native";
 import {
   InputFieldWrapper,
   InputFieldWrapperProps,
-  commonInputStyles,
+  useCommonInputStyles,
 } from ".";
-import { styles } from "./InputFieldWrapper.style";
+import { useStyles } from "./InputFieldWrapper.style";
 import {
   INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID,
   INPUT_FIELD_WRAPPER_SPINNER_TEST_ID,
 } from "./InputFieldWrapper";
-import { typographyStyles } from "../Typography";
+import { useTypographyStyles } from "../Typography";
 
 const mockLabel = { label: "$" };
 
+let styles: ReturnType<typeof useStyles>;
+let commonInputStyles: ReturnType<typeof useCommonInputStyles>;
+let typographyStyles: ReturnType<typeof useTypographyStyles>;
+
+beforeAll(() => {
+  const stylesHook = renderHook(() => useStyles());
+  const commonInputStylesHook = renderHook(() => useCommonInputStyles());
+  const typographyStylesHook = renderHook(() => useTypographyStyles());
+
+  styles = stylesHook.result.current;
+  commonInputStyles = commonInputStylesHook.result.current;
+  typographyStyles = typographyStylesHook.result.current;
+});
+
 type InputFieldWrapperTestProps = Omit<InputFieldWrapperProps, "children">;
 
 function renderInputFieldWrapper(props: InputFieldWrapperTestProps): RenderAPI {
@@ -159,7 +178,7 @@ describe("InputFieldWrapper", () => {
       const styleOverride = {
         container: {
           backgroundColor: "purple",
-          width: "50%",
+          width: "50%" as const,
         },
       };
       const { getByTestId } = renderInputFieldWrapper({

package/src/InputFieldWrapper/InputFieldWrapper.tsx

@@ -8,13 +8,13 @@ import {
 } from "react-native";
 import { FieldError } from "react-hook-form";
 import { IconNames } from "@jobber/design";
-import { styles } from "./InputFieldWrapper.style";
+import { useStyles } from "./InputFieldWrapper.style";
 import { PrefixIcon, PrefixLabel } from "./components/Prefix/Prefix";
 import { SuffixIcon, SuffixLabel } from "./components/Suffix/Suffix";
 import { ClearAction } from "./components/ClearAction";
 import { Glimmer } from "../Glimmer/Glimmer";
 import { ErrorMessageWrapper } from "../ErrorMessageWrapper";
-import { TextVariation, typographyStyles } from "../Typography";
+import { TextVariation, useTypographyStyles } from "../Typography";
 import { Text } from "../Text";
 import { ActivityIndicator } from "../ActivityIndicator";
 
@@ -145,6 +145,7 @@ export function InputFieldWrapper({
 
   const showLoadingSpinner = loading && loadingType === "spinner";
   const showLoadingGlimmer = loading && loadingType === "glimmer";
+  const styles = useStyles();
 
   return (
     <ErrorMessageWrapper message={getMessage({ invalid, error })}>
@@ -342,6 +343,8 @@ function Placeholder({
   readonly labelVariation: TextVariation;
   readonly hasMiniLabel: boolean;
 }) {
+  const typographyStyles = useTypographyStyles();
+
   return (
     <>
       {!styleOverride ? (

package/src/InputFieldWrapper/components/ClearAction/ClearAction.style.ts

@@ -1,27 +1,28 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
 
-const width = tokens["space-smaller"] + tokens["space-larger"];
+export const useStyles = buildThemedStyles(tokens => {
+  const width = tokens["space-smaller"] + tokens["space-larger"];
 
-export const styles = StyleSheet.create({
-  container: {
-    width,
-    height: "100%",
-    flexDirection: "row",
-    justifyContent: "center",
-    alignItems: "center",
-    alignSelf: "center",
-  },
-  circle: {
-    backgroundColor: tokens["color-surface--background"],
-    borderRadius: tokens["radius-circle"],
-    width: tokens["space-large"],
-    height: tokens["space-large"],
-    flexDirection: "row",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  addedMargin: {
-    marginRight: tokens["space-small"],
-  },
+  return {
+    container: {
+      width,
+      height: "100%",
+      flexDirection: "row",
+      justifyContent: "center",
+      alignItems: "center",
+      alignSelf: "center",
+    },
+    circle: {
+      backgroundColor: tokens["color-surface--background"],
+      borderRadius: tokens["radius-circle"],
+      width: tokens["space-large"],
+      height: tokens["space-large"],
+      flexDirection: "row",
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    addedMargin: {
+      marginRight: tokens["space-small"],
+    },
+  };
 });

package/src/InputFieldWrapper/components/ClearAction/ClearAction.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Pressable, View } from "react-native";
-import { styles } from "./ClearAction.style";
+import { useStyles } from "./ClearAction.style";
 import { Icon } from "../../../Icon";
 import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 
@@ -17,6 +17,7 @@ export function ClearAction({
   hasMarginRight = false,
 }: ClearActionProps): JSX.Element {
   const { t } = useAtlantisI18n();
+  const styles = useStyles();
 
   return (
     <Pressable

package/src/InputFieldWrapper/components/Prefix/Prefix.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render } from "@testing-library/react-native";
+import { render, renderHook } from "@testing-library/react-native";
 import { TextStyle } from "react-native";
 import { ReactTestInstance } from "react-test-renderer";
 import {
@@ -10,8 +10,11 @@ import {
   prefixIconTestId,
   prefixLabelTestId,
 } from "./Prefix";
-import { typographyStyles } from "../../../Typography";
-import { styles } from "../../InputFieldWrapper.style";
+import {
+  typographyStyles as staticStyles,
+  useTypographyStyles,
+} from "../../../Typography";
+import { useStyles } from "../../InputFieldWrapper.style";
 import { tokens } from "../../../utils/design";
 import * as IconComponent from "../../../Icon/Icon";
 
@@ -19,6 +22,19 @@ const iconSpy = jest.spyOn(IconComponent, "Icon");
 
 const mockLabel = "$";
 
+let styles: ReturnType<typeof useStyles>;
+let typographyStyles: ReturnType<typeof useTypographyStyles>;
+
+beforeAll(() => {
+  const stylesHook = renderHook(() => useStyles());
+  const typographyStylesHook = renderHook(() => useTypographyStyles());
+
+  styles = stylesHook.result.current;
+  typographyStyles = typographyStylesHook.result.current;
+  console.log(typographyStyles.defaultSize);
+  console.log(staticStyles.defaultSize);
+});
+
 function setupLabel({
   disabled = false,
   focused = false,
@@ -156,6 +172,8 @@ describe("Prefix", () => {
         disabled: true,
       });
       const prefixLabel = tree.getByText(mockLabel);
+      // console.log(tree.debug());
+      console.log(prefixLabel.props.style);
       const expectedStyle = [
         typographyStyles.baseRegularRegular,
         typographyStyles.disabled,