Merge pull request #382 from code0-tech/feat/#215

Suggestions

Author: nicosammito

.storybook/global.scss

@@ -4,10 +4,7 @@ html {
 }
 
 .sb-show-main {
-  background: url(https://applescoop.org/image/wallpapers/mac/windows-10-stock-hd-cells-glowing-dark-22-09-2024-1727068449-hd-wallpaper.jpeg);
-  transition: background-color 0.3s;
-  background-position: center;
-  background-size: cover;
+  background: #030014 !important;
 }
 
 .sb-main-fullscreen {

src/components/d-flow/suggestions/DFlowSuggestionMenu.stories.tsx

@@ -44,6 +44,7 @@ const SuggestionMenu = () => {
     return <div>
         <TextInput title={"Text"}
                    clearable
+                   transformValue={(value) => <span style={{color: "red"}}>{value}</span>}
                    suggestionsFooter={<DFlowSuggestionMenuFooter/>}
                    suggestions={toInputSuggestions(result)}
                    description={"Type what ever text you like"}

src/components/form/Input.style.scss

@@ -23,6 +23,18 @@
     @include box.boxActiveStyle(variables.$primary, variables.$white, variables.$white);
   }
 
+  &__syntax {
+    position: absolute;
+    z-index: -1;
+    overflow: hidden;
+    font-size: variables.$sm;
+    color: rgba(variables.$white, .5);
+    white-space: nowrap;
+    padding: $padding $padding;
+    box-sizing: border-box;
+
+  }
+
   &__left, &__right {
     display: flex;
     align-items: stretch;
@@ -73,11 +85,16 @@
     width: 100%;
     box-shadow: none;
     font-size: variables.$sm;
+    box-sizing: border-box;
     color: rgba(variables.$white, .5);
 
     & {
       @include helpers.fontStyle();
     }
+
+    &--syntax {
+      color: transparent;
+    }
   }
 
 

src/components/form/Input.tsx

@@ -55,16 +55,20 @@ export type Code0Input = Omit<
 
 // Input component props definition
 export interface InputProps<T> extends Code0Input, ValidationProps<T> {
-    suggestions?: InputSuggestion[]; // Optional suggestions shown in dropdown
-    suggestionsHeader?: React.ReactNode; // Custom header above suggestions
-    suggestionsFooter?: React.ReactNode; // Custom footer below suggestions
-    wrapperComponent?: Code0Component<HTMLDivElement>; // Props for the wrapping div
-    right?: React.ReactNode; // Right-side icon or element
-    left?: React.ReactNode; // Left-side icon or element
-    leftType?: "action" | "placeholder" | "icon"; // Visual type for left slot
-    rightType?: "action" | "placeholder" | "icon"; // Visual type for right slot
-    title?: React.ReactNode; // Input label
-    description?: React.ReactNode; // Label description below title
+
+    suggestions?: InputSuggestion[] // Optional suggestions shown in dropdown
+    suggestionsHeader?: React.ReactNode // Custom header above suggestions
+    suggestionsFooter?: React.ReactNode // Custom footer below suggestions
+    transformValue?: (value: T) => React.ReactNode | T // Optional value transformation function
+
+    wrapperComponent?: Code0Component<HTMLDivElement> // Props for the wrapping div
+    right?: React.ReactNode // Right-side icon or element
+    left?: React.ReactNode // Left-side icon or element
+    leftType?: "action" | "placeholder" | "icon" // Visual type for left slot
+    rightType?: "action" | "placeholder" | "icon" // Visual type for right slot
+    title?: React.ReactNode // Input label
+    description?: React.ReactNode // Label description below title
+
 }
 
 const Input: ForwardRefExoticComponent<InputProps<any>> = React.forwardRef(
@@ -137,7 +141,7 @@ const Input: ForwardRefExoticComponent<InputProps<any>> = React.forwardRef(
                 <MenuTrigger asChild>
                     <input
                         ref={inputRef as LegacyRef<HTMLInputElement>} // Cast for TS compatibility
-                        {...mergeCode0Props("input__control", rest)} // Merge styling and native props
+                        {...mergeCode0Props(`input__control ${props.transformValue ? "input__control--syntax" : ""}`, rest)}
                         onFocus={() => !open && setOpen(true)} // Open on focus
                         onKeyDown={(e) => {
                             if (e.key === "ArrowDown") {
@@ -188,10 +192,21 @@ const Input: ForwardRefExoticComponent<InputProps<any>> = React.forwardRef(
                         <input
                             tabIndex={2} // Ensure keyboard tab order
                             ref={inputRef as LegacyRef<HTMLInputElement>}
-                            {...mergeCode0Props("input__control", rest)} // Basic input styling and props
+                            {...mergeCode0Props(`input__control ${props.transformValue ? "input__control--syntax" : ""}`, rest)} // Basic input styling and props
                         />
                     )}
 
+                    {props.transformValue ? (
+                        <div className={"input__syntax"} style={{
+                            width: inputRef?.current?.clientWidth ?? 0,
+                            height: inputRef?.current?.clientHeight ?? 0,
+                            top: inputRef?.current?.offsetTop ?? 0,
+                            left: inputRef?.current?.offsetLeft ?? 0,
+                        }}>
+                            {props.transformValue(inputRef?.current?.value ?? inputRef?.current?.placeholder ?? "sd" )} {/* Render transformed value */}
+                        </div>
+                    ) : null}
+
                     {right &&
                         <div className={`input__right input__right--${rightType}`}>{right}</div>} {/* Right element */}
                 </div>