@k-int/stripes-kint-components 5.16.0 → 5.18.0

package/src/lib/EditableSettingsList/SettingField/EditSettingValue/README.md

@@ -0,0 +1,63 @@
+# EditSettingValue
+
+A component responsible for rendering the correct input field when a setting is in edit mode within the `SettingField` component. It selects and configures the appropriate `react-final-form` `<Field>`-wrapped input component (`@folio/stripes/components` `TextField`, `Select`, or a custom `RefdataButtons` component) based on the `settingType` specified in the setting's configuration (`currentSetting` prop).
+
+This component is designed to be rendered by `SettingField` when the `editing` prop is true. It receives form control props (`input`) from the parent `react-final-form` `<Field>` and contextual data (`refdata`, `templates`) needed for specific input types like dropdowns or radio buttons. It ensures that the edited value is correctly bound to the `.value` property of the setting object within the form state.
+
+## Basic Usage
+
+`EditSettingValue` is used internally by the `SettingField` component when its `editing` prop is true. It's not typically instantiated directly in application code but rather chosen dynamically by `SettingField`.
+
+```jsx
+// EditSettingValue is used internally by the SettingField component
+// when its 'editing' prop is true.
+
+// Simplified structure within SettingField's render method:
+import EditSettingValue from './EditSettingValue'; // Adjust path
+import RenderSettingValue from './RenderSettingValue'; // For comparison
+
+const SettingField = ({ editing, input, meta, currentSetting, refdata, templates, ...rest }) => {
+  // ... other logic like fetching refdata/templates ...
+
+  let RenderFunction;
+  if (editing === false) {
+    // When not editing, SettingField uses RenderSettingValue
+    RenderFunction = RenderSettingValue;
+  } else {
+    // When editing is true, SettingField switches to EditSettingValue:
+    RenderFunction = EditSettingValue;
+  }
+
+  return (
+    <Card /* Card setup */ >
+      {/* RenderFunction will be EditSettingValue when editing is true */}
+      <RenderFunction
+        currentSetting={currentSetting}
+        input={input} // Passed from the parent <Field>
+        meta={meta} // Also passed from the parent <Field>
+        refdata={refdata} // Fetched refdata if settingType is 'Refdata'
+        templates={templates} // Fetched templates if settingType is 'Template'
+        {...rest} // Other relevant props like intlKey, intlNS, labelOverrides etc.
+      />
+    </Card>
+  );
+};
+```
+
+The specific input rendered depends on `currentSetting.settingType`:
+* **'Refdata'**: Renders `<Select>` or `<RefdataButtons>` based on the number of options in the `refdata` prop.
+* **'Password'**: Renders `<TextField type="password">`.
+* **'Template'**: Renders `<Select>` populated from the `templates` prop.
+* **Default/Other**: Renders a standard `<TextField>`.
+
+## Props
+
+| Name             | Type     | Description                                                                                                                                                                                                                                                                    | default     | required                            |
+|------------------|----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------|-------------------------------------|
+| `currentSetting` | `object` | The configuration object for the setting being edited. Its `settingType` property dictates which input component is rendered, and `key` is used for generating labels.                                                                                                         | `undefined` | ✓                                   |
+| `input`          | `object` | Provided by the parent `react-final-form` `<Field>`. Contains the field's `name`, `value`, `onChange`, `onBlur`, etc., connecting the rendered input to the form state. The component uses `input.name` to construct the name for the nested field (e.g., `parentName.value`). | `undefined` | ✓                                   |
+| `intlKey`        | `string` | Base key for internationalization passed to the `useKintIntl` hook, used for generating the `aria-label`.                                                                                                                                                                      | `undefined` | ✕                                   |
+| `intlNS`         | `string` | Namespace for internationalization passed to the `useKintIntl` hook, used for generating the `aria-label`.                                                                                                                                                                     | `undefined` | ✕                                   |
+| `labelOverrides` | `object` | An object potentially containing overrides for specific internationalization message IDs used in this component (e.g., `valueFor`).                                                                                                                                            | `{}`        | ✕                                   |
+| `refdata`        | `array`  | An array of reference data objects (typically `{ id, value, label }`). Expected to be provided if `currentSetting.settingType` is 'Refdata'. Used to populate the `Select` or `RefdataButtons` component.                                                                      | `undefined` | Conditional (✓ for 'Refdata' type)  |
+| `templates`      | `array`  | An array of template objects (expected shape `{ id, name }`). Expected to be provided if `currentSetting.settingType` is 'Template'. Used to populate the `Select` component.                                                                                                  | `undefined` | Conditional (✓ for 'Template' type) |

