willa-workspace 0.0.3-alpha.2739b3e

package/example/src/catalog/defineDoc.tsx

@@ -0,0 +1,352 @@
+import { unindent } from "aidly";
+import { createElement, type ComponentType, type ReactNode } from "react";
+
+import type { ComponentDoc, PropRow } from "#example/catalog/types";
+
+type DemoComponent = ComponentType<any>;
+
+export type DemoElement = {
+  name: string;
+  component: DemoComponent;
+  props?: Record<string, unknown>;
+  children?: ReactNode | Array<DemoElement>;
+};
+
+type ComponentDocInput = {
+  id: string;
+  name: string;
+  displayName?: string;
+  category?: ComponentDoc["category"];
+  packageName: string;
+  description: string;
+  imports: Array<{ name: string; from: string }>;
+  css: string;
+  demo: DemoElement;
+  code: string;
+  props: Array<PropRow>;
+  propGroups?: ComponentDoc["propGroups"];
+  sections?: Array<ComponentDocSectionInput>;
+};
+
+type ComponentDocSectionInput = {
+  title: string;
+  code: string;
+  content: ReactNode;
+};
+
+const willaDemoImportNames = new Set([
+  "Alert",
+  "Anchor",
+  "AttachmentList",
+  "AudioEmbed",
+  "AudioLink",
+  "AppShell",
+  "Avatar",
+  "Badge",
+  "BorderBeam",
+  "Breadcrumb",
+  "Button",
+  "Calendar",
+  "Callout",
+  "Carousel",
+  "Card",
+  "ChatMessage",
+  "ChatThread",
+  "Checkbox",
+  "Citation",
+  "CodeBlock",
+  "CodeTabs",
+  "ColorPicker",
+  "Comment",
+  "CommentInput",
+  "CommentList",
+  "CopyButton",
+  "Composer",
+  "Container",
+  "ContextPanel",
+  "DatePicker",
+  "Collapse",
+  "TimePicker",
+  "DescriptionList",
+  "Dialog",
+  "DiffViewer",
+  "Download",
+  "Drawer",
+  "EmptyState",
+  "EnglishCards",
+  "FeedbackBar",
+  "FileCard",
+  "FileCardIcon",
+  "FilePreview",
+  "FileTree",
+  "FloatButton",
+  "FloatButtonGroup",
+  "Form",
+  "FormActions",
+  "FormField",
+  "FilterBar",
+  "FormGroup",
+  "FormMessage",
+  "GenerationCard",
+  "GitHubMention",
+  "GitHubRepo",
+  "Grid",
+  "Group",
+  "ContextWindowMeter",
+  "HumanApprovalCard",
+  "IconButton",
+  "Image",
+  "ImageGallery",
+  "Input",
+  "InputPanel",
+  "Kbd",
+  "KbdShortcut",
+  "Lightbox",
+  "List",
+  "LogoWall",
+  "Mdx",
+  "Menu",
+  "MessageActions",
+  "MessageList",
+  "Masonry",
+  "MathExpression",
+  "MentionInput",
+  "ModelSelector",
+  "NumberInput",
+  "PageHeader",
+  "Panel",
+  "Pagination",
+  "Picker",
+  "Poem",
+  "Popover",
+  "Progress",
+  "PromptInput",
+  "PromptTemplatePicker",
+  "ProfileCard",
+  "QRCode",
+  "Radio",
+  "Rate",
+  "RangeInput",
+  "ReasoningSteps",
+  "ResizablePanel",
+  "Result",
+  "SearchInput",
+  "Select",
+  "SelectionBar",
+  "Segmented",
+  "Separator",
+  "ScheduleCalendar",
+  "SectionHeader",
+  "SidebarLayout",
+  "SiteFooter",
+  "SiteNav",
+  "Skeleton",
+  "SourceCard",
+  "Spinner",
+  "SplitPane",
+  "Stack",
+  "Statistic",
+  "Step",
+  "Steps",
+  "SuggestionChips",
+  "Switch",
+  "Tag",
+  "TagInput",
+  "Table",
+  "Tabs",
+  "TextArea",
+  "ThinkingIndicator",
+  "Timeline",
+  "Toast",
+  "ToolCallCard",
+  "Toolbar",
+  "Tooltip",
+  "Tour",
+  "Tree",
+  "TreeSelect",
+  "Typography",
+  "Upload",
+  "VideoEmbed",
+  "VideoLink",
+  "Watermark",
+  "WebEmbed",
+  "XPostEmbed",
+]);
+
+export function defineDoc(input: ComponentDocInput) {
+  return {
+    id: input.id,
+    name: input.name,
+    displayName: input.displayName,
+    category: input.category ?? "content",
+    packageName: input.packageName,
+    description: input.description,
+    preview: renderDemoElement(input.demo),
+    code: completeDemoCode(input, unindent(input.code)),
+    props: input.props,
+    propGroups: input.propGroups,
+    sections: input.sections?.map((section) => ({
+      ...section,
+      code: createSectionCode(input, section),
+    })),
+  };
+}
+
+const renderDemoElement = (element: DemoElement) => {
+  const children = Array.isArray(element.children)
+    ? element.children.map((child, index) =>
+        isDemoElement(child) ? (
+          <DemoElementRenderer key={`${child.name}-${index}`} element={child} />
+        ) : (
+          child
+        ),
+      )
+    : element.children;
+
+  if (typeof children === "undefined") {
+    return createElement(element.component, element.props);
+  }
+  return createElement(element.component, element.props, children);
+};
+
+const isDemoElement = (
+  value: ReactNode | DemoElement,
+): value is DemoElement => {
+  return Boolean(
+    value &&
+    typeof value === "object" &&
+    "name" in value &&
+    "component" in value,
+  );
+};
+
+const DemoElementRenderer = ({ element }: { element: DemoElement }) => {
+  return <>{renderDemoElement(element)}</>;
+};
+
+const createSectionCode = (
+  input: ComponentDocInput,
+  section: ComponentDocSectionInput,
+) => {
+  return completeDemoCode(input, unindent(section.code));
+};
+
+const completeDemoCode = (input: ComponentDocInput, code: string) => {
+  const body = unindent(code);
+  const importedNames = getImportedNames(body);
+  const jsxNames = getJsxComponentNames(body);
+  const referencedNames = getReferencedNames(body);
+  const importLines = createImportLines(
+    input.imports
+      .flatMap((item) =>
+        parseImportNames(item.name).map((name) => ({
+          from: item.from,
+          name,
+        })),
+      )
+      .filter((item) => !importedNames.has(item.name))
+      .filter((item) => referencedNames.has(item.name)),
+  );
+  const inferredImportLines = Array.from(jsxNames)
+    .filter((name) => shouldInferWillaImport(name))
+    .filter((name) => !importedNames.has(name))
+    .filter(
+      (name) =>
+        !input.imports.some((item) =>
+          parseImportNames(item.name).includes(name),
+        ),
+    )
+    .sort()
+    .map((name) => `import { ${name} } from "willa/${name}";`);
+  const cssLines = [
+    input.css,
+    ...Array.from(jsxNames)
+      .filter(shouldInferWillaImport)
+      .map((name) => `willa/${name}.css`),
+  ]
+    .filter(shouldInferCssImport)
+    .filter((path, index, paths) => paths.indexOf(path) === index)
+    .filter(
+      (path) => !body.includes(`"${path}"`) && !body.includes(`'${path}'`),
+    )
+    .map((path) => `import "${path}";`);
+  const prefix = [...importLines, ...inferredImportLines, ...cssLines];
+
+  if (prefix.length === 0) return body;
+
+  return unindent([prefix.join("\n"), "", body].join("\n"));
+};
+
+const getImportedNames = (code: string) => {
+  const names = new Set<string>();
+  const importPattern = /import\s*\{([^}]+)\}\s*from\s*["'][^"']+["']/g;
+
+  for (const match of code.matchAll(importPattern)) {
+    for (const part of match[1].split(",")) {
+      const name = part
+        .trim()
+        .replace(/^type\s+/, "")
+        .split(/\s+as\s+/)[0]
+        .trim();
+
+      if (name) names.add(name);
+    }
+  }
+
+  return names;
+};
+
+const getCodeWithoutImports = (code: string) => {
+  return code.replace(/import[\s\S]*?from\s*["'][^"']+["'];?/g, "");
+};
+
+const getReferencedNames = (code: string) => {
+  const names = new Set<string>();
+  const importFreeCode = getCodeWithoutImports(code);
+  const referencePattern = /\b[A-Za-z_$][A-Za-z0-9_$]*\b/g;
+
+  for (const match of importFreeCode.matchAll(referencePattern)) {
+    names.add(match[0]);
+  }
+
+  return names;
+};
+
+const getJsxComponentNames = (code: string) => {
+  const names = new Set<string>();
+  const jsxPattern = /<([A-Z][A-Za-z0-9]*)\b/g;
+
+  for (const match of code.matchAll(jsxPattern)) {
+    names.add(match[1]);
+  }
+
+  return names;
+};
+
+const parseImportNames = (value: string) => {
+  return value
+    .split(",")
+    .map((name) => name.trim())
+    .filter(Boolean);
+};
+
+const createImportLines = (imports: Array<{ name: string; from: string }>) => {
+  const groups = new Map<string, Array<string>>();
+
+  for (const item of imports) {
+    groups.set(item.from, [...(groups.get(item.from) ?? []), item.name]);
+  }
+
+  return Array.from(groups.entries()).map(([from, names]) => {
+    const uniqueNames = Array.from(new Set(names)).sort();
+    return `import { ${uniqueNames.join(", ")} } from "${from}";`;
+  });
+};
+
+const shouldInferWillaImport = (name: string) => {
+  return willaDemoImportNames.has(name);
+};
+
+const shouldInferCssImport = (path: string) => {
+  return !path.includes("/Step.css");
+};

