ui-soxo-bootstrap-core 2.4.24

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

@@ -0,0 +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;

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

@@ -0,0 +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>
+</>;
+```

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

@@ -0,0 +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;

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

@@ -0,0 +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;
+} // padding: 1rem;

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

@@ -0,0 +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>)
+}
+

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

@@ -0,0 +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>
+    )
+}

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

@@ -0,0 +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>
+    </>
+  );
+}
+```

package/core/lib/elements/basic/copy-to-clipboard/copy-to-clipboard.js

@@ -0,0 +1,62 @@
+/**
+ *
+ *
+ * @description Component for Copying the element
+ * @author Ashique
+ */
+
+import React, { useState, useEffect, useContext } from "react";
+
+import { Button, message } from "antd";
+
+import PropTypes from "prop-types";
+
+// import 'antd/dist/antd.css';
+
+
+/**
+ *
+ */
+export default function CopyToClipBoard({
+  caption = "Element ID",
+  id,
+  record,
+}) {
+  /**
+   * Copy to clipboard
+   *
+   * @param {*} step
+   */
+  function copyToClipBoard(id) {
+    console.log(record);
+
+    /* Copy the text inside the text field */
+    navigator.clipboard.writeText(id);
+
+    message.success(`${caption} copied to Clipboard`);
+  }
+
+  return (
+    <>
+      <Button
+        size={"small"}
+        onClick={() => {
+          copyToClipBoard(id);
+        }}
+      >
+        Copy
+      </Button>
+    </>
+    
+  );
+}
+
+CopyToClipBoard.propTypes = {
+
+  /** A string that represents the caption or label for the element ID being copied to clipboard.  */
+  caption: PropTypes.string,
+  /** A string that represents the element ID that should be copied to the clipboard. This prop is required. */
+  id: PropTypes.string.isRequired,
+  /** An object that contains any additional information or data related to the element being copied to the clipboard. This prop is optional. */
+  record: PropTypes.object,
+};

package/core/lib/elements/basic/country-phone-input/Readme.md

@@ -0,0 +1,98 @@
+A component that allows users to enter phone numbers with country codes.
+
+## Usage
+
+To use CountryPhoneInput, you need to import it in your React component and render it with the desired properties:
+
+```jsx
+import CountryPhoneInput from "./country-phone-input";
+
+<CountryPhoneInput
+  value={{ value: "", code: { countryCode: "", dialCode: "", name: "" } }}
+  onChange={(value) => console.log(value)}
+  disabled={false}
+  disableCountryCode={false}
+  required={false}
+/>;
+```
+
+```sh
+import React, { useState, useEffect, useRef } from "react";
+
+import PhoneInput from "react-phone-input-2";
+
+import "react-phone-input-2/lib/style.css";
+
+import "./phone-input.scss";
+
+export default function CountryPhoneInput({
+  value,
+  onChange,
+  disabled,
+  disableCountryCode,
+  required,
+}) {
+  let inputRef = useRef();
+
+  const [phone, setPhone] = useState();
+
+  useEffect(() => {
+    if (value && value.code && value.code.dialCode !== null) {
+      setPhone(value.code.dialCode + value.value);
+
+      setTimeout(() => {
+        let selectedCountry = null;
+
+        let selectedCode = null;
+
+        if (
+          inputRef.current &&
+          inputRef.current.state &&
+          inputRef.current.state.selectedCountry
+        ) {
+          selectedCountry = inputRef.current.state.selectedCountry;
+
+          selectedCode = {
+            countryCode: selectedCountry.iso2,
+            dialCode: selectedCountry.dialCode,
+            name: selectedCountry.name,
+          };
+        }
+
+        let updatedValue = {
+          value: value.code.dialCode + value.value,
+          code: selectedCode,
+        };
+
+        onChange(updatedValue);
+      }, 0);
+    }
+  }, []);
+
+  function handleInput(value, code) {
+    if (code.dialCode) {
+      value = value.substring(code.dialCode.length);
+    }
+    // To get country code with phone number in parent component
+    value = {
+      value,
+      code,
+    };
+    onChange(value);
+  }
+
+  return (
+    <div className="phone-input">
+      <PhoneInput
+        ref={inputRef}
+        country={disableCountryCode ? false : "in"}
+        value={phone}
+        onChange={handleInput}
+        inputProps={{ required: required }}
+        disabled={disabled}
+      />
+    </div>
+  );
+}
+
+```

package/core/lib/elements/basic/country-phone-input/country-phone-input.js

