chore(TextInputGroup): convert examples and demos to typescript=

.eslintrc.json

@@ -123,7 +123,7 @@
     },
     "overrides": [
         {
-            "files": ["**/examples/*"],
+            "files": ["**/examples/*", "**/demos/examples/**/*"],
             "rules": {
                 "patternfly-react/no-anonymous-functions": "off"
             }

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

@@ -13,139 +13,20 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 ### Basic
 
-```js
-import React from 'react';
-import { TextInputGroup, TextInputGroupMain } from '@patternfly/react-core';
-
-const BasicTextInputGroup = () => (
-  <TextInputGroup>
-    <TextInputGroupMain />
-  </TextInputGroup>
-);
+```ts file="./TextInputGroupBasic.tsx"
 ```
 
 ### Disabled
 
-```js
-import React from 'react';
-import { TextInputGroup, TextInputGroupMain } from '@patternfly/react-core';
-
-const DisabledTextInputGroup = () => (
-  <TextInputGroup isDisabled>
-    <TextInputGroupMain value="Disabled" type="text" aria-label="Disabled text input group example input" />
-  </TextInputGroup>
-);
+```ts file="./TextInputGroupDisabled.tsx"
 ```
 
 ### Utilities and icon
 
-```js
-import React from 'react';
-import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Button } from '@patternfly/react-core';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
-
-const TextInputGroupWithIcons = () => {
-  const [inputValue, setInputValue] = React.useState('');
-
-  /** callback for updating the inputValue state in this component so that the input can be controlled */
-  const handleInputChange = (value, _event) => {
-    setInputValue(value);
-  };
-
-  /** show the input clearing button only when the input is not empty */
-  const showClearButton = inputValue;
-
-  /** callback for clearing the text input */
-  const clearInput = () => {
-    setInputValue('');
-  };
-
-  return (
-    <TextInputGroup>
-      <TextInputGroupMain icon={<SearchIcon />} value={inputValue} onChange={handleInputChange} />
-      <TextInputGroupUtilities>
-        {showClearButton && (
-          <Button variant="plain" onClick={clearInput} aria-label="Clear button and input">
-            <TimesIcon />
-          </Button>
-        )}
-      </TextInputGroupUtilities>
-    </TextInputGroup>
-  );
-};
+```ts file="./TextInputGroupUtilitiesAndIcon.tsx"
 ```
 
 ### Filters
 
-```js
-import React from 'react';
-import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Button } from '@patternfly/react-core';
-import { Chip, ChipGroup } from '@patternfly/react-core';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
-
-const TextInputGroupWithChips = () => {
-  const [inputValue, setInputValue] = React.useState('');
-  const [currentChips, setCurrentChips] = React.useState([
-    'chip one',
-    'chip two',
-    'chip three',
-    'chip four',
-    'chip five',
-    'chip six',
-    'chip seven',
-    'chip eight',
-    'chip nine',
-    'chip ten',
-    'chip eleven',
-    'chip twelve',
-    'chip thirteen',
-    'chip fourteen'
-  ]);
-
-  /** show the search icon only when there are no chips to prevent the chips from being displayed behind the icon */
-  const showSearchIcon = !currentChips.length;
-
-  /** callback for updating the inputValue state in this component so that the input can be controlled */
-  const handleInputChange = (value, _event) => {
-    setInputValue(value);
-  };
-
-  /** callback for removing a chip from the chip selections */
-  const deleteChip = chipToDelete => {
-    const newChips = currentChips.filter(chip => !Object.is(chip, chipToDelete));
-    setCurrentChips(newChips);
-  };
-
-  /** show the input/chip clearing button only when either the text input or chip group are not empty */
-  const showClearButton = inputValue || !!currentChips.length;
-
-  /** callback for clearing all selected chips and the text input */
-  const clearChipsAndInput = () => {
-    setCurrentChips([]);
-    setInputValue('');
-  };
-
-  return (
-    <TextInputGroup>
-      <TextInputGroupMain icon={showSearchIcon && <SearchIcon />} value={inputValue} onChange={handleInputChange}>
-        <ChipGroup>
-          {currentChips.map(currentChip => (
-            <Chip key={currentChip} onClick={() => deleteChip(currentChip)}>
-              {currentChip}
-            </Chip>
-          ))}
-        </ChipGroup>
-      </TextInputGroupMain>
-      <TextInputGroupUtilities>
-        {showClearButton && (
-          <Button variant="plain" onClick={clearChipsAndInput} aria-label="Clear button and input">
-            <TimesIcon />
-          </Button>
-        )}
-      </TextInputGroupUtilities>
-    </TextInputGroup>
-  );
-};
+```ts file="./TextInputGroupFilters.tsx"
 ```

packages/react-core/src/components/TextInputGroup/examples/TextInputGroupBasic.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TextInputGroup, TextInputGroupMain } from '@patternfly/react-core';
+
+export const TextInputGroupBasic: React.FunctionComponent = () => (
+  <TextInputGroup>
+    <TextInputGroupMain />
+  </TextInputGroup>
+);

