chore(TextInput): converted examples to typescript

packages/react-core/src/components/TextInput/examples/TextInput.md

@@ -9,265 +9,42 @@ propComponents: ['TextInput']
 
 ### Basic
 
-```js
-import React from 'react';
-import { TextInput } from '@patternfly/react-core';
-
-class SimpleTextInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: ''
-    };
-    this.handleTextInputChange = value => {
-      this.setState({ value });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-
-    return (
-      <TextInput value={value} type="text" onChange={this.handleTextInputChange} aria-label="text input example" />
-    );
-  }
-}
+```ts file="./TextInputBasic.tsx"
 ```
 
 ### Disabled
 
-```js
-import React from 'react';
-import { TextInput } from '@patternfly/react-core';
-
-<TextInput
-  value="disabled text input example"
-  type="text"
-  onChange={this.handleTextInputChange}
-  aria-label="disabled text input example"
-  isDisabled
-/>;
+```ts file="./TextInputDisabled.tsx"
 ```
 
 ### Truncated on Left
 
-```js
-import React from 'react';
-import { TextInput } from '@patternfly/react-core';
-
-class LeftTruncatedTextInput extends React.Component {
-
-constructor(props) {
-    super(props);
-    this.state = {
-      value: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
-    };
-    this.handleTextInputChange = value => {
-      this.setState({ value });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-    return (
-      <TextInput isLeftTruncated value={value} type="text" onChange={this.handleTextInputChange} aria-label="left-truncated text input example"  />
-    );
-  }
-}
+```ts file="./TextInputLeftTruncated.tsx"
 ```
 
 ### Read only
 
-```js
-import React from 'react';
-import { Checkbox, TextInput } from '@patternfly/react-core';
-
-const ReadOnlyTextArea = () => {
-  const [isPlainChecked, setIsPlainChecked] = React.useState(false);
-
-  return (
-    <React.Fragment>
-      <div style={{ marginBottom: '12px' }}>
-        <Checkbox
-          id="isPlain"
-          key="isPlain"
-          label="Plain read only variant"
-          isChecked={isPlainChecked}
-          onChange={checked => setIsPlainChecked(checked)}
-        />
-      </div>
-      <TextInput
-        aria-label="read only text input example"
-        value="read only text input example"
-        readOnlyVariant={isPlainChecked ? 'plain' : 'default'}
-      />
-    </React.Fragment>
-  );
-};
+```ts file="./TextInputReadOnly.tsx"
 ```
 
 ### Invalid
 
-```js
-import React from 'react';
-import { TextInput, ValidatedOptions } from '@patternfly/react-core';
-
-class InvalidTextInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: ''
-    };
-    this.handleInvalidTextInputChange = value => {
-      this.setState({ value });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-
-    return (
-      <TextInput
-        value={value}
-        onChange={this.handleInvalidTextInputChange}
-        isRequired
-        validated={ValidatedOptions.error}
-        type="text"
-        aria-label="invalid text input example"
-      />
-    );
-  }
-}
+```ts file="./TextInputInvalid.tsx"
 ```
 
 ### Select text using ref
 
-```js
-import React from 'react';
-import { TextInput } from '@patternfly/react-core';
-
-TextInputSelectAll = () => {
-  const [value, setValue] = React.useState('select all on click');
-  const ref = React.useRef(null);
-  return (
-    <TextInput
-      ref={ref}
-      value={value}
-      onFocus={() => ref && ref.current && ref.current.select()}
-      onChange={value => setValue(value)}
-      aria-label="select-all"
-    />
-  );
-};
+```ts file="./TextInputSelectUsingRef.tsx"
 ```
 
 ### Icon variants
 
-```js
-import React from 'react';
-import { TextInput } from '@patternfly/react-core';
-
-SimpleTextInput = () => {
-  const [calendar, setCalendar] = React.useState('');
-  const [clock, setClock] = React.useState('');
-  const [custom, setCustom] = React.useState('');
-
-  return (
-    <>
-      <TextInput
-        value={calendar}
-        type="text"
-        iconVariant="calendar"
-        onChange={value => setCalendar(value)}
-        aria-label="text input example"
-      />
-      <br />
-      <br />
-      <TextInput
-        value={clock}
-        type="text"
-        iconVariant="clock"
-        onChange={value => setClock(value)}
-        aria-label="text input example"
-      />
-      <br />
-      <br />
-      <TextInput
-        value={custom}
-        type="text"
-        customIconDimensions="24px 24px"
-        customIconUrl='data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="%23a18fff" d="M158.87.15c-16.16-1.52-31.2 8.42-35.33 24.12l-14.81 56.27c187.62 5.49 314.54 130.61 322.48 317l56.94-15.78c15.72-4.36 25.49-19.68 23.62-35.9C490.89 165.08 340.78 17.32 158.87.15zm-58.47 112L.55 491.64a16.21 16.21 0 0 0 20 19.75l379-105.1c-4.27-174.89-123.08-292.14-299.15-294.1zM128 416a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm48-152a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm104 104a32 32 0 1 1 32-32 32 32 0 0 1-32 32z"/%3E%3C/svg%3E'
-        onChange={value => setCustom(value)}
-        aria-label="text input example"
-      />
-    </>
-  );
-};
+```ts file="./TextInputIcon.tsx"
 ```
 
 ### Icon sprite variants
 
 **Note:** The icons for the success, invalid, calendar, etc. variations in form control elements are applied as background images to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `isIconSprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
 
-```js isBeta
-import React from 'react';
-import { TextInput } from '@patternfly/react-core';
-
-IconSpriteTextInputs = () => {
-  const [success, setSuccess] = React.useState('');
-  const [warning, setWarning] = React.useState('');
-  const [error, setError] = React.useState('');
-  const [calendar, setCalendar] = React.useState('');
-  const [clock, setClock] = React.useState('');
-
-  return (
-    <>
-      <TextInput
-        validated={ValidatedOptions.success}
-        isIconSprite
-        type="text"
-        onChange={value => setSuccess(value)}
-        aria-label="success icon sprite text input example"
-      />
-      <br />
-      <br />
-      <TextInput
-        validated={ValidatedOptions.warning}
-        isIconSprite
-        type="text"
-        onChange={value => setWarning(value)}
-        aria-label="warning icon sprite text input example"
-      />
-      <br />
-      <br />
-      <TextInput
-        validated={ValidatedOptions.error}
-        isIconSprite
-        type="text"
-        onChange={value => setError(value)}
-        aria-label="error icon sprite text input example"
-      />
-      <br />
-      <br />
-      <TextInput
-        value={calendar}
-        isIconSprite
-        type="text"
-        iconVariant="calendar"
-        onChange={value => setCalendar(value)}
-        aria-label="calendar icon sprite text input example"
-      />
-      <br />
-      <br />
-      <TextInput
-        value={clock}
-        isIconSprite
-        type="text"
-        iconVariant="clock"
-        onChange={value => setClock(value)}
-        aria-label="clock icon sprite text input example"
-      />
-    </>
-  );
-};
+```ts isBeta file="./TextInputIconSprite.tsx"
 ```

packages/react-core/src/components/TextInput/examples/TextInputBasic.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TextInput } from '@patternfly/react-core';
+
+export const TextInputBasic: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return <TextInput value={value} type="text" onChange={value => setValue(value)} aria-label="text input example" />;
+};

packages/react-core/src/components/TextInput/examples/TextInputDisabled.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TextInput } from '@patternfly/react-core';
+
+export const TextInputBasic: React.FunctionComponent = () => (
+  <TextInput value="disabled text input example" type="text" aria-label="disabled text input example" isDisabled />
+);

packages/react-core/src/components/TextInput/examples/TextInputIcon.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { TextInput } from '@patternfly/react-core';
+
+export const TextInputIcon: React.FunctionComponent = () => {
+  const [calendar, setCalendar] = React.useState('');
+  const [clock, setClock] = React.useState('');
+  const [custom, setCustom] = React.useState('');
+
+  return (
+    <>
+      <TextInput
+        value={calendar}
+        type="text"
+        iconVariant="calendar"
+        onChange={value => setCalendar(value)}
+        aria-label="text input example"
+      />
+      <br />
+      <br />
+      <TextInput
+        value={clock}
+        type="text"
+        iconVariant="clock"
+        onChange={value => setClock(value)}
+        aria-label="text input example"
+      />
+      <br />
+      <br />
+      <TextInput
+        value={custom}
+        type="text"
+        customIconDimensions="24px 24px"
+        customIconUrl='data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="%23a18fff" d="M158.87.15c-16.16-1.52-31.2 8.42-35.33 24.12l-14.81 56.27c187.62 5.49 314.54 130.61 322.48 317l56.94-15.78c15.72-4.36 25.49-19.68 23.62-35.9C490.89 165.08 340.78 17.32 158.87.15zm-58.47 112L.55 491.64a16.21 16.21 0 0 0 20 19.75l379-105.1c-4.27-174.89-123.08-292.14-299.15-294.1zM128 416a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm48-152a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm104 104a32 32 0 1 1 32-32 32 32 0 0 1-32 32z"/%3E%3C/svg%3E'
+        onChange={value => setCustom(value)}
+        aria-label="text input example"
+      />
+    </>
+  );
+};

packages/react-core/src/components/TextInput/examples/TextInputIconSprite.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { TextInput } from '@patternfly/react-core';
+
+export const TextInputIconSprite: React.FunctionComponent = () => {
+  const [calendar, setCalendar] = React.useState('');
+  const [clock, setClock] = React.useState('');
+  const [success, setSuccess] = React.useState('');
+  const [warning, setWarning] = React.useState('');
+  const [error, setError] = React.useState('');
+
+  return (
+    <>
+      <TextInput
+        value={success}
+        validated={'success'}
+        isIconSprite
+        type="text"
+        onChange={value => setSuccess(value)}
+        aria-label="success icon sprite text input example"
+      />
+      <br />
+      <br />
+      <TextInput
+        value={warning}
+        validated={'warning'}
+        isIconSprite
+        type="text"
+        onChange={value => setWarning(value)}
+        aria-label="warning icon sprite text input example"
+      />
+      <br />
+      <br />
+      <TextInput
+        value={error}
+        validated={'error'}
+        isIconSprite
+        type="text"
+        onChange={value => setError(value)}
+        aria-label="error icon sprite text input example"
+      />
+      <br />
+      <br />
+      <TextInput
+        value={calendar}
+        isIconSprite
+        type="text"
+        iconVariant="calendar"
+        onChange={value => setCalendar(value)}
+        aria-label="calendar icon sprite text input example"
+      />
+      <br />
+      <br />
+      <TextInput
+        value={clock}
+        isIconSprite
+        type="text"
+        iconVariant="clock"
+        onChange={value => setClock(value)}
+        aria-label="clock icon sprite text input example"
+      />
+    </>
+  );
+};