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

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/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,

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

@@ -0,0 +1,84 @@
+# useSettings
+
+A comprehensive hook that manages the retrieval and configuration of settings data for one or multiple sections. It orchestrates multiple queries with `react-query`, constructs dynamic pages for each settings section, and returns a pre-configured `SettingsComponent` for rendering the settings UI.
+
+## Overview
+
+`useSettings` serves several purposes:
+
+- **Multi-Section Querying:**  
+  It supports both single and multiple settings sections. Depending on the provided props, it dynamically generates query parameters and uses `useQueries` to fetch data for each section.
+
+- **Dynamic Page Generation:**  
+  When queries return data, it extracts unique section names to create dynamic pages. Each page includes a route, localized label, and a component that wraps a `SettingPage` in a `SettingPagePane`.
+
+- **Context and Configuration:**  
+  The hook creates a `SettingsContextProvider` to pass down configuration details (like API endpoints and internationalization keys) to its children. This ensures that each section or page has the necessary context for rendering.
+
+- **Final Settings Component:**  
+  It returns a `SettingsComponent` that wraps the list of pages or sections using the `Settings` component from `@folio/stripes/smart-components`. This component can then be directly rendered in the application.
+
+## Basic Usage
+
+```jsx
+const SettingsContainer = () => {
+  const {
+    isLoading,
+    SettingsComponent,
+    pageList,
+    sections,
+    SettingsContextProvider,
+  } = useSettings({
+    sectionName: 'general',
+    settingEndpoint: '/settings',
+    refdataEndpoint: '/refdata',
+    // Other optional props for customization...
+  });
+
+  if (isLoading) return <div>Loading settings...</div>;
+
+  return <SettingsComponent />;
+};
+```
+
+## Parameters
+
+`useSettings` accepts an optional settings props object (`settingsProps`) that may include the following properties:
+
+| Name                   | Type     | Description                                                                                                                                                                                                                                | Required |
+|------------------------|----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|
+| `allowGlobalEdit`      | `boolean`| Global flag to enable or disable editing of settings. Defaults to `true`.                                                                                                                                                                  | ✕        |
+| `dynamicPageExclusions`| `array`  | Array of section names to be excluded from dynamic page generation.                                                                                                                                                                        | ✕        |
+| `intlKey`              | `string` | Base internationalization key for resolving labels.                                                                                                                                                                                        | ✕        |
+| `intlNS`               | `string` | Internationalization namespace.                                                                                                                                                                                                            | ✕        |
+| `labelOverrides`       | `object` | Custom label overrides for specific settings keys.                                                                                                                                                                                         | ✕        |
+| `pages`                | `array`  | If provided, acts as a passthrough configuration for either sections or standalone pages, disabling query execution.                                                                                                                       | ✕        |
+| `persistentPages`      | `array`  | Array of pages that persist regardless of dynamic query results.                                                                                                                                                                           | ✕        |
+| `preventQueries`       | `boolean`| Flag to disable querying if settings data is provided externally.                                                                                                                                                                          | ✕        |
+| `refdataEndpoint`      | `string` | The API endpoint to retrieve reference data for settings.                                                                                                                                                                                  | ✕        |
+| `renderSingleSection`  | `boolean`| When only one section is available, determines if it should be rendered as a single section with its own label.                                                                                                                            | ✕        |
+| `sectionPermission`    | `string` | Permission string that, if provided, restricts the rendering of a section unless the current user has the specified permission.                                                                                                            | ✕        |
+| `sectionRoute`         | `string` | Base route path to be used when constructing dynamic page routes for settings sections.                                                                                                                                                    | ✕        |
+| `sections`             | `array`  | Array of section configuration objects. Each object can override or extend the global settings props for that specific section. This means that the shape here matches more or less the shape for the props of `useSettings` itself.       | ✕        |
+| `settingEndpoint`      | `string` | The base URL endpoint for fetching and updating settings.                                                                                                                                                                                  | ✕        |
+| `templateEndpoint`     | `string` | The endpoint for retrieving settings templates (if applicable).                                                                                                                                                                            | ✕        |
+| `render`               | `func`   | A custom render function for rendering individual setting fields. This function is passed down to the underlying settings components for specialized display logic. See `EditableSettingsList` for more information on how render is used. | ✕        |
+
+## Returns
+
+The hook returns an object containing:
+
+- **`isLoading`** (`boolean`):  
+  Indicates if any of the settings queries are still loading.
+
+- **`pageList`** (`array`):  
+  An array of pages to be rendered by the `Settings` component. This is the final list of pages for a single section, if applicable.
+
+- **`sections`** (`array`):  
+  An array of fully configured sections. Each section includes its own `SettingsContextProvider`, dynamic pages, and additional configuration data.
+
+- **`SettingsComponent`** (`React Component`):  
+  A component pre-configured with the pages and sections that renders the settings UI. This component wraps the settings in the required `Settings` component from `@folio/stripes/smart-components`.
+
+- **`SettingsContextProvider`** (`React Component`):  
+  A context provider component for settings configuration. If only one section is available, it is provided directly; otherwise, it defaults to a pass-through provider.

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

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

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { useQueries } from 'react-query';
@@ -6,11 +6,11 @@ import { useOkapiKy, useStripes } from '@folio/stripes/core';
 
 import { Settings } from '@folio/stripes/smart-components';
 
