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

package/lib/Letterhead/index.tsx

@@ -0,0 +1,85 @@
+import { Heading, type HeadingProps } from "@ariakit/react";
+import type { RecipeVariants } from "@vanilla-extract/recipes";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { cx } from "../class-names.ts";
+import { interactiveText } from "../common.css.ts";
+import { ExternalLink } from "../ExternalLink.tsx";
+import {
+  FormSubmitButton,
+  type FormSubmitButtonProps,
+} from "../form/FormSubmitButton.tsx";
+import { IndieTabletopClubLogo } from "../IndieTabletopClubLogo.tsx";
+import { IndieTabletopClubSymbol } from "../IndieTabletopClubSymbol.tsx";
+import { LoadingIndicator } from "../LoadingIndicator.tsx";
+import * as css from "./style.css.ts";
+
+export type LetterheadHeadingProps = RecipeVariants<typeof css.heading> &
+  HeadingProps;
+
+export function LetterheadHeading(props: LetterheadHeadingProps) {
+  const { align, margin, ...rest } = props;
+  return <Heading {...rest} {...cx(props, css.heading({ align, margin }))} />;
+}
+
+type LetterheadParagraphProps = RecipeVariants<typeof css.paragraph> &
+  ComponentPropsWithoutRef<"p">;
+
+export function LetterheadParagraph(props: LetterheadParagraphProps) {
+  const { size, align, ...rest } = props;
+  return <p {...rest} {...cx(props, css.paragraph({ size, align }))} />;
+}
+
+type LetterheadFooterProps = ComponentPropsWithoutRef<"div">;
+
+export function LetterheadFooter(props: LetterheadFooterProps) {
+  return (
+    <div {...props} {...cx(props, css.letterheadFooter)}>
+      <IndieTabletopClubLogo {...cx(css.letterheadFooterLogo)} />
+
+      <LetterheadParagraph {...cx(css.letterheadFooterInfo)} size="small">
+        Indie Tabletop Club supports independent game creators with premium
+        digital tools.{" "}
+        <ExternalLink
+          href="https://indietabletop.club"
+          className={interactiveText}
+        >
+          Learn more
+        </ExternalLink>
+        .
+      </LetterheadParagraph>
+    </div>
+  );
+}
+
+type LetterheadSubmitButton = RecipeVariants<typeof css.button> &
+  Omit<FormSubmitButtonProps, "loading">;
+
+export function LetterheadSubmitButton(props: LetterheadSubmitButton) {
+  const { marginBlockStart, ...rest } = props;
+  return (
+    <FormSubmitButton
+      {...rest}
+      {...cx(css.button({ marginBlockStart }), props)}
+      loading={<LoadingIndicator />}
+    />
+  );
+}
+
+export type LetterheadProps = RecipeVariants<typeof css.letterhead> & {
+  headerIcon?: ReactNode;
+  children: ReactNode;
+};
+
+export function Letterhead(props: LetterheadProps) {
+  const { children, textAlign, headerIcon = true } = props;
+
+  return (
+    <div className={css.letterhead({ textAlign })}>
+      {headerIcon && <IndieTabletopClubSymbol {...cx(css.letterheadSymbol)} />}
+
+      {children}
+
+      <LetterheadFooter />
+    </div>
+  );
+}

package/lib/Letterhead/stories.tsx

@@ -0,0 +1,41 @@
+import { FormProvider } from "@ariakit/react";
+import preview from "../../.storybook/preview.tsx";
+import {
+  Letterhead,
+  LetterheadHeading,
+  LetterheadParagraph,
+  LetterheadSubmitButton,
+} from "./index.tsx";
+
+const meta = preview.meta({
+  title: "Components/Letterhead",
+  component: Letterhead,
+  tags: ["autodocs"],
+  args: {
+    textAlign: "start",
+  },
+});
+
+export const Default = meta.story({
+  args: {
+    children: (
+      <>
+        <LetterheadHeading align="center" margin="letterhead">
+          Lorem ipsum dolor
+        </LetterheadHeading>
+
+        <LetterheadParagraph>
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut enim ad
+          minima veniam, quis <em>nostrum</em> exercitationem ullam corporis
+          suscipit laboriosam.
+        </LetterheadParagraph>
+
+        <FormProvider>
+          <LetterheadSubmitButton marginBlockStart="footerMargin">
+            Lorem ipsum
+          </LetterheadSubmitButton>
+        </FormProvider>
+      </>
+    ),
+  },
+});

