refactor(ui): Input - convert to typescript

relative-ci · Jan 9, 2024 · 92f06a4 · 92f06a4
1 parent 07b3a48
commit 92f06a4
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 21 deletions.
diff --git a/packages/ui/src/ui/input/index.js → packages/ui/src/ui/input/index.ts b/packages/ui/src/ui/input/index.js → 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
diff --git a/packages/ui/src/ui/input/input.stories.jsx → packages/ui/src/ui/input/input.stories.tsx b/packages/ui/src/ui/input/input.stories.jsx → 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
@@ -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} />;
+};