hr {
  margin-bottom: 1.5rem !important;
}


// Script that generates typescript docs for javascript/packages/react components as well as the yaml schema for the editor

const fs = require("fs");
const path = require("path");
const { execSync } = require("child_process");

const frigadeComponentsToDocument = [
  {
    reactComponent: "src/components/Survey/NPS.tsx",
    officialDocFiles: ["component/survey/nps.mdx"],
    yamlSchemaPath: "../frigade-web/public/editor/schema/form_v2_step.json",
    autogenDocPath: "../javascript/packages/react/docs/interfaces/NPSProps.md",
    typeName: "NPSProps",
  },
  // {
  //   reactComponent: "src/components/Provider/index.ts",
  //   officialDocFiles: ["sdk/provider.mdx"],
  //   yamlSchemaPath: "",
  //   autogenDocPath:
  //     "../javascript/packages/react/docs/interfaces/ProviderProps.md",
  //   typeName: "ProviderProps",
  // },
  {
    reactComponent: "src/components/Announcement/index.tsx",
    officialDocFiles: ["component/announcement.mdx"],
    yamlSchemaPath:
      "../frigade-web/public/editor/schema/announcement_step.json",
    autogenDocPath:
      "../javascript/packages/react/docs/interfaces/AnnouncementProps.md",
    typeName: "AnnouncementProps",
  },
  {
    reactComponent: "src/components/Banner/index.tsx",
    officialDocFiles: ["component/banner.mdx"],
    yamlSchemaPath: "../frigade-web/public/editor/schema/banner_step.json",
    autogenDocPath:
      "../javascript/packages/react/docs/interfaces/BannerProps.md",
    typeName: "BannerProps",
  },
  {
    reactComponent: "src/components/Card/index.tsx",
    officialDocFiles: ["component/inline-card.mdx"],
    yamlSchemaPath:
      "../frigade-web/public/editor/schema/embedded_tip_step.json",
    autogenDocPath: "../javascript/packages/react/docs/interfaces/CardProps.md",
    typeName: "CardProps",
  },
  {
    reactComponent: "src/components/Form/index.tsx",
    officialDocFiles: ["component/form.mdx"],
    yamlSchemaPath: "../frigade-web/public/editor/schema/form_v2_step.json",
    autogenDocPath: "../javascript/packages/react/docs/interfaces/FormProps.md",
    typeName: "FormProps",
  },
  {
    reactComponent: "src/components/Tour/Tour.tsx",
    officialDocFiles: ["component/tour.mdx"],
    yamlSchemaPath: "../frigade-web/public/editor/schema/tour_step.json",
    autogenDocPath: "../javascript/packages/react/docs/interfaces/TourProps.md",
    typeName: "TourProps",
  },
  {
    reactComponent: "src/components/Checklist/Collapsible.tsx",
    officialDocFiles: ["component/checklist/collapsible.mdx"],
    yamlSchemaPath: "../frigade-web/public/editor/schema/checklist_step.json",
    autogenDocPath:
      "../javascript/packages/react/docs/interfaces/CollapsibleProps.md",
    typeName: "CollapsibleProps",
  },
  {
    reactComponent: "src/components/Checklist/Carousel.tsx",
    officialDocFiles: ["component/checklist/carousel.mdx"],
    yamlSchemaPath: "../frigade-web/public/editor/schema/checklist_step.json",
    autogenDocPath:
      "../javascript/packages/react/docs/interfaces/CollapsibleProps.md",
    typeName: "CarouselProps",
  },
  // {
  //   js: "src/core/flow.ts",
  //   officialDocFiles: ["sdk/js/flow.mdx"],
  //   autogenDocPath: "../javascript/packages/js-api/docs/classes/Flow.md",
  // },
  // {
  //   js: "src/core/frigade.ts",
  //   officialDocFiles: ["sdk/js/frigade.mdx"],
  //   autogenDocPath: "../javascript/packages/js-api/docs/classes/Frigade.md",
  // },
  // {
  //   js: "src/core/types.ts",
  //   officialDocFiles: ["sdk/js/step.mdx"],
  //   autogenDocPath: "../javascript/packages/js-api/docs/interfaces/FlowStep.md",
  // },
];
const commonYamlContent = JSON.parse(
  fs.readFileSync(
    "../frigade-web/public/editor/schema/common_step.json",
    "utf-8"
  )
);

