From 2671d5e8fc9041778db8ae5b0ceefc8d9e211f87 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Mon, 8 Feb 2021 15:05:02 -0800
Subject: [PATCH 1/2] =?UTF-8?q?TextInput.js=20=E2=86=92=20TextInput.tsx?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 @types/@styled-system/props/index.d.ts        |  1 +
 src/{TextInput.js => TextInput.tsx}           | 72 ++++++++++++-------
 src/__tests__/{TextInput.js => TextInput.tsx} |  0
 .../{TextInput.js.snap => TextInput.tsx.snap} |  0
 4 files changed, 46 insertions(+), 27 deletions(-)
 create mode 100644 @types/@styled-system/props/index.d.ts
 rename src/{TextInput.js => TextInput.tsx} (64%)
 rename src/__tests__/{TextInput.js => TextInput.tsx} (100%)
 rename src/__tests__/__snapshots__/{TextInput.js.snap => TextInput.tsx.snap} (100%)

diff --git a/@types/@styled-system/props/index.d.ts b/@types/@styled-system/props/index.d.ts
new file mode 100644
index 00000000000..d1bbf5dad03
--- /dev/null
+++ b/@types/@styled-system/props/index.d.ts
@@ -0,0 +1 @@
+declare module '@styled-system/props'
diff --git a/src/TextInput.js b/src/TextInput.tsx
similarity index 64%
rename from src/TextInput.js
rename to src/TextInput.tsx
index 1b7a682631a..104b8fd7cd1 100644
--- a/src/TextInput.js
+++ b/src/TextInput.tsx
@@ -4,10 +4,11 @@ import classnames from 'classnames'
 import systemPropTypes from '@styled-system/prop-types'
 import {omit, pick} from '@styled-system/props'
 import styled, {css} from 'styled-components'
-import {variant, width, minWidth, maxWidth} from 'styled-system'
-import {COMMON, get} from './constants'
+import {variant, width, minWidth, maxWidth, MaxWidthProps, WidthProps, MinWidthProps} from 'styled-system'
+import {COMMON, get, SystemCommonProps} from './constants'
 import theme from './theme'
-import sx from './sx'
+import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
 
 const sizeVariants = variant({
   variants: {
@@ -26,28 +27,6 @@ const sizeVariants = variant({
   }
 })
 
-// using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input
-const TextInput = React.forwardRef(({icon: IconComponent, className, block, disabled, sx, ...rest}, ref) => {
-  // this class is necessary to style FilterSearch, plz no touchy!
-  const wrapperClasses = classnames(className, 'TextInput-wrapper')
-  const wrapperProps = pick(rest)
-  const inputProps = omit(rest)
-  return (
-    <Wrapper
-      className={wrapperClasses}
-      hasIcon={!!IconComponent}
-      block={block}
-      theme={theme}
-      disabled={disabled}
-      sx={sx}
-      {...wrapperProps}
-    >
-      {IconComponent && <IconComponent className="TextInput-icon" />}
-      <Input ref={ref} disabled={disabled} {...inputProps} />
-    </Wrapper>
-  )
-})
-
 const Input = styled.input`
   border: 0;
   font-size: inherit;
@@ -60,7 +39,18 @@ const Input = styled.input`
   }
 `
 
-const Wrapper = styled.span`
+type StyledWrapperProps = {
+  disabled?: boolean
+  hasIcon?: boolean
+  block?: boolean
+  variant?: 'small' | 'large'
+} & SystemCommonProps &
+  WidthProps &
+  MinWidthProps &
+  MaxWidthProps &
+  SxProp
+
+const Wrapper = styled.span<StyledWrapperProps>`
   display: inline-flex;
   align-items: stretch;
   min-height: 34px;
@@ -126,6 +116,33 @@ const Wrapper = styled.span`
   ${sx};
 `
 
+type TextInputInternalProps = {icon?: React.ComponentType<{className?: string}>} & ComponentProps<typeof Wrapper> &
+  ComponentProps<typeof Input>
+
+// using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input
+const TextInput = React.forwardRef<HTMLInputElement, TextInputInternalProps>(
+  ({icon: IconComponent, className, block, disabled, sx, ...rest}, ref) => {
+    // this class is necessary to style FilterSearch, plz no touchy!
+    const wrapperClasses = classnames(className, 'TextInput-wrapper')
+    const wrapperProps = pick(rest)
+    const inputProps = omit(rest)
+    return (
+      <Wrapper
+        className={wrapperClasses}
+        hasIcon={!!IconComponent}
+        block={block}
+        theme={theme}
+        disabled={disabled}
+        sx={sx}
+        {...wrapperProps}
+      >
+        {IconComponent && <IconComponent className="TextInput-icon" />}
+        <Input ref={ref} disabled={disabled} {...inputProps} />
+      </Wrapper>
+    )
+  }
+)
+
 TextInput.defaultProps = {
   theme,
   type: 'text'
@@ -133,7 +150,7 @@ TextInput.defaultProps = {
 
 TextInput.propTypes = {
   block: PropTypes.bool,
-  icon: PropTypes.elementType,
+  icon: PropTypes.any,
   maxWidth: systemPropTypes.layout.maxWidth,
   minWidth: systemPropTypes.layout.minWidth,
   variant: PropTypes.oneOf(['small', 'large']),
@@ -144,4 +161,5 @@ TextInput.propTypes = {
 
 TextInput.displayName = 'TextInput'
 
+export type TextInputProps = ComponentProps<typeof TextInput>
 export default TextInput
diff --git a/src/__tests__/TextInput.js b/src/__tests__/TextInput.tsx
similarity index 100%
rename from src/__tests__/TextInput.js
rename to src/__tests__/TextInput.tsx
diff --git a/src/__tests__/__snapshots__/TextInput.js.snap b/src/__tests__/__snapshots__/TextInput.tsx.snap
similarity index 100%
rename from src/__tests__/__snapshots__/TextInput.js.snap
rename to src/__tests__/__snapshots__/TextInput.tsx.snap

From 62f45a12fbd87d18adbc611a6410734f9fd16ab9 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Mon, 8 Feb 2021 15:06:08 -0800
Subject: [PATCH 2/2] Create stupid-seals-explode.md

---
 .changeset/stupid-seals-explode.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/stupid-seals-explode.md

diff --git a/.changeset/stupid-seals-explode.md b/.changeset/stupid-seals-explode.md
new file mode 100644
index 00000000000..cfd97c3a3d9
--- /dev/null
+++ b/.changeset/stupid-seals-explode.md
@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Migrate `TextInput` to TypeScript