react-frontend-common-components 0.0.83 → 0.0.85

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

@@ -1,55 +1,55 @@
-.appselect {
-  font-weight: 500;
-  font-size: var(--font-14);
-  position: relative;
-  *:focus,
-  *:active,
-  *:focus-within {
-    outline: 0 !important;
-    box-shadow: unset !important;
-  }
-  .ant-select {
-    width: 100%;
-    height: 40px;
-    .ant-select-selector {
-      .ant-select-selection-placeholder {
-        color: #202123 !important;
-        font-size: 14px;
-        font-weight: 500;
-        line-height: normal;
-      }
-    }
-    &:hover {
-      .ant-select-selector {
-        border-color: #d9d9d9 !important;
-      }
-    }
-  }
-}
-
-.error {
-  color: red;
-  font-size: 0.875rem;
-  margin-top: 0.25rem;
-}
-
-.placeHolder {
-  line-height: normal;
-  position: absolute;
-  bottom: 50%;
-  transform: translateY(50%);
-  left: 11px;
-  z-index: 1 !important;
-}
-.requiredText {
-  opacity: 60%;
-  color: #686869 !important;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: normal;
-}
-.star {
-  color: rgba(255, 40, 25, 1);
-  display: inline-block;
-  transform: translateX(1.5px);
-}
+.appselect {
+  font-weight: 500;
+  font-size: var(--font-14);
+  position: relative;
+  *:focus,
+  *:active,
+  *:focus-within {
+    outline: 0 !important;
+    box-shadow: unset !important;
+  }
+  .ant-select {
+    width: 100%;
+    height: 40px;
+    .ant-select-selector {
+      .ant-select-selection-placeholder {
+        color: #202123 !important;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: normal;
+      }
+    }
+    &:hover {
+      .ant-select-selector {
+        border-color: #d9d9d9 !important;
+      }
+    }
+  }
+}
+
+.error {
+  color: red;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}
+
+.placeHolder {
+  line-height: normal;
+  position: absolute;
+  bottom: 50%;
+  transform: translateY(50%);
+  left: 11px;
+  z-index: 1 !important;
+}
+.requiredText {
+  opacity: 60%;
+  color: #686869 !important;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: normal;
+}
+.star {
+  color: rgba(255, 40, 25, 1);
+  display: inline-block;
+  transform: translateX(1.5px);
+}

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

@@ -1,130 +1,130 @@
-import React, { useState, useEffect, useRef } 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) => {
-  const selectRef = useRef<HTMLDivElement>(null);
-  const [selectedValue, setSelectedValue] = useState<string | null>(
-    value || null
-  );
-
-  useEffect(() => {
-    if (value !== undefined) {
-      setSelectedValue(value);
-    }
-  }, [value]);
-
-  const handleSelectChange = (val: string | string[]) => {
-    setSelectedValue(val ? String(val) : null);
-    handleChange?.(val);
-  };
-
-  return (
-    <div className={`appselect ${className}`} ref={selectRef}>
-      {/* Show placeholder only when nothing is selected */}
-      {required && !selectedValue && (
-        <div
-          className="placeHolder"
-          onClick={() => {
-            const selectElement = selectRef.current?.querySelector(
-              ".ant-select-selector"
-            ) as HTMLElement;
-            if (selectElement) {
-              selectElement.click();
-              setTimeout(() => {
-                selectElement.dispatchEvent(
-                  new MouseEvent("mousedown", { bubbles: true })
-                );
-              }, 0);
-            }
-          }}
-        >
-          <label className="requiredText" htmlFor={props.id}>
-            {placeholder}
-          </label>
-          <span className="star">*</span>
-        </div>
-      )}
-
-      <Select
-        className={"select"}
-        showSearch={showSearch}
-        disabled={disabled}
-        value={selectedValue || null}
-        placeholder={`${required ? "" : placeholder}`}
-        onChange={handleSelectChange}
-        filterOption={(input, option) =>
-          (option?.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}
-      />
-
-      {errorMessage && <div className={"error"}>{errorMessage}</div>}
-    </div>
-  );
-};
-
-export default AppSelect;
+import React, { useState, useEffect, useRef } 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) => {
+  const selectRef = useRef<HTMLDivElement>(null);
+  const [selectedValue, setSelectedValue] = useState<string | null>(
+    value || null
+  );
+
+  useEffect(() => {
+    if (value !== undefined) {
+      setSelectedValue(value);
+    }
+  }, [value]);
+
+  const handleSelectChange = (val: string | string[]) => {
+    setSelectedValue(val ? String(val) : null);
+    handleChange?.(val);
+  };
+
+  return (
+    <div className={`appselect ${className}`} ref={selectRef}>
+      {/* Show placeholder only when nothing is selected */}
+      {required && !selectedValue && (
+        <div
+          className="placeHolder"
+          onClick={() => {
+            const selectElement = selectRef.current?.querySelector(
+              ".ant-select-selector"
+            ) as HTMLElement;
+            if (selectElement) {
+              selectElement.click();
+              setTimeout(() => {
+                selectElement.dispatchEvent(
+                  new MouseEvent("mousedown", { bubbles: true })
+                );
+              }, 0);
+            }
+          }}
+        >
+          <label className="requiredText" htmlFor={props.id}>
+            {placeholder}
+          </label>
+          <span className="star">*</span>
+        </div>
+      )}
+
+      <Select
+        className={"select"}
+        showSearch={showSearch}
+        disabled={disabled}
+        value={selectedValue || null}
+        placeholder={`${required ? "" : placeholder}`}
+        onChange={handleSelectChange}
+        filterOption={(input, option) =>
+          (option?.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}
+      />
+
+      {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;
+}