// 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 `
**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 + `\n ${yamlProps[propName].description}${getEnumsIfApplicable( yamlProps[propName].enum )}\n\n`; yamlTable = processPropsRecursively( yamlProps[propName].items.properties, yamlTable, `${prefix}${propName}[].` ); return; } // Check if object if ( yamlProps[propName].type === "object" && yamlProps[propName].properties ) { yamlTable = yamlTable + `\n ${yamlProps[propName].description}${getEnumsIfApplicable( yamlProps[propName].enum )}\n\n`; yamlTable = processPropsRecursively( yamlProps[propName].properties, yamlTable, `${prefix}${propName}.` ); return; } yamlTable = yamlTable + `\n ${yamlProps[propName].description}${getEnumsIfApplicable( yamlProps[propName].enum )}\n\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[]. 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"); // Add React Props tab lines.push(' '); lines.push(reactProps); lines.push(""); // Add Flow Configuration tab if yaml props exist if (yamlProps) { lines.push('\n'); lines.push(yamlProps); lines.push(""); } // Close tabs container lines.push(""); lines.push("\n"); fs.writeFileSync(officialDocFile, lines.join("\n")); }); } );

Component Guides

Additional Guides

​Resources

Resources