@@ -0,0 +1,107 @@
+/**
+ * Component used for Phone number input with country code
+ *
+ * @author Hasna
+ *
+ * Ensure to follow a minimal standard
+ */
+import React, { useState, useEffect, useRef } from 'react';
+
+import PhoneInput from 'react-phone-input-2';
+
+import 'react-phone-input-2/lib/style.css';
+
+import PropTypes from "prop-types";
+
+import './phone-input.scss';
+
+
+export default function CountryPhoneInput({ value, onChange, disabled, disableCountryCode, required, defaultCountryCode, onBlur }) {
+
+  let inputRef = useRef();
+
+  const [phone, setPhone] = useState();
+
+  useEffect(() => {
+    if (value && value.code && value.code.dialCode !== null) {
+      // To prepopulate phone number ,concat dialCode and phone number
+      setPhone(value.code.dialCode + value.value);
+
+      // In case of update , to identify the country code that is getting selected
+      // We are setting a timeout
+      setTimeout(() => {
+        // Using the reference , we get the internal state of the library component
+        let selectedCountry = null;
+
+        let selectedCode = null;
+
+        if (
+          inputRef.current &&
+          inputRef.current.state &&
+          inputRef.current.state.selectedCountry
+        ) {
+          selectedCountry = inputRef.current.state.selectedCountry;
+
+          // Once we get the selected country ,we format it to the form that is received for normal onChange
+          selectedCode = {
+            countryCode: selectedCountry.iso2,
+            dialCode: selectedCountry.dialCode,
+            name: selectedCountry.name,
+          };
+        }
+
+        // Below being the format expected , we trigger the onChange to manually update the form
+        let updatedValue = {
+          value: value.code.dialCode + value.value,
+          code: selectedCode,
+        };
+
+        onChange(updatedValue);
+      }, 0);
+    }
+  }, []);
+
+  /**
+   * To get value in parent component
+   * @param {*} value
+   */
+  function handleInput(value, code) {
+    if (code.dialCode) {
+      value = value.substring(code.dialCode.length);
+    }
+    // To get country code with phone number in parent component
+    value = {
+      value,
+      code,
+    };
+    onChange(value);
+  }
+
+  return (
+    <div className="phone-input">
+      <PhoneInput
+        ref={inputRef}
+        country={defaultCountryCode || 'in'}
+        // country={disableCountryCode ? false : 'in'}
+        value={phone}
+        onChange={handleInput}
+        inputProps={{ required: required }}
+        disabled={disabled}
+        onBlur={onBlur}
+      />
+    </div>
+  );
+}
+
+CountryPhoneInput.propTypes = {
+  /** A string representing the current value of the input. This prop is optional. */
+  value: PropTypes.string,
+  /** A function that will be called when the value of the input changes. This prop is required. */
+  onChange: PropTypes.func.isRequired,
+  /** A boolean indicating whether the input should be disabled or not. This prop is optional. */
+  disabled: PropTypes.bool,
+  /** A boolean indicating whether the country code portion of the input should be disabled or not. This prop is optional. */
+  disableCountryCode: PropTypes.bool,
+  /** A boolean indicating whether the input is required or not. This prop is optional. */
+  required: PropTypes.bool,
+};

package/core/lib/elements/basic/country-phone-input/phone-input.scss

@@ -0,0 +1,62 @@
+/* Default styles for larger screens (desktops/tablets) */
+.phone-input {
+    .react-tel-input {
+      .form-control {
+        width: 100%;
+      }
+    }
+  
+    /* Disabled state styling */
+    // .react-tel-input:disabled {
+    //   background-color: #f5f5f5;
+    // }
+  }
+  
+//   /* For tablets and smaller screens (max-width: 1024px) */
+//   @media (max-width: 1024px) {
+//     .phone-input {
+//       .react-tel-input {
+//         .form-control {
+//           width: 100%;
+//         }
+//       }
+  
+//       /* Disabled state for mobile/tablet */
+//     //   .react-tel-input:disabled {
+//     //     background-color: #f5f5f5;
+//     //   }
+//     }
+//   }
+  
+//   /* For smaller devices like mobile phones (max-width: 768px) */
+//   @media (max-width: 768px) {
+//     .phone-input {
+//       .react-tel-input {
+//         .form-control {
+//           width: 100%;
+//           font-size: 14px;  /* Adjust font size for smaller screens */
+//         }
+//       }
+  
+//     //   .react-tel-input:disabled {
+//     //     background-color: #f5f5f5;
+//     //   }
+//     }
+//   }
+  
+//   /* For very small mobile screens (max-width: 480px) */
+//   @media (max-width: 480px) {
+//     .phone-input {
+//       .react-tel-input {
+//         .form-control {
+//           width: 100%;
+//           font-size: 12px;  /* Even smaller font for very small screens */
+//         }
+//       }
+  
+//     //   .react-tel-input:disabled {
+//     //     background-color: #f5f5f5;
+//     //   }
+//     }
+//   }
+  

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

@@ -0,0 +1,33 @@
+/**
+ * @author Sameena Ammed
+ * This component is used as the custom date Picker 
+ * antd DatePicker is imported here
+ */
+import React from 'react';
+
+import { DatePicker as AntdDatePicker } from 'antd';
+
+// import 'antd/dist/antd.css';
+
+export default function DatePicker({
+          value,
+          children,
+          onChange = () => { },
+          format = 'DD/MM/YYYY',
+          disabledDates,
+          disabled
+
+}) {
+          return (
+                    <AntdDatePicker
+                              value={value}
+                              onChange={(values) => { onChange(values) }}
+                              format={format}
+                              disabledDate={disabledDates}
+                              disabled={disabled}
+
+                    >
+                              {children}
+                    </AntdDatePicker>
+          )
+}