@boyernick/standard-ui-react 0.1.1-canary.9 → 0.2.0

package/src/illustrations.tsx

@@ -1,167 +1,245 @@
-import type { SVGProps } from "react"
+import type { ComponentProps, ReactNode } from "react"
 import { cn } from "./lib/cn"
 
-export type IllustrationProps = SVGProps<SVGSVGElement>
+/**
+ * Small, composition-based illustrations for empty states.
+ *
+ * Built from divs and theme tokens rather than SVG paths, so they follow the
+ * palette into dark mode instead of carrying baked-in colours. They are
+ * deliberately abstract and monochrome — a miniature of the thing that is
+ * missing, not a picture about it. Nothing here uses a brand colour: an empty
+ * state is a quiet moment, and an accent turns it into an announcement.
+ */
 
-const illustrationProps = {
-  viewBox: "0 0 240 160",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg",
-} as const
+export type IllustrationProps = ComponentProps<"div">
 
-export const IllustrationEmpty = ({
-  className,
-  ...props
-}: IllustrationProps) => (
-  <svg
-    {...illustrationProps}
-    className={cn("text-fg-tertiary", className)}
+/** Fixed 64×48 stage, so a row of these lines up without ad-hoc sizing. */
+const Frame = ({ className, children, ...props }: IllustrationProps) => (
+  <div
+    className={cn(
+      "inline-flex h-12 w-16 shrink-0 items-center justify-center",
+      className,
+    )}
     aria-hidden
     {...props}
   >
-    <path
-      d="M52 65 79 40h82l27 25v55H52V65Z"
-      className="fill-background-secondary"
-      stroke="currentColor"
-      strokeWidth="2"
-    />
-    <path
-      d="M52 65h45l8 13h30l8-13h45"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M97 31h46"
-      className="text-brand-primary"
-      stroke="currentColor"
-      strokeWidth="4"
-      strokeLinecap="round"
-    />
-    <circle cx="120" cy="104" r="4" className="fill-brand-primary" />
-  </svg>
+    {children}
+  </div>
 )
 
-export const IllustrationError = ({
+/** A sheet. The hairline and radius are sub-pixel on purpose — at this size a
+ *  1px border reads as a heavy outline rather than an edge. */
+const Card = ({
+  className,
+  children,
+}: {
+  className?: string
+  children?: ReactNode
+}) => (
+  <div
+    className={cn(
+      "relative flex shrink-0 flex-col overflow-hidden rounded-[3px] border-[0.5px] border-border-primary bg-surface p-1 shadow-hairline",
+      className,
+    )}
+  >
+    {children}
+  </div>
+)
+
+/** A line of content. */
+const Bar = ({ width }: { width: string }) => (
+  <div
+    className="h-[3px] shrink-0 rounded-[1px] bg-background-tertiary"
+    style={{ width }}
+  />
+)
+
+/** Nothing here yet — a sheet with no content on it. */
+export const IllustrationEmpty = ({ className, ...props }: IllustrationProps) => (
+  <Frame className={className} {...props}>
+    <Card className="h-10 w-8" />
+  </Frame>
+)
+
+/** Something to look through — a sheet behind a lens. */
+export const IllustrationSearch = ({
   className,
   ...props
 }: IllustrationProps) => (
-  <svg
-    {...illustrationProps}
-    className={cn("text-fg-tertiary", className)}
-    aria-hidden
-    {...props}
-  >
-    <rect
-      x="47"
-      y="28"
-      width="146"
-      height="104"
-      rx="16"
-      className="fill-background-secondary"
-      stroke="currentColor"
-      strokeWidth="2"
-    />
-    <path
-      d="M47 54h146"
-      stroke="currentColor"
-      strokeWidth="2"
-    />
-    <circle cx="63" cy="41" r="3" className="fill-brand-primary" />
-    <circle cx="74" cy="41" r="3" fill="currentColor" opacity=".45" />
-    <circle cx="85" cy="41" r="3" fill="currentColor" opacity=".25" />
-    <path
-      d="m103 78 34 34m0-34-34 34"
-      className="text-brand-primary"
-      stroke="currentColor"
-      strokeWidth="5"
-      strokeLinecap="round"
-    />
-  </svg>
+  <Frame className={className} {...props}>
+    <Card className="h-10 w-8 gap-[3px]">
+      <Bar width="80%" />
+      <Bar width="55%" />
+      <Bar width="35%" />
+    </Card>
+    <div className="-ml-2.5 mt-4 size-4 rounded-full border-[1.5px] border-border-secondary bg-surface" />
+  </Frame>
 )
 
-export const IllustrationSuccess = ({
+/** Something went wrong — the stack knocked out of true. */
+export const IllustrationError = ({ className, ...props }: IllustrationProps) => (
+  <Frame className={className} {...props}>
+    <Card className="h-9 w-7 -rotate-6" />
+    <Card className="-ml-3 h-10 w-8 rotate-[7deg] gap-[3px]">
+      <Bar width="70%" />
+      <Bar width="45%" />
+    </Card>
+  </Frame>
+)
+
+/** Somewhere to put a file — a sheet going into a folder.
+ *
+ *  Two earlier attempts failed for the same reason: an arrow stamped on a
+ *  sheet, then a sheet on a plain grey slab, both read as a document with
+ *  something next to it. A folder is its own silhouette — tab, body, a sheet
+ *  tucked behind the front — so the arrangement carries the meaning and no
+ *  symbol has to. It is also the one shape here that is not another sheet,
+ *  which keeps it from reading as the error stack. */
+export const IllustrationUpload = ({
   className,
   ...props
 }: IllustrationProps) => (
-  <svg
-    {...illustrationProps}
-    className={cn("text-fg-tertiary", className)}
-    aria-hidden
-    {...props}
-  >
-    <circle
-      cx="120"
-      cy="80"
-      r="53"
-      className="fill-background-secondary"
-      stroke="currentColor"
-      strokeWidth="2"
-    />
-    <circle
-      cx="120"
-      cy="80"
-      r="37"
-      className="fill-brand-primary text-brand-primary"
-      stroke="currentColor"
-      strokeWidth="2"
-    />
-    <path
-      d="m99 80 14 14 29-31"
-      className="text-brand-foreground"
-      stroke="currentColor"
-      strokeWidth="6"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M63 42h13M69.5 35.5v13M168 118h13m-6.5-6.5v13"
-      className="text-brand-primary"
-      stroke="currentColor"
-      strokeWidth="3"
-      strokeLinecap="round"
-    />
-  </svg>
+  <Frame className={className} {...props}>
+    <div className="relative h-11 w-12">
+      {/* Tucked deep enough that the folder front cuts across it. */}
+      <Card className="absolute inset-x-[13px] top-0 h-8 -rotate-6 gap-[3px]">
+        <Bar width="70%" />
+        <Bar width="45%" />
+      </Card>
+      {/* Laps 1px into the body so their borders read as one outline. */}
+      <div className="absolute bottom-[21px] left-1 h-1.5 w-4 rounded-t-[2px] border-x-[0.5px] border-t-[0.5px] border-border-secondary bg-background-tertiary" />
+      <div className="absolute inset-x-1 bottom-0 h-[22px] rounded-[3px] border-[0.5px] border-border-secondary bg-background-tertiary" />
+    </div>
+  </Frame>
 )
 
-export const IllustrationSearch = ({
+/** Done — a sheet carrying a mark. */
+export const IllustrationSuccess = ({
   className,
   ...props
 }: IllustrationProps) => (
-  <svg
-    {...illustrationProps}
-    className={cn("text-fg-tertiary", className)}
+  <Frame className={className} {...props}>
+    <Card className="h-10 w-8 items-center justify-center">
+      {/* A check is cheaper as two borders on a rotated box than as a path. */}
+      <span className="mb-0.5 h-3 w-1.5 rotate-45 border-r-[1.5px] border-b-[1.5px] border-fg-tertiary" />
+    </Card>
+  </Frame>
+)
+
+/* -------------------------------------------------------------------------
+ * File types
+ *
+ * A second, smaller family. These sit inline — in an attachment row, a list,
+ * a preview slot — so they are a bare sheet at 24×30 rather than a hero on a
+ * 64×48 stage. Same grammar: a sheet, and marks on it standing in for whatever
+ * the file holds.
+ *
+ * Presentational, like Kbd: they render the type you name. Mapping an
+ * extension to a type is the consumer's job, since only the consumer knows
+ * what it wants to do with the ones it does not recognise.
+ * ---------------------------------------------------------------------- */
+
+export type FileIllustrationType =
+  | "document"
+  | "image"
+  | "spreadsheet"
+  | "presentation"
+  | "video"
+  | "audio"
+  | "code"
+  | "archive"
+  | "generic"
+
+export type IllustrationFileProps = IllustrationProps & {
+  type?: FileIllustrationType
+}
+
+/** A block of colour standing in for content rather than a line of it. */
+const Block = ({ className }: { className?: string }) => (
+  <div className={cn("rounded-[1px] bg-background-tertiary", className)} />
+)
+
+const marks: Record<FileIllustrationType, ReactNode> = {
+  document: (
+    <>
+      <Bar width="100%" />
+      <Bar width="100%" />
+      <Bar width="60%" />
+    </>
+  ),
+  // A horizon and a sun — the smallest arrangement that reads as a picture.
+  image: (
+    <div className="relative mt-auto h-3.5 w-full">
+      <Block className="absolute top-0 right-1 size-1.5 rounded-full" />
+      <Block className="absolute inset-x-0 bottom-0 h-2 [clip-path:polygon(0_100%,38%_28%,62%_100%)]" />
+      <Block className="absolute right-0 bottom-0 h-1.5 w-1/2 [clip-path:polygon(0_100%,50%_20%,100%_100%)]" />
+    </div>
+  ),
+  spreadsheet: (
+    <div className="grid h-full w-full grid-cols-3 grid-rows-3 gap-[1.5px]">
+      {Array.from({ length: 9 }, (_, i) => (
+        <Block key={i} />
+      ))}
+    </div>
+  ),
+  presentation: (
+    <>
+      <Block className="h-2.5 w-full" />
+      <Bar width="70%" />
+    </>
+  ),
+  // A play triangle, cut from a block so it keeps the same fill as everything else.
+  video: (
+    <div className="m-auto size-3">
+      <Block className="size-full [clip-path:polygon(22%_10%,90%_50%,22%_90%)]" />
+    </div>
+  ),
+  audio: (
+    <div className="m-auto flex h-3.5 items-center gap-[2px]">
+      <Block className="h-1.5 w-[2px]" />
+      <Block className="h-3.5 w-[2px]" />
+      <Block className="h-2.5 w-[2px]" />
+      <Block className="h-3.5 w-[2px]" />
+      <Block className="h-1.5 w-[2px]" />
+    </div>
+  ),
+  code: (
+    <>
+      <Bar width="55%" />
+      <div className="flex w-full pl-1.5">
+        <Bar width="70%" />
+      </div>
+      <div className="flex w-full pl-1.5">
+        <Bar width="50%" />
+      </div>
+      <Bar width="40%" />
+    </>
+  ),
+  // A stack, since an archive is other files in a coat.
+  archive: (
+    <div className="m-auto flex flex-col gap-[2px]">
+      <Block className="h-1.5 w-2.5" />
+      <Block className="h-1.5 w-2.5" />
+      <Block className="h-1.5 w-2.5" />
+    </div>
+  ),
+  generic: null,
+}
+
+/** One file, drawn as the kind of thing it holds. */
+export const IllustrationFile = ({
+  type = "generic",
+  className,
+  ...props
+}: IllustrationFileProps) => (
+  <div
+    className={cn(
+      "relative flex h-[30px] w-6 shrink-0 flex-col gap-[3px] overflow-hidden rounded-[3px] border-[0.5px] border-border-primary bg-surface p-1 shadow-hairline",
+      className,
+    )}
     aria-hidden
     {...props}
   >
-    <path
-      d="M42 38h113a12 12 0 0 1 12 12v69H42V38Z"
-      className="fill-background-secondary"
-      stroke="currentColor"
-      strokeWidth="2"
-    />
-    <path d="M42 58h125" stroke="currentColor" strokeWidth="2" />
-    <path
-      d="M59 76h48M59 89h34M59 102h53"
-      stroke="currentColor"
-      strokeWidth="4"
-      strokeLinecap="round"
-      opacity=".5"
-    />
-    <circle
-      cx="155"
-      cy="91"
-      r="27"
-      className="fill-surface text-brand-primary"
-      stroke="currentColor"
-      strokeWidth="5"
-    />
-    <path
-      d="m174 111 22 22"
-      className="text-brand-primary"
-      stroke="currentColor"
-      strokeWidth="7"
-      strokeLinecap="round"
-    />
-  </svg>
+    {marks[type]}
+  </div>
 )