willa-workspace 0.0.3-alpha.2739b3e

package/packages/willa-content/src/components/EmptyState/index.tsx

@@ -0,0 +1,78 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import classNames from "classnames";
+
+export type EmptyStateVariant = "plain" | "soft" | "outline";
+export type EmptyStateSize = "sm" | "md" | "lg";
+export type EmptyStateAlign = "start" | "center";
+
+export type EmptyStateProps = {
+  title: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+  image?: ReactNode;
+  actions?: ReactNode;
+  footer?: ReactNode;
+  variant?: EmptyStateVariant;
+  size?: EmptyStateSize;
+  align?: EmptyStateAlign;
+  compact?: boolean;
+  className?: string;
+  children?: ReactNode;
+} & Omit<HTMLAttributes<HTMLElement>, "title">;
+
+export function EmptyState(props: EmptyStateProps) {
+  const {
+    title,
+    description,
+    icon,
+    image,
+    actions,
+    footer,
+    variant = "soft",
+    size = "md",
+    align = "center",
+    compact = false,
+    className,
+    children,
+    ...sectionProps
+  } = props;
+
+  return (
+    <section
+      {...sectionProps}
+      className={classNames(
+        "willa-empty-state",
+        `willa-empty-state--${variant}`,
+        `willa-empty-state--${size}`,
+        `willa-empty-state--${align}`,
+        compact && "willa-empty-state--compact",
+        className,
+      )}
+    >
+      {image ? (
+        <div className="willa-empty-state-image" aria-hidden="true">
+          {image}
+        </div>
+      ) : icon ? (
+        <div className="willa-empty-state-icon" aria-hidden="true">
+          {icon}
+        </div>
+      ) : null}
+      <div className="willa-empty-state-content">
+        <h3 className="willa-empty-state-title">{title}</h3>
+        {description ? (
+          <p className="willa-empty-state-description">{description}</p>
+        ) : null}
+        {children ? (
+          <div className="willa-empty-state-body">{children}</div>
+        ) : null}
+      </div>
+      {actions ? (
+        <div className="willa-empty-state-actions">{actions}</div>
+      ) : null}
+      {footer ? <div className="willa-empty-state-footer">{footer}</div> : null}
+    </section>
+  );
+}
+
+EmptyState.displayName = "EmptyState";

package/packages/willa-content/src/components/FileCard/fileIcon.tsx

@@ -0,0 +1,215 @@
+import type { CSSProperties, ReactNode } from "react";
+import classNames from "classnames";
+
+export type FileCardTone =
+  | "excel"
+  | "word"
+  | "pdf"
+  | "ppt"
+  | "image"
+  | "audio"
+  | "video"
+  | "archive"
+  | "code"
+  | "text"
+  | "neutral";
+
+export type FileCardIconSize = "sm" | "md" | "lg";
+
+export type FileCardIconProps = {
+  name: string;
+  extension?: string;
+  tone?: FileCardTone;
+  icon?: ReactNode;
+  size?: FileCardIconSize;
+  className?: string;
+};
+
+const extensionToneMap: Record<string, FileCardTone> = {
+  aac: "audio",
+  aiff: "audio",
+  avi: "video",
+  avif: "image",
+  bmp: "image",
+  csv: "excel",
+  doc: "word",
+  docx: "word",
+  flac: "audio",
+  gif: "image",
+  gz: "archive",
+  heic: "image",
+  java: "code",
+  jpeg: "image",
+  jpg: "image",
+  js: "code",
+  json: "code",
+  m4a: "audio",
+  mkv: "video",
+  md: "text",
+  mov: "video",
+  mp3: "audio",
+  mp4: "video",
+  ogg: "audio",
+  pdf: "pdf",
+  png: "image",
+  ppt: "ppt",
+  pptx: "ppt",
+  py: "code",
+  rar: "archive",
+  svg: "image",
+  ts: "code",
+  tsx: "code",
+  txt: "text",
+  wav: "audio",
+  webm: "video",
+  webp: "image",
+  xls: "excel",
+  xlsx: "excel",
+  zip: "archive",
+};
+
+const toneVariableMap: Record<
+  FileCardTone,
+  { background: string; text: string }
+> = {
+  audio: {
+    background: "var(--willa-file-card-audio-bg)",
+    text: "var(--willa-file-card-audio-text)",
+  },
+  archive: {
+    background: "var(--willa-file-card-archive-bg)",
+    text: "var(--willa-file-card-archive-text)",
+  },
+  code: {
+    background: "var(--willa-file-card-code-bg)",
+    text: "var(--willa-file-card-code-text)",
+  },
+  excel: {
+    background: "var(--willa-file-card-excel-bg)",
+    text: "var(--willa-file-card-excel-text)",
+  },
+  image: {
+    background: "var(--willa-file-card-image-bg)",
+    text: "var(--willa-file-card-image-text)",
+  },
+  neutral: {
+    background: "var(--willa-file-card-neutral-bg)",
+    text: "var(--willa-file-card-neutral-text)",
+  },
+  pdf: {
+    background: "var(--willa-file-card-pdf-bg)",
+    text: "var(--willa-file-card-pdf-text)",
+  },
+  ppt: {
+    background: "var(--willa-file-card-ppt-bg)",
+    text: "var(--willa-file-card-ppt-text)",
+  },
+  text: {
+    background: "var(--willa-file-card-neutral-icon-bg)",
+    text: "var(--willa-file-card-neutral-icon-text)",
+  },
+  video: {
+    background: "var(--willa-file-card-video-bg)",
+    text: "var(--willa-file-card-video-text)",
+  },
+  word: {
+    background: "var(--willa-file-card-word-bg)",
+    text: "var(--willa-file-card-word-text)",
+  },
+};
+
+type FileCardIconStyle = CSSProperties & {
+  "--willa-file-card-icon-bg": string;
+  "--willa-file-card-icon-text": string;
+};
+
+export function FileCardIcon(props: FileCardIconProps) {
+  const { size = "md" } = props;
+  const fileExtension = normalizeFileExtension(props.extension ?? props.name, {
+    preserveBareExtension: Boolean(props.extension),
+  });
+  const resolvedTone = resolveFileCardTone(props);
+  const iconLabel = getIconLabel(fileExtension, resolvedTone);
+  const toneVariables = toneVariableMap[resolvedTone];
+  const iconStyle: FileCardIconStyle = {
+    "--willa-file-card-icon-bg": toneVariables.background,
+    "--willa-file-card-icon-text": toneVariables.text,
+  };
+
+  return (
+    <span
+      className={classNames(
+        "willa-file-card-icon",
+        `willa-file-card-icon--${size}`,
+        `willa-file-card--${resolvedTone}`,
+        iconLabel.length >= 4 && "willa-file-card-icon--wide-label",
+        props.className,
+      )}
+      style={iconStyle}
+      aria-hidden="true"
+    >
+      {props.icon ?? (
+        <span className="willa-file-card-icon-label">{iconLabel}</span>
+      )}
+    </span>
+  );
+}
+
+export function resolveFileCardTone(options: {
+  name: string;
+  extension?: string;
+  tone?: FileCardTone;
+}) {
+  if (options.tone) return options.tone;
+
+  const extension = normalizeFileExtension(options.extension ?? options.name, {
+    preserveBareExtension: Boolean(options.extension),
+  });
+  return extensionToneMap[extension] ?? "neutral";
+}
+
+const normalizeFileExtension = (
+  value: string,
+  options: { preserveBareExtension?: boolean } = {},
+) => {
+  const normalizedValue = value.trim().toLowerCase();
+  const parts = normalizedValue.split(".").filter(Boolean);
+
+  if (normalizedValue.includes(".")) {
+    const extension = parts[parts.length - 1]?.match(/^[a-z0-9]+/)?.[0];
+    return extension ?? "";
+  }
+  if (options.preserveBareExtension) {
+    return normalizedValue;
+  }
+  return extensionToneMap[normalizedValue] ? normalizedValue : "";
+};
+
+const extensionLabelMap: Record<string, string> = {
+  javascript: "JS",
+  jpeg: "JPG",
+  markdown: "MD",
+  typescript: "TS",
+};
+
+const toneLabelMap: Record<FileCardTone, string> = {
+  archive: "ZIP",
+  audio: "AUD",
+  code: "CODE",
+  excel: "XLS",
+  image: "IMG",
+  neutral: "FILE",
+  pdf: "PDF",
+  ppt: "PPT",
+  text: "TXT",
+  video: "VID",
+  word: "DOC",
+};
+
+const getIconLabel = (extension: string, tone: FileCardTone) => {
+  if (!extension) return toneLabelMap[tone];
+  const normalizedLabel = extensionLabelMap[extension];
+  if (normalizedLabel) return normalizedLabel;
+  if (extension.length <= 4) return extension.toUpperCase();
+  return toneLabelMap[tone];
+};

