WIP: 🛝 Playground

[brettimus]

Creates a playground folder that has a SPA that looks suspiciously similar to Studio.

It's using the designs in Figma

• Designs: https://www.figma.com/design/RwMIgubdA8l2AyEZvPcTL9/FPX-documentation?node-id=30-2117&p=f&m=dev
• Design System: https://www.figma.com/design/yI3mYPIbeupb5hdpHvLiW2/Fpx-Design-System?node-id=96-5293&p=f&m=dev

TODO

• Remove playground/dist from git, since we can just publish new packages that contain the assets
• Fix type error in embedded package when you add the spec
• Use the auth headers / scheme defined in settings page
• Many, many more things...

Running the playground

Easy. It uses port 6660 👹

• cd playground
• pnpm dev

Need routes?

• Open settings
• Toggle "Use mock api spec"
  

Publishing the embedded playground

From project root:

pnpm build:embedded
cd packages/embedded
pnpm publish

This will use the dist files from playground in the published package as well.

Then, to integrate:

// If you have the api spec as json already:

app.use("/fp/*", createMiddleware({
  cdn: "https://cdn.jsdelivr.net/npm/@fiberplane/[email protected]/dist/playground/",
  // @ts-expect-error - The imported spec does not match our expected OpenAPIv3 type
  spec: apiSpec,
}));


// If you are using hono openapi
app.use(
  "/fp/*",
  createMiddleware({
    cdn: "https://cdn.jsdelivr.net/npm/@fiberplane/[email protected]/dist/playground/",
    // @ts-expect-error - The imported spec does not match our expected OpenAPIv3 type
    spec: app.getOpenAPIDocument({
      openapi: "3.0.0",
      info: {
        title: "Lilo API",
        version: "0.0.1",
        description: "API documentation for Lilo",
      },
      servers: [
        {
          // url: new URL(c.req.url).origin,
          url: "http://localhost:6246",
          description: "Local",
        },
        {
          // url: new URL(c.req.url).origin,
          url: "https://lilo.fp.dev",
          description: "Production",
        },
      ],
    }),
  }),
);

Component copy-pasting

For now, many components are copied-pasted-modified from Studio.

The following things were removed during said copy-paste-modify

• Bottom panel that shows logs, traces, AI test writer
• All references to trace data
• AI Request generation

The following was added:

• The openapi spec is the source of truth for routes. Convert it to the ProbedRoutes type that studio expects in the UI.
• You can change themes in Settings, or from the Command Bar

Getting the OpenAPI Spec

• Assumed to be embedded as JSON in the DOM

Theming

Needs more thought.

See playground/src/index.css

I had gemini try to convert all the tokens from figma into css variables, it may have gotten a few wrong.

I haven't put much effort into naming semantic tokens we can ultimately use in the UI alongside the shadcn ones.

Contrast is quite low for muted colors right now, that likely needs some tweaking.

Using orange for the accent color can get quite aggressive sometimes. We will likely want some overrides on the default button component that comes with shadcn in order to adapt it for our new designs.

[cloudflare-workers-and-pages]

Deploying fpx-www with    Cloudflare Pages

Latest commit:	c72a3f6
Status:	✅  Deploy successful!
Preview URL:	https://e0b53321.fpx-www.pages.dev
Branch Preview URL:	https://playground.fpx-www.pages.dev

View logs