react-frontend-common-components 0.0.77 → 0.0.79

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

@@ -1,59 +1,90 @@
-import React from "react";
-import { Select, SelectProps } from "antd";
-import { MouseEventHandler } from "react";
-import "./app-select.css";
-
-interface AppSelectProps extends SelectProps {
-  className?: string;
-  value?: string | null;
-  dataTestId?: string;
-  id?: string;
-  disabled?: boolean;
-  handleChange?: (value: string | string[]) => void;
-  onClick?: MouseEventHandler<HTMLElement>;
-  options?: Array<{ value: string; label: string }>;
-  onSelectChange?: (value: string) => void;
-  required?: boolean;
-  placeholder?: string;
-  errorMessage?: string;
-  showSearch?: boolean;
-}
-
-const AppSelect = ({
-  value,
-  handleChange,
-  options,
-  disabled,
-  placeholder,
-  className,
-  errorMessage,
-  showSearch,
-  required,
-  ...props
-}: AppSelectProps) => {
-  return (
-    <div className={`appselect ${className}`}>
-      <Select
-        className={"select"}
-        showSearch={showSearch}
-        disabled={disabled}
-        value={value?.length ? value : null}
-        placeholder={`${required ? placeholder + " (required)" : placeholder}`}
-        onChange={(value: string | string[]) =>
-          handleChange && handleChange(value)
-        }
-        filterOption={(input, options) =>
-          (options?.label || "")
-            .toString()
-            .toLowerCase()
-            .includes(input.toLowerCase())
-        }
-        options={options}
-        {...props}
-      ></Select>
-      {errorMessage && <div className={"error"}>{errorMessage}</div>}
-    </div>
-  );
-};
-
-export default AppSelect;
+import React from "react";
+import { Select, SelectProps } from "antd";
+import { MouseEventHandler } from "react";
+import "./app-select.css";
+
+interface Options {
+  value: string;
+  label: string;
+  flag?: string;
+}
+
+interface AppSelectProps extends SelectProps {
+  className?: string;
+  value?: string | null;
+  dataTestId?: string;
+  id?: string;
+  disabled?: boolean;
+  handleChange?: (value: string | string[]) => void;
+  onClick?: MouseEventHandler<HTMLElement>;
+  options?: Options[];
+  onSelectChange?: (value: string) => void;
+  required?: boolean;
+  placeholder?: string;
+  errorMessage?: string;
+  showSearch?: boolean;
+}
+
+const AppSelect = ({
+  value,
+  handleChange,
+  options,
+  disabled,
+  placeholder,
+  className,
+  errorMessage,
+  showSearch,
+  required,
+  ...props
+}: AppSelectProps) => {
+  return (
+    <div className={`appselect ${className}`}>
+      <Select
+        className={"select"}
+        showSearch={showSearch}
+        disabled={disabled}
+        value={value?.length ? value : null}
+        placeholder={`${required ? placeholder + " (required)" : placeholder}`}
+        onChange={(value: string | string[]) =>
+          handleChange && handleChange(value)
+        }
+        filterOption={(input, options) =>
+          (options?.label || "")
+            .toString()
+            .toLowerCase()
+            .includes(input.toLowerCase())
+        }
+        options={options?.map(({ value, label, flag }) => ({
+          label: (
+            <>
+              {flag ? (
+                <div
+                  style={{
+                    display: "grid",
+                    alignItems: "center",
+                    gridTemplateColumns: "0.2fr 1fr",
+                    gap: 12,
+                  }}
+                >
+                  <img
+                    src={flag}
+                    alt={label}
+                    style={{ width: 32, height: 20 }}
+                  />
+                  <span>{label}</span>
+                </div>
+              ) : (
+                <span>{label}</span>
+              )}
+            </>
+          ),
+          value,
+        }))}
+        {...props}
+      ></Select>
+      {errorMessage && <div className={"error"}>{errorMessage}</div>}
+    </div>
+  );
+};
+
+export default AppSelect;

package/src/components/app-select-add/app-select-add.css

@@ -1,21 +1,21 @@
-.appSelectAdd {
-  *:focus,
-  *:active,
-  *:focus-within {
-    outline: 0 !important;
-    box-shadow: unset !important;
-  }
-  .ant-select {
-    &:hover {
-      .ant-select-selector {
-        border-color: #d9d9d9 !important;
-      }
-    }
-  }
-}
-
-.error {
-  color: red;
-  font-size: 0.875rem;
-  margin-top: 0.25rem;
-}
+.appSelectAdd {
+  *:focus,
+  *:active,
+  *:focus-within {
+    outline: 0 !important;
+    box-shadow: unset !important;
+  }
+  .ant-select {
+    &:hover {
+      .ant-select-selector {
+        border-color: #d9d9d9 !important;
+      }
+    }
+  }
+}
+
+.error {
+  color: red;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}

