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

#topbar-cta-button {
  border-radius: 100px;
  border: 1px solid #627ee910;
  background: radial-gradient(
      77.34% 100% at 50% 0%,
      rgba(255, 255, 255, 0.17) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(0deg, #12228f 0%, #12228f 100%), #090f1b;
  background-blend-mode: normal, overlay, normal;
  box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.47) inset,
    0px 0px 140px 28px rgba(53, 79, 255, 0.5),
    0px 0px 0px 5px rgba(255, 255, 255, 0.08) inset,
    0px 0px 0px 4px rgba(0, 0, 0, 0.2), 0px 0px 36px 0px #242b5a,
    0px 1.864px 0.466px -1.553px rgba(255, 255, 255, 0.7) inset,
    0px 0.621px 0.311px -0.155px rgba(255, 255, 255, 0.3),
    0px -0.311px 0.621px 0.621px rgba(0, 0, 0, 0.9) inset;
}


.mint-pointer-events-none {
    pointer-events: none
}
.mint-rounded {
    border-radius: 0.25rem
}

// 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 frigadeReactMap = {
  'src/FrigadeChecklist/index.tsx': {
    officialDocFiles: ['component/checklist-condensed.mdx', 'component/checklist-carousel.mdx', 'component/checklist-classic.mdx'],
    yamlSchemaPath: '../app-web/public/editor/schema/checklist_step.json',
    autogenDocPath: '../javascript/packages/react/docs/interfaces/FrigadeChecklistProps.md',
  },
  'src/FrigadeTour/index.tsx': {
    officialDocFiles: ['component/tour.mdx', 'component/hint.mdx'],
    yamlSchemaPath: '../app-web/public/editor/schema/tour_step.json',
    autogenDocPath: '../javascript/packages/react/docs/interfaces/FrigadeTourProps.md',
  },
  'src/FrigadeForm/index.tsx': {
    officialDocFiles: ['component/form.mdx'],
    yamlSchemaPath: '../app-web/public/editor/schema/form_step.json',
    autogenDocPath: '../javascript/packages/react/docs/interfaces/FrigadeFormProps.md',
  },
  'src/FrigadeNPSSurvey/index.tsx': {
    officialDocFiles: ['component/nps-survey.mdx'],
    yamlSchemaPath: '../app-web/public/editor/schema/nps_survey_step.json',
    autogenDocPath: '../javascript/packages/react/docs/interfaces/FrigadeNPSSurveyProps.md',
  },
  'src/FrigadeEmbeddedTip/index.tsx': {
    officialDocFiles: ['component/embedded-tip.mdx'],
    yamlSchemaPath: '../app-web/public/editor/schema/embedded_tip_step.json',
    autogenDocPath: '../javascript/packages/react/docs/interfaces/FrigadeEmbeddedTipProps.md',
  },
  'src/FrigadeAnnouncement/index.tsx': {
    officialDocFiles: ['component/announcement.mdx'],
    yamlSchemaPath: '../app-web/public/editor/schema/announcement_step.json',
    autogenDocPath: '../javascript/packages/react/docs/interfaces/FrigadeAnnouncementProps.md',
  },
  // 'src/FrigadeSupportWidget/index.tsx': {
  //   officialDocFiles: ['component/support-widget.mdx'],
  //   autogenDocPath: '../javascript/packages/react/docs/interfaces/FrigadeSupportWidgetProps.md',
  // },
  'src/FrigadeBanner/index.tsx': {
    officialDocFiles: ['component/banner.mdx'],
    yamlSchemaPath: '../app-web/public/editor/schema/banner_step.json',
    autogenDocPath: '../javascript/packages/react/docs/interfaces/FrigadeBannerProps.md',
  },
}

const commonYamlContent = JSON.parse(fs.readFileSync('../app-web/public/editor/schema/common_step.json', 'utf-8'));