package/lib/Letterhead/style.css.ts

@@ -0,0 +1,152 @@
+import { createTheme, style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { textVariants } from "../atomic.css.ts";
+import { manofa, minion } from "../common.css.ts";
+import { Hover, MinWidth } from "../media.ts";
+
+const align = {
+  start: textVariants({ textAlign: "start" }),
+  center: textVariants({ textAlign: "center" }),
+  end: textVariants({ textAlign: "end" }),
+};
+
+export const [letterheadTheme, { padding, footerMargin }] = createTheme({
+  padding: "1.25rem",
+  footerMargin: "3rem",
+});
+
+export const letterhead = recipe({
+  base: [
+    letterheadTheme,
+    minion,
+    {
+      backgroundColor: "white",
+      padding: `calc(${padding} / 2) ${padding} ${padding}`,
+      borderRadius: "1rem",
+      marginInline: "auto",
+      maxInlineSize: "36rem",
+      transition: "height 200ms",
+      height: "calc-size(auto)",
+
+      "@media": {
+        [MinWidth.SMALL]: {
+          vars: {
+            [padding]: `clamp(1.5rem, 8%, 4rem)`,
+          },
+        },
+      },
+    },
+  ],
+
+  defaultVariants: {
+    textAlign: "center",
+  },
+
+  variants: {
+    textAlign: align,
+  },
+});
+
+export const letterheadSymbol = style({
+  marginBlockEnd: "0.5rem",
+  marginInline: "auto",
+  display: "block",
+  inlineSize: "2.5rem",
+  blockSize: "2.5rem",
+});
+
+export const heading = recipe({
+  base: [
+    manofa,
+    {
+      fontWeight: 400,
+      fontSize: "1.5rem",
+      marginBlockEnd: "1rem",
+      lineHeight: 1.2,
+    },
+  ],
+
+  variants: {
+    align,
+
+    margin: {
+      letterhead: {
+        marginBlockEnd: `min(calc(${padding} / 2), 1.5rem)`,
+      },
+    },
+  },
+});
+
+export const paragraph = recipe({
+  base: [
+    minion,
+    {
+      lineHeight: 1.5,
+      selectors: {
+        "& + &": { marginTop: "0.5lh" },
+      },
+    },
+  ],
+
+  defaultVariants: {
+    size: "default",
+  },
+
+  variants: {
+    size: {
+      small: { fontSize: "0.875rem" },
+      default: { fontSize: "1rem" },
+    },
+    align,
+  },
+});
+
+export const button = recipe({
+  base: [
+    manofa,
+    {
+      letterSpacing: 0,
+      textTransform: "uppercase",
+      backgroundColor: "black",
+      color: "white",
+      width: "100%",
+      border: "none",
+      borderRadius: "0.5rem",
+      padding: "1rem 1.5rem",
+      fontSize: "0.875rem",
+      textAlign: "center",
+
+      "@media": {
+        [Hover.HOVER]: {
+          transition: "box-shadow 400ms",
+
+          ":hover": {
+            boxShadow: "inset 0 0 0 2px hsl(0 0% 100% / 0.5)",
+          },
+        },
+      },
+    },
+  ],
+
+  variants: {
+    marginBlockStart: {
+      footerMargin: { marginBlockStart: `calc(${footerMargin} - 0.5rem)` },
+    },
+  },
+});
+
+export const letterheadFooter = style({
+  textAlign: "center",
+  marginBlockStart: footerMargin,
+  paddingBlockStart: "2rem",
+  borderBlockStart: "1px solid #ececec",
+});
+
+export const letterheadFooterLogo = style({
+  margin: "0 auto 1.125rem",
+});
+
+export const letterheadFooterInfo = style({
+  margin: "0 auto",
+  maxInlineSize: "25rem",
+});

package/lib/LetterheadForm/LetterheadReadonlyTextField.stories.tsx

@@ -0,0 +1,17 @@
+import preview from "../../.storybook/preview.tsx";
+import { LetterheadReadonlyTextField } from "./index.tsx";
+
+const meta = preview.meta({
+  title: "Components/ReadonlyTextField",
+  component: LetterheadReadonlyTextField,
+  tags: ["autodocs"],
+  args: {},
+});
+
+export const Default = meta.story({
+  args: {
+    label: "Email",
+    value: "john@example.com",
+    placeholder: "john@example.com",
+  },
+});

package/lib/LetterheadForm/LetterheadSubmitError.stories.tsx

@@ -0,0 +1,19 @@
+import preview from "../../.storybook/preview.tsx";
+import { form } from "../storybook/decorators.tsx";
+import { LetterheadSubmitError } from "./index.tsx";
+
+const meta = preview.meta({
+  title: "Components/LetterheadSubmitError",
+  component: LetterheadSubmitError,
+  tags: ["autodocs"],
+  args: {},
+  decorators: [
+    form({ defaultErrors: { submit: "This is an error message." } }),
+  ],
+});
+
+export const Default = meta.story({
+  args: {
+    name: "submit",
+  },
+});

package/lib/LetterheadForm/LetterheadTextField.stories.tsx

@@ -0,0 +1,19 @@
+import preview from "../../.storybook/preview.tsx";
+import { form } from "../storybook/decorators.tsx";
+import { LetterheadTextField } from "./index.tsx";
+
+const meta = preview.meta({
+  title: "Components/LetterheadTextField",
+  component: LetterheadTextField,
+  tags: ["autodocs"],
+  args: {},
+  decorators: [form()],
+});
+
+export const Default = meta.story({
+  args: {
+    label: "Email",
+    placeholder: "john@example.com",
+    name: "foo",
+  },
+});

package/lib/LetterheadForm/index.tsx

@@ -0,0 +1,137 @@
+import {
+  FormCheckbox,
+  type FormCheckboxProps,
+  FormError,
+  FormInput,
+  type FormInputProps,
+  FormLabel,
+} from "@ariakit/react";
+import { type ReactNode } from "react";
+import { cx } from "../class-names.ts";
+import { SubmitErrorAlert } from "../form/SubmitErrorAlert.tsx";
+import * as css from "./style.css.ts";
+
+export 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>
+  );
+}
+
+export function LetterheadCheckboxField(
+  props: FormCheckboxProps & { label: ReactNode },
+) {
+  const { label, name, ...inputProps } = props;
+
+  return (
+    <div {...cx(css.checkboxField)}>
+      <div>
+        <FormCheckbox name={name} {...inputProps} />{" "}
+        <FormLabel name={name}>{label}</FormLabel>
+      </div>
+
+      <FormError name={name} className={css.fieldIssue} />
+    </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) {
+  return <SubmitErrorAlert {...props} className={css.submitError} />;
+}
+
+export function LetterheadHeader(props: { children: ReactNode }) {
+  return <header className={css.header}>{props.children}</header>;
+}
+
+export function LetterheadFormActions(props: { children: ReactNode }) {
+  return (
+    <div
+      style={{
+        marginBlockStart: "2rem",
+        display: "flex",
+        flexDirection: "column",
+        gap: "1.125rem",
+      }}
+    >
+      {props.children}
+    </div>
+  );
+}
+
+export function InputsStack(props: { children: ReactNode }) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "1.125rem",
+      }}
+    >
+      {props.children}
+    </div>
+  );
+}

