ui-soxo-bootstrap-core 2.4.24

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

@@ -0,0 +1,58 @@
+/**
+ * Component for antd switch
+ */
+
+import React, { useState, useContext, useEffect } from 'react';
+import { GlobalContext } from '../../../Store';
+
+import { Switch as AntdSwitch } from 'antd';
+
+import PropTypes from 'prop-types';
+
+export default function Switch({ onChange, checked }) {
+  const { state } = useContext(GlobalContext);
+
+  useEffect(() => {
+    // Reacting to theme changes
+  }, [state.theme.colors]);
+
+  return (
+    <div>
+      <>
+        <AntdSwitch
+          checked={checked}
+          onChange={onChange}
+          // checked={ }
+          style={{
+            backgroundColor: checked ? state.theme.colors.primaryButtonBg : state.theme.colors.primaryButtonDisabledBg, // Use disabled color when unchecked
+            borderColor: checked ? state.theme.colors.primaryButtonBg : state.theme.colors.primaryButtonDisabledBg,
+          }}
+          listType="picture-card"
+        />
+      </>
+    </div>
+  );
+}
+
+Switch.propTypes = {
+  /** Callback function that is called when the switch is clicked or toggled. */
+  onChange: PropTypes.func,
+  /** A boolean value indicating whether the switch is checked or not. Use this prop to control the component's state externally. */
+  checked: PropTypes.bool,
+  /** A boolean value indicating whether the switch is initially checked or not. */
+  defaultChecked: PropTypes.bool,
+  /** A boolean value indicating whether the switch is disabled or not. */
+  disabled: PropTypes.bool,
+  /** A string that represents the ID of the switch component. */
+  id: PropTypes.string,
+  /** A string that represents the size of the switch component. Can be 'small', 'default', or 'large'. */
+  size: PropTypes.oneOf(['small', 'default', 'large']),
+  /** The color of the switch when it is turned on. */
+  checkedChildren: PropTypes.node,
+  /** The color of the switch when it is turned off. */
+  unCheckedChildren: PropTypes.node,
+  /** A custom class name for the switch component. */
+  className: PropTypes.string,
+  /** A custom style object for the switch component. */
+  style: PropTypes.object,
+};

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

@@ -0,0 +1,15 @@
+/**
+ *  @author Sameena
+ * Coponent for ant Tab
+ */
+
+import { Tabs } from "antd";
+import TabPane from 'rc-tabs/lib/TabPanelList/TabPane'
+const TabsType = 'line' | 'card' | 'editable-card';
+const TabsPosition = 'top' | 'right' | 'bottom' | 'left';
+const Tab = Object.assign(Tabs, {
+          TabPane,
+          TabsType,
+          TabsPosition
+})
+export default Tab

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

@@ -0,0 +1,9 @@
+## Usage
+
+Here is how we can simply add a table.
+
+```jsx
+import Table from "./table";
+
+<Table />;
+```

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

