Framework Integration

/**
 * Sets Compodoc documentation JSON for Angular components
 * Enables automatic props table generation and component description extraction
 * @param compodocJson - Compodoc generated JSON documentation
 */
function setCompodocJson(compodocJson: CompodocJson): void;

interface CompodocJson {
  /** Component documentation entries */
  components?: CompodocComponent[];  
  /** Directive documentation entries */
  directives?: CompodocDirective[];
  /** Injectable service documentation */
  injectables?: CompodocInjectable[];
  /** Interface definitions */
  interfaces?: CompodocInterface[];
  /** Type alias definitions */
  typealiases?: CompodocTypeAlias[];
  /** Module documentation */
  modules?: CompodocModule[];
  [key: string]: any;
}

interface CompodocComponent {
  /** Component name */
  name: string;
  /** Component selector */
  selector: string;
  /** Component description */
  description?: string;
  /** Input properties */
  inputsClass?: CompodocProperty[];
  /** Output events */
  outputsClass?: CompodocProperty[];
  /** Component methods */
  methodsClass?: CompodocMethod[];
  /** File path */
  file: string;
  /** TypeScript source */
  sourceCode?: string;
}

interface CompodocProperty {
  /** Property name */
  name: string;
  /** Property type */
  type: string;
  /** Default value */
  defaultValue?: string;
  /** Property description */
  description?: string;
  /** Whether property is optional */
  optional?: boolean;
  /** Decorators applied */
  decorators?: CompodocDecorator[];
}

interface CompodocMethod {
  /** Method name */
  name: string;
  /** Return type */
  returnType: string;
  /** Method parameters */
  args?: CompodocMethodArg[];
  /** Method description */
  description?: string;
}

interface CompodocMethodArg {
  /** Parameter name */
  name: string;
  /** Parameter type */
  type: string;
  /** Whether parameter is optional */
  optional?: boolean;
}

interface CompodocDecorator {
  /** Decorator name */
  name: string;
  /** Decorator options */
  stringifiedOptions?: string;
}

// Configure Angular docs in .storybook/preview.js
import { setCompodocJson } from "@storybook/addon-docs/angular";
import docJson from "../documentation.json";

setCompodocJson(docJson);

export const parameters = {
  docs: {
    extractComponentDescription: (component, { notes }) => {
      if (notes) {
        return typeof notes === 'string' ? notes : notes.markdown || notes.text;
      }
      return null;
    },
  },
};

/**
 * Sets Ember documentation JSON for component extraction
 * Enables automatic props and component documentation for Ember components  
 * @param jsonDoc - Ember documentation JSON structure
 */
function setJSONDoc(jsonDoc: EmberDocJson): void;

interface EmberDocJson {
  /** Component documentation entries */
  components?: EmberComponent[];
  /** Helper function documentation */
  helpers?: EmberHelper[];
  /** Service documentation */
  services?: EmberService[];
  /** Modifier documentation */
  modifiers?: EmberModifier[];
  [key: string]: any;
}

interface EmberComponent {
  /** Component name */
  name: string;
  /** Component description */
  description?: string;
  /** Component arguments */
  arguments?: EmberArgument[];
  /** Component attributes */
  attributes?: EmberAttribute[];
  /** Yielded values */
  yields?: EmberYield[];
  /** File location */
  file?: string;
}

interface EmberArgument {
  /** Argument name */
  name: string;
  /** Argument type */
  type: string;
  /** Argument description */
  description?: string;
  /** Whether argument is required */
  required?: boolean;
  /** Default value */
  defaultValue?: string;
}

interface EmberAttribute {
  /** Attribute name */
  name: string;
  /** Attribute type */
  type: string;
  /** Attribute description */
  description?: string;
}

interface EmberYield {
  /** Yield name */
  name: string;
  /** Yielded type */
  type: string;
  /** Yield description */
  description?: string;
}