function getEnumsIfApplicable(maybeEnums) {
  if (!maybeEnums) {
    return "";
  }

  return `<br />**Possible values:** ${maybeEnums
    .map((enumValue) => `\`${enumValue}\``)
    .join(", ")}`;
}

function processPropsRecursively(yamlProps, yamlTable, prefix = "") {
  (Object.keys(yamlProps) || []).forEach((propName) => {
    // Check if yamlProps[propName].properties exists
    if (
      yamlProps[propName].type === "array" &&
      yamlProps[propName].items &&
      yamlProps[propName].items.properties
    ) {
      yamlTable =
        yamlTable +
        `<ParamField body="${prefix}${propName}" type="${
          yamlProps[propName].type ?? "any"
        }">\n  ${yamlProps[propName].description}${getEnumsIfApplicable(
          yamlProps[propName].enum
        )}\n</ParamField>\n`;
      yamlTable = processPropsRecursively(
        yamlProps[propName].items.properties,
        yamlTable,
        `${prefix}${propName}[].`
      );
      return;
    }
    // Check if object
    if (
      yamlProps[propName].type === "object" &&
      yamlProps[propName].properties
    ) {
      yamlTable =
        yamlTable +
        `<ParamField body="${prefix}${propName}" type="${
          yamlProps[propName].type ?? "any"
        }">\n  ${yamlProps[propName].description}${getEnumsIfApplicable(
          yamlProps[propName].enum
        )}\n</ParamField>\n`;
      yamlTable = processPropsRecursively(
        yamlProps[propName].properties,
        yamlTable,
        `${prefix}${propName}.`
      );
      return;
    }

    yamlTable =
      yamlTable +
      `<ParamField body="${prefix}${propName}" type="${
        yamlProps[propName].type ?? "any"
      }">\n  ${yamlProps[propName].description}${getEnumsIfApplicable(
        yamlProps[propName].enum
      )}\n</ParamField>\n`;
  });
  return yamlTable;
}

frigadeComponentsToDocument.forEach(
  ({
    js,
    reactComponent,
    officialDocFiles,
    autogenDocPath,
    yamlSchemaPath,
    typeName,
  }) => {
    officialDocFiles.forEach((officialDocFile) => {
      let reactProps;

      if (js) {
        // Generate doc
        const command = `cd ../javascript/packages/js-api && yarn typedoc --plugin typedoc-plugin-markdown ${js}`;
        execSync(command, { stdio: "inherit" });
        reactProps = fs.readFileSync(autogenDocPath, "utf-8");
      } else {
        // Use extract-docs.js for React components
        const command = `node ./scripts/extract-docs.js ../javascript/packages/react/${reactComponent} ${typeName} 2`;
        console.log(command);
        reactProps = execSync(command, { encoding: "utf-8" });
      }

      let yamlDocContent = JSON.parse(
        yamlSchemaPath ? fs.readFileSync(yamlSchemaPath, "utf-8") : "{}"
      );

      let yamlProps = "";
      if (yamlSchemaPath) {
        let yamlPropsObj = yamlDocContent.properties ?? {};
        yamlPropsObj = {
          ...commonYamlContent.properties,
          ...(yamlDocContent.properties ?? {}),
        };
        // Update every key and replace it with steps[].<key>
        Object.keys(yamlPropsObj).forEach((propName) => {
          yamlPropsObj[`steps[].${propName}`] = yamlPropsObj[propName];
          delete yamlPropsObj[propName];
        });
        let highLevelProps = yamlSchemaPath
          ? JSON.parse(
              fs.readFileSync(yamlSchemaPath.replace("_step", "_flow"), "utf-8")
            )
          : {};
        yamlPropsObj = {
          ...(highLevelProps.properties ?? {}),
          ...yamlPropsObj,
        };
        // Remove data prop as it's deprecated
        delete yamlPropsObj["data"];

        if (yamlPropsObj && Object.keys(yamlPropsObj).length > 0) {
          yamlProps = processPropsRecursively(yamlPropsObj, "");
        }
      }

      // Read official doc
      const officialDoc = fs.readFileSync(officialDocFile, "utf-8");
      // Write to official doc from the first line that contains "## SDK Properties"
      const lines = officialDoc.split("\n");
      const index = lines.findIndex((line) =>
        line.includes("## SDK Properties")
      );

      // Delete everything after the line
      lines.splice(index + 1, lines.length - index);

      // Add tabs container
      lines.push("\n<Tabs>");

      // Add React Props tab
      lines.push('  <Tab title="React Props">');
      lines.push(reactProps);
      lines.push("</Tab>");

      // Add Flow Configuration tab if yaml props exist
      if (yamlProps) {
        lines.push('\n<Tab title="Flow Configuration (Advanced Editor)">');
        lines.push(yamlProps);
        lines.push("</Tab>");
      }

      // Close tabs container
      lines.push("</Tabs>");
      lines.push("\n");

      fs.writeFileSync(officialDocFile, lines.join("\n"));
    });
  }
);


#!/usr/bin/env node

const fs = require("fs");
const path = require("path");
const ts = require("typescript");
const glob = require("glob");

function parseTypeFile(filePath, program) {
  const sourceFile = program.getSourceFile(filePath);

  if (!sourceFile) {
    console.error("Available files:", program.getRootFileNames());
    throw new Error(`File not found or invalid: ${filePath}`);
  }
  return sourceFile;
}

function getDocsFromNode(node, checker, levels, processedTypes = new Set()) {
  if (levels < 0 || !node) return {};

  const symbol = checker.getSymbolAtLocation(node.name);
  if (!symbol || processedTypes.has(symbol.name)) return {};
  processedTypes.add(symbol.name);

  // Get the full type including base types
  const type = checker.getTypeAtLocation(node);

  // Get all properties from the type and its base types
  const properties = type.getProperties();

  let docs = {};

  // Process each property
  for (const property of properties) {
    const propertyDeclarations = property.getDeclarations();
    if (propertyDeclarations && propertyDeclarations[0]) {
      const jsDoc = ts.getJSDocTags(propertyDeclarations[0]);
      if (jsDoc.some((tag) => tag.tagName.text === "ignore")) {
        continue;
      }

      const propertyType = checker.getTypeOfSymbolAtLocation(
        property,
        propertyDeclarations[0]
      );
      const typeString = checker.typeToString(propertyType);
      const documentation = ts.displayPartsToString(
        property.getDocumentationComment(checker)
      );

      docs[property.name] = {
        type: typeString,
        description: documentation,
      };
    }
  }

  return docs;
}

function generateMDX(docs) {
  return Object.entries(docs)
    .sort(([a], [b]) => a.localeCompare(b))
    .map(
      ([name, { type, description }]) =>
        `<ParamField body="${name
          .replaceAll('"', "'")
          .replaceAll("|", ",")}" type="${type
          .replaceAll('"', "'")
          .replaceAll("|", ",")}">\n  ${description.trim()}\n</ParamField>`
    )
    .join("\n");
}

