[UI] chore: fix lint, add changeset

sopt-makers · Apr 16, 2024 · 61d0f11 · 61d0f11
1 parent 46c16f8
commit 61d0f11
Show file tree

Hide file tree

Showing 10 changed files with 26 additions and 18 deletions.
diff --git a/.changeset/tasty-nails-hear.md b/.changeset/tasty-nails-hear.md
@@ -0,0 +1,5 @@
+---
+"@sopt-makers/ui": minor
+---
+
+add Input components
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}
diff --git a/packages/ui/Input/SearchField.tsx b/packages/ui/Input/SearchField.tsx
@@ -29,12 +29,12 @@ function SearchField(props: SearchFieldProps) {
   const disabled = inputProps.disabled || inputProps.readOnly || value.length === 0;
 
   return <div className={className} style={{ position: 'relative' }}>
-    <input type="text" className={`${S.input} ${S.searchField}`} onFocus={handleFocus} onBlur={handleBlur} value={value} {...inputProps} />
+    <input className={`${S.input} ${S.searchField}`} onBlur={handleBlur} onFocus={handleFocus} type="text" value={value} {...inputProps} />
     {!disabled && isFocused ?
       <button className={S.submitButton} type="reset">
         <XCircleIcon />
       </button> :
-      <button className={S.submitButton} type="submit" disabled={disabled} onClick={onSubmit}>
+      <button className={S.submitButton} disabled={disabled} onClick={onSubmit} type="submit">
         <SearchIcon disabled={disabled} />
       </button>
     }

diff --git a/packages/ui/Input/TextArea.tsx b/packages/ui/Input/TextArea.tsx
@@ -37,12 +37,12 @@ function TextArea(props: TextAreaProps) {
   const disabled = inputProps.disabled || inputProps.readOnly || value.length === 0 || hasError();
   const required = inputProps.required ? <span className={S.required}>*</span> : null;
   const description = descriptionText ? <p className={S.description}>{descriptionText}</p> : null;
-  const input = <textarea className={`${S.input} ${S.textarea} ${hasError() ? S.inputError : ''}`} style={{ height }} value={value} onChange={handleInputChange} {...restInputProps} />;
+  const input = <textarea className={`${S.input} ${S.textarea} ${hasError() ? S.inputError : ''}`} onChange={handleInputChange} style={{ height }} value={value} {...restInputProps} />;
 
   return <div className={className} style={{ position: 'relative' }}>
     {labelText ? <label className={S.label}><span>{labelText}{required}</span>{description}{input}</label> : <>{description}{input}</>}
 
-    <button className={S.submitButton} type="submit" disabled={disabled} style={{ transform: `translateY(-48px)` }} onClick={onSubmit}><SendIcon disabled={disabled} /></button>
+    <button className={S.submitButton} disabled={disabled} onClick={onSubmit} style={{ transform: `translateY(-48px)` }} type="submit"><SendIcon disabled={disabled} /></button>
 
     <div className={S.inputBottom}>
       {hasError() ? <div className={S.errorMessage}><AlertCircleIcon /><p>{errorMessage ?? 'error'}</p></div> : <div> </div>}

diff --git a/packages/ui/Input/icons/AlertCircleIcon.tsx b/packages/ui/Input/icons/AlertCircleIcon.tsx
@@ -1,17 +1,17 @@
 function AlertCircleIcon() {
   return <svg
-    width="14"
-    height="14"
     fill="none"
+    height="14"
     viewBox="0 0 24 24"
+    width="14"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M12 8V12M12 16H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
       stroke="#F04251"
-      strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
+      strokeWidth="1.5"
     />
   </svg>
 }

diff --git a/packages/ui/Input/icons/SearchIcon.tsx b/packages/ui/Input/icons/SearchIcon.tsx
@@ -4,18 +4,18 @@ interface SearchIconProps {
 
 function SearchIcon({ disabled }: SearchIconProps) {
   return <svg
-    width="20"
-    height="20"
     fill="none"
+    height="20"
     viewBox="0 0 24 24"
+    width="20"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M21 21L16.65 16.65M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
       stroke={disabled ? '#515159' : '#FFFFFF'}
-      strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
+      strokeWidth="1.5"
     />
   </svg>
 }

diff --git a/packages/ui/Input/icons/SendIcon.tsx b/packages/ui/Input/icons/SendIcon.tsx
@@ -4,18 +4,18 @@ interface SendIconProps {
 
 function SendIcon({ disabled }: SendIconProps) {
   return <svg
-    width="20"
-    height="20"
     fill="none"
+    height="20"
     viewBox="0 0 24 24"
+    width="20"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M10.4995 13.5001L20.9995 3.00005M10.6271 13.8281L13.2552 20.5861C13.4867 21.1815 13.6025 21.4791 13.7693 21.566C13.9139 21.6414 14.0862 21.6415 14.2308 21.5663C14.3977 21.4796 14.5139 21.1821 14.7461 20.587L21.3364 3.69925C21.5461 3.16207 21.6509 2.89348 21.5935 2.72185C21.5437 2.5728 21.4268 2.45583 21.2777 2.40604C21.1061 2.34871 20.8375 2.45352 20.3003 2.66315L3.41258 9.25349C2.8175 9.48572 2.51997 9.60183 2.43326 9.76873C2.35809 9.91342 2.35819 10.0857 2.43353 10.2303C2.52043 10.3971 2.81811 10.5128 3.41345 10.7444L10.1715 13.3725C10.2923 13.4195 10.3527 13.443 10.4036 13.4793C10.4487 13.5114 10.4881 13.5509 10.5203 13.596C10.5566 13.6468 10.5801 13.7073 10.6271 13.8281Z"
       stroke={disabled ? '#515159' : '#FFFFFF'}
-      strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
+      strokeWidth="1.5"
     />
   </svg>
 }

diff --git a/packages/ui/Input/icons/XCircleIcon.tsx b/packages/ui/Input/icons/XCircleIcon.tsx
@@ -1,17 +1,17 @@
 function XCircleIcon() {
   return <svg
-    width="20"
-    height="20"
     fill="none"
+    height="20"
     viewBox="0 0 24 24"
+    width="20"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M15 9L9 15M9 9L15 15M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
       stroke="#FFFFFF"
-      strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
+      strokeWidth="1.5"
     />
   </svg>
 }

diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
@@ -13,6 +13,6 @@
     "target": "esnext"
   },
   "extends": "tsconfig/react-library.json",
-  "include": ["index.ts", "turbo/generators/config.ts"],
+  "include": ["**/*.ts", "**/*.tsx", "index.ts", "turbo/generators/config.ts"],
   "exclude": ["dist", "build", "node_modules"]
 }
diff --git a/yarn.lock b/yarn.lock
@@ -10453,7 +10453,7 @@ typedarray@^0.0.6:
 
 typescript@^4.5.2:
   version "4.9.5"
-  resolved "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
   integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
 
 typescript@^5.2.2: