ui-soxo-bootstrap-core 2.6.5 → 2.6.6

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

@@ -1,16 +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>
-    )
+/**
+ * 
+ * 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

@@ -1,47 +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>
-    );
-}
-
+/**
+ * 
+ * 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

@@ -1,53 +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;
-
+## 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

@@ -1,63 +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;
+/**
+ *
+ * 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

@@ -1,35 +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>
-  );
-}
-
-```
+## 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

@@ -1,36 +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,
+/**
+ * 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

@@ -1,53 +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;
-}
+.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

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