@indietabletop/appkit 3.2.0-6 → 3.2.0-8

package/lib/LetterheadForm/LetterheadReadonlyTextField.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { LetterheadReadonlyTextField } from "./index.tsx";
+
+const meta = {
+  title: "ReadonlyTextField",
+  component: LetterheadReadonlyTextField,
+  tags: ["autodocs"],
+  args: {},
+} satisfies Meta<typeof LetterheadReadonlyTextField>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: "Email",
+    value: "john@example.com",
+    placeholder: "john@example.com",
+  },
+};

package/lib/LetterheadForm/LetterheadSubmitError.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { form } from "../storybook/decorators.tsx";
+import { LetterheadSubmitError } from "./index.tsx";
+
+const meta = {
+  title: "LetterheadSubmitError",
+  component: LetterheadSubmitError,
+  tags: ["autodocs"],
+  args: {},
+  decorators: [
+    form({ defaultErrors: { submit: "This is an error message." } }),
+  ],
+} satisfies Meta<typeof LetterheadSubmitError>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    name: "submit",
+  },
+};

package/lib/LetterheadForm/LetterheadTextField.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { form } from "../storybook/decorators.tsx";
+import { LetterheadTextField } from "./index.tsx";
+
+const meta = {
+  title: "FormTextField",
+  component: LetterheadTextField,
+  tags: ["autodocs"],
+  args: {},
+  decorators: [form()],
+} satisfies Meta<typeof LetterheadTextField>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: "Email",
+    placeholder: "john@example.com",
+    name: "foo",
+  },
+};

package/lib/LetterheadForm/index.tsx

@@ -0,0 +1,94 @@
+import {
+  FormError,
+  FormInput,
+  type FormInputProps,
+  FormLabel,
+  useFormContext,
+  useStoreState,
+} from "@ariakit/react";
+import { type ReactNode } from "react";
+import * as css from "./style.css.ts";
+
+type LetterheadTextFieldProps = FormInputProps & {
+  label: string;
+  hint?: ReactNode;
+};
+
+export function LetterheadTextField(props: LetterheadTextFieldProps) {
+  const { name, label, hint, ...inputProps } = props;
+
+  return (
+    <div>
+      <div className={css.field}>
+        <FormLabel name={name} className={css.fieldLabel}>
+          {label}
+        </FormLabel>
+
+        <FormInput {...inputProps} name={name} className={css.fieldInput} />
+      </div>
+
+      <FormError name={name} className={css.fieldIssue} />
+
+      {hint && <div className={css.fieldHint}>{hint}</div>}
+    </div>
+  );
+}
+
+type LetterheadReadonlyTextFieldProps = {
+  label: string;
+  value: string;
+  placeholder?: string;
+  hint?: ReactNode;
+  type?: "text" | "email" | "password";
+};
+
+/**
+ * Renders a read-only text field.
+ *
+ * For an editable text field, use {@link LetterheadTextField} along with
+ * Ariakit form store.
+ */
+export function LetterheadReadonlyTextField(
+  props: LetterheadReadonlyTextFieldProps,
+) {
+  return (
+    <div>
+      <label className={css.field}>
+        <span className={css.fieldLabel}>{props.label}</span>
+
+        <input
+          className={css.fieldInput}
+          type={props.type ?? "text"}
+          value={props.value}
+          placeholder={props.placeholder}
+          readOnly
+        />
+      </label>
+
+      {props.hint && <div className={css.fieldHint}>{props.hint}</div>}
+    </div>
+  );
+}
+
+type LetterheadSubmitErrorProps = {
+  name: string;
+};
+
+/**
+ * Renders an error message from form context.
+ *
+ * If there is no error message, will be completely omitted from DOM, so there
+ * is no need to guard it with an if statement.
+ */
+export function LetterheadSubmitError(props: LetterheadSubmitErrorProps) {
+  const form = useFormContext();
+  const message = useStoreState(form, (s) => {
+    return s?.errors[props.name] as string | undefined;
+  });
+
+  return (
+    <div role="alert" className={css.submitError}>
+      {message}
+    </div>
+  );
+}

package/lib/LetterheadForm/style.css.ts