@@ -0,0 +1,100 @@
+import React, { useContext, useEffect } from 'react';
+import { Table } from 'antd';
+import PropTypes from 'prop-types';
+import { GlobalContext } from '../../../Store';
+
+const TableComponent = ({ columns, dataSource, loading, fixed, scroll, summary, pagination, title, onChange }) => {
+  const { state } = useContext(GlobalContext);
+
+  useEffect(() => {}, [state.theme.colors]);
+
+  // Header styling
+  const headerStyle = {
+    backgroundColor: state.theme.colors.tableHeaderBg,
+    color: state.theme.colors.tableHeaderText,
+    fontWeight: 'bold',
+    fontWeight: 600,
+    fontSize: 12,
+    lineHeight: '16px',
+  };
+
+  // Row styling (alternating colors with fallback)
+  const getRowStyle = (index) => {
+    const evenColor = state.theme.colors.tableRowEven;
+    const oddColor = state.theme.colors.tableRowOdd;
+    const textColor = state.theme.colors.tableText;
+
+    /* `return { backgroundColor: index % 2 === 0 ? evenColor : oddColor, color:
+  textColor };` is defining a function called `getRowStyle` that determines the styling for rows in
+  a table component based on the index of the row. */
+    return {
+      backgroundColor: index % 2 === 0 ? evenColor : oddColor,
+      color: textColor,
+    };
+  };
+  columns.map((col) => ({
+    ...col,
+    onHeaderCell: () => ({
+      style: {
+        ...headerStyle,
+        backgroundColor: state.theme.colors.tableHeaderBg, // Ensure background color for fixed columns
+      },
+    }),
+    onCell: () => ({
+      style: {
+        backgroundColor: state.theme.colors.tableRowEven, // Ensuring row colors for fixed columns
+      },
+    }),
+  }));
+
+  // Apply fixed property to the columns you need
+  const updatedColumns = columns.map((col) => ({
+    ...col,
+    onHeaderCell: () => ({
+      style: headerStyle,
+    }),
+    fixed: col.fixed || null, // Apply fixed property if it's set in the column definition
+  }));
+
+  return (
+    <Table
+      title={() =>
+        // <div style={{ fontWeight: 'bold', fontSize: 16, padding: '8px 16px' }}>
+        title ? title : ''
+        // </div>
+      }
+      //   columns={updatedColumns}
+      scroll={scroll}
+      dataSource={dataSource}
+      loading={loading}
+      bordered
+      fixed={fixed}
+      pagination={pagination}
+      onChange={onChange}
+      rowClassName={(record, index) => (index % 2 === 0 ? 'even-row' : 'odd-row')}
+      onRow={(record, index) => ({
+        style: getRowStyle(index),
+      })}
+      // Manually apply styles to fixed columns
+      columns={updatedColumns.map((col) => ({
+        ...col,
+        onCell: (record, rowIndex) => ({
+          style: getRowStyle(rowIndex), // Apply row style to individual cells in fixed columns
+        }),
+      }))}
+      summary={summary}
+    />
+  );
+};
+
+TableComponent.propTypes = {
+  columns: PropTypes.array.isRequired,
+  data: PropTypes.array.isRequired,
+  loading: PropTypes.bool,
+};
+
+TableComponent.defaultProps = {
+  loading: false,
+};
+
+export default TableComponent;

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

@@ -0,0 +1,63 @@
+/**
+ * Component for antd Tag
+ */
+import React, { useContext, useEffect } from 'react';
+import { Tag as AntdTag } from 'antd';
+import { GlobalContext } from '../../../Store';
+import './tag.scss';
+
+/**
+ * Tag Wrapper Component
+ *
+ * @param {*} param0
+ * @returns
+ */
+export default function Tag({ color, children }) {
+  const { state } = useContext(GlobalContext);
+
+  useEffect(() => {
+    // Force a re-render if necessary
+  }, [state.theme.colors]);
+
+  // Extract theme colors from the global state
+
+  // Define a mapping for the color types and their respective theme colors
+  const statusColorMap = {
+    orange: state.theme.colors.tagOrange,
+    success: state.theme.colors.tagSuccess,
+    magenta: state.theme.colors.tagMagenta,
+    blue: state.theme.colors.tagBlue,
+    green: state.theme.colors.tagGreen,
+  };
+
+  // Define a mapping for the corresponding text colors
+  const textColorMap = {
+    orange: state.theme.colors.textOrange,
+    success: state.theme.colors.textSuccess,
+    magenta: state.theme.colors.textMagenta,
+    blue: state.theme.colors.textBlue,
+    green: state.theme.colors.textGreen,
+  };
+
+  const borderColorMap = {
+    orange: state.theme.colors.borderOrange,
+    success: state.theme.colors.borderSuccess,
+    magenta: state.theme.colors.borderMagenta,
+    blue: state.theme.colors.borderBlue,
+    green: state.theme.colors.borderGreen,
+  };
+
+  // Get the color from the theme or fallback if not found
+  const tagBackgroundColor = statusColorMap[color];
+  const tagFontColor = textColorMap[color];
+  // const tagBorderColor = borderColorMap[color];
+
+  return (
+    <AntdTag color={tagBackgroundColor} 
+    style={{ color: tagFontColor, 
+    // border: `1px solid ${tagBorderColor}` 
+    }}>
+      {children}
+    </AntdTag>
+  );
+}

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

