chore(ChipGroup): convert examples to TypeScript/functional components

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

@@ -8,145 +8,17 @@ ouia: true
 
 ## Examples
 
-### Simple inline chip group
+### Simple inline
 
-```js
-import React from 'react';
-import { Chip, ChipGroup } from '@patternfly/react-core';
-
-class SimpleInlineChipGroup extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      chips: ['Chip one', 'Really long chip that goes on and on', 'Chip three', 'Chip four', 'Chip five']
-    };
-
-    this.deleteItem = id => {
-      const copyOfChips = this.state.chips;
-      const index = copyOfChips.indexOf(id);
-      if (index !== -1) {
-        copyOfChips.splice(index, 1);
-        this.setState({ chips: copyOfChips });
-      }
-    };
-  }
-
-  render() {
-    const { chips } = this.state;
-
-    return (
-      <ChipGroup>
-        {chips.map(currentChip => (
-          <Chip key={currentChip} onClick={() => this.deleteItem(currentChip)}>
-            {currentChip}
-          </Chip>
-        ))}
-      </ChipGroup>
-    );
-  }
-}
+```ts file='./ChipGroupInline.tsx'
 ```
 
-### Chip groups with categories
-
-```js
-import React from 'react';
-import { Chip, ChipGroup } from '@patternfly/react-core';
-
-class SimpleCategoryChipGroup extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      chips: ['Chip one', 'Chip two', 'Chip three', 'Chip four', 'Chip five']
-    };
-    this.deleteItem = id => {
-      const copyOfChips = this.state.chips;
-      const index = copyOfChips.indexOf(id);
-      if (index !== -1) {
-        copyOfChips.splice(index, 1);
-        this.setState({ chips: copyOfChips });
-      }
-    };
-  }
-
-  render() {
-    const { chips } = this.state;
+### With categories
 
-    return (
-      <ChipGroup categoryName="Category one">
-        {chips.map(currentChip => (
-          <Chip key={currentChip} onClick={() => this.deleteItem(currentChip)}>
-            {currentChip}
-          </Chip>
-        ))}
-      </ChipGroup>
-    );
-  }
-}
+```ts file='./ChipGroupWithCategories.tsx'
 ```
 