function main() {
  const args = process.argv.slice(2);
  const [relativePath, typeName, recursionLevels = "1"] = args;
  const filePath = path.resolve(relativePath);
  const projectRoot = path.resolve(path.dirname(filePath), "../../../..");
  const reactPackageRoot = path.resolve(path.dirname(filePath), "../../..");

  if (!filePath || !typeName) {
    console.error(
      "Usage: extract-docs <file-path> <type-name> [recursion-levels]"
    );
    process.exit(1);
  }

  const levels = parseInt(recursionLevels, 10);

  // Create a TypeScript configuration that matches your project's setup
  const compilerOptions = {
    allowJs: true,
    jsx: ts.JsxEmit.React,
    esModuleInterop: true,
    moduleResolution: ts.ModuleResolutionKind.NodeJs,
    baseUrl: reactPackageRoot,
    paths: {
      "@/*": ["src/*"],
    },
    typeRoots: [
      path.join(projectRoot, "node_modules/@types"),
      path.join(reactPackageRoot, "node_modules/@types"),
    ],
  };

  // Get all TypeScript files in the project, but focus on the react package
  const allFiles = getAllFilesInProject(reactPackageRoot);

  // Create program with all files in the project
  const program = ts.createProgram(allFiles, compilerOptions);
  const checker = program.getTypeChecker();

  const sourceFile = parseTypeFile(filePath, program);
  let docs = {};

  ts.forEachChild(sourceFile, (node) => {
    if (ts.isInterfaceDeclaration(node) || ts.isTypeAliasDeclaration(node)) {
      if (node.name.text === typeName) {
        docs = getDocsFromNode(node, checker, levels);
      }
    }
  });

  if (Object.keys(docs).length === 0) {
    console.error(`Type or interface ${typeName} not found in file.`);
    process.exit(1);
  }

  const mdx = generateMDX(docs);
  console.log(mdx);
}