@@ -0,0 +1,3 @@
+// .ant-tag {
+//     color: black !important;
+//   }

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

@@ -0,0 +1,14 @@
+/**
+ *  @author Sameena
+ * Component for antd Tiemline
+ */
+
+import Timeline from 'antd/lib/timeline/Timeline';
+import TimelineItem from 'antd/lib/timeline/TimelineItem';
+
+const TimeLine = Object.assign(Timeline, {
+  
+  TimelineItem
+});
+
+export default TimeLine;

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

@@ -0,0 +1,20 @@
+## Usage
+
+The `Title` component is a simple component that renders a heading element with some text. It accepts a `text` prop that specifies the text to be rendered in the heading. Here is how to use it.
+
+```jsx
+import Title from "./title";
+
+<Title level={2} className="my-title">
+  Hello World
+</Title>;
+```
+
+```sh
+import React from "react";
+import "./title.scss";
+
+export default function Title({ children, level = 4, className }) {
+  return <h3 className={`${className} size-${level}`}>{children}</h3>;
+
+```

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

@@ -0,0 +1,38 @@
+import React from "react";
+
+import "./title.scss";
+
+import PropTypes from "prop-types";
+
+export default function Title({ children, level = 4, className }) {
+  return <h3 className={`${className} size-${level}`}>{children}</h3>;
+}
+
+Title.propTypes = {
+   /** The content of the title. Can be a string or any valid React node.*/
+  children: PropTypes.node.isRequired,
+
+   /** The level of the title, which determines the size and weight of the text. Can be a number from 1 to 5.*/
+  level: PropTypes.oneOf([1, 2, 3, 4, 5]),
+
+   /** A custom class name for the title component.*/
+  className: PropTypes.string,
+
+   /** The color of the title text. Can be a CSS color value or a function that returns a CSS color value.*/
+  color: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+
+   /** The font family used for the title. Can be a CSS font stack or a specific font name.*/
+  fontFamily: PropTypes.string,
+
+   /** The weight of the title text. Can be a number between 100 and 900 in increments of 100.*/
+  fontWeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+   /** The size of the title text. Can be a CSS size value or a number representing the font size in pixels.*/
+  fontSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+   /** The line height of the title text. Can be a number or a string representing a unitless value or a CSS size value.*/
+  lineHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+   /** The letter spacing of the title text. Can be a number representing the spacing in pixels, or a string representing a CSS size value.*/
+  letterSpacing: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};

package/core/lib/elements/basic/user-search/user-search.js

