From a00495fa4bfdfbabce99b9b0acc956d4303b7ac1 Mon Sep 17 00:00:00 2001
From: Tomas Psota <tpsota@redhat.com>
Date: Mon, 30 May 2022 11:14:40 +0200
Subject: [PATCH] chore(FormSelect): convert examples to TypeScript

Signed-off-by: Tomas Psota <tpsota@redhat.com>
---
 .../FormSelect/examples/FormSelect.md         | 296 +-----------------
 .../FormSelect/examples/FormSelectBasic.tsx   |  28 ++
 .../examples/FormSelectDisabled.tsx           |  28 ++
 .../FormSelect/examples/FormSelectGrouped.tsx |  49 +++
 .../examples/FormSelectIconSpriteVariant.tsx  |  57 ++++
 .../examples/FormSelectValidated.tsx          |  69 ++++
 6 files changed, 236 insertions(+), 291 deletions(-)
 create mode 100644 packages/react-core/src/components/FormSelect/examples/FormSelectBasic.tsx
 create mode 100644 packages/react-core/src/components/FormSelect/examples/FormSelectDisabled.tsx
 create mode 100644 packages/react-core/src/components/FormSelect/examples/FormSelectGrouped.tsx
 create mode 100644 packages/react-core/src/components/FormSelect/examples/FormSelectIconSpriteVariant.tsx
 create mode 100644 packages/react-core/src/components/FormSelect/examples/FormSelectValidated.tsx

diff --git a/packages/react-core/src/components/FormSelect/examples/FormSelect.md b/packages/react-core/src/components/FormSelect/examples/FormSelect.md
index b032067ed20..ece3333e228 100644
--- a/packages/react-core/src/components/FormSelect/examples/FormSelect.md
+++ b/packages/react-core/src/components/FormSelect/examples/FormSelect.md
@@ -9,310 +9,24 @@ ouia: true
 ## Examples
 
 ### Basic
