Add disabled input (#126)

add disabled input

Author: 0xKurt

packages/ui/src/components/Form/Form.stories.tsx

@@ -14,7 +14,17 @@ const fields: FormField[] = [
     component: "Input",
     placeholder: "your cool round name",
   },
-
+  {
+    field: {
+      name: "disabledField",
+      label: "Disabled input",
+      className: "border-grey-300",
+      validation: { stringValidation: { minLength: 7 } },
+    },
+    component: "Input",
+    placeholder: "This field is disabled",
+    disabled: true,
+  },
   {
     field: {
       name: "roundDescription",

packages/ui/src/types/form/fieldTypes.ts

@@ -1,6 +1,7 @@
 import { FieldArrayProps, MetricsProps } from "@/components/Form";
 import { FileUploadProps } from "@/primitives/FileUpload";
 import { SelectProps } from "@/primitives/Select";
+import { InputProps } from "@/ui-shadcn/input";
 
 import { Markdown } from "../markdown";
 
@@ -49,7 +50,7 @@ export interface BaseField {
   className?: string;
 }
 
-export interface InputField {
+export interface InputField extends InputProps {
   field: BaseField;
   component: "Input";
   type?: string;

packages/ui/src/ui-shadcn/input.tsx

@@ -5,14 +5,17 @@ import { cn } from "@/lib/utils";
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
+  ({ className, type, disabled, ...props }, ref) => {
     return (
       <input
         type={type}
         className={cn(
           "flex h-10 w-full rounded-md border border-grey-100 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-black placeholder:text-grey-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-black dark:bg-black dark:ring-offset-black dark:file:text-grey-50 dark:placeholder:text-grey-500 dark:focus-visible:ring-grey-100",
+          disabled &&
+            "flex cursor-not-allowed gap-2 rounded-md bg-grey-100 px-3 py-2 font-normal text-grey-500",
           className,
         )}
+        disabled={disabled}
         ref={ref}
         {...props}
       />