react-frontend-common-components 0.0.77 → 0.0.81

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

@@ -1,59 +1,59 @@
-.appInput {
-  font-size: var(--font-14);
-  font-weight: 500;
-  .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;
-}
+.appInput {
+  font-size: var(--font-14);
+  font-weight: 500;
+  .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,93 +1,93 @@
-"use client";
-
-import { Input, InputProps, InputRef } from "antd";
-import {
-  ChangeEventHandler,
-  KeyboardEventHandler,
-  MouseEventHandler,
-  useEffect,
-  useRef,
-} 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);
-
-  useEffect(() => {
-    if (isAutoFocus && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [triggerFocus, isAutoFocus]);
-
-  const placeholder = isOptional ? `${label} (optional)` : label;
-
-  return (
-    <div className={`appInput ${className}`}>
-      <Input
-        type={type}
-        data-test-id={dataTestId}
-        id={id}
-        disabled={disabled}
-        name={name}
-        className={"input"}
-        value={value}
-        onChange={handleChange}
-        onClick={onClick}
-        defaultValue={defaultValue}
-        onPressEnter={onPressEnter}
-        placeholder={`${required ? 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 {
+  ChangeEventHandler,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  useEffect,
+  useRef,
+} 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);
+
+  useEffect(() => {
+    if (isAutoFocus && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [triggerFocus, isAutoFocus]);
+
+  const placeholder = isOptional ? `${label} (optional)` : label;
+
+  return (
+    <div className={`appInput ${className}`}>
+      <Input
+        type={type}
+        data-test-id={dataTestId}
+        id={id}
+        disabled={disabled}
+        name={name}
+        className={"input"}
+        value={value}
+        onChange={handleChange}
+        onClick={onClick}
+        defaultValue={defaultValue}
+        onPressEnter={onPressEnter}
+        placeholder={`${required ? 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;
+}

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

@@ -1,62 +1,62 @@
-import React, { useEffect, useState } from "react";
-import { GoogleMap, LoadScript } from "@react-google-maps/api";
-import "./app-location-map.css";
-
-interface LatLng {
-  lat: number;
-  lng: number;
-}
-
-interface LocationMapProps {
-  cityId?: LatLng;
-  className?: string;
-  containerStyle?: React.CSSProperties;
-  clickableIcons?: boolean;
-  zoom?: number;
-  mapKey: string;
-}
-
-const AppLocationMap = ({
-  cityId,
-  className,
-  containerStyle,
-  clickableIcons,
-  zoom = 10,
-  mapKey,
-}: LocationMapProps) => {
-  const [center, setCenter] = useState<LatLng | null>(null);
-
-  useEffect(() => {
-    if (cityId) {
-      setCenter(cityId);
-    } else {
-      if (navigator.geolocation) {
-        navigator.geolocation.getCurrentPosition((position) => {
-          setCenter({
-            lat: position.coords.latitude,
-            lng: position.coords.longitude,
-          });
-        });
-      }
-    }
-  }, [cityId]);
-
-  return (
-    <div className={`appLocationMap ${className}`}>
-      <LoadScript googleMapsApiKey={mapKey}>
-        <div style={containerStyle}>
-          {center && (
-            <GoogleMap
-              mapContainerStyle={containerStyle}
-              center={center}
-              clickableIcons={clickableIcons}
-              zoom={zoom}
-            />
-          )}
-        </div>
-      </LoadScript>
-    </div>
-  );
-};
-
-export default AppLocationMap;
+import React, { useEffect, useState } from "react";
+import { GoogleMap, LoadScript } from "@react-google-maps/api";
+import "./app-location-map.css";
+
+interface LatLng {
+  lat: number;
+  lng: number;
+}
+
+interface LocationMapProps {
+  cityId?: LatLng;
+  className?: string;
+  containerStyle?: React.CSSProperties;
+  clickableIcons?: boolean;
+  zoom?: number;
+  mapKey: string;
+}
+
+const AppLocationMap = ({
+  cityId,
+  className,
+  containerStyle,
+  clickableIcons,
+  zoom = 10,
+  mapKey,
+}: LocationMapProps) => {
+  const [center, setCenter] = useState<LatLng | null>(null);
+
+  useEffect(() => {
+    if (cityId) {
+      setCenter(cityId);
+    } else {
+      if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition((position) => {
+          setCenter({
+            lat: position.coords.latitude,
+            lng: position.coords.longitude,
+          });
+        });
+      }
+    }
+  }, [cityId]);
+
+  return (
+    <div className={`appLocationMap ${className}`}>
+      <LoadScript googleMapsApiKey={mapKey}>
+        <div style={containerStyle}>
+          {center && (
+            <GoogleMap
+              mapContainerStyle={containerStyle}
+              center={center}
+              clickableIcons={clickableIcons}
+              zoom={zoom}
+            />
+          )}
+        </div>
+      </LoadScript>
+    </div>
+  );
+};
+
+export default AppLocationMap;