docs: auto generate prop documentation

README.md

@@ -47,3 +47,16 @@ Which would look like this:
 In contrast to how it would look without react-fitter:
 
 ![Example without react-fitter](./docs/without-fitter.png)
+
+## `Fitter` component props
+
+<!-- PROPS_TABLE_START -->
+Prop name | Type | Default value | Description
+--- | --- | --- | ---
+`children` | `ReactNode` | (required) | The content to fit.
+`minSize` | `number` | `0.25` | The minimum scale that the text will shrink to. E.g. 0.25 means the text will shrink to no less than 25% of its original size.
+`maxLines` | `number` | `1` | The maximum number of lines that the text will shrink to fit.
+`settlePrecision` | `number` | `0.01` | The precision at which the text will settle. The component finds the best size by halving the difference between the current size and the min/max size. If the difference is less than the settle precision, the component will stop and settle on that size. A value of 0.01 means the component will settle when the difference is less than 1%.
+`updateOnSizeChange` | `boolean` | `true` | Whether to update the text size when the size of the component changes.
+`resizeDebounceMs` | `number` | `50` | The time in milliseconds to wait before updating the text size when the size of the component changes. This is useful when the component is being resized frequently and you want to avoid updating the text size on every resize event.
+<!-- PROPS_TABLE_END -->

generate-docs.js

@@ -0,0 +1,43 @@
+import { parse } from "react-docgen";
+import { readFile, writeFile } from "node:fs/promises";
+
+const componentFile = "lib/Fitter.tsx";
+const outputFile = "README.md";
+
+const componentCode = await readFile(componentFile, "utf-8");
+const [documentation] = parse(componentCode);
+
+const tableRows = [];
+
+for (const [name, prop] of Object.entries(documentation.props ?? {})) {
+	const typeName = prop.tsType?.name ?? prop.flowType?.name;
+	const defaultValue = prop.defaultValue?.value
+		? `\`${prop.defaultValue?.value}\``
+		: "";
+	const defaultColumn = prop.required ? "(required)" : defaultValue;
+	const description = (prop.description ?? "")
+		.replace(/\n/g, " ")
+		.replace(/\s+/g, " ");
+
+	const columns = [
+		`\`${name}\``,
+		`\`${typeName}\``,
+		defaultColumn,
+		description,
+	];
+
+	tableRows.push(columns.join(" | "));
+}
+
+const tableHeader = ["Prop name", "Type", "Default value", "Description"].join(
+	" | ",
+);
+const tableDivider = ["---", "---", "---", "---"].join(" | ");
+const table = [tableHeader, tableDivider, ...tableRows].join("\n");
+
+const outputContent = await readFile(outputFile, "utf-8");
+const newContent = outputContent.replace(
+	/<!-- PROPS_TABLE_START -->.*<!-- PROPS_TABLE_END -->/s,
+	`<!-- PROPS_TABLE_START -->\n${table}\n<!-- PROPS_TABLE_END -->`,
+);
+await writeFile(outputFile, newContent);