@@ -0,0 +1,80 @@
+import { style } from "@vanilla-extract/css";
+import { manofa, minion } from "../common.css.ts";
+import { Color } from "../vars.css.ts";
+
+const border = style({
+  borderRadius: "0.5rem",
+  border: `1px solid ${Color.GRAY}`,
+});
+
+export const field = style({
+  display: "block",
+});
+
+export const fieldLabel = style([
+  manofa,
+  {
+    display: "block",
+    textTransform: "uppercase",
+    fontSize: "0.75rem",
+    fontWeight: 600,
+    marginBottom: "0.5rem",
+  },
+]);
+
+export const fieldInput = style([
+  border,
+  minion,
+  {
+    display: "block",
+    width: "100%",
+    fontSize: "1rem",
+    lineHeight: "1.25rem",
+    padding: "1rem 0 1rem 1rem",
+
+    ":read-only": {
+      backgroundColor: "hsl(0 0% 0% / 0.05)",
+    },
+
+    // Hide MS Edge widgets -- we handle them manually
+    "::-ms-clear": {
+      display: "none",
+    },
+    "::-ms-reveal": {
+      display: "none",
+    },
+  },
+]);
+
+export const fieldIssue = style({
+  color: Color.PURPLE,
+  fontSize: "0.875rem",
+  marginTop: "0.5rem",
+
+  ":empty": {
+    display: "none",
+  },
+});
+
+export const fieldHint = style({
+  color: Color.MID_GRAY,
+  fontSize: "0.875rem",
+  marginTop: "0.5rem",
+
+  selectors: {
+    [`${fieldIssue}:not(:empty) + &`]: {
+      display: "none",
+    },
+  },
+});
+
+export const submitError = style({
+  padding: "1rem",
+  color: Color.PURPLE,
+  backgroundColor: Color.PALE_GRAY,
+  borderRadius: "0.75rem",
+
+  ":empty": {
+    display: "none",
+  },
+});

package/lib/globals.css.ts

@@ -1,5 +1,8 @@
 import { globalStyle } from "@vanilla-extract/css";
 
+// Apply global vars
+import "./vars.css.ts";
+
 globalStyle(":root", {
   fontSynthesis: "none",
   textRendering: "optimizeLegibility",

package/lib/index.ts

@@ -4,6 +4,7 @@ export * from "./FormSubmitButton.tsx";
 export * from "./FullscreenDismissBlocker.tsx";
 export * from "./IndieTabletopClubSymbol.tsx";
 export * from "./Letterhead/index.tsx";
+export * from "./LetterheadForm/index.tsx";
 export * from "./LoadingIndicator.tsx";
 export * from "./ServiceWorkerHandler.tsx";
 
@@ -22,6 +23,7 @@ export * from "./async-op.ts";
 export * from "./caught-value.ts";
 export * from "./class-names.ts";
 export * from "./client.ts";
+export * from "./knownFailure.ts";
 export * from "./media.ts";
 export * from "./structs.ts";
 export * from "./types.ts";

package/lib/knownFailure.ts

@@ -0,0 +1,9 @@
+import type { FailurePayload } from "./types.ts";
+
+export function toKnownFailureMessage(failure: FailurePayload) {
+  if (failure.type === "NETWORK_ERROR") {
+    return "Could not submit form due to network error. Make sure you are connected to the internet and try again.";
+  }
+
+  return "Could not submit form due to an unexpected error. Please refresh the page and try again.";
+}

package/lib/storybook/decorators.tsx

@@ -0,0 +1,10 @@
+import { FormProvider, type FormProviderProps } from "@ariakit/react";
+import { type Decorator } from "@storybook/react-vite";
+
+export function form(props?: FormProviderProps): Decorator {
+  return (Story) => (
+    <FormProvider {...props}>
+      <Story />
+    </FormProvider>
+  );
+}

package/lib/vars.css.ts

@@ -0,0 +1,9 @@
+import { createGlobalTheme } from "@vanilla-extract/css";
+
+export const Color = createGlobalTheme(":root", {
+  GRAY: "#ececec",
+  MID_GRAY: "hsl(0 0% 50%)",
+  LIGHT_GRAY: "#e7e8e8",
+  PALE_GRAY: "#f6f7f7",
+  PURPLE: "#d6446e",
+});

package/package.json

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