@indietabletop/appkit 7.0.0 → 7.2.0-rc.0

package/lib/AuthCard/AuthCard.tsx

@@ -6,19 +6,25 @@ import { IndieTabletopClubLogo } from "../IndieTabletopClubLogo.tsx";
 import { LetterheadParagraph } from "../Letterhead/index.tsx";
 import { button } from "../Letterhead/style.css.ts";
 import { MiddotSeparated } from "../MiddotSeparated/MiddotSeparated.tsx";
+import { useAppActions, useCurrentUser } from "../store/index.tsx";
 import type { CurrentUser } from "../types.ts";
 import { card } from "./style.css.ts";
 
 /**
- * Small, ITC-branded card that shows authentication status.
- *
- * Primarily intended to be used within the sidenav.
+ * @deprecated Use {@link AuthCardV2}
  */
 export function AuthCard(props: {
   onLogout: () => void;
   currentUser: CurrentUser | null;
+  description?: string;
 }) {
-  const { currentUser, onLogout } = props;
+  const {
+    currentUser,
+    onLogout,
+
+    // Remove this default once AuthCard v1 is migrated away.
+    description = "Enable backup & sync, access your pledge data, and more!",
+  } = props;
   const { hrefs } = useAppConfig();
   const align = !currentUser ? "center" : "start";
 
@@ -26,7 +32,7 @@ export function AuthCard(props: {
     <div className={card.container({ align })}>
       <IndieTabletopClubLogo className={card.logo({ align })} />
 
-      {currentUser ? (
+      {currentUser ?
         <>
           <LetterheadParagraph>{currentUser.email}</LetterheadParagraph>
 
@@ -40,11 +46,8 @@ export function AuthCard(props: {
             </Button>
           </MiddotSeparated>
         </>
-      ) : (
-        <>
-          <LetterheadParagraph size="small">
-            Enable backup & sync, access your pledge data, and more!
-          </LetterheadParagraph>
+      : <>
+          <LetterheadParagraph size="small">{description}</LetterheadParagraph>
 
           <Link href={hrefs.join()} className={button()}>
             Join
@@ -58,7 +61,28 @@ export function AuthCard(props: {
             {"."}
           </LetterheadParagraph>
         </>
-      )}
+      }
     </div>
   );
 }
+
+export type AuthCardProps = {
+  /**
+   * A short description that explains why users should log in or join.
+   *
+   * @example
+   * "Enable backup & sync, access your pledge data, and more!"
+   */
+  description: string;
+};
+
+/**
+ * Small, ITC-branded card that shows authentication status.
+ *
+ * Primarily intended to be used within the sidenav.
+ */
+export function AuthCardV2(props: AuthCardProps) {
+  const currentUser = useCurrentUser();
+  const { logout } = useAppActions();
+  return <AuthCard {...props} currentUser={currentUser} onLogout={logout} />;
+}

package/lib/ShareButton/ShareButton.tsx

@@ -2,7 +2,10 @@ import { Button, type ButtonProps } from "@ariakit/react";
 import { useState, type ReactNode } from "react";
 import { useRevertingState } from "../use-reverting-state.ts";
 
-type AriakitButtonProps = Omit<ButtonProps, "children" | "onClick" | "value">;
+type AriakitButtonProps = Omit<
+  ButtonProps,
+  "children" | "onClick" | "value" | "type"
+>;
 
 export type CopyToClipboardButtonProps = AriakitButtonProps & {
   value: string | null;
@@ -20,6 +23,7 @@ export function CopyToClipboardButton(props: CopyToClipboardButtonProps) {
     <Button
       {...buttonProps}
       disabled={disabled || !value}
+      type="button"
       onClick={async () => {
         if (value) {
           await navigator.clipboard.writeText(value);
@@ -54,6 +58,7 @@ export function WebShareButton(props: WebShareButtonProps) {
     <Button
       {...buttonProps}
       disabled={disabled || !shareData || sharing}
+      type="button"
       onClick={async () => {
         if (shareData) {
           try {

package/lib/store/store.ts

@@ -1,4 +1,4 @@
-import { number } from "superstruct";
+import { nullable, number, object } from "superstruct";
 import {
   and,
   assertEvent,
@@ -28,10 +28,17 @@ const safeStorage = createSafeStorage({
   lastSuccessfulSyncTs: number(),
 });
 
-function createInMemoryContext(): Omit<
-  MachineContext,
-  SafeStorageKey<typeof safeStorage>
-> {
+const legacyStorage = createSafeStorage({
+  store: object({
+    currentUser: nullable(currentUser()),
+    sessionInfo: nullable(sessionInfo()),
+    lastSuccessfulSyncTs: nullable(number()),
+  }),
+});
+
+type MemoryContext = Omit<MachineContext, SafeStorageKey<typeof safeStorage>>;
+
+function createInMemoryContext(): MemoryContext {
   return {
     currentSync: null,
     pushOnceIdle: false,
@@ -39,12 +46,33 @@ function createInMemoryContext(): Omit<
   };
 }
 
+type PersistedContext = Pick<
+  MachineContext,
+  SafeStorageKey<typeof safeStorage>
+>;
+
+function getPersistedContext(): PersistedContext {
+  // Legacy store was used in the Hobgoblin app.
+  const legacyStore = legacyStorage.getItem("store");
+
+  // If legacy store existed in localStorage, we make sure to clean it up.
+  if (legacyStore) {
+    legacyStorage.clear();
+  }
+
+  return {
+    currentUser: legacyStore?.currentUser ?? safeStorage.getItem("currentUser"),
+    sessionInfo: legacyStore?.sessionInfo ?? safeStorage.getItem("sessionInfo"),
+    lastSuccessfulSyncTs:
+      legacyStore?.lastSuccessfulSyncTs ??
+      safeStorage.getItem("lastSuccessfulSyncTs"),
+  };
+}
+
 function createInitialContext(): MachineContext {
   return {
     ...createInMemoryContext(),
-    currentUser: safeStorage.getItem("currentUser"),
-    sessionInfo: safeStorage.getItem("sessionInfo"),
-    lastSuccessfulSyncTs: safeStorage.getItem("lastSuccessfulSyncTs"),
+    ...getPersistedContext(),
   };
 }
 

package/package.json

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