function getAllFilesInProject(projectRoot) {
  // Look for all TypeScript files in the project
  return glob.sync("src/**/*.{ts,tsx}", {
    ignore: ["**/node_modules/**", "**/dist/**", "**/build/**"],
    cwd: projectRoot,
    absolute: true,
  });
}

main();


Resources

In this video, we show you how to build a 'New' badge with React and Frigade.

New Feature Badge

Guide: Build a 'New' Badge

Frigade

Product growth and onboarding for modern software companies

Overview

Frigade Documentation

Get set up with Frigade in less than 15 minutes

Quickstart

Quickstart Guide

Easily manage your product onboarding from the admin dashboard

Admin Overview

Flows

Easily manage users and groups as they engage with your Flows

Users and Groups

Frigade provides analytics and connects to external analytics platforms

Analytics

Launch Flows and set cool-offs without code

Collections

Targeting

Frigade supports development and production environments

Environments

Manage the rollout of new Flow updates with built-in version control

Version Control

Dynamic Variables

Using HTML in Strings

Internationalization

Beautiful UI components, best practices built-in

Components Overview

Communicate information or drive action via modal-based announcements

Announcement

Communicate information or drive action via in-line banners

Banner

Communicate information or drive action via in-line content cards

Card

Collect user information via forms in modals or embedded in your UI

Form

Collect structured and freeform feedback from your users

NPS Survey

Progress Badge

React SDK Overview

React SDK Quickstart

Provider

Navigation

Find solutions to common issues with the Frigade SDK.

Common Issues

Common Issues and Solutions

JS Quickstart

Learn how to run unit and integration tests with your Frigade Flows

Automated Testing

Learn how to dynamically complete steps in Flows when your users take certain actions in your application.

Dynamically Completing a Step

Reverse Proxy

Reverse Proxy and Custom Domains

Link a guest session's state to a user when they register or log in

Merging a Guest with User

Merging a guest session with a authenticated user

Upgrading from V1

V1 SDK Guide

Authorization

API Authorization

Webhooks

Get all Flows

Get a Flow

Update a Flow's configuration and metadata

Update Flow

Delete Flow

Get User Flow State

Updates the user's state in a single Flow

Update User Flow State

Create a user, add properties, and tracking events

Create or update a User

Find a User

Delete a User

Create a Group

Find a Group

Delete a Group

Announcements

Guide: Product Announcements

In this video, we show you how to build a GitHub style embedded card.

Cards and Banners

Guide: Cards and Banners

In this video, we show you how to build a Form with React, Frigade, and Next.js and how to send the form data to Slack.

Form with Slack

Guide: Building Slack-Integrated Forms

Product Tours & Hints

Guide: Product Tours & Hints

Learn how to use Frigade's [targeting](/platform/targeting) feature to only show a Flow to new users

Component Guides

Additional Guides

Guide: Build a 'New' Badge

Resources

Component Guides

Additional Guides

​Resources

Resources