-import { SettingPage, SettingPagePane } from '../SettingPage';
-import { SettingsContext } from '../contexts';
+import { SettingPage, SettingPagePane } from '../../SettingPage';
+import { SettingsContext } from '../../contexts';
 
-import { generateKiwtQueryParams, sortByLabel, toCamelCase } from '../utils';
-import { useKintIntl, useIntlKey } from '../hooks';
+import { generateKiwtQueryParams, sortByLabel, toCamelCase } from '../../utils';
+import { useKintIntl, useIntlKey } from '../../hooks';
 
 // TODO work underway to make the settings hook more useful when trying to render multiple sections at a time
 const useSettings = (settingsProps = {}) => {
@@ -30,7 +30,8 @@ const useSettings = (settingsProps = {}) => {
     sections, // if present, should be an array of objects with the SAME shape as the overall props here.
     // If a prop isn't present it can fall back to the "global" prop.
     settingEndpoint,
-    templateEndpoint
+    templateEndpoint,
+    render, // Allow setting-by-setting rendering of fields, to allow for special treatment for a given setting key etc
   } = settingsProps;
 
   const ky = useOkapiKy();
@@ -100,6 +101,7 @@ const useSettings = (settingsProps = {}) => {
   const getDynamicPages = useCallback((qra, sma) => {
     const pagesFromQueryReturn = [...new Set(qra.data?.map(s => s.section))];
     const dynamic = pagesFromQueryReturn.map(page => {
+      const finalRender = sma.render ?? render;
       const finalSectionRoute = sma.sectionRoute ?? sectionRoute;
       const pageRoute = (finalSectionRoute ? `${finalSectionRoute}/` : '') + page;
       return (
@@ -120,6 +122,7 @@ const useSettings = (settingsProps = {}) => {
                 intlKey={passedIntlKey}
                 intlNS={passedIntlNS}
                 labelOverrides={labelOverrides}
+                render={finalRender}
                 sectionName={page}
                 {...props}
               />
@@ -133,7 +136,7 @@ const useSettings = (settingsProps = {}) => {
       pages: pagesFromQueryReturn,
       dynamic,
     };
-  }, [allowGlobalEdit, kintIntl, labelOverrides, passedIntlKey, passedIntlNS, sectionRoute]);
+  }, [allowGlobalEdit, kintIntl, labelOverrides, passedIntlKey, passedIntlNS, render, sectionRoute]);
 
   useEffect(() => {
     // Handle loading