package/src/lib/EditableSettingsList/SettingField/EditSettingValue/index.js

@@ -0,0 +1 @@
+export { default } from './EditSettingValue';

package/src/lib/EditableSettingsList/SettingField/README.md

@@ -0,0 +1,61 @@
+# SettingField
+
+A component designed to render a single setting within a settings list. It handles fetching contextual data (like reference data via `useRefdata` or templates via `useTemplates` based on the setting's configuration), displays the setting's name, help text (`InfoPopover`), and value, and manages the switch between display mode (using `RenderSettingValue`) and edit mode (using `EditSettingValue`).
+
+It is typically used as the `component` prop for a `react-final-form` `<Field>` within the structure provided by `EditableSettingsListFieldArray` and `EditableSettingsList`. It utilizes `@folio/stripes/components` (`Card`, `Button`, `InfoPopover`) for its UI structure and relies on `SettingsContext` to determine API endpoints for fetching related data.
+
+## Basic Usage
+
+`SettingField` is usually rendered internally by the `DefaultField` implementation within `EditableSettingsListField`. It receives props from `react-final-form`'s `<Field>` (like `input`, `meta`) and custom props from `EditableSettingsListField` (like `editing`, `setEditing`, `settingData`, `onSave`).
+
+```jsx
+// SettingField is typically used internally by EditableSettingsListField.
+// The default implementation within EditableSettingsListField looks
+// somewhat like this:
+
+import { Field } from 'react-final-form';
+
+// Inside EditableSettingsListField's render logic (simplified):
+<Field
+  // Props passed down:
+  allowEdit={props.allowEdit}
+  component={SettingField} // <-- Usage of SettingField
+  editing={props.editing}
+  intlKey={props.intlKey}
+  intlNS={props.intlNS}
+  labelOverrides={props.labelOverrides}
+  onSave={props.onSave} // Specific save handler for this row
+  setEditing={props.setEditing} // Function to toggle editing state for this row
+  settingData={props.settingData} // Object containing currentSetting etc.
+
+  // Props provided by Field:
+  name={settingIdentifier} // The name/path for this field within the form
+  // 'input' and 'meta' props are also automatically passed by Field
+/>
+
+// Direct usage is less common but possible if customizing the `render` prop
+// of EditableSettingsListFieldArray or EditableSettingsList.
+
+// Note: The actual rendering of the setting's value in view or edit mode
+// is delegated to the RenderSettingValue and EditSettingValue components,
+// respectively, based on the 'editing' prop and the setting's configuration
+// (currentSetting.settingType).
+```
+
+**Note:** This component requires `SettingsContext` to be available higher up in the component tree to provide `refdataEndpoint` and `templateEndpoint`.
+
+## Props
+
+| Name                         | Type      | Description                                                                                                                                                                                                                                                                                                       | default     | required   |
+|------------------------------|-----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------|------------|
+| `allowEdit`                  | `boolean` | Controls whether the "Edit"/"Save" button is displayed and if editing is permitted. Passed down from parent components.                                                                                                                                                                                           | `true`      | ✕          |
+| `editing`                    | `boolean` | Determines if the field should render in display mode (`RenderSettingValue`) or edit mode (`EditSettingValue`). This state is typically managed by the parent `EditableSettingsListField`.                                                                                                                        | `undefined` | ✓          |
+| `input`                      | `object`  | Provided by `react-final-form`'s `<Field>`. Contains field state like `value`, `name`, and callbacks like `onChange`, `onBlur`. Crucial for connecting to the form state, passed down to `EditSettingValue`.                                                                                                      | `undefined` | ✓ (by RFF) |
+| `intlKey`                    | `string`  | Base key for internationalization, used by the internal `useKintIntl` hook for fetching labels and messages.                                                                                                                                                                                                      | `undefined` | ✕          |
+| `intlNS`                     | `string`  | Namespace for internationalization, used by the internal `useKintIntl` hook.                                                                                                                                                                                                                                      | `undefined` | ✕          |
+| `labelOverrides`             | `object`  | An object potentially used to override default labels, passed down to `RenderSettingValue`/`EditSettingValue`.                                                                                                                                                                                                    | `{}`        | ✕          |
+| `meta`                       | `object`  | Provided by `react-final-form`'s `<Field>`. Contains metadata about the field state, such as `touched`, `error`, `dirty`, `valid`, etc.                                                                                                                                                                           | `undefined` | ✓ (by RFF) |
+| `onSave`                     | `func`    | Callback function triggered when the "Save" button is clicked (while `editing` is true). It should handle the persistence logic for this *single setting* and is expected to return a `Promise`. The success of the promise determines whether the component switches back to display mode (`setEditing(false)`). | `undefined` | ✓          |
+| `setEditing`                 | `func`    | A function, provided by the parent component (e.g., `EditableSettingsListField`), used to signal a change in the editing state (e.g., `setEditing(true)` when "Edit" is clicked, or `setEditing(false)` after a successful save).                                                                                 | `undefined` | ✓          |
+| `settingData`                | `object`  | An object containing data pertinent to the specific setting being rendered.                                                                                                                                                                                                                                       | `undefined` | ✓          |
+| `settingData.currentSetting` | `object`  | The core configuration object for the setting currently being rendered. Contains properties like `key`, `section`, `settingType`, `vocab`, etc., which drive the component's behavior (fetching data, rendering labels, choosing input types via `EditSettingValue`).                                             | `undefined` | ✓          |

package/src/lib/EditableSettingsList/SettingField/{RenderSettingValue.js → RenderSettingValue/RenderSettingValue.js}

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 
-import { useKintIntl } from '../../hooks';
+import { useKintIntl } from '../../../hooks';
 
 const RenderSettingValue = (props) => {
   const {

package/src/lib/EditableSettingsList/SettingField/{RenderSettingValue.test.js → RenderSettingValue/RenderSettingValue.test.js}

@@ -2,9 +2,9 @@ import React from 'react';
 
 import RenderSettingValue from './RenderSettingValue';
 
-import { renderWithKintHarness } from '../../../../test/jest/helpers';
+import { renderWithKintHarness } from '../../../../../test/jest/helpers';
 
-jest.mock('../../hooks');
+jest.mock('../../../hooks');
 
 const stringSetting = {
   id: '12345',

package/src/lib/EditableSettingsList/SettingField/RenderSettingValue/index.js

@@ -0,0 +1 @@
+export { default } from './RenderSettingValue';

package/src/lib/EditableSettingsList/SettingField/SettingField.js

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import { useContext } from 'react';
 import PropTypes from 'prop-types';
 
 import {
@@ -18,16 +18,17 @@ import renderHelpTextCSS from '../../../../styles/renderHelpText.css';
 const SettingField = (settingFieldProps) => {
   const {
     allowEdit = true,
+    editing,
     intlKey: passedIntlKey,
     intlNS: passedIntlNS,
     labelOverrides = {},
     onSave,
+    setEditing,
     settingData: {
       currentSetting
     } = {}
   } = settingFieldProps;
 
-  const [editing, setEditing] = useState(false);
   const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
   const { refdataEndpoint, templateEndpoint } = useContext(SettingsContext);
 
@@ -39,7 +40,8 @@ const SettingField = (settingFieldProps) => {
     endpoint: refdataEndpoint,
     desc: currentSetting.vocab,
     queryParams: {
-      enabled: !!currentSetting?.vocab && currentSetting.settingType === 'Refdata'
+      enabled: !!currentSetting?.vocab && currentSetting.settingType === 'Refdata',
+      staleTime: 1000 * 60 * 2 // 2 minutes staletime for refdata in settings?
     }
   });
 

package/src/lib/EditableSettingsList/SettingField/SettingField.test.js

@@ -25,50 +25,71 @@ const setting = {
   value: 'diku-shared'
 };
 
-describe('SettingField', () => {
-  let renderComponent;
-  beforeEach(async () => {
-    renderComponent = renderWithKintHarness(
-      <TestForm
-        initialValues={{}}
-        onSubmit={onSubmit}
-      >
-        <Field
-          component={SettingField}
-          name="test"
-          onSave={onSave}
-          settingData={{
-            currentSetting: setting
-          }}
-        />
-      </TestForm>
-    );
-  });
-
-  it('renders RenderSettingValue', async () => {
-    const { getByText } = renderComponent;
-    await waitFor(async () => expect(await getByText('RenderSettingValue')).toBeInTheDocument());
-  });
-
-  test('renders the edit button', () => {
-    Button('Edit').exists();
-  });
+const setEditing = jest.fn();
 
-  it('clicking edit/save works as expected', async () => {
-    const { findByText } = renderComponent;
-    // before clicking on edit button, we should be rendering setting value
-    await waitFor(async () => expect(await findByText('RenderSettingValue')).toBeInTheDocument());
-
-    // Clicking edit button
-    await waitFor(async () => { await Button('Edit').click(); });
-
-    // Should be rendering the "edit" for a setting value
-    await waitFor(async () => expect(await findByText('EditSettingValue')).toBeInTheDocument());
-
-    // Clicking save button
-    await waitFor(async () => { await Button('Save').click(); });
-
-    // Should be rendering the setting value again
-    await waitFor(async () => expect(await findByText('RenderSettingValue')).toBeInTheDocument());
+let renderComponent;
+describe('SettingField', () => {
+  describe.each([
+    {
+      editing: false,
+      expectedRender: 'RenderSettingValue',
+      expectedButton: 'Edit',
+      expectedCallback: setEditing,
+    },
+    {
+      editing: true,
+      expectedRender: 'EditSettingValue',
+      expectedButton: 'Save',
+      expectedCallback: onSave,
+
+    }
+  ])('render SettingField with editing: editing', ({
+    editing,
+    expectedButton,
+    expectedCallback,
+    expectedRender
+  }) => {
+    beforeEach(async () => {
+      setEditing.mockClear();
+      onSave.mockClear();
+      renderComponent = renderWithKintHarness(
+        <TestForm
+          initialValues={{}}
+          onSubmit={onSubmit}
+        >
+          <Field
+            component={SettingField}
+            editing={editing}
+            name="test"
+            onSave={onSave}
+            setEditing={setEditing}
+            settingData={{
+              currentSetting: setting
+            }}
+          />
+        </TestForm>
+      );
+    });
+
+    it(`renders ${expectedRender}`, () => {
+      const { getByText } = renderComponent;
+      expect(getByText(expectedRender)).toBeInTheDocument();
+    });
+
+    test(`renders the ${expectedButton} button`, () => {
+      Button('Edit').exists();
+    });
+
+    describe(`clicking the ${expectedButton} button`, () => {
+      beforeEach(async () => {
+        await waitFor(async () => {
+          await Button(expectedButton).click();
+        });
+      });
+
+      it('fired expected callback', () => {
+        expect(expectedCallback).toHaveBeenCalled();
+      });
+    });
   });
 });

package/src/lib/EditableSettingsList/index.js

@@ -1,3 +1,3 @@
 export { default as EditableSettingsList } from './EditableSettingsList';
 export { default as EditableSettingsListFieldArray } from './EditableSettingsListFieldArray';
-export { SettingField } from './SettingField';
+export { SettingField, RenderSettingValue, EditSettingValue } from './SettingField';

package/src/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -40,6 +40,17 @@ const SASQLookupComponent = forwardRef((props, ref) => {
     intlKey: passedIntlKey,
     intlNS: passedIntlNS,
     labelOverrides = {},
+    lookupQueryNamespaceGenerator = ({ currentPage, namespace, id: passedId, query }) => {
+      const queryNamespace = [namespace, 'SASQ'];
+      if (passedId) {
+        queryNamespace.push(passedId);
+      }
+      queryNamespace.push('viewAll');
+      queryNamespace.push(query);
+      queryNamespace.push(currentPage);
+
+      return queryNamespace;
+    },
     mainPaneProps = {},
     mclProps = {},
     noSearchField,
@@ -49,7 +60,7 @@ const SASQLookupComponent = forwardRef((props, ref) => {
     rowNavigation = true, // Default navigation onRowClick
     sasqProps,
     searchFieldAriaLabel,
-    searchFieldProps
+    searchFieldProps,
   } = props;
   const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
   const [count, setCount] = useState(0);
@@ -95,24 +106,24 @@ const SASQLookupComponent = forwardRef((props, ref) => {
   const [filterPaneVisible, setFilterPaneVisible] = useLocalStorageState(filterPaneVisibileKey, true);
   const toggleFilterPane = () => setFilterPaneVisible(!filterPaneVisible);
 
-  const queryNamespace = [namespace, 'SASQ'];
-  if (id) {
-    queryNamespace.push(id);
-  }
-  queryNamespace.push('viewAll');
-  queryNamespace.push(query);
-  queryNamespace.push(currentPage);
-
   const {
     data = {},
     ...restOfQueryProps
   } = useQuery(
-    queryNamespace,
+    lookupQueryNamespaceGenerator({
+      currentPage,
+      endpoint: fetchParameters.endpoint,
+      namespace,
+      id,
+      query,
+      queryParams
+    }),
     () => {
       return ky.get(`${fetchParameters.endpoint}${queryParams}`).json();
     },
     {
       enabled: (!!query?.filters || !!query?.query) && !!currentPage,
+      ...(fetchParameters.queryOptions ?? {})
     }
   );
 

package/src/lib/SASQViewComponent/SASQViewComponent.js

@@ -16,6 +16,16 @@ const SASQViewComponent = forwardRef(({
   match,
   path,
   ViewComponent,
+  viewQueryNamespaceGenerator = ({ namespace, componentId, id: passedId }) => {
+    const queryNamespace = [namespace, 'SASQ'];
+    if (componentId) {
+      queryNamespace.push(componentId);
+    }
+    queryNamespace.push('view');
+    queryNamespace.push(passedId);
+
+    return queryNamespace;
+  },
   ...props
 }, ref) => {
   const { 0: namespace } = useNamespace();
@@ -23,16 +33,15 @@ const SASQViewComponent = forwardRef(({
   // If itemEndpoint is available, use that, otherwise use standard endpoint
   const endpoint = fetchParameters?.itemEndpoint ?? fetchParameters?.endpoint;
 
-  const queryNamespace = [namespace, 'SASQ'];
-  if (id) {
-    queryNamespace.push(id);
-  }
-  queryNamespace.push('view');
-  queryNamespace.push(match?.params?.id);
-
   const ky = useOkapiKy();
   const { data = {}, ...rest } = useQuery(
-    queryNamespace,
+    viewQueryNamespaceGenerator({
+      componentId: id,
+      namespace,
+      endpoint,
+      id: match?.params?.id,
+      match,
+    }),
     () => ky(`${endpoint}/${match?.params?.id}`).json(),
     {
       enabled: !!match?.params?.id

package/src/lib/SettingPage/README.md

@@ -0,0 +1,66 @@
+# SettingPage
+
+A container component that simplifies the process of displaying and editing a section of application settings. It leverages the `EditableSettingsList` component to handle the rendering and editing of individual settings within that section. `SettingPage` fetches the relevant settings data for a given `sectionName` using a custom hook and manages the submission of changes.
+
+This component acts as a higher-level abstraction, taking care of data fetching and preparing the necessary props for `EditableSettingsList`. It utilizes the `SettingsContext` to access the settings API endpoint and the `useSettingSection` hook to retrieve and handle the settings for a specific section.
+
+## Basic Usage
+
+Import the component and provide the `sectionName` to identify the settings section you want to display and manage.
+
+```jsx
+const GeneralSettingsPage = () => {
+  return (
+    <div>
+      <h2>General Application Settings</h2>
+      <SettingPage sectionName="general" />
+    </div>
+  );
+};
+```
+
+In this example, `SettingPage` will fetch the settings associated with the "general" section and render them in an editable list using `EditableSettingsList`.
+
+You can also customize the editing capabilities, internationalization keys, and labels.
+
+```jsx
+const AdvancedSettingsPage = () => {
+  return (
+    <div>
+      <h2>Advanced Configuration</h2>
+      <SettingPage
+        sectionName="advanced"
+        allowEdit={false} // Disable editing for this section
+        intlKey="advancedSettings"
+        intlNS="myApp"
+        labelOverrides={{
+          'timeoutDuration': 'Session Timeout (in seconds)'
+        }}
+        render={({ fields: { name }, index }) => (
+          <div key={index}>
+            {/* Custom rendering for each setting field */}
+            <label htmlFor={`${name}[${index}].value`}>{name}</label>
+            <input type="text" id={`${name}[${index}].value`} {...fields.field(`${name}[${index}]`, 'value')} />
+          </div>
+        )}
+      />
+    </div>
+  );
+};
+```
+
+**Note:**
+* This component relies on the `SettingsContext` being available in the component tree to access the `settingEndpoint`.
+* It also depends on the `useSettingSection` custom hook to handle data fetching and submission logic for the specified `sectionName`.
+* The `render` prop allows for complete customization of how the individual settings are rendered within the `EditableSettingsList`.
+
+## Props
+
+| Name             | Type      | Description                                                                                                                                                                                                                                                                                                                                                       | default     | required |
+|------------------|-----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------|----------|
+| `allowEdit`      | `boolean` | A flag to globally enable or disable editing for all settings within this section. This prop is passed directly to the underlying `EditableSettingsList` component.                                                                                                                                                                                               | `true`      | ✕        |
+| `intlKey`        | `string`  | A base internationalization key to be used for generating labels within the `EditableSettingsList` and its child components. If provided, it's passed down to `EditableSettingsList`.                                                                                                                                                                             | `undefined` | ✕        |
+| `intlNS`         | `string`  | An internationalization namespace used for resolving labels within the `EditableSettingsList` and its child components. If provided, it's passed down to `EditableSettingsList`.                                                                                                                                                                                  | `undefined` | ✕        |
+| `labelOverrides` | `object`  | An object containing key-value pairs where the keys are setting identifiers (e.g., `setting.key`) and the values are custom labels to override the default labels generated by `EditableSettingsList`. This prop is passed directly to `EditableSettingsList`.                                                                                                    | `{}`        | ✕        |
+| `sectionName`    | `string`  | The unique name of the settings section to be displayed and managed. This prop is crucial as it's used by the `useSettingSection` hook to fetch the relevant settings data from the API.                                                                                                                                                                          | `undefined` | ✓        |
+| `render`         | `func`    | A render prop that receives the `fields` object from `react-final-form-arrays` (within `EditableSettingsList`) and allows for complete custom rendering of each setting row. This prop is passed directly to `EditableSettingsList`. See the `EditableSettingsList` documentation for more details on the props passed to this render function and how to use it. | `undefined` | ✕        |

package/src/lib/SettingPage/SettingPage.js

@@ -11,7 +11,8 @@ const SettingPage = ({
   intlKey: passedIntlKey,
   intlNS: passedIntlNS,
   labelOverrides = {},
-  sectionName
+  sectionName,
+  render
 }) => {
   const { settingEndpoint } = useContext(SettingsContext);
 
@@ -29,6 +30,7 @@ const SettingPage = ({
       labelOverrides={labelOverrides}
       onSave={handleSubmit}
       onSubmit={handleSubmit}
+      render={render}
       settingSection={sectionName}
     />
   );

package/src/lib/SettingPage/SettingPagePane/README.md

@@ -0,0 +1,31 @@
+# SettingPagePane
+
+A presentational component that wraps its children within a styled pane dedicated to a settings section. **SettingPagePane** is most commonly used to wrap a **SettingsPage** component, which handles the logic for fetching and managing settings data. However, it is not strictly required to wrap a **SettingsPage**—any valid React content can be used as children.
+
+This component leverages the `Pane` component from `@folio/stripes/components` to provide a consistent layout and styling for different settings pages. Additionally, it integrates internationalization by using the `useKintIntl` hook along with the `toCamelCase` utility to generate a pane title based on the provided `sectionName`.
+
+## Basic Usage
+
+Wrap your settings-related content inside **SettingPagePane**. It is common to use this component as a wrapper for **SettingsPage**; however, you can also use it to contain any other content.
+
+```jsx
+import SettingsPage from './SettingsPage';
+
+const GeneralSettings = () => (
+  <SettingPagePane sectionName="general">
+    {/* In typical usage, SettingsPage is rendered inside SettingPagePane */}
+    <SettingsPage sectionName="general" />
+  </SettingPagePane>
+);
+```
+
+In this example, **SettingPagePane** creates a pane with an ID of `settings-general` and a title generated by converting `"general"` to camel case and resolving the corresponding internationalized message. If no message is found, it defaults to using `"general"`.
+
+## Props
+
+| Name         | Type                     | Description                                                                                                                                                   | Default      | Required |
+|--------------|--------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------|----------|
+| `sectionName`| `string`                 | The unique name of the settings section. This prop is used to generate the pane’s identifier and to lookup the internationalized title for the pane header. | `undefined`  | ✓        |
+| `intlKey`    | `string`                 | A base internationalization key used by the `useKintIntl` hook to find the correct localized message for the pane title.                                       | `undefined`  | ✕        |
+| `intlNS`     | `string`                 | An internationalization namespace for resolving labels within the pane title.                                                                                 | `undefined`  | ✕        |
+| `children`   | `node` or `func`         | The content to be rendered within the pane. Typically, this is a **SettingsPage** component, but it can be any valid React node.                                | `undefined`  | ✕        |

package/src/lib/SettingPage/{SettingPagePane.js → SettingPagePane/SettingPagePane.js}

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 
 import { Pane } from '@folio/stripes/components';
-import { toCamelCase } from '../utils';
-import { useKintIntl } from '../hooks';
+import { toCamelCase } from '../../utils';
+import { useKintIntl } from '../../hooks';
 
 const SettingPagePane = ({
   children,

package/src/lib/SettingPage/SettingPagePane/index.js

@@ -0,0 +1 @@
+export { default } from './SettingPagePane';

package/src/lib/settingsHooks/useAppSettings/index.js

@@ -0,0 +1 @@
+export { default } from './useAppSettings';

package/src/lib/settingsHooks/{useAppSettings.js → useAppSettings/useAppSettings.js}

@@ -1,6 +1,6 @@
 import { useQuery } from 'react-query';
 import { useOkapiKy } from '@folio/stripes/core';
-import { generateKiwtQueryParams } from '../utils';
+import { generateKiwtQueryParams } from '../../utils';
 
 const useAppSettings = ({
   endpoint,

package/src/lib/settingsHooks/useSettingSection/README.md

@@ -0,0 +1,54 @@
+# useSettingSection
+
+A custom hook that retrieves settings data for a given section and provides a handler to update individual settings. It leverages `react-query` to perform asynchronous data fetching and mutations against a specified settings API endpoint.
+
+## Overview
+
+`useSettingSection` is designed to:
+- **Fetch Settings:**  
+  Use `react-query` to request settings that belong to a specific section, based on a filter that matches the provided `sectionName`. The results are sorted by the setting key.
+- **Update Settings:**  
+  Provide a mutation handler (`handleSubmit`) to update a setting. The mutation performs an HTTP PUT request to the API endpoint with the setting data.
+
+## Basic Usage
+
+```jsx
+const SettingsEditor = ({ sectionName, settingEndpoint }) => {
+  const { settings, handleSubmit } = useSettingSection({
+    sectionName,
+    settingEndpoint
+  });
+
+  // Render the settings and handle updates with handleSubmit
+  return (
+    <div>
+      {settings.map(setting => (
+        <div key={setting.id}>
+          <span>{setting.key}</span>
+          {/* Some UI to edit the setting */}
+          <button onClick={() => handleSubmit({ ...setting, value: 'new value' })}>
+            Save
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+};
+```
+
+## Parameters
+
+| Name             | Type     | Description                                                                                                                                                                  | Required |
+|------------------|----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|
+| `sectionName`    | `string` | The name of the settings section to fetch. This is used to filter the settings by matching the section property in the API query.                                           | ✓        |
+| `settingEndpoint`| `string` | The base URL endpoint for the settings API. The hook appends query parameters and, in the case of an update, the setting's ID.                                               | ✓        |
+
+## Returns
+
+An object containing:
+
+- **`settings`** (`array`):  
+  The array of settings retrieved from the API. If the query has not completed or returns no data, it defaults to an empty array.
+
+- **`handleSubmit`** (`function`):  
+  A mutation function that accepts a settings data object and performs an HTTP PUT request to update the setting.

package/src/lib/settingsHooks/useSettingSection/index.js

@@ -0,0 +1 @@
+export { default } from './useSettingSection';

package/src/lib/settingsHooks/{useSettingSection.js → useSettingSection/useSettingSection.js}

@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from 'react-query';
 import { useOkapiKy } from '@folio/stripes/core';
-import { generateKiwtQueryParams } from '../utils';
+import { generateKiwtQueryParams } from '../../utils';
 
 const useSettingSection = ({
   sectionName,