react-frontend-common-components 0.0.83 → 0.0.85

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

@@ -1,81 +1,81 @@
-.placeHolder {
-  line-height: normal;
-  position: absolute;
-  bottom: 50%;
-  transform: translateY(50%);
-  left: 11px;
-  color: #000000;
-  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);
-}
-
-.appInput {
-  font-size: var(--font-14);
-  font-weight: 500;
-  position: relative;
-  .ant-input::placeholder {
-    color: #202123 !important;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: normal;
-  }
-
-  *:focus {
-    outline: 0 !important;
-    box-shadow: unset !important;
-  }
-  &:hover {
-    .ant-input {
-      border-color: #d9d9d9;
-    }
-  }
-
-  &:has(.ant-input-affix-wrapper) {
-    .ant-input {
-      border: none !important;
-      height: unset !important;
-    }
-  }
-  .ant-input-affix-wrapper {
-    height: 40px;
-    display: flex;
-    align-items: center;
-    .ant-input-outlined:focus-within {
-      box-shadow: unset !important;
-    }
-
-    *:focus {
-      outline: 0 !important;
-      box-shadow: unset !important;
-    }
-  }
-  .ant-input-outlined {
-    height: 40px;
-    &:hover {
-      border-color: #d9d9d9;
-    }
-    &:focus {
-      box-shadow: unset;
-    }
-    &:focus-within {
-      box-shadow: unset;
-      border-color: #d9d9d9;
-    }
-  }
-}
-.error {
-  color: red;
-  font-size: 0.875rem;
-  margin-top: 0.25rem;
-}
+.placeHolder {
+  line-height: normal;
+  position: absolute;
+  bottom: 50%;
+  transform: translateY(50%);
+  left: 11px;
+  color: #000000;
+  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);
+}
+
+.appInput {
+  font-size: var(--font-14);
+  font-weight: 500;
+  position: relative;
+  .ant-input::placeholder {
+    color: #202123 !important;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: normal;
+  }
+
+  *:focus {
+    outline: 0 !important;
+    box-shadow: unset !important;
+  }
+  &:hover {
+    .ant-input {
+      border-color: #d9d9d9;
+    }
+  }
+
+  &:has(.ant-input-affix-wrapper) {
+    .ant-input {
+      border: none !important;
+      height: unset !important;
+    }
+  }
+  .ant-input-affix-wrapper {
+    height: 40px;
+    display: flex;
+    align-items: center;
+    .ant-input-outlined:focus-within {
+      box-shadow: unset !important;
+    }
+
+    *:focus {
+      outline: 0 !important;
+      box-shadow: unset !important;
+    }
+  }
+  .ant-input-outlined {
+    height: 40px;
+    &:hover {
+      border-color: #d9d9d9;
+    }
+    &:focus {
+      box-shadow: unset;
+    }
+    &:focus-within {
+      box-shadow: unset;
+      border-color: #d9d9d9;
+    }
+  }
+}
+.error {
+  color: red;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}

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

@@ -1,119 +1,119 @@
-"use client";
-
-import { Input, InputProps, InputRef } from "antd";
-import {
-  ChangeEvent,
-  ChangeEventHandler,
-  KeyboardEventHandler,
-  MouseEventHandler,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import "./app-input.css";
-
-interface AppInputProps extends InputProps {
-  className?: string;
-  label?: string;
-  name?: string;
-  value?: string;
-  dataTestId?: string;
-  id?: string;
-  disabled?: boolean;
-  handleChange?: ChangeEventHandler<HTMLInputElement>;
-  onClick?: MouseEventHandler<HTMLElement>;
-  onPressEnter?: KeyboardEventHandler<HTMLInputElement>;
-  defaultValue?: string;
-  isAutoFocus?: boolean;
-  triggerFocus?: boolean;
-  type?: string;
-  isOptional?: boolean;
-  errorMessage?: string;
-  suffixIcon?: React.ReactNode;
-  prefixIcon?: React.ReactNode;
-  required?: boolean;
-}
-
-const AppInput = ({
-  className,
-  label,
-  name,
-  value,
-  dataTestId,
-  type,
-  id,
-  disabled,
-  handleChange,
-  onClick,
-  defaultValue,
-  onPressEnter,
-  isAutoFocus,
-  triggerFocus,
-  isOptional,
-  errorMessage,
-  suffixIcon,
-  prefixIcon,
-  required,
-  ...props
-}: AppInputProps) => {
-  const inputRef = useRef<InputRef>(null);
-  const [inputValue, setInputValue] = useState<string>(value || "");
-  const [isTyping, setIsTyping] = useState(false);
-
-  useEffect(() => {
-    if (isAutoFocus && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [triggerFocus, isAutoFocus]);
-
-  useEffect(() => {
-    if (value !== undefined) {
-      setInputValue(value);
-    }
-  }, [value]);
-
-  const placeholder = isOptional ? `${label} (optional)` : label;
-
-  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setInputValue(e.target.value);
-    setIsTyping(e.target.value.length > 0);
-    handleChange?.(e);
-  };
-
-  return (
-    <div className={`appInput ${className}`}>
-      {/* Show placeholder only if user hasn't started typing */}
-      {required && !isTyping && !inputValue && (
-        <div className="placeHolder" onClick={() => inputRef.current?.focus()}>
-          <label className="requiredText" htmlFor={id}>
-            {placeholder}
-          </label>
-          <span className="star">*</span>
-        </div>
-      )}
-
-      <Input
-        type={type}
-        data-test-id={dataTestId}
-        id={id}
-        disabled={disabled}
-        name={name}
-        className={"input"}
-        value={inputValue}
-        onChange={handleInputChange}
-        onClick={onClick}
-        defaultValue={defaultValue}
-        onPressEnter={onPressEnter}
-        placeholder={`${required ? "" : placeholder}`}
-        ref={inputRef}
-        prefix={prefixIcon && prefixIcon}
-        suffix={suffixIcon && suffixIcon}
-        {...props}
-      />
-
-      {errorMessage && <div className={"error"}>{errorMessage}</div>}
-    </div>
-  );
-};
-
-export default AppInput;
+"use client";
+
+import { Input, InputProps, InputRef } from "antd";
+import {
+  ChangeEvent,
+  ChangeEventHandler,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import "./app-input.css";
+
+interface AppInputProps extends InputProps {
+  className?: string;
+  label?: string;
+  name?: string;
+  value?: string;
+  dataTestId?: string;
+  id?: string;
+  disabled?: boolean;
+  handleChange?: ChangeEventHandler<HTMLInputElement>;
+  onClick?: MouseEventHandler<HTMLElement>;
+  onPressEnter?: KeyboardEventHandler<HTMLInputElement>;
+  defaultValue?: string;
+  isAutoFocus?: boolean;
+  triggerFocus?: boolean;
+  type?: string;
+  isOptional?: boolean;
+  errorMessage?: string;
+  suffixIcon?: React.ReactNode;
+  prefixIcon?: React.ReactNode;
+  required?: boolean;
+}
+
+const AppInput = ({
+  className,
+  label,
+  name,
+  value,
+  dataTestId,
+  type,
+  id,
+  disabled,
+  handleChange,
+  onClick,
+  defaultValue,
+  onPressEnter,
+  isAutoFocus,
+  triggerFocus,
+  isOptional,
+  errorMessage,
+  suffixIcon,
+  prefixIcon,
+  required,
+  ...props
+}: AppInputProps) => {
+  const inputRef = useRef<InputRef>(null);
+  const [inputValue, setInputValue] = useState<string>(value || "");
+  const [isTyping, setIsTyping] = useState(false);
+
+  useEffect(() => {
+    if (isAutoFocus && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [triggerFocus, isAutoFocus]);
+
+  useEffect(() => {
+    if (value !== undefined) {
+      setInputValue(value);
+    }
+  }, [value]);
+
+  const placeholder = isOptional ? `${label} (optional)` : label;
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+    setIsTyping(e.target.value.length > 0);
+    handleChange?.(e);
+  };
+
+  return (
+    <div className={`appInput ${className}`}>
+      {/* Show placeholder only if user hasn't started typing */}
+      {required && !isTyping && !inputValue && (
+        <div className="placeHolder" onClick={() => inputRef.current?.focus()}>
+          <label className="requiredText" htmlFor={id}>
+            {placeholder}
+          </label>
+          <span className="star">*</span>
+        </div>
+      )}
+
+      <Input
+        type={type}
+        data-test-id={dataTestId}
+        id={id}
+        disabled={disabled}
+        name={name}
+        className={"input"}
+        value={inputValue}
+        onChange={handleInputChange}
+        onClick={onClick}
+        defaultValue={defaultValue}
+        onPressEnter={onPressEnter}
+        placeholder={`${required ? "" : placeholder}`}
+        ref={inputRef}
+        prefix={prefixIcon && prefixIcon}
+        suffix={suffixIcon && suffixIcon}
+        {...props}
+      />
+
+      {errorMessage && <div className={"error"}>{errorMessage}</div>}
+    </div>
+  );
+};
+
+export default AppInput;

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

@@ -1,5 +1,5 @@
-.label {
-  display: inline-block;
-  font-weight: 500;
-  margin-bottom: 0.5rem;
-}
+.label {
+  display: inline-block;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+}

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

@@ -1,34 +1,34 @@
-import "./app-label.css";
-
-interface AppLabelProps {
-  text: string;
-  htmlFor?: string;
-  color?: string;
-  fontSize?: string;
-  className?: string;
-}
-
-const AppLabel = ({
-  text,
-  htmlFor,
-  color = "inherit",
-  fontSize = "inherit",
-  className,
-}: AppLabelProps) => {
-  const labelStyle = {
-    color,
-    fontSize,
-  };
-
-  return (
-    <label
-      htmlFor={htmlFor}
-      className={`label ${className}`}
-      style={labelStyle}
-    >
-      {text}
-    </label>
-  );
-};
-
-export default AppLabel;
+import "./app-label.css";
+
+interface AppLabelProps {
+  text: string;
+  htmlFor?: string;
+  color?: string;
+  fontSize?: string;
+  className?: string;
+}
+
+const AppLabel = ({
+  text,
+  htmlFor,
+  color = "inherit",
+  fontSize = "inherit",
+  className,
+}: AppLabelProps) => {
+  const labelStyle = {
+    color,
+    fontSize,
+  };
+
+  return (
+    <label
+      htmlFor={htmlFor}
+      className={`label ${className}`}
+      style={labelStyle}
+    >
+      {text}
+    </label>
+  );
+};
+
+export default AppLabel;

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

@@ -1,26 +1,26 @@
-import React from "react";
-import { List, ListProps } from "antd";
-
-interface AppListProps<T> extends ListProps<T> {
-  renderItem: (item: T, index: number) => React.ReactNode;
-  className?: string;
-}
-
-const AppList = <T extends unknown>({
-  renderItem,
-  dataSource,
-  className,
-  ...props
-}: AppListProps<T>) => {
-  return (
-    <div className={className}>
-      <List
-        dataSource={dataSource}
-        renderItem={(item, index) => renderItem(item, index)}
-        {...props}
-      />
-    </div>
-  );
-};
-
-export default AppList;
+import React from "react";
+import { List, ListProps } from "antd";
+
+interface AppListProps<T> extends ListProps<T> {
+  renderItem: (item: T, index: number) => React.ReactNode;
+  className?: string;
+}
+
+const AppList = <T extends unknown>({
+  renderItem,
+  dataSource,
+  className,
+  ...props
+}: AppListProps<T>) => {
+  return (
+    <div className={className}>
+      <List
+        dataSource={dataSource}
+        renderItem={(item, index) => renderItem(item, index)}
+        {...props}
+      />
+    </div>
+  );
+};
+
+export default AppList;

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

@@ -1,16 +1,16 @@
-.loader {
-  width: 100vw;
-  height: 100vh;
-  display: grid;
-  place-items: center;
-
-  position: fixed;
-  top: 0;
-  left: 0;
-  background-color: (0, 0, 0, 0.3);
-  backdrop-filter: blur(10px);
-  z-index: 99;
-  * {
-    transform: scale(1.5);
-  }
-}
+.loader {
+  width: 100vw;
+  height: 100vh;
+  display: grid;
+  place-items: center;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: (0, 0, 0, 0.3);
+  backdrop-filter: blur(10px);
+  z-index: 99;
+  * {
+    transform: scale(1.5);
+  }
+}

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

@@ -1,28 +1,28 @@
-import React from "react";
-import { Spin, Skeleton } from "antd";
-import "./app-loader.css";
-
-type LoaderType = "spinner" | "skeleton" | "custom";
-
-interface AppLoaderProps {
-  type?: LoaderType;
-  customLoader?: React.ReactNode;
-  className?: string;
-}
-
-const AppLoader = ({ type, customLoader, className }: AppLoaderProps) => {
-  const loaderType: LoaderType = customLoader ? "custom" : type || "spinner";
-
-  switch (loaderType) {
-    case "spinner":
-      return <Spin className={`loader ${className}`} />;
-    case "skeleton":
-      return <Skeleton active className={`loader ${className}`} />;
-    case "custom":
-      return customLoader || <Spin className={`loader ${className}`} />;
-    default:
-      return <Spin className={`loader ${className}`} />;
-  }
-};
-
-export default AppLoader;
+import React from "react";
+import { Spin, Skeleton } from "antd";
+import "./app-loader.css";
+
+type LoaderType = "spinner" | "skeleton" | "custom";
+
+interface AppLoaderProps {
+  type?: LoaderType;
+  customLoader?: React.ReactNode;
+  className?: string;
+}
+
+const AppLoader = ({ type, customLoader, className }: AppLoaderProps) => {
+  const loaderType: LoaderType = customLoader ? "custom" : type || "spinner";
+
+  switch (loaderType) {
+    case "spinner":
+      return <Spin className={`loader ${className}`} />;
+    case "skeleton":
+      return <Skeleton active className={`loader ${className}`} />;
+    case "custom":
+      return customLoader || <Spin className={`loader ${className}`} />;
+    default:
+      return <Spin className={`loader ${className}`} />;
+  }
+};
+
+export default AppLoader;

package/src/components/app-location-map/app-location-map.css

@@ -1,4 +1,4 @@
-.appLocationMap {
-  width: max-content;
-  height: max-content;
-}
+.appLocationMap {
+  width: max-content;
+  height: max-content;
+}