feat(components-native): AtlantisThemeContext for mobile #2387

jdeichert · 2025-02-19T21:37:00Z

Motivations

This PR adds a new mobile component: AtlantisThemeContextProvider. This component behaves similar to our web version with the exact same API.

We also expose a useAtlantisTheme() hook. This is slightly different from the web version because it also returns a setTheme() method which allows you to change the theme globally. The web version is a little more complex because it needs to dispatch a global event (via updateTheme()) that all theme providers (in various distinct react roots) listen for. Mobile doesn't need that complexity as we only have one react tree and not a bunch of disparate islands.

Changes

Added

New AtlantisThemeContextProvider for mobile

Testing

There's not much testing to do. This is a new component that will not affect JM at all until we start using it, which will be in followup PRs.

Check out the new mobile stories
- Note that the contents inside the theme provider don't look correct in dark mode! We'll be slowly adding dark theme support to all native components, starting with a few prioritized ones.
Check out the docs page update
- Documents mobile usage

Changes can be tested via Pre-release

packages/components-native/src/Button/Button.style.ts

cloudflare-workers-and-pages · 2025-02-19T21:41:17Z

Deploying atlantis with Cloudflare Pages

Latest commit:	`7e177f9`
Status:	✅ Deploy successful!
Preview URL:	https://1e53e2fb.atlantis.pages.dev
Branch Preview URL:	https://job-116234-theme-context-for.atlantis.pages.dev

View logs

cloudflare-workers-and-pages · 2025-02-20T21:37:15Z

Deploying atlantis with Cloudflare Pages

Latest commit:	`9fe8b36`
Status:	⚡️ Build in progress...

View logs

jdeichert · 2025-02-20T21:47:59Z

docs/components/AtlantisThemeContext/Mobile.stories.tsx

