Add Doc comments in JS files.

src/js/settings/components/allowed-roles/index.js

@@ -1,5 +1,5 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { CheckboxControl } from '@wordpress/components';
@@ -13,6 +13,14 @@ import { STORE_NAME } from '../../data/store';
 import { SettingsRow } from '../settings-row';
 import { useFeatureContext } from '../feature-settings/context';
 
+/**
+ * React Component for selecting user roles to provide access to a specific feature.
+ *
+ * This component is utilized in the feature settings page under the "User Permissions" section.
+ * It allows administrators to specify which user roles are permitted to access the feature.
+ *
+ * @return {React.ReactElement} AllowedRoles component.
+ */
 export const AllowedRoles = () => {
 	const { featureName } = useFeatureContext();
 	const { setFeatureSettings } = useDispatch( STORE_NAME );

src/js/settings/components/classifai-onboarding/classifai-registration.js

@@ -1,10 +1,28 @@
+/**
+ * External dependencies
+ */
+import { useNavigate } from 'react-router-dom';
+
+/**
+ * WordPress dependencies
+ */
 import { Button, Fill } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-import { useNavigate } from 'react-router-dom';
+/**
+ * Internal dependencies
+ */
 import { ClassifAIRegistrationForm } from '../classifai-registration';
 import { useSetupPage } from './hooks';
 
+/**
+ * ClassifAI Registration Step Component for the Onboarding Process.
+ *
+ * This component is responsible for rendering the registration step in the ClassifAI onboarding process.
+ * It utilizes the ClassifAIRegistrationForm component to display the registration form.
+ *
+ * @return {React.ReactElement} ClassifAIRegistrationStep component.
+ */
 export const ClassifAIRegistrationStep = () => {
 	const navigate = useNavigate();
 	const { nextStepPath } = useSetupPage();

src/js/settings/components/classifai-onboarding/configure-features.js

@@ -1,15 +1,32 @@
+/**
+ * External dependencies
+ */
+import { useNavigate } from 'react-router-dom';
+
+/**
+ * WordPress dependencies
+ */
 import { useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { Fill, SlotFillProvider, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
 import { FeatureSettings } from '..';
 import { FeatureContext } from '../feature-settings/context';
 import { getFeature, isFeatureActive } from '../../utils/utils';
 import { STORE_NAME } from '../../data/store';
 import { useSetupPage } from './hooks';
-import { useNavigate } from 'react-router-dom';
 
+/**
+ * React Component for configuring the AI providers step in the onboarding process.
+ *
+ * This component uses the FeatureSettings component to render the settings for each AI provider feature.
+ *
+ * @return {React.ReactElement} ConfigureFeatures component.
+ */
 export const ConfigureFeatures = () => {
 	const settings = useSelect( ( select ) =>
 		select( STORE_NAME ).getSettings()

src/js/settings/components/classifai-onboarding/enable-features.js

@@ -1,3 +1,11 @@
+/**
+ * External dependencies
+ */
+import { useNavigate } from 'react-router-dom';
+
+/**
+ * WordPress dependencies
+ */
 import {
 	ToggleControl,
 	Flex,
@@ -9,12 +17,22 @@ import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
 import { useState, useEffect } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
 import { FeatureContext } from '../feature-settings/context';
 import { EnableToggleControl } from '../feature-settings/enable-feature';
 import { SaveSettingsButton } from '../../components/feature-settings/save-settings-button';
 import { useSetupPage } from './hooks';
-import { useNavigate } from 'react-router-dom';
 
+/**
+ * React Component for the feature enabling step in the onboarding process.
+ *
+ * This component renders the initial step of the onboarding process, allowing users to enable or disable various features.
+ * It utilizes the EnableToggleControl component to display the settings for each feature.
+ *
+ * @return {React.ReactElement} EnableFeatures component.
+ */
 export const EnableFeatures = () => {
 	const [ registrationSettings, setRegistrationSettings ] = useState( {} );
 	const { features, services, dashboardUrl } = window.classifAISettings;

src/js/settings/components/classifai-onboarding/finish-step.js

@@ -1,11 +1,29 @@
+/**
+ * External dependencies
+ */
+import { useNavigate } from 'react-router-dom';
+
+/**
+ * WordPress dependencies
+ */
 import { Icon, Button } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
 import { STORE_NAME } from '../../data/store';
 import { isFeatureActive, getFeature } from '../../utils/utils';
-import { useNavigate } from 'react-router-dom';
 
+/**
+ * React Component for the final step in the onboarding process.
+ *
+ * This component displays a summary of the features that have been enabled during the onboarding process.
+ * It provides users with a clear overview of their selected settings before completing the onboarding.
+ *
+ * @return {React.ReactElement} FinishStep component.
+ */
 export const FinishStep = () => {
 	const {
 		features: __settings,

src/js/settings/components/classifai-onboarding/hooks.js

@@ -8,6 +8,17 @@ import { useLocation } from 'react-router-dom';
  */
 import { getNextOnboardingStep } from '../../utils/utils';
 
+/**
+ * Custom hook to determine if the current page is a setup page and to retrieve the current step, next step, and next step path.
+ *
+ * This hook provides an object containing:
+ * - `isSetupPage`: A boolean indicating whether the current page is a setup page.
+ * - `step`: The current step in the setup process.
+ * - `nextStep`: The next step in the setup process.
+ * - `nextStepPath`: The URL path for the next step.
+ *
+ * @return {Object} An object containing the setup page status, current step, next step, and next step path.
+ */
 export const useSetupPage = () => {
 	const location = useLocation();
 	const isSetupPage =

src/js/settings/components/classifai-onboarding/index.js

@@ -1,3 +1,6 @@
+/**
+ * External dependencies
+ */
 import { Outlet } from 'react-router-dom';
 
 // Export the steps of the onboarding process.
@@ -6,6 +9,14 @@ export { ConfigureFeatures } from './configure-features';
 export { FinishStep } from './finish-step';
 export { ClassifAIRegistrationStep } from './classifai-registration';
 
+/**
+ * ClassifAI Onboarding Component.
+ *
+ * This component handles the rendering of the entire onboarding process for ClassifAI.
+ * It guides users through the necessary steps to configure and enable various features.
+ *
+ * @return {React.ReactElement} ClassifAIOnboarding component.
+ */
 export const ClassifAIOnboarding = () => {
 	return (
 		<div className="classifai-setup__content">

src/js/settings/components/classifai-registration/index.js

@@ -2,6 +2,10 @@
  * External dependencies
  */
 import { NavLink } from 'react-router-dom';
+
+/**
+ * WordPress dependencies
+ */
 import {
 	Panel,
 	PanelBody,
@@ -11,14 +15,28 @@ import {
 	Notice,
 	__experimentalInputControl as InputControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 } from '@wordpress/components';
-import { Notices } from '../feature-settings/notices';
 import { __, sprintf } from '@wordpress/i18n';
-import { SettingsRow } from '../settings-row';
 import apiFetch from '@wordpress/api-fetch';
 import { useState, useEffect } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
 
+/**
+ * Internal dependencies
+ */
+import { SettingsRow } from '../settings-row';
+import { Notices } from '../feature-settings/notices';
+
+/**
+ * ClassifAI Registration Form Component.
+ *
+ * This component renders the registration settings form for ClassifAI, allowing users to input and save their registration details.
+ *
+ * @param {Object}   props               The component props.
+ * @param {Function} props.onSaveSuccess The callback function to be executed after successfully saving the settings.
+ *
+ * @return {React.ReactElement} The rendered ClassifAIRegistrationForm component.
+ */
 export const ClassifAIRegistrationForm = ( { onSaveSuccess = () => {} } ) => {
 	const [ settings, setSettings ] = useState( {} );
 	const [ isLoaded, setIsLoaded ] = useState( false );
@@ -146,6 +164,8 @@ export const ClassifAIRegistrationForm = ( { onSaveSuccess = () => {} } ) => {
 /**
  * Save Settings Button component.
  *
+ * This component renders a button that allows users to save the settings for the ClassifAI registration form.
+ *
  * @param {Object}   props               Component props.
  * @param {Object}   props.settings      Settings object.
  * @param {Function} props.setSettings   Set settings function.
@@ -219,6 +239,13 @@ export const SaveSettingsButton = ( {
 	);
 };
 
+/**
+ * ClassifAI Registration Component.
+ *
+ * This component serves as a wrapper for the ClassifAIRegistrationForm component.
+ *
+ * @return {React.ReactElement} The ClassifAIRegistration component.
+ */
 export const ClassifAIRegistration = () => {
 	return (
 		<div className="service-settings-wrapper">

src/js/settings/components/classifai-settings/index.js

@@ -44,6 +44,8 @@ const { services, features } = window.classifAISettings;
 /**
  * DefaultFeatureSettings component to navigate to the default feature settings.
  * If no feature is selected, it will redirect to the first feature.
+ *
+ * @return {React.ReactElement} The DefaultFeatureSettings component.
  */
 const DefaultFeatureSettings = () => {
 	const { service } = useParams();
@@ -53,7 +55,9 @@ const DefaultFeatureSettings = () => {
 
 /**
  * FeatureSettingsWrapper component to render the feature settings.
- * If the feature is not available, it will redirect to the first feature.
+ * If the feature is not available from URL parameters, it will redirect to the first feature of selected service.
+ *
+ * @return {React.ReactElement} The FeatureSettingsWrapper component.
  */
 const FeatureSettingsWrapper = () => {
 	const { service, feature } = useParams();
@@ -70,6 +74,12 @@ const FeatureSettingsWrapper = () => {
 	);
 };
 
+/**
+ * ServiceSettingsWrapper component to render the service settings.
+ * If the service is not available from URL parameters, it will redirect to the language processing page.
+ *
+ * @return {React.ReactElement} The ServiceSettingsWrapper component.
+ */
 const ServiceSettingsWrapper = () => {
 	const { service } = useParams();
 
@@ -84,7 +94,9 @@ const ServiceSettingsWrapper = () => {
 /**
  * ServiceNavigation component to render the service navigation tabs.
  *
- * @return {Object} The ServiceNavigation component.
+ * This component renders the service navigation tabs based on the available services.
+ *
+ * @return {React.ReactElement} The ServiceNavigation component.
  */
 export const ServiceNavigation = () => {
 	const { isSetupPage } = useSetupPage();
@@ -123,6 +135,14 @@ export const ServiceNavigation = () => {
 	);
 };
 
+/**
+ * Main ClassifAI Settings Component.
+ *
+ * This component serves as the primary entry point for the ClassifAI settings interface.
+ * It is responsible for rendering the header, service navigation, feature navigation, and feature settings based on the current URL path.
+ *
+ * @return {React.ReactElement} The ClassifAISettings component.
+ */
 export const ClassifAISettings = () => {
 	const { setSettings, setIsLoaded, setError } = useDispatch( STORE_NAME );
 

src/js/settings/components/feature-additional-settings/classification-previewers/context.js

@@ -1,5 +1,13 @@
+/**
+ * WordPress dependencies
+ */
 import { createContext } from '@wordpress/element';
 
+/**
+ * Context for the PreviewerProvider.
+ *
+ * @return {React.Context} PreviewerProviderContext context.
+ */
 export const PreviewerProviderContext = createContext( {
 	isPreviewerOpen: false,
 } );

src/js/settings/components/feature-additional-settings/classification-previewers/ibm-watson-nlu.js

@@ -1,12 +1,29 @@
+/**
+ * WordPress dependencies
+ */
 import { Card, CardHeader, CardBody, Notice } from '@wordpress/components';
 import { useState, useEffect, useContext } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import { normalizeScore } from './utils';
-import { PreviewerProviderContext } from './context';
 import { __, sprintf } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { normalizeScore } from './utils';
+import { PreviewerProviderContext } from './context';
 import { STORE_NAME } from '../../../data/store';
 
+/**
+ * React Component for displaying IBM Watson NLU classification results.
+ *
+ * This component is responsible for rendering the classification results obtained from the IBM Watson NLU service.
+ * It displays detailed classification data including categories, concepts, entities, and keywords for a specific post.
+ *
+ * @param {Object} props        The component props.
+ * @param {number} props.postId The ID of the post for which to display the classification results.
+ *
+ * @return {React.ReactElement} The IBMWatsonNLUResults component.
+ */
 export function IBMWatsonNLUResults( { postId } ) {
 	const {
 		isPreviewUnderProcess,

src/js/settings/components/feature-additional-settings/classification-previewers/openai-embedding.js

@@ -1,12 +1,29 @@
+/**
+ * WordPress dependencies
+ */
 import { Card, CardHeader, CardBody, Notice } from '@wordpress/components';
 import { useState, useEffect, useContext } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import { normalizeScore } from './utils';
-import { PreviewerProviderContext } from './context';
 import { __, sprintf } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { normalizeScore } from './utils';
+import { PreviewerProviderContext } from './context';
 import { STORE_NAME } from '../../../data/store';
 
+/**
+ * React Component for displaying Azure OpenAI Embeddings classification results.
+ *
+ * This component is responsible for rendering the classification results obtained from the Azure OpenAI Embeddings service.
+ * It displays detailed classification data including categories and tags for a specific post.
+ *
+ * @param {Object} props        The component props.
+ * @param {number} props.postId The ID of the post for which to display the classification results.
+ *
+ * @return {React.ReactElement} The AzureOpenAIEmbeddingsResults component.
+ */
 export function AzureOpenAIEmbeddingsResults( { postId } ) {
 	const {
 		isPreviewUnderProcess,