react-frontend-common-components 0.0.83 → 0.0.85

package/src/components/app-sidebar/app-sidebar.tsx

@@ -1,87 +1,86 @@
-import React from "react";
-import { Layout, Menu } from "antd";
-import "./app-sidebar.css";
-
-const { Sider } = Layout;
-
-interface SidebarProps {
-  links: {
-    onClick?: () => void;
-    label: string;
-    path: string;
-    icon: React.ReactNode;
-    activeIcon?: React.ReactNode;
-    tag?: React.ReactNode;
-  }[];
-  sideBarHead?: React.ReactNode;
-  footerLinks?: {
-    label: string;
-    path: string;
-    icon: React.ReactNode;
-    activeIcon?: React.ReactNode;
-  }[];
-  className?: string;
-  activeLink?: string;
-}
-
-const Sidebar = ({
-  links,
-  sideBarHead,
-  footerLinks,
-  className,
-  activeLink,
-}: SidebarProps) => {
-  const handleNavigation = (path: string) => {
-    if (path) {
-      window.location.href = path;
-    }
-  };
-
-  const handleClick = (path: string, onClick?: () => void) => {
-    if (onClick) {
-      onClick();
-    } else {
-      handleNavigation(path);
-    }
-  };
-
-  const menuItems = links.map((link) => ({
-    key: link.path || link.label,
-
-    icon:
-      link.path === activeLink && link.activeIcon ? link.activeIcon : link.icon,
-    className: link.path === activeLink ? "active" : "",
-    label: (
-      <span onClick={() => handleClick(link.path, link.onClick)}>
-        {link.label}
-        {link.tag && <span className={"tag"}>{link.tag}</span>}
-      </span>
-    ),
-  }));
-
-  const footerMenuItems = footerLinks?.map((link) => ({
-    key: link.path,
-    icon:
-      link.path === activeLink && link.activeIcon ? link.activeIcon : link.icon,
-    className: link.path === activeLink ? "active" : "",
-    label: (
-      <span onClick={() => handleNavigation(link.path)}>{link.label}</span>
-    ),
-  }));
-
-  return (
-    <div className={`sideBar ${className}`}>
-      <Sider className={"sider"}>
-        <div className={"sideBarHead"}>{sideBarHead}</div>
-        <Menu mode="inline" className={"menu"} items={menuItems} />
-        {footerLinks && (
-          <div className={"footer"}>
-            <Menu mode="inline" items={footerMenuItems} />
-          </div>
-        )}
-      </Sider>
-    </div>
-  );
-};
-
-export default Sidebar;
+import React from "react";
+import { Layout, Menu } from "antd";
+import "./app-sidebar.css";
+
+const { Sider } = Layout;
+
+interface SidebarProps {
+  links: {
+    onClick?: () => void;
+    label: string;
+    path: string;
+    icon: React.ReactNode;
+    activeIcon?: React.ReactNode;
+    tag?: React.ReactNode;
+  }[];
+  sideBarHead?: React.ReactNode;
+  footerLinks?: {
+    label: string;
+    path: string;
+    icon: React.ReactNode;
+    activeIcon?: React.ReactNode;
+  }[];
+  className?: string;
+  activeLink?: string;
+}
+
+const Sidebar = ({
+  links,
+  sideBarHead,
+  footerLinks,
+  className,
+  activeLink,
+}: SidebarProps) => {
+  const handleNavigation = (path: string) => {
+    if (path) {
+      window.location.href = path;
+    }
+  };
+
+  const handleClick = (path: string, onClick?: () => void) => {
+    if (onClick) {
+      onClick();
+    } else {
+      handleNavigation(path);
+    }
+  };
+
+  const menuItems = links.map((link) => ({
+    key: link.path || link.label,
+    icon:
+      link.path === activeLink && link.activeIcon ? link.activeIcon : link.icon,
+    className: link.path === activeLink ? "active" : "",
+    label: (
+      <span onClick={() => handleClick(link.path, link.onClick)}>
+        <span>{link.label}</span>
+        {link.tag && <span className={"tag"}>{link.tag}</span>}
+      </span>
+    ),
+  }));
+
+  const footerMenuItems = footerLinks?.map((link) => ({
+    key: link.path,
+    icon:
+      link.path === activeLink && link.activeIcon ? link.activeIcon : link.icon,
+    className: link.path === activeLink ? "active" : "",
+    label: (
+      <span onClick={() => handleNavigation(link.path)}>{link.label}</span>
+    ),
+  }));
+
+  return (
+    <div className={`sideBar ${className}`}>
+      <Sider className={"sider"}>
+        <div className={"sideBarHead"}>{sideBarHead}</div>
+        <Menu mode="inline" className={"menu"} items={menuItems} />
+        {footerLinks && (
+          <div className={"footer"}>
+            <Menu mode="inline" items={footerMenuItems} />
+          </div>
+        )}
+      </Sider>
+    </div>
+  );
+};
+
+export default Sidebar;

