react-lib-tools 0.0.20 → 0.0.22

package/dist/react-lib-tools.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DleNtYr0.cjs");exports.AppRoot=e.AppRoot;exports.Block=e.Block;exports.Box=e.Box;exports.Button=e.Button;exports.Callout=e.Callout;exports.Checkbox=e.Checkbox;exports.Code=e.Code;exports.ComponentProps=e.ComponentProps;exports.ComponentPropsSection=e.ComponentPropsSection;exports.DocsSection=e.DocsSection;exports.ErrorBoundary=e.ErrorBoundary;exports.ExternalLink=e.ExternalLink;exports.Header=e.Header;exports.ImperativeHandle=e.ImperativeHandle;exports.Input=e.Input;exports.Link=e.Link;exports.LoadingSpinner=e.LoadingSpinner;exports.NavLink=e.NavLink;exports.NavSection=e.NavSection;exports.Radio=e.Radio;exports.Select=e.Select;exports.assert=e.assert;exports.cn=e.cn;exports.getIntentClassNames=e.getIntentClassNames;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-qm845CuF.cjs");exports.AppRoot=e.AppRoot;exports.Block=e.Block;exports.Box=e.Box;exports.Button=e.Button;exports.Callout=e.Callout;exports.Checkbox=e.Checkbox;exports.Code=e.Code;exports.ComponentProps=e.ComponentProps;exports.ComponentPropsSection=e.ComponentPropsSection;exports.DocsSection=e.DocsSection;exports.ErrorBoundary=e.ErrorBoundary;exports.ExternalLink=e.ExternalLink;exports.Header=e.Header;exports.ImperativeHandle=e.ImperativeHandle;exports.Input=e.Input;exports.Link=e.Link;exports.LoadingSpinner=e.LoadingSpinner;exports.NavLink=e.NavLink;exports.NavSection=e.NavSection;exports.Radio=e.Radio;exports.Select=e.Select;exports.assert=e.assert;exports.cn=e.cn;exports.getIntentClassNames=e.getIntentClassNames;
 //# sourceMappingURL=react-lib-tools.cjs.map

package/dist/react-lib-tools.d.ts

@@ -11,6 +11,9 @@ import { MouseEvent as MouseEvent_2 } from 'react';
 import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
 
+/**
+ * Displays an application shell with desktop and mobile layouts.
+ */
 export declare function AppRoot({ navLinks, overview, packageDescription, packageName, routes, showOpenCollectLink, versions }: {
     navLinks: ReactNode;
     overview?: ReactNode | undefined;

package/dist/react-lib-tools.js

@@ -1,4 +1,4 @@
-import { A as o, a as e, B as n, b as t, C as r, c as i, d as p, i as c, j as l, D as d, e as C, E as k, H as m, I as B, f as L, L as S, g as u, N as x, h as I, R as N, k as g, l as v, m as E, n as H } from "./index-D1Hn63kY.js";
+import { A as o, a as e, B as n, b as t, C as r, c as i, d as p, i as c, j as l, D as d, e as C, E as k, H as m, I as B, f as L, L as S, g as u, N as x, h as I, R as N, k as g, l as v, m as E, n as H } from "./index-DcYrvRB4.js";
 export {
   o as AppRoot,
   e as Block,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-lib-tools",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "type": "module",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/)",
   "contributors": [
@@ -55,6 +55,7 @@
   "devDependencies": {
     "@csstools/postcss-oklab-function": "^4.0.11",
     "@eslint/js": "^9.30.1",
+    "@floating-ui/react": "^0.27.16",
     "@headlessui/react": "^2.2.4",
     "@headlessui/tailwindcss": "^0.2.2",
     "@heroicons/react": "^2.2.0",
@@ -63,13 +64,16 @@
     "@testing-library/jest-dom": "^6.6.4",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/bytes": "^3.1.5",
     "@types/compression": "^1.8.1",
     "@types/express": "^5.0.5",
     "@types/markdown-it": "^14.1.2",
     "@types/node": "^24.2.0",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.2.3",
+    "@types/sharp": "^0.32.0",
     "@vitejs/plugin-react-swc": "^3.10.2",
+    "bytes": "^3.1.2",
     "clsx": "^2.1.1",
     "compression": "^1.8.1",
     "csstype": "^3.1.3",
@@ -94,6 +98,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-visualizer": "^6.0.3",
     "rollup-preserve-directives": "^1.1.3",
+    "sharp": "^0.34.5",
     "sirv": "^3.0.2",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.11",
@@ -104,10 +109,10 @@
     "typescript-eslint": "^8.35.1",
     "typescript-json-schema": "^0.65.1",
     "vite": "^7.0.4",
-    "vitest-fail-on-console": "^0.10.1",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-svgr": "^4.3.0",
     "vitest": "^3.2.4",
+    "vitest-fail-on-console": "^0.10.1",
     "zustand": "^5.0.7"
   }
 }

package/scripts/compile-docs.ts

@@ -10,16 +10,35 @@ import {
   ScriptTarget
 } from "typescript";
 
+/**
+ * Compile TSDoc comments into a formatted structure that can be rendered by the `ComponentProps` component.
+ */
 export async function compileDocs({
   analyserOptions: analyserOptionsParam,
   componentNames = [],
   imperativeHandleNames = [],
-  outputDirName = "docs"
+  outputPath = ["public", "generated", "docs"]
 }: {
+  /**
+   * AST Parser config; see `@ts-ast-parser/core` documentation for more information.
+   */
   analyserOptions?: Partial<AnalyserOptions>;
+
+  /**
+   * Which components should be compiled?
+   */
   componentNames?: string[] | undefined;
+
+  /**
+   * Which imperative handles should be compiled?
+   */
   imperativeHandleNames?: string[] | undefined;
-  outputDirName?: string | undefined;
+
+  /**
+   * Where should the output be stored?
+   * By default examples are stored within the `public/generated/docs` directory.
+   */
+  outputPath?: string[] | undefined;
 }) {
   const compilerOptions: Partial<CompilerOptions> = {
     ...defaultCompilerOptions,
@@ -35,13 +54,13 @@ export async function compileDocs({
   await compileComponents({
     compilerOptions,
     componentNames,
-    outputDirName
+    outputPath
   });
 
   await compileImperativeHandles({
     analyserOptions,
     names: imperativeHandleNames,
-    outputDirName
+    outputPath
   });
 }
 

package/scripts/compile-examples.ts

@@ -1,22 +1,39 @@
 import { readFile, writeFile } from "node:fs/promises";
 import { basename, join } from "node:path";
+import { trimExcludedText } from "./utils/examples/trimExcludedText.ts";
 import { initialize } from "./utils/initialize.ts";
 import { syntaxHighlight } from "./utils/syntax-highlight.ts";
-import { trimExcludedText } from "./utils/examples/trimExcludedText.ts";
 
+/**
+ * Compile example snippets into syntax-highlighted HTML that can be rendered by the `Code` component.
+ */
 export async function compileExamples({
-  fileExtensions = [".css", ".html", ".ts", ".tsx"],
+  fileExtensions = [".css", ".html", ".js", ".jsx", ".ts", ".tsx"],
   inputPath = ["src", "routes"],
-  outputDirName = "examples"
+  outputPath = ["public", "generated", "examples"]
 }: {
+  /**
+   * Which file extension are supported?
+   * By default CSS, HTML, TS/TSX, and JS/JSX file extensions are supported.
+   */
   fileExtensions?: string[] | undefined;
+
+  /**
+   * Where are example files located?
+   * By default this script looks for examples within the `src/routes` root directory.
+   */
   inputPath?: string[] | undefined;
-  outputDirName?: string | undefined;
+
+  /**
+   * Where should the output be stored?
+   * By default examples are stored within the `public/generated/examples` directory.
+   */
+  outputPath?: string[] | undefined;
 } = {}) {
   const { files, outputDir } = await initialize({
     fileExtensions,
     inputPath,
-    outputDirName
+    outputPath
   });
 
   for (const file of files) {

package/scripts/compress-og-image.ts

@@ -0,0 +1,38 @@
+import bytes from "bytes";
+import { stat, writeFile } from "node:fs/promises";
+import { join } from "node:path";
+import { cwd } from "node:process";
+import sharp from "sharp";
+
+/**
+ * Compress og:image.
+ */
+export async function compressOgImage({
+  inputPath = ["public", "og.png"],
+  outputPath = ["public", "og.png"]
+}: {
+  inputPath?: string[] | undefined;
+  outputPath?: string[] | undefined;
+} = {}) {
+  const input = join(cwd(), ...inputPath);
+  const statsBefore = await stat(input);
+
+  const png = sharp(input).png({
+    quality: 100,
+    compressionLevel: 9
+  });
+
+  const output = join(cwd(), ...outputPath);
+  const buffer = await png.toBuffer();
+  await writeFile(output, buffer, {
+    encoding: "base64"
+  });
+
+  const statsAfter = await stat(output);
+
+  console.log(
+    "Compressed image:\n  before: %s\n  after: %s",
+    bytes(statsBefore.size),
+    bytes(statsAfter.size)
+  );
+}

package/scripts/utils/docs/compileComponents.ts

@@ -10,11 +10,11 @@ import { insertPropsMarkdown } from "./insertPropsMarkdown.ts";
 export async function compileComponents({
   compilerOptions,
   componentNames,
-  outputDirName
+  outputPath
 }: {
   compilerOptions: Partial<CompilerOptions>;
   componentNames: string[];
-  outputDirName: string;
+  outputPath: string[];
 }) {
   const parser = withCompilerOptions(compilerOptions, {
     savePropValueAsString: true,
@@ -30,7 +30,7 @@ export async function compileComponents({
         file.includes(`${componentName}.ts`)
       ),
     inputPath: ["lib", "components"],
-    outputDirName
+    outputPath
   });
 
   const markdownPath = join(cwd(), "README.md");

package/scripts/utils/docs/compileImperativeHandles.ts

@@ -10,13 +10,13 @@ import { compileImperativeHandle } from "./compileImperativeHandle.ts";
 export async function compileImperativeHandles({
   analyserOptions,
   names,
-  outputDirName
+  outputPath
 }: {
   analyserOptions: Partial<AnalyserOptions>;
   names: string[];
-  outputDirName: string;
+  outputPath: string[];
 }) {
-  const outputDir = join(cwd(), "public", "generated", outputDirName);
+  const outputDir = join(cwd(), ...outputPath);
 
   const result = await parseFromProject(analyserOptions);
   const reflectedModules = result.project?.getModules() ?? [];

package/scripts/utils/initialize.ts

@@ -8,15 +8,15 @@ export async function initialize({
   fileExtensions,
   fileFilter,
   inputPath,
-  outputDirName
+  outputPath
 }: {
   fileExtensions: string[];
   fileFilter?: ((path: string) => boolean) | undefined;
   inputPath: string[];
-  outputDirName: string;
+  outputPath: string[];
 }) {
   const inputDir = join(cwd(), ...inputPath);
-  const outputDir = join(cwd(), "public", "generated", outputDirName);
+  const outputDir = join(cwd(), ...outputPath);
   await mkdir(outputDir, { recursive: true });
   await rmFilesWithExtensions(outputDir, [".json"]);