ui-soxo-bootstrap-core 2.4.24

package/core/lib/elements/basic/reference-select/reference-select.js

@@ -0,0 +1,337 @@
+/**
+ *
+ * Generic Form create accepts an array of fields to update any resource
+ */
+
+import React, { useState, useEffect } from 'react';
+
+import { Select } from 'antd';
+
+import { BaseLoader } from '../../..';
+
+const { Option } = Select;
+
+// #TODO
+/**
+ * Below is the plan for clearing the pending list
+ *
+ * nura single needs to be removed ,
+ *
+ * as it has no dependency , Passing path should be a feature of both firebase and SQL Implementation
+ * Or the component should accept model
+ *
+ *
+ */
+
+/**
+ * Component for selecting head
+ *
+ * @param {*} param0
+ * @returns
+ */
+function ReferenceSelect({
+  model,
+  path = '',
+  config,
+  value,
+  queries = [],
+  onChange,
+  label = 'name',
+  mode = '',
+  field = 'id',
+  allowClear,
+  sortKey, // Key for sorting
+  sortOrder = 'asc', // default to ascending,
+  ...componentProps
+}) {
+  let [options, setOptions] = useState([]);
+
+  useEffect(() => {
+    loadOptions();
+  }, []);
+
+  /**
+   * Conditionally sorts an array of objects based on a specified key and order.
+   *
+   * @param {Array} data - The array of objects to be sorted.
+   * @returns {Array} - The sorted array if sorting is enabled and data is an array; otherwise, returns the original data.
+   *
+   * Sorting behavior:
+   * - Only proceeds if `sortKey` is truthy and `data` is a valid array.
+   * - Sorts in ascending order by default; descending if `sortOrder` is `'desc'`.
+   * - Case-insensitive sorting using `String.prototype.localeCompare`.
+   *
+   * Assumptions:
+   * -  `sortKey`, `label`, and `sortOrder` are variables available in the enclosing scope.
+   */
+  function sortIfNeeded(data) {
+    if (!sortKey || !Array.isArray(data)) return data;
+
+    const key = sortKey;
+    const order = sortOrder === 'desc' ? -1 : 1;
+
+    return [...data].sort((a, b) => {
+      const aVal = a?.[key]?.toString().toLowerCase() || '';
+      const bVal = b?.[key]?.toString().toLowerCase() || '';
+      return aVal.localeCompare(bVal) * order;
+    });
+  }
+
+  /**
+   * Loads and sets options based on the current `mode`, fetching data via the `model` or `BaseLoader`.
+   * Handles optional sorting and applying a default value condition if specified.
+   */
+  function loadOptions() {
+    // Destructure defaultValueCondition from componentProps, with a fallback of null
+    const { defaultValueCondition = null } = componentProps;
+
+    // Case 1: 'nura-base' mode – used for general fetch via config
+    if (mode === 'nura-base') {
+      // Fetch data from model using config
+      model.get({ ...config }).then((response) => {
+        // Extract result from response or fallback to response directly
+        let data = response.result || response;
+
+        // Conditionally sort the data using external sortIfNeeded function
+        data = sortIfNeeded(data);
+
+        // Set the sorted (or original) data to options
+        setOptions(data);
+
+        // If a defaultValueCondition is defined and data is not empty, apply it
+        if (defaultValueCondition && data.length) {
+          triggerDefaultValue(data);
+        }
+      });
+
+      // Case 2: 'nura-single' mode – fetches based on 'queries'
+    } else if (mode === 'nura-single') {
+      // Fetch data from model with given queries
+      model.get(queries).then(({ result }) => {
+        // Sort the result if needed
+        const data = sortIfNeeded(result);
+
+        // Set the (possibly sorted) data to options
+        setOptions(data);
+      });
+
+      // Case 3: All other modes
+    } else {
+      // Determine fetcher: use BaseLoader if path is provided, otherwise use model
+      const fetcher = path ? new BaseLoader({ path }) : model;
+
+      // Fetch data using the selected fetcher
+      fetcher.get(queries).then((result) => {
+        // Extract data using fetcher's name property
+        let data = path ? result[fetcher.name] : result[model.name];
+
+        // Sort the data if sorting is enabled
+        data = sortIfNeeded(data);
+
+        // Set the sorted (or original) data to options
+        setOptions(data);
+      });
+    }
+  }
+
+  /**
+   *  Function defaults the value from the matching record
+   * @param {*} records
+   */
+  function triggerDefaultValue(records) {
+    const { defaultValueCondition = null } = componentProps;
+
+    let matching = defaultValueCondition(records);
+
+    if (matching) {
+      onChange(matching[field]);
+    }
+  }
+
+  let props = {};
+
+  if (mode == 'multiple') {
+    props.mode = mode;
+  }
+
+  return (
+    <div className="head-selector">
+      <Select
+        allowClear={allowClear}
+        showSearch // Enables the search functionality in the Select dropdown
+        filterOption={(input, option) => {
+          // Custom filtering function to match the search input with the options
+          const searchText = input.toLowerCase().trim(); // Converts the search input to lowercase and trims whitespace
+
+          const optionLabel = option.children?.toString().toLowerCase().trim(); // Converts the option label to lowercase and trims whitespace
+
+          return optionLabel.includes(searchText); // Checks if the option label includes the search text
+        }}
+        {...props}
+        style={{ width: '100%' }}
+        onChange={onChange}
+        value={value}
+        {...componentProps}
+      >
+        {options.map((option, key) => (
+          <Option key={key} value={option[field]} record={option}>
+            {option[label]}
+          </Option>
+        ))}
+      </Select>
+    </div>
+  );
+}
+
+export default ReferenceSelect;
+
+// import React, { useState } from "react";
+
+// import PropTypes from "prop-types";
+
+// import 'antd/dist/antd.css';
+
+// /**
+//  * A reference Select component.
+//  */
+// function ReferenceSelect({ options, onSelect, defaultValue }) {
+//   const [selectedValue, setSelectedValue] = useState(defaultValue);
+
+//   const handleChange = (event) => {
+//     const value = event.target.value;
+//     setSelectedValue(value);
+//     onSelect(value);
+//   };
+
+//     useEffect(() => {
+//         loadOptions()
+//     }, [])
+
+//     /**
+//      * Load the matching heads
+//      */
+//     function loadOptions() {
+
+//         const { defaultValueCondition = null } = componentProps
+
+//         // Mode to handle all cases of Nura/StopTB/Medicant
+//         if (mode === 'nura-base') {
+
+//             model.get({ ...config }).then((response) => {
+
+//                 // Since base class implementation , data is available under data.
+//                 if (response.result) {
+//                     setOptions(response.result);
+//                 } else {
+//                     setOptions(response)
+//                 }
+
+//                 // Default value
+//                 if (defaultValueCondition) {
+
+//                     // If the response
+//                     if (response.result.length) {
+
+//                         // Trigger the default value
+//                         triggerDefaultValue(response.result);
+//                     }
+
+//                     // #Temporary Handling
+//                     if (response.length) {
+
+//                         triggerDefaultValue(response);
+//                     }
+//                 }
+//             })
+
+//         } else if (mode === 'nura-single') {
+
+//             model.get(queries).then(({ result }) => {
+
+//                 setOptions(result);
+
+//             })
+
+//         } else {
+
+//             if (path) {
+
+//                 let dynamicModel = new BaseLoader({ path })
+
+//                 dynamicModel.get(queries).then((result) => {
+
+//                     setOptions(result[dynamicModel.name]);
+
+//                 })
+
+//             } else {
+
+//                 model.get(queries).then((result) => {
+
+//                     setOptions(result[model.name]);
+
+//                 })
+//             }
+//         }
+//     }
+
+//     /**
+//      * Function defaults the value from the matching record
+//      */
+//     function triggerDefaultValue(records) {
+
+//         const { defaultValueCondition = null } = componentProps
+
+//         let matching = defaultValueCondition(records);
+
+//         if (matching) {
+
+//             onChange(matching[field]);
+//         }
+//     }
+
+//     let props = {}
+
+//     if (mode == 'multiple') {
+//         props.mode = mode;
+//     }
+
+//     return (
+//         <div className="head-selector">
+//             <Select {...props} style={{ width: '100%' }} onChange={onChange} value={value} {...componentProps}>
+//                 {options.map((option, key) => (
+//                     <Option key={key} value={option[field]} record={option}>
+//                         {option[label]}
+//                     </Option>
+//                 ))}
+//             </Select>
+//         </div>
+//     );
+// }
+
+// ReferenceSelect.propTypes = {
+//   /**
+//    * An array of reference options for the Select component.
+//    */
+//   options: PropTypes.arrayOf(
+//     PropTypes.shape({
+//       value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+//         .isRequired,
+//       label: PropTypes.string.isRequired,
+//     })
+//   ).isRequired,
+//   /**
+//    * A callback function that is called when a reference is selected.
+//    */
+//   onSelect: PropTypes.func.isRequired,
+//   /**
+//    * The default value for the Select component.
+//    */
+//   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+// };
+
+// ReferenceSelect.defaultProps = {
+//   defaultValue: "",
+// };
+
+// export default ReferenceSelect;

package/core/lib/elements/basic/row/row.js

@@ -0,0 +1,16 @@
+/**
+ * 
+ * Component for antd Row
+ */
+
+import React from "react";
+
+import { Row as AntdRow } from 'antd';
+
+export default function Row({ children, gutter }) {
+    return (
+        <AntdRow gutter={gutter}>
+            {children}
+        </AntdRow>
+    )
+}

package/core/lib/elements/basic/select/select.js

@@ -0,0 +1,47 @@
+/**
+ * 
+ * Component for antd select
+ *
+ */
+
+import React, { useState, useEffect } from 'react';
+
+import { Select as AntdSelect} from 'antd';
+
+const { Option } = AntdSelect;
+
+/**
+ */
+
+/**
+ * Component for selecting head
+ *
+ * @param {*} param0
+ * @returns
+ */
+function Select({
+    options,
+
+    onSelect,
+    value, 
+
+    label = "label",
+    field = 'id',
+
+    ...componentProps
+}) {
+
+    return (
+        <div className="select-box" style={{ width: '150px' }}>
+            <AntdSelect style={{ width: '100%' }} onSelect={onSelect} value={value} {...componentProps}>
+                {options.map((option, key) => (
+                    <Option key={key} value={option.field}>
+                        {option[label]}
+                    </Option>
+                ))}
+            </AntdSelect>
+        </div>
+    );
+}
+
+export default (Select);

package/core/lib/elements/basic/select-box/readme.md

@@ -0,0 +1,53 @@
+## Usage
+
+Install the "react-select" library using the below code
+
+```sh
+Install the "react-select" library:
+```
+
+```jsx
+import React from "react";
+import SelectBox from "./select-box";
+
+<select>
+  <option value="option1">Option 1</option>
+  <option value="option2">Option 2</option>
+  <option value="option3">Option 3</option>
+</select>;
+```
+```sh
+import React, { useState, useEffect } from "react";
+
+const { Option } = Select;
+
+function SelectBox({
+  options,
+  onChange,
+  value,
+  label = "label",
+  field = "id",
+
+  ...componentProps
+}) {
+  return (
+    <div className="select-box" style={{ width: "150px" }}>
+      <Select
+        style={{ width: "100%" }}
+        onChange={onChange}
+        value={value}
+        {...componentProps}
+      >
+        {options.map((option, key) => (
+          <Option key={key} value={option[field]}>
+            {option[label]}
+          </Option>
+        ))}
+      </Select>
+    </div>
+  );
+}
+
+export default SelectBox;
+
+```

package/core/lib/elements/basic/select-box/select-box.js

@@ -0,0 +1,63 @@
+/**
+ *
+ * Select Box
+ */
+
+import React, { useState, useEffect } from "react";
+
+import { Select } from "antd";
+
+const { Option } = Select;
+
+import PropTypes from "prop-types";
+
+/**
+ */
+
+/**
+ * Component for selecting head
+ *
+ * @param {*} param0
+ * @returns
+ */
+function SelectBox({
+  options,
+  onChange,
+  value,
+  label = "label",
+  field = "id",
+
+  ...componentProps
+}) {
+  return (
+    <div className="select-box" style={{ width: "150px" }}>
+      <Select
+        style={{ width: "100%" }}
+        onChange={onChange}
+        value={value}
+        {...componentProps}
+      >
+        {options.map((option, key) => (
+          <Option key={key} value={option[field]}>
+            {option[label]}
+          </Option>
+        ))}
+      </Select>
+    </div>
+  );
+}
+
+SelectBox.propTypes = {
+  /** An array of objects representing the options for the select box. Each object in the array should have a label and a value property. */
+  options: PropTypes.array.isRequired,
+  /** A function that will be called whenever the value of the select box changes. The new value of the select box will be passed as an argument to this function. */
+  onChange: PropTypes.func.isRequired,
+  /** The current value of the select box. This value should correspond to the value property of one of the objects in the options array. */
+  value: PropTypes.string.isRequired,
+  /** A string representing the label for the select box. This will be displayed above the select box. */
+  label: PropTypes.string,
+  /** A string representing the name of the field in each object of the options array that should be used as the value of the select box. By default, this is set to "id". */
+  field: PropTypes.string,
+}
+
+export default SelectBox;

package/core/lib/elements/basic/skeleton/readme.md

@@ -0,0 +1,35 @@
+## Usage
+
+Use the `Skeleton` component to provide a visual placeholder for content that is being loaded asynchronously or has not yet been fetched from an API.
+
+```jsx
+import Skeleton from "./skeleton";
+
+<Skeleton />;
+```
+
+```sh
+import React, { useState, useEffect } from "react";
+import "./skeleton.scss";
+
+export default function Skeleton({
+  caption = "Simplifying your business | Soxo",
+}) {
+  return (
+    <div class="skeleton-card">
+      <h3 class="loading-animation-text">{caption}</h3>
+
+      <div class="skeleton"></div>
+
+      <div class="skeleton"></div>
+
+      <div class="skeleton"></div>
+
+      <div class="skeleton"></div>
+
+      <div class="skeleton"></div>
+    </div>
+  );
+}
+
+```

package/core/lib/elements/basic/skeleton/skeleton.js

@@ -0,0 +1,36 @@
+/**
+ * Skeleton Components 
+ *
+ */
+
+// Base Imports
+import React, { useState, useEffect } from "react";
+import "./skeleton.scss";
+import PropTypes from "prop-types";
+
+
+export default function Skeleton({
+  caption = "Simplifying your business | Soxo",
+}) {
+  return (
+    <div className="skeleton-card">
+      <h3 className="loading-animation-text">{caption}</h3>
+
+      <div className="skeleton"></div>
+
+      <div className="skeleton"></div>
+
+      <div className="skeleton"></div>
+
+      <div className="skeleton"></div>
+
+      <div className="skeleton"></div>
+    </div>
+  );
+}
+
+
+Skeleton.propTypes = {
+  /** "caption" is expected to be of type string. */
+  caption: PropTypes.string,
+};

package/core/lib/elements/basic/skeleton/skeleton.scss

@@ -0,0 +1,53 @@
+.skeleton-card {
+  background-color: #ffffff;
+  border-radius: 6px;
+  // box-shadow: 1px 0 8px 0 rgb(0 0 0 / 5%), 8px 8px 18px 0 rgb(0 0 0 / 5%);
+  margin: 20px auto;
+  /* max-width: 500px; */
+  overflow: hidden;
+  position: relative;
+  // width: 100%;
+}
+
+.skeleton {
+  background-color: #f2f2f2;
+  border-radius: 5px;
+  height: 20px;
+  margin: 20px 0;
+  width: 100%;
+  animation: loading 1s ease-in-out infinite;
+  transform-origin: 0% 50%;
+}
+
+.skeleton + .skeleton {
+  animation-delay: 0.5s;
+}
+
+.skeleton + .skeleton + .skeleton {
+  animation-delay: 0.3s;
+}
+
+.skeleton + .skeleton + .skeleton + .skeleton {
+  animation-delay: 0.6s;
+}
+
+.skeleton + .skeleton + .skeleton + .skeleton + .skeleton {
+  animation-delay: 0.5s;
+}
+
+@keyframes loading {
+  0% {
+    transform: translateX(-100%) skewX(-30deg);
+  }
+  100% {
+    transform: translateX(200%) skewX(30deg);
+  }
+}
+
+.loading-animation-text {
+  font-family: sans-serif;
+  margin: 10px;
+  color: #838383;
+  font-size: 16px;
+  font-weight: 100;
+}

package/core/lib/elements/basic/space/space.js

@@ -0,0 +1,13 @@
+/**
+ * Component for antd Sapce
+ */
+
+import React from 'react';
+
+import { Space as AntdSpace } from 'antd';
+
+export default function ({ children }) {
+    return (
+        <AntdSpace>{children}</AntdSpace>
+    )
+}

package/core/lib/elements/basic/switch/readme.md

@@ -0,0 +1,29 @@
+## Usage
+
+To use the switch component, you can simply include it in your JSX:
+
+```jsx
+import SwitchComponent from "./switch";
+import { Switch } from "antd";
+
+<Switch />;
+```
+
+```sh
+import React, { useState, useContext } from "react";
+import { Switch } from "antd";
+
+export default function SwitchComponent({ onChange, value }) {
+  return (
+    <>
+      <Switch
+        checked={value}
+        onChange={onChange}
+        // checked={ }
+        listType="picture-card"
+      />
+    </>
+  );
+}
+
+```