package/src/components/app-tab/app-tab.css

@@ -1,22 +1,22 @@
-.appTab {
-  .tab {
-    .ant-tabs-nav {
-      &::before {
-        border: unset !important;
-      }
-      .ant-tabs-nav-wrap {
-        .ant-tabs-nav-list {
-          display: flex;
-          gap: 3.5rem;
-          align-items: center;
-          .ant-tabs-tab {
-            margin: 0;
-          }
-          .ant-tabs-ink-bar {
-            display: none;
-          }
-        }
-      }
-    }
-  }
-}
+.appTab {
+  .tab {
+    .ant-tabs-nav {
+      &::before {
+        border: unset !important;
+      }
+      .ant-tabs-nav-wrap {
+        .ant-tabs-nav-list {
+          display: flex;
+          gap: 3.5rem;
+          align-items: center;
+          .ant-tabs-tab {
+            margin: 0;
+          }
+          .ant-tabs-ink-bar {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/app-tab/app-tab.tsx

@@ -1,34 +1,34 @@
-import React from "react";
-import { Tabs } from "antd";
-import type { TabsProps } from "antd";
-import "./app-tab.css";
-
-interface AppTabProps {
-  className?: string;
-  items?: TabsProps["items"];
-  handleChange?: (activeKey: string) => void;
-  defaultActiveKey?: string;
-  activeKey?:string;
-}
-
-const AppTab = ({
-  className,
-  items,
-  handleChange,
-  defaultActiveKey,
-  activeKey,
-}: AppTabProps) => {
-  return (
-    <div className={`appTab ${className}`}>
-      <Tabs
-        defaultActiveKey={defaultActiveKey}
-        activeKey={activeKey}
-        items={items}
-        onChange={handleChange}
-        className={"tab"}
-      />
-    </div>
-  );
-};
-
-export default AppTab;
+import React from "react";
+import { Tabs } from "antd";
+import type { TabsProps } from "antd";
+import "./app-tab.css";
+
+interface AppTabProps {
+  className?: string;
+  items?: TabsProps["items"];
+  handleChange?: (activeKey: string) => void;
+  defaultActiveKey?: string;
+  activeKey?:string;
+}
+
+const AppTab = ({
+  className,
+  items,
+  handleChange,
+  defaultActiveKey,
+  activeKey,
+}: AppTabProps) => {
+  return (
+    <div className={`appTab ${className}`}>
+      <Tabs
+        defaultActiveKey={defaultActiveKey}
+        activeKey={activeKey}
+        items={items}
+        onChange={handleChange}
+        className={"tab"}
+      />
+    </div>
+  );
+};
+
+export default AppTab;

package/src/components/app-table/app-table.tsx

@@ -1,42 +1,42 @@
-import { Table, TableProps } from "antd";
-import { ColumnsType } from "antd/lib/table";
-
-interface AppTableProps<T> extends TableProps<T> {
-  columns: ColumnsType<T>;
-  dataSource: T[];
-  rowKey?: string;
-  bordered?: boolean;
-  pagination?: TableProps<T>["pagination"];
-  size?: "small" | "middle" | "large";
-  scroll?: TableProps<T>["scroll"];
-  className?: string;
-}
-
-const AppTable = <T extends object>({
-  columns,
-  dataSource,
-  rowKey,
-  bordered = false,
-  pagination = { pageSize: 10 },
-  size = "middle",
-  scroll,
-  className,
-  ...tableProps
-}: AppTableProps<T>) => {
-  return (
-    <div className={className}>
-      <Table
-        columns={columns}
-        dataSource={dataSource}
-        rowKey={rowKey}
-        bordered={bordered}
-        pagination={pagination}
-        size={size}
-        scroll={scroll}
-        {...tableProps}
-      />
-    </div>
-  );
-};
-
-export default AppTable;
+import { Table, TableProps } from "antd";
+import { ColumnsType } from "antd/lib/table";
+
+interface AppTableProps<T> extends TableProps<T> {
+  columns: ColumnsType<T>;
+  dataSource: T[];
+  rowKey?: string;
+  bordered?: boolean;
+  pagination?: TableProps<T>["pagination"];
+  size?: "small" | "middle" | "large";
+  scroll?: TableProps<T>["scroll"];
+  className?: string;
+}
+
+const AppTable = <T extends object>({
+  columns,
+  dataSource,
+  rowKey,
+  bordered = false,
+  pagination = { pageSize: 10 },
+  size = "middle",
+  scroll,
+  className,
+  ...tableProps
+}: AppTableProps<T>) => {
+  return (
+    <div className={className}>
+      <Table
+        columns={columns}
+        dataSource={dataSource}
+        rowKey={rowKey}
+        bordered={bordered}
+        pagination={pagination}
+        size={size}
+        scroll={scroll}
+        {...tableProps}
+      />
+    </div>
+  );
+};
+
+export default AppTable;

package/src/components/app-tag/app-tag.css

@@ -1,11 +1,11 @@
-.appTab {
-  width: max-content;
-  .ant-tag {
-    display: flex;
-    align-items: center;
-    margin: 0;
-    border-radius: 8px;
-    padding: 4px 8px;
-    line-height: normal;
-  }
-}
+.appTab {
+  width: max-content;
+  .ant-tag {
+    display: flex;
+    align-items: center;
+    margin: 0;
+    border-radius: 8px;
+    padding: 4px 8px;
+    line-height: normal;
+  }
+}

package/src/components/app-tag/app-tag.tsx

@@ -1,48 +1,48 @@
-import React, { useState } from "react";
-import { Tag } from "antd";
-import "./app-tag.css";
-
-interface AppTagProps {
-  color?: string;
-  closable?: boolean;
-  onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-  style?: React.CSSProperties;
-  className?: string;
-  children: React.ReactNode;
-  closeIcon?: React.ReactNode;
-}
-
-const AppTag = ({
-  color,
-  closable = false,
-  onClick,
-  style,
-  className,
-  children,
-  closeIcon,
-}: AppTagProps) => {
-  const [visible, setVisible] = useState(true);
-
-  const handleClose = () => {
-    setVisible(false);
-  };
-
-  if (!visible) return null;
-
-  return (
-    <div className={`appTab ${className}`}>
-      <Tag
-        color={color}
-        closable={closable}
-        onClose={handleClose}
-        onClick={onClick}
-        style={style}
-        closeIcon={closeIcon}
-      >
-        {children}
-      </Tag>
-    </div>
-  );
-};
-
-export default AppTag;
+import React, { useState } from "react";
+import { Tag } from "antd";
+import "./app-tag.css";
+
+interface AppTagProps {
+  color?: string;
+  closable?: boolean;
+  onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+  style?: React.CSSProperties;
+  className?: string;
+  children: React.ReactNode;
+  closeIcon?: React.ReactNode;
+}
+
+const AppTag = ({
+  color,
+  closable = false,
+  onClick,
+  style,
+  className,
+  children,
+  closeIcon,
+}: AppTagProps) => {
+  const [visible, setVisible] = useState(true);
+
+  const handleClose = () => {
+    setVisible(false);
+  };
+
+  if (!visible) return null;
+
+  return (
+    <div className={`appTab ${className}`}>
+      <Tag
+        color={color}
+        closable={closable}
+        onClose={handleClose}
+        onClick={onClick}
+        style={style}
+        closeIcon={closeIcon}
+      >
+        {children}
+      </Tag>
+    </div>
+  );
+};
+
+export default AppTag;

package/src/components/app-textarea/app-textarea.css

@@ -1,25 +1,25 @@
-.appTextArea {
-  .ant-input-outlined {
-    border-color: #bfbebe;
-    &:hover {
-      border-color: #bfbebe;
-    }
-  }
-  .ant-input::placeholder {
-    color: #202123 !important;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: normal;
-  }
-
-  *:focus {
-    outline: 0 !important;
-    box-shadow: unset !important;
-  }
-}
-
-.error {
-  color: red;
-  font-size: 0.875rem;
-  margin-top: 0.25rem;
-}
+.appTextArea {
+  .ant-input-outlined {
+    border-color: #bfbebe;
+    &:hover {
+      border-color: #bfbebe;
+    }
+  }
+  .ant-input::placeholder {
+    color: #202123 !important;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: normal;
+  }
+
+  *:focus {
+    outline: 0 !important;
+    box-shadow: unset !important;
+  }
+}
+
+.error {
+  color: red;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}

package/src/components/app-textarea/app-textarea.tsx

@@ -1,59 +1,59 @@
-import { Input } from "antd";
-import { ChangeEventHandler, KeyboardEventHandler } from "react";
-import "./app-textarea.css";
-
-interface textAreaProps {
-  id?: string;
-  label?: string;
-  name?: string;
-  value?: string;
-  dataTestId?: string;
-  defaultValue?: string;
-  onPressEnter?: KeyboardEventHandler<HTMLTextAreaElement>;
-  handleChange?: ChangeEventHandler<HTMLTextAreaElement>;
-  autoSize?: {
-    minRows?: number;
-    maxRows?: number;
-  };
-  rows?: number;
-  cols?: number;
-  placeholder?: string;
-  className?: string;
-  error?: string;
-}
-
-const AppTextarea = ({
-  id,
-  placeholder,
-  name,
-  value,
-  dataTestId,
-  defaultValue,
-  onPressEnter,
-  handleChange,
-  rows,
-  cols,
-  className,
-  error,
-}: textAreaProps) => {
-  return (
-    <div className={`appTextArea ${className}`}>
-      <Input.TextArea
-        data-test-id={dataTestId}
-        id={id}
-        name={name}
-        placeholder={placeholder}
-        value={value}
-        className={"textArea"}
-        onChange={handleChange}
-        defaultValue={defaultValue}
-        onPressEnter={onPressEnter}
-        rows={rows}
-        cols={cols}
-      />
-      {error && <div className={"error"}>{error}</div>}
-    </div>
-  );
-};
-
-export default AppTextarea;
+import { Input } from "antd";
+import { ChangeEventHandler, KeyboardEventHandler } from "react";
+import "./app-textarea.css";
+
+interface textAreaProps {
+  id?: string;
+  label?: string;
+  name?: string;
+  value?: string;
+  dataTestId?: string;
+  defaultValue?: string;
+  onPressEnter?: KeyboardEventHandler<HTMLTextAreaElement>;
+  handleChange?: ChangeEventHandler<HTMLTextAreaElement>;
+  autoSize?: {
+    minRows?: number;
+    maxRows?: number;
+  };
+  rows?: number;
+  cols?: number;
+  placeholder?: string;
+  className?: string;
+  error?: string;
+}
+
+const AppTextarea = ({
+  id,
+  placeholder,
+  name,
+  value,
+  dataTestId,
+  defaultValue,
+  onPressEnter,
+  handleChange,
+  rows,
+  cols,
+  className,
+  error,
+}: textAreaProps) => {
+  return (
+    <div className={`appTextArea ${className}`}>
+      <Input.TextArea
+        data-test-id={dataTestId}
+        id={id}
+        name={name}
+        placeholder={placeholder}
+        value={value}
+        className={"textArea"}
+        onChange={handleChange}
+        defaultValue={defaultValue}
+        onPressEnter={onPressEnter}
+        rows={rows}
+        cols={cols}
+      />
+      {error && <div className={"error"}>{error}</div>}
+    </div>
+  );
+};
+
+export default AppTextarea;