@indietabletop/appkit 6.0.0 → 6.1.0

package/lib/SafariCheck/SafariCheck.stories.tsx

@@ -5,7 +5,7 @@ import { SafariCheck } from "./SafariCheck.tsx";
 
 function Content() {
   return (
-    <>
+    <div>
       <h1>Safari Check passed</h1>
       <button
         onClick={() => {
@@ -15,14 +15,31 @@ function Content() {
       >
         Clear local storage
       </button>
-    </>
+    </div>
   );
 }
 
+function userAgentResponse(params: { browserName: string }) {
+  return http.get("http://mock.api/ua", async () => {
+    await sleep(1500);
+    return HttpResponse.json({
+      browser: { name: params.browserName },
+      device: params.browserName.includes("Mobile") ? { type: "mobile" } : {},
+    });
+  });
+}
+
 const meta = preview.meta({
   title: "Components/SafariCheck",
   component: SafariCheck,
   tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div style={{ height: "100svh", display: "grid" }}>
+        <Story />
+      </div>
+    ),
+  ],
   parameters: {
     msw: {
       handlers: {
@@ -32,9 +49,6 @@ const meta = preview.meta({
   },
 });
 
-/**
- * The default case in which all steps of the flow succeed.
- */
 export const SafariDesktop = meta.story({
   args: {
     children: <Content />,
@@ -48,9 +62,6 @@ export const SafariDesktop = meta.story({
   },
 });
 
-/**
- * The default case in which all steps of the flow succeed.
- */
 export const SafariMobile = meta.story({
   args: {
     children: <Content />,
@@ -64,9 +75,6 @@ export const SafariMobile = meta.story({
   },
 });
 
-/**
- * The default case in which all steps of the flow succeed.
- */
 export const OtherBrowser = meta.story({
   args: {
     children: <Content />,
@@ -80,12 +88,12 @@ export const OtherBrowser = meta.story({
   },
 });
 
-function userAgentResponse(params: { browserName: string }) {
-  return http.get("http://mock.api/ua", async () => {
-    await sleep(1500);
-    return HttpResponse.json({
-      browser: { name: params.browserName },
-      device: params.browserName.includes("Mobile") ? { type: "mobile" } : {},
-    });
-  });
-}
+/**
+ * The check behaviour has been disabled.
+ */
+export const Disabled = meta.story({
+  args: {
+    children: <Content />,
+    performCheck: false,
+  },
+});

package/lib/SafariCheck/SafariCheck.tsx

@@ -2,6 +2,7 @@ import { Button, DialogDisclosure, DialogDismiss } from "@ariakit/react";
 import { useCallback, useMemo, useState, type ReactNode } from "react";
 import { number } from "superstruct";
 import useImmutableSWR from "swr/immutable";
+import { Link } from "wouter";
 import { useAppConfig, useClient } from "../AppConfig/AppConfig.tsx";
 import { Failure, Pending, Success } from "../async-op.ts";
 import { interactiveText } from "../common.css.ts";
@@ -16,6 +17,7 @@ import { button } from "../Letterhead/style.css.ts";
 import { LoadingIndicator } from "../LoadingIndicator.tsx";
 import { ModalDialog } from "../ModalDialog/index.tsx";
 import { swrResponseToResult } from "../result/swr.ts";
+import { useCurrentUser } from "../store/index.tsx";
 import type { FailurePayload } from "../types.ts";
 import { useIsInstalled } from "../use-is-installed.ts";
 import addToDockUrl from "./addToDock.svg";
@@ -133,9 +135,9 @@ function SafariPrompt(props: { onDismiss: () => void; isMobile?: boolean }) {
           <DialogDisclosure className={button()}>Install App</DialogDisclosure>
         </DialogTrigger>
 
-        <a className={button()} href={hrefs.join()}>
+        <Link className={button()} href={hrefs.join()}>
           Create Account
-        </a>
+        </Link>
       </div>
 
       <div className={css.safariDismissArea}>
@@ -145,6 +147,7 @@ function SafariPrompt(props: { onDismiss: () => void; isMobile?: boolean }) {
           </Button>
         </LetterheadParagraph>
       </div>
+
       <LetterheadFooter />
     </div>
   );
@@ -184,23 +187,19 @@ type SafariCheckResult =
   | Failure<FailurePayload>
   | Pending;
 
-function useSafariCheck() {
+function useSafariCheck({ performCheck }: { performCheck: boolean }) {
+  const currentUser = useCurrentUser();
   const isInstalled = useIsInstalled();
   const { dismissedAt, setDismissed } = useInstallPromptState();
   const installedOrDismissed = isInstalled || !!dismissedAt;
-  const userAgentResult = useUserAgent({ performFetch: !installedOrDismissed });
-
-  console.log({
-    isInstalled,
-    dismissedAt,
-    installedOrDismissed,
-    userAgentResult,
+  const userAgentResult = useUserAgent({
+    performFetch: performCheck && !currentUser && !installedOrDismissed,
   });
 
   const result = useMemo((): SafariCheckResult => {
-    return installedOrDismissed
-      ? // If the safari prompt was previously dismissed, or the app is already
-        // installed, we skipt the prompt entirely.
+    return installedOrDismissed || !performCheck
+      ? // If the safari prompt was previously dismissed, the app is already
+        // installed, or check was disabled explicitly, we skip the prompt.
         new Success({ showPrompt: false })
       : // Otherwise, we want to check whether the name includes Safari (could be
         // Safari or Safari Mobile), and we also report whether this is a mobile
@@ -211,22 +210,48 @@ function useSafariCheck() {
             isMobile: value.device?.type === "mobile",
           };
         });
-  }, [installedOrDismissed, userAgentResult]);
+  }, [installedOrDismissed, userAgentResult, performCheck]);
 
   return { result, setDismissed };
 }
 
-export function SafariCheck(props: { children: ReactNode }) {
-  const { result, setDismissed } = useSafariCheck();
+/**
+ * Checks whether the browser which is running the app is Safari/Safari Mobile
+ * and warns the user that their data might be deleted due to inactivity.
+ *
+ * The warning will be shown if:
+ *
+ * - The check has not been explicitly disabled via `performCheck: false`
+ * - The warning has not been previously dismissed (as reported by localStorage)
+ * - The app is not installed (Safari behaves differently in that case)
+ * - The user is not already logged in (as data will be safely backed up that way)
+ */
+export function SafariCheck(props: {
+  children: ReactNode;
+
+  /**
+   * Optionally opt out of the check.
+   *
+   * This can be useful in cases where, e.g. the user already has some content
+   * in the app and we want to avoid checking the user agent, but it is
+   * impractical to entirely avoid rendering this component.
+   */
+  performCheck?: boolean;
+}) {
+  const { result, setDismissed } = useSafariCheck({
+    performCheck: props.performCheck ?? true,
+  });
 
   if (result.isPending) {
     return (
-      <div className={css.compatCheckLoaderContainer}>
-        <LoadingIndicator className={css.indicator} />
+      <div className={css.container}>
+        <div className={css.compatCheckLoaderContainer}>
+          <LoadingIndicator className={css.indicator} />
 
-        {/* Intentionally not using Letterhead Paragraph to pick up the default
+          {/* Intentionally not using Letterhead Paragraph to pick up the default
             font size and style. */}
-        <p className={css.compatCheckLoaderText}>Checking compatibility...</p>
+          <p className={css.compatCheckLoaderText}>Checking compatibility...</p>
+        </div>
       </div>
     );
   }
@@ -236,7 +261,11 @@ export function SafariCheck(props: { children: ReactNode }) {
   // keep rolling as if the showPrompt was false.
   const value = result.valueOrNull();
   if (value?.showPrompt) {
-    return <SafariPrompt onDismiss={setDismissed} isMobile={value.isMobile} />;
+    return (
+      <div className={css.container}>
+        <SafariPrompt onDismiss={setDismissed} isMobile={value.isMobile} />
+      </div>
+    );
   }
 
   // We're all good, render children.

package/lib/SafariCheck/style.css.ts

@@ -1,22 +1,12 @@
-import { createContainer, style } from "@vanilla-extract/css";
+import { style } from "@vanilla-extract/css";
 import { fadeIn } from "../animations.css.ts";
-import { MinWidth } from "../media.ts";
 
-const promptContainerName = createContainer();
-
-export const safariPromptContainer = style({
+export const container = style({
   display: "flex",
-  justifyContent: "center",
-  alignItems: "start",
-  container: `${promptContainerName} / inline-size`,
-  padding: "1rem",
+  alignItems: "center",
+  justifyItems: "center",
+  flexDirection: "column",
   blockSize: "100%",
-
-  "@media": {
-    [MinWidth.MEDIUM]: {
-      alignItems: "center",
-    },
-  },
 });
 
 export const safariPrompt = style({
@@ -24,6 +14,7 @@ export const safariPrompt = style({
   borderRadius: "1rem",
   maxWidth: "38rem",
   padding: "clamp(1rem, 5vw, 3rem)",
+  margin: "auto",
 });
 
 export const safariLogo = style({
@@ -51,7 +42,9 @@ export const safariDismissArea = style({
 
 export const compatCheckLoaderContainer = style({
   maxInlineSize: "16rem",
+  margin: "auto",
 });
+
 export const indicator = style({
   marginInline: "auto",
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indietabletop/appkit",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "description": "A collection of modules used in apps built by Indie Tabletop Club",
   "private": false,
   "type": "module",