@indietabletop/appkit 7.0.0-0 → 7.0.0-rc.0

package/lib/account/VerifyPage.tsx

@@ -0,0 +1,195 @@
+import { Button, Form } from "@ariakit/react";
+import { useState, type Dispatch, type SetStateAction } from "react";
+import { Link } from "wouter";
+import { useAppConfig, useClient } from "../AppConfig/AppConfig.tsx";
+import { interactiveText } from "../common.css.ts";
+import { getSubmitFailureMessage } from "../failureMessages.ts";
+import {
+  Letterhead,
+  LetterheadHeading,
+  LetterheadParagraph,
+  LetterheadSubmitButton,
+} from "../Letterhead/index.tsx";
+import { button } from "../Letterhead/style.css.ts";
+import {
+  LetterheadFormActions,
+  LetterheadHeader,
+  LetterheadSubmitError,
+  LetterheadTextField,
+} from "../LetterheadForm/index.tsx";
+import { useAppActions } from "../store/index.tsx";
+import type { CurrentUser } from "../types.ts";
+import { useForm } from "../use-form.ts";
+import type { AuthEventHandler } from "./types.ts";
+
+type SetStep = Dispatch<SetStateAction<VerifyStep>>;
+
+function InitialStep(props: {
+  setStep: SetStep;
+  currentUser: CurrentUser;
+  reload: () => void;
+}) {
+  const { setStep, currentUser, reload } = props;
+  const { email } = currentUser;
+  const { logout } = useAppActions();
+
+  const client = useClient();
+  const { form, submitName } = useForm({
+    defaultValues: {},
+    async onSubmit() {
+      const op = await client.requestUserVerification();
+      return op.mapFailure(getSubmitFailureMessage);
+    },
+    onSuccess(value) {
+      setStep({ type: "SUBMIT_CODE", tokenId: value.tokenId });
+    },
+  });
+
+  return (
+    <Form store={form}>
+      <Letterhead>
+        <LetterheadHeader>
+          <LetterheadHeading>Verify account</LetterheadHeading>
+          <LetterheadParagraph>
+            Your account is currently not verified. We will send a one-time code
+            to your email ({email}) to complete the verification.
+          </LetterheadParagraph>
+        </LetterheadHeader>
+
+        <LetterheadFormActions>
+          <LetterheadSubmitError name={submitName} />
+          <LetterheadSubmitButton>Send code</LetterheadSubmitButton>
+          <LetterheadParagraph>
+            Cannot complete verification?{" "}
+            <Button
+              className={interactiveText}
+              onClick={async () => {
+                await logout();
+                reload();
+              }}
+            >
+              Log out
+            </Button>
+            .
+          </LetterheadParagraph>
+        </LetterheadFormActions>
+      </Letterhead>
+    </Form>
+  );
+}
+
+function SubmitCodeStep(props: {
+  tokenId: string;
+  setStep: SetStep;
+  currentUser: CurrentUser;
+}) {
+  const client = useClient();
+  const { email } = props.currentUser;
+  const { form, submitName } = useForm({
+    defaultValues: {
+      code: "",
+    },
+    async onSubmit({ values }) {
+      const op = await client.verifyUser({
+        ...values,
+        tokenId: props.tokenId,
+      });
+
+      return op.mapFailure((failure) => {
+        return getSubmitFailureMessage(failure, {
+          404: "🚫 This code is incorrect or expired. Please try again.",
+        });
+      });
+    },
+    onSuccess() {
+      props.setStep({ type: "SUCCESS" });
+    },
+  });
+
+  return (
+    <Form store={form}>
+      <Letterhead>
+        <LetterheadHeader>
+          <LetterheadHeading>Verify Account</LetterheadHeading>
+          <LetterheadParagraph>
+            We've sent a one-time code to {email}. Please, enter the code in the
+            field below to complete verification.
+          </LetterheadParagraph>
+        </LetterheadHeader>
+
+        <LetterheadTextField
+          name={form.names.code}
+          label="Code"
+          placeholder="E.g. 123123"
+          autoComplete="one-time-code"
+          required
+        />
+
+        <LetterheadFormActions>
+          <LetterheadSubmitError name={submitName} />
+          <LetterheadSubmitButton>Verify</LetterheadSubmitButton>
+        </LetterheadFormActions>
+      </Letterhead>
+    </Form>
+  );
+}
+
+function SuccessStep(props: { onClose?: AuthEventHandler }) {
+  const { onClose } = props;
+  const { hrefs } = useAppConfig();
+
+  return (
+    <Letterhead>
+      <LetterheadHeader>
+        <LetterheadHeading>Success!</LetterheadHeading>
+        <LetterheadParagraph>
+          Your Indie Tabletop Club account has been verified. Yay!
+        </LetterheadParagraph>
+      </LetterheadHeader>
+
+      {onClose ? (
+        <Button onClick={() => onClose()} className={button()}>
+          Done
+        </Button>
+      ) : (
+        <Link href={hrefs.dashboard()} className={button()}>
+          Go to dashboard
+        </Link>
+      )}
+    </Letterhead>
+  );
+}
+
+type VerifyStep =
+  | { type: "INITIAL" }
+  | { type: "SUBMIT_CODE"; tokenId: string }
+  | { type: "SUCCESS" };
+
+export function VerifyAccountView(props: {
+  currentUser: CurrentUser;
+  reload: () => void;
+
+  /**
+   * If provided, will cause the success step to render a close dialog button
+   * instead of "Go to Dashboard" button.
+   *
+   * This is useful if this view is used within a modal dialog context.
+   */
+  onClose?: AuthEventHandler;
+}) {
+  const [step, setStep] = useState<VerifyStep>({ type: "INITIAL" });
+
+  switch (step.type) {
+    case "INITIAL": {
+      return <InitialStep {...props} setStep={setStep} />;
+    }
+
+    case "SUBMIT_CODE": {
+      return <SubmitCodeStep {...props} {...step} setStep={setStep} />;
+    }
+
+    case "SUCCESS": {
+      return <SuccessStep {...props} />;
+    }
+  }
+}