package/lib/LetterheadForm/style.css.ts

@@ -0,0 +1,89 @@
+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",
+    textAlign: "start",
+  },
+]);
+
+export const fieldInput = style([
+  border,
+  minion,
+  {
+    display: "block",
+    width: "100%",
+    fontSize: "1rem",
+    lineHeight: "1.25rem",
+    padding: "1rem 0 1rem 1rem",
+    textAlign: "start",
+
+    ":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 checkboxField = style({
+  textAlign: "start",
+});
+
+export const fieldIssue = style({
+  color: Color.PURPLE,
+  fontSize: "0.875rem",
+  marginTop: "0.5rem",
+  textAlign: "start",
+
+  ":empty": {
+    display: "none",
+  },
+});
+
+export const fieldHint = style({
+  color: Color.MID_GRAY,
+  fontSize: "0.875rem",
+  marginTop: "0.5rem",
+  textAlign: "start",
+
+  selectors: {
+    [`${fieldIssue}:not(:empty) + &`]: {
+      display: "none",
+    },
+  },
+});
+
+export const submitError = style({
+  padding: "1rem",
+  color: Color.PURPLE,
+  backgroundColor: Color.PALE_GRAY,
+  borderRadius: "0.75rem",
+  textAlign: "start",
+});
+
+export const header = style({
+  marginBlockEnd: "3rem",
+});

package/lib/LoadingIndicator.tsx

@@ -0,0 +1,40 @@
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { animationDelay, dot } from "./internal.css.ts";
+
+export function LoadingIndicator(props: { className?: string }) {
+  const diameter = 10;
+  const radius = diameter / 2;
+  const gap = diameter;
+  const cy = diameter;
+  const height = cy * 2;
+  const width = diameter * 3 + gap;
+  const initialDelay = 300;
+  const interBounceDelay = 150;
+
+  return (
+    <svg
+      viewBox={`0 0 ${width} ${height}`}
+      width={width}
+      height={height}
+      className={props.className}
+      preserveAspectRatio="xMidYMid meet"
+    >
+      <g stroke="none" fill="inherit">
+        {Array.from({ length: 3 }, (_, index) => {
+          const delay = `${initialDelay + interBounceDelay * index}ms`;
+
+          return (
+            <circle
+              key={index}
+              cx={radius * (index + 1) + gap * index}
+              cy={cy}
+              r={radius}
+              className={dot}
+              style={assignInlineVars({ [animationDelay]: delay })}
+            />
+          );
+        })}
+      </g>
+    </svg>
+  );
+}

package/lib/MiddotSeparated/MiddotSeparated.stories.ts

@@ -0,0 +1,26 @@
+import preview from "../../.storybook/preview.tsx";
+import { MiddotSeparated } from "./MiddotSeparated.tsx";
+
+const meta = preview.meta({
+  title: "Components/Middot Separated",
+  component: MiddotSeparated,
+  tags: ["autodocs"],
+});
+
+/**
+ * The default case in which all steps of the flow succeed.
+ */
+export const Default = meta.story({
+  args: {
+    children: ["Lorem", "Ipsum", " Dolor"],
+  },
+});
+
+/**
+ * Edge case when it comes to handling children in React.
+ */
+export const SingleElement = meta.story({
+  args: {
+    children: "Lorem",
+  },
+});

package/lib/MiddotSeparated/MiddotSeparated.tsx

@@ -0,0 +1,26 @@
+import { type HTMLAttributes, Children } from "react";
+import { withMiddlot } from "./style.css.ts";
+
+type MiddotSeparatedProps = HTMLAttributes<HTMLDivElement>;
+
+/**
+ * A utility component that wraps children into spans and adds middledots
+ * between each item using CSS ::before pseudo elements.
+ */
+export function MiddotSeparated(props: MiddotSeparatedProps) {
+  const { children, ...divProps } = props;
+
+  return (
+    <div {...divProps}>
+      {Children.toArray(children)
+        .filter((item) => item !== "")
+        .map((item, index) => {
+          return (
+            <span className={withMiddlot} key={index}>
+              {item}
+            </span>
+          );
+        })}
+    </div>
+  );
+}

package/lib/MiddotSeparated/style.css.ts

@@ -0,0 +1,10 @@
+import { style } from "@vanilla-extract/css";
+
+export const withMiddlot = style({
+  selectors: {
+    "& + &::before": {
+      content: " · ",
+      opacity: 0.6,
+    },
+  },
+});

package/lib/ModalDialog/index.tsx

@@ -0,0 +1,28 @@
+import { Dialog, type DialogProps } from "@ariakit/react";
+import type { RecipeVariants } from "@vanilla-extract/recipes";
+import type { ReactNode } from "react";
+import { cx } from "../class-names.ts";
+import * as css from "./style.css.ts";
+
+type Size = NonNullable<NonNullable<RecipeVariants<typeof css.dialog>>["size"]>;
+
+export type ModalDialogProps = Omit<DialogProps, "modal" | "backdrop"> & {
+  children: ReactNode;
+  size: Size;
+  backdropClassName?: string;
+};
+
+export function ModalDialog(props: ModalDialogProps) {
+  const { size, backdropClassName, className, ...dialogProps } = props;
+
+  return (
+    <Dialog
+      {...dialogProps}
+      {...cx(className, css.dialog({ size }))}
+      backdrop={<div {...cx(css.backdrop, backdropClassName)} />}
+      modal
+    >
+      {props.children}
+    </Dialog>
+  );
+}