package/packages/willa-content/src/components/FileCard/index.css

@@ -0,0 +1,242 @@
+.willa-file-card {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 0.82rem;
+  align-items: center;
+  box-sizing: border-box;
+  width: min(100%, var(--willa-file-card-width, 18rem));
+  min-height: 4.25rem;
+  padding: 0.86rem 1rem;
+  border: 1px solid var(--willa-file-card-border);
+  border-radius: 8px;
+  background: var(--willa-file-card-bg);
+  color: var(--willa-file-card-text);
+  font-family: var(--willa-body-font);
+  text-decoration: none;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    box-shadow 160ms ease,
+    transform 160ms ease;
+}
+
+.willa-file-card--interactive {
+  cursor: pointer;
+}
+
+.willa-file-card--interactive:hover {
+  border-color: var(--willa-file-card-border-hover);
+  background: var(--willa-file-card-bg-hover);
+  box-shadow: var(--willa-file-card-shadow-hover);
+  color: var(--willa-file-card-text);
+  transform: translateY(-1px);
+}
+
+.willa-file-card:focus-visible {
+  outline: 2px solid var(--willa-focus-ring);
+  outline-offset: 2px;
+}
+
+.willa-file-card-icon {
+  --willa-file-card-icon-width: 1.78rem;
+  --willa-file-card-icon-height: 1.88rem;
+  --willa-file-card-icon-radius: 0.3rem;
+  --willa-file-card-icon-font-size: 0.48rem;
+  --willa-file-card-icon-fold-size: 0.42rem;
+  --willa-file-card-icon-label-gutter: 0.22rem;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  flex: none;
+  width: var(--willa-file-card-icon-width);
+  height: var(--willa-file-card-icon-height);
+  border-radius: var(--willa-file-card-icon-radius);
+  background: var(--willa-file-card-icon-bg);
+  color: var(--willa-file-card-icon-text);
+  font-size: var(--willa-file-card-icon-font-size);
+  font-weight: 760;
+  line-height: 1;
+  letter-spacing: 0;
+  text-transform: uppercase;
+  overflow: hidden;
+}
+
+.willa-file-card-icon::after {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  width: var(--willa-file-card-icon-fold-size);
+  height: var(--willa-file-card-icon-fold-size);
+  background: var(--willa-file-card-icon-fold);
+  clip-path: polygon(100% 0, 0 0, 100% 100%);
+  content: "";
+}
+
+.willa-file-card-icon > svg,
+.willa-file-card-icon > img {
+  position: relative;
+  z-index: 1;
+  display: block;
+  width: 52%;
+  height: 52%;
+}
+
+.willa-file-card-icon-label {
+  position: relative;
+  z-index: 1;
+  display: block;
+  max-width: 100%;
+  padding-inline: var(--willa-file-card-icon-label-gutter);
+  box-sizing: border-box;
+  text-align: center;
+}
+
+.willa-file-card-icon--wide-label {
+  --willa-file-card-icon-font-size: 0.4rem;
+  --willa-file-card-icon-label-gutter: 0.12rem;
+}
+
+.willa-file-card-icon--sm {
+  --willa-file-card-icon-width: 1.62rem;
+  --willa-file-card-icon-height: 1.7rem;
+  --willa-file-card-icon-radius: 0.3rem;
+  --willa-file-card-icon-font-size: 0.4rem;
+  --willa-file-card-icon-fold-size: 0.42rem;
+  --willa-file-card-icon-label-gutter: 0.14rem;
+}
+
+.willa-file-card-icon--sm.willa-file-card-icon--wide-label {
+  --willa-file-card-icon-font-size: 0.34rem;
+  --willa-file-card-icon-label-gutter: 0.1rem;
+}
+
+.willa-file-card-icon--md {
+  --willa-file-card-icon-width: 1.78rem;
+  --willa-file-card-icon-height: 1.88rem;
+  --willa-file-card-icon-radius: 0.3rem;
+  --willa-file-card-icon-font-size: 0.44rem;
+  --willa-file-card-icon-fold-size: 0.42rem;
+  --willa-file-card-icon-label-gutter: 0.16rem;
+}
+
+.willa-file-card-icon--md.willa-file-card-icon--wide-label {
+  --willa-file-card-icon-font-size: 0.38rem;
+  --willa-file-card-icon-label-gutter: 0.12rem;
+}
+
+.willa-file-card-icon--lg {
+  --willa-file-card-icon-width: 2.28rem;
+  --willa-file-card-icon-height: 2.6rem;
+  --willa-file-card-icon-radius: 0.36rem;
+  --willa-file-card-icon-font-size: 0.66rem;
+  --willa-file-card-icon-fold-size: 0.62rem;
+  --willa-file-card-icon-label-gutter: 0.2rem;
+}
+
+.willa-file-card-icon--lg.willa-file-card-icon--wide-label {
+  --willa-file-card-icon-font-size: 0.56rem;
+  --willa-file-card-icon-label-gutter: 0.14rem;
+}
+
+.willa-file-card-content {
+  display: grid;
+  min-width: 0;
+  gap: 0.25rem;
+}
+
+.willa-file-card-name {
+  overflow: hidden;
+  color: var(--willa-file-card-title);
+  font-size: 0.94rem;
+  font-weight: 520;
+  line-height: 1.32;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.willa-file-card-meta {
+  overflow: hidden;
+  color: var(--willa-file-card-meta);
+  font-size: 0.82rem;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.willa-file-card--excel {
+  --willa-file-card-icon-bg: var(--willa-file-card-excel-bg);
+  --willa-file-card-icon-text: var(--willa-file-card-excel-text);
+}
+
+.willa-file-card--word {
+  --willa-file-card-icon-bg: var(--willa-file-card-word-bg);
+  --willa-file-card-icon-text: var(--willa-file-card-word-text);
+}
+
+.willa-file-card--pdf {
+  --willa-file-card-icon-bg: var(--willa-file-card-pdf-bg);
+  --willa-file-card-icon-text: var(--willa-file-card-pdf-text);
+}
+
+.willa-file-card--ppt {
+  --willa-file-card-icon-bg: var(--willa-file-card-ppt-bg);
+  --willa-file-card-icon-text: var(--willa-file-card-ppt-text);
+}
+
+.willa-file-card--image {
+  --willa-file-card-icon-bg: var(--willa-file-card-image-bg);
+  --willa-file-card-icon-text: var(--willa-file-card-image-text);
+}
+
+.willa-file-card--audio {
+  --willa-file-card-icon-bg: var(--willa-file-card-audio-bg);
+  --willa-file-card-icon-text: var(--willa-file-card-audio-text);
+}
+
+.willa-file-card--video {
+  --willa-file-card-icon-bg: var(--willa-file-card-video-bg);
+  --willa-file-card-icon-text: var(--willa-file-card-video-text);
+}
+
+.willa-file-card--archive {
+  --willa-file-card-icon-bg: var(--willa-file-card-archive-bg);
+  --willa-file-card-icon-text: var(--willa-file-card-archive-text);
+}
+
+.willa-file-card--code {
+  --willa-file-card-icon-bg: var(--willa-file-card-code-bg);
+  --willa-file-card-icon-text: var(--willa-file-card-code-text);
+}
+
+.willa-file-card--text {
+  --willa-file-card-icon-bg: var(--willa-file-card-neutral-icon-bg);
+  --willa-file-card-icon-text: var(--willa-file-card-neutral-icon-text);
+}
+
+.willa-file-card--neutral {
+  --willa-file-card-icon-bg: var(--willa-file-card-neutral-bg);
+  --willa-file-card-icon-text: var(--willa-file-card-neutral-text);
+}
+
+@media (hover: none) {
+  .willa-file-card--interactive:hover {
+    transform: none;
+  }
+}
+
+@media (max-width: 767px) {
+  .willa-file-card {
+    --willa-file-card-width: 100%;
+
+    min-height: 4rem;
+    padding: 0.78rem 0.86rem;
+  }
+
+  .willa-file-card > .willa-file-card-icon {
+    --willa-file-card-icon-width: 2.12rem;
+    --willa-file-card-icon-height: 2.42rem;
+  }
+}

package/packages/willa-content/src/components/FileCard/index.tsx

@@ -0,0 +1,133 @@
+import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+import classNames from "classnames";
+
+import {
+  FileCardIcon,
+  resolveFileCardTone,
+  type FileCardTone,
+} from "#content/components/FileCard/fileIcon";
+
+export { FileCardIcon } from "#content/components/FileCard/fileIcon";
+export type {
+  FileCardIconProps,
+  FileCardIconSize,
+  FileCardTone,
+} from "#content/components/FileCard/fileIcon";
+
+type FileCardBaseProps = {
+  name: string;
+  size?: ReactNode;
+  extension?: string;
+  tone?: FileCardTone;
+  icon?: ReactNode;
+  className?: string;
+};
+
+type FileCardAnchorProps = FileCardBaseProps & {
+  href: string;
+} & Omit<
+    AnchorHTMLAttributes<HTMLAnchorElement>,
+    keyof FileCardBaseProps | "href"
+  >;
+
+type FileCardDivProps = FileCardBaseProps & {
+  href?: undefined;
+} & Omit<HTMLAttributes<HTMLDivElement>, keyof FileCardBaseProps>;
+
+export type FileCardProps = FileCardAnchorProps | FileCardDivProps;
+
+export function FileCard(props: FileCardProps) {
+  if (isFileCardAnchorProps(props)) {
+    const {
+      name,
+      size,
+      extension,
+      tone,
+      icon,
+      className,
+      href,
+      target,
+      rel,
+      ...anchorProps
+    } = props;
+    const resolvedRel = target === "_blank" && !rel ? "noreferrer" : rel;
+
+    return (
+      <a
+        {...anchorProps}
+        className={getFileCardClassName({
+          className,
+          interactive: true,
+          tone: resolveFileCardTone({ name, extension, tone }),
+        })}
+        href={href}
+        target={target}
+        rel={resolvedRel}
+      >
+        {renderFileCardContent({ name, size, extension, icon })}
+      </a>
+    );
+  }
+
+  const { name, size, extension, tone, icon, className, ...divProps } = props;
+
+  return (
+    <div
+      {...divProps}
+      className={getFileCardClassName({
+        className,
+        interactive: false,
+        tone: resolveFileCardTone({ name, extension, tone }),
+      })}
+    >
+      {renderFileCardContent({ name, size, extension, icon })}
+    </div>
+  );
+}
+
+const isFileCardAnchorProps = (
+  props: FileCardProps,
+): props is FileCardAnchorProps => {
+  return typeof props.href === "string";
+};
+
+const getFileCardClassName = (options: {
+  tone: FileCardTone;
+  interactive: boolean;
+  className?: string;
+}) => {
+  return classNames(
+    "willa-file-card",
+    `willa-file-card--${options.tone}`,
+    options.interactive && "willa-file-card--interactive",
+    options.className,
+  );
+};
+
+const renderFileCardContent = (options: {
+  name: string;
+  size?: ReactNode;
+  extension?: string;
+  icon?: ReactNode;
+}) => {
+  return (
+    <>
+      <FileCardIcon
+        extension={options.extension}
+        icon={options.icon}
+        name={options.name}
+        size="lg"
+      />
+      <span className="willa-file-card-content">
+        <span className="willa-file-card-name" title={options.name}>
+          {options.name}
+        </span>
+        {options.size ? (
+          <span className="willa-file-card-meta">{options.size}</span>
+        ) : null}
+      </span>
+    </>
+  );
+};
+
+FileCard.displayName = "FileCard";