Object.entries(frigadeReactMap).forEach(([file, {officialDocFiles, autogenDocPath, yamlSchemaPath}]) => {

  officialDocFiles.forEach((officialDocFile) => {

    console.log(file)
    // Generate doc
    const command = `cd ../javascript/packages/react && yarn typedoc --plugin typedoc-plugin-markdown ${file}`
    execSync(command, {stdio: 'inherit'})
    console.log(command)
    // Read content
    let docContent = fs.readFileSync(autogenDocPath, 'utf-8')
    let yamlDocContent = JSON.parse(yamlSchemaPath ? fs.readFileSync(yamlSchemaPath, 'utf-8') : '{}');

    // Delete everything in content before the line "## Table of contents" (included)
    let regex = /[\s\S]+## Table of contents/gm
    docContent = docContent.replace(regex, '')

    regex = /[\s\S]+### Properties/gm
    docContent = docContent.replace(regex, '')

    regex = /## Properties\n/gm
    docContent = docContent.replace(regex, '')

    regex = /#### Inherited from\n\n.+\n\n/gm
    docContent = docContent.replaceAll(regex, '')

    regex = /#### Overrides\n\n.+\n\n/gm
    docContent = docContent.replaceAll(regex, '')

    regex = /#### Index signature\n/gm
    docContent = docContent.replaceAll(regex, '**Index signature**\n')

    regex = /#### Type declaration\n\n.+\n/gm
    docContent = docContent.replaceAll(regex, '')

    regex = /\(.*\.md#/gm
    docContent = docContent.replaceAll(regex, '(#')

    regex = /</gm
    docContent = docContent.replaceAll(regex, '&lt;')

    regex = /• /gm
    docContent = docContent.replaceAll(regex, '')

    regex = /{ /gm
    docContent = docContent.replaceAll(regex, '')

    regex = /#### Defined in\n\n\[.*\]/gm
    docContent = docContent.replaceAll(regex, '[View definition]')

    regex = /\n\n\| :------ \| :------ \|/g
    docContent = docContent.replace(regex, '\n\n|||\n| :------ | :------ |')

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


    let yamlTable = '';


    if (yamlProps && Object.keys(yamlProps).length > 0) {
      yamlTable ='The following props are available in `config.yml` in the `steps` array:<br /><br />\n';
      (Object.keys(yamlProps) || []).forEach((propName) => {
        // Check if yamlProps[propName].properties exists
        if (yamlProps[propName].properties) {
          // If it does, loop through it and add to yamlTable
          yamlTable = yamlTable + `<ParamField body="${propName}" type="${yamlProps[propName].type}">${yamlProps[propName].description}</ParamField>\n`;
          (Object.keys(yamlProps[propName].properties) || []).forEach((subPropName) => {
            yamlTable = yamlTable + `<ParamField body="${propName}.${subPropName}${yamlProps[propName].properties[subPropName].type === 'array' ? '[]' : ''}" type="${yamlProps[propName].properties[subPropName].type}">${yamlProps[propName].properties[subPropName].description}</ParamField>\n`;
            // Check if yamlProps[propName].properties[subPropName].items.properties exists and nest
            if (yamlProps[propName].properties[subPropName].items && yamlProps[propName].properties[subPropName].items.properties) {
              (Object.keys(yamlProps[propName].properties[subPropName].items.properties) || []).forEach((subSubPropName) => {
                yamlTable = yamlTable + `<ParamField body="${propName}.${subPropName}${yamlProps[propName].properties[subPropName].type === 'array' ? '[]' : ''}.${subSubPropName}" type="${yamlProps[propName].properties[subPropName].items.properties[subSubPropName].type}">${yamlProps[propName].properties[subPropName].items.properties[subSubPropName].description}</ParamField>\n`;
              });
            }
          });
          return;
        }

        yamlTable = yamlTable + `<ParamField body="${propName}" type="${yamlProps[propName].type}">${yamlProps[propName].description}</ParamField>\n`;
      });
    }

    // Match all the lines that fit this format: - [appearance](#appearance) and put in array
    // const tableOfContentReactProps = docContent.match(/- \[.*\]$#.*$/gm)
    // // Remove them all from docContent
    // docContent = docContent.replace(/- \[.*\]$#.*$\n/gm, '')
    // let reactPropsTable = ''
    // if (tableOfContentReactProps) {
    //   tableOfContentReactProps.forEach((line) => {
    //     reactPropsTable = reactPropsTable + `\t\t\t${line
    //       // Remove all tabs/white space surround line
    //       .replace(/\t/gm, '')
    //     }\n`;
    //   });
    // }

//     const tabs = `
// <Tabs>
//   <Tab title="React Component props">
//     ${reactPropsTable}
//   </Tab>
//   <Tab title="config.yml props">
//     ${yamlTable}
//   </Tab>
// </Tabs>
//     `;
    docContent = yamlTable + '\n## React component props'  + docContent;

    // Read official doc
    const officialDoc = fs.readFileSync(officialDocFile, 'utf-8')
    // Write to official doc from the first line that contains "## Props"
    const lines = officialDoc.split('\n')
    const index = lines.findIndex((line) => line.includes('## config.yml props'))
    // Delete everything after the line
    lines.splice(index + 1, lines.length - index)
    // Now append the new content
    lines.splice(index + 1, 0, docContent)


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





Features

Getting Started

Open source infrastructure for tracking events

Introduction

Trench

Get set up with Trench in less than 5 minutes

Self-host Quickstart

Cloud Quickstart

Trench is an open source project and we welcome contributions from the community.

Contributing

Contributing to Trench

Documentation for the Trench JavaScript client

JavaScript Client

API Overview

Use `track`, `identify`, and `group` to send events to Trench.

Overview

SDK and API

Events API

Webhooks API

Query API

Introduction

Features

Getting Started

Quickstart Guide →

API Reference →

Self-host →

Contact Us →

Overview

SDK and API

Events API

Webhooks API

Query API

​Features

​Getting Started

Quickstart Guide →

API Reference →

Self-host →

Contact Us →

Features

Getting Started