From 73150b5d1a2801c959dfa1d4b982938e993eb38c Mon Sep 17 00:00:00 2001 From: Dharmesh Patel Date: Fri, 18 Oct 2024 22:08:09 +0530 Subject: [PATCH] Add Doc comments in JS files. --- .../components/allowed-roles/index.js | 10 +++- .../classifai-registration.js | 20 ++++++- .../configure-features.js | 19 ++++++- .../classifai-onboarding/enable-features.js | 20 ++++++- .../classifai-onboarding/finish-step.js | 20 ++++++- .../components/classifai-onboarding/hooks.js | 11 ++++ .../components/classifai-onboarding/index.js | 11 ++++ .../classifai-registration/index.js | 31 ++++++++++- .../components/classifai-settings/index.js | 24 +++++++- .../classification-previewers/context.js | 8 +++ .../ibm-watson-nlu.js | 21 ++++++- .../openai-embedding.js | 21 ++++++- .../classification-previewers/utils.js | 9 +++ .../classification.js | 55 +++++++++++++++++++ .../content-resizing.js | 14 +++++ .../descriptive-text-generator.js | 14 +++++ .../excerpt-generation.js | 14 +++++ .../image-tag-generator.js | 14 +++++ .../feature-additional-settings/index.js | 15 ++++- .../feature-additional-settings/moderation.js | 14 +++++ .../nlu-feature.js | 14 +++++ .../prompt-repeater.js | 12 ++++ .../recommended-content.js | 17 ++++++ .../feature-additional-settings/smart-404.js | 14 +++++ .../text-to-speech.js | 14 +++++ .../title-generation.js | 14 +++++ .../components/feature-settings/context.js | 12 +++- .../components/feature-settings/index.js | 7 +++ .../components/feature-settings/notices.js | 11 ++++ .../feature-settings/save-settings-button.js | 3 + src/js/settings/components/header/index.js | 10 ++++ .../provider-settings/amazon-polly.js | 17 ++++++ .../provider-settings/azure-ai-vision.js | 17 ++++++ .../provider-settings/azure-openai.js | 18 ++++++ .../provider-settings/azure-personlizer.js | 17 ++++++ .../provider-settings/azure-text-to-speech.js | 17 ++++++ .../provider-settings/google-gemini-api.js | 17 ++++++ .../provider-settings/ibm-watson-nlu.js | 17 ++++++ .../components/provider-settings/index.js | 15 ++++- .../provider-settings/openai-chatgpt.js | 17 ++++++ .../provider-settings/openai-dalle.js | 17 ++++++ .../provider-settings/openai-embeddings.js | 17 ++++++ .../provider-settings/openai-moderation.js | 17 ++++++ .../openai-text-to-speech.js | 17 ++++++ .../provider-settings/openai-whisper.js | 17 ++++++ .../components/provider-settings/openai.js | 12 ++++ .../components/user-permissions/index.js | 9 ++- src/js/settings/data/hooks.js | 13 ++++- src/js/settings/data/store.js | 4 ++ src/js/settings/index.js | 3 + src/js/settings/utils/icons.js | 5 ++ src/js/settings/utils/utils.js | 15 +++++ 52 files changed, 773 insertions(+), 18 deletions(-) diff --git a/src/js/settings/components/allowed-roles/index.js b/src/js/settings/components/allowed-roles/index.js index 686153421..91d9ce1b0 100644 --- a/src/js/settings/components/allowed-roles/index.js +++ b/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 ); diff --git a/src/js/settings/components/classifai-onboarding/classifai-registration.js b/src/js/settings/components/classifai-onboarding/classifai-registration.js index fa1b1e9d8..06baf4f45 100644 --- a/src/js/settings/components/classifai-onboarding/classifai-registration.js +++ b/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(); diff --git a/src/js/settings/components/classifai-onboarding/configure-features.js b/src/js/settings/components/classifai-onboarding/configure-features.js index 57bb5e48d..cd1fa6b81 100644 --- a/src/js/settings/components/classifai-onboarding/configure-features.js +++ b/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() diff --git a/src/js/settings/components/classifai-onboarding/enable-features.js b/src/js/settings/components/classifai-onboarding/enable-features.js index 729d14565..62aca1cc7 100644 --- a/src/js/settings/components/classifai-onboarding/enable-features.js +++ b/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; diff --git a/src/js/settings/components/classifai-onboarding/finish-step.js b/src/js/settings/components/classifai-onboarding/finish-step.js index 997ddcd99..3174fc8e3 100644 --- a/src/js/settings/components/classifai-onboarding/finish-step.js +++ b/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, diff --git a/src/js/settings/components/classifai-onboarding/hooks.js b/src/js/settings/components/classifai-onboarding/hooks.js index 12bd79ff0..e0f9a6149 100644 --- a/src/js/settings/components/classifai-onboarding/hooks.js +++ b/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 = diff --git a/src/js/settings/components/classifai-onboarding/index.js b/src/js/settings/components/classifai-onboarding/index.js index 9534f384f..b685d91a0 100644 --- a/src/js/settings/components/classifai-onboarding/index.js +++ b/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 (
diff --git a/src/js/settings/components/classifai-registration/index.js b/src/js/settings/components/classifai-registration/index.js index fc93c53c7..0cb88c74b 100644 --- a/src/js/settings/components/classifai-registration/index.js +++ b/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 (
diff --git a/src/js/settings/components/classifai-settings/index.js b/src/js/settings/components/classifai-settings/index.js index 3d064d648..8cb0f1df7 100644 --- a/src/js/settings/components/classifai-settings/index.js +++ b/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 ); diff --git a/src/js/settings/components/feature-additional-settings/classification-previewers/context.js b/src/js/settings/components/feature-additional-settings/classification-previewers/context.js index b126596f0..3409220e0 100644 --- a/src/js/settings/components/feature-additional-settings/classification-previewers/context.js +++ b/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, } ); diff --git a/src/js/settings/components/feature-additional-settings/classification-previewers/ibm-watson-nlu.js b/src/js/settings/components/feature-additional-settings/classification-previewers/ibm-watson-nlu.js index fb076f7cf..4c5af18db 100644 --- a/src/js/settings/components/feature-additional-settings/classification-previewers/ibm-watson-nlu.js +++ b/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, diff --git a/src/js/settings/components/feature-additional-settings/classification-previewers/openai-embedding.js b/src/js/settings/components/feature-additional-settings/classification-previewers/openai-embedding.js index 7276cedfa..cb8ca35fb 100644 --- a/src/js/settings/components/feature-additional-settings/classification-previewers/openai-embedding.js +++ b/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, diff --git a/src/js/settings/components/feature-additional-settings/classification-previewers/utils.js b/src/js/settings/components/feature-additional-settings/classification-previewers/utils.js index 715b1486e..15a0209f1 100644 --- a/src/js/settings/components/feature-additional-settings/classification-previewers/utils.js +++ b/src/js/settings/components/feature-additional-settings/classification-previewers/utils.js @@ -1,3 +1,12 @@ +/** + * Normalize a score for display as a percentage. + * + * This function takes a score and normalizes it to a percentage format for display purposes. + * + * @param {number} score The score to normalize. + * + * @return {number} The normalized score as a percentage. + */ export function normalizeScore( score ) { return Number( ( score * 100 ).toFixed( 2 ) ); } diff --git a/src/js/settings/components/feature-additional-settings/classification.js b/src/js/settings/components/feature-additional-settings/classification.js index be7a30dc4..10ea466f0 100644 --- a/src/js/settings/components/feature-additional-settings/classification.js +++ b/src/js/settings/components/feature-additional-settings/classification.js @@ -1,3 +1,6 @@ +/** + * WordPress dependencies + */ import { useSelect, useDispatch } from '@wordpress/data'; import { RadioControl, @@ -16,6 +19,9 @@ import { useDebounce } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; import { store as noticesStore } from '@wordpress/notices'; +/** + * Internal dependencies + */ import { SettingsRow } from '../settings-row'; import { STORE_NAME } from '../../data/store'; import { isFeatureActive, usePostTypes } from '../../utils/utils'; @@ -26,6 +32,13 @@ import { } from './classification-previewers'; import { PreviewerProviderContext } from './classification-previewers/context'; +/** + * Component for the Classification Method settings. + * + * This component is used within the ClassificationSettings component to allow users to configure the Classification Method. + * + * @return {React.ReactElement} The ClassificationMethodSettings component. + */ const ClassificationMethodSettings = () => { const featureSettings = useSelect( ( select ) => select( STORE_NAME ).getFeatureSettings() @@ -78,6 +91,17 @@ const ClassificationMethodSettings = () => { ); }; +/** + * Provider component for the Classification Previewer. + * + * This component is used to provide the context for the Classification Previewer. + * + * @param {Object} props The component props. + * @param {Object} props.children The child components. + * @param {Object} props.value The context value. + * + * @return {React.ReactElement} The PreviewerProvider component. + */ function PreviewerProvider( { children, value } ) { return ( @@ -86,6 +110,13 @@ function PreviewerProvider( { children, value } ) { ); } +/** + * React Component for configuring the Classification feature settings. + * + * This component is used within the ClassifAI settings to allow users to configure the Classification feature. + * + * @return {React.ReactElement} The ClassificationSettings component. + */ export const ClassificationSettings = () => { const [ embedInProgress, setEmbedInProgress ] = useState( false ); const isEmbeddingInProgress = useRef( false ); @@ -267,6 +298,11 @@ export const ClassificationSettings = () => { ); }; +/** + * Component for the Classification Previewer. + * + * @return {React.ReactElement} The Previewer component. + */ function Previewer() { const { isPreviewerOpen, setIsPreviewerOpen } = useContext( PreviewerProviderContext @@ -299,6 +335,11 @@ function Previewer() { ); } +/** + * Component for displaying a spinner when the preview is in process. + * + * @return {React.ReactElement} The PreviewInProcess component. + */ function PreviewInProcess() { const { isPreviewUnderProcess } = useContext( PreviewerProviderContext ); @@ -318,6 +359,15 @@ function PreviewInProcess() { ); } +/** + * Component for selecting a post to preview. + * + * @param {Object} props The component props. + * @param {string} props.placeholder The placeholder text for the search control. + * @param {boolean} props.showLabel Whether to show the label for the search control. + * + * @return {React.ReactElement} The PostSelector component. + */ function PostSelector( { placeholder = '', showLabel = true } ) { const { setSelectedPostId } = useContext( PreviewerProviderContext ); const [ searchText, setSearchText ] = useState( '' ); @@ -416,6 +466,11 @@ function PostSelector( { placeholder = '', showLabel = true } ) { ); } +/** + * Component for displaying the results of the previewer. + * + * @return {React.ReactElement} The PreviewerResults component. + */ function PreviewerResults() { const { selectedPostId } = useContext( PreviewerProviderContext ); const activeProvider = useSelect( diff --git a/src/js/settings/components/feature-additional-settings/content-resizing.js b/src/js/settings/components/feature-additional-settings/content-resizing.js index 12cb8e2b7..a312112ab 100644 --- a/src/js/settings/components/feature-additional-settings/content-resizing.js +++ b/src/js/settings/components/feature-additional-settings/content-resizing.js @@ -1,9 +1,23 @@ +/** + * WordPress dependencies + */ import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ import { SettingsRow } from '../settings-row'; import { STORE_NAME } from '../../data/store'; import { PromptRepeater } from './prompt-repeater'; +/** + * Component for the Content Resizing feature settings. + * + * This component is used within the FeatureSettings component to allow users to configure the Content Resizing feature. + * + * @return {React.ReactElement} ContentResizingSettings component. + */ export const ContentResizingSettings = () => { const featureSettings = useSelect( ( select ) => select( STORE_NAME ).getFeatureSettings() diff --git a/src/js/settings/components/feature-additional-settings/descriptive-text-generator.js b/src/js/settings/components/feature-additional-settings/descriptive-text-generator.js index 1cd7d7ec2..5b3cf89a9 100644 --- a/src/js/settings/components/feature-additional-settings/descriptive-text-generator.js +++ b/src/js/settings/components/feature-additional-settings/descriptive-text-generator.js @@ -1,10 +1,24 @@ +/** + * WordPress dependencies + */ import { useSelect, useDispatch } from '@wordpress/data'; // eslint-disable-next-line @wordpress/no-unsafe-wp-apis import { CheckboxControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ import { SettingsRow } from '../settings-row'; import { STORE_NAME } from '../../data/store'; +/** + * Component for Descriptive Text Generator feature settings. + * + * This component is used within the FeatureSettings component to allow users to configure the Descriptive Text Generator feature. + * + * @return {React.ReactElement} DescriptiveTextGeneratorSettings component. + */ export const DescriptiveTextGeneratorSettings = () => { const featureSettings = useSelect( ( select ) => select( STORE_NAME ).getFeatureSettings() diff --git a/src/js/settings/components/feature-additional-settings/excerpt-generation.js b/src/js/settings/components/feature-additional-settings/excerpt-generation.js index e594cd721..df1cf535e 100644 --- a/src/js/settings/components/feature-additional-settings/excerpt-generation.js +++ b/src/js/settings/components/feature-additional-settings/excerpt-generation.js @@ -1,14 +1,28 @@ +/** + * WordPress dependencies + */ import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { __experimentalInputControl as InputControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis CheckboxControl, } from '@wordpress/components'; + +/** + * Internal dependencies + */ import { SettingsRow } from '../settings-row'; import { STORE_NAME } from '../../data/store'; import { PromptRepeater } from './prompt-repeater'; import { usePostTypes } from '../../utils/utils'; +/** + * Component for Excerpt Generation feature settings. + * + * This component is used within the FeatureSettings component to allow users to configure the Excerpt Generation feature. + * + * @return {React.ReactElement} ExcerptGenerationSettings component. + */ export const ExcerptGenerationSettings = () => { const featureSettings = useSelect( ( select ) => select( STORE_NAME ).getFeatureSettings() diff --git a/src/js/settings/components/feature-additional-settings/image-tag-generator.js b/src/js/settings/components/feature-additional-settings/image-tag-generator.js index a25159d64..96472359a 100644 --- a/src/js/settings/components/feature-additional-settings/image-tag-generator.js +++ b/src/js/settings/components/feature-additional-settings/image-tag-generator.js @@ -1,10 +1,24 @@ +/** + * WordPress dependencies + */ import { useSelect, useDispatch } from '@wordpress/data'; // eslint-disable-next-line @wordpress/no-unsafe-wp-apis import { SelectControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ import { SettingsRow } from '../settings-row'; import { STORE_NAME } from '../../data/store'; +/** + * Component for the Image Tag Generator feature settings. + * + * This component is used within the FeatureSettings component to allow users to configure the Image Tag Generator feature. + * + * @return {React.ReactElement} ImageTagGeneratorSettings component. + */ export const ImageTagGeneratorSettings = () => { const featureSettings = useSelect( ( select ) => select( STORE_NAME ).getFeatureSettings() diff --git a/src/js/settings/components/feature-additional-settings/index.js b/src/js/settings/components/feature-additional-settings/index.js index 8e0e84495..fd61ae513 100644 --- a/src/js/settings/components/feature-additional-settings/index.js +++ b/src/js/settings/components/feature-additional-settings/index.js @@ -20,6 +20,14 @@ import { ModerationSettings } from './moderation'; import { Smart404Settings } from './smart-404'; import { RecommendedContentSettings } from './recommended-content'; +/** + * Component for additional settings fields for individual features. + * + * This component is used to render additional settings fields for a feature. + * It determines which feature is current and renders the corresponding settings fields. + * + * @return {React.ReactElement} AdditionalSettingsFields component. + */ const AdditionalSettingsFields = () => { const { featureName } = useFeatureContext(); @@ -60,7 +68,12 @@ const AdditionalSettingsFields = () => { }; /** - * Feature Additional Settings component. + * Component for additional settings fields for a feature. + * + * This component is used to add additional settings for a feature. + * It also provides a slot for Third-party plugins to add additional settings for a feature. + * + * @return {React.ReactElement} FeatureAdditionalSettings component. */ export const FeatureAdditionalSettings = () => { const { featureName } = useFeatureContext(); diff --git a/src/js/settings/components/feature-additional-settings/moderation.js b/src/js/settings/components/feature-additional-settings/moderation.js index ae70f7e5e..48784e9ca 100644 --- a/src/js/settings/components/feature-additional-settings/moderation.js +++ b/src/js/settings/components/feature-additional-settings/moderation.js @@ -1,10 +1,24 @@ +/** + * WordPress dependencies + */ import { useSelect, useDispatch } from '@wordpress/data'; // eslint-disable-next-line @wordpress/no-unsafe-wp-apis import { CheckboxControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ import { SettingsRow } from '../settings-row'; import { STORE_NAME } from '../../data/store'; +/** + * Component for Moderation feature settings. + * + * This component is used within the FeatureSettings component to allow users to configure the Moderation feature. + * + * @return {React.ReactElement} ModerationSettings component. + */ export const ModerationSettings = () => { const featureSettings = useSelect( ( select ) => select( STORE_NAME ).getFeatureSettings() diff --git a/src/js/settings/components/feature-additional-settings/nlu-feature.js b/src/js/settings/components/feature-additional-settings/nlu-feature.js index 49c645bac..326c9d15f 100644 --- a/src/js/settings/components/feature-additional-settings/nlu-feature.js +++ b/src/js/settings/components/feature-additional-settings/nlu-feature.js @@ -1,3 +1,6 @@ +/** + * WordPress dependencies + */ import { useSelect, useDispatch } from '@wordpress/data'; import { CheckboxControl, @@ -5,10 +8,21 @@ import { __experimentalInputControl as InputControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ import { SettingsRow } from '../settings-row'; import { STORE_NAME } from '../../data/store'; import { useTaxonomies } from '../../utils/utils'; +/** + * Component for render settings fields when IBM Watson NLU is selected as the provider. + * + * This component is used within the ClassificationSettings component. + * + * @return {React.ReactElement} NLUFeatureSettings component. + */ export const NLUFeatureSettings = () => { const featureSettings = useSelect( ( select ) => select( STORE_NAME ).getFeatureSettings() diff --git a/src/js/settings/components/feature-additional-settings/prompt-repeater.js b/src/js/settings/components/feature-additional-settings/prompt-repeater.js index c218aa600..2605bb1f6 100644 --- a/src/js/settings/components/feature-additional-settings/prompt-repeater.js +++ b/src/js/settings/components/feature-additional-settings/prompt-repeater.js @@ -1,3 +1,6 @@ +/** + * WordPress dependencies + */ import { Button, __experimentalInputControl as InputControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis @@ -7,6 +10,15 @@ import { import { useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; +/** + * Component for the Prompt. + * + * This component allows users to add or remove prompts for various features such as Title Generation, Excerpt Generation and Descriptive Text Generation. + * + * @param {Object} props Component props. + * + * @return {React.ReactElement} PromptRepeater component. + */ export const PromptRepeater = ( props ) => { const [ showConfirmDialog, setShowConfirmDialog ] = useState( false ); const [ activeIndex, setActiveIndex ] = useState( null ); diff --git a/src/js/settings/components/feature-additional-settings/recommended-content.js b/src/js/settings/components/feature-additional-settings/recommended-content.js index c21320ada..83f23c2f4 100644 --- a/src/js/settings/components/feature-additional-settings/recommended-content.js +++ b/src/js/settings/components/feature-additional-settings/recommended-content.js @@ -1,6 +1,16 @@ +/** + * WordPress dependencies + */ import { Fill, Notice } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +/** + * Component for Notice about the deprecation of the Personalizer provider. + * + * This component displays a notice to inform users about the deprecation of the Personalizer provider. + * + * @return {React.ReactElement} The PersonalizerDeprecationNotice component. + */ const PersonalizerDeprecationNotice = () => ( ( ); +/** + * Component for the Recommended Content settings. + * + * This component displays a notice to inform users about the deprecation of the Personalizer provider. + * + * @return {React.ReactElement} The RecommendedContentSettings component. + */ export const RecommendedContentSettings = () => { return ( diff --git a/src/js/settings/components/feature-additional-settings/smart-404.js b/src/js/settings/components/feature-additional-settings/smart-404.js index af5e96272..2d1582603 100644 --- a/src/js/settings/components/feature-additional-settings/smart-404.js +++ b/src/js/settings/components/feature-additional-settings/smart-404.js @@ -1,3 +1,6 @@ +/** + * WordPress dependencies + */ import { useSelect, useDispatch } from '@wordpress/data'; import { CheckboxControl, @@ -5,9 +8,20 @@ import { __experimentalInputControl as InputControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ import { SettingsRow } from '../settings-row'; import { STORE_NAME } from '../../data/store'; +/** + * Component for Smart 404 feature settings. + * + * This component is used within the FeatureSettings component to allow users to configure the Smart 404 feature. + * + * @return {React.ReactElement} Smart404Settings component. + */ export const Smart404Settings = () => { const featureSettings = useSelect( ( select ) => select( STORE_NAME ).getFeatureSettings() diff --git a/src/js/settings/components/feature-additional-settings/text-to-speech.js b/src/js/settings/components/feature-additional-settings/text-to-speech.js index c808173bb..4f5362e87 100644 --- a/src/js/settings/components/feature-additional-settings/text-to-speech.js +++ b/src/js/settings/components/feature-additional-settings/text-to-speech.js @@ -1,11 +1,25 @@ +/** + * WordPress dependencies + */ import { useSelect, useDispatch } from '@wordpress/data'; // eslint-disable-next-line @wordpress/no-unsafe-wp-apis import { CheckboxControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ import { SettingsRow } from '../settings-row'; import { STORE_NAME } from '../../data/store'; import { usePostTypes } from '../../utils/utils'; +/** + * Component for Text to Speech feature settings. + * + * This component is used within the FeatureSettings component to allow users to configure the Text to Speech feature. + * + * @return {React.ReactElement} TextToSpeechSettings component. + */ export const TextToSpeechSettings = () => { const featureSettings = useSelect( ( select ) => select( STORE_NAME ).getFeatureSettings() diff --git a/src/js/settings/components/feature-additional-settings/title-generation.js b/src/js/settings/components/feature-additional-settings/title-generation.js index 5cdb51e30..e696434e3 100644 --- a/src/js/settings/components/feature-additional-settings/title-generation.js +++ b/src/js/settings/components/feature-additional-settings/title-generation.js @@ -1,9 +1,23 @@ +/** + * WordPress Dependencies + */ import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ import { SettingsRow } from '../settings-row'; import { STORE_NAME } from '../../data/store'; import { PromptRepeater } from './prompt-repeater'; +/** + * Component for Title Generation feature settings. + * + * This component is used within the FeatureSettings component to allow users to configure the Title Generation feature. + * + * @return {React.ReactElement} TitleGenerationSettings component. + */ export const TitleGenerationSettings = () => { const featureSettings = useSelect( ( select ) => select( STORE_NAME ).getFeatureSettings() diff --git a/src/js/settings/components/feature-settings/context.js b/src/js/settings/components/feature-settings/context.js index 4a0d0362e..2f2194879 100644 --- a/src/js/settings/components/feature-settings/context.js +++ b/src/js/settings/components/feature-settings/context.js @@ -1,12 +1,22 @@ /** - * External dependencies + * WordPress dependencies */ import { createContext, useContext } from '@wordpress/element'; +/** + * Context for the FeatureSettings. + */ export const FeatureContext = createContext( { featureName: '', } ); +/** + * Custom hook to access the FeatureContext. + * + * This hook provides a convenient way to access the FeatureContext. + * + * @return {Object} The current context value for FeatureContext. + */ export const useFeatureContext = () => { return useContext( FeatureContext ); }; diff --git a/src/js/settings/components/feature-settings/index.js b/src/js/settings/components/feature-settings/index.js index 86249c630..cc2d031cd 100644 --- a/src/js/settings/components/feature-settings/index.js +++ b/src/js/settings/components/feature-settings/index.js @@ -19,6 +19,11 @@ import { Notices } from './notices'; import { useFeatureContext } from './context'; import { FeatureAdditionalSettings } from '../feature-additional-settings'; +/** + * Component to display a notice when the Smart 404 feature is enabled but ElasticPress is not active. + * + * @return {React.ReactElement} The ElasticPressRequiredNotice component. + */ const ElasticPressRequiredNotice = () => ( ( /** * Feature Settings component. * + * This is the main component for the feature settings page. It renders the settings panel for the selected feature. + * * @param {Object} props Component props. * @param {Function} props.onSaveSuccess Callback function to be executed after saving settings. */ diff --git a/src/js/settings/components/feature-settings/notices.js b/src/js/settings/components/feature-settings/notices.js index d549ae868..fc9920d8c 100644 --- a/src/js/settings/components/feature-settings/notices.js +++ b/src/js/settings/components/feature-settings/notices.js @@ -1,7 +1,18 @@ +/** + * WordPress dependencies + */ import { useDispatch, useSelect } from '@wordpress/data'; import { store as noticesStore } from '@wordpress/notices'; import { NoticeList } from '@wordpress/components'; +/** + * Component for displaying notices for a specific feature. + * + * @param {Object} props Component props. + * @param {string} props.feature Feature name. + * + * @return {React.ReactElement} Notices component. + */ export const Notices = ( { feature } ) => { const { removeNotice } = useDispatch( noticesStore ); const notices = useSelect( ( select ) => diff --git a/src/js/settings/components/feature-settings/save-settings-button.js b/src/js/settings/components/feature-settings/save-settings-button.js index f69e95dee..8cb36698d 100644 --- a/src/js/settings/components/feature-settings/save-settings-button.js +++ b/src/js/settings/components/feature-settings/save-settings-button.js @@ -17,6 +17,9 @@ import { useSetupPage } from '../classifai-onboarding/hooks'; /** * Save Settings Button component. * + * This component renders a button that allows users to save the settings for a feature. + * It also handles the saving of settings via the REST API. + * * @param {Object} props Component props. * @param {Function} props.onSaveSuccess Callback function to be executed after saving settings. * @param {string} props.label Button label. diff --git a/src/js/settings/components/header/index.js b/src/js/settings/components/header/index.js index 309b18bf3..eeb3f1229 100644 --- a/src/js/settings/components/header/index.js +++ b/src/js/settings/components/header/index.js @@ -3,6 +3,9 @@ */ import { NavLink } from 'react-router-dom'; +/** + * WordPress dependencies + */ import { DropdownMenu, MenuGroup, @@ -19,6 +22,13 @@ import { __ } from '@wordpress/i18n'; import { ClassifAILogo } from '../../utils/icons'; import { useSetupPage } from '../classifai-onboarding/hooks'; +/** + * Header component for the ClassifAI settings. + * + * This component renders the header for the ClassifAI settings page and the onboarding process. + * + * @return {React.ReactElement} Header component. + */ export const Header = () => { const { isSetupPage, step } = useSetupPage(); const onBoardingSteps = { diff --git a/src/js/settings/components/provider-settings/amazon-polly.js b/src/js/settings/components/provider-settings/amazon-polly.js index ed3843958..b10e24a86 100644 --- a/src/js/settings/components/provider-settings/amazon-polly.js +++ b/src/js/settings/components/provider-settings/amazon-polly.js @@ -1,12 +1,29 @@ +/** + * WordPress dependencies + */ import { useSelect, useDispatch } from '@wordpress/data'; import { __experimentalInputControl as InputControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis SelectControl, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ import { SettingsRow } from '../settings-row'; import { STORE_NAME } from '../../data/store'; +/** + * Component for Amazon Polly Provider settings. + * + * This component is used within the ProviderSettings component to allow users to configure the Amazon Polly Provider settings. + * + * @param {Object} props Component props. + * @param {boolean} props.isConfigured Whether the provider is configured. + * + * @return {React.ReactElement} AmazonPollySettings component. + */ export const AmazonPollySettings = ( { isConfigured = false } ) => { const providerName = 'aws_polly'; const providerSettings = useSelect( diff --git a/src/js/settings/components/provider-settings/azure-ai-vision.js b/src/js/settings/components/provider-settings/azure-ai-vision.js index 446412507..f34a27e21 100644 --- a/src/js/settings/components/provider-settings/azure-ai-vision.js +++ b/src/js/settings/components/provider-settings/azure-ai-vision.js @@ -1,11 +1,28 @@ +/** + * WordPress dependencies + */ import { useSelect, useDispatch } from '@wordpress/data'; // eslint-disable-next-line @wordpress/no-unsafe-wp-apis import { __experimentalInputControl as InputControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ import { SettingsRow } from '../settings-row'; import { STORE_NAME } from '../../data/store'; import { useFeatureContext } from '../feature-settings/context'; +/** + * Component for Azure AI Vision Provider settings. + * + * This component is used within the ProviderSettings component to allow users to configure the Azure AI Vision Provider settings. + * + * @param {Object} props Component props. + * @param {boolean} props.isConfigured Whether the provider is configured. + * + * @return {React.ReactElement} AzureAIVisionSettings component. + */ export const AzureAIVisionSettings = ( { isConfigured = false } ) => { const providerName = 'ms_computer_vision'; const { featureName } = useFeatureContext(); diff --git a/src/js/settings/components/provider-settings/azure-openai.js b/src/js/settings/components/provider-settings/azure-openai.js index f2f794860..9a6b9b016 100644 --- a/src/js/settings/components/provider-settings/azure-openai.js +++ b/src/js/settings/components/provider-settings/azure-openai.js @@ -1,11 +1,29 @@ +/** + * WordPress dependencies + */ import { useSelect, useDispatch } from '@wordpress/data'; // eslint-disable-next-line @wordpress/no-unsafe-wp-apis import { __experimentalInputControl as InputControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ import { SettingsRow } from '../settings-row'; import { STORE_NAME } from '../../data/store'; import { useFeatureContext } from '../feature-settings/context'; +/** + * Component for Azure OpenAI Provider settings. + * + * This component is used within the ProviderSettings component to allow users to configure the Azure OpenAI Provider settings. + * + * @param {Object} props Component props. + * @param {string} props.providerName The provider name. + * @param {boolean} props.isConfigured Whether the provider is configured. + * + * @return {React.ReactElement} AzureOpenAISettings component. + */ export const AzureOpenAISettings = ( { providerName = 'azure_openai', isConfigured = false, diff --git a/src/js/settings/components/provider-settings/azure-personlizer.js b/src/js/settings/components/provider-settings/azure-personlizer.js index 10e8dea7d..d4b3c4872 100644 --- a/src/js/settings/components/provider-settings/azure-personlizer.js +++ b/src/js/settings/components/provider-settings/azure-personlizer.js @@ -1,10 +1,27 @@ +/** + * WordPress dependencies + */ import { useSelect, useDispatch } from '@wordpress/data'; // eslint-disable-next-line @wordpress/no-unsafe-wp-apis import { __experimentalInputControl as InputControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ import { SettingsRow } from '../settings-row'; import { STORE_NAME } from '../../data/store'; +/** + * Component for Azure Personalizer Provider settings. + * + * This component is used within the ProviderSettings component to allow users to configure the Azure Personalizer Provider settings. + * + * @param {Object} props Component props. + * @param {boolean} props.isConfigured Whether the provider is configured. + * + * @return {React.ReactElement} AzurePersonalizerSettings component. + */ export const AzurePersonalizerSettings = ( { isConfigured = false } ) => { const providerName = 'ms_azure_personalizer'; const providerSettings = useSelect( diff --git a/src/js/settings/components/provider-settings/azure-text-to-speech.js b/src/js/settings/components/provider-settings/azure-text-to-speech.js index ae1893e66..f486c5a79 100644 --- a/src/js/settings/components/provider-settings/azure-text-to-speech.js +++ b/src/js/settings/components/provider-settings/azure-text-to-speech.js @@ -1,12 +1,29 @@ +/** + * WordPress dependencies + */ import { useSelect, useDispatch } from '@wordpress/data'; import { __experimentalInputControl as InputControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis SelectControl, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ import { SettingsRow } from '../settings-row'; import { STORE_NAME } from '../../data/store'; +/** + * Component for Azure Text to Speech Provider settings. + * + * This component is used within the ProviderSettings component to allow users to configure the Azure Text to Speech Provider settings. + * + * @param {Object} props Component props. + * @param {boolean} props.isConfigured Whether the provider is configured. + * + * @return {React.ReactElement} AzureTextToSpeechSettings component. + */ export const AzureTextToSpeechSettings = ( { isConfigured = false } ) => { const providerName = 'ms_azure_text_to_speech'; const providerSettings = useSelect( diff --git a/src/js/settings/components/provider-settings/google-gemini-api.js b/src/js/settings/components/provider-settings/google-gemini-api.js index 98f93af0c..5ac90eeb3 100644 --- a/src/js/settings/components/provider-settings/google-gemini-api.js +++ b/src/js/settings/components/provider-settings/google-gemini-api.js @@ -1,10 +1,27 @@ +/** + * WordPress dependencies + */ import { useSelect, useDispatch } from '@wordpress/data'; // eslint-disable-next-line @wordpress/no-unsafe-wp-apis import { __experimentalInputControl as InputControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ import { SettingsRow } from '../settings-row'; import { STORE_NAME } from '../../data/store'; +/** + * Component for Google AI (Gemini API) Provider settings. + * + * This component is used within the ProviderSettings component to allow users to configure the Google AI (Gemini API) Provider settings. + * + * @param {Object} props Component props. + * @param {boolean} props.isConfigured Whether the provider is configured. + * + * @return {React.ReactElement} GoogleAIGeminiAPISettings component. + */ export const GoogleAIGeminiAPISettings = ( { isConfigured = false } ) => { const providerName = 'googleai_gemini_api'; const providerSettings = useSelect( diff --git a/src/js/settings/components/provider-settings/ibm-watson-nlu.js b/src/js/settings/components/provider-settings/ibm-watson-nlu.js index 32d2edbdc..6283c6361 100644 --- a/src/js/settings/components/provider-settings/ibm-watson-nlu.js +++ b/src/js/settings/components/provider-settings/ibm-watson-nlu.js @@ -1,3 +1,6 @@ +/** + * WordPress dependencies + */ import { useSelect, useDispatch } from '@wordpress/data'; import { useState } from '@wordpress/element'; import { @@ -5,9 +8,23 @@ import { Button, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ import { SettingsRow } from '../settings-row'; import { STORE_NAME } from '../../data/store'; +/** + * Component for IBM Watson NLU Provider settings. + * + * This component is used within the ProviderSettings component to allow users to configure the IBM Watson NLU Provider settings. + * + * @param {Object} props Component props. + * @param {boolean} props.isConfigured Whether the provider is configured. + * + * @return {React.ReactElement} IBMWatsonNLUSettings component. + */ export const IBMWatsonNLUSettings = ( { isConfigured = false } ) => { const providerName = 'ibm_watson_nlu'; const providerSettings = useSelect( diff --git a/src/js/settings/components/provider-settings/index.js b/src/js/settings/components/provider-settings/index.js index 4dceb9194..8567c4978 100644 --- a/src/js/settings/components/provider-settings/index.js +++ b/src/js/settings/components/provider-settings/index.js @@ -28,6 +28,15 @@ import { AmazonPollySettings } from './amazon-polly'; import { AzureTextToSpeechSettings } from './azure-text-to-speech'; import { OpenAITextToSpeachSettings } from './openai-text-to-speech'; +/** + * Component for rendering provider setting fields based on the selected provider. + * + * @param {Object} props Component props. + * @param {string} props.provider The selected provider. + * @param {boolean} props.isConfigured Whether the provider is configured. + * + * @return {React.ReactElement} ProviderFields component. + */ const ProviderFields = ( { provider, isConfigured } ) => { switch ( provider ) { case 'openai_chatgpt': @@ -81,7 +90,11 @@ const ProviderFields = ( { provider, isConfigured } ) => { }; /** - * Feature Settings component. + * Provider Settings component. + * + * This component is used within the FeatureSettings component to allow users to configure the provider settings. + * + * @return {React.ReactElement} ProviderSettings component. */ export const ProviderSettings = () => { const [ editProvider, setEditProvider ] = useState( false ); diff --git a/src/js/settings/components/provider-settings/openai-chatgpt.js b/src/js/settings/components/provider-settings/openai-chatgpt.js index 6e412c74b..12cf8191b 100644 --- a/src/js/settings/components/provider-settings/openai-chatgpt.js +++ b/src/js/settings/components/provider-settings/openai-chatgpt.js @@ -1,11 +1,28 @@ +/** + * WordPress dependencies + */ import { useSelect, useDispatch } from '@wordpress/data'; // eslint-disable-next-line @wordpress/no-unsafe-wp-apis import { __experimentalInputControl as InputControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ import { SettingsRow } from '../settings-row'; import { STORE_NAME } from '../../data/store'; import { useFeatureContext } from '../feature-settings/context'; +/** + * Component for OpenAI ChatGPT Provider settings. + * + * This component is used within the ProviderSettings component to allow users to configure the OpenAI ChatGPT Provider settings. + * + * @param {Object} props Component props. + * @param {boolean} props.isConfigured Whether the provider is configured. + * + * @return {React.ReactElement} OpenAIChatGPTSettings component. + */ export const OpenAIChatGPTSettings = ( { isConfigured = false } ) => { const { featureName } = useFeatureContext(); const providerName = 'openai_chatgpt'; diff --git a/src/js/settings/components/provider-settings/openai-dalle.js b/src/js/settings/components/provider-settings/openai-dalle.js index 7bc01358b..9431c06b5 100644 --- a/src/js/settings/components/provider-settings/openai-dalle.js +++ b/src/js/settings/components/provider-settings/openai-dalle.js @@ -1,12 +1,29 @@ +/** + * WordPress dependencies + */ import { __experimentalInputControl as InputControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis SelectControl, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ import { SettingsRow } from '../settings-row'; import { useSelect, useDispatch } from '@wordpress/data'; import { STORE_NAME } from '../../data/store'; +/** + * Component for OpenAI DALL-E Provider settings. + * + * This component is used within the ProviderSettings component to allow users to configure the OpenAI DALL-E Provider settings. + * + * @param {Object} props Component props. + * @param {boolean} props.isConfigured Whether the provider is configured. + * + * @return {React.ReactElement} OpenAIDallESettings component. + */ export const OpenAIDallESettings = ( { isConfigured = false } ) => { const providerName = 'openai_dalle'; const providerSettings = useSelect( diff --git a/src/js/settings/components/provider-settings/openai-embeddings.js b/src/js/settings/components/provider-settings/openai-embeddings.js index 8e5e847e4..8e7afe11c 100644 --- a/src/js/settings/components/provider-settings/openai-embeddings.js +++ b/src/js/settings/components/provider-settings/openai-embeddings.js @@ -1,7 +1,24 @@ +/** + * WordPress dependencies + */ import { useSelect, useDispatch } from '@wordpress/data'; + +/** + * Internal dependencies + */ import { STORE_NAME } from '../../data/store'; import { OpenAISettings } from './openai'; +/** + * React Component for OpenAI Embeddings settings. + * + * This component is used within the ProviderSettings component to allow users to configure the OpenAI Embeddings settings. + * + * @param {Object} props Component props. + * @param {boolean} props.isConfigured Whether the provider is configured. + * + * @return {React.ReactElement} OpenAIEmbeddingsSettings component. + */ export const OpenAIEmbeddingsSettings = ( { isConfigured = false } ) => { const providerName = 'openai_embeddings'; const providerSettings = useSelect( diff --git a/src/js/settings/components/provider-settings/openai-moderation.js b/src/js/settings/components/provider-settings/openai-moderation.js index ae45bfb2c..5491ccc1b 100644 --- a/src/js/settings/components/provider-settings/openai-moderation.js +++ b/src/js/settings/components/provider-settings/openai-moderation.js @@ -1,7 +1,24 @@ +/** + * WordPress dependencies + */ import { useSelect, useDispatch } from '@wordpress/data'; + +/** + * Internal dependencies + */ import { STORE_NAME } from '../../data/store'; import { OpenAISettings } from './openai'; +/** + * Component for OpenAI Moderation settings. + * + * This component is used within the ProviderSettings component to allow users to configure the OpenAI Moderation settings. + * + * @param {Object} props Component props. + * @param {boolean} props.isConfigured Whether the provider is configured. + * + * @return {React.ReactElement} OpenAIModerationSettings component. + */ export const OpenAIModerationSettings = ( { isConfigured = false } ) => { const providerName = 'openai_moderation'; const providerSettings = useSelect( diff --git a/src/js/settings/components/provider-settings/openai-text-to-speech.js b/src/js/settings/components/provider-settings/openai-text-to-speech.js index 5f67ea2ae..127b71706 100644 --- a/src/js/settings/components/provider-settings/openai-text-to-speech.js +++ b/src/js/settings/components/provider-settings/openai-text-to-speech.js @@ -1,12 +1,29 @@ +/** + * WordPress dependencies + */ import { __experimentalInputControl as InputControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis SelectControl, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ import { SettingsRow } from '../settings-row'; import { useSelect, useDispatch } from '@wordpress/data'; import { STORE_NAME } from '../../data/store'; +/** + * Component for OpenAI Text to Speech Provider settings. + * + * This component is used within the ProviderSettings component to allow users to configure the OpenAI Text to Speech Provider settings. + * + * @param {Object} props Component props. + * @param {boolean} props.isConfigured Whether the provider is configured. + * + * @return {React.ReactElement} OpenAITextToSpeachSettings component. + */ export const OpenAITextToSpeachSettings = ( { isConfigured = false } ) => { const providerName = 'openai_text_to_speech'; const providerSettings = useSelect( diff --git a/src/js/settings/components/provider-settings/openai-whisper.js b/src/js/settings/components/provider-settings/openai-whisper.js index 7d4fc1441..a2aeb4cc5 100644 --- a/src/js/settings/components/provider-settings/openai-whisper.js +++ b/src/js/settings/components/provider-settings/openai-whisper.js @@ -1,7 +1,24 @@ +/** + * WordPress dependencies + */ import { useSelect, useDispatch } from '@wordpress/data'; + +/** + * Internal dependencies + */ import { STORE_NAME } from '../../data/store'; import { OpenAISettings } from './openai'; +/** + * Component for OpenAI Whisper settings. + * + * This component is used within the ProviderSettings component to allow users to configure the OpenAI Whisper settings. + * + * @param {Object} props Component props. + * @param {boolean} props.isConfigured Whether the provider is configured. + * + * @return {React.ReactElement} OpenAIWhisperSettings component. + */ export const OpenAIWhisperSettings = ( { isConfigured = false } ) => { const providerName = 'openai_whisper'; const providerSettings = useSelect( diff --git a/src/js/settings/components/provider-settings/openai.js b/src/js/settings/components/provider-settings/openai.js index 5de1692ab..0b2c5c374 100644 --- a/src/js/settings/components/provider-settings/openai.js +++ b/src/js/settings/components/provider-settings/openai.js @@ -3,6 +3,18 @@ import { __experimentalInputControl as InputControl } from '@wordpress/component import { __ } from '@wordpress/i18n'; import { SettingsRow } from '../settings-row'; +/** + * Component for OpenAI Provider settings. + * + * This component is used within the ProviderSettings component to allow users to configure the OpenAI Provider settings. + * This is the base component for OpenAI settings. + * + * @param {Object} props Component props. + * @param {Object} props.providerSettings The provider settings. + * @param {Function} props.onChange Function to call when the provider settings change. + * + * @return {React.ReactElement} OpenAISettings component. + */ export const OpenAISettings = ( { providerSettings, onChange } ) => { const Description = () => ( <> diff --git a/src/js/settings/components/user-permissions/index.js b/src/js/settings/components/user-permissions/index.js index aeb6b4a28..4d16ab948 100644 --- a/src/js/settings/components/user-permissions/index.js +++ b/src/js/settings/components/user-permissions/index.js @@ -1,5 +1,5 @@ /** - * External dependencies + * WordPress dependencies */ import { PanelBody, ToggleControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; @@ -14,6 +14,13 @@ import { SettingsRow } from '../settings-row'; import { STORE_NAME } from '../../data/store'; import { useUserPermissionsPreferences } from '../../utils/utils'; +/** + * Component for User Permissions settings. + * + * This component is used within the FeatureSettings component to allow users to configure the User Permissions settings. + * + * @return {React.ReactElement} UserPermissions component. + */ export const UserPermissions = () => { const { isOpen, setIsOpen } = useUserPermissionsPreferences(); const { setFeatureSettings } = useDispatch( STORE_NAME ); diff --git a/src/js/settings/data/hooks.js b/src/js/settings/data/hooks.js index dccc36bc1..0c02561b5 100644 --- a/src/js/settings/data/hooks.js +++ b/src/js/settings/data/hooks.js @@ -1,9 +1,20 @@ +/** + * WordPress dependencies + */ import { useContext } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; -import { STORE_NAME } from '../data/store'; +/** + * Internal dependencies + */ +import { STORE_NAME } from '../data/store'; import { FeatureContext } from '../components/feature-settings/context'; +/** + * Custom hook to get and set feature settings. + * + * @return {Object} The feature settings. + */ export const useFeatureSettings = () => { let { featureName } = useContext( FeatureContext ); diff --git a/src/js/settings/data/store.js b/src/js/settings/data/store.js index 1967aac25..50e3aaa46 100644 --- a/src/js/settings/data/store.js +++ b/src/js/settings/data/store.js @@ -12,10 +12,14 @@ import * as actions from './actions'; export const STORE_NAME = 'classifai-settings'; +/** + * Store for the settings data. + */ export const store = createReduxStore( STORE_NAME, { reducer, selectors, actions, } ); +// Register the store. register( store ); diff --git a/src/js/settings/index.js b/src/js/settings/index.js index 3d19774e6..f4135d149 100644 --- a/src/js/settings/index.js +++ b/src/js/settings/index.js @@ -11,6 +11,9 @@ import './data/store'; import '../../scss/settings.scss'; import { ClassifAISettings } from './components'; +/** + * Render the ClassifAI settings component. + */ domReady( () => { const adminEl = document.getElementById( 'classifai-settings' ); diff --git a/src/js/settings/utils/icons.js b/src/js/settings/utils/icons.js index 75fcf1c4d..fd6d51f34 100644 --- a/src/js/settings/utils/icons.js +++ b/src/js/settings/utils/icons.js @@ -3,6 +3,11 @@ */ import { SVG, Path } from '@wordpress/components'; +/** + * ClassifAI Logo SVG component. + * + * @return {React.ReactElement} ClassifAI Logo SVG component. + */ export const ClassifAILogo = ( diff --git a/src/js/settings/utils/utils.js b/src/js/settings/utils/utils.js index 5d04817df..e9736398c 100644 --- a/src/js/settings/utils/utils.js +++ b/src/js/settings/utils/utils.js @@ -1,3 +1,6 @@ +/** + * WordPress dependencies + */ import { useSelect, useDispatch } from '@wordpress/data'; import { useMemo } from '@wordpress/element'; import { store as coreStore } from '@wordpress/core-data'; @@ -23,11 +26,23 @@ export const updateUrl = ( key, value ) => { } }; +/** + * Get the feature settings for the given feature name. + * + * @param {string} featureName The feature name. + * @return {Object} The feature settings. + */ export const getFeature = ( featureName ) => { const features = getFeatures(); return features[ featureName ]; }; +/** + * Get the features object. + * The features object is a combination of all the features from all the services. + * + * @return {Object} The features object. + */ export const getFeatures = () => { let features = {}; for ( const key in window.classifAISettings?.features || {} ) {