@cl-light-ds/ui 0.4.0 → 0.6.0

package/src/components/organisms/workspace/RecentWorkspaces.astro

@@ -0,0 +1,93 @@
+---
+/**
+ * @component RecentWorkspaces
+ * @title Recent Workspaces
+ * @description Organism. The 1–4 most recently opened workspaces: the latest as the large card, the others beside it, sized by how many there are. The large card is always 222px high.
+ *
+ * @preview
+ *
+ * <RecentWorkspaces
+ *   class="w-full"
+ *   items={[
+ *     { name: "Acme Logistics", href: "#", color: "blue", icon: "truck", opened: "2 hours ago", lastEditedBy: "Ana Silva", recordings: 128 },
+ *     { name: "Globex Finance", href: "#", color: "emerald", icon: "wallet", opened: "yesterday" },
+ *     { name: "Initech Field Service", href: "#", color: "orange", icon: "wrench", opened: "3 days ago" },
+ *   ]}
+ * />
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { RecentWorkspaces } from '@cl-light-ds/ui/components/organisms/workspace';
+ * ---
+ *
+ * <RecentWorkspaces items={recents} />
+ * ```
+ *
+ * `items` is most recent first; only the first four are shown, and nothing is
+ * rendered without any. On wide screens (`lg`) the large card takes two of
+ * three columns and the others share the third:
+ *
+ * - 1 recent: the large card takes the row
+ * - 2: the large card + a medium card (`md`, as high as the large one)
+ * - 3: the large card + two small cards (`sm`) stacked, sharing its height
+ * - 4: the large card + three extra small cards (`xs`) stacked
+ *
+ * Below `lg` the cards stack. A `section` named by `label`, with no visible
+ * heading (add your own beside it if the page needs one).
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { WorkspaceCardLabels } from "./labels";
+import type { RecentWorkspace, RecentWorkspaceCardSize, RecentWorkspaceTone } from "./types";
+import RecentWorkspaceCard from "./RecentWorkspaceCard.astro";
+
+interface Props extends Omit<HTMLAttributes<"section">, "class"> {
+  /** The recents, most recent first. Up to four are shown. */
+  items: RecentWorkspace[];
+  /** The large card: the workspace's own gradient (default) or the brand gradient. */
+  tone?: RecentWorkspaceTone;
+  /** Accessible name of the section. */
+  label?: string;
+  /** Copy overrides for the cards (see `WorkspaceCardLabels`). */
+  labels?: Partial<WorkspaceCardLabels>;
+  class?: string;
+}
+
+const { items, tone = "workspace", label = "Recent workspaces", labels, class: className = "", ...rest } =
+  Astro.props as Props;
+
+const shown = items.slice(0, 4);
+const [latest, ...others] = shown;
+const count = shown.length;
+const otherSize: Record<number, RecentWorkspaceCardSize> = { 2: "md", 3: "sm", 4: "xs" };
+---
+
+{
+  latest && (
+    <section
+      {...rest}
+      aria-label={label}
+      data-slot="recent-workspaces"
+      data-count={count}
+      class={cn("grid gap-4 lg:grid-cols-3", className)}
+    >
+      <RecentWorkspaceCard
+        {...latest}
+        size="lg"
+        tone={tone}
+        labels={labels}
+        class={count === 1 ? "lg:col-span-3" : "lg:col-span-2"}
+      />
+      {count > 1 && (
+        <div data-slot="recent-workspaces-others" class="flex min-w-0 flex-col gap-3">
+          {others.map((item) => (
+            <RecentWorkspaceCard {...item} size={otherSize[count]} labels={labels} class="min-w-0 flex-1" />
+          ))}
+        </div>
+      )}
+    </section>
+  )
+}

package/src/components/organisms/workspace/WorkspaceAvatar.astro

