More docs automation

packages/components/src/components/CodeEditor/index.tsx

@@ -16,6 +16,7 @@ export type CodeEditorProps = {
   lineWrapping?: boolean;
   errors?: SqError[];
   sourceId?: string;
+  fontSize?: number;
   project: SqProject;
 };
 
@@ -42,6 +43,8 @@ export const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(
       scrollTo,
     }));
 
-    return <div style={{ fontSize: "13px" }} ref={editorRef} />;
+    return (
+      <div style={{ fontSize: props.fontSize || "13px" }} ref={editorRef} />
+    );
   }
 );

packages/components/src/components/SquiggleEditor.tsx

@@ -11,6 +11,7 @@ import { SquiggleCodeProps } from "./types.js";
 
 export type SquiggleEditorProps = SquiggleCodeProps & {
   hideViewer?: boolean;
+  editorFontSize?: number;
   // environment comes from SquiggleCodeProps
 } & Omit<PartialPlaygroundSettings, "environment">;
 
@@ -21,6 +22,7 @@ export const SquiggleEditor: FC<SquiggleEditorProps> = ({
   continues,
   environment,
   hideViewer,
+  editorFontSize,
   ...settings
 }) => {
   const { code, setCode, defaultCode } = useUncontrolledCode({
@@ -48,12 +50,13 @@ export const SquiggleEditor: FC<SquiggleEditorProps> = ({
   return (
     <div>
       <div
-        className="border border-grey-200 p-2 m-4"
+        className="border border-slate-100 bg-slate-50 rounded-sm p-2"
         data-testid="squiggle-editor"
       >
         <CodeEditor
           defaultValue={defaultCode ?? ""}
           onChange={setCode}
+          fontSize={editorFontSize}
           showGutter={false}
           errors={errors}
           project={project}

packages/components/src/components/ui/FnDocumentation.tsx

@@ -9,6 +9,7 @@ import {
 
 import { SQUIGGLE_DOCS_URL } from "../../lib/constants.js";
 import { MarkdownViewer } from "../../lib/MarkdownViewer.js";
+import { SquiggleEditor } from "../SquiggleEditor.js";
 
 type Size = "small" | "normal";
 
@@ -67,10 +68,15 @@ export const FnDocumentation: FC<{
     description,
     definitions,
     examples,
+    interactiveExamples,
   } = documentation;
-  const textSize = size === "small" ? "text-xs" : "text-md";
+  const textSize = size === "small" ? "text-xs" : "text-sm";
   const fullName = `${nameSpace ? nameSpace + "." : ""}${name}`;
-  const tagCss = "text-xs font-medium me-2 px-2.5 py-0.5 rounded";
+  const tagCss = clsx(
+    "font-medium py-0.5 rounded",
+    textSize,
+    size === "small" ? "px-1.5" : "px-2.5"
+  );
 
   return (
     <>
@@ -81,19 +87,24 @@ export const FnDocumentation: FC<{
               href={`${SQUIGGLE_DOCS_URL}/${nameSpace}#${name}`}
               target="_blank"
               rel="noreferrer"
-              className="text-blue-500 hover:underline text-sm leading-none"
+              className={clsx(
+                "text-blue-500 hover:underline leading-none",
+                size === "small" ? "text-sm" : "text-md"
+              )}
             >
               {fullName}
             </a>
-            <div className="italic text-xs leading-none text-slate-500">
+            <div
+              className={clsx("italic leading-none text-slate-500", textSize)}
+            >
               Stdlib
             </div>
           </div>
         </Section>
       )}
       {(isUnit || shorthand || isExperimental || !requiresNamespace) && (
         <Section>
-          <div className="flex">
+          <div className="flex gap-3">
             {isUnit && (
               <div className={clsx("bg-yellow-100 text-yellow-800", tagCss)}>
                 Unit
@@ -141,25 +152,38 @@ export const FnDocumentation: FC<{
               textSize
             )}
           >
-            {definitions.map((def, id) => (
-              <StyleDefinition fullName={fullName} def={def} key={id} />
-            ))}
+            {definitions
+              .filter((def) => !def.deprecated)
+              .map((def, id) => (
+                <StyleDefinition fullName={fullName} def={def} key={id} />
+              ))}
           </div>
         </Section>
       ) : null}
-      {examples?.length ? (
+      {examples?.length ?? interactiveExamples?.length ? (
         <Section>
           <header className={clsx("text-slate-600 font-medium mb-2", textSize)}>
             Examples
           </header>
 
-          {examples.map((example, i) => (
-            <MarkdownViewer
-              className="w-full"
-              key={i}
-              md={`\`\`\`squiggle\n${example}\n\`\`\``}
-              textSize="sm"
-            />
+          {examples &&
+            examples.map((example, i) => (
+              <MarkdownViewer
+                className="max-width-[200px]"
+                key={i}
+                md={`\`\`\`squiggle\n${example}\n\`\`\``}
+                textSize="sm"
+              />
+            ))}
+          {(interactiveExamples ?? []).map((example, i) => (
+            <div className="pt-2 pb-4" key={i}>
+              <SquiggleEditor
+                defaultCode={example}
+                key={i}
+                chartHeight={size === "small" ? 80 : 120}
+                editorFontSize={size === "small" ? 12 : 13}
+              />
+            </div>
           ))}
         </Section>
       ) : null}

packages/components/src/stories/InternalComponents/FnDocumentation.stories.tsx

@@ -40,12 +40,43 @@ FnStory.story = {
   name: "All",
 };
 
-const documentation: FnDocumentationType = {
+const fnDocumentation = getFunctionDocumentation("Plot.dists");
+if (!fnDocumentation) {
+  throw new Error("fnDocumentation is undefined");
+}
+
+const exampleDocumentation: FnDocumentationType = {
   name: "add",
   nameSpace: "Number",
   requiresNamespace: false,
   signatures: ["(number, number) => number"],
-  examples: ["add(5,2)"],
+  examples: [
+    `xDist = SampleSet.fromDist(2 to 5)
+yDist = normal({p5:-3, p95:3}) * 5 - xDist ^ 2
+Plot.scatter({
+  xDist: xDist,
+  yDist: yDist,
+  xScale: Scale.log({min: 1.5}),
+})`,
+  ],
+  interactiveExamples: [
+    `xDist = SampleSet.fromDist(2 to 5)
+yDist = normal({p5:-3, p95:3}) * 5 - xDist ^ 2
+Plot.scatter({
+  xDist: xDist,
+  yDist: yDist,
+  xScale: Scale.log({min: 1.5}),
+})`,
+    `xDist = SampleSet.fromDist(normal({p5:-2, p95:5}))
+yDist = normal({p5:-3, p95:3}) * 5 - xDist
+Plot.scatter({
+  title: "A Scatterplot",
+  xDist: xDist,
+  yDist: yDist,
+  xScale: Scale.symlog({title: "X Axis Title"}),
+  yScale: Scale.symlog({title: "Y Axis Title"}),
+})`,
+  ],
   isExperimental: true,
   definitions: [],
   isUnit: true,
@@ -57,7 +88,17 @@ More content *here*`,
 export const Simple: Story = {
   name: "Normal",
   args: {
-    documentation,
+    documentation: exampleDocumentation,
+    showNameAndDescription: true,
+    size: "normal",
+  },
+};
+
+export const Existing: Story = {
+  name: "Existing",
+  args: {
+    documentation: fnDocumentation,
     showNameAndDescription: true,
+    size: "small",
   },
 };

packages/components/src/stories/SquiggleChart/DistributionSizes.stories.tsx

@@ -9,41 +9,57 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const code = "mx(5 to 100, uniform(100, 180), 30, 60, 80, [5,5,0.3,0.3,0.3])";
+const multiplier = 0.5;
+
 export const Height7: Story = {
   name: "Height14",
   args: {
-    chartHeight: 7,
+    chartHeight: 14 * multiplier,
     code,
   },
 };
 export const Height15: Story = {
   name: "Height20",
   args: {
-    chartHeight: 10,
+    chartHeight: 20 * multiplier,
     code,
   },
 };
 
 export const Height40: Story = {
   name: "Height40",
   args: {
-    chartHeight: 20,
+    chartHeight: 40 * multiplier,
     code,
   },
 };
+export const Height40WithLabels: Story = {
+  name: "Height 40 with labels",
+  args: {
+    chartHeight: 40 * multiplier,
+    code: `Plot.dist(
+      normal(5, 2),
+      {
+        xScale: Scale.linear({ min: -2, max: 6, title: "X Axis Title" }),
+        title: "A Simple Normal Distribution",
+        showSummary: true,
+      }
+    )`,
+  },
+};
 
 export const Height100: Story = {
   name: "Height 100",
   args: {
-    chartHeight: 50,
+    chartHeight: 100 * multiplier,
     code,
   },
 };
 
 export const ContinuousSampleSetBig: Story = {
   name: "Height 400",
   args: {
-    chartHeight: 200,
+    chartHeight: 400 * multiplier,
     code,
   },
 };