ui-soxo-bootstrap-core 2.6.5 → 2.6.6

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

@@ -1,170 +1,170 @@
-import React, { useState, useEffect, useContext } from 'react';
-
-import { Button as ButtonElement } from 'antd';
-
-import { GlobalContext } from '../../../Store';
-
-import PropTypes from 'prop-types';
-
-// import 'antd/dist/antd.css';
-
-Button.propTypes = {
-  /** Size of the button */
-  size: PropTypes.oneOf(['small', 'middle', 'large']),
-
-  /** The caption or any icon that need to be under the button */
-  children: PropTypes.any,
-
-  /** Primary | Secondary */
-  type: PropTypes.oneOf(['primary', 'default', 'dashed', 'link', 'text']),
-
-  /** On click method */
-  onClick: PropTypes.func,
-
-  /** Control if the button is disabled */
-  disabled: PropTypes.bool,
-
-  /** Control if the button is loading */
-  loading: PropTypes.bool,
-
-  /** If you need to pass additional classname to the component */
-  className: PropTypes.string,
-
-  // You can pass antd icons to the component
-  icon: PropTypes.object,
-
-  // You can pass antd custome color to the component
-  customColor: PropTypes.string,
-
-  // You can pass antd styles to the component
-  style: PropTypes.object,
-};
-
-/**
- * Button element that is extending antd . So all its default behaviour is used
- * Refer antd @5.4.2
- *
- * @author Ashique Mohammed
- *
- */
-function Button({
-  size = 'middle',
-  children,
-  type = 'primary',
-  onClick = () => {},
-  disabled,
-  loading,
-
-  htmlType,
-  className = '',
-  icon,
-  customColor,
-  style = {},
-}) {
-  const { user, state } = useContext(GlobalContext);
-  // useEffect(() => {
-
-  //   // Force a re-render if necessary
-  // }, [state.theme.colors]);
-
-  // Define button styles based on the `type` prop
-  const getButtonStyles = () => {
-    const colors = state?.theme?.colors || {};
-
-    //  managing disable property styles
-    if (disabled) {
-      if (type === 'primary') {
-        return {
-          backgroundColor: colors.primaryButtonDisabledBg,
-          color: colors.primaryButtonDisabledText,
-          cursor: 'not-allowed',
-          opacity: 0.6,
-        };
-      } else if (type === 'default') {
-        return {
-          backgroundColor: colors.defaultButtonDisabledBg,
-          color: colors.defaultButtonDisabledText,
-          cursor: 'not-allowed',
-          opacity: 0.6,
-        };
-      } else if (type === 'dashed') {
-        return {
-          borderColor: colors.dashedButtonDisabledBorder,
-          color: colors.dashedButtonDisabledText,
-          cursor: 'not-allowed',
-          opacity: 0.6,
-        };
-      } else if (type === 'link' || type === 'text') {
-        return {
-          color: colors.linkButtonDisabledText,
-          cursor: 'not-allowed',
-          opacity: 0.6,
-        };
-      }
-    }
-
-    if (type === 'primary') {
-      return {
-        backgroundColor: colors.primaryButtonBg,
-        borderColor: 'transparent',
-        color: colors.primaryButtonText,
-      };
-    } else if (type === 'default') {
-      return {
-        backgroundColor: colors.defaultButtonBg,
-        // borderColor: colors.defaultButtonBorder,
-        color: colors.colorDefaultText,
-      };
-    } else if (type === 'dashed') {
-      return {
-        borderColor: colors.dashedButtonBorder,
-        color: colors.colorDashedText,
-      };
-    } else if (type === 'link' || type === 'text') {
-      return {
-        color: colors.linkButtonText,
-      };
-    }
-  };
-
-  return (
-    <>
-      {/* <AwesomeButton
-        type={type}
-
-        // type="primary"
-        onPress={onClick}
-        htmlType={htmlType}
-        loading={loading}
-
-      >
-
-        {children}
-
-        {/* Button */}
-
-      {/* </AwesomeButton> */}
-
-      <ButtonElement
-        type={type}
-        htmlType={htmlType}
-        loading={loading}
-        size={size}
-        className={`custom-button ${type} ${className}`}
-        disabled={disabled}
-        onClick={() => {
-          onClick();
-        }}
-        icon={icon}
-        style={{
-          ...getButtonStyles(),
-          ...style, // Allow additional inline styles
-        }}
-      >
-        {children}
-      </ButtonElement>
-    </>
-  );
-}
-
-export default Button;
+import React, { useState, useEffect, useContext } from 'react';
+
+import { Button as ButtonElement } from 'antd';
+
+import { GlobalContext } from '../../../Store';
+
+import PropTypes from 'prop-types';
+
+// import 'antd/dist/antd.css';
+
+Button.propTypes = {
+  /** Size of the button */
+  size: PropTypes.oneOf(['small', 'middle', 'large']),
+
+  /** The caption or any icon that need to be under the button */
+  children: PropTypes.any,
+
+  /** Primary | Secondary */
+  type: PropTypes.oneOf(['primary', 'default', 'dashed', 'link', 'text']),
+
+  /** On click method */
+  onClick: PropTypes.func,
+
+  /** Control if the button is disabled */
+  disabled: PropTypes.bool,
+
+  /** Control if the button is loading */
+  loading: PropTypes.bool,
+
+  /** If you need to pass additional classname to the component */
+  className: PropTypes.string,
+
+  // You can pass antd icons to the component
+  icon: PropTypes.object,
+
+  // You can pass antd custome color to the component
+  customColor: PropTypes.string,
+
+  // You can pass antd styles to the component
+  style: PropTypes.object,
+};
+
+/**
+ * Button element that is extending antd . So all its default behaviour is used
+ * Refer antd @5.4.2
+ *
+ * @author Ashique Mohammed
+ *
+ */
+function Button({
+  size = 'middle',
+  children,
+  type = 'primary',
+  onClick = () => {},
+  disabled,
+  loading,
+
+  htmlType,
+  className = '',
+  icon,
+  customColor,
+  style = {},
+}) {
+  const { user, state } = useContext(GlobalContext);
+  // useEffect(() => {
+
+  //   // Force a re-render if necessary
+  // }, [state.theme.colors]);
+
+  // Define button styles based on the `type` prop
+  const getButtonStyles = () => {
+    const colors = state?.theme?.colors || {};
+
+    //  managing disable property styles
+    if (disabled) {
+      if (type === 'primary') {
+        return {
+          backgroundColor: colors.primaryButtonDisabledBg,
+          color: colors.primaryButtonDisabledText,
+          cursor: 'not-allowed',
+          opacity: 0.6,
+        };
+      } else if (type === 'default') {
+        return {
+          backgroundColor: colors.defaultButtonDisabledBg,
+          color: colors.defaultButtonDisabledText,
+          cursor: 'not-allowed',
+          opacity: 0.6,
+        };
+      } else if (type === 'dashed') {
+        return {
+          borderColor: colors.dashedButtonDisabledBorder,
+          color: colors.dashedButtonDisabledText,
+          cursor: 'not-allowed',
+          opacity: 0.6,
+        };
+      } else if (type === 'link' || type === 'text') {
+        return {
+          color: colors.linkButtonDisabledText,
+          cursor: 'not-allowed',
+          opacity: 0.6,
+        };
+      }
+    }
+
+    if (type === 'primary') {
+      return {
+        backgroundColor: colors.primaryButtonBg,
+        borderColor: 'transparent',
+        color: colors.primaryButtonText,
+      };
+    } else if (type === 'default') {
+      return {
+        backgroundColor: colors.defaultButtonBg,
+        // borderColor: colors.defaultButtonBorder,
+        color: colors.colorDefaultText,
+      };
+    } else if (type === 'dashed') {
+      return {
+        borderColor: colors.dashedButtonBorder,
+        color: colors.colorDashedText,
+      };
+    } else if (type === 'link' || type === 'text') {
+      return {
+        color: colors.linkButtonText,
+      };
+    }
+  };
+
+  return (
+    <>
+      {/* <AwesomeButton
+        type={type}
+
+        // type="primary"
+        onPress={onClick}
+        htmlType={htmlType}
+        loading={loading}
+
+      >
+
+        {children}
+
+        {/* Button */}
+
+      {/* </AwesomeButton> */}
+
+      <ButtonElement
+        type={type}
+        htmlType={htmlType}
+        loading={loading}
+        size={size}
+        className={`custom-button ${type} ${className}`}
+        disabled={disabled}
+        onClick={() => {
+          onClick();
+        }}
+        icon={icon}
+        style={{
+          ...getButtonStyles(),
+          ...style, // Allow additional inline styles
+        }}
+      >
+        {children}
+      </ButtonElement>
+    </>
+  );
+}
+
+export default Button;

