From 92f06a469ce52ab8be9432ba287bae13aa16195a Mon Sep 17 00:00:00 2001
From: Vio <vio@beanon.com>
Date: Tue, 9 Jan 2024 23:51:18 +0100
Subject: [PATCH] refactor(ui): Input - convert to typescript

---
 .../ui/src/ui/input/{index.js => index.ts}    |  0
 packages/ui/src/ui/input/input.jsx            | 20 -------------------
 .../{input.stories.jsx => input.stories.tsx}  |  2 +-
 packages/ui/src/ui/input/input.tsx            | 16 +++++++++++++++
 4 files changed, 17 insertions(+), 21 deletions(-)
 rename packages/ui/src/ui/input/{index.js => index.ts} (100%)
 delete mode 100644 packages/ui/src/ui/input/input.jsx
 rename packages/ui/src/ui/input/{input.stories.jsx => input.stories.tsx} (78%)
 create mode 100644 packages/ui/src/ui/input/input.tsx

diff --git a/packages/ui/src/ui/input/index.js b/packages/ui/src/ui/input/index.ts
similarity index 100%
rename from packages/ui/src/ui/input/index.js
rename to packages/ui/src/ui/input/index.ts
diff --git a/packages/ui/src/ui/input/input.jsx b/packages/ui/src/ui/input/input.jsx
deleted file mode 100644
index 6b6c4d18cd..0000000000
--- a/packages/ui/src/ui/input/input.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-
-import css from './input.module.css';
-
-export const Input = ({ className, size, ...restProps }) => {
-  const rootClassName = cx(css.root, className, css[size]);
-  return <input className={rootClassName} {...restProps} />;
-};
-
-Input.propTypes = {
-  className: PropTypes.string,
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-};
-
-Input.defaultProps = {
-  className: '',
-  size: 'medium',
-};
diff --git a/packages/ui/src/ui/input/input.stories.jsx b/packages/ui/src/ui/input/input.stories.tsx
similarity index 78%
rename from packages/ui/src/ui/input/input.stories.jsx
rename to packages/ui/src/ui/input/input.stories.tsx
index 7ba2770a82..4d589094c8 100644
--- a/packages/ui/src/ui/input/input.stories.jsx
+++ b/packages/ui/src/ui/input/input.stories.tsx
@@ -10,4 +10,4 @@ export default {
 };
 
 export const Default = () => <Input placeholder="Search" />;
-export const WithSize = () => <Input size="small" placeholder="Search" />;
+export const WithSize = () => <Input placeholder="Search" size="small" />;
diff --git a/packages/ui/src/ui/input/input.tsx b/packages/ui/src/ui/input/input.tsx
new file mode 100644
index 0000000000..c81db08a3d
--- /dev/null
+++ b/packages/ui/src/ui/input/input.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import cx from 'classnames';
+
+import css from './input.module.css';
+
+interface InputProps {
+  size?: 'small' | 'medium' | 'large';
+}
+
+export const Input = (props: InputProps & Omit<React.ComponentProps<'input'>, 'size'>) => {
+  const { className = '', size = 'medium', ...restProps } = props;
+
+  const rootClassName = cx(css.root, className, css[size]);
+
+  return <input className={rootClassName} {...restProps} />;
+};