react-frontend-common-components 0.0.79 → 0.0.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-frontend-common-components",
-  "version": "0.0.79",
+  "version": "0.0.82",
   "description": "Reusable frontend library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

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

@@ -1,6 +1,29 @@
+.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;
@@ -51,7 +74,6 @@
     }
   }
 }
-
 .error {
   color: red;
   font-size: 0.875rem;

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

@@ -2,11 +2,13 @@
 
 import { Input, InputProps, InputRef } from "antd";
 import {
+  ChangeEvent,
   ChangeEventHandler,
   KeyboardEventHandler,
   MouseEventHandler,
   useEffect,
   useRef,
+  useState,
 } from "react";
 import "./app-input.css";
 
@@ -29,7 +31,7 @@ interface AppInputProps extends InputProps {
   errorMessage?: string;
   suffixIcon?: React.ReactNode;
   prefixIcon?: React.ReactNode;
-  required?:boolean;
+  required?: boolean;
 }
 
 const AppInput = ({
@@ -55,6 +57,8 @@ const AppInput = ({
   ...props
 }: AppInputProps) => {
   const inputRef = useRef<InputRef>(null);
+  const [inputValue, setInputValue] = useState<string>(value || "");
+  const [isTyping, setIsTyping] = useState(false);
 
   useEffect(() => {
     if (isAutoFocus && inputRef.current) {
@@ -62,10 +66,32 @@ const AppInput = ({
     }
   }, [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}
@@ -73,12 +99,12 @@ const AppInput = ({
         disabled={disabled}
         name={name}
         className={"input"}
-        value={value}
-        onChange={handleChange}
+        value={inputValue}
+        onChange={handleInputChange}
         onClick={onClick}
         defaultValue={defaultValue}
         onPressEnter={onPressEnter}
-        placeholder={`${required ? placeholder + " (required)" : placeholder}`}
+        placeholder={`${required ? "" : placeholder}`}
         ref={inputRef}
         prefix={prefixIcon && prefixIcon}
         suffix={suffixIcon && suffixIcon}

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

@@ -1,6 +1,7 @@
 .appselect {
   font-weight: 500;
   font-size: var(--font-14);
+  position: relative;
   *:focus,
   *:active,
   *:focus-within {
@@ -31,3 +32,24 @@
   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,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { Select, SelectProps } from "antd";
 import { MouseEventHandler } from "react";
 import "./app-select.css";
@@ -37,19 +37,58 @@ const AppSelect = ({
   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}`}>
+    <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={value?.length ? value : null}
-        placeholder={`${required ? placeholder + " (required)" : placeholder}`}
-        onChange={(value: string | string[]) =>
-          handleChange && handleChange(value)
-        }
-        filterOption={(input, options) =>
-          (options?.label || "")
+        value={selectedValue || null}
+        placeholder={`${required ? "" : placeholder}`}
+        onChange={handleSelectChange}
+        filterOption={(input, option) =>
+          (option?.label || "")
             .toString()
             .toLowerCase()
             .includes(input.toLowerCase())
@@ -81,7 +120,8 @@ const AppSelect = ({
           value,
         }))}
         {...props}
-      ></Select>
+      />
+
       {errorMessage && <div className={"error"}>{errorMessage}</div>}
     </div>
   );