From 2d2dd47a34ddf12c9c81f9cd2c5e2835dfcb3a08 Mon Sep 17 00:00:00 2001 From: ShivkeshMadasu Date: Fri, 9 Jun 2023 16:17:51 +0530 Subject: [PATCH 1/5] DEX-250 Generating markdown documentation from source code --- package.json | 4 +- scripts/doc-gen/components-json-gen.js | 68 ++++++++++ scripts/doc-gen/markdown-gen.js | 125 ++++++++++++++++++ .../CardHolderNameElement/index.tsx | 3 + src/components/CardNumberElement/index.tsx | 3 + src/components/CvvElement/index.tsx | 3 + .../ExpirationDateElement/index.tsx | 3 + .../ExpirationMonthElement/index.tsx | 3 + .../ExpirationYearElement/index.tsx | 3 + src/components/InputFieldElement/index.tsx | 3 + src/components/PinElement/index.tsx | 3 + src/components/RevealElement/index.tsx | 4 +- src/components/SkyflowProvider/index.tsx | 4 + src/hooks/useCollectContainer/index.ts | 4 + src/hooks/useRevealContainer/index.ts | 4 + src/utils/constants/index.ts | 44 ++++++ 16 files changed, 279 insertions(+), 2 deletions(-) create mode 100644 scripts/doc-gen/components-json-gen.js create mode 100644 scripts/doc-gen/markdown-gen.js diff --git a/package.json b/package.json index 1ce2b51..2aff9d1 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,8 @@ "release": "release-it", "example": "yarn --cwd example", "bootstrap": "yarn example && yarn && yarn example pods", - "build": "bob build" + "build": "bob build", + "docs-gen": "node scripts/doc-gen/components-json-gen.js && node scripts/doc-gen/markdown-gen.js" }, "keywords": [ "react-native", @@ -132,6 +133,7 @@ "dependencies": { "jwt-decode": "^3.1.2", "lodash": "^4.17.21", + "react-docgen-typescript": "^2.2.2", "set-value": "^4.1.0", "uuid": "^9.0.0" } diff --git a/scripts/doc-gen/components-json-gen.js b/scripts/doc-gen/components-json-gen.js new file mode 100644 index 0000000..c8fcf64 --- /dev/null +++ b/scripts/doc-gen/components-json-gen.js @@ -0,0 +1,68 @@ +/* eslint-disable no-undef */ +/* eslint-disable @typescript-eslint/no-var-requires */ +const fs = require('fs'); +const path = require('path'); +const docgen = require('react-docgen-typescript'); + +const tsConfigParser = docgen.withCustomConfig('./tsconfig.json', { + savePropValueAsString: true, + skipChildrenPropWithoutDoc: false, + propFilter: { + skipPropsWithoutDoc: false, + skipPropsWithName: 'children', + }, + shouldExtractLiteralValuesFromEnum: true, +}); + +const paths = ['components', 'hooks']; +const excludeDirs = []; + +function getFiles(dir, files = []) { + const fileNames = fs.readdirSync(dir); + + fileNames.forEach((fileName) => { + const filePath = path.join(dir, fileName); + const stat = fs.statSync(filePath); + if (stat.isDirectory() && !excludeDirs.includes(fileName)) { + getFiles(filePath, files); + } else if (fileName === 'index.tsx' || fileName === 'index.ts') { + files.push(filePath); + } + }); + + return files; +} + +function generateDocumentationJson() { + const docJson = {}; + const rootPath = path.join(__dirname, '../../'); + + paths.forEach((item) => { + const pathJsonArray = []; + const folderPath = path.join(rootPath, 'src', item); + const files = getFiles(folderPath); + files.forEach((file) => { + const relativePath = path.relative(rootPath, file); + const docs = tsConfigParser.parse(relativePath); + pathJsonArray.push(docs[0]); + }); + docJson[item] = pathJsonArray; + }); + return docJson; +} + +function createDocJsonFile(json) { + const dirPath = path.join(__dirname, '../../', 'docs', 'json'); + const filePath = path.join(dirPath, 'components.json'); + + // Create docs/json folder if it doesn't exist + if (!fs.existsSync(dirPath)) { + fs.mkdirSync(dirPath); + } + + // Write to components.json file + fs.writeFileSync(filePath, JSON.stringify(json, null, 2)); + console.log('Json documentation is generated at docs/json'); +} + +createDocJsonFile(generateDocumentationJson()); diff --git a/scripts/doc-gen/markdown-gen.js b/scripts/doc-gen/markdown-gen.js new file mode 100644 index 0000000..db11abd --- /dev/null +++ b/scripts/doc-gen/markdown-gen.js @@ -0,0 +1,125 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ +const components = require('../../docs/json/components.json'); +const fs = require('fs'); +const path = require('path'); + +function formatTypeColumn(str, propType) { + if (!str) { + return ''; + } + const parts = str.split('|').map((s) => s.trim()); + if (parts.length === 1) { + return `\`${str}\``; + } + if (!propType) { + return `\`${parts[0]}\``; + } + return `\`${parts[0]} / ${parts[1]}\``; +} + +// Output directory for Markdown files +const outputDir = './docs/markdown'; + +// Overview page to list elements +let overviewContent = ` +{% env enable="reactNativeSdkRef" %} + +# React-Native + +Some documentation for the overview page. +`; + +// Loop through each component in the JSON object +Object.keys(components).forEach((key) => { + overviewContent += `\n## ${ + key == 'core' + ? 'Skyflow Provider' + : key == 'elements' + ? 'Components' + : key.charAt(0).toUpperCase() + key.slice(1) + }\n\n`; + + components[key] + .filter((component) => component) + .forEach((component) => { + // Create the Markdown file path based on the component name + const componentPath = path.join( + outputDir, + key, + `${component.displayName}.md` + ); + + const name = `${component.displayName}`; + overviewContent += `- [${name}](/sdks/skyflow-react-native/${key}/${name})\n`; + + const sortedProps = Object.entries(component.props) + .sort(([_, propA], [__, propB]) => { + if (propA.required && !propB.required) { + return -1; // propA comes before propB + } else if (!propA.required && propB.required) { + return 1; // propB comes before propA + } + return 0; // no change in order + }) + .reduce((sorted, [key, value]) => { + sorted[key] = value; + return sorted; + }, {}); + + // Generate the Markdown content for the component + let markdownContent = `--- +id: ${component.displayName} +title: ${component.displayName} +sidebar_label: ${component.displayName} +--- + +{% env enable="reactNativeSdkRef" %} + +# ${component.displayName} + +${component.description} + +## Import + +\`\`\` +import {${component.displayName}} from 'skyflow-react-native'; +\`\`\` +`; + const propsDetails = ` +## Props + +| Name | Type | Description | Required | +|-------------------------|----------------------|---------------------------------------------------------|------------------| +${Object.keys(sortedProps) + .map((propName) => { + const prop = sortedProps[propName]; + return `| ${prop.name} | ${formatTypeColumn( + prop.type.name, + prop.required + )} | ${prop.description} | ${prop.required} |`; + }) + .join('\n')} + +`; + if (Object.keys(component.props).length) { + markdownContent += propsDetails; + } + + if (Object.keys(component.tags).length > 0 && component.tags['returns']) { + markdownContent += `\n## Returns\n${component.tags['returns']}\n\n`; + } + + markdownContent += '{% /env %}'; + const folderPath = path.dirname(componentPath); + + // Create the folder if it doesn't exist + if (!fs.existsSync(folderPath)) { + fs.mkdirSync(folderPath, { recursive: true }); + } + // Write the Markdown content to the file + fs.writeFileSync(componentPath, markdownContent); + }); +}); +overviewContent += '\n{% /env %}'; +fs.writeFileSync(path.join(outputDir, 'Overview.md'), overviewContent); +console.log('markdown files generated at docs/markdown'); diff --git a/src/components/CardHolderNameElement/index.tsx b/src/components/CardHolderNameElement/index.tsx index 349bcfd..706bb5e 100644 --- a/src/components/CardHolderNameElement/index.tsx +++ b/src/components/CardHolderNameElement/index.tsx @@ -8,6 +8,9 @@ import { CollectElementProps, ElementType, ELEMENT_REQUIRED_ASTERISK, REQUIRED_M import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; +/** + * CardHolderNameElement can be used to create a name element + */ const CardHolderNameElement: React.FC = ({ container, options = { required: false }, ...rest }) => { const [element, setElement] = React.useState(); const [errorText, setErrorText] = React.useState(''); diff --git a/src/components/CardNumberElement/index.tsx b/src/components/CardNumberElement/index.tsx index 204d813..f2d1e12 100644 --- a/src/components/CardNumberElement/index.tsx +++ b/src/components/CardNumberElement/index.tsx @@ -9,6 +9,9 @@ import { CollectElementProps, ElementType, ELEMENT_REQUIRED_ASTERISK, REQUIRED_M import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; +/** + * sample documentation for CardNumberElement + */ const CardNumberElement: React.FC = ({ container, options = { required: false }, ...rest }) => { const [element, setElement] = React.useState(undefined); const [elementValue, setElementValue] = React.useState(''); diff --git a/src/components/CvvElement/index.tsx b/src/components/CvvElement/index.tsx index 83dec64..64792d3 100644 --- a/src/components/CvvElement/index.tsx +++ b/src/components/CvvElement/index.tsx @@ -8,6 +8,9 @@ import { CollectElementProps, ElementType, ELEMENT_REQUIRED_ASTERISK, REQUIRED_M import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; +/** + * sample documentation for CvvElement + */ const CvvElement: React.FC = ({ container, options = { requried: false }, ...rest }) => { const [element, setElement] = React.useState(); const [errorText, setErrorText] = React.useState(''); diff --git a/src/components/ExpirationDateElement/index.tsx b/src/components/ExpirationDateElement/index.tsx index 553399e..9d56e94 100644 --- a/src/components/ExpirationDateElement/index.tsx +++ b/src/components/ExpirationDateElement/index.tsx @@ -10,6 +10,9 @@ import { formatCollectElementOptions } from "../../utils/helpers"; import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; +/** + * sample documentation for ExpirationDateElement + */ const ExpirationDateElement: React.FC = ({ container, options, ...rest }) => { const [element, setElement] = React.useState(); const [elementValue, setElementValue] = React.useState(''); diff --git a/src/components/ExpirationMonthElement/index.tsx b/src/components/ExpirationMonthElement/index.tsx index 182550e..29aea8f 100644 --- a/src/components/ExpirationMonthElement/index.tsx +++ b/src/components/ExpirationMonthElement/index.tsx @@ -8,6 +8,9 @@ import { CollectElementProps, ElementType, ELEMENT_REQUIRED_ASTERISK, REQUIRED_M import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; +/** + * sample documentation for ExpirationMonthElement + */ const ExpirationMonthElement: React.FC = ({ container, options = { required: false }, ...rest }) => { const [element, setElement] = React.useState(); const [elementValue, setElementValue] = React.useState(''); diff --git a/src/components/ExpirationYearElement/index.tsx b/src/components/ExpirationYearElement/index.tsx index 5983205..035266e 100644 --- a/src/components/ExpirationYearElement/index.tsx +++ b/src/components/ExpirationYearElement/index.tsx @@ -11,6 +11,9 @@ import { formatCollectElementOptions } from "../../utils/helpers"; import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; +/** + * sample documentation for ExpirationYearElement + */ const ExpirationYearElement: React.FC = ({ container, options, ...rest }) => { const [element, setElement] = React.useState(); const [errorText, setErrorText] = React.useState(''); diff --git a/src/components/InputFieldElement/index.tsx b/src/components/InputFieldElement/index.tsx index 24873ae..befc7d1 100644 --- a/src/components/InputFieldElement/index.tsx +++ b/src/components/InputFieldElement/index.tsx @@ -8,6 +8,9 @@ import { CollectElementProps, ElementType, ELEMENT_REQUIRED_ASTERISK, REQUIRED_M import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; +/** + * sample documentation for InputFieldElement + */ const InputFieldElement: React.FC = ({ container, options = { required: false }, ...rest }) => { const [element, setElement] = React.useState(); const [errorText, setErrorText] = React.useState(''); diff --git a/src/components/PinElement/index.tsx b/src/components/PinElement/index.tsx index dcdc1fa..018727b 100644 --- a/src/components/PinElement/index.tsx +++ b/src/components/PinElement/index.tsx @@ -8,6 +8,9 @@ import { CollectElementProps, ElementType, ELEMENT_REQUIRED_ASTERISK, REQUIRED_M import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; +/** + * sample documentation for PinElement + */ const PinElement: React.FC = ({ container, options = { required: false }, ...rest }) => { const [element, setElement] = React.useState(); const [errorText, setErrorText] = React.useState(''); diff --git a/src/components/RevealElement/index.tsx b/src/components/RevealElement/index.tsx index d08872a..a2fad18 100644 --- a/src/components/RevealElement/index.tsx +++ b/src/components/RevealElement/index.tsx @@ -8,7 +8,9 @@ import { RevealElementProps } from "../../utils/constants" import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; - +/** + * sample documentation for RevealElement + */ const RevealElement: React.FC = ({ container, label, ...rest }) => { const [element, setElement] = React.useState(undefined); const [errorText, setErrorText] = React.useState(''); diff --git a/src/components/SkyflowProvider/index.tsx b/src/components/SkyflowProvider/index.tsx index fb50ab3..59dcf64 100644 --- a/src/components/SkyflowProvider/index.tsx +++ b/src/components/SkyflowProvider/index.tsx @@ -6,11 +6,15 @@ import Skyflow from '../../core/Skyflow'; import { IConfig, SkyflowConfigIntialState } from '../../utils/constants'; export interface ISkyflowProvider { + /** sample documentation*/ config: IConfig, } export const skyflowContext = React.createContext(null); +/** + * sample documentation for SkyflowProvider + */ const SkyflowProvider: React.FC> = ({children,config}): JSX.Element => { const skyflow = new Skyflow(config); return {children} diff --git a/src/hooks/useCollectContainer/index.ts b/src/hooks/useCollectContainer/index.ts index 62e994b..0728978 100644 --- a/src/hooks/useCollectContainer/index.ts +++ b/src/hooks/useCollectContainer/index.ts @@ -4,6 +4,10 @@ import useSkyflowContext from '../../components/SkyflowProvider/hook'; import CollectContainer from '../../core/CollectContainer'; +/** + * sample documentation for useCollectContainer hook + * @returns CollectContainer + */ const useCollectContainer = () => { const skyflowClient = useSkyflowContext(); return new CollectContainer(skyflowClient); diff --git a/src/hooks/useRevealContainer/index.ts b/src/hooks/useRevealContainer/index.ts index e5c8c50..411b7d5 100644 --- a/src/hooks/useRevealContainer/index.ts +++ b/src/hooks/useRevealContainer/index.ts @@ -4,6 +4,10 @@ import useSkyflowContext from '../../components/SkyflowProvider/hook'; import RevealContainer from '../../core/RevealContainer'; +/** + * sample documentation for useRevealContainer hook + * @returns RevealContainer + */ const useRevealContainer = () => { const skyflowClient = useSkyflowContext(); return new RevealContainer(skyflowClient); diff --git a/src/utils/constants/index.ts b/src/utils/constants/index.ts index 736ae41..46cf83f 100644 --- a/src/utils/constants/index.ts +++ b/src/utils/constants/index.ts @@ -4,10 +4,17 @@ import type CollectContainer from '../../core/CollectContainer'; import RevealContainer from '../../core/RevealContainer'; +/** + * sample documentation for IConfig interface + */ export interface IConfig { + /** sample documentation*/ vaultID: string; + /** sample documentation*/ vaultURL: string; + /** sample documentation*/ getBearerToken: () => Promise; + /** sample documentation*/ options?: Record; } @@ -36,22 +43,39 @@ export interface CollectElementInput { } export interface CollectElementProps { + /** sample documentation*/ table: string; + /** sample documentation*/ column: string; + /** sample documentation*/ container: CollectContainer; + /** sample documentation*/ label?: string; + /** sample documentation*/ placeholder?: string; + /** sample documentation*/ validations?: IValidationRule[]; + /** sample documentation*/ onChange?: Function; + /** sample documentation*/ onReady?: Function; + /** sample documentation*/ onBlur?: Function; + /** sample documentation*/ onFocus?: Function; + /** sample documentation*/ options?: Record; + /** sample documentation*/ inputStyles?: CollectInputStylesVariant; + /** sample documentation*/ labelStyles?: CollectLabelStylesVariant; + /** sample documentation*/ errorTextStyles?: StylesBaseVariant; } +/** + * sample documentation for ElementType enum + */ export enum ElementType { CVV = 'CVV', EXPIRATION_DATE = 'EXPIRATION_DATE', @@ -79,6 +103,9 @@ export enum ContentType { FORMDATA = 'multipart/form-data', } +/** + * sample documentation for LogLevel enum + */ export enum LogLevel { WARN = 'WARN', INFO = 'INFO', @@ -86,6 +113,9 @@ export enum LogLevel { ERROR = 'ERROR', } +/** + * sample documentation for Env enum + */ export enum Env { DEV = 'DEV', PROD = 'PROD', @@ -99,13 +129,21 @@ export interface RevealElementInput { } export interface RevealElementProps { + /** sample documentation*/ token: string; + /** sample documentation*/ container: RevealContainer; + /** sample documentation*/ label?: string; + /** sample documentation*/ altText?: string; + /** sample documentation*/ inputStyles?: StylesBaseVariant; + /** sample documentation*/ labelStyles?: StylesBaseVariant; + /** sample documentation*/ errorTextStyles?: StylesBaseVariant; + /** sample documentation*/ redaction?: RedactionType } @@ -125,6 +163,9 @@ export interface IRevealResponseType { errors?: Record[]; } +/** + * sample documentation for ValidationRuleType enum + */ export enum ValidationRuleType { REGEX_MATCH_RULE = 'REGEX_MATCH_RULE', LENGTH_MATCH_RULE = 'LENGTH_MATCH_RULE', @@ -195,6 +236,9 @@ export const REQUIRED_MARK_DEFAULT_STYLE = { export const ELEMENT_REQUIRED_ASTERISK = ' *'; +/** + * sample documentation for RedactionType enum + */ export enum RedactionType { DEFAULT = 'DEFAULT', PLAIN_TEXT = 'PLAIN_TEXT', From bb892122e2ac04f91fc697f3523dd0881e46591b Mon Sep 17 00:00:00 2001 From: kamal-skyflow Date: Wed, 2 Aug 2023 18:46:40 +0530 Subject: [PATCH 2/5] DEX-250 feat: added comments --- .../CardHolderNameElement/index.tsx | 2 +- src/components/CardNumberElement/index.tsx | 2 +- src/components/CvvElement/index.tsx | 2 +- .../ExpirationDateElement/index.tsx | 2 +- .../ExpirationMonthElement/index.tsx | 2 +- .../ExpirationYearElement/index.tsx | 2 +- src/components/InputFieldElement/index.tsx | 2 +- src/components/PinElement/index.tsx | 2 +- src/components/RevealElement/index.tsx | 2 +- src/components/SkyflowProvider/index.tsx | 4 +- src/hooks/useCollectContainer/index.ts | 2 +- src/hooks/useRevealContainer/index.ts | 2 +- src/utils/constants/index.ts | 40 +++++++++---------- 13 files changed, 33 insertions(+), 33 deletions(-) diff --git a/src/components/CardHolderNameElement/index.tsx b/src/components/CardHolderNameElement/index.tsx index 706bb5e..c29ae8a 100644 --- a/src/components/CardHolderNameElement/index.tsx +++ b/src/components/CardHolderNameElement/index.tsx @@ -9,7 +9,7 @@ import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; /** - * CardHolderNameElement can be used to create a name element + * Creates a Name element. */ const CardHolderNameElement: React.FC = ({ container, options = { required: false }, ...rest }) => { const [element, setElement] = React.useState(); diff --git a/src/components/CardNumberElement/index.tsx b/src/components/CardNumberElement/index.tsx index f2d1e12..f929682 100644 --- a/src/components/CardNumberElement/index.tsx +++ b/src/components/CardNumberElement/index.tsx @@ -10,7 +10,7 @@ import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; /** - * sample documentation for CardNumberElement + * Represents a Collect Element for capturing card numbers. */ const CardNumberElement: React.FC = ({ container, options = { required: false }, ...rest }) => { const [element, setElement] = React.useState(undefined); diff --git a/src/components/CvvElement/index.tsx b/src/components/CvvElement/index.tsx index 64792d3..c0bbb81 100644 --- a/src/components/CvvElement/index.tsx +++ b/src/components/CvvElement/index.tsx @@ -9,7 +9,7 @@ import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; /** - * sample documentation for CvvElement + * Collect Element for capturing CVV information. */ const CvvElement: React.FC = ({ container, options = { requried: false }, ...rest }) => { const [element, setElement] = React.useState(); diff --git a/src/components/ExpirationDateElement/index.tsx b/src/components/ExpirationDateElement/index.tsx index 9d56e94..0909b83 100644 --- a/src/components/ExpirationDateElement/index.tsx +++ b/src/components/ExpirationDateElement/index.tsx @@ -11,7 +11,7 @@ import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; /** - * sample documentation for ExpirationDateElement + * Collect Element for capturing expiration date information. */ const ExpirationDateElement: React.FC = ({ container, options, ...rest }) => { const [element, setElement] = React.useState(); diff --git a/src/components/ExpirationMonthElement/index.tsx b/src/components/ExpirationMonthElement/index.tsx index 29aea8f..35a1404 100644 --- a/src/components/ExpirationMonthElement/index.tsx +++ b/src/components/ExpirationMonthElement/index.tsx @@ -9,7 +9,7 @@ import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; /** - * sample documentation for ExpirationMonthElement + * Collect Element for capturing expiration month information. */ const ExpirationMonthElement: React.FC = ({ container, options = { required: false }, ...rest }) => { const [element, setElement] = React.useState(); diff --git a/src/components/ExpirationYearElement/index.tsx b/src/components/ExpirationYearElement/index.tsx index 035266e..6adf817 100644 --- a/src/components/ExpirationYearElement/index.tsx +++ b/src/components/ExpirationYearElement/index.tsx @@ -12,7 +12,7 @@ import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; /** - * sample documentation for ExpirationYearElement + * Collect Element for capturing expiration year information. */ const ExpirationYearElement: React.FC = ({ container, options, ...rest }) => { const [element, setElement] = React.useState(); diff --git a/src/components/InputFieldElement/index.tsx b/src/components/InputFieldElement/index.tsx index befc7d1..c1f9476 100644 --- a/src/components/InputFieldElement/index.tsx +++ b/src/components/InputFieldElement/index.tsx @@ -9,7 +9,7 @@ import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; /** - * sample documentation for InputFieldElement + * Collects sensitive data securely. */ const InputFieldElement: React.FC = ({ container, options = { required: false }, ...rest }) => { const [element, setElement] = React.useState(); diff --git a/src/components/PinElement/index.tsx b/src/components/PinElement/index.tsx index 018727b..f9b919e 100644 --- a/src/components/PinElement/index.tsx +++ b/src/components/PinElement/index.tsx @@ -9,7 +9,7 @@ import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; /** - * sample documentation for PinElement + * Collect Element for capturing Pin. */ const PinElement: React.FC = ({ container, options = { required: false }, ...rest }) => { const [element, setElement] = React.useState(); diff --git a/src/components/RevealElement/index.tsx b/src/components/RevealElement/index.tsx index a2fad18..6487390 100644 --- a/src/components/RevealElement/index.tsx +++ b/src/components/RevealElement/index.tsx @@ -9,7 +9,7 @@ import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; /** - * sample documentation for RevealElement + * Configuration for Reveal Elements. */ const RevealElement: React.FC = ({ container, label, ...rest }) => { const [element, setElement] = React.useState(undefined); diff --git a/src/components/SkyflowProvider/index.tsx b/src/components/SkyflowProvider/index.tsx index 59dcf64..9515871 100644 --- a/src/components/SkyflowProvider/index.tsx +++ b/src/components/SkyflowProvider/index.tsx @@ -6,14 +6,14 @@ import Skyflow from '../../core/Skyflow'; import { IConfig, SkyflowConfigIntialState } from '../../utils/constants'; export interface ISkyflowProvider { - /** sample documentation*/ + /** Configuration object for SkyflowProvider. */ config: IConfig, } export const skyflowContext = React.createContext(null); /** - * sample documentation for SkyflowProvider + * Sets up the Skyflow context using the provided configuration. */ const SkyflowProvider: React.FC> = ({children,config}): JSX.Element => { const skyflow = new Skyflow(config); diff --git a/src/hooks/useCollectContainer/index.ts b/src/hooks/useCollectContainer/index.ts index 0728978..2426ad7 100644 --- a/src/hooks/useCollectContainer/index.ts +++ b/src/hooks/useCollectContainer/index.ts @@ -5,7 +5,7 @@ import useSkyflowContext from '../../components/SkyflowProvider/hook'; import CollectContainer from '../../core/CollectContainer'; /** - * sample documentation for useCollectContainer hook + * Container for all Composable Elements. * @returns CollectContainer */ const useCollectContainer = () => { diff --git a/src/hooks/useRevealContainer/index.ts b/src/hooks/useRevealContainer/index.ts index 411b7d5..38e3243 100644 --- a/src/hooks/useRevealContainer/index.ts +++ b/src/hooks/useRevealContainer/index.ts @@ -5,7 +5,7 @@ import useSkyflowContext from '../../components/SkyflowProvider/hook'; import RevealContainer from '../../core/RevealContainer'; /** - * sample documentation for useRevealContainer hook + * Container for all Reveal Elements. * @returns RevealContainer */ const useRevealContainer = () => { diff --git a/src/utils/constants/index.ts b/src/utils/constants/index.ts index 46cf83f..7afc6d3 100644 --- a/src/utils/constants/index.ts +++ b/src/utils/constants/index.ts @@ -8,13 +8,13 @@ import RevealContainer from '../../core/RevealContainer'; * sample documentation for IConfig interface */ export interface IConfig { - /** sample documentation*/ + /** ID of the vault to connect to. */ vaultID: string; - /** sample documentation*/ + /** URL of the vault to connect to. */ vaultURL: string; - /** sample documentation*/ + /** Function that retrieves a Skyflow bearer token from your backend. */ getBearerToken: () => Promise; - /** sample documentation*/ + /** Additional configuration options. */ options?: Record; } @@ -43,17 +43,17 @@ export interface CollectElementInput { } export interface CollectElementProps { - /** sample documentation*/ + /** Table that the data belongs to. */ table: string; - /** sample documentation*/ + /** Column that the data belongs to. */ column: string; - /** sample documentation*/ + /** Used to declare the type of container you want to create*/ container: CollectContainer; - /** sample documentation*/ + /** Label for the element. */ label?: string; - /** sample documentation*/ + /** Placeholder text for the element. */ placeholder?: string; - /** sample documentation*/ + /** Input validation rules for the element. */ validations?: IValidationRule[]; /** sample documentation*/ onChange?: Function; @@ -129,21 +129,21 @@ export interface RevealElementInput { } export interface RevealElementProps { - /** sample documentation*/ + /** The actual data token. */ token: string; - /** sample documentation*/ + /** The reveal container. */ container: RevealContainer; - /** sample documentation*/ + /** Label for the form element. */ label?: string; - /** sample documentation*/ + /** Alternative text for the Reveal Element. */ altText?: string; - /** sample documentation*/ + /** Styles for the element. */ inputStyles?: StylesBaseVariant; - /** sample documentation*/ + /** Styles for the element's label. */ labelStyles?: StylesBaseVariant; - /** sample documentation*/ + /** Styles for the element's error text. */ errorTextStyles?: StylesBaseVariant; - /** sample documentation*/ + /** Redaction type of the revealed data. */ redaction?: RedactionType } @@ -164,7 +164,7 @@ export interface IRevealResponseType { } /** - * sample documentation for ValidationRuleType enum + * Supported validation rule types. */ export enum ValidationRuleType { REGEX_MATCH_RULE = 'REGEX_MATCH_RULE', @@ -237,7 +237,7 @@ export const REQUIRED_MARK_DEFAULT_STYLE = { export const ELEMENT_REQUIRED_ASTERISK = ' *'; /** - * sample documentation for RedactionType enum + * Supported redaction types. */ export enum RedactionType { DEFAULT = 'DEFAULT', From 4fb4e6fa8074165abbc3edbf557a8e5f737acc2a Mon Sep 17 00:00:00 2001 From: kamal-skyflow Date: Wed, 2 Aug 2023 18:46:40 +0530 Subject: [PATCH 3/5] DEX-250 feat: added comments --- src/components/CardNumberElement/index.tsx | 2 +- src/components/CvvElement/index.tsx | 2 +- src/components/ExpirationDateElement/index.tsx | 2 +- src/components/ExpirationMonthElement/index.tsx | 2 +- src/components/ExpirationYearElement/index.tsx | 2 +- src/components/PinElement/index.tsx | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/CardNumberElement/index.tsx b/src/components/CardNumberElement/index.tsx index f929682..54aa835 100644 --- a/src/components/CardNumberElement/index.tsx +++ b/src/components/CardNumberElement/index.tsx @@ -10,7 +10,7 @@ import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; /** - * Represents a Collect Element for capturing card numbers. + * Collect Element for capturing card numbers. */ const CardNumberElement: React.FC = ({ container, options = { required: false }, ...rest }) => { const [element, setElement] = React.useState(undefined); diff --git a/src/components/CvvElement/index.tsx b/src/components/CvvElement/index.tsx index c0bbb81..b02596e 100644 --- a/src/components/CvvElement/index.tsx +++ b/src/components/CvvElement/index.tsx @@ -9,7 +9,7 @@ import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; /** - * Collect Element for capturing CVV information. + * Collect Element for capturing CVV. */ const CvvElement: React.FC = ({ container, options = { requried: false }, ...rest }) => { const [element, setElement] = React.useState(); diff --git a/src/components/ExpirationDateElement/index.tsx b/src/components/ExpirationDateElement/index.tsx index 0909b83..ff79240 100644 --- a/src/components/ExpirationDateElement/index.tsx +++ b/src/components/ExpirationDateElement/index.tsx @@ -11,7 +11,7 @@ import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; /** - * Collect Element for capturing expiration date information. + * Collect Element for capturing expiration date. */ const ExpirationDateElement: React.FC = ({ container, options, ...rest }) => { const [element, setElement] = React.useState(); diff --git a/src/components/ExpirationMonthElement/index.tsx b/src/components/ExpirationMonthElement/index.tsx index 35a1404..6e1a1d9 100644 --- a/src/components/ExpirationMonthElement/index.tsx +++ b/src/components/ExpirationMonthElement/index.tsx @@ -9,7 +9,7 @@ import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; /** - * Collect Element for capturing expiration month information. + * Collect Element for capturing expiration month. */ const ExpirationMonthElement: React.FC = ({ container, options = { required: false }, ...rest }) => { const [element, setElement] = React.useState(); diff --git a/src/components/ExpirationYearElement/index.tsx b/src/components/ExpirationYearElement/index.tsx index 6adf817..c2ade7a 100644 --- a/src/components/ExpirationYearElement/index.tsx +++ b/src/components/ExpirationYearElement/index.tsx @@ -12,7 +12,7 @@ import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; /** - * Collect Element for capturing expiration year information. + * Collect Element for capturing expiration year. */ const ExpirationYearElement: React.FC = ({ container, options, ...rest }) => { const [element, setElement] = React.useState(); diff --git a/src/components/PinElement/index.tsx b/src/components/PinElement/index.tsx index f9b919e..3f3a861 100644 --- a/src/components/PinElement/index.tsx +++ b/src/components/PinElement/index.tsx @@ -9,7 +9,7 @@ import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; /** - * Collect Element for capturing Pin. + * Collect Element for capturing pin. */ const PinElement: React.FC = ({ container, options = { required: false }, ...rest }) => { const [element, setElement] = React.useState(); From b88e31f40c72da743f6b286f87763f99d60dd94e Mon Sep 17 00:00:00 2001 From: kamal-skyflow Date: Mon, 7 Aug 2023 10:21:22 +0530 Subject: [PATCH 4/5] DEX-250 chore: made suggested changes --- .../CardHolderNameElement/index.tsx | 2 +- src/components/CardNumberElement/index.tsx | 2 +- src/components/CvvElement/index.tsx | 2 +- .../ExpirationDateElement/index.tsx | 2 +- .../ExpirationMonthElement/index.tsx | 2 +- .../ExpirationYearElement/index.tsx | 2 +- src/components/InputFieldElement/index.tsx | 2 +- src/components/PinElement/index.tsx | 2 +- src/hooks/useCollectContainer/index.ts | 2 +- src/hooks/useRevealContainer/index.ts | 2 +- src/utils/constants/index.ts | 26 +++++++++---------- 11 files changed, 23 insertions(+), 23 deletions(-) diff --git a/src/components/CardHolderNameElement/index.tsx b/src/components/CardHolderNameElement/index.tsx index c29ae8a..ceaa636 100644 --- a/src/components/CardHolderNameElement/index.tsx +++ b/src/components/CardHolderNameElement/index.tsx @@ -9,7 +9,7 @@ import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; /** - * Creates a Name element. + * Element to collect cardholder names. */ const CardHolderNameElement: React.FC = ({ container, options = { required: false }, ...rest }) => { const [element, setElement] = React.useState(); diff --git a/src/components/CardNumberElement/index.tsx b/src/components/CardNumberElement/index.tsx index 54aa835..39a180e 100644 --- a/src/components/CardNumberElement/index.tsx +++ b/src/components/CardNumberElement/index.tsx @@ -10,7 +10,7 @@ import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; /** - * Collect Element for capturing card numbers. + * Element to collect card numbers. */ const CardNumberElement: React.FC = ({ container, options = { required: false }, ...rest }) => { const [element, setElement] = React.useState(undefined); diff --git a/src/components/CvvElement/index.tsx b/src/components/CvvElement/index.tsx index b02596e..c271e76 100644 --- a/src/components/CvvElement/index.tsx +++ b/src/components/CvvElement/index.tsx @@ -9,7 +9,7 @@ import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; /** - * Collect Element for capturing CVV. + * Element to collect CVVs. */ const CvvElement: React.FC = ({ container, options = { requried: false }, ...rest }) => { const [element, setElement] = React.useState(); diff --git a/src/components/ExpirationDateElement/index.tsx b/src/components/ExpirationDateElement/index.tsx index ff79240..6305aa0 100644 --- a/src/components/ExpirationDateElement/index.tsx +++ b/src/components/ExpirationDateElement/index.tsx @@ -11,7 +11,7 @@ import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; /** - * Collect Element for capturing expiration date. + * Element to collect expiration dates. */ const ExpirationDateElement: React.FC = ({ container, options, ...rest }) => { const [element, setElement] = React.useState(); diff --git a/src/components/ExpirationMonthElement/index.tsx b/src/components/ExpirationMonthElement/index.tsx index 6e1a1d9..d80bc10 100644 --- a/src/components/ExpirationMonthElement/index.tsx +++ b/src/components/ExpirationMonthElement/index.tsx @@ -9,7 +9,7 @@ import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; /** - * Collect Element for capturing expiration month. + * Element to collect expiration month values. */ const ExpirationMonthElement: React.FC = ({ container, options = { required: false }, ...rest }) => { const [element, setElement] = React.useState(); diff --git a/src/components/ExpirationYearElement/index.tsx b/src/components/ExpirationYearElement/index.tsx index c2ade7a..b64c234 100644 --- a/src/components/ExpirationYearElement/index.tsx +++ b/src/components/ExpirationYearElement/index.tsx @@ -12,7 +12,7 @@ import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; /** - * Collect Element for capturing expiration year. + * Element to collect expiration year values. */ const ExpirationYearElement: React.FC = ({ container, options, ...rest }) => { const [element, setElement] = React.useState(); diff --git a/src/components/InputFieldElement/index.tsx b/src/components/InputFieldElement/index.tsx index c1f9476..cf246d5 100644 --- a/src/components/InputFieldElement/index.tsx +++ b/src/components/InputFieldElement/index.tsx @@ -9,7 +9,7 @@ import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; /** - * Collects sensitive data securely. + * Element to collect arbitrary values. */ const InputFieldElement: React.FC = ({ container, options = { required: false }, ...rest }) => { const [element, setElement] = React.useState(); diff --git a/src/components/PinElement/index.tsx b/src/components/PinElement/index.tsx index 3f3a861..a113693 100644 --- a/src/components/PinElement/index.tsx +++ b/src/components/PinElement/index.tsx @@ -9,7 +9,7 @@ import SkyflowError from "../../utils/skyflow-error"; import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code"; /** - * Collect Element for capturing pin. + * Element to collect PIN values. */ const PinElement: React.FC = ({ container, options = { required: false }, ...rest }) => { const [element, setElement] = React.useState(); diff --git a/src/hooks/useCollectContainer/index.ts b/src/hooks/useCollectContainer/index.ts index 2426ad7..8655a65 100644 --- a/src/hooks/useCollectContainer/index.ts +++ b/src/hooks/useCollectContainer/index.ts @@ -5,7 +5,7 @@ import useSkyflowContext from '../../components/SkyflowProvider/hook'; import CollectContainer from '../../core/CollectContainer'; /** - * Container for all Composable Elements. + * Container for Collect Elements. * @returns CollectContainer */ const useCollectContainer = () => { diff --git a/src/hooks/useRevealContainer/index.ts b/src/hooks/useRevealContainer/index.ts index 38e3243..fb90192 100644 --- a/src/hooks/useRevealContainer/index.ts +++ b/src/hooks/useRevealContainer/index.ts @@ -5,7 +5,7 @@ import useSkyflowContext from '../../components/SkyflowProvider/hook'; import RevealContainer from '../../core/RevealContainer'; /** - * Container for all Reveal Elements. + * Container for Reveal Elements. * @returns RevealContainer */ const useRevealContainer = () => { diff --git a/src/utils/constants/index.ts b/src/utils/constants/index.ts index 7afc6d3..840d458 100644 --- a/src/utils/constants/index.ts +++ b/src/utils/constants/index.ts @@ -5,7 +5,7 @@ import type CollectContainer from '../../core/CollectContainer'; import RevealContainer from '../../core/RevealContainer'; /** - * sample documentation for IConfig interface + * Configuration for connecting to the Skyflow vault. */ export interface IConfig { /** ID of the vault to connect to. */ @@ -47,7 +47,7 @@ export interface CollectElementProps { table: string; /** Column that the data belongs to. */ column: string; - /** Used to declare the type of container you want to create*/ + /** Type of the container. */ container: CollectContainer; /** Label for the element. */ label?: string; @@ -55,26 +55,26 @@ export interface CollectElementProps { placeholder?: string; /** Input validation rules for the element. */ validations?: IValidationRule[]; - /** sample documentation*/ + /** Function to call when the onChange event triggers. */ onChange?: Function; - /** sample documentation*/ + /** Function to call when the onReady event triggers. */ onReady?: Function; - /** sample documentation*/ + /** Function to call when the onBlur event triggers. */ onBlur?: Function; - /** sample documentation*/ + /** Function to call when the onFocus event triggers. */ onFocus?: Function; - /** sample documentation*/ + /** Additional configuration options. */ options?: Record; - /** sample documentation*/ + /** Styles for the element.*/ inputStyles?: CollectInputStylesVariant; - /** sample documentation*/ + /** Styles for the element's label. */ labelStyles?: CollectLabelStylesVariant; - /** sample documentation*/ + /** Styles for the element's error text. */ errorTextStyles?: StylesBaseVariant; } /** - * sample documentation for ElementType enum + * Supported element types. */ export enum ElementType { CVV = 'CVV', @@ -104,7 +104,7 @@ export enum ContentType { } /** - * sample documentation for LogLevel enum + * Supported log levels. */ export enum LogLevel { WARN = 'WARN', @@ -114,7 +114,7 @@ export enum LogLevel { } /** - * sample documentation for Env enum + * Supported environments. */ export enum Env { DEV = 'DEV', From 0e1afc2bb7106e395a7e3f818024be5d8827251c Mon Sep 17 00:00:00 2001 From: kamal-skyflow Date: Thu, 10 Aug 2023 16:30:57 +0530 Subject: [PATCH 5/5] DEX-250 chore: added return statement fof two containers. --- src/hooks/useCollectContainer/index.ts | 2 +- src/hooks/useRevealContainer/index.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/hooks/useCollectContainer/index.ts b/src/hooks/useCollectContainer/index.ts index 8655a65..26b46b6 100644 --- a/src/hooks/useCollectContainer/index.ts +++ b/src/hooks/useCollectContainer/index.ts @@ -6,7 +6,7 @@ import CollectContainer from '../../core/CollectContainer'; /** * Container for Collect Elements. - * @returns CollectContainer + * @returns Returns the CollectContainer instance. */ const useCollectContainer = () => { const skyflowClient = useSkyflowContext(); diff --git a/src/hooks/useRevealContainer/index.ts b/src/hooks/useRevealContainer/index.ts index fb90192..4d60be8 100644 --- a/src/hooks/useRevealContainer/index.ts +++ b/src/hooks/useRevealContainer/index.ts @@ -6,7 +6,7 @@ import RevealContainer from '../../core/RevealContainer'; /** * Container for Reveal Elements. - * @returns RevealContainer + * @returns Returns the RevealContainer instance. */ const useRevealContainer = () => { const skyflowClient = useSkyflowContext();