@indietabletop/appkit 6.1.6 → 7.0.0-0

package/lib/account/VerifyPage.tsx

@@ -1,195 +0,0 @@
-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/style.css.ts

@@ -1,57 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { Hover, MinWidth } from "../media.ts";
-
-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/lib/account/useFetchCurrentUser.tsx

@@ -1,63 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,35 +0,0 @@
-/**
- * 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);
-}

package/lib/async-op.ts

@@ -1,286 +0,0 @@
-type Falsy = null | undefined | false | 0 | 0n | "";
-
-type Truthy<T> = Exclude<T, Falsy>;
-
-interface Operation<SuccessValue, FailureValue> {
-  readonly type: "SUCCESS" | "FAILURE" | "PENDING";
-  readonly isPending: boolean;
-  readonly isSuccess: boolean;
-  readonly isFailure: boolean;
-
-  val: SuccessValue | FailureValue | null;
-
-  valueOrNull(): SuccessValue | null;
-  valueOrThrow(): SuccessValue;
-  hasTruthyValue(): boolean;
-  failureValueOrNull(): FailureValue | null;
-  failureValueOrThrow(): FailureValue;
-
-  flatMap<T extends AsyncOp<unknown, unknown>>(
-    mappingFn: (value: SuccessValue) => T,
-  ): T | Failure<FailureValue> | Pending;
-
-  mapSuccess<MappedSuccess>(
-    mappingFn: (value: SuccessValue) => MappedSuccess,
-  ): Operation<MappedSuccess, FailureValue>;
-
-  mapFailure<MappedFailure>(
-    mappingFn: (value: FailureValue) => MappedFailure,
-  ): Operation<SuccessValue, MappedFailure>;
-
-  unpack<S, F, P>(
-    mapS: (value: SuccessValue) => S,
-    mapF: (failure: FailureValue) => F,
-    mapP: () => P,
-  ): S | F | P;
-
-  toJSON(): object;
-}
-
-export class Pending implements Operation<never, never> {
-  readonly type = "PENDING" as const;
-  readonly isPending = true as const;
-  readonly isSuccess = false as const;
-  readonly isFailure = false as const;
-
-  val = null;
-
-  valueOrNull(): null {
-    return null;
-  }
-
-  valueOrThrow(): never {
-    throw new Error(
-      `AsyncOp value was accessed but the op is in Pending state.`,
-      { cause: this },
-    );
-  }
-
-  hasTruthyValue(): false {
-    return false;
-  }
-
-  failureValueOrNull(): null {
-    return null;
-  }
-
-  failureValueOrThrow(): never {
-    throw new Error(
-      `AsyncOp failure value was accessed but the op is in Pending state.`,
-      { cause: this },
-    );
-  }
-
-  flatMap() {
-    return new Pending();
-  }
-
-  mapSuccess() {
-    return new Pending();
-  }
-
-  mapFailure() {
-    return new Pending();
-  }
-
-  unpack<S, F, P>(
-    _mapS: (value: never) => S,
-    _mapF: (failure: never) => F,
-    mapP: () => P,
-  ): S | F | P {
-    return mapP();
-  }
-
-  toJSON() {
-    return { type: this.type };
-  }
-}
-
-export class Success<SuccessValue> implements Operation<SuccessValue, never> {
-  readonly type = "SUCCESS" as const;
-  readonly isPending = false as const;
-  readonly isSuccess = true as const;
-  readonly isFailure = false as const;
-  readonly value: SuccessValue;
-  readonly val: SuccessValue;
-
-  constructor(value: SuccessValue) {
-    this.value = value;
-    this.val = value;
-  }
-
-  valueOrNull(): SuccessValue {
-    return this.value;
-  }
-
-  valueOrThrow(): SuccessValue {
-    return this.value;
-  }
-
-  hasTruthyValue(): this is Success<Truthy<SuccessValue>> {
-    return !!this.value;
-  }
-
-  failureValueOrNull(): null {
-    return null;
-  }
-
-  failureValueOrThrow(): never {
-    throw new Error(
-      `AsyncOp failure value was accessed but the op is in Success state.`,
-      { cause: this },
-    );
-  }
-
-  flatMap<T extends AsyncOp<unknown, unknown>>(
-    mappingFn: (value: SuccessValue) => T,
-  ) {
-    return mappingFn(this.value);
-  }
-
-  mapSuccess<MappedValue>(mappingFn: (value: SuccessValue) => MappedValue) {
-    return new Success(mappingFn(this.value));
-  }
-
-  mapFailure() {
-    return new Success(this.value);
-  }
-
-  unpack<S, F, P>(
-    mapS: (value: SuccessValue) => S,
-    _mapF: (failure: never) => F,
-    _mapP: () => P,
-  ): S | F | P {
-    return mapS(this.value);
-  }
-
-  toJSON() {
-    return {
-      type: this.type,
-      value: this.value,
-    };
-  }
-}
-
-export class Failure<FailureValue> implements Operation<never, FailureValue> {
-  readonly type = "FAILURE" as const;
-  readonly isPending = false as const;
-  readonly isSuccess = false as const;
-  readonly isFailure = true as const;
-  readonly failure: FailureValue;
-  readonly val: FailureValue;
-
-  constructor(failure: FailureValue) {
-    this.failure = failure;
-    this.val = failure;
-  }
-
-  valueOrNull(): null {
-    return null;
-  }
-
-  valueOrThrow(): never {
-    throw new Error(
-      `AsyncOp value was accessed but the op is in Failure state.`,
-      { cause: this },
-    );
-  }
-
-  hasTruthyValue(): false {
-    return false;
-  }
-
-  failureValueOrNull(): FailureValue {
-    return this.failure;
-  }
-
-  failureValueOrThrow(): FailureValue {
-    return this.failure;
-  }
-
-  flatMap() {
-    return new Failure(this.failure);
-  }
-
-  mapSuccess() {
-    return new Failure(this.failure);
-  }
-
-  mapFailure<MappedFailure>(mappingFn: (value: FailureValue) => MappedFailure) {
-    return new Failure(mappingFn(this.failure));
-  }
-
-  unpack<S, F, P>(
-    _mapS: (value: never) => S,
-    mapF: (failure: FailureValue) => F,
-    _mapP: () => P,
-  ): S | F | P {
-    return mapF(this.failure);
-  }
-
-  toJSON() {
-    return {
-      type: this.type,
-      failure: this.failure,
-    };
-  }
-}
-
-/**
- * Folds multiple ops into a single op.
- *
- * To return a Success, all ops provided must be a Success. If any Failures are
- * encountered, will return the first one found.
- *
- * If neither of these conditions is true, will return Pending.
- *
- * Note that if passed an empty array, will always return a Success (with an
- * empty array as value). This mimics the semantics of many JS constructs, like
- * Promise.all or Array.prototype.every.
- */
-export function fold<Ops extends readonly AsyncOp<unknown, unknown>[] | []>(
-  ops: Ops,
-): AsyncOp<
-  {
-    -readonly [Index in keyof Ops]: Ops[Index] extends AsyncOp<infer S, unknown>
-      ? S
-      : never;
-  },
-  Ops[number] extends AsyncOp<unknown, infer F> ? F : never
-> {
-  // Note that due to the semantics of `every`, if the array provided to `fold`
-  // is empty, the result will be a Success with an empty array.
-  if (ops.every((v) => v.isSuccess)) {
-    return new Success(
-      (ops as Success<unknown>[]).map((op) => op.value),
-    ) as never;
-  }
-
-  const firstFail = ops.find((op) => op.isFailure);
-  if (firstFail) {
-    return firstFail as never;
-  }
-
-  return new Pending() as never;
-}
-
-export function isAsyncOp(value: unknown): value is AsyncOp<unknown, unknown> {
-  return (
-    value instanceof Pending ||
-    value instanceof Success ||
-    value instanceof Failure
-  );
-}
-
-export type AsyncOp<SuccessValue, FailureValue> =
-  | Pending
-  | Success<SuccessValue>
-  | Failure<FailureValue>;
-
-export function fromTryCatch<T>(callback: () => T) {
-  try {
-    return new Success(callback());
-  } catch (cause) {
-    return new Failure(cause);
-  }
-}

package/lib/atomic.css.ts

@@ -1,11 +0,0 @@
-import { createSprinkles, defineProperties } from "@vanilla-extract/sprinkles";
-
-const atomic = defineProperties({
-  properties: {
-    textAlign: ["start", "center", "end"],
-  },
-});
-
-export const textVariants = createSprinkles(atomic);
-
-export type TextVariants = Parameters<typeof textVariants>[0];