ui-soxo-bootstrap-core 2.6.40-dev.1 → 2.6.40-dev.11

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

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

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

@@ -1,68 +1,68 @@
-/**
- * Component for antd switch
- */
-import React, { useContext } from 'react';
-import { Switch as AntdSwitch } from 'antd';
-import { GlobalContext } from '../../../Store';
-import PropTypes from 'prop-types';
-
-export default function Switch({
-  checked,
-  defaultChecked,
-  onChange,
-  disabled,
-  id,
-  size,
-  checkedChildren,
-  unCheckedChildren,
-  className,
-  style,
-}) {
-  const { state } = useContext(GlobalContext);
-
-  return (
-    <AntdSwitch
-      id={id}
-      checked={checked}
-      defaultChecked={defaultChecked}
-      onChange={onChange}
-      disabled={disabled}
-      size={size}
-      checkedChildren={checkedChildren}
-      unCheckedChildren={unCheckedChildren}
-      className={className}
-      style={{
-        backgroundColor: checked
-          ? state.theme.colors.primaryButtonBg
-          : state.theme.colors.primaryButtonDisabledBg,
-        borderColor: checked
-          ? state.theme.colors.primaryButtonBg
-          : state.theme.colors.primaryButtonDisabledBg,
-        ...style,
-      }}
-    />
-  );
-}
-
-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,
+/**
+ * Component for antd switch
+ */
+import React, { useContext } from 'react';
+import { Switch as AntdSwitch } from 'antd';
+import { GlobalContext } from '../../../Store';
+import PropTypes from 'prop-types';
+
+export default function Switch({
+  checked,
+  defaultChecked,
+  onChange,
+  disabled,
+  id,
+  size,
+  checkedChildren,
+  unCheckedChildren,
+  className,
+  style,
+}) {
+  const { state } = useContext(GlobalContext);
+
+  return (
+    <AntdSwitch
+      id={id}
+      checked={checked}
+      defaultChecked={defaultChecked}
+      onChange={onChange}
+      disabled={disabled}
+      size={size}
+      checkedChildren={checkedChildren}
+      unCheckedChildren={unCheckedChildren}
+      className={className}
+      style={{
+        backgroundColor: checked
+          ? state.theme.colors.primaryButtonBg
+          : state.theme.colors.primaryButtonDisabledBg,
+        borderColor: checked
+          ? state.theme.colors.primaryButtonBg
+          : state.theme.colors.primaryButtonDisabledBg,
+        ...style,
+      }}
+    />
+  );
+}
+
+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

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

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

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

@@ -1,95 +1,95 @@
-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={title ? () => title : undefined}
-      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;
+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={title ? () => title : undefined}
+      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

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

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

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

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

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