+  useAtlantisTheme,
+} from "@jobber/components-native";
+
+export default {


Added some basic stories. They won't look correct in dark mode until we update the entire library to use buildThemedStyles.

Screen.Recording.2025-02-20.at.1.46.26.PM.mov

Note, after I recorded this video I reverted the Button style changes. @Aiden-Brine's PR will handle that!

jdeichert · 2025-02-20T21:51:47Z

packages/components-native/src/AtlantisThemeContext/AtlantisThemeContext.tsx

+  children,
+  dangerouslyOverrideTheme,
+}: AtlantisThemeContextProviderProps) {
+  // TODO: check last saved theme from local/device storage


This is a TODO for the future when we actually do dark mode in JM

cloudflare-workers-and-pages · 2025-02-21T16:57:12Z

Deploying atlantis with Cloudflare Pages

Latest commit:	`9fe8b36`
Status:	✅ Deploy successful!
Preview URL:	https://325d3cc1.atlantis.pages.dev
Branch Preview URL:	https://job-116234-theme-context-for.atlantis.pages.dev

View logs

cloudflare-workers-and-pages · 2025-02-21T17:39:20Z

Deploying atlantis with Cloudflare Pages

Latest commit:	`3c05faf`
Status:	⚡️ Build in progress...

View logs

cloudflare-workers-and-pages · 2025-02-21T17:42:01Z

Deploying atlantis with Cloudflare Pages

Latest commit:	`a7d4432`
Status:	⚡️ Build in progress...

View logs

jdeichert · 2025-02-21T17:43:04Z

packages/site/src/preview/useAtlantisPreviewSkeleton.tsx

@@ -18,7 +18,7 @@ const skeletonHTML = (theme: Theme, type: "web" | "mobile") => {
  return `

 <!DOCTYPE html>
-<html data-theme="${type === "web" ? theme : "light"}" data-type="${type}">
+<html data-theme="${theme}" data-type="${type}">


I got dark mode working with mobile iframes:

Screen.Recording.2025-02-21.at.9.42.13.AM.mov

jdeichert · 2025-02-21T17:43:36Z

packages/site/src/preview/AtlantisPreviewProvider.tsx

+    if (iframeMobile.current) {
+      const iframeMobileWindow = iframeMobile.current.contentWindow;
+      iframeMobileWindow?.postMessage({ type: "updateTheme", theme }, "*");
+    }


When the docs site theme is toggled, this also toggles the mobile iframe preview just like the web one above.

cloudflare-workers-and-pages · 2025-02-21T17:44:25Z

Deploying atlantis with Cloudflare Pages

Latest commit:	`3c05faf`
Status:	✅ Deploy successful!
Preview URL:	https://4fdb6165.atlantis.pages.dev
Branch Preview URL:	https://job-116234-theme-context-for.atlantis.pages.dev

View logs

cloudflare-workers-and-pages · 2025-02-21T17:46:56Z

Deploying atlantis with Cloudflare Pages

Latest commit:	`a7d4432`
Status:	✅ Deploy successful!
Preview URL:	https://395668db.atlantis.pages.dev
Branch Preview URL:	https://job-116234-theme-context-for.atlantis.pages.dev

View logs

…ntext-for-mobile

cloudflare-workers-and-pages · 2025-02-21T17:52:43Z

Deploying atlantis with Cloudflare Pages

Latest commit:	`5348136`
Status:	⚡️ Build in progress...

View logs

cloudflare-workers-and-pages · 2025-02-21T17:58:43Z

Deploying atlantis with Cloudflare Pages

Latest commit:	`5348136`
Status:	✅ Deploy successful!
Preview URL:	https://89b8698d.atlantis.pages.dev
Branch Preview URL:	https://job-116234-theme-context-for.atlantis.pages.dev

View logs

cloudflare-workers-and-pages · 2025-02-21T18:33:38Z

Deploying atlantis with Cloudflare Pages

Latest commit:	`556789c`
Status:	⚡️ Build in progress...

View logs

cloudflare-workers-and-pages · 2025-02-21T18:39:14Z

Deploying atlantis with Cloudflare Pages

Latest commit:	`556789c`
Status:	✅ Deploy successful!
Preview URL:	https://a3b0d0e6.atlantis.pages.dev
Branch Preview URL:	https://job-116234-theme-context-for.atlantis.pages.dev

View logs

This reverts commit 556789c.

…ntext-for-mobile

Aiden-Brine · 2025-02-22T00:43:53Z

packages/components-native/src/AtlantisThemeContext/types.ts

+   * Force the theme for this provider to always be the same as the provided theme. Useful for sections that should remain the same theme regardless of the rest of the application's theme.
+   * This is dangerous because the children in this provider will not be able to change the theme.
+   */
+  readonly dangerouslyOverrideTheme?: Theme;


Probably too late for this component because I know we use this language on the web theme provider but ideally should this be "unsafe" instead of "dangerous" to be more consistent with our current naming or is there a difference between an unsafe action and a dangerous action? This definitely isn't for this PR but I wanted to raise it to chat about

Checking the code I think this is the only place we use "dangerous"

Yeah, good point. This predates our decisions around using unsafe terminology. I believe the original intent for using dangerously is that it's similar to other react props, like dangerouslySetInnerHTML.

I'll create a ticket to rename these props in atlantis and consumers.

Made the ticket, it's in our backlog 👍

Aiden-Brine · 2025-02-22T00:51:09Z

docs/components/AtlantisThemeContext/AtlantisThemeContext.stories.mdx

@@ -61,6 +61,50 @@ function ThemedComponent() {
 }
 ```

+### Usage for mobile


The usage sections give enough information to figure out how to use both web and mobile but how about a small section to highlight the differences so that if someone who is familiar with one is looking at the other they can quickly see the differences in usages?

Good point, will add this today!

Add some docs above!

Aiden-Brine

I left two non-blocking questions but otherwise this looks really nice!

Aiden-Brine · 2025-02-24T17:57:44Z

docs/components/AtlantisThemeContext/AtlantisThemeContext.stories.mdx

+
+On web, you'll need to import the `updateTheme` function and call it with the
+new theme. This is a separate function because it synchronizes the theme update
+across all providers in various react trees (due to our island architecture).


Should this say "to handle cases where a React Island architecture is used" since there is potential that someone outside of Jobber is reading these docs?

I think outlining specifics about our architecture might be fine. We do reference internal specifics in other places, see https://atlantis.getjobber.com/content/voice-and-tone for example.

While I don't think this change is necessary, I'll make the adjustment as it's pretty small and still gets the point across.

jdeichert added 3 commits February 19, 2025 13:28

Add AtlantisThemeContext for components-native

575b7d4

Make Button component use theme tokens

9d948fb

Add todos

37e774f

jdeichert commented Feb 19, 2025

View reviewed changes

packages/components-native/src/Button/Button.style.ts Outdated Show resolved Hide resolved

jdeichert added 4 commits February 20, 2025 11:25

Handle changing theme globally

8cd5920

Add mobile story for AtlantisThemeContext

4d27b02

Add tests for mobile AtlantisThemeContextProvider

a5c4faa

Update meta.json

cad4736

jdeichert commented Feb 20, 2025

View reviewed changes

jdeichert added 7 commits February 20, 2025 13:58

Cleanup types

afed2e0

Undo Button changes

edfd378

Update comment

c491555

Generate mobile props for AtlantisThemeContext

0a9f647

Show mobile props

bbdcddf

Theme the mobile preview iframe

09b639a

Add mobile example for AtlantisThemeContext

9fe8b36

Update mobile snippet to override the theme

3c05faf

Fix lint

a7d4432

jdeichert commented Feb 21, 2025

View reviewed changes

jdeichert added 2 commits February 21, 2025 09:51

Merge remote-tracking branch 'origin/master' into JOB-116234/theme-co…

acefddf

…ntext-for-mobile

Rename function

5348136

Regen props files

556789c

jdeichert marked this pull request as ready for review February 21, 2025 19:01

jdeichert requested a review from a team as a code owner February 21, 2025 19:01

jobbiebot bot added review requested Team UX Foundations labels Feb 21, 2025

jdeichert requested a review from Aiden-Brine February 21, 2025 19:01

jdeichert added 2 commits February 21, 2025 14:44

Revert "Regen props files"

674ae69

This reverts commit 556789c.

Merge remote-tracking branch 'origin/master' into JOB-116234/theme-co…

036921d

…ntext-for-mobile

Aiden-Brine reviewed Feb 22, 2025

View reviewed changes

Aiden-Brine approved these changes Feb 22, 2025

View reviewed changes

jobbiebot bot added approved and removed review requested labels Feb 22, 2025

Note differences between web and mobile

a98187c

jdeichert requested a review from Aiden-Brine February 24, 2025 17:32

jobbiebot bot added the review requested label Feb 24, 2025

Aiden-Brine reviewed Feb 24, 2025

View reviewed changes

Tweak wording

7e177f9

jdeichert merged commit 1c3085f into master Feb 24, 2025
12 checks passed

jdeichert deleted the JOB-116234/theme-context-for-mobile branch February 24, 2025 18:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(components-native): AtlantisThemeContext for mobile #2387

feat(components-native): AtlantisThemeContext for mobile #2387

jdeichert commented Feb 19, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Feb 19, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Feb 20, 2025 •

edited

Loading

jdeichert Feb 20, 2025

jdeichert Feb 21, 2025

jdeichert Feb 20, 2025

cloudflare-workers-and-pages bot commented Feb 21, 2025

cloudflare-workers-and-pages bot commented Feb 21, 2025

cloudflare-workers-and-pages bot commented Feb 21, 2025

jdeichert Feb 21, 2025

jdeichert Feb 21, 2025

cloudflare-workers-and-pages bot commented Feb 21, 2025

cloudflare-workers-and-pages bot commented Feb 21, 2025

cloudflare-workers-and-pages bot commented Feb 21, 2025

cloudflare-workers-and-pages bot commented Feb 21, 2025

cloudflare-workers-and-pages bot commented Feb 21, 2025

cloudflare-workers-and-pages bot commented Feb 21, 2025

Aiden-Brine Feb 22, 2025 •

edited

Loading

Aiden-Brine Feb 22, 2025

jdeichert Feb 24, 2025 •

edited

Loading

jdeichert Feb 24, 2025

Aiden-Brine Feb 22, 2025 •

edited

Loading

jdeichert Feb 24, 2025

jdeichert Feb 24, 2025

Aiden-Brine left a comment

Aiden-Brine Feb 24, 2025 •

edited

Loading

jdeichert Feb 24, 2025

jdeichert Feb 24, 2025

feat(components-native): AtlantisThemeContext for mobile #2387

feat(components-native): AtlantisThemeContext for mobile #2387

Conversation

jdeichert commented Feb 19, 2025 • edited Loading

Motivations

Changes

Added

Testing

cloudflare-workers-and-pages bot commented Feb 19, 2025 • edited Loading

Deploying atlantis with Cloudflare Pages

cloudflare-workers-and-pages bot commented Feb 20, 2025 • edited Loading

Deploying atlantis with Cloudflare Pages

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cloudflare-workers-and-pages bot commented Feb 21, 2025

Deploying atlantis with Cloudflare Pages

cloudflare-workers-and-pages bot commented Feb 21, 2025

Deploying atlantis with Cloudflare Pages

cloudflare-workers-and-pages bot commented Feb 21, 2025

Deploying atlantis with Cloudflare Pages

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cloudflare-workers-and-pages bot commented Feb 21, 2025

Deploying atlantis with Cloudflare Pages

cloudflare-workers-and-pages bot commented Feb 21, 2025

Deploying atlantis with Cloudflare Pages

cloudflare-workers-and-pages bot commented Feb 21, 2025

Deploying atlantis with Cloudflare Pages

cloudflare-workers-and-pages bot commented Feb 21, 2025

Deploying atlantis with Cloudflare Pages

cloudflare-workers-and-pages bot commented Feb 21, 2025

Deploying atlantis with Cloudflare Pages

cloudflare-workers-and-pages bot commented Feb 21, 2025

Deploying atlantis with Cloudflare Pages

Aiden-Brine Feb 22, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jdeichert Feb 24, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Aiden-Brine Feb 22, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Aiden-Brine left a comment

Choose a reason for hiding this comment

Aiden-Brine Feb 24, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jdeichert commented Feb 19, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Feb 19, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Feb 20, 2025 •

edited

Loading

Aiden-Brine Feb 22, 2025 •

edited

Loading

jdeichert Feb 24, 2025 •

edited

Loading

Aiden-Brine Feb 22, 2025 •

edited

Loading

Aiden-Brine Feb 24, 2025 •

edited

Loading