-### Chip groups with categories removable
-
-```js
-import React from 'react';
-import { Chip, ChipGroup } from '@patternfly/react-core';
-
-class CategoryChipGroupRemovable extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      chips: ['Chip one', 'Chip two', 'Chip three'],
-      chips2: ['Chip one', 'Chip two', 'Chip three', 'Chip 4']
-    };
-    this.deleteItem = id => {
-      const copyOfChips = this.state.chips;
-      const index = copyOfChips.indexOf(id);
-      if (index !== -1) {
-        copyOfChips.splice(index, 1);
-        this.setState({ chips: copyOfChips });
-      }
-    };
-
-    this.deleteItem2 = id => {
-      const copyOfChips = this.state.chips2;
-      const index = copyOfChips.indexOf(id);
-      if (index !== -1) {
-        copyOfChips.splice(index, 1);
-        this.setState({ chips2: copyOfChips });
-      }
-    };
-
-    this.deleteCategory = () => {
-      this.setState({ chips: [] });
-    };
-
-    this.deleteCategory2 = () => {
-      this.setState({ chips2: [] });
-    };
-  }
-
-  render() {
-    const { chips, chips2 } = this.state;
+### With removable categories
 
-    return (
-      <React.Fragment>
-        <ChipGroup categoryName="Category one" isClosable onClick={this.deleteCategory}>
-          {chips.map(currentChip => (
-            <Chip key={currentChip} onClick={() => this.deleteItem(currentChip)}>
-              {currentChip}
-            </Chip>
-          ))}
-        </ChipGroup>
-        <br /> <br />
-        <ChipGroup categoryName="Category two has a very long name" isClosable onClick={this.deleteCategory2}>
-          {chips2.map(currentChip => (
-            <Chip key={currentChip} onClick={() => this.deleteItem2(currentChip)}>
-              {currentChip}
-            </Chip>
-          ))}
-        </ChipGroup>
-      </React.Fragment>
-    );
-  }
-}
+```ts file='./ChipGroupRemovableCategories.tsx'
 ```

packages/react-core/src/components/ChipGroup/examples/ChipGroupInline.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Chip, ChipGroup } from '@patternfly/react-core';
+
+export const ChipGroupInline: React.FunctionComponent = () => {
+  const [chips, setChips] = React.useState([
+    'Chip one',
+    'Really long chip that goes on and on',
+    'Chip three',
+    'Chip four',
+    'Chip five'
+  ]);
+
+  const deleteItem = (id: string) => {
+    const copyOfChips = [...chips];
+    const filteredCopy = copyOfChips.filter(chip => chip !== id);
+    setChips(filteredCopy);
+  };
+
+  return (
+    <ChipGroup>
+      {chips.map(currentChip => (
+        <Chip key={currentChip} onClick={() => deleteItem(currentChip)}>
+          {currentChip}
+        </Chip>
+      ))}
+    </ChipGroup>
+  );
+};

packages/react-core/src/components/ChipGroup/examples/ChipGroupRemovableCategories.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Chip, ChipGroup } from '@patternfly/react-core';
+
+export const ChipGroupRemovableCategories: React.FunctionComponent = () => {
+  const [chipGroup1, setChipGroup1] = React.useState(['Chip one', 'Chip two', 'Chip three']);
+  const [chipGroup2, setChipGroup2] = React.useState(['Chip one', 'Chip two', 'Chip three', 'Chip four']);
+
+  const deleteItem = (id: string, group: string[]) => {
+    const copyOfChips = [...group];
+    const filteredCopy = copyOfChips.filter(chip => chip !== id);
+
+    if (group === chipGroup1) {
+      setChipGroup1(filteredCopy);
+    } else {
+      setChipGroup2(filteredCopy);
+    }
+  };
+
+  const deleteCategory = (group: string[]) => {
+    if (group === chipGroup1) {
+      setChipGroup1([]);
+    } else {
+      setChipGroup2([]);
+    }
+  };
+
+  return (
+    <React.Fragment>
+      <ChipGroup categoryName="Category one" isClosable onClick={() => deleteCategory(chipGroup1)}>
+        {chipGroup1.map(currentChip => (
+          <Chip key={currentChip} onClick={() => deleteItem(currentChip, chipGroup1)}>
+            {currentChip}
+          </Chip>
+        ))}
+      </ChipGroup>
+      <br /> <br />
+      <ChipGroup categoryName="Category two has a very long name" isClosable onClick={() => deleteCategory(chipGroup2)}>
+        {chipGroup2.map(currentChip => (
+          <Chip key={currentChip} onClick={() => deleteItem(currentChip, chipGroup2)}>
+            {currentChip}
+          </Chip>
+        ))}
+      </ChipGroup>
+    </React.Fragment>
+  );
+};

packages/react-core/src/components/ChipGroup/examples/ChipGroupWithCategories.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Chip, ChipGroup } from '@patternfly/react-core';
+
+export const ChipGroupWithCategories: React.FunctionComponent = () => {
+  const [chips, setChips] = React.useState([
+    'Chip one',
+    'Really long chip that goes on and on',
+    'Chip three',
+    'Chip four',
+    'Chip five'
+  ]);
+
+  const deleteItem = (id: string) => {
+    const copyOfChips = [...chips];
+    const filteredCopy = copyOfChips.filter(chip => chip !== id);
+    setChips(filteredCopy);
+  };
+
+  return (
+    <ChipGroup categoryName="Category one">
+      {chips.map(currentChip => (
+        <Chip key={currentChip} onClick={() => deleteItem(currentChip)}>
+          {currentChip}
+        </Chip>
+      ))}
+    </ChipGroup>
+  );
+};