@indietabletop/appkit 3.2.0-4 → 3.2.0-6

package/lib/FormSubmitButton.tsx

@@ -12,6 +12,16 @@ export type FormSubmitButtonProps = FormSubmitProps & {
   loading: ReactNode;
 };
 
+/**
+ * Renders Ariakit FormSubmit component.
+ *
+ * It's main responsibility is to render the loading component (provided via
+ * the `loading` prop) when the form is in the submitting state. This component
+ * will be rendered over the usual content of the button, which will be hidden
+ * as long as the form is submitting.
+ *
+ * @remarks Must be rendered within Ariakit Form Context.
+ */
 export function FormSubmitButton(props: FormSubmitButtonProps) {
   const { children, className, style, loading, ...submitProps } = props;
   const form = useFormContext();

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 { ComponentProps, 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 "../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> &
+  ComponentProps<"p">;
+
+export function LetterheadParagraph(props: LetterheadParagraphProps) {
+  const { size, align, ...rest } = props;
+  return <p {...rest} {...cx(props, css.paragraph({ size, align }))} />;
+}
+
+type LetterheadFooterProps = ComponentProps<"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,45 @@
+import { FormProvider } from "@ariakit/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Letterhead,
+  LetterheadHeading,
+  LetterheadParagraph,
+  LetterheadSubmitButton,
+} from "./index.tsx";
+
+const meta = {
+  title: "Letterhead",
+  component: Letterhead,
+  tags: ["autodocs"],
+  args: {
+    textAlign: "start",
+  },
+} satisfies Meta<typeof Letterhead>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: 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,141 @@
+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 } from "../media.ts";
+
+const align = {
+  start: textVariants({ textAlign: "start" }),
+  center: textVariants({ textAlign: "center" }),
+  end: textVariants({ textAlign: "end" }),
+};
+
+export const [letterheadTheme, { padding, footerMargin }] = createTheme({
+  padding: "clamp(1rem, 8vw, 4rem)",
+  footerMargin: "3rem",
+});
+
+export const letterhead = recipe({
+  base: [
+    letterheadTheme,
+    minion,
+    {
+      backgroundColor: "white",
+      padding: `calc(${padding} / 2) ${padding} ${padding}`,
+      borderRadius: "1rem",
+      marginInline: "auto",
+      maxInlineSize: "36rem",
+    },
+  ],
+
+  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",
+
+      "@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/atomic.css.ts

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

package/lib/class-names.ts

@@ -1,8 +1,33 @@
+type Falsy = false | null | undefined;
+
+type PropsWithClassName = {
+  className?: ClassName;
+};
+
+type ClassName = string | PropsWithClassName | Falsy;
+
 /**
- * Combines a list of strings into a single string. Falsy values are ignored.
+ * Combines a list of strings or objects with className property into a single
+ * string. Falsy values are ignored.
  */
-export function classNames(
-  ...classNames: (string | false | null | undefined)[]
-) {
-  return classNames.filter((c) => !!c).join(" ");
+export function classNames(...classNames: ClassName[]) {
+  return classNames
+    .filter((cn) => !!cn)
+    .map((cn) => (typeof cn === "object" ? cn?.className : cn))
+    .join(" ");
+}
+
+/**
+ * Given a list of strings or objects with the className property, returns an
+ * object with className property and combined className. Falsy values will
+ * be filtered out.
+ *
+ * @example
+ * <h1 {...clx(props, 'heading', 'bold')}>Hello world!</h1>
+ */
+
+export function cx(...cns: ClassName[]) {
+  return {
+    className: classNames(...cns),
+  };
 }

package/lib/common.css.ts

@@ -15,6 +15,8 @@ export const itcSymbol = style({
 
 export const manofa = style({
   fontFamily: `"manofa", sans-serif`,
+  fontFeatureSettings: `"ss01"`,
+  letterSpacing: "-.01em",
 });
 
 export const minion = style({

package/lib/index.ts

@@ -3,8 +3,7 @@ export * from "./ExternalLink.tsx";
 export * from "./FormSubmitButton.tsx";
 export * from "./FullscreenDismissBlocker.tsx";
 export * from "./IndieTabletopClubSymbol.tsx";
-export * from "./Letterhead.tsx";
-export * from "./LetterheadFooter.tsx";
+export * from "./Letterhead/index.tsx";
 export * from "./LoadingIndicator.tsx";
 export * from "./ServiceWorkerHandler.tsx";
 

package/lib/internal.css.ts

@@ -1,6 +1,5 @@
 import { createVar, style } from "@vanilla-extract/css";
 import { bounce } from "./animations.css.ts";
-import { minion } from "./common.css.ts";
 
 export const animationDelay = createVar();
 
@@ -9,18 +8,3 @@ export const dot = style({
   opacity: 0.8,
   animation: `${bounce} 2s ${animationDelay} infinite`,
 });
-
-export const padding = createVar();
-
-export const letterhead = style([
-  minion,
-  {
-    vars: { [padding]: "clamp(1rem, 8vw, 4rem)" },
-
-    backgroundColor: "white",
-    padding: `max(1rem, calc(${padding} - .5rem)) ${padding} ${padding}`,
-    borderRadius: "1rem",
-    marginInline: "auto",
-    maxInlineSize: "36rem",
-  },
-]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indietabletop/appkit",
-  "version": "3.2.0-4",
+  "version": "3.2.0-6",
   "description": "A collection of modules used in apps built by Indie Tabletop Club",
   "private": false,
   "type": "module",
@@ -13,7 +13,7 @@
   },
   "exports": {
     ".": "./lib/index.ts",
-    "./*": "./lib/*"
+    "./*.css.ts": "./lib/*.css.ts"
   },
   "files": [
     "/lib"
@@ -39,6 +39,7 @@
     "@indietabletop/tooling": "^5.0.0",
     "@vanilla-extract/css": "^1.17.2",
     "@vanilla-extract/dynamic": "^2.1.3",
+    "@vanilla-extract/recipes": "^0.5.7",
     "@vanilla-extract/sprinkles": "^1.6.3",
     "superstruct": "^2.0.2"
   }

package/lib/Letterhead.tsx

@@ -1,33 +0,0 @@
-import type { ReactNode } from "react";
-import { IndieTabletopClubSymbol } from "./IndieTabletopClubSymbol.tsx";
-import { letterhead } from "./internal.css.ts";
-import { LetterheadFooter } from "./LetterheadFooter.tsx";
-
-export type LetterheadProps = {
-  headerIcon?: boolean;
-  children: ReactNode;
-};
-
-export function Letterhead(props: LetterheadProps) {
-  const { children, headerIcon = true } = props;
-
-  return (
-    <div className={letterhead}>
-      {headerIcon && (
-        <IndieTabletopClubSymbol
-          style={{
-            marginBlock: "-1rem 1rem",
-            marginInline: "auto",
-            display: "block",
-            inlineSize: "2.5rem",
-            blockSize: "2.5rem",
-          }}
-        />
-      )}
-
-      {children}
-
-      <LetterheadFooter />
-    </div>
-  );
-}

package/lib/LetterheadFooter.tsx

@@ -1,37 +0,0 @@
-import { interactiveText } from "./common.css.ts";
-import { ExternalLink } from "./ExternalLink.tsx";
-import { IndieTabletopClubLogo } from "./IndieTabletopClubLogo.tsx";
-
-export function LetterheadFooter() {
-  return (
-    <div
-      style={{
-        textAlign: "center",
-        paddingBlockStart: "2rem",
-        borderBlockStart: "1px solid #ececec",
-        marginBlockStart: "3rem",
-      }}
-    >
-      <IndieTabletopClubLogo style={{ margin: "0 auto 1.125rem" }} />
-      <p
-        style={{
-          margin: "0 auto",
-          maxInlineSize: "25rem",
-          fontSize: "0.875rem",
-          lineHeight: "1.25rem",
-          fontFamily: "minion-pro, serif",
-        }}
-      >
-        Indie Tabletop Club supports independent game creators with high‑quality
-        digital tools.{" "}
-        <ExternalLink
-          href="https://indietabletop.club"
-          className={interactiveText}
-        >
-          Learn more
-        </ExternalLink>
-        .
-      </p>
-    </div>
-  );
-}