/**
 * Svelte Higher-Order Component for docs integration
 * Provides wrapper functionality for Svelte components in Storybook
 * Located at: svelte/HOC.svelte
 */
interface SvelteHOC {
  /** Wrapped component */
  component: SvelteComponent;
  /** Component props */
  props?: Record<string, any>;
  /** Event handlers */
  on?: Record<string, (event: any) => void>;
  /** Slot content */
  slots?: Record<string, any>;
}

// Usage in Svelte stories
// import HOC from "@storybook/addon-docs/svelte/HOC.svelte";

/**
 * Sets custom elements manifest data for documentation extraction
 * Available from @storybook/web-components renderer package
 * @param customElementsManifest - Custom Elements Manifest data
 */
function setCustomElementsManifest(customElementsManifest: CustomElementsManifest): void;

/**
 * Alternative function name for setting custom elements data
 * @param customElements - Custom elements data
 */
function setCustomElements(customElements: any): void;

/**
 * Gets current custom elements data
 * @returns Current custom elements data or manifest
 */
function getCustomElements(): any;

interface CustomElementsManifest {
  /** Schema version */
  version?: string;
  /** Modules containing custom element declarations */
  modules?: Module[];
  /** Package metadata */
  package?: PackageMetadata;
}

interface Module {
  /** Module path */
  path?: string;
  /** Exported declarations */
  exports?: Export[];
  /** Declarations in this module */
  declarations?: Declaration[];
}

interface Declaration {
  /** Declaration kind */
  kind: string;
  /** Declaration name */
  name: string;
  /** Custom element tag name */
  tagName?: string;
  /** Description */
  description?: string;
  /** Class members */
  members?: Member[];
  /** Events */
  events?: Event[];
  /** Slots */
  slots?: Slot[];
  /** CSS properties */
  cssProperties?: CSSProperty[];
}

interface Member {
  /** Member kind */
  kind: string;
  /** Member name */
  name: string;
  /** Member type */
  type?: { text: string };
  /** Description */
  description?: string;
  /** Default value */
  default?: string;
  /** Corresponding attribute name */
  attribute?: string;
  /** Whether property reflects to attribute */
  reflects?: boolean;
}

// Web Components documentation extraction  
interface WebComponentDocs {
  /** Custom element tag name */
  tagName: string;
  /** Element description */
  description?: string;
  /** Element properties */
  properties?: WebComponentProperty[];
  /** Element attributes */
  attributes?: WebComponentAttribute[];  
  /** Element events */
  events?: WebComponentEvent[];
  /** Element slots */
  slots?: WebComponentSlot[];
  /** CSS custom properties */
  cssProperties?: WebComponentCSSProperty[];
}

interface WebComponentProperty {
  /** Property name */
  name: string;
  /** Property type */
  type: string;
  /** Property description */
  description?: string;
  /** Default value */
  default?: any;
  /** Whether property reflects to attribute */
  reflects?: boolean;
  /** Associated attribute name */
  attribute?: string;
}

interface WebComponentAttribute {
  /** Attribute name */
  name: string;
  /** Attribute type */
  type: string;
  /** Attribute description */
  description?: string;
  /** Default value */
  default?: string;
}

interface WebComponentEvent {
  /** Event name */
  name: string;
  /** Event type */
  type: string;
  /** Event description */
  description?: string;
  /** Event detail type */
  detail?: string;
}

interface WebComponentSlot {
  /** Slot name */
  name: string;
  /** Slot description */
  description?: string;
}

interface WebComponentCSSProperty {
  /** CSS property name */
  name: string;
  /** Property description */
  description?: string;
  /** Default value */
  default?: string;
  /** Property syntax */
  syntax?: string;
}

// Generate Compodoc documentation
// npm run compodoc -- -p ./tsconfig.json -e json -d .

// .storybook/preview.js
import { setCompodocJson } from "@storybook/addon-docs/angular";
import docJson from "../documentation.json";

setCompodocJson(docJson);

