@jobber/components-native 0.75.3-POC-fixing-d44fac2.136 → 0.75.3-POC-fixing-ffcd368.137

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

@@ -1,41 +1,6 @@
-export declare const styles: {
-    container: {
-        paddingLeft: number;
-        marginVertical: number;
-        backgroundColor: string;
-        minHeight: number;
-        flexDirection: "row";
-        justifyContent: "space-between";
-        width: "100%";
-        borderColor: string;
-        borderStyle: "solid";
-        borderWidth: number;
-        borderRadius: number;
-    } | {
-        flexDirection: "column";
-        justifyContent: "center";
-        minHeight: number;
-        marginVertical: number;
-        borderWidth: number;
-    };
-    input: {
-        width: "100%";
-        flexShrink: number;
-        flexGrow: number;
-        color: string;
-        fontFamily: string | undefined;
-        fontSize: number | undefined;
-        letterSpacing: number | undefined;
-        minHeight: number;
-        padding: number;
-    } | {
-        flexDirection: "row";
-        flexGrow: number;
-        paddingTop: number;
-        minHeight: number;
-        minWidth: "100%";
-        paddingRight: number;
-    };
+export declare const useStyles: () => {
+    container: import("react-native").ViewStyle;
+    input: import("react-native").ViewStyle;
     value: {
         flexGrow: number;
         flexShrink: number;

package/dist/types/src/Select/components/SelectPressable/SelectPressable.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     pressed: {
         opacity: number;
     };

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

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     statusLabelRow: {
         flexDirection: "row";
         justifyContent: "flex-end";

package/dist/types/src/Switch/Switch.styles.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     container: {
         marginTop: number;
         marginBottom: number;

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

@@ -1,5 +1,6 @@
 import { TextAlign, TextVariation, TruncateLength, TypographyProps } from "../Typography";
-interface TextProps extends Pick<TypographyProps<"base">, "maxFontScaleSize" | "selectable"> {
+import { TypographyUnsafeStyle } from "../Typography/Typography";
+export interface TextProps extends Pick<TypographyProps<"base">, "maxFontScaleSize" | "selectable"> {
     /**
      * Visual hierarchy of the text
      */
@@ -59,8 +60,13 @@ interface TextProps extends Pick<TypographyProps<"base">, "maxFontScaleSize" | "
      * of the TextInput
      */
     readonly hideFromScreenReader?: boolean;
+    /**
+     * **Use at your own risk:** Custom style for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_style?: TypographyUnsafeStyle;
 }
 export type TextLevel = "text" | "textSupporting";
 export declare const TEXT_MAX_SCALED_FONT_SIZES: Record<TextLevel, number>;
-export declare function Text({ level, variation, emphasis, allowFontScaling, adjustsFontSizeToFit, maxLines, align, children, reverseTheme, strikeThrough, italic, hideFromScreenReader, maxFontScaleSize, underline, selectable, }: TextProps): JSX.Element;
-export {};
+export declare function Text({ level, variation, emphasis, allowFontScaling, adjustsFontSizeToFit, maxLines, align, children, reverseTheme, strikeThrough, italic, hideFromScreenReader, maxFontScaleSize, UNSAFE_style, underline, selectable, }: TextProps): JSX.Element;

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

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     details: {
         width: "100%";
         flexDirection: "column";

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

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     list: {
         display: "flex";
         flexDirection: "row";

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

@@ -11,5 +11,5 @@ export interface ThumbnailListProps {
         index: number;
         imageList: File[];
     }) => void;
-    createThumbnail: CreateThumbnail;
+    createThumbnail?: CreateThumbnail;
 }

package/dist/types/src/Toast/Toast.styles.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     container: {
         flexDirection: "row";
         paddingHorizontal: number;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { TextProps } from "react-native";
+import { StyleProp, TextProps, TextStyle } from "react-native";
 export interface TypographyProps<T extends FontFamily> extends Pick<TextProps, "selectable"> {
     /**
      * Text capitalization
@@ -85,9 +85,13 @@ export interface TypographyProps<T extends FontFamily> extends Pick<TextProps, "
      * Have text styled with strike through
      */
     readonly strikeThrough?: boolean;
+    readonly UNSAFE_style?: TypographyUnsafeStyle;
+}
+export interface TypographyUnsafeStyle {
+    textStyle?: StyleProp<TextStyle>;
 }
 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, underline, selectable, }: TypographyProps<T>): JSX.Element;
+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, underline, UNSAFE_style, selectable, }: TypographyProps<T>): JSX.Element;
 export type FontFamily = "base" | "display";
 export type FontStyle = "regular" | "italic";
 export type FontWeight = "regular" | "medium" | "bold" | "semiBold" | "extraBold" | "black";

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

@@ -1,20 +1,16 @@
 import { TextStyle } from "react-native";
+import { tokens as staticTokens } from "../utils/design";
+import { AtlantisThemeContextValue } from "../AtlantisThemeContext";
 /**
- * Reusable typography tokens to ensure consistency for any client facing texts.
+ * Reusable typography styles to ensure consistency for any client facing texts.
  */
-export declare const typographyTokens: {
+export declare const getTypographyStyles: (tokens: AtlantisThemeContextValue["tokens"] | typeof staticTokens) => {
     [index: string]: TextStyle;
 };
 /**
- * `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"
- * ```
+ * @deprecated Use useTypographyStyles instead
  */
-export declare const typographyStyles: {
+export declare const typographyStyles: Record<string, TextStyle>;
+export declare const useTypographyStyles: () => {
     [index: string]: TextStyle;
 };

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

@@ -1,4 +1,5 @@
 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 { getTypographyStyles, useTypographyStyles } from "./Typography.style";
 export { typographyStyles } from "./Typography.style";
 export { TypographyGestureDetector } from "./TypographyGestureDetector";

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

@@ -2,6 +2,7 @@ export * from "./ActionItem";
 export * from "./ActionLabel";
 export * from "./ActivityIndicator";
 export * from "./AtlantisContext";
+export * from "./AtlantisThemeContext";
 export * from "./AutoLink";
 export * from "./Banner";
 export * from "./BottomSheet";

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

@@ -1,2 +1,7 @@
 import { iosTokens } from "@jobber/design";
+/**
+ * These design tokens don't react to theme changes. Only use these if you need to access
+ * tokens that are not affected by the current theme, otherwise you should be using our
+ * useAtlantisTheme() hook to access the current theme's tokens.
+ */
 export declare const tokens: typeof iosTokens;

package/jestSetup.js

@@ -1,5 +1,5 @@
 import React from "react";
-
+// Mock the useIsScreenReaderEnabled hook
 jest.mock("./dist/src/hooks", () => {
   const actualHooks = jest.requireActual("./dist/src/hooks");
 
@@ -33,5 +33,6 @@ jest.mock("react-native-reanimated", () => {
     FadeIn: {
       duration: () => undefined,
     },
+    useEvent: () => ({ listeners: [] }),
   };
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.75.3-POC-fixing-d44fac2.136+b57471fe",
+  "version": "0.75.3-POC-fixing-ffcd368.137+ffcd3687",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -64,12 +64,13 @@
   },
   "peerDependencies": {
     "@babel/core": "^7.4.5",
+    "@jobber/design": "*",
     "@react-native-community/datetimepicker": ">=6.7.0",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
     "react": "^18.2.0",
     "react-intl": "^6.4.2",
-    "react-native": ">=0.69.2",
+    "react-native": ">=0.76.0",
     "react-native-gesture-handler": ">=2.10.0",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-modal-datetime-picker": " >=13.0.0",
@@ -79,5 +80,5 @@
     "react-native-safe-area-context": "^4.5.2",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "b57471fec4113fb6fb2f3e0fb76273ad024896d9"
+  "gitHead": "ffcd3687552f344f0e63002680a3a1e161f560a8"
 }

package/src/ActionItem/ActionItem.style.ts

@@ -1,29 +1,30 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  actionItemHorizontalOffset: {
-    paddingHorizontal: tokens["space-base"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    actionItemHorizontalOffset: {
+      paddingHorizontal: tokens["space-base"],
+    },
 
-  icon: {
-    justifyContent: "flex-start",
-    paddingRight: tokens["space-small"],
-  },
+    icon: {
+      justifyContent: "flex-start",
+      paddingRight: tokens["space-small"],
+    },
 
-  titlePadding: {
-    paddingBottom: tokens["space-smaller"],
-  },
+    titlePadding: {
+      paddingBottom: tokens["space-smaller"],
+    },
 
-  content: {
-    flex: 1,
-  },
+    content: {
+      flex: 1,
+    },
 
-  offsetForIcons: {
-    paddingTop: tokens["space-smallest"],
-  },
+    offsetForIcons: {
+      paddingTop: tokens["space-smallest"],
+    },
 
-  actionIcon: {
-    paddingLeft: tokens["space-small"],
-  },
+    actionIcon: {
+      paddingLeft: tokens["space-small"],
+    },
+  };
 });

package/src/ActionItem/ActionItem.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react";
 import { View } from "react-native";
 import { IconColorNames, IconNames } from "@jobber/design";
-import { styles } from "./ActionItem.style";
+import { useStyles } from "./ActionItem.style";
 import { ActionItemContainer } from "./components/ActionItemContainer";
 import { Typography } from "../Typography";
 import { Icon } from "../Icon";
@@ -65,6 +65,8 @@ export function ActionItem({
     justifyContent: actionIconAlignment,
   };
 
+  const styles = useStyles();
+
   const addIconOffset = icon || onPress ? styles.offsetForIcons : undefined;
   const titlePadding = children ? styles.titlePadding : undefined;
 

package/src/ActionItem/ActionItemGroup.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from "react";
 import { View } from "react-native";
 import { ActionItem, ActionItemProps } from "./ActionItem";
-import { styles } from "./ActionItem.style";
+import { useStyles } from "./ActionItem.style";
 import { Divider } from "../Divider";
 
 export type ActionItemElement =
@@ -24,6 +24,7 @@ export function ActionItemGroup({
 }
 
 function renderChildren(children: ActionItemElement | ActionItemElement[]) {
+  const styles = useStyles();
   const childArray = React.Children.toArray(children);
   if (childArray.length === 1) return children;
 

package/src/ActionItem/components/ActionItemContainer.style.ts

@@ -1,14 +1,15 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../utils/design";
+import { buildThemedStyles } from "../../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-    flexDirection: "row",
-    paddingVertical: tokens["space-base"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    container: {
+      width: "100%",
+      flexDirection: "row",
+      paddingVertical: tokens["space-base"],
+    },
 
-  pressed: {
-    opacity: tokens["opacity-pressed"],
-  },
+    pressed: {
+      opacity: tokens["opacity-pressed"],
+    },
+  };
 });

package/src/ActionItem/components/ActionItemContainer.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react";
 import { Pressable, View } from "react-native";
-import { styles } from "./ActionItemContainer.style";
-import { styles as actionItemStyles } from "../ActionItem.style";
+import { useStyles } from "./ActionItemContainer.style";
+import { useStyles as useActionItemStyles } from "../ActionItem.style";
 
 interface ActionItemContainerProps {
   readonly children: ReactNode;
@@ -16,6 +16,9 @@ export function ActionItemContainer({
   children,
   testID,
 }: ActionItemContainerProps): JSX.Element {
+  const styles = useStyles();
+  const actionItemStyles = useActionItemStyles();
+
   if (onPress) {
     return (
       <Pressable

package/src/ActivityIndicator/ActivityIndicator.tsx

@@ -1,10 +1,12 @@
 import React from "react";
 import { ActivityIndicator, ActivityIndicatorProps } from "react-native";
-import { tokens } from "../utils/design";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 
 export function JobberActivityIndicator(
   props: ActivityIndicatorProps,
 ): JSX.Element {
+  const { tokens } = useAtlantisTheme();
+
   return (
     <ActivityIndicator
       {...props}

package/src/AtlantisThemeContext/AtlantisThemeContext.test.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import { act, renderHook } from "@testing-library/react-native";
+import { darkTokens, iosTokens } from "@jobber/design";
+import merge from "lodash/merge";
+import {
+  AtlantisThemeContextProvider,
+  useAtlantisTheme,
+} from "./AtlantisThemeContext";
+import { AtlantisThemeContextProviderProps, Theme } from "./types";
+
+const expectedDarkTokens = merge({}, iosTokens, darkTokens);
+const expectedLightTokens = iosTokens;
+
+function Wrapper({
+  children,
+  dangerouslyOverrideTheme,
+}: AtlantisThemeContextProviderProps) {
+  return (
+    <AtlantisThemeContextProvider
+      dangerouslyOverrideTheme={dangerouslyOverrideTheme}
+    >
+      {children}
+    </AtlantisThemeContextProvider>
+  );
+}
+
+function WrapperWithOverride({
+  children,
+  dangerouslyOverrideTheme,
+}: AtlantisThemeContextProviderProps) {
+  return (
+    <Wrapper>
+      <AtlantisThemeContextProvider
+        dangerouslyOverrideTheme={dangerouslyOverrideTheme}
+      >
+        {children}
+      </AtlantisThemeContextProvider>
+    </Wrapper>
+  );
+}
+
+describe("ThemeContext", () => {
+  it("defaults to the light theme", () => {
+    const { result } = renderHook(useAtlantisTheme, {
+      wrapper: (props: AtlantisThemeContextProviderProps) => (
+        <Wrapper {...props} />
+      ),
+    });
+
+    expect(result.current.theme).toBe("light");
+    expect(result.current.tokens).toEqual(expectedLightTokens);
+  });
+
+  it("updates the theme and tokens", () => {
+    const { result } = renderHook(useAtlantisTheme, {
+      wrapper: (props: AtlantisThemeContextProviderProps) => (
+        <Wrapper {...props} />
+      ),
+    });
+
+    act(() => result.current.setTheme("dark"));
+    expect(result.current.theme).toBe("dark");
+    expect(result.current.tokens).toEqual(expectedDarkTokens);
+
+    act(() => result.current.setTheme("light"));
+    expect(result.current.theme).toBe("light");
+    expect(result.current.tokens).toEqual(expectedLightTokens);
+  });
+
+  describe("when theme is forced for provider", () => {
+    it("ignores updates to the global theme", () => {
+      const { result } = renderHook(useAtlantisTheme, {
+        wrapper: (props: AtlantisThemeContextProviderProps) => (
+          <WrapperWithOverride {...props} dangerouslyOverrideTheme="light" />
+        ),
+      });
+
+      // Update the global theme
+      act(() => result.current.setTheme("dark"));
+
+      // This hook shouldn't be affected by it because it's set to the light theme
+      expect(result.current.theme).toBe("light");
+      expect(result.current.tokens).toEqual(expectedLightTokens);
+    });
+
+    it.each([
+      { defaultTheme: "light", expectedTokens: expectedLightTokens },
+      { defaultTheme: "dark", expectedTokens: expectedDarkTokens },
+    ] as { defaultTheme: Theme; expectedTokens: typeof iosTokens }[])(
+      "provides the dangerouslyOverrideTheme $defaultTheme tokens",
+      ({ defaultTheme, expectedTokens }) => {
+        const { result } = renderHook(useAtlantisTheme, {
+          wrapper: (props: AtlantisThemeContextProviderProps) => (
+            <WrapperWithOverride
+              {...props}
+              dangerouslyOverrideTheme={defaultTheme}
+            />
+          ),
+        });
+
+        expect(result.current.theme).toBe(defaultTheme);
+        expect(result.current.tokens).toEqual(expectedTokens);
+      },
+    );
+  });
+});

package/src/AtlantisThemeContext/AtlantisThemeContext.tsx

@@ -0,0 +1,56 @@
+import { androidTokens, darkTokens, iosTokens } from "@jobber/design";
+import React, { createContext, useContext, useState } from "react";
+import merge from "lodash/merge";
+import { Platform } from "react-native";
+import {
+  AtlantisThemeContextProviderProps,
+  AtlantisThemeContextValue,
+  Theme,
+} from "./types";
+
+const lightTokens = Platform.select({
+  ios: () => iosTokens,
+  android: () => androidTokens,
+  default: () => androidTokens,
+})();
+
+const completeDarkTokens = merge({}, lightTokens, darkTokens);
+
+const AtlantisThemeContext = createContext<AtlantisThemeContextValue>({
+  theme: "light",
+  tokens: lightTokens,
+  setTheme: () => {
+    console.error(
+      "useAtlantisTheme accessed outside of AtlantisThemeContextProvider",
+    );
+  },
+});
+
+export function AtlantisThemeContextProvider({
+  children,
+  dangerouslyOverrideTheme,
+}: AtlantisThemeContextProviderProps) {
+  // TODO: check last saved theme from local/device storage
+  const initialTheme: Theme = "light";
+  const [globalTheme, setGlobalTheme] = useState<Theme>(initialTheme);
+
+  const currentTheme = dangerouslyOverrideTheme ?? globalTheme;
+  const currentTokens =
+    currentTheme === "dark" ? completeDarkTokens : lightTokens;
+
+  return (
+    <AtlantisThemeContext.Provider
+      value={{
+        theme: currentTheme,
+        tokens: currentTokens,
+        setTheme: setGlobalTheme,
+      }}
+    >
+      {children}
+    </AtlantisThemeContext.Provider>
+  );
+}
+
+export function useAtlantisTheme() {
+  return useContext(AtlantisThemeContext);
+}

package/src/AtlantisThemeContext/buildThemedStyles.test.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { renderHook } from "@testing-library/react-native";
+import { buildThemedStyles } from "./buildThemedStyles";
+import { AtlantisThemeContextProvider } from "./AtlantisThemeContext";
+
+describe("buildThemedStyles", () => {
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <AtlantisThemeContextProvider>{children}</AtlantisThemeContextProvider>
+  );
+
+  it("creates styles using theme tokens", () => {
+    const useTestStyles = buildThemedStyles(tokens => ({
+      container: {
+        backgroundColor: tokens["color-surface"],
+        padding: tokens["space-base"],
+      },
+    }));
+
+    const { result } = renderHook(() => useTestStyles(), { wrapper });
+
+    expect(result.current).toEqual({
+      container: {
+        backgroundColor: expect.any(String),
+        padding: expect.any(Number),
+      },
+    });
+  });
+
+  it("memoizes styles and only updates when tokens change", () => {
+    const styleFactory = jest.fn(tokens => ({
+      container: {
+        backgroundColor: tokens["color-surface"],
+      },
+    }));
+
+    const useTestStyles = buildThemedStyles(styleFactory);
+
+    const { result, rerender } = renderHook(() => useTestStyles(), { wrapper });
+
+    // Initial render should call styleFactory
+    expect(styleFactory).toHaveBeenCalledTimes(1);
+    const initialResult = result.current;
+
+    // Rerender without token changes should not call styleFactory again
+    rerender({ wrapper });
+    expect(styleFactory).toHaveBeenCalledTimes(1);
+    expect(result.current).toBe(initialResult);
+  });
+
+  it("handles empty style objects", () => {
+    const useTestStyles = buildThemedStyles(() => ({}));
+
+    const { result } = renderHook(() => useTestStyles(), { wrapper });
+
+    expect(result.current).toEqual({});
+  });
+});

package/src/AtlantisThemeContext/buildThemedStyles.ts

@@ -0,0 +1,43 @@
+import { StyleSheet } from "react-native";
+import { useMemo } from "react";
+import { AtlantisThemeContextValue } from "./types";
+import { useAtlantisTheme } from "./AtlantisThemeContext";
+
+/**
+ * Creates a hook that generates themed styles using the current theme tokens.
+ * The hook will automatically update the styles when the theme changes.
+ *
+ * @example
+ * ```tsx
+ * const useStyles = buildThemedStyles(tokens => ({
+ *   container: {
+ *     backgroundColor: tokens["color-surface"],
+ *     padding: tokens["space-base"],
+ *   },
+ * }));
+ *
+ * function MyComponent() {
+ *   const styles = useStyles();
+ *   return <View style={styles.container} />;
+ * }
+ * ```
+ *
+ * @param styleFactory - A function that receives theme tokens and returns a style object
+ * @returns A hook function that returns the created styles
+ *
+ * @note
+ * - Styles are memoized and only recalculated when tokens change
+ * - Use this for components that need to respond to theme changes
+ * - The returned styles are created using StyleSheet.create()
+ *
+ * @see Related functions: {@link useAtlantisTheme}
+ */
+export function buildThemedStyles<
+  T extends Parameters<typeof StyleSheet.create>[0],
+>(styleFactory: (tokens: AtlantisThemeContextValue["tokens"]) => T) {
+  return function useStyles() {
+    const { tokens } = useAtlantisTheme();
+
+    return useMemo(() => StyleSheet.create(styleFactory(tokens)), [tokens]);
+  };
+}