@@ -0,0 +1,144 @@
+---
+/**
+ * @component WorkspaceAvatar
+ * @title Workspace Avatar
+ * @description Organism. A workspace's placeholder icon, or the first letter of its name, on the workspace's colour from the workspace palette. Decorative by default, since the workspace name sits beside it.
+ *
+ * @preview
+ *
+ * <div class="flex items-center gap-3">
+ *   <WorkspaceAvatar color="blue" icon="truck" />
+ *   <WorkspaceAvatar color="emerald" icon="leaf" tone="solid" shape="square" />
+ *   <WorkspaceAvatar color="purple" icon="initial" name="Northwind" size="lg" shape="square" />
+ * </div>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { WorkspaceAvatar } from '@cl-light-ds/ui/components/organisms/workspace';
+ * ---
+ *
+ * <WorkspaceAvatar color="teal" icon="rocket" shape="square" />
+ * ```
+ *
+ * - `tone="soft"` (default): the colour, strong, on a light tint of it
+ * - `tone="solid"`: a white glyph on the colour
+ * - `tone="inverse"`: the colour on white, e.g. on a coloured card
+ * - `tone="brand"`: the primary blue on white, on brand surfaces
+ * - `shape="square"`: a rounded square (8px; 14px at `lg` and `xl`)
+ * - sizes: `sm` 32px (16px glyph), `default` 40px (20px), `lg` 56px (28px),
+ *   `xl` 64px (28px, the icon picker's trigger)
+ *
+ * Pass `label` to make it a named image (`role="img"`) when no name is
+ * beside it. A default slot replaces the glyph, e.g. with a logo `<img>`.
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import {
+  DEFAULT_WORKSPACE_COLOR,
+  workspacePalette,
+  type WorkspaceColor,
+} from "@cl-light-ds/ui/lib/workspace-palette";
+import type { WorkspaceGlyphName } from "./icons";
+import type { WorkspaceAvatarSize, WorkspaceAvatarTone } from "./types";
+import WorkspaceGlyph from "./WorkspaceGlyph.astro";
+
+export const workspaceAvatarVariants = cva(
+  "relative inline-flex shrink-0 items-center justify-center overflow-hidden select-none",
+  {
+    variants: {
+      size: {
+        sm: "size-8",
+        default: "size-10",
+        lg: "size-14",
+        xl: "size-16",
+      },
+      shape: {
+        circle: "rounded-full",
+        square: "",
+      },
+    },
+    compoundVariants: [
+      { shape: "square", size: ["sm", "default"], class: "rounded-lg" },
+      { shape: "square", size: ["lg", "xl"], class: "rounded-xl" },
+    ],
+    defaultVariants: {
+      size: "default",
+      shape: "circle",
+    },
+  },
+);
+
+/** Glyph size per avatar size: the icon, or the letter's box and font size. */
+const glyphSizes: Record<string, string> = {
+  sm: "size-4 text-sm",
+  default: "size-5 text-base",
+  lg: "size-7 text-2xl",
+  xl: "size-7 text-2xl",
+};
+
+interface Props
+  extends VariantProps<typeof workspaceAvatarVariants>,
+    Omit<HTMLAttributes<"span">, "class"> {
+  /** Palette colour. Defaults to `DEFAULT_WORKSPACE_COLOR` (blue). */
+  color?: WorkspaceColor;
+  /** An icon name from `WORKSPACE_ICONS`, or `"initial"`. */
+  icon?: WorkspaceGlyphName | (string & {});
+  /** The workspace name, for the initial. */
+  name?: string;
+  tone?: WorkspaceAvatarTone;
+  /** An accessible name. Without it the avatar is decorative (`aria-hidden`). */
+  label?: string;
+  class?: string;
+  /** Extra classes for the glyph (icon or letter). */
+  glyphClass?: string;
+}
+
+const {
+  color = DEFAULT_WORKSPACE_COLOR,
+  icon = "initial",
+  name = "",
+  tone = "soft",
+  size = "default",
+  shape = "circle",
+  label,
+  class: className = "",
+  glyphClass = "",
+  ...rest
+} = Astro.props as Props;
+
+const swatch = workspacePalette[color] ?? workspacePalette[DEFAULT_WORKSPACE_COLOR];
+const toneClasses: Record<WorkspaceAvatarTone, string[]> = {
+  soft: [swatch.tint, swatch.text],
+  solid: [swatch.solid, "text-primary-foreground"],
+  inverse: ["bg-background", swatch.text],
+  brand: ["bg-background", "text-primary"],
+};
+const toneClass = toneClasses[tone as WorkspaceAvatarTone] ?? toneClasses.soft;
+const glyphSize = glyphSizes[(size ?? "default") as WorkspaceAvatarSize];
+const hasSlot = Astro.slots.has("default");
+---
+
+<span
+  {...rest}
+  data-slot="workspace-avatar"
+  data-size={size}
+  data-shape={shape}
+  data-tone={tone}
+  data-color={color}
+  role={label ? "img" : undefined}
+  aria-label={label}
+  aria-hidden={label ? undefined : "true"}
+  class={cn(workspaceAvatarVariants({ size, shape }), toneClass, className)}
+>
+  {
+    hasSlot ? (
+      <slot />
+    ) : (
+      <WorkspaceGlyph icon={icon} name={name} class={cn(glyphSize, glyphClass)} />
+    )
+  }
+</span>

