Skip to content

Export Standalone UI Components #38

@olliethedev

Description

@olliethedev

Summary

Export MarkdownContent, MarkdownEditor, AutoForm, SteppedAutoForm, and FormBuilder as first-class standalone components from @btst/stack, enabling use outside of plugin contexts.

Current State

Component Location Status
MarkdownContent @workspace/ui Internal only, works standalone
MarkdownEditor Blog plugin Coupled to usePluginOverrides("blog")
AutoForm @workspace/ui Internal only, works standalone
SteppedAutoForm @workspace/ui Internal only, works standalone
FormBuilder @workspace/ui Internal only, works standalone

The @workspace/ui package is private: true and only consumed internally by @btst/stack.

Proposed Exports

// Markdown
import { MarkdownContent, MarkdownEditor } from "@btst/stack/components/markdown"
import "@btst/stack/components/markdown/css"

// Forms
import { AutoForm, AutoFormSubmit } from "@btst/stack/components/auto-form"
import { SteppedAutoForm } from "@btst/stack/components/stepped-auto-form"
import { FormBuilder, defaultComponents, defineComponent } from "@btst/stack/components/form-builder"
import "@btst/stack/components/form-builder/css"

Changes Required

  1. MarkdownEditor - Decouple from blog plugin

    • Accept uploadImage?: (file: File) => Promise<string> as prop
    • Accept localization?: { placeholder?: string } as prop
    • Blog plugin wrapper can still use usePluginOverrides internally
  2. Add export paths in build.config.ts and package.json:

    • @btst/stack/components/markdown
    • @btst/stack/components/auto-form
    • @btst/stack/components/stepped-auto-form
    • @btst/stack/components/form-builder
  3. Bundle CSS for components with styles:

    • Markdown editor (Milkdown styles)
    • Markdown content (code highlighting, typography)
    • Form builder (drag-and-drop, palette)
  4. Re-export types for TypeScript consumers:

    • MarkdownContentProps, MarkdownEditorProps
    • FieldConfig, Dependency, ZodObjectOrWrapped
    • FormBuilderField, JSONSchema, FormBuilderComponentDefinition
    • StepperComponentProps, SteppedAutoFormProps

Use Cases

  • MarkdownContent: AI chat responses, documentation, content previews
  • MarkdownEditor: Custom CMS, note-taking apps, rich text inputs
  • AutoForm: Settings pages, dynamic forms from Zod schemas
  • SteppedAutoForm: Onboarding flows, multi-step wizards
  • FormBuilder: No-code form builders, admin dashboards, survey creators

Implementation Notes

  • Form components already work standalone (no plugin dependencies)
  • Only MarkdownEditor needs decoupling work
  • Consider creating thin wrapper files in packages/better-stack/src/components/ that re-export from @workspace/ui

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions