Expose Studio components

[donaldpipowitch]

Description

Hi, we'd like to be able to leverage @pandacss/studio in other contexts (e.g. Storybook). As far as I can tell it should be "relatively" simple by exporting the base components (e.g. packages/studio/src/components/colors.tsx) so that they can be used in bigger React applications.

The only thing (?) that I would assume that needs to be done is adding some kind of context provider to expose the tokens (- I guess this would be about rewriting packages/studio/src/lib/panda-context.ts to be an actual React Context that you provide the tokens to...?).

Problem Statement/Justification

It makes @pandacss/studio more versatile and avoids re-creating the Studio functionality in community land.

Proposed Solution or API

• Make components like [packages/studio/src/components/colors.tsx] a top-level export of @pandacss/studio.
• Provide a React Context Provider to be able to pass all the data that these components need at runtime.

Alternatives

• Re-create the Studio functionality in user land.
• Live with the Astro based Studio next to other design/documentation artifacts.

Additional Information

No response

[cgatian]

I thought the same thing. I loaded up Studio and thought it was a great resource, but storybook is going to be my source of truth. I really don't want to have two separate URLs for Storybook and Studio. Exposing the components would be a great start.

[segunadebayo]

Totally agree. We should consider exposing utilities for making your own studio within Storybook or design system docs.

[ambethia]

I have a font loaded from next/font/google in my app. I see the font documented in Studio, but the font itself is not loaded, presumably because there's nowhere I've configured it for Panda to find it (outside of my app layout).

Is there any existing way to configure Panda Studio to pickup my font?

I'm tacking this onto the conversation here about Storybook, because I presume if we can expose these elements in Storybook, they may work as intended?

[cgatian]

This is probably a separate issue unrelated to exposing the components.