feat: use predefined HTML element props as a base for our components …

…build on top of those (#16)

* feat: use HTML element props as base for our input and button props

* fix: remove "incremental" option, since without tsbuildinfo it fails to build

src/design.system/button/button.tsx

@@ -1,32 +1,28 @@
-import React, { FC } from 'react';
+import React, { ButtonHTMLAttributes, FC } from 'react';
 import { StyledButton, ButtonContainer } from './button.styled';
 
-interface ButtonProps {
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   // Additional custom props if needed
   variant?: string;
-  children: JSX.Element | JSX.Element[];
-  onClick?: () => void;
   style?: object;
-  disabled?: boolean;
-  type?: 'button' | 'submit' | 'reset' | undefined;
 }
 
 export const Button: FC<ButtonProps> = ({
   variant = 'primary',
   children,
   style,
-  onClick,
   disabled,
   type = 'button',
+  ...rest
 }) => {
   return (
     <ButtonContainer variant={variant} disabled={disabled}>
       <StyledButton
         type={type}
         variant={variant}
         disabled={disabled}
-        onClick={onClick}
         style={{ ...style }}
+        {...rest}
       >
         {children}
       </StyledButton>

src/design.system/input/input.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useState } from 'react';
+import React, { ChangeEvent, InputHTMLAttributes, useState } from 'react';
 import {
   StyledInputContainer,
   StyledInput,
@@ -11,17 +11,13 @@ import EyeOpenIcon from '@/assets/icons/eye-open.svg';
 import EyeCloseIcon from '@/assets/icons/eye-close.svg';
 import { Tooltip } from '../tooltip';
 import theme from '@/styles/palette';
-interface InputProps {
+
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
   label?: string;
-  value: string;
   onChange: (value: string) => void;
-  type?: string;
   error?: string;
   style?: React.CSSProperties;
-  placeholder?: string;
-  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
   tooltip?: string;
-  required?: boolean;
 }
 
 export function Input({
@@ -31,10 +27,11 @@ export function Input({
   type = 'text',
   error = '',
   style = {},
-  placeholder,
   onKeyDown,
   tooltip,
   required,
+  autoComplete = "off",
+  ...rest
 }: InputProps): JSX.Element {
   const [showPassword, setShowPassword] = useState<boolean>(false);
 
@@ -68,9 +65,9 @@ export function Input({
           type={showPassword ? 'text' : type}
           value={value}
           onChange={handleChange}
-          autoComplete="off"
-          placeholder={placeholder}
+          autoComplete={autoComplete}
           onKeyDown={onKeyDown}
+          {...rest}
         />
         {type === 'password' && (
           <DisplayIconsWrapper onClick={() => setShowPassword(!showPassword)}>

tsconfig.json

@@ -27,8 +27,7 @@
       "@/*": [
         "./src/*"
       ]
-    },
-    "incremental": true
+    }
   },
   "include": [
     "next-env.d.ts",