@sanity/ui-workshop/dist/index.d.ts

An environment for designing, reviewing, and quality-testing React components.

import { RootTheme, ThemeColorSchemeKey } from "@sanity/ui";
import * as react9 from "react";
import { ElementType, ReactNode } from "react";
import { InlineConfig } from "vite";
/** @public */
interface WorkshopCollection {
  name: string;
  title: string;
}
/** @public */
interface WorkshopStory<Options = Record<string, unknown>> {
  name: string;
  title: string;
  component: ElementType;
  options?: Options;
}
/** @public */
interface WorkshopScope {
  name?: string;
  title?: string;
  stories: WorkshopStory[];
}
/** @public */
interface WorkshopConfig {
  collections?: WorkshopCollection[];
  features?: {
    navbar?: boolean;
  };
  frameUrl?: string;
  plugins?: WorkshopPlugin<any>[];
  scopes: WorkshopScope[];
  theme?: RootTheme;
  title?: string;
}
/** @public */
interface WorkshopPlugin<Options = any> {
  name: string;
  title: string;
  inspector?: ElementType<{
    options: Options;
  }>;
  provider?: ElementType<{
    children?: ReactNode;
    options: Options;
  }>;
  options?: Options;
}
/** @public */
declare function defineScope(scope: WorkshopScope): WorkshopScope;
/** @public */
interface WorkshopConfigOptions extends Omit<WorkshopConfig, 'scopes'> {}
/** @public */
declare function defineConfig(config: WorkshopConfigOptions): WorkshopConfigOptions;
/** @public */
interface WorkshopRuntime {
  build?: {
    outDir?: string;
  };
  pattern?: string | string[];
  server?: {
    port?: number;
  };
  vite?: (viteConfig: InlineConfig) => InlineConfig | Promise<InlineConfig>;
}
/** @public */
interface WorkshopRuntimeOptions extends WorkshopRuntime {}
/** @public */
declare function defineRuntime(config: WorkshopRuntimeOptions): WorkshopRuntimeOptions;
/** @internal */
declare const EMPTY_ARRAY: never[];
/** @internal */
declare const EMPTY_RECORD: Record<string, unknown>;
/** @internal */
declare const DEFAULT_VIEWPORT_VALUE = "auto";
/** @internal */
declare const DEFAULT_ZOOM_VALUE = 1;
/** @internal */
declare const VIEWPORT_OPTIONS: {
  name: string;
  title: string;
  rect: {
    width: number | 'auto';
    height?: number;
  };
}[];
/** @internal */
declare const ZOOM_OPTIONS: {
  value: number;
  title: string;
}[];
/** @internal */
interface WorkshopFrameProps {
  config: WorkshopConfig;
  setScheme: (nextScheme: ThemeColorSchemeKey) => void;
}
/** @internal */
declare const WorkshopFrame: react9.NamedExoticComponent<WorkshopFrameProps>;
/** @public */
interface Pubsub<Msg = unknown> {
  publish: (msg: Msg) => void;
  subscribe: (subscriber: (msg: Msg) => void) => () => void;
}
/** @internal */
declare function createPubsub<Msg = unknown>(): Pubsub<Msg>;
/** @public */
type WorkshopQuery = {
  [key: string]: string | number | boolean | WorkshopQuery | undefined;
};
/** @public */
interface WorkshopLocation {
  type: 'pop' | 'push' | 'replace';
  path: string;
  query?: WorkshopQuery;
}
/** @public */
interface WorkshopState {
  frameReady: boolean;
  path: string;
  payload: Record<string, unknown>;
  scheme: ThemeColorSchemeKey;
  viewport: string;
  zoom: number;
}
/** @public */
interface WorkshopFrameReadyMsg {
  type: 'workshop/frameReady';
}
/** @public */
interface WorkshopSetStateMsg {
  type: 'workshop/setState';
  value: WorkshopState;
}
/** @public */
interface WorkshopSetZoomMsg {
  type: 'workshop/setZoom';
  value: number;
}
/** @public */
interface WorkshopSetViewportMsg {
  type: 'workshop/setViewport';
  value: string;
}
/** @public */
interface WorkshopToggleSchemeMsg {
  type: 'workshop/toggleScheme';
}
/** @public */
interface WorkshopSetSchemeMsg {
  type: 'workshop/setScheme';
  value: ThemeColorSchemeKey;
}
/** @public */
interface WorkshopSetPathMsg {
  type: 'workshop/setPath';
  value: string;
}
/** @public */
interface WorkshopSetPayloadMsg {
  type: 'workshop/setPayload';
  value: Record<string, unknown>;
}
/** @public */
interface WorkshopSetPayloadValueMsg {
  type: 'workshop/setPayloadValue';
  key: string;
  value: unknown;
}
/** @public */
type WorkshopMsg = WorkshopFrameReadyMsg | WorkshopSetStateMsg | WorkshopSetZoomMsg | WorkshopSetViewportMsg | WorkshopToggleSchemeMsg | WorkshopSetSchemeMsg | WorkshopSetPathMsg | WorkshopSetPayloadMsg | WorkshopSetPayloadValueMsg;
/** @public */
interface WorkshopLocationStore {
  get: () => Omit<WorkshopLocation, 'type'>;
  push: (nextLocation: Omit<WorkshopLocation, 'type'>) => void;
  replace: (nextLocation: Omit<WorkshopLocation, 'type'>) => void;
  subscribe: (subscriber: (nextLocation: WorkshopLocation) => void) => () => void;
}
/** @internal */
declare function createLocationStore(): WorkshopLocationStore;
/** @beta */
declare function mount(options: {
  config: WorkshopConfig;
  element: HTMLElement | null;
}): void;
/** @beta */
declare function mountFrame(options: {
  config: WorkshopConfig;
  element: HTMLElement | null;
}): void;
/** @internal */
interface GenericPropSchema<T = unknown> {
  name: string;
  defaultValue?: T;
  groupName?: string;
}
/** @internal */
interface BooleanPropSchema extends GenericPropSchema<boolean> {
  type: 'boolean';
}
/** @internal */
interface NumberPropSchema extends GenericPropSchema<number> {
  type: 'number';
}
/** @internal */
type SelectPropValue = string | number | boolean;
/** @internal */
type SelectPropOptionsProp<T extends SelectPropValue = SelectPropValue> = Record<PropertyKey, T> | Record<Extract<T, PropertyKey>, T[keyof T]> | T[] | readonly T[];
/** @internal */
interface SelectPropSchema<T extends SelectPropValue = SelectPropValue> extends GenericPropSchema<T> {
  type: 'select';
  options: SelectPropOptionsProp<T>;
}
/** @internal */
interface StringPropSchema extends GenericPropSchema<string> {
  type: 'string';
}
/** @internal */
interface TextPropSchema extends GenericPropSchema<string> {
  type: 'text';
}
/** @internal */
type PropSchema = BooleanPropSchema | NumberPropSchema | SelectPropSchema | StringPropSchema | TextPropSchema;
/** @internal */
interface PropsState {
  schemas: PropSchema[];
  value: Record<string, any>;
}
/** @internal */
interface PropsContextValue {
  registerProp: (propSchema: PropSchema) => void;
  schemas: PropSchema[];
  setPropValue: (propName: string, value: unknown) => void;
  unregisterProp: (propName: string) => void;
  value: Record<string, unknown>;
}
/** @internal */
/** @internal */
declare function useBoolean(name: string, defaultValue?: boolean, groupName?: string): boolean | undefined;
/** @internal */
declare function useNumber(name: string, defaultValue?: number, groupName?: string): number | undefined;
/** @internal */
declare function useSelect<T extends SelectPropValue>(name: string, options: SelectPropOptionsProp<T>, defaultValue?: T, groupName?: string): T | undefined;
/** @internal */
declare function useString(name: string, defaultValue?: string, groupName?: string): string | undefined;
/** @internal */
declare function useText(name: string, defaultValue?: string, groupName?: string): string | undefined;
/** @internal */
declare function useProps(): PropsContextValue;
/** @internal */
declare function propsPlugin(): WorkshopPlugin;
/** @public */
declare function useAction(name: string, options?: {
  preventDefault?: boolean;
}): (...args: unknown[]) => void;
/** @public */
interface WorkshopContextValue<CustomMsg = never> {
  plugins: WorkshopPlugin[];
  broadcast: (msg: WorkshopMsg | CustomMsg) => void;
  channel: Pubsub<WorkshopMsg | CustomMsg>;
  collections: WorkshopCollection[];
  frameReady: boolean;
  frameUrl: string;
  origin: 'frame' | 'main';
  path: string;
  payload: Record<string, unknown>;
  scheme: ThemeColorSchemeKey;
  scope: WorkshopScope | null;
  scopes: WorkshopScope[];
  story: WorkshopStory | null;
  title: string;
  viewport: string;
  zoom: number;
}
/** @internal */
/** @public */
declare function useWorkshop<CustomMsg = never>(): WorkshopContextValue<CustomMsg>;
/** @public */
interface WorkshopProps {
  config: WorkshopConfig;
  locationStore: WorkshopLocationStore;
  onSchemeChange: (nextScheme: ThemeColorSchemeKey) => void;
  scheme?: ThemeColorSchemeKey;
}
/** @public */
declare const Workshop: react9.NamedExoticComponent<WorkshopProps>;
/** @internal */
interface WorkshopProviderProps {
  broadcast: (msg: WorkshopMsg) => void;
  children?: React.ReactNode;
  channel: Pubsub<WorkshopMsg>;
  config: WorkshopConfig;
  frameReady: boolean;
  origin: 'frame' | 'main';
  path: string;
  payload: Record<string, unknown>;
  scheme: ThemeColorSchemeKey;
  viewport?: string;
  zoom?: number;
}
/** @internal */
declare const WorkshopProvider: react9.NamedExoticComponent<WorkshopProviderProps>;
/** @internal */
declare function workshopReducer(state: WorkshopState, msg: WorkshopMsg): WorkshopState;
export { BooleanPropSchema, DEFAULT_VIEWPORT_VALUE, DEFAULT_ZOOM_VALUE, EMPTY_ARRAY, EMPTY_RECORD, GenericPropSchema, NumberPropSchema, PropSchema, type PropsContextValue, PropsState, Pubsub, SelectPropOptionsProp, SelectPropSchema, SelectPropValue, StringPropSchema, TextPropSchema, VIEWPORT_OPTIONS, Workshop, WorkshopCollection, WorkshopConfig, WorkshopConfigOptions, WorkshopContextValue, WorkshopFrame, WorkshopFrameProps, WorkshopFrameReadyMsg, WorkshopLocation, WorkshopLocationStore, WorkshopMsg, WorkshopPlugin, WorkshopProps, WorkshopProvider, WorkshopProviderProps, WorkshopQuery, WorkshopRuntime, WorkshopRuntimeOptions, WorkshopScope, WorkshopSetPathMsg, WorkshopSetPayloadMsg, WorkshopSetPayloadValueMsg, WorkshopSetSchemeMsg, WorkshopSetStateMsg, WorkshopSetViewportMsg, WorkshopSetZoomMsg, WorkshopState, WorkshopStory, WorkshopToggleSchemeMsg, ZOOM_OPTIONS, createLocationStore, createPubsub, defineConfig, defineRuntime, defineScope, mount, mountFrame, propsPlugin, useAction, useBoolean, useNumber, useProps, useSelect, useString, useText, useWorkshop, workshopReducer };