mac-human-design 0.1.3 → 0.1.6

package/scripts/verify-base-ui-coverage.mjs

@@ -0,0 +1,277 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const repoRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
+const packageJsonPath = path.join(repoRoot, "node_modules", "@base-ui", "react", "package.json");
+const wrapperPath = path.join(repoRoot, "src", "components", "MacBaseUI.tsx");
+const galleryPath = path.join(repoRoot, "src", "components", "MacBaseUIGallery.tsx");
+const stylesPath = path.join(repoRoot, "src", "styles", "macosBaseUi.css");
+const docsPath = path.join(repoRoot, "docs", "macos-base-ui-coverage.md");
+
+const nonComponentExports = new Set([
+  ".",
+  "esm",
+  "merge-props",
+  "types",
+  "unstable-use-media-query",
+  "use-render",
+]);
+
+const acronymParts = new Map([
+  ["csp", "CSP"],
+  ["otp", "OTP"],
+]);
+
+function readText(filePath) {
+  return fs.readFileSync(filePath, "utf8");
+}
+
+function toMacExportName(family) {
+  return `Mac${family
+    .split("-")
+    .map((part) => acronymParts.get(part) ?? `${part[0].toUpperCase()}${part.slice(1)}`)
+    .join("")}`;
+}
+
+function getBaseUiFamilies() {
+  const packageJson = JSON.parse(readText(packageJsonPath));
+  return Object.keys(packageJson.exports)
+    .filter((exportKey) => exportKey.startsWith("./"))
+    .map((exportKey) => exportKey.slice(2))
+    .filter((exportName) => !exportName.startsWith("internals/"))
+    .filter((exportName) => exportName !== "package.json")
+    .filter((exportName) => !nonComponentExports.has(exportName))
+    .sort();
+}
+
+function getMacExports(source) {
+  return new Set(
+    Array.from(
+      source.matchAll(/^export (?:const|function) (Mac[A-Za-z0-9]+)\b/gm),
+      (match) => match[1],
+    ),
+  );
+}
+
+function getBaseUiParts(family) {
+  const partsPath = path.join(repoRoot, "node_modules", "@base-ui", "react", family, "index.parts.d.ts");
+  if (!fs.existsSync(partsPath)) {
+    return [];
+  }
+
+  const partsSource = readText(partsPath);
+  const parts = new Set();
+
+  for (const match of partsSource.matchAll(/export\s+\{\s*[A-Za-z0-9_$]+\s+as\s+([A-Z][A-Za-z0-9_$]*)\s*\}/g)) {
+    parts.add(match[1]);
+  }
+
+  for (const match of partsSource.matchAll(/export\s+\{\s*([A-Z][A-Za-z0-9_$]*)\s*\}/g)) {
+    parts.add(match[1]);
+  }
+
+  return Array.from(parts).sort();
+}
+
+function getMacObjectPartKeys(source, macExport) {
+  const objectStart = source.match(new RegExp(`export const ${macExport} = \\\\{`));
+  if (!objectStart) {
+    return null;
+  }
+
+  const startIndex = objectStart.index + objectStart[0].length;
+  let depth = 1;
+  let index = startIndex;
+
+  while (index < source.length && depth > 0) {
+    const char = source[index];
+    if (char === "{") {
+      depth += 1;
+    } else if (char === "}") {
+      depth -= 1;
+    }
+    index += 1;
+  }
+
+  const objectBody = source.slice(startIndex, index - 1);
+  return new Set(
+    Array.from(objectBody.matchAll(/^\s*([A-Z][A-Za-z0-9_$]*):/gm), (match) => match[1]),
+  );
+}
+
+function fail(message, details = []) {
+  console.error(message);
+  for (const detail of details) {
+    console.error(`- ${detail}`);
+  }
+  process.exitCode = 1;
+}
+
+const families = getBaseUiFamilies();
+const wrapperSource = readText(wrapperPath);
+const gallerySource = readText(galleryPath);
+const stylesSource = readText(stylesPath);
+const docsSource = readText(docsPath);
+const macExports = getMacExports(wrapperSource);
+
+const missingWrappers = families
+  .map((family) => [family, toMacExportName(family)])
+  .filter(([, macExport]) => !macExports.has(macExport))
+  .map(([family, macExport]) => `${family} -> ${macExport}`);
+
+if (missingWrappers.length > 0) {
+  fail("Missing macOS wrappers for public @base-ui/react component families.", missingWrappers);
+}
+
+const missingPartWrappers = [];
+for (const family of families) {
+  const macExport = toMacExportName(family);
+  const baseParts = getBaseUiParts(family);
+  if (baseParts.length === 0) {
+    continue;
+  }
+
+  const macParts = getMacObjectPartKeys(wrapperSource, macExport);
+  if (!macParts) {
+    continue;
+  }
+
+  for (const part of baseParts) {
+    if (!macParts.has(part)) {
+      missingPartWrappers.push(`${family}.${part} -> ${macExport}.${part}`);
+    }
+  }
+}
+
+if (missingPartWrappers.length > 0) {
+  fail("Missing macOS wrappers for public @base-ui/react namespace parts.", missingPartWrappers);
+}
+
+const missingDocsRows = families
+  .map((family) => [family, toMacExportName(family)])
+  .filter(([family, macExport]) => {
+    return !docsSource.includes(`| \`${family}\` | \`${macExport}\` |`);
+  })
+  .map(([family, macExport]) => `${family} -> ${macExport}`);
+
+if (missingDocsRows.length > 0) {
+  fail("Missing coverage documentation rows.", missingDocsRows);
+}
+
+const requiredVariants = [
+  "MacMotionProvider",
+  "MacPrimaryButton",
+  "MacSecondaryButton",
+  "MacDestructiveButton",
+  "MacPlainButton",
+  "MacIconButton",
+  "MacHelpButton",
+  "MacTextField",
+  "MacSearchField",
+  "MacToolbarToggle",
+  "MacSegmentedToggleGroup",
+  "MacSeparatedSegmentedToggleGroup",
+];
+
+const missingVariants = requiredVariants.filter((variant) => !macExports.has(variant));
+if (missingVariants.length > 0) {
+  fail("Missing expected native macOS variant exports.", missingVariants);
+}
+
+const requiredNestedVariants = [
+  "MacSelect.PopUpButtonTrigger",
+  "MacSelect.PullDownButtonTrigger",
+  "MacDialog.SheetPopup",
+  "MacDrawer.SidebarPopup",
+  "MacToolbar.IconButton",
+];
+
+const missingNestedVariants = requiredNestedVariants.filter((variantPath) => {
+  const [exportName, partName] = variantPath.split(".");
+  return !new RegExp(`export const ${exportName} = [\\s\\S]*?^\\s*${partName}:`, "m").test(
+    wrapperSource,
+  );
+});
+
+if (missingNestedVariants.length > 0) {
+  fail("Missing expected native macOS nested variant exports.", missingNestedVariants);
+}
+
+const missingGalleryCoverage = Array.from(macExports)
+  .sort()
+  .filter((macExport) => !gallerySource.includes(macExport));
+
+if (missingGalleryCoverage.length > 0) {
+  fail("Missing gallery coverage for public macOS wrapper exports.", missingGalleryCoverage);
+}
+
+const wrapperClasses = new Set(
+  Array.from(wrapperSource.matchAll(/"([^"]*hd-mac[^"]*)"/g))
+    .flatMap((match) => match[1].split(/\s+/))
+    .filter(Boolean),
+);
+
+const missingClassStyles = Array.from(wrapperClasses)
+  .sort()
+  .filter((className) => {
+    const escapedClassName = className.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    return !new RegExp(`\\.${escapedClassName}(?![a-zA-Z0-9_-])`).test(stylesSource);
+  });
+
+if (missingClassStyles.length > 0) {
+  fail("Missing CSS selectors for macOS wrapper classes.", missingClassStyles);
+}
+
+const forbiddenPatterns = [
+  /\bfrom\s+["']baseui(?:\/[^"']*)?["']/,
+  /\bbaseui\b/,
+  /\bstyletron\b/i,
+  /Base Web/,
+];
+
+function listFiles(directory, relativePrefix = "") {
+  const files = [];
+  for (const entry of fs.readdirSync(directory, { withFileTypes: true })) {
+    const relativePath = path.join(relativePrefix, entry.name);
+    const absolutePath = path.join(directory, entry.name);
+    if (entry.isDirectory()) {
+      files.push(...listFiles(absolutePath, relativePath));
+    } else if (entry.isFile()) {
+      files.push(relativePath);
+    }
+  }
+  return files;
+}
+
+const sourceFiles = [
+  "package.json",
+  "package-lock.json",
+  "README.md",
+  "docs/macos-base-ui-coverage.md",
+  ...listFiles(path.join(repoRoot, "src")).map((filePath) => path.join("src", filePath)),
+  ...listFiles(path.join(repoRoot, "examples")).map((filePath) => path.join("examples", filePath)),
+];
+
+const forbiddenHits = [];
+for (const relativeFile of sourceFiles) {
+  const absoluteFile = path.join(repoRoot, relativeFile);
+  const text = readText(absoluteFile);
+  for (const pattern of forbiddenPatterns) {
+    if (pattern.test(text)) {
+      forbiddenHits.push(`${relativeFile}: ${pattern}`);
+    }
+  }
+}
+
+if (forbiddenHits.length > 0) {
+  fail("Forbidden Base Web or Styletron references found.", forbiddenHits);
+}
+
+if (process.exitCode) {
+  process.exit();
+}
+
+console.log(
+  `Verified ${families.length} @base-ui/react component families, namespace parts, ${requiredVariants.length} provider/variant exports, ${requiredNestedVariants.length} nested variants, ${wrapperClasses.size} wrapper classes, gallery coverage, and no Base Web references.`,
+);

package/scripts/verify-macos-design.mjs

@@ -0,0 +1,146 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const repoRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
+const stylesPath = path.join(repoRoot, "src", "styles", "macosBaseUi.css");
+const packageJsonPath = path.join(repoRoot, "package.json");
+const wrapperPath = path.join(repoRoot, "src", "components", "MacBaseUI.tsx");
+
+function readText(filePath) {
+  return fs.readFileSync(filePath, "utf8");
+}
+
+function listFiles(directory, relativePrefix = "") {
+  const files = [];
+  for (const entry of fs.readdirSync(directory, { withFileTypes: true })) {
+    const relativePath = path.join(relativePrefix, entry.name);
+    const absolutePath = path.join(directory, entry.name);
+    if (entry.isDirectory()) {
+      files.push(...listFiles(absolutePath, relativePath));
+    } else if (entry.isFile()) {
+      files.push(relativePath);
+    }
+  }
+  return files;
+}
+
+function fail(message, details = []) {
+  console.error(message);
+  for (const detail of details) {
+    console.error(`- ${detail}`);
+  }
+  process.exitCode = 1;
+}
+
+const sourceFiles = listFiles(path.join(repoRoot, "src"))
+  .filter((filePath) => /\.(css|ts|tsx)$/.test(filePath))
+  .map((filePath) => path.join("src", filePath));
+
+const sources = new Map(
+  sourceFiles.map((relativeFile) => [relativeFile, readText(path.join(repoRoot, relativeFile))]),
+);
+const stylesSource = readText(stylesPath);
+const packageJson = JSON.parse(readText(packageJsonPath));
+const wrapperSource = readText(wrapperPath);
+
+const requiredStyleFeatures = [
+  ["system font stack", /-apple-system,\s*BlinkMacSystemFont/],
+  ["dark color-scheme support", /@media\s*\(prefers-color-scheme:\s*dark\)/],
+  ["reduced motion support", /@media\s*\(prefers-reduced-motion:\s*reduce\)/],
+  ["keyboard focus-visible support", /:focus-visible/],
+  ["macOS blue accent token", /--hd-mac-blue:\s*#0a84ff/i],
+];
+
+const missingFeatures = requiredStyleFeatures
+  .filter(([, pattern]) => !pattern.test(stylesSource))
+  .map(([label]) => label);
+
+if (missingFeatures.length > 0) {
+  fail("Missing required macOS styling features.", missingFeatures);
+}
+
+const missingMotionDependencies = [];
+if (!packageJson.peerDependencies?.motion) {
+  missingMotionDependencies.push("peerDependencies.motion");
+}
+if (!packageJson.devDependencies?.motion) {
+  missingMotionDependencies.push("devDependencies.motion");
+}
+
+if (missingMotionDependencies.length > 0) {
+  fail("Missing required Motion dependency declarations.", missingMotionDependencies);
+}
+
+const requiredMotionFeatures = [
+  ["MotionConfig import", /import\s+\{[\s\S]*MotionConfig[\s\S]*\}\s+from\s+["']motion\/react["']/],
+  ["motion import", /import\s+\{[\s\S]*\bmotion\b[\s\S]*\}\s+from\s+["']motion\/react["']/],
+  ["MacMotionProvider export", /export function MacMotionProvider\b/],
+  ["MotionProps wrapper typing", /React\.ComponentPropsWithoutRef<C> & MotionProps/],
+  ["reduced motion user config", /reducedMotion\s*=\s*["']user["']/],
+  ["motion.create wrapper", /motion\.create\(BaseWrapped as AnyComponent\)/],
+  ["default Motion transition", /const macDefaultTransition:\s*Transition/],
+];
+
+const missingMotionFeatures = requiredMotionFeatures
+  .filter(([, pattern]) => !pattern.test(wrapperSource))
+  .map(([label]) => label);
+
+if (missingMotionFeatures.length > 0) {
+  fail("Missing required Motion integration features.", missingMotionFeatures);
+}
+
+const motionCreateMatches = Array.from(wrapperSource.matchAll(/motion\.create\(/g));
+const allowedMotionCreatePattern = /^\s*const MotionPart = motion\.create\(BaseWrapped as AnyComponent\);$/m;
+if (motionCreateMatches.length !== 1 || !allowedMotionCreatePattern.test(wrapperSource)) {
+  fail("motion.create() must be called exactly once in the module-level macPart wrapper setup.", [
+    "src/components/MacBaseUI.tsx",
+  ]);
+}
+
+const negativeLetterSpacing = [];
+const viewportScaledFonts = [];
+
+for (const [relativeFile, source] of sources) {
+  for (const match of source.matchAll(/letter-spacing\s*:\s*-[^;,\n}]*/g)) {
+    negativeLetterSpacing.push(`${relativeFile}: ${match[0]}`);
+  }
+
+  for (const match of source.matchAll(/font(?:-size)?\s*:\s*[^;,\n}]*(?:vw|vh|vmin|vmax)/g)) {
+    viewportScaledFonts.push(`${relativeFile}: ${match[0]}`);
+  }
+}
+
+if (negativeLetterSpacing.length > 0) {
+  fail("Negative letter spacing is not allowed in human-design controls.", negativeLetterSpacing);
+}
+
+if (viewportScaledFonts.length > 0) {
+  fail("Viewport-scaled font sizing is not allowed in human-design controls.", viewportScaledFonts);
+}
+
+const allSourceText = Array.from(sources.values()).join("\n");
+const hdMacClasses = new Set(
+  Array.from(allSourceText.matchAll(/["'`]([^"'`]*hd-mac[^"'`]*)["'`]/g))
+    .flatMap((match) => match[1].split(/\s+/))
+    .filter((className) => className.startsWith("hd-mac")),
+);
+
+const missingClassStyles = Array.from(hdMacClasses)
+  .sort()
+  .filter((className) => {
+    const escapedClassName = className.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    return !new RegExp(`\\.${escapedClassName}(?![a-zA-Z0-9_-])`).test(stylesSource);
+  });
+
+if (missingClassStyles.length > 0) {
+  fail("Missing CSS selectors for hd-mac classes used in source files.", missingClassStyles);
+}
+
+if (process.exitCode) {
+  process.exit();
+}
+
+console.log(
+  `Verified macOS design features, typography constraints, and ${hdMacClasses.size} styled hd-mac classes.`,
+);

package/src/components/AppWindowShell.tsx

@@ -1,25 +1,11 @@
 import { ReactNode } from "react";
-import { Block } from "baseui/block";
-import { useStyletron } from "baseui";
 
 export function AppWindowShell({ children }: { children: ReactNode }) {
-  const [, theme] = useStyletron();
-
   return (
-    <Block
-      width="100%"
-      $style={{
-        minHeight: "100vh",
-        boxSizing: "border-box",
-        display: "flex",
-        flexDirection: "column",
-        backgroundColor: theme.colors.backgroundPrimary,
-        color: theme.colors.contentPrimary,
-      }}
-    >
-      <Block flex="1" $style={{ minHeight: 0, display: "flex", flexDirection: "column" }}>
+    <div className="hd-mac-window">
+      <div className="hd-mac-window-content">
         {children}
-      </Block>
-    </Block>
+      </div>
+    </div>
   );
 }