enhancement: update input component dynamic text alignment (#2712)

core/src/types/setting/settingComponent.ts

@@ -20,6 +20,7 @@ export type InputComponentProps = {
   placeholder: string
   value: string
   type?: InputType
+  textAlign?: 'left' | 'right'
 }
 
 export type SliderComponentProps = {

extensions/monitoring-extension/resources/settings.json

@@ -15,7 +15,8 @@
     "controllerType": "input",
     "controllerProps": {
       "value": "120000",
-      "placeholder": "Interval in milliseconds. E.g. 120000"
+      "placeholder": "Interval in milliseconds. E.g. 120000",
+      "textAlign": "right"
     }
   }
 ]

uikit/src/input/index.tsx

@@ -2,14 +2,20 @@ import { forwardRef } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  textAlign?: 'left' | 'right'
+}
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
+  ({ className, type, textAlign, ...props }, ref) => {
     return (
       <input
         type={type}
-        className={twMerge('input', className)}
+        className={twMerge(
+          'input',
+          className,
+          textAlign === 'right' && 'text-right'
+        )}
         ref={ref}
         {...props}
       />

uikit/src/input/styles.scss

@@ -3,4 +3,7 @@
   @apply disabled:text-muted-foreground disabled:cursor-not-allowed disabled:bg-zinc-100 disabled:dark:bg-zinc-800 disabled:dark:text-zinc-600;
   @apply focus-within:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1;
   @apply file:border-0 file:bg-transparent file:font-medium;
+  &.text-right {
+    text-align: right;
+  }
 }

web/containers/SliderRightPanel/index.tsx

@@ -80,6 +80,7 @@ const SliderRightPanel: React.FC<Props> = ({
               min={min}
               max={max}
               value={String(value)}
+              textAlign="right"
               disabled={!enabled}
               onBlur={(e) => {
                 if (Number(e.target.value) > Number(max)) {

web/screens/Settings/SettingDetail/SettingDetailItem/SettingDetailTextInputItem/index.tsx

@@ -21,7 +21,7 @@ const SettingDetailTextInputItem: React.FC<Props> = ({
   settingProps,
   onValueChanged,
 }) => {
-  const { value, type, placeholder } =
+  const { value, type, placeholder, textAlign } =
     settingProps.controllerProps as InputComponentProps
 
   const description = marked.parse(settingProps.description ?? '', {
@@ -43,6 +43,7 @@ const SettingDetailTextInputItem: React.FC<Props> = ({
       <Input
         placeholder={placeholder}
         type={type}
+        textAlign={textAlign}
         value={value}
         className="ml-4 w-[360px]"
         onChange={(e) => onValueChanged?.(e.target.value)}