package/lib/account/iconMask.svg

@@ -0,0 +1,3 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28 0C43.464 0 56 12.536 56 28C56 31.3019 55.4265 34.4697 54.377 37.4111C52.2143 35.3015 49.2598 34 46 34C39.3726 34 34 39.3726 34 46C34 49.2598 35.3015 52.2143 37.4111 54.377C34.4697 55.4265 31.3019 56 28 56C12.536 56 0 43.464 0 28C0 12.536 12.536 0 28 0Z" fill="white"/>
+</svg>

package/lib/account/style.css.ts

@@ -0,0 +1,81 @@
+import { style } from "@vanilla-extract/css";
+import { Hover, MinWidth } from "../media.ts";
+import iconMask from "./iconMask.svg";
+
+export const accountIcon = {
+  container: style({
+    position: "relative",
+    marginInline: "auto",
+
+    inlineSize: "56px",
+    blockSize: "56px",
+  }),
+
+  syncIcon: style({
+    position: "absolute",
+    right: "0",
+    bottom: "0",
+  }),
+
+  image: style({
+    mask: `url("${iconMask}") no-repeat`,
+    inlineSize: "100%",
+    blockSize: "100%",
+    borderRadius: "50%",
+  }),
+};
+
+export const page = style({
+  backgroundColor: "white",
+
+  "@media": {
+    [MinWidth.SMALL]: {
+      backgroundColor: "transparent",
+      padding: "clamp(1rem, 5vw, 5rem)",
+    },
+  },
+});
+
+export const accountPicker = {
+  container: style({
+    backgroundColor: "#fafafa",
+    borderRadius: "0.5rem",
+  }),
+
+  button: style({
+    padding: "1rem 1.5rem",
+    textAlign: "start",
+    inlineSize: "100%",
+    borderRadius: "inherit",
+
+    "@media": {
+      [Hover.HOVER]: {
+        transition: "200ms background-color",
+
+        ":hover": {
+          backgroundColor: "hsl(from #fafafa h s calc(l - 3))",
+        },
+      },
+    },
+  }),
+
+  buttonLabel: style({
+    fontWeight: 600,
+    fontSize: "1.125rem",
+  }),
+
+  divider: style({
+    marginInline: "1.5rem",
+    backgroundColor: "#e2e2e2",
+    blockSize: "1px",
+  }),
+};
+
+export const loadingView = {
+  container: style({
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    height: "12rem",
+  }),
+};

package/{dist/account/types.d.ts → lib/account/types.ts}

@@ -1,8 +1,11 @@
-import { CurrentUser } from '../types.ts';
+import type { CurrentUser } from "../types.ts";
+
 export type AuthEventHandler = () => Promise<void> | void;
+
 export type ClientLogoutHandler = (options: {
-    serverUser: CurrentUser;
+  serverUser: CurrentUser;
 }) => Promise<void> | void;