// Story example with Angular component
export default {
  title: "Components/Button",
  component: ButtonComponent,
  parameters: {
    docs: {
      description: {
        component: "A reusable button component with multiple variants",
      },
    },
  },
  argTypes: {
    variant: {
      control: { type: "select" },
      options: ["primary", "secondary", "danger"],
    },
    disabled: {
      control: { type: "boolean" },
    },
  },
};

export const Primary = {
  args: {
    label: "Primary Button",
    variant: "primary",
    disabled: false,
  },
};

// .storybook/preview.js
import { setJSONDoc } from "@storybook/addon-docs/ember";
import emberDocJson from "../ember-docs.json";

setJSONDoc(emberDocJson);

// Ember story example
export default {
  title: "Components/Card",
  component: "ui-card",
  parameters: {
    docs: {
      description: {
        component: "A flexible card component for displaying content",
      },
    },
  },
};

export const Default = {
  args: {
    title: "Card Title",
    content: "Card content goes here",
    actions: true,
  },
  render: (args) => ({
    template: hbs`
      <UiCard 
        @title={{this.title}}
        @content={{this.content}} 
        @showActions={{this.actions}}
      />
    `,
    context: args,
  }),
};

// Button.stories.js
import Button from "./Button.svelte";
import HOC from "@storybook/addon-docs/svelte/HOC.svelte";

export default {
  title: "Components/Button",
  component: HOC,
  parameters: {
    docs: {
      description: {
        component: "A Svelte button component with customizable styling",
      },
    },
  },
};

export const Primary = {
  args: {
    component: Button,
    props: {
      label: "Primary Button",
      variant: "primary",
      disabled: false,
    },
  },
};

// .storybook/preview.js
import { setCustomElementsManifest } from "@storybook/web-components";
import customElementsManifest from "../custom-elements.json";

// Set custom elements manifest for documentation
setCustomElementsManifest(customElementsManifest);

// Alternative: Direct manifest setup
setCustomElementsManifest({
  version: "experimental",
  modules: [
    {
      declarations: [
        {
          kind: "class",
          name: "MyButton",
          tagName: "my-button",
          description: "A custom button element",
          members: [
            {
              kind: "field",
              name: "variant",
              type: { text: "string" },
              description: "Button variant style",
              default: '"primary"',
              attribute: "variant"
            },
            {
              kind: "field",
              name: "disabled",
              type: { text: "boolean" },
              description: "Whether button is disabled",
              default: "false",
              reflects: true
            }
          ],
          events: [
            {
              name: "click",
              type: { text: "CustomEvent" },
              description: "Fired when button is clicked"
            }
          ]
        }
      ]
    }
  ]
});

// Web Component story
export default {
  title: "Components/MyButton",
  component: "my-button",
  parameters: {
    docs: {
      description: {
        component: "Custom button web component with accessibility features",
      },
    },
  },
};

export const Primary = {
  args: {
    variant: "primary",
    disabled: false,
  },
  render: (args) => 
    `<my-button variant="${args.variant}" ${args.disabled ? 'disabled' : ''}>
       Click me
     </my-button>`,
};

interface FrameworkComponent {
  /** Component name */
  name: string;
  /** Component description */
  description?: string;
  /** Component properties/inputs */
  props?: FrameworkProperty[];
  /** Component events/outputs */
  events?: FrameworkEvent[];
  /** Component slots/content projection */
  slots?: FrameworkSlot[];
}

interface FrameworkProperty {
  /** Property name */
  name: string;
  /** Property type */
  type: string;
  /** Property description */
  description?: string;
  /** Default value */
  defaultValue?: any;
  /** Whether property is required */
  required?: boolean;
}

interface FrameworkEvent {
  /** Event name */
  name: string;
  /** Event type */
  type: string;
  /** Event description */
  description?: string;
  /** Event payload type */
  detail?: string;
}

interface FrameworkSlot {
  /** Slot name */
  name: string;
  /** Slot description */
  description?: string;
  /** Slot content type */
  type?: string;
}