react-lib-tools 0.0.18 → 0.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-lib-tools",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "type": "module",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/)",
   "contributors": [

package/scripts/utils/docs/compileComponent.ts

@@ -8,6 +8,7 @@ import { syntaxHighlight } from "../syntax-highlight.ts";
 import { getPropTypeText } from "./getPropTypeText.ts";
 import { parseDescription } from "./parseDescription.ts";
 import { propsToTable } from "./propsToTable.ts";
+import { getDefaultValueType } from "./getDefaultValueType.ts";
 
 const TOKEN_TO_REPLACE = "TOKEN_TO_REPLACE";
 
@@ -61,11 +62,13 @@ export async function compileComponent({
         let formattedValue = prop.defaultValue.value;
 
         // Wrap strings in quotes
-        if (typeof prop.defaultValue.value === "string") {
-          // But don't double quote, e.g.
-          // tagName?: keyof IntrinsicElements = ""div" as TagName"
-          if (!prop.defaultValue.value.includes('" as ')) {
-            formattedValue = `"${prop.defaultValue.value}"`;
+        switch (getDefaultValueType(prop.defaultValue.value)) {
+          case "string": {
+            // But don't double quote, e.g.
+            // tagName?: keyof IntrinsicElements = ""div" as TagName"
+            if (!prop.defaultValue.value.includes('" as ')) {
+              formattedValue = `"${prop.defaultValue.value}"`;
+            }
           }
         }
 

package/scripts/utils/docs/getDefaultValueType.test.ts

@@ -0,0 +1,51 @@
+import { describe, expect, test } from "vitest";
+import { getDefaultValueType } from "./getDefaultValueType";
+
+describe("getDefaultValueType", () => {
+  test.each(["[]", "[1,2]", '["a","b","c"]'])(
+    "should identify array value: %s",
+    (value) => {
+      expect(getDefaultValueType(value)).toBe("array");
+    }
+  );
+
+  test.each(["true", "false"])("should identify boolean value: %s", (value) => {
+    expect(getDefaultValueType(value)).toBe("boolean");
+  });
+
+  test("should detect null values", () => {
+    expect(getDefaultValueType("null")).toBe("null");
+  });
+
+  test.each(["0", "1", "1.0", "-1", "-1.0"])(
+    "should identify numeric value: %s",
+    (value) => {
+      expect(getDefaultValueType(value)).toBe("number");
+    }
+  );
+
+  test.each(["{}", '{foo:"a",bar:true, baz:123}'])(
+    "should identify object value: %s",
+    (value) => {
+      expect(getDefaultValueType(value)).toBe("object");
+    }
+  );
+
+  test.each(["", " ", "foo bar baz"])(
+    "should identify string value: %o",
+    (value) => {
+      expect(getDefaultValueType(value)).toBe("string");
+    }
+  );
+
+  test("should detect undefined values", () => {
+    expect(getDefaultValueType("undefined")).toBe("undefined");
+  });
+
+  test.each(["1a", "-.!/"])(
+    "should identify invalid value: %o as string",
+    (value) => {
+      expect(getDefaultValueType(value)).toBe("string");
+    }
+  );
+});

package/scripts/utils/docs/getDefaultValueType.ts

@@ -0,0 +1,50 @@
+export type Type =
+  | "array"
+  | "boolean"
+  | "null"
+  | "number"
+  | "object"
+  | "string"
+  | "undefined";
+
+export function getDefaultValueType(value: string): Type {
+  switch (value) {
+    case "false":
+    case "true": {
+      return "boolean";
+    }
+    case "null": {
+      return "null";
+    }
+    case "undefined": {
+      return "undefined";
+    }
+    default: {
+      if (value.trim() === "") {
+        return "string";
+      } else if (value.startsWith("{") && value.endsWith("}")) {
+        return "object";
+      }
+    }
+  }
+
+  try {
+    const parsed = JSON.parse(value);
+    switch (typeof parsed) {
+      case "number": {
+        return "number";
+      }
+      default: {
+        if (Array.isArray(parsed)) {
+          return "array";
+        }
+
+        return "object";
+      }
+    }
+  } catch {
+    // No-op
+  }
+
+  return "string";
+}

package/styles.css

@@ -102,6 +102,9 @@ code {
   color: rgba(255, 255, 255, 0.8);
 }
 
+.tok-bool {
+  color: var(--color-teal-300);
+}
 .tok-comment {
   color: var(--color-slate-500);
 }
@@ -115,6 +118,7 @@ code {
 .tok-meta {
 }
 .tok-number {
+  color: var(--color-teal-300);
 }
 .tok-operator {
   color: var(--color-slate-400);