package/src/components/app-select-add/app-select-add.tsx

@@ -1,34 +1,34 @@
-import React from "react";
-import { Select } from "antd";
-import type { SelectProps } from "antd";
-import "./app-select-add.css";
-
-interface AppSelectAddProps extends SelectProps {
-  options?: SelectProps["options"];
-  placeholder?: string;
-  onChange?: (value: string) => void;
-  className?: string;
-}
-
-const AppSelectAdd = ({
-  options = [],
-  placeholder = "Tags Mode",
-  onChange,
-  className,
-  ...rest
-}: AppSelectAddProps) => {
-  return (
-    <div className={`appSelectAdd ${className}`}>
-      <Select
-        mode="tags"
-        style={{ width: "100%" }}
-        placeholder={placeholder}
-        onChange={onChange}
-        options={options}
-        {...rest}
-      />
-    </div>
-  );
-};
-
-export default AppSelectAdd;
+import React from "react";
+import { Select } from "antd";
+import type { SelectProps } from "antd";
+import "./app-select-add.css";
+
+interface AppSelectAddProps extends SelectProps {
+  options?: SelectProps["options"];
+  placeholder?: string;
+  onChange?: (value: string) => void;
+  className?: string;
+}
+
+const AppSelectAdd = ({
+  options = [],
+  placeholder = "Tags Mode",
+  onChange,
+  className,
+  ...rest
+}: AppSelectAddProps) => {
+  return (
+    <div className={`appSelectAdd ${className}`}>
+      <Select
+        mode="tags"
+        style={{ width: "100%" }}
+        placeholder={placeholder}
+        onChange={onChange}
+        options={options}
+        {...rest}
+      />
+    </div>
+  );
+};
+
+export default AppSelectAdd;

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

@@ -1,49 +1,49 @@
-.sideBar {
-  height: 100vh;
-  width: max-content;
-  .sider {
-    height: 100%;
-    .ant-layout-sider-children {
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      row-gap: 2.875rem;
-      .ant-menu {
-        border: none;
-        &::after {
-          display: none;
-        }
-        &::before {
-          display: none;
-        }
-      }
-    }
-  }
-}
-
-.sideBarHead {
-  padding: 16px;
-}
-
-.menu {
-  border-right: 0;
-}
-
-.footer {
-  position: relative;
-  &::before {
-    content: "";
-    height: 1px;
-    width: 80%;
-    position: absolute;
-    top: 0;
-    right: 50%;
-    left: 50%;
-    transform: translateX(-50%);
-    background-color: #acacac;
-  }
-}
-
-.tag {
-  margin-left: 8px;
-}
+.sideBar {
+  height: 100vh;
+  width: max-content;
+  .sider {
+    height: 100%;
+    .ant-layout-sider-children {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      row-gap: 2.875rem;
+      .ant-menu {
+        border: none;
+        &::after {
+          display: none;
+        }
+        &::before {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+.sideBarHead {
+  padding: 16px;
+}
+
+.menu {
+  border-right: 0;
+}
+
+.footer {
+  position: relative;
+  &::before {
+    content: "";
+    height: 1px;
+    width: 80%;
+    position: absolute;
+    top: 0;
+    right: 50%;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #acacac;
+  }
+}
+
+.tag {
+  margin-left: 8px;
+}

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

@@ -1,87 +1,87 @@
-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)}>
+        {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;

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,31 +1,31 @@
-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;
-}
-
-const AppTab = ({
-  className,
-  items,
-  handleChange,
-  defaultActiveKey,
-}: AppTabProps) => {
-  return (
-    <div className={`appTab ${className}`}>
-      <Tabs
-        defaultActiveKey={defaultActiveKey}
-        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;
+}
+
+const AppTab = ({
+  className,
+  items,
+  handleChange,
+  defaultActiveKey,
+}: AppTabProps) => {
+  return (
+    <div className={`appTab ${className}`}>
+      <Tabs
+        defaultActiveKey={defaultActiveKey}
+        items={items}
+        onChange={handleChange}
+        className={"tab"}
+      />
+    </div>
+  );
+};
+
+export default AppTab;