-```js
-import React from 'react';
-import { FormSelect, FormSelectOption, FormSelectOptionGroup } from '@patternfly/react-core';
-
-class FormSelectInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 'mrs'
-    };
-    this.onChange = (value, event) => {
-      this.setState({ value });
-    };
-    this.options = [
-      { value: 'please choose', label: 'Select one', disabled: true },
-      { value: 'mr', label: 'Mr', disabled: false },
-      { value: 'miss', label: 'Miss', disabled: false },
-      { value: 'mrs', label: 'Mrs', disabled: false },
-      { value: 'ms', label: 'Ms', disabled: false },
-      { value: 'dr', label: 'Dr', disabled: false },
-      { value: 'other', label: 'Other', disabled: false }
-    ];
-  }
-
-  render() {
-    return (
-      <FormSelect value={this.state.value} onChange={this.onChange} aria-label="FormSelect Input">
-        {this.options.map((option, index) => (
-          <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
-        ))}
-      </FormSelect>
-    );
-  }
-}
-```
-
-### Invalid
-```js
-import React from 'react';
-import { FormSelect, FormSelectOption, FormSelectOptionGroup, ValidatedOptions } from '@patternfly/react-core';
-
-class FormSelectInputInvalid extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '',
-      validated: ValidatedOptions.default
-    };
-    this.isEmpty = () => this.state.value !== '';
-    this.onChange = (value, event) => {
-      const validated = this.isEmpty() && ValidatedOptions.error
-      this.setState({ value, validated });
-    };
-    this.options = [
-      { value: '', label: 'Select a number', disabled: false, isPlaceholder: true },
-      { value: '1', label: 'One', disabled: false, isPlaceholder: false },
-      { value: '2', label: 'Two', disabled: false, isPlaceholder: false  },
-      { value: '3', label: 'Three', disabled: false, isPlaceholder: false  }
-    ];
-  }
-
-  render() {
-    const { value, validated } = this.state;
-
-    return (
-      <FormSelect
-        validated={validated}
-        value={value}
-        onChange={this.onChange}
-        aria-label="FormSelect Input"
-      >
-        {this.options.map((option, index) => (
-          <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} isPlaceholder={option.isPlaceholder} />
-        ))}
-      </FormSelect>
-    );
-  }
-}
+```ts file='./FormSelectBasic.tsx'
 ```
 
 ### Validated
-```js
-import React from 'react';
-import { Form, FormGroup, FormSelect, FormSelectOption, FormSelectOptionGroup, ValidatedOptions } from '@patternfly/react-core';
-
-class FormSelectInputInvalid extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '',
-      invalidText: 'You must choose something',
-      validated: ValidatedOptions.default
-    };
-
-    this.simulateNetworkCall = callback => {
-      setTimeout(callback, 2000);
-    };
-
-    this.onChange = (value, event) => {
-      this.setState(
-        { value, validated: ValidatedOptions.default, helperText: 'Validating...' },
-        this.simulateNetworkCall(() => {
-          if (value === '3') {
-            this.setState({ validated: ValidatedOptions.success, helperText: 'You chose wisely' });
-          } else if (value === '') {
-              this.setState({ validated: ValidatedOptions.warning, helperText: 'You must select a value' });
-          } else {
-            this.setState({ validated: ValidatedOptions.error, invalidText: 'You must chose Three (thought that was obvious)' });
-          }
-        })
-      );
-    };
-
-    this.options = [
-      { value: '', label: 'Select a number', disabled: false, isPlaceholder: true  },
-      { value: '1', label: 'One', disabled: false, isPlaceholder: false  },
-      { value: '2', label: 'Two', disabled: false, isPlaceholder: false  },
-      { value: '3', label: 'Three - the only valid option', disabled: false, isPlaceholder: false  }
-    ];
-  }
-
-  render() {
-    const { value, validated, helperText, invalidText } = this.state;
-    return (
-      <Form>
-        <FormGroup
-          label="Selection:"
-          type="string"
-          helperText={helperText}
-          helperTextInvalid={invalidText}
-          fieldId="selection"
-          validated={validated}
-        >
-          <FormSelect
-            id="selection"
-            validated={validated}
-            value={value}
-            onChange={this.onChange}
-            aria-label="FormSelect Input"
-          >
-            {this.options.map((option, index) => (
-              <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} isPlaceholder={option.isPlaceholder} />
-            ))}
-          </FormSelect>
-        </FormGroup>
-      </Form>
-    );
-  }
-}
+```ts file='./FormSelectValidated.tsx'
 ```
 
 ### Disabled
-```js
-import React from 'react';
-import { FormSelect, FormSelectOption, FormSelectOptionGroup } from '@patternfly/react-core';
-
-class FormSelectInputDisabled extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 'mrs'
-    };
-    this.onChange = (value, event) => {
-      this.setState({ value });
-    };
-    this.options = [
-      { value: 'please choose', label: 'Select one', disabled: true },
-      { value: 'mr', label: 'Mr', disabled: false },
-      { value: 'miss', label: 'Miss', disabled: false },
-      { value: 'mrs', label: 'Mrs', disabled: false },
-      { value: 'ms', label: 'Ms', disabled: false },
-      { value: 'dr', label: 'Dr', disabled: false },
-      { value: 'other', label: 'Other', disabled: false }
-    ];
-  }
-
-  render() {
-    return (
-      <FormSelect value={this.state.value} onChange={this.onChange} isDisabled aria-label="FormSelect Input">
-        {this.options.map((option, index) => (
-          <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
-        ))}
-      </FormSelect>
-    );
-  }
-}
+```ts file='./FormSelectDisabled.tsx'
 ```
 
 ### Grouped
-```js
-import React from 'react';
-import { FormSelect, FormSelectOption, FormSelectOptionGroup } from '@patternfly/react-core';
-
-class FormSelectInputGrouped extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '2'
-    };
-    this.onChange = (value, event) => {
-      this.setState({ value });
-    };
-    this.groups = [
-      {
-        groupLabel: 'Group1',
-        disabled: false,
-        options: [
-          { value: '1', label: 'The first option', disabled: false },
-          { value: '2', label: 'Second option is selected by default', disabled: false }
-        ]
-      },
-      {
-        groupLabel: 'Group2',
-        disabled: false,
-        options: [
-          { value: '3', label: 'The third option', disabled: false },
-          { value: '4', label: 'The fourth option', disabled: false }
-        ]
-      },
-      {
-        groupLabel: 'Group3',
-        disabled: true,
-        options: [
-          { value: '5', label: 'The fifth option', disabled: false },
-          { value: '6', label: 'The sixth option', disabled: false }
-        ]
-      }
-    ];
-    this.getOptionLbl = option => option.label;
-    this.getOptionVal = option => option.value;
-    this.getOptionsGroupLbl = group => group && group.groupLabel;
-    this.getGroupOptions = group => group && group.options;
-  }
-
-  render() {
-    return (
-      <FormSelect value={this.state.value} onChange={this.onChange} aria-label="FormSelect Input">
-        {this.groups.map((group, index) => (
-          <FormSelectOptionGroup isDisabled={group.disabled} key={index} label={group.groupLabel}>
-            {group.options.map((option, i) => (
-              <FormSelectOption isDisabled={option.disabled} key={i} value={option.value} label={option.label} />
-            ))}
-          </FormSelectOptionGroup>
-        ))}
-      </FormSelect>
-    );
-  }
-}
+```ts file='./FormSelectGrouped.tsx'
 ```
 
 ### Icon sprite variant
 
 **Note:** The dropdown toggle icon is applied as a background image 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 { FormSelect, FormSelectOption, FormSelectOptionGroup } from '@patternfly/react-core';