@@ -0,0 +1,192 @@
+/***
+ *
+ *
+ * @description
+ * @author Jinisha kappil
+ */
+
+/**
+ *
+ * Generic componet used for user search
+ */
+
+import React, { useState, useEffect } from "react";
+
+import {
+  Input,
+  Modal,
+  Button,
+  Table,
+  Select,
+  Form,
+  Row,
+  Col,
+  Typography,
+  Skeleton,
+} from "antd";
+
+import { ApiUtils } from "../../..";
+
+
+
+
+const { Search } = Input;
+
+const { Title } = Typography;
+
+/**
+ * This  Component  is used for Common  Search . Is Based On criteria and Search By its comes from model  .
+ * In this componet open a model and and select search aby and criteria after that it load corresponding results 
+ *
+ * @param {*} param0
+ * @returns
+ */
+function UserSearch({ model }) {
+
+  let config = model.searchConfig;
+
+  let [result, setResult] = useState([]);
+
+  let [searchby, setSearchBy] = useState(config.searchBy[0].field);
+
+  let [criteria, setCriteria] = useState([]);
+
+  const [visible, setVisible] = useState(false);
+
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+  }, []);
+
+
+  /**
+   *    Is used to Load search heads
+   * @param {*} event
+   * @returns
+   */
+  async function loadSearch(event) {
+
+    setResult([]);
+
+    if (model.searchConfig.url) {
+
+      setLoading(true);
+
+      return await ApiUtils.get({
+
+        url: model.searchConfig.url + "?" + searchby + "=" + event.target.value,
+
+      }).then((result) => {
+
+        setResult(result.result);
+
+        setLoading(false);
+      });
+    }
+  }
+  return (
+    <div className="head-selector">
+      <Button
+        className="billing"
+        onClick={() => {
+          setVisible(true);
+        }}
+        type="secondary"
+        shape="round"
+        // size="small"
+        color="green"
+      >
+        Search{" "}
+      </Button>
+
+      <Modal
+        destroyOnClose={true}
+        visible={visible}
+        // title='Advance Search'
+        footer={null}
+        className=""
+        onCancel={() => {
+          setVisible(false);
+          setResult(null);
+        }}
+        width={"80%"}
+        maskClosable={false}
+      >
+        <div>
+          <Title level={4}>Advance Search</Title>
+        </div>
+        <Form>
+          <div className="card">
+            <Row gutter={12}>
+              {/** Search Section Start */}
+              <Col xs={24} md={12} xl={8}>
+                <h3>SEARCH </h3>
+
+                <Form.Item>
+                  <Search
+                    placeholder="Enter Search Value"
+                    // allowClear
+                    onChange={loadSearch}
+                  />
+                </Form.Item>
+              </Col>
+              {/** Search section end  */}
+              {/** Search  By Section Start  */}
+              <Col xs={24} md={12} xl={7}>
+                <h3>SEARCH BY</h3>
+                <Form.Item>
+                  <Select
+                    defaultValue="Fist Name"
+                    //   style={{ width: "99%" }}
+                    onChange={(i) => {
+                      setSearchBy(i);
+                    }}
+                  >
+                    {config.searchBy.map((option, key) => (
+                      <Option value={option.field}>{option.caption}</Option>
+                    ))}
+                  </Select>
+                </Form.Item>
+              </Col>
+              {/** Search B Section end  */}
+
+              {/** Criteria Section  starts */}
+              <Col xs={3} md={6} xl={6}>
+                <h3>CRITERIA</h3>
+
+                <Form.Item>
+                  <Select
+                    defaultValue="Start With"
+                    //   style={{ width: "99%" }}
+                    onChange={(i) => {
+                      setCriteria(i);
+                    }}
+                  >
+                    {config.criteria.map((option, key) => (
+                      <Option value={option.field}>{option.caption}</Option>
+                    ))}
+                  </Select>
+                </Form.Item>
+              </Col>
+
+              {/** Criteria section End */}
+            </Row>
+          </div>
+
+          <h2 className="size-hint">
+            {result ? result.length : 0} Matches Found For Your Search .
+          </h2>
+          {loading ? (
+            <Skeleton />
+          ) : (
+            <Table columns={config.columns} dataSource={result}></Table>
+          )}
+
+          {/* </Row> */}
+        </Form>
+      </Modal>
+    </div>
+  );
+}
+
+export default UserSearch;

package/core/lib/elements/complex/barcode/barcode.js

@@ -0,0 +1,27 @@
+
+/**
+ * Barcode Component
+ */
+
+
+import React from 'react';
+
+import Barcode from 'react-barcode';
+
+
+/**
+ * Use `Card` for Card you need to keep.
+ */
+export default function BarcodeElement({
+    options,
+    value,
+    className,
+}) {
+
+    // console.log(options);
+
+    return <div className={`${className}`}>
+
+        <Barcode {...options} value={value} />
+    </div>;
+}