package/example/src/catalog/registry.ts

@@ -0,0 +1,206 @@
+import { sortStrings } from "aidly";
+
+import type { ComponentDoc, ComponentDocEntry } from "#example/catalog/types";
+
+type DocCategory = ComponentDocEntry["category"];
+type DocModule = { default: ComponentDoc };
+type DocSpecGroups = Record<DocCategory, Array<string>>;
+type ResolvedDocSpec = readonly [name: string, category: DocCategory];
+
+const docModules = import.meta.glob<DocModule>("../docs/*.demo.tsx");
+
+const docSpecGroups = {
+  ai: [
+    "AttachmentList",
+    "ChatMessage",
+    "Composer",
+    "ContextPanel",
+    "ContextWindowMeter",
+    "ConversationList",
+    "FeedbackBar",
+    "GenerationCard",
+    "HumanApprovalCard",
+    "MessageActions",
+    "MessageList",
+    "ModelSelector",
+    "PromptInput",
+    "PromptTemplatePicker",
+    "ReasoningSteps",
+    "SuggestionChips",
+    "ThinkingIndicator",
+    "ToolCallCard",
+    "TraceViewer",
+  ],
+  widgets: [
+    "AudioEmbed",
+    "AudioLink",
+    "EnglishCards",
+    "GitHubMention",
+    "GitHubRepo",
+    "LogoWall",
+    "Mdx",
+    "Poem",
+    "ProfileCard",
+    "QRCode",
+    "SiteFooter",
+    "SiteNav",
+    "VideoEmbed",
+    "VideoLink",
+    "WebEmbed",
+    "XPostEmbed",
+  ],
+  form: [
+    "Calendar",
+    "Checkbox",
+    "ColorPicker",
+    "DatePicker",
+    "TimePicker",
+    "Form",
+    "FormActions",
+    "FormField",
+    "FilterBar",
+    "FormGroup",
+    "FormMessage",
+    "Input",
+    "NumberInput",
+    "Picker",
+    "Radio",
+    "Rate",
+    "RangeInput",
+    "ScheduleCalendar",
+    "SearchInput",
+    "Select",
+    "Switch",
+    "TagInput",
+    "TextArea",
+    "TreeSelect",
+    "Upload",
+  ],
+  layout: [
+    "AppShell",
+    "BorderBeam",
+    "Card",
+    "Container",
+    "Grid",
+    "Group",
+    "Masonry",
+    "PageHeader",
+    "Panel",
+    "Separator",
+    "SectionHeader",
+    "SidebarLayout",
+    "SplitPane",
+    "Stack",
+  ],
+  content: [
+    "Alert",
+    "Anchor",
+    "Avatar",
+    "Badge",
+    "Breadcrumb",
+    "Button",
+    "Callout",
+    "Carousel",
+    "ChatThread",
+    "Citation",
+    "CodeBlock",
+    "CodeTabs",
+    "Comment",
+    "CommentInput",
+    "CommentList",
+    "CopyButton",
+    "Collapse",
+    "DescriptionList",
+    "DiffViewer",
+    "Dialog",
+    "Download",
+    "Drawer",
+    "EmptyState",
+    "FileCard",
+    "FilePreview",
+    "FileTree",
+    "FloatButton",
+    "Image",
+    "ImageGallery",
+    "IconButton",
+    "InputPanel",
+    "Kbd",
+    "Lightbox",
+    "List",
+    "MathExpression",
+    "MentionInput",
+    "Menu",
+    "Pagination",
+    "Popover",
+    "Progress",
+    "Result",
+    "SelectionBar",
+    "Segmented",
+    "Skeleton",
+    "SourceCard",
+    "Spinner",
+    "Statistic",
+    "Steps",
+    "Table",
+    "Tag",
+    "Tabs",
+    "Timeline",
+    "Toolbar",
+    "Tour",
+    "Tree",
+    "Toast",
+    "Tooltip",
+    "Typography",
+    "Watermark",
+  ],
+} satisfies DocSpecGroups;
+
+const toKebabCase = (value: string) => {
+  return value
+    .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+    .replace(/([A-Z]+)([A-Z][a-z])/g, "$1-$2")
+    .toLowerCase();
+};
+
+const defineDocEntry = ([name, category]: ResolvedDocSpec) => {
+  const modulePath = `../docs/${name}.demo.tsx`;
+
+  return {
+    id: toKebabCase(name),
+    name,
+    category,
+    load: async () => {
+      const loadModule = docModules[modulePath];
+      if (!loadModule) {
+        throw new Error(`Missing component demo module: ${modulePath}`);
+      }
+
+      const module = await loadModule();
+      if (module.default.name !== name) {
+        throw new Error(`Missing component doc in module: ${modulePath}`);
+      }
+
+      return module.default;
+    },
+  };
+};
+
+const componentDocs = Object.entries(docSpecGroups)
+  .flatMap(([category, specs]) =>
+    specs.map(
+      (name) => [name, category as DocCategory] satisfies ResolvedDocSpec,
+    ),
+  )
+  .map(defineDocEntry);
+
+const componentDocsByName = new Map(
+  componentDocs.map((doc) => [doc.name, doc]),
+);
+
+export const componentDocRegistry = sortStrings(
+  componentDocs.map((doc) => doc.name),
+).map((name) => componentDocsByName.get(name)!);
+
+export function loadComponentDoc(entry: ComponentDocEntry) {
+  return entry.load() as Promise<ComponentDoc>;
+}

package/example/src/catalog/types.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+
+export type PropRow = {
+  name: string;
+  type: string;
+  defaultValue?: string;
+  required?: boolean;
+  group?: string;
+  description: string;
+};
+
+export type ComponentDoc = {
+  id: string;
+  name: string;
+  displayName?: string;
+  category: "content" | "form" | "layout" | "ai" | "widgets";
+  packageName: string;
+  description: string;
+  preview: ReactNode;
+  code: string;
+  props: Array<PropRow>;
+  propGroups?: Array<{
+    title: string;
+    description: string;
+  }>;
+  sections?: Array<{
+    title: string;
+    code: string;
+    content: ReactNode;
+  }>;
+};
+
+export type ComponentDocEntry = Pick<
+  ComponentDoc,
+  "id" | "name" | "category"
+> & {
+  load: () => Promise<ComponentDoc>;
+};