-
-class FormSelectIconSpriteInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '',
-      validated: ValidatedOptions.default
-    };
-
-    this.onChange = (value, event) => {
-      if (value === '3') {
-        this.setState({ value, validated: ValidatedOptions.success, helperText: 'You chose wisely' });
-      } else if (value === '') {
-        this.setState({ value, validated: ValidatedOptions.warning, helperText: 'You must select a value' });
-      } else {
-        this.setState({
-          value,
-          validated: ValidatedOptions.error,
-          invalidText: 'You must chose Three (thought that was obvious)'
-        });
-      }
-    };
-
-    this.options = [
-      { value: '', label: 'Select a number', disabled: false, isPlaceholder: true },
-      { value: '1', label: 'One', disabled: false, isPlaceholder: false },
-      { value: '2', label: 'Two', disabled: false, isPlaceholder: false },
-      { value: '3', label: 'Three - the only valid option', disabled: false, isPlaceholder: false }
-    ];
-  }
-
-  render() {
-    const { value, validated, helperText, invalidText } = this.state;
-
-    return (
-      <FormSelect
-        validated={validated}
-        isIconSprite
-        value={value}
-        onChange={this.onChange}
-        aria-label="FormSelect Input"
-      >
-        {this.options.map((option, index) => (
-          <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
-        ))}
-      </FormSelect>
-    );
-  }
-}
+```ts file='./FormSelectIconSpriteVariant.tsx' isBeta
 ```
diff --git a/packages/react-core/src/components/FormSelect/examples/FormSelectBasic.tsx b/packages/react-core/src/components/FormSelect/examples/FormSelectBasic.tsx
new file mode 100644
index 00000000000..4195b31b2dc
--- /dev/null
+++ b/packages/react-core/src/components/FormSelect/examples/FormSelectBasic.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { FormSelect, FormSelectOption } from '@patternfly/react-core';
+
+export const FormSelectBasic: React.FunctionComponent = () => {
+  const [formSelectValue, setFormSelectValue] = React.useState('mrs');
+
+  const onChange = (value: string) => {
+    setFormSelectValue(value);
+  };
+
+  const options = [
+    { value: 'please choose', label: 'Select one', disabled: true },
+    { value: 'mr', label: 'Mr', disabled: false },
+    { value: 'miss', label: 'Miss', disabled: false },
+    { value: 'mrs', label: 'Mrs', disabled: false },
+    { value: 'ms', label: 'Ms', disabled: false },
+    { value: 'dr', label: 'Dr', disabled: false },
+    { value: 'other', label: 'Other', disabled: false }
+  ];
+
+  return (
+    <FormSelect value={formSelectValue} onChange={onChange} aria-label="FormSelect Input">
+      {options.map((option, index) => (
+        <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
+      ))}
+    </FormSelect>
+  );
+};
diff --git a/packages/react-core/src/components/FormSelect/examples/FormSelectDisabled.tsx b/packages/react-core/src/components/FormSelect/examples/FormSelectDisabled.tsx
new file mode 100644
index 00000000000..40ee2f1fcbe
--- /dev/null
+++ b/packages/react-core/src/components/FormSelect/examples/FormSelectDisabled.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { FormSelect, FormSelectOption } from '@patternfly/react-core';
+
+export const FormSelectDisabled: React.FunctionComponent = () => {
+  const [formSelectValue, setFormSelectValue] = React.useState('mrs');
+
+  const onChange = (value: string) => {
+    setFormSelectValue(value);
+  };
+
+  const options = [
+    { value: 'please choose', label: 'Select one', disabled: true },
+    { value: 'mr', label: 'Mr', disabled: false },
+    { value: 'miss', label: 'Miss', disabled: false },
+    { value: 'mrs', label: 'Mrs', disabled: false },
+    { value: 'ms', label: 'Ms', disabled: false },
+    { value: 'dr', label: 'Dr', disabled: false },
+    { value: 'other', label: 'Other', disabled: false }
+  ];
+
+  return (
+    <FormSelect value={formSelectValue} onChange={onChange} isDisabled aria-label="FormSelect Input">
+      {options.map((option, index) => (
+        <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
+      ))}
+    </FormSelect>
+  );
+};
diff --git a/packages/react-core/src/components/FormSelect/examples/FormSelectGrouped.tsx b/packages/react-core/src/components/FormSelect/examples/FormSelectGrouped.tsx
new file mode 100644
index 00000000000..715a6a45bda
--- /dev/null
+++ b/packages/react-core/src/components/FormSelect/examples/FormSelectGrouped.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { FormSelect, FormSelectOption, FormSelectOptionGroup } from '@patternfly/react-core';
+
+export const FormSelectGrouped: React.FunctionComponent = () => {
+  const [formSelectValue, setFormSelectValue] = React.useState('2');
+
+  const onChange = (value: string) => {
+    setFormSelectValue(value);
+  };
+
+  const groups = [
+    {
+      groupLabel: 'Group1',
+      disabled: false,
+      options: [
+        { value: '1', label: 'The first option', disabled: false },
+        { value: '2', label: 'Second option is selected by default', disabled: false }
+      ]
+    },
+    {
+      groupLabel: 'Group2',
+      disabled: false,
+      options: [
+        { value: '3', label: 'The third option', disabled: false },
+        { value: '4', label: 'The fourth option', disabled: false }
+      ]
+    },
+    {
+      groupLabel: 'Group3',
+      disabled: true,
+      options: [
+        { value: '5', label: 'The fifth option', disabled: false },
+        { value: '6', label: 'The sixth option', disabled: false }
+      ]
+    }
+  ];
+
+  return (
+    <FormSelect value={formSelectValue} onChange={onChange} aria-label="FormSelect Input">
+      {groups.map((group, index) => (
+        <FormSelectOptionGroup isDisabled={group.disabled} key={index} label={group.groupLabel}>
+          {group.options.map((option, i) => (
+            <FormSelectOption isDisabled={option.disabled} key={i} value={option.value} label={option.label} />
+          ))}
+        </FormSelectOptionGroup>
+      ))}
+    </FormSelect>
+  );
+};
diff --git a/packages/react-core/src/components/FormSelect/examples/FormSelectIconSpriteVariant.tsx b/packages/react-core/src/components/FormSelect/examples/FormSelectIconSpriteVariant.tsx
new file mode 100644
index 00000000000..d1849db2df2
--- /dev/null
+++ b/packages/react-core/src/components/FormSelect/examples/FormSelectIconSpriteVariant.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { Form, FormGroup, FormSelect, FormSelectOption, ValidatedOptions } from '@patternfly/react-core';
+
+export const FormSelectIconSpriteVariant: React.FunctionComponent = () => {
+  const [formSelectValue, setFormSelectValue] = React.useState('');
+  const [validated, setValidated] = React.useState<ValidatedOptions>(ValidatedOptions.default);
+  const [invalidText, setInvalidText] = React.useState('You must choose something');
+  const [helperText, setHelperText] = React.useState('');
+
+  const onChange = (value: string) => {
+    if (value === '3') {
+      setFormSelectValue(value);
+      setValidated(ValidatedOptions.success);
+      setHelperText('You chose wisely');
+    } else if (value === '') {
+      setFormSelectValue(value);
+      setValidated(ValidatedOptions.warning);
+      setHelperText('You must select a value');
+    } else {
+      setFormSelectValue(value);
+      setValidated(ValidatedOptions.error);
+      setInvalidText('You must chose Three (thought that was obvious)');
+    }
+  };
+
+  const options = [
+    { value: '', label: 'Select a number', disabled: false, isPlaceholder: true },
+    { value: '1', label: 'One', disabled: false, isPlaceholder: false },
+    { value: '2', label: 'Two', disabled: false, isPlaceholder: false },
+    { value: '3', label: 'Three - the only valid option', disabled: false, isPlaceholder: false }
+  ];
+
+  return (
+    <Form>
+      <FormGroup
+        label="Selection:"
+        type="string"
+        helperText={helperText}
+        helperTextInvalid={invalidText}
+        fieldId="selection"
+        validated={validated}
+      >
+        <FormSelect
+          validated={validated}
+          isIconSprite
+          value={formSelectValue}
+          onChange={onChange}
+          aria-label="FormSelect Input"
+        >
+          {options.map((option, index) => (
+            <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
+          ))}
+        </FormSelect>
+      </FormGroup>
+    </Form>
+  );
+};
diff --git a/packages/react-core/src/components/FormSelect/examples/FormSelectValidated.tsx b/packages/react-core/src/components/FormSelect/examples/FormSelectValidated.tsx
new file mode 100644
index 00000000000..ab072eebe88
--- /dev/null
+++ b/packages/react-core/src/components/FormSelect/examples/FormSelectValidated.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { Form, FormGroup, FormSelect, FormSelectOption, ValidatedOptions } from '@patternfly/react-core';
+
+export const FormSelectValidated: React.FunctionComponent = () => {
+  const [formValue, setFormValue] = React.useState('');
+  const [invalidText, setInvalidText] = React.useState('You must choose something');
+  const [helperText, setHelperText] = React.useState('');
+  const [validated, setValidated] = React.useState<ValidatedOptions>(ValidatedOptions.default);
+
+  const simulateNetworkCall = (callback: () => void) => {
+    setTimeout(callback, 2000);
+  };
+
+  const onChange = (value: string) => {
+    setFormValue(value);
+    setValidated(ValidatedOptions.default);
+    setHelperText('Validating...');
+    simulateNetworkCall(() => {
+      if (value === '3') {
+        setValidated(ValidatedOptions.success);
+        setHelperText('You chose wisely');
+      } else if (value === '') {
+        setValidated(ValidatedOptions.warning);
+        setHelperText('You must select a value');
+      } else {
+        setValidated(ValidatedOptions.error);
+        setInvalidText('You must chose Three (thought that was obvious)');
+      }
+    });
+  };
+
+  const options = [
+    { value: '', label: 'Select a number', disabled: false, isPlaceholder: true },
+    { value: '1', label: 'One', disabled: false, isPlaceholder: false },
+    { value: '2', label: 'Two', disabled: false, isPlaceholder: false },
+    { value: '3', label: 'Three - the only valid option', disabled: false, isPlaceholder: false }
+  ];
+
+  return (
+    <Form>
+      <FormGroup
+        label="Selection:"
+        type="string"
+        helperText={helperText}
+        helperTextInvalid={invalidText}
+        fieldId="selection"
+        validated={validated}
+      >
+        <FormSelect
+          id="selection"
+          validated={validated}
+          value={formValue}
+          onChange={onChange}
+          aria-label="FormSelect Input"
+        >
+          {options.map((option, index) => (
+            <FormSelectOption
+              isDisabled={option.disabled}
+              key={index}
+              value={option.value}
+              label={option.label}
+              isPlaceholder={option.isPlaceholder}
+            />
+          ))}
+        </FormSelect>
+      </FormGroup>
+    </Form>
+  );
+};