Function VisualExample

packages/dev/s2-docs/src/VisualExample.tsx:115–239

({
  name,
  component,
  docs,
  links,
  importSource,
  props,
  initialProps,
  controlOptions,
  files,
  downloadFiles,
  code,
  wide,
  slots,
  align,
  acceptOrientation,
  type,
  propsObject,
  showCoachMark,
  hideShadcn
}: VisualExampleProps)

 * Displays a component example with controls for changing the props.
 */
export function VisualExample({
  name,
  component,
  docs,
  links,
  importSource,
  props,
  initialProps,
  controlOptions,
  files,
  downloadFiles,
  code,
  wide,
  slots,
  align,
  acceptOrientation,
  type,
  propsObject,
  showCoachMark,
  hideShadcn
}: VisualExampleProps) {
  let componentProps = docs.type === 'interface' ? docs : docs.props;
  if (componentProps?.type !== 'interface') {
    return null;
  }

  // Filter down the list of controls from the TS docs to only the ones we want to display.
  // This reduces the amount of data we need to send to the client.
  let controls = Object.fromEntries(
    props.map(name => {
      let prop = componentProps.properties[name];
      if (prop.type === 'method') {
        throw new Error('Unexpected method in props.');
      }

      // Resolve the value type if it is a type alias.
      if (prop.value?.type === 'link' && links?.[prop.value.id]) {
        let value = links[prop.value.id];
        if (value?.type === 'alias') {
          value = value.value;
        }
        prop = {...prop, value};
      }

      // Try to parse the default value from the JSDocs as JSON.
      let defaultValue = prop.default ?? undefined;
      if (typeof defaultValue === 'string') {
        defaultValue = defaultValue.replace(/^['"](.+)['"].*$/, '"$1"');
        try {
          defaultValue = json5.parse(defaultValue);
        } catch {
          // ignore
        }
      }

      let renderedProp: PropControl = {
        ...prop,
        description: renderHTMLfromMarkdown(prop.description, {forceInline: true}),