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

package/lib/AppConfig/formatters.tsx

@@ -15,6 +15,8 @@ export function createFormatters(locale: EnglishLocale) {
 
   const dateTimeFmt = new Intl.DateTimeFormat(locale);
 
+  const dateFmt = new Intl.DateTimeFormat(locale, { dateStyle: "long" });
+
   const conjunctionFmt = new Intl.ListFormat(locale, {
     style: "long",
     type: "conjunction",
@@ -33,6 +35,9 @@ export function createFormatters(locale: EnglishLocale) {
     dateTime(date: Date | string | number) {
       return dateTimeFmt.format(new Date(date));
     },
+    date(date: Date | string | number) {
+      return dateFmt.format(new Date(date));
+    },
     conjunction(items: string[]) {
       return conjunctionFmt.format(items);
     },

package/lib/ListView/ListView.stories.tsx

@@ -0,0 +1,36 @@
+import preview from "../../.storybook/preview.tsx";
+import { ListItem, ListView } from "./ListView.tsx";
+
+const meta = preview.meta({
+  title: "Components/ListView",
+  component: ListView,
+});
+
+export const Default = meta.story({
+  args: {
+    children: (
+      <>
+        <ListItem heading="Item 1" summary="Summary for item 1" />
+        <ListItem heading="Item 2" summary="Summary for item 2" type="Type" />
+        <ListItem
+          heading="Item 2"
+          summary="Summary for item 2"
+          type="Type"
+          aside={
+            <svg width="40" height="40" viewBox="0 0 40 40">
+              <rect width="40" height="40" fill="rebeccapurple" />
+              <circle cx="20" cy="20" r="10" fill="white" />
+            </svg>
+          }
+        />
+      </>
+    ),
+    fallback: "Empty",
+  },
+});
+
+export const Empty = meta.story({
+  args: {
+    fallback: "This list is empty",
+  },
+});

package/lib/ListView/ListView.tsx

@@ -0,0 +1,80 @@
+import { type ReactElement, type ReactNode, cloneElement } from "react";
+import { cx } from "../class-names.ts";
+import { MiddotSeparated } from "../MiddotSeparated/MiddotSeparated.tsx";
+import { item, list } from "./style.css.ts";
+
+export { listViewTheme } from "./style.css.ts";
+
+export function ListItemContainer(props: {
+  children?: ReactNode;
+  className?: string;
+}) {
+  return <li {...cx(props, item.container)}>{props.children}</li>;
+}
+
+export function ListItemContent(props: {
+  children?: ReactNode;
+  render?: ReactElement;
+  className?: string;
+}) {
+  const element = props.render ?? <div />;
+  return cloneElement(element, cx(props, item.content), props.children);
+}
+
+export function ListItemHeading(props: {
+  children?: ReactNode;
+  className?: string;
+}) {
+  return <div {...cx(props, item.heading)}>{props.children}</div>;
+}
+
+export function ListItemSummary(props: {
+  children?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <MiddotSeparated {...cx(props, item.summary)}>
+      {props.children}
+    </MiddotSeparated>
+  );
+}
+
+export function ListItem(props: {
+  heading: string;
+  type?: string;
+  summary: ReactNode;
+  render?: ReactElement;
+  aside?: ReactNode;
+}) {
+  const { render, heading, type, summary, aside } = props;
+
+  return (
+    <ListItemContainer>
+      <ListItemContent render={render}>
+        <ListItemHeading>{heading}</ListItemHeading>
+
+        <ListItemSummary>
+          {type && <em>{type}</em>}
+          {summary}
+        </ListItemSummary>
+      </ListItemContent>
+
+      {aside}
+    </ListItemContainer>
+  );
+}
+
+export function ListView(props: {
+  children?: ReactNode;
+  fallback?: ReactNode;
+  className?: string;
+}) {
+  const { children, fallback } = props;
+
+  return (
+    <>
+      <ul {...cx(props, list.container)}>{children}</ul>
+      <div className={list.empty}>{fallback}</div>
+    </>
+  );
+}

package/lib/ListView/style.css.ts

@@ -0,0 +1,90 @@
+import { createThemeContract, fallbackVar, style } from "@vanilla-extract/css";
+import { appkit } from "../layers.css.ts";
+
+export const listViewTheme = createThemeContract({
+  headingFont: null,
+  headingSize: null,
+  summaryFont: null,
+  summarySize: null,
+  blockSpace: null,
+  inlineSpace: null,
+});
+
+export const item = {
+  container: style({
+    "@layer": {
+      [appkit]: {
+        display: "flex",
+        gap: fallbackVar(listViewTheme.inlineSpace, "1rem"),
+      },
+    },
+  }),
+
+  content: style({
+    "@layer": {
+      [appkit]: {
+        flexGrow: 1,
+      },
+    },
+  }),
+
+  heading: style({
+    "@layer": {
+      [appkit]: {
+        fontFamily: listViewTheme.headingFont,
+        fontSize: fallbackVar(listViewTheme.headingSize, "1.25rem"),
+        lineHeight: "1lh",
+      },
+    },
+  }),
+
+  summary: style({
+    "@layer": {
+      [appkit]: {
+        fontFamily: listViewTheme.summaryFont,
+        fontSize: fallbackVar(listViewTheme.summarySize, "1rem"),
+        marginBlockStart: "0.5em",
+        lineHeight: 1.25,
+
+        ":empty": {
+          display: "none",
+        },
+      },
+    },
+  }),
+};
+
+const listContainerHook = style({});
+
+export const list = {
+  container: style([
+    listContainerHook,
+    {
+      "@layer": {
+        [appkit]: {
+          display: "flex",
+          flexDirection: "column",
+          gap: fallbackVar(listViewTheme.blockSpace, "1.5rem"),
+
+          ":empty": {
+            display: "none",
+          },
+        },
+      },
+    },
+  ]),
+
+  empty: style({
+    "@layer": {
+      [appkit]: {
+        display: "none",
+
+        selectors: {
+          [`${listContainerHook}:empty + &`]: {
+            display: "initial",
+          },
+        },
+      },
+    },
+  }),
+};

package/lib/RichText/RichText.tsx

@@ -0,0 +1,55 @@
+import { useLocation } from "wouter";
+import { cx } from "../class-names.ts";
+import type { TrustedHtml } from "../types.ts";
+import { content } from "./style.css.ts";
+
+// export { richTextTheme } from "./style.css.ts";
+
+export function RichText(props: {
+  trustedHtml: TrustedHtml;
+  className?: string;
+}) {
+  const [_, navigate] = useLocation();
+
+  return (
+    <div
+      {...cx(props, content)}
+      dangerouslySetInnerHTML={{ __html: props.trustedHtml }}
+      onClick={(event) => {
+        if (!(event.target instanceof HTMLElement)) {
+          return;
+        }
+
+        const anchor = event.target.closest("a");
+        if (!anchor) {
+          return;
+        }
+
+        // The actual value in the HTML
+        const href = anchor.getAttribute("href");
+        if (!href) {
+          return;
+        }
+
+        if (href.startsWith("#")) {
+          return;
+        }
+
+        if (href.startsWith("/")) {
+          event.preventDefault();
+          event.stopPropagation();
+          navigate(`~${href}`);
+          return;
+        }
+
+        event.preventDefault();
+        event.stopPropagation();
+        const tempLink = document.createElement("a");
+        tempLink.href = anchor.href;
+        tempLink.target = "_blank";
+        tempLink.rel = "noopener noreferrer";
+        tempLink.click();
+      }}
+    />
+  );
+}

package/lib/RichText/style.css.ts

@@ -0,0 +1,147 @@
+import { createThemeContract, globalStyle, style } from "@vanilla-extract/css";
+import { Hover, MinWidth } from "../media.ts";
+
+export const richTextTheme = createThemeContract({
+  headingFont: null,
+  bodyFont: null,
+  emphasisFont: null,
+});
+
+export const content = style({
+  fontFamily: richTextTheme.bodyFont,
+});
+
+globalStyle(`${content} > :last-child`, {
+  marginBlockEnd: "0",
+});
+
+globalStyle(`${content} > :first-child`, {
+  marginBlockStart: "0",
+});
+
+globalStyle(`${content} em`, {
+  fontFamily: richTextTheme.emphasisFont,
+  textTransform: "lowercase",
+});
+
+globalStyle(`${content} :is(h1, h2, h3, h4, h5, h6)`, {
+  fontFamily: richTextTheme.headingFont,
+  lineHeight: 1.25,
+  fontWeight: 600,
+});
+
+globalStyle(`${content} h2`, {
+  fontSize: "1.75rem",
+  marginBlockStart: "1lh",
+  marginBlockEnd: "0.5lh",
+});
+
+globalStyle(`${content} h3`, {
+  fontSize: "1.5rem",
+  marginBlockStart: "1lh",
+  marginBlockEnd: "0.5lh",
+});
+
+globalStyle(`${content} h4`, {
+  fontSize: "1.125rem",
+  marginBlockStart: "1lh",
+  marginBlockEnd: "0.5lh",
+});
+
+globalStyle(`${content} h5`, {
+  fontSize: "1rem",
+  marginBlockStart: "1lh",
+  marginBlockEnd: "0.5lh",
+});
+
+globalStyle(`${content} :is(p, li)`, {
+  fontSize: "1rem",
+  lineHeight: 1.5,
+});
+
+globalStyle(`${content} :is(ul, ol, p)`, {
+  marginBlock: "0.5lh",
+});
+
+globalStyle(`${content} :is(ul, ol)`, {
+  paddingInlineStart: "1.25em",
+});
+
+globalStyle(`${content} ul`, {
+  listStyle: "disc",
+});
+
+globalStyle(`${content} ol`, {
+  listStyle: "decimal",
+});
+
+globalStyle(`${content} hr`, {
+  marginBlock: "2.5lh",
+  borderBlockStart: `1px dashed currentcolor`,
+});
+
+globalStyle(`${content} blockquote`, {
+  marginInlineStart: "0",
+  paddingInlineStart: "1lh",
+  borderInlineStart: `1px dashed currentcolor`,
+});
+
+globalStyle(`${content} a`, {
+  display: "inline",
+  textDecoration: "underline",
+  textDecorationThickness: "1px",
+  textUnderlineOffset: "0.125em",
+  textDecorationColor: "hsl(from currentcolor h s calc(l + 50))",
+  transition: "text-decoration-color 200ms",
+});
+
+globalStyle(`${content} a:hover`, {
+  "@media": {
+    [Hover.HOVER]: {
+      transition: "text-decoration-color 100ms",
+      textDecorationColor: "currentcolor",
+    },
+  },
+});
+
+globalStyle(`${content} img`, {
+  display: "block",
+  maxInlineSize: "100%",
+  marginBlock: "1lh",
+});
+
+globalStyle(`${content} img[src *= "rounded"]`, {
+  borderRadius: "0.25rem",
+});
+
+globalStyle(`${content} img[src*="float"]`, {
+  "@media": {
+    [MinWidth.MEDIUM]: {
+      margin: "0 0 1lh 1lh",
+      float: "inline-end",
+      maxInlineSize: "50%",
+    },
+  },
+});
+
+globalStyle(`${content} img[src*="rotate"]`, {
+  "@media": {
+    [MinWidth.MEDIUM]: {
+      rotate: "3deg",
+    },
+  },
+});
+
+globalStyle(`${content} code`, {
+  wordBreak: "break-word",
+});
+
+globalStyle(`${content} [src $= "?icon"]`, {
+  position: "relative",
+  display: "inline-block",
+  backgroundColor: "white",
+  width: "1.25em",
+  borderRadius: "0.15em",
+  border: "1px solid #e2e2e2",
+  marginBlock: "-0.25em",
+});

package/lib/async-op.ts

@@ -242,9 +242,11 @@ 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;
+    -readonly [Index in keyof Ops]: Ops[Index] extends (
+      AsyncOp<infer S, unknown>
+    ) ?
+      S
+    : never;
   },
   Ops[number] extends AsyncOp<unknown, infer F> ? F : never
 > {
@@ -284,3 +286,13 @@ export function fromTryCatch<T>(callback: () => T) {
     return new Failure(cause);
   }
 }
+
+export async function fromPromise<T>(
+  callback: () => Promise<T>,
+): Promise<Success<T> | Failure<unknown>> {
+  try {
+    return new Success(await callback());
+  } catch (cause) {
+    return new Failure(cause);
+  }
+}

package/lib/createStrictContext.ts

@@ -1,12 +1,12 @@
 import { createContext, use } from "react";
 
-export function createStrictContext<T>() {
+export function createStrictContext<T>(debugName: string = "Value") {
   const Context = createContext<T | null>(null);
 
   const useStrictContext = () => {
     const value = use(Context);
     if (!value) {
-      throw new Error(`Value not found in context.`);
+      throw new Error(`${debugName} not found in context.`);
     }
     return value;
   };

package/lib/index.ts

@@ -17,11 +17,13 @@ export * from "./IndieTabletopClubLogo.tsx";
 export * from "./IndieTabletopClubSymbol.tsx";
 export * from "./Letterhead/index.tsx";
 export * from "./LetterheadForm/index.tsx";
+export * from "./ListView/ListView.tsx";
 export * from "./LoadingIndicator.tsx";
 export * from "./MiddotSeparated/MiddotSeparated.tsx";
 export * from "./ModalDialog/index.tsx";
 export * from "./QRCode/QRCode.tsx";
 export * from "./ReleaseInfo/index.tsx";
+export * from "./RichText/RichText.tsx";
 export * from "./SafariCheck/SafariCheck.tsx";
 export * from "./ServiceWorkerHandler.tsx";
 export * from "./ShareButton/ShareButton.tsx";
@@ -40,6 +42,7 @@ export * from "./use-media-query.ts";
 export * from "./use-reverting-state.ts";
 export * from "./use-scroll-restoration.ts";
 export * from "./useEnsureValue.ts";
+export * from "./useFetchJson.tsx";
 export * from "./useInvokeClient.ts";
 export * from "./useIsVisible.ts";
 

package/lib/layers.css.ts

@@ -0,0 +1,3 @@
+import { layer } from "@vanilla-extract/css";
+
+export const appkit = layer();

package/lib/store/index.tsx

@@ -1,6 +1,6 @@
 import type { UserGameData } from "@indietabletop/types";
 import { useActorRef, useSelector } from "@xstate/react";
-import { createContext, useMemo, type ReactNode } from "react";
+import { useMemo, type ReactNode } from "react";
 import { Actor, fromCallback, fromPromise } from "xstate";
 import { useAppConfig } from "../AppConfig/AppConfig.tsx";
 import { Failure, Success } from "../async-op.ts";
@@ -25,9 +25,7 @@ type AppActor = Actor<AppMachine>;
 export const [AppMachineContext, useAppMachineContext] = createStrictContext<{
   actorRef: AppActor;
   actions: AppActions;
-}>();
-
-export const AppActionsContext = createContext<null | AppActions>(null);
+}>("App Machine");
 
 export function useCurrentUser() {
   const { actorRef } = useAppMachineContext();

package/lib/useFetchJson.tsx

@@ -0,0 +1,52 @@
+import useSWR, { type SWRConfiguration } from "swr";
+import { Failure, fromPromise, Success } from "./async-op.ts";
+import { swrResponseToResult } from "./result/swr.ts";
+import type { FailurePayload } from "./types.ts";
+
+export type DocContentTypeMismatch = {
+  type: "DOC_CONTENT_TYPE_MISMATCH";
+};
+
+type FetchJsonResult<T> =
+  | Success<T>
+  | Failure<FailurePayload | DocContentTypeMismatch>;
+
+export async function fetchJson<T>(url: string): Promise<FetchJsonResult<T>> {
+  const result = await fromPromise(() => fetch(url));
+
+  if (result.isFailure) {
+    return new Failure({ type: "NETWORK_ERROR" });
+  }
+
+  const { value: response } = result;
+  if (!response.ok) {
+    return new Failure({ type: "API_ERROR", code: response.status });
+  }
+
+  // This can happen due to Netlify rewrites serving index.html in case the
+  // requested doc file is not found.
+  if (response.headers.get("Content-Type") !== "application/json") {
+    return new Failure({ type: "DOC_CONTENT_TYPE_MISMATCH" });
+  }
+
+  const parsed = await fromPromise(() => response.json());
+  if (parsed.isFailure) {
+    return new Failure({ type: "UNKNOWN_ERROR" });
+  }
+
+  return parsed;
+}
+
+export function useFetchJson<T = unknown>(
+  url: string,
+  config?: SWRConfiguration,
+) {
+  return useSWR<FetchJsonResult<T>>(url, fetchJson, config);
+}
+
+export function useFetchJsonResult<T = unknown>(
+  url: string,
+  config?: SWRConfiguration,
+) {
+  return swrResponseToResult(useFetchJson<T>(url, config));
+}

package/package.json

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