+
 export type DefaultFormValues = {
-    email?: string;
+  email?: string;
 };

package/lib/account/useFetchCurrentUser.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useState } from "react";
+import { useClient } from "../AppConfig/AppConfig.tsx";
+import { type Failure, Pending, type Success } from "../async-op.ts";
+import type { CurrentUser, FailurePayload } from "../types.ts";
+
+export function useFetchCurrentUser(options?: {
+  /**
+   * Optionally disable immediate fetch action.
+   *
+   * @default true
+   */
+  performFetch?: boolean;
+
+  /**
+   * Fetch new data every time the window is focused.
+   *
+   * Note that `performFetch` has to be enabled for this option to have an
+   * effect — we are not revalidating when there is no fetch to do!
+   *
+   * @default false
+   */
+  revalidateOnFocus?: boolean;
+}) {
+  const { performFetch = true, revalidateOnFocus = false } = options ?? {};
+  const client = useClient();
+  const [latestAttemptTs, setLatestAttemptTs] = useState(Date.now());
+
+  const [result, setResult] = useState<
+    Success<CurrentUser> | Failure<FailurePayload> | Pending
+  >(new Pending());
+
+  // We are intentionally not using SWR in this case, as we don't want to deal
+  // with caching or any of that business.
+  useEffect(() => {
+    if (performFetch) {
+      const fetchUserAndStoreResult = async () => {
+        const result = await client.getCurrentUser();
+        setResult(result);
+      };
+
+      // Invoke the fetch action
+      fetchUserAndStoreResult();
+
+      if (revalidateOnFocus) {
+        const controller = new AbortController();
+        window.addEventListener("focus", fetchUserAndStoreResult, controller);
+
+        return () => {
+          controller.abort();
+        };
+      }
+    }
+  }, [client, latestAttemptTs, performFetch]);
+
+  return {
+    result,
+    latestAttemptTs,
+    reload: () => {
+      setResult(new Pending());
+      setLatestAttemptTs(Date.now());
+    },
+  };
+}

package/lib/account/useRedirectPath.ts

@@ -0,0 +1,21 @@
+import { useSearchParams } from "wouter";
+
+function isValidRedirect(value: string | null | undefined): value is string {
+  return !!(value && /^[~/]/.test(value));
+}
+
+/**
+ * Gets redirect path from query params and validates it.
+ *
+ * Returns `null` if no path is found, or it is invalid.
+ */
+export function useRedirectPath() {
+  const [params] = useSearchParams();
+  const redirectTo = params.get("redirectTo");
+
+  if (isValidRedirect(redirectTo)) {
+    return redirectTo;
+  }
+
+  return null;
+}

package/lib/animations.css.ts

@@ -0,0 +1,17 @@
+import { keyframes } from "@vanilla-extract/css";
+
+export const fadeIn = keyframes({
+  from: { opacity: 0 },
+  to: { opacity: 1 },
+});
+
+export const slideUp = keyframes({
+  from: { transform: `translateY(100%)` },
+  to: { transform: `translateY(0)` },
+});
+
+export const bounce = keyframes({
+  "0%": { transform: "translateY(0)" },
+  "20%": { transform: "translateY(-20%)" },
+  "50%": { transform: "translateY(0)" },
+});

package/lib/append-copy-to-text.ts

@@ -0,0 +1,35 @@
+/**
+ * Appends " (Copy)" to the end of the input string if it doesn't already end
+ * with " (Copy)", otherwise it appends a number after "Copy", incrementing it
+ * if necessary.
+ */
+export function appendCopyToText(input: string): string {
+  const regex = /^(?<value>.*) \(Copy(?: (?<count>\d+))?\)$/;
+  const match = input.match(regex);
+
+  // If there isn't a match, we directly append to the input.
+  if (!match) {
+    return `${input.trim()} (Copy)`;
+  }
+
+  const { value, count } = match.groups ?? {};
+
+  // If `count` capturing group is not present, it means that the input ends
+  // with the copy suffix, but it doesn't contain count.
+  const nextCount = !count ? 2 : parseInt(count, 10) + 1;
+
+  return `${value?.trim()} (Copy ${nextCount})`;
+}
+
+/**
+ * Works like {@link appendCopyToText}, but ignores empty strings.
+ */
+export function maybeAppendCopyToText(input: string) {
+  // If input is falsy (i.e. empty string) then we don't want to append
+  // anything to it.
+  if (!input) {
+    return "";
+  }
+
+  return appendCopyToText(input);
+}