package/src/components/organisms/workspace/WorkspaceCard.astro

@@ -0,0 +1,172 @@
+---
+/**
+ * @component WorkspaceCard
+ * @title Workspace Card
+ * @description Organism. A workspace in a grid: its soft square avatar with a favourite star and an actions menu top right, the name and when you last opened it, and under a divider who last edited it and how many recordings it has. The whole card opens the workspace and lifts on hover and keyboard focus.
+ *
+ * @preview
+ *
+ * <WorkspaceCard
+ *   class="w-72"
+ *   name="Acme Logistics"
+ *   href="#"
+ *   color="blue"
+ *   icon="truck"
+ *   opened="2 hours ago"
+ *   lastEditedBy="Ana Silva"
+ *   recordings={128}
+ *   favorite
+ * />
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { WorkspaceCard } from '@cl-light-ds/ui/components/organisms/workspace';
+ * import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@cl-light-ds/ui/components/dropdown-menu';
+ * import { Ellipsis } from '@lucide/astro';
+ * ---
+ *
+ * <WorkspaceCard
+ *   name={ws.name}
+ *   href={`/w/${ws.id}`}
+ *   color={ws.color}
+ *   icon={ws.icon}
+ *   opened="2 hours ago"
+ *   lastEditedBy="Ana Silva"
+ *   recordings={128}
+ *   favorite={ws.starred}
+ *   data-workspace-id={ws.id}
+ * >
+ *   <DropdownMenu slot="actions">
+ *     <DropdownMenuTrigger variant="ghost" size="icon-sm" tailIcon={false} aria-label={`Actions for ${ws.name}`}>
+ *       <Ellipsis />
+ *     </DropdownMenuTrigger>
+ *     <DropdownMenuContent align="end">
+ *       <DropdownMenuItem>Duplicate</DropdownMenuItem>
+ *     </DropdownMenuContent>
+ *   </DropdownMenu>
+ * </WorkspaceCard>
+ * ```
+ *
+ * The name is the card's one link, stretched over it (`after:absolute
+ * after:inset-0`), so the card opens from anywhere; the star and the
+ * `actions` slot sit above it (`relative z-10`) and stay separate controls,
+ * with no interactive element nested in the link. The focus ring goes round
+ * the whole card while the link has keyboard focus.
+ *
+ * The star shows only on a favourite, or while the card is hovered or has
+ * keyboard focus; always on touch screens. It is a `FavoriteToggle`: listen
+ * for its `toggle:change` (`{ pressed }`, bubbling) to save the change.
+ *
+ * Long names and editors truncate, with the full text in `title`.
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { DEFAULT_WORKSPACE_COLOR, type WorkspaceColor } from "@cl-light-ds/ui/lib/workspace-palette";
+import { Card, CardTitle } from "../../card";
+import { FavoriteToggle } from "../../favorite-toggle";
+import type { WorkspaceGlyphName } from "./icons";
+import { workspaceCardTexts, type WorkspaceCardLabels } from "./labels";
+import WorkspaceAvatar from "./WorkspaceAvatar.astro";
+
+interface Props extends Omit<HTMLAttributes<"div">, "class"> {
+  /** Workspace name (required). */
+  name: string;
+  /** Where the card goes: the workspace. */
+  href: string;
+  /** Palette colour. Defaults to blue. */
+  color?: WorkspaceColor;
+  /** Placeholder icon, or `"initial"` (default). */
+  icon?: WorkspaceGlyphName | (string & {});
+  /** When it was last opened, e.g. "2 hours ago" ("Opened {time}"). */
+  opened?: string;
+  /** Who last edited it ("Last edited by {name}"). */
+  lastEditedBy?: string;
+  /** Number of recordings ("{count} recordings"), or a ready-made string. */
+  recordings?: number | string;
+  /** A favourite: the star is filled and always shown. */
+  favorite?: boolean;
+  /** Show the star at all. */
+  showFavorite?: boolean;
+  /** Copy overrides (see `WorkspaceCardLabels`). */
+  labels?: Partial<WorkspaceCardLabels>;
+  class?: string;
+}
+
+const {
+  name,
+  href,
+  color = DEFAULT_WORKSPACE_COLOR,
+  icon = "initial",
+  opened,
+  lastEditedBy,
+  recordings,
+  favorite = false,
+  showFavorite = true,
+  labels,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const text = workspaceCardTexts({ name, opened, lastEditedBy, recordings }, labels);
+const hasActions = Astro.slots.has("actions");
+const hasFooter = Boolean(text.lastEditedBy || text.recordings);
+---
+
+<Card
+  {...rest}
+  interactive
+  data-workspace-card
+  data-color={color}
+  class={cn(
+    "gap-0 p-0",
+    // The stretched link's focus ring, round the whole card.
+    "has-[[data-slot=workspace-card-link]:focus-visible]:border-ring has-[[data-slot=workspace-card-link]:focus-visible]:ring-2 has-[[data-slot=workspace-card-link]:focus-visible]:ring-chart-1",
+    className,
+  )}
+>
+  <div class="flex items-start justify-between gap-3 px-4 pt-4">
+    <WorkspaceAvatar color={color} icon={icon} name={name} shape="square" />
+    {
+      (showFavorite || hasActions) && (
+        <div data-slot="workspace-card-actions" class="relative z-10 flex items-center gap-1">
+          {showFavorite && (
+            <FavoriteToggle
+              label={text.favorite}
+              defaultPressed={favorite}
+              class="not-aria-pressed:opacity-0 group-hover/card:opacity-100 group-has-focus-visible/card:opacity-100 pointer-coarse:opacity-100"
+            />
+          )}
+          <slot name="actions" />
+        </div>
+      )
+    }
+  </div>
+
+  <div class="flex min-w-0 flex-col gap-1 px-4 pt-3 pb-4">
+    <CardTitle class="min-w-0 text-base leading-6">
+      <a
+        href={href}
+        title={name}
+        data-slot="workspace-card-link"
+        class="block truncate rounded-sm outline-none after:absolute after:inset-0 after:rounded-lg"
+      >
+        {name}
+      </a>
+    </CardTitle>
+    {text.opened && <p class="text-muted-foreground text-sm">{text.opened}</p>}
+  </div>
+
+  {
+    hasFooter && (
+      <div class="mx-4 flex items-center justify-between gap-2 border-t py-3 text-xs text-muted-foreground">
+        <p class="min-w-0 truncate" title={text.lastEditedBy || undefined}>
+          {text.lastEditedBy}
+        </p>
+        {text.recordings && <p class="shrink-0" data-slot="workspace-card-recordings">{text.recordings}</p>}
+      </div>
+    )
+  }
+</Card>

package/src/components/organisms/workspace/WorkspaceGlyph.astro

@@ -0,0 +1,62 @@
+---
+/**
+ * @component WorkspaceGlyph
+ * @title Workspace Glyph
+ * @description Organism part. What a workspace avatar shows: one of its placeholder icons, or the first letter of its name when the glyph is `initial`. The letter is centred in a box the size of the icon, so it sits in the middle of the avatar at every size.
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { WorkspaceGlyph } from '@cl-light-ds/ui/components/organisms/workspace';
+ * ---
+ *
+ * <WorkspaceGlyph icon="initial" name="Acme Logistics" class="size-5 text-base" />
+ * <WorkspaceGlyph icon="truck" class="size-5" />
+ * ```
+ *
+ * `class` sizes the icon, or the letter's box and its font size (give both a
+ * `size-*` and a `text-*`). Colour comes from `currentColor`.
+ *
+ * Hooks for scripts (e.g. an icon picker that swaps the glyph as you pick):
+ * `data-glyph` is the current glyph name, `data-slot="workspace-glyph-initial"`
+ * holds the letter.
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { DEFAULT_WORKSPACE_ICON, workspaceInitial, type WorkspaceGlyphName } from "./icons";
+import WorkspaceIcon from "./WorkspaceIcon.astro";
+
+interface Props extends Omit<HTMLAttributes<"span">, "class"> {
+  /** An icon name, or `"initial"` for the first letter of `name`. */
+  icon: WorkspaceGlyphName | (string & {});
+  /** The workspace name, for the initial. With no name the initial falls back to the default icon. */
+  name?: string;
+  /** Size of the icon, or of the letter's box (add a `text-*` for the letter). */
+  class?: string;
+  /** Lucide stroke width for icons. */
+  strokeWidth?: number;
+}
+
+const { icon, name = "", class: className = "", strokeWidth, ...rest } = Astro.props as Props;
+const initial = workspaceInitial(name);
+const showInitial = icon === "initial" && initial !== "";
+const iconName = icon === "initial" ? DEFAULT_WORKSPACE_ICON : icon;
+---
+
+<span {...rest} data-slot="workspace-glyph" data-glyph={icon} class="flex items-center justify-center">
+  {
+    showInitial ? (
+      <span
+        data-slot="workspace-glyph-initial"
+        class={cn("flex size-4 items-center justify-center text-sm leading-none font-semibold", className)}
+        aria-hidden="true"
+      >
+        {initial}
+      </span>
+    ) : (
+      <WorkspaceIcon name={iconName} class={className} strokeWidth={strokeWidth} />
+    )
+  }
+</span>

package/src/components/organisms/workspace/WorkspaceIcon.astro

@@ -0,0 +1,42 @@
+---
+/**
+ * @component WorkspaceIcon
+ * @title Workspace Icon
+ * @description Organism part. One of the 27 workspace placeholder Lucide icons, by name. Unknown names fall back to a building. Always decorative.
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { WorkspaceIcon } from '@cl-light-ds/ui/components/organisms/workspace';
+ * ---
+ *
+ * <WorkspaceIcon name="rocket" class="size-5" />
+ * ```
+ */
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { resolveWorkspaceIcon, type WorkspaceIconName } from "./icons";
+
+interface Props {
+  /** Icon name from `WORKSPACE_ICONS`. Unknown names show the building. */
+  name: WorkspaceIconName | (string & {});
+  /** Lucide stroke width; thinner reads better at large sizes. */
+  strokeWidth?: number;
+  class?: string;
+  /** Other SVG attributes pass through to the icon. */
+  [attribute: string]: unknown;
+}
+
+const { name, strokeWidth = 2, class: className = "", ...rest } = Astro.props as Props;
+const Icon = resolveWorkspaceIcon(name);
+---
+
+<Icon
+  {...rest}
+  data-slot="workspace-icon"
+  data-icon={name}
+  class={cn("size-4 shrink-0", className)}
+  stroke-width={strokeWidth}
+  aria-hidden="true"
+/>