package/core/lib/elements/basic/card/Card.md

@@ -1,15 +1,15 @@
-### Usage
-
-To use the card component in your React application, first import it:
-
-```jsx
-import Card from "./card";
-<>
-  <Card title="Card 1">
-    <p>This is my first card.</p>
-  </Card><br></br>
-  <Card title="Card 2">
-    <p>This is my second card.</p>
-  </Card>
-</>;
-```
+### Usage
+
+To use the card component in your React application, first import it:
+
+```jsx
+import Card from "./card";
+<>
+  <Card title="Card 1">
+    <p>This is my first card.</p>
+  </Card><br></br>
+  <Card title="Card 2">
+    <p>This is my second card.</p>
+  </Card>
+</>;
+```

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

@@ -1,40 +1,40 @@
-import React, { useContext, useEffect } from 'react';
-import { Card as AntdCard } from 'antd'; // Importing Ant Design's Card
-import { GlobalContext } from '../../../Store';
-import PropTypes from 'prop-types';
-import './card.scss';
-
-function Card({ title, content, image, children, className = '' }) {
-  const { state } = useContext(GlobalContext);
-
-  useEffect(() => {
-    // Reacting to theme changes
-  }, [state.theme.colors]);
-
-  return (
-    <AntdCard
-      title={title}
-      cover={image && <img src={image} alt={title} />}
-      style={{
-        background: state.theme.colors.colorBgContainer,
-        borderRadius: state.theme.colors.borderRadius,
-      }}
-      className={className || ''} // Apply className only if it's passed
-    >
-      {content || children}
-    </AntdCard>
-  );
-}
-
-Card.propTypes = {
-  /** Title of the card */
-  title: PropTypes.string.isRequired,
-  /** Content of the card */
-  content: PropTypes.node,
-  /** Image URL */
-  image: PropTypes.string,
-  /** Children (alternative to content) */
-  children: PropTypes.node,
-};
-
-export default Card;
+import React, { useContext, useEffect } from 'react';
+import { Card as AntdCard } from 'antd'; // Importing Ant Design's Card
+import { GlobalContext } from '../../../Store';
+import PropTypes from 'prop-types';
+import './card.scss';
+
+function Card({ title, content, image, children, className = '' }) {
+  const { state } = useContext(GlobalContext);
+
+  useEffect(() => {
+    // Reacting to theme changes
+  }, [state.theme.colors]);
+
+  return (
+    <AntdCard
+      title={title}
+      cover={image && <img src={image} alt={title} />}
+      style={{
+        background: state.theme.colors.colorBgContainer,
+        borderRadius: state.theme.colors.borderRadius,
+      }}
+      className={className || ''} // Apply className only if it's passed
+    >
+      {content || children}
+    </AntdCard>
+  );
+}
+
+Card.propTypes = {
+  /** Title of the card */
+  title: PropTypes.string.isRequired,
+  /** Content of the card */
+  content: PropTypes.node,
+  /** Image URL */
+  image: PropTypes.string,
+  /** Children (alternative to content) */
+  children: PropTypes.node,
+};
+
+export default Card;

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

@@ -1,14 +1,14 @@
-.card {
-  border: 1px solid #efefef;
-  border-radius: 4px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
- 
- 
-}
-
-.card-title {
-  margin: 0 0 1rem;
-}
-.ant-card-body {
-  padding: 12px;
+.card {
+  border: 1px solid #efefef;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+ 
+ 
+}
+
+.card-title {
+  margin: 0 0 1rem;
+}
+.ant-card-body {
+  padding: 12px;
 } // padding: 1rem;

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

@@ -1,23 +1,23 @@
-
-/**
- * @author Sameena
- * Component for antd Checkbox
- */
-import React from "react";
-
-import { Checkbox as AntdCheckbox} from 'antd';
-
-export default function Checkbox({ value,onChange }) {
-
-    return (<div>
-        <>
-            <AntdCheckbox
-               value={value}
-               onChange={onChange}
-            />
-
-        </>
-
-    </div>)
-}
-
+
+/**
+ * @author Sameena
+ * Component for antd Checkbox
+ */
+import React from "react";
+
+import { Checkbox as AntdCheckbox} from 'antd';
+
+export default function Checkbox({ value,onChange }) {
+
+    return (<div>
+        <>
+            <AntdCheckbox
+               value={value}
+               onChange={onChange}
+            />
+
+        </>
+
+    </div>)
+}
+

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

@@ -1,16 +1,16 @@
-/**
- *  @author Sameena
- * Component for antd Col
- */
-
-import React from "react";
-
-import { Col as AntdCol } from 'antd';
-
-export default function Col({ children, span }) {
-    return (
-        <AntdCol span={span}>
-            {children}
-        </AntdCol>
-    )
+/**
+ *  @author Sameena
+ * Component for antd Col
+ */
+
+import React from "react";
+
+import { Col as AntdCol } from 'antd';
+
+export default function Col({ children, span }) {
+    return (
+        <AntdCol span={span}>
+            {children}
+        </AntdCol>
+    )
 }

package/core/lib/elements/basic/copy-to-clipboard/Readme.md

@@ -1,40 +1,40 @@
-## Usage
-
-To use this component, simply click on the button below and paste it into your project:
-
-```jsx
-import Button from "./copy-to-clipboard";
-
-<Button>Copy</Button>;
-```
-
-```sh
-import React, { useState, useEffect, useContext } from "react";
-
-import { Button, message } from "antd";
-
-export default function CopyToClipBoard({
-  caption = "Element ID",
-  id,
-  record,
-}) { 
-  function copyToClipBoard(id) {
-    console.log(record);
-    navigator.clipboard.writeText(id);
-    message.success(`${caption} copied to Clipboard`);
-  }
-
-  return (
-    <>
-      <Button
-        size={"small"}
-        onClick={() => {
-          copyToClipBoard(id);
-        }}
-      >
-        Copy
-      </Button>
-    </>
-  );
-}
-```
+## Usage
+
+To use this component, simply click on the button below and paste it into your project:
+
+```jsx
+import Button from "./copy-to-clipboard";
+
+<Button>Copy</Button>;
+```
+
+```sh
+import React, { useState, useEffect, useContext } from "react";
+
+import { Button, message } from "antd";
+
+export default function CopyToClipBoard({
+  caption = "Element ID",
+  id,
+  record,
+}) { 
+  function copyToClipBoard(id) {
+    console.log(record);
+    navigator.clipboard.writeText(id);
+    message.success(`${caption} copied to Clipboard`);
+  }
+
+  return (
+    <>
+      <Button
+        size={"small"}
+        onClick={() => {
+          copyToClipBoard(id);
+        }}
+      >
+        Copy
+      </Button>
+    </>
+  );
+}
+```