packages/react-core/src/components/TextInputGroup/examples/TextInputGroupDisabled.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TextInputGroup, TextInputGroupMain } from '@patternfly/react-core';
+
+export const TextInputGroupDisabled: React.FunctionComponent = () => (
+  <TextInputGroup isDisabled>
+    <TextInputGroupMain value="Disabled" type="text" aria-label="Disabled text input group example input" />
+  </TextInputGroup>
+);

packages/react-core/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Button } from '@patternfly/react-core';
+import { Chip, ChipGroup } from '@patternfly/react-core';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+
+export const TextInputGroupFilters: React.FunctionComponent = () => {
+  const [inputValue, setInputValue] = React.useState('');
+  const [currentChips, setCurrentChips] = React.useState([
+    'chip one',
+    'chip two',
+    'chip three',
+    'chip four',
+    'chip five',
+    'chip six',
+    'chip seven',
+    'chip eight',
+    'chip nine',
+    'chip ten',
+    'chip eleven',
+    'chip twelve',
+    'chip thirteen',
+    'chip fourteen'
+  ]);
+
+  /** show the search icon only when there are no chips to prevent the chips from being displayed behind the icon */
+  const showSearchIcon = !currentChips.length;
+
+  /** callback for updating the inputValue state in this component so that the input can be controlled */
+  const handleInputChange = (value: string, _event: React.FormEvent<HTMLInputElement>) => {
+    setInputValue(value);
+  };
+
+  /** callback for removing a chip from the chip selections */
+  const deleteChip = (chipToDelete: string) => {
+    const newChips = currentChips.filter(chip => !Object.is(chip, chipToDelete));
+    setCurrentChips(newChips);
+  };
+
+  /** show the input/chip clearing button only when either the text input or chip group are not empty */
+  const showClearButton = !!inputValue || !!currentChips.length;
+
+  /** callback for clearing all selected chips and the text input */
+  const clearChipsAndInput = () => {
+    setCurrentChips([]);
+    setInputValue('');
+  };
+
+  return (
+    <TextInputGroup>
+      <TextInputGroupMain icon={showSearchIcon && <SearchIcon />} value={inputValue} onChange={handleInputChange}>
+        <ChipGroup>
+          {currentChips.map(currentChip => (
+            <Chip key={currentChip} onClick={() => deleteChip(currentChip)}>
+              {currentChip}
+            </Chip>
+          ))}
+        </ChipGroup>
+      </TextInputGroupMain>
+      <TextInputGroupUtilities>
+        {showClearButton && (
+          <Button variant="plain" onClick={clearChipsAndInput} aria-label="Clear button and input">
+            <TimesIcon />
+          </Button>
+        )}
+      </TextInputGroupUtilities>
+    </TextInputGroup>
+  );
+};

packages/react-core/src/components/TextInputGroup/examples/TextInputGroupUtilitiesAndIcon.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Button } from '@patternfly/react-core';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+
+export const TextInputGroupUtilitiesAndIcon: React.FunctionComponent = () => {
+  const [inputValue, setInputValue] = React.useState('');
+
+  /** callback for updating the inputValue state in this component so that the input can be controlled */
+  const handleInputChange = (value: string, _event: React.FormEvent<HTMLInputElement>) => {
+    setInputValue(value);
+  };
+
+  /** show the input clearing button only when the input is not empty */
+  const showClearButton = !!inputValue;
+
+  /** callback for clearing the text input */
+  const clearInput = () => {
+    setInputValue('');
+  };
+
+  return (
+    <TextInputGroup>
+      <TextInputGroupMain icon={<SearchIcon />} value={inputValue} onChange={handleInputChange} />
+      <TextInputGroupUtilities>
+        {showClearButton && (
+          <Button variant="plain" onClick={clearInput} aria-label="Clear button and input">
+            <TimesIcon />
+          </Button>
+        )}
+      </TextInputGroupUtilities>
+    </TextInputGroup>
+  );
+};

packages/react-core/src/demos/TextInputGroupDemo.md

@@ -24,7 +24,7 @@ Additionally, attributes can be selected by typing the full (case sensitive) nam
 
 Attributes can be deselected (returning you to attribute selection mode) by hitting `escape`, or by hitting `backspace` when the only text in the text input is the attribute.
 
-```js file="./examples/TextInputGroup/AttributeValueFiltering.js"
+```ts file="./examples/TextInputGroup/AttributeValueFiltering.tsx"
 ```
 ### Auto-complete search
 
@@ -36,5 +36,5 @@ Hitting `escape` while focused on the input or menu will close the menu, and the
 
 When only one item remains in the suggestion list, tab can be used to auto-complete the typing of that item.
 
-```js file="./examples/TextInputGroup/AutoCompleteSearch.js"
+```ts file="./examples/TextInputGroup/AutoCompleteSearch.tsx"
 ```