From b7be85390c98132332a54a3c2fb0b7f924ac9f44 Mon Sep 17 00:00:00 2001
From: Tomas Psota <tpsota@redhat.com>
Date: Thu, 18 Aug 2022 11:49:19 +0200
Subject: [PATCH] chore(SearchInput): rewrite examples to TypeScript

---
 .../SearchInput/examples/SearchInput.md       | 229 +-----------------
 .../examples/SearchInputAdvanced.tsx          |  56 +++++
 .../SearchInput/examples/SearchInputBasic.tsx |  12 +
 .../examples/SearchInputFocusSearch.tsx       |  14 ++
 .../SearchInputWithNavigableOptions.tsx       |  43 ++++
 .../examples/SearchInputWithResultCount.tsx   |  27 +++
 .../examples/SearchInputWithSubmitButton.tsx  |  16 ++
 7 files changed, 174 insertions(+), 223 deletions(-)
 create mode 100644 packages/react-core/src/components/SearchInput/examples/SearchInputAdvanced.tsx
 create mode 100644 packages/react-core/src/components/SearchInput/examples/SearchInputBasic.tsx
 create mode 100644 packages/react-core/src/components/SearchInput/examples/SearchInputFocusSearch.tsx
 create mode 100644 packages/react-core/src/components/SearchInput/examples/SearchInputWithNavigableOptions.tsx
 create mode 100644 packages/react-core/src/components/SearchInput/examples/SearchInputWithResultCount.tsx
 create mode 100644 packages/react-core/src/components/SearchInput/examples/SearchInputWithSubmitButton.tsx

diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInput.md b/packages/react-core/src/components/SearchInput/examples/SearchInput.md
index 107022594f6..832802813e6 100644
--- a/packages/react-core/src/components/SearchInput/examples/SearchInput.md
+++ b/packages/react-core/src/components/SearchInput/examples/SearchInput.md
@@ -6,193 +6,33 @@ propComponents: ['SearchInput', 'SearchAttribute']
 beta: true
 ---
 
-import { SearchInput } from '@patternfly/react-core';
 import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 
 ## Examples
 
 ### Basic
 
-```js
-import React from 'react';
-import { SearchInput } from '@patternfly/react-core';
-
-class BasicSearchInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: ''
-    };
-
-    this.onChange = (value, event) => {
-      this.setState({
-        value: value
-      });
-    };
-  }
-
-  render() {
-    return (
-      <SearchInput
-        placeholder="Find by name"
-        value={this.state.value}
-        onChange={this.onChange}
-        onClear={evt => this.onChange('', evt)}
-      />
-    );
-  }
-}
+```ts file='./SearchInputBasic.tsx'
 ```
 
 ### Match with result count
 
-```js
-import React from 'react';
-import { SearchInput } from '@patternfly/react-core';
-
-class SearchInputWithResultCount extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '',
-      resultsCount: 0
-    };
-
-    this.onChange = (value, event) => {
-      this.setState({
-        value: value,
-        resultsCount: 3
-      });
-    };
-
-    this.onClear = event => {
-      this.setState({
-        value: '',
-        resultsCount: 0
-      });
-    };
-  }
-
-  render() {
-    return (
-      <SearchInput
-        placeholder="Find by name"
-        value={this.state.value}
-        onChange={this.onChange}
-        onClear={this.onClear}
-        resultsCount={this.state.resultsCount}
-      />
-    );
-  }
-}
+```ts file='./SearchInputWithResultCount.tsx'
 ```
 
 ### Match with navigable options
 
-```js
-import React from 'react';
-import { SearchInput } from '@patternfly/react-core';
-
-class SearchInputWithNavigableOptions extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '',
-      resultsCount: 0,
-      currentResult: 1,
-      isPreviousNavigationButtonDisabled: false,
-      isNextNavigationButtonDisabled: false
-    };
-
-    this.onChange = (value, event) => {
-      this.setState({
-        value: value,
-        resultsCount: 3
-      });
-    };
-
-    this.onClear = event => {
-      this.setState({
-        value: '',
-        resultsCount: 0,
-        currentResult: 1
-      });
-    };
-
-    this.onNext = event => {
-      this.setState(prevState => {
-        const newCurrentResult = prevState.currentResult + 1;
-        return {
-          currentResult: newCurrentResult <= prevState.resultsCount ? newCurrentResult : prevState.resultsCount
-        };
-      });
-    };
-
-    this.onPrevious = event => {
-      this.setState(prevState => {
-        const newCurrentResult = prevState.currentResult - 1;
-        return {
-          currentResult: newCurrentResult > 0 ? newCurrentResult : 1
-        };
-      });
-    };
-  }
-  render() {
-    return (
-      <SearchInput
-        placeholder="Find by name"
-        value={this.state.value}
-        onChange={this.onChange}
-        onClear={this.onClear}
-        isNextNavigationButtonDisabled={this.state.currentResult === 3}
-        isPreviousNavigationButtonDisabled={this.state.currentResult === 1}
-        resultsCount={`${this.state.currentResult} / ${this.state.resultsCount}`}
-        onNextClick={this.onNext}
-        onPreviousClick={this.onPrevious}
-      />
-    );
-  }
-}
+```ts file='./SearchInputWithNavigableOptions.tsx'
 ```
 
 ### With submit button
 
-```js
-import React from 'react';
-import { SearchInput } from '@patternfly/react-core';
-
-SubmitButtonSearchInput = () => {
-  const [value, setValue] = React.useState('');
-
-  return (
-    <SearchInput
-      placeholder='Find by name'
-      value={value}
-      onChange={setValue}
-      onSearch={setValue}
-      onClear={() => setValue('')}
-    />
-  );
-}
-
+```ts file='./SearchInputWithSubmitButton.tsx'
 ```
 
 ### Focus search input using ref
 
-```js
-import React from 'react';
-import { SearchInput, Button } from '@patternfly/react-core';
-
-TextInputSelectAll = () => {
-  const [value, setValue] = React.useState('');
-  const ref = React.useRef(null);
-  return (
-    <React.Fragment>
-      <SearchInput ref={ref} value={value} onChange={setValue} onClear={() => setValue('')} />
-      <Button onClick={() => ref.current && ref.current.focus()}>Focus on the search input</Button>
-    </React.Fragment>
-  );
-};
+```ts file='./SearchInputFocusSearch.tsx'
 ```
 
 ### Advanced
@@ -203,62 +43,5 @@ the following example. The search input component can also be used as a composab
 or other elements to build a completely custom advanced search form. This feature is demonstrated 
 in the search input's <a href="/components/search-input/react-demos">react demos</a>.
 
-```js
-import React from 'react';
-import { Button, Checkbox, FormGroup, SearchInput } from '@patternfly/react-core';
-import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
-
-AdvancedSearchInput = () => {
-  const [value, setValue] = React.useState('username:player firstname:john');
-  const [useEqualsAsDelimiter, setUseEqualsAsDelimiter] = React.useState(false);
-  const [useCustomFooter, setUseCustomFooter] = React.useState(false);
-
-  const toggleDelimiter = checked => {
-    const newValue = value.replace(/:|=/g, checked ? '=' : ':');
-    setUseEqualsAsDelimiter(checked);
-    setValue(newValue);
-  };
-
-  return (
-    <>
-      <Checkbox
-        label="Use equal sign as search attribute delimiter"
-        isChecked={useEqualsAsDelimiter}
-        onChange={toggleDelimiter}
-        aria-label="change delimiter checkbox"
-        id="toggle-delimiter"
-        name="toggle-delimiter"
-      />
-      <Checkbox
-        label="Add custom footer element after the attributes in the menu"
-        isChecked={useCustomFooter}
-        onChange={value => setUseCustomFooter(value)}
-        aria-label="change use custom footer checkbox"
-        id="toggle-custom-footer"
-        name="toggle-custom-footer"
-      />
-      <br />
-      <SearchInput
-        attributes={[
-          { attr: 'username', display: 'Username' },
-          { attr: 'firstname', display: 'First name' }
-        ]}
-        advancedSearchDelimiter={useEqualsAsDelimiter ? '=' : ':'}
-        value={value}
-        onChange={setValue}
-        onSearch={setValue}
-        onClear={() => setValue('')}
-        formAdditionalItems={
-          useCustomFooter ? (
-            <FormGroup>
-              <Button variant="link" isInline icon={<ExternalLinkSquareAltIcon />} iconPosition="right">
-                Link
-              </Button>
-            </FormGroup>
-          ) : null
-        }
-      />
-    </>
-  );
-};
+```ts file='./SearchInputAdvanced.tsx'
 ```
diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputAdvanced.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputAdvanced.tsx
new file mode 100644
index 00000000000..4343e92e9b9
--- /dev/null
+++ b/packages/react-core/src/components/SearchInput/examples/SearchInputAdvanced.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Button, Checkbox, FormGroup, SearchInput } from '@patternfly/react-core';
+import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
+
+export const SearchInputAdvanced: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('username:player firstname:john');
+  const [useEqualsAsDelimiter, setUseEqualsAsDelimiter] = React.useState(false);
+  const [useCustomFooter, setUseCustomFooter] = React.useState(false);
+
+  const toggleDelimiter = (checked: boolean) => {
+    setValue(value.replace(/:|=/g, checked ? '=' : ':'));
+    setUseEqualsAsDelimiter(checked);
+  };
+
+  return (
+    <>
+      <Checkbox
+        label="Use equal sign as search attribute delimiter"
+        isChecked={useEqualsAsDelimiter}
+        onChange={toggleDelimiter}
+        aria-label="change delimiter checkbox"
+        id="toggle-delimiter"
+        name="toggle-delimiter"
+      />
+      <Checkbox
+        label="Add custom footer element after the attributes in the menu"
+        isChecked={useCustomFooter}
+        onChange={value => setUseCustomFooter(value)}
+        aria-label="change use custom footer checkbox"
+        id="toggle-custom-footer"
+        name="toggle-custom-footer"
+      />
+      <br />
+      <SearchInput
+        attributes={[
+          { attr: 'username', display: 'Username' },
+          { attr: 'firstname', display: 'First name' }
+        ]}
+        advancedSearchDelimiter={useEqualsAsDelimiter ? '=' : ':'}
+        value={value}
+        onChange={setValue}
+        onSearch={setValue}
+        onClear={() => setValue('')}
+        formAdditionalItems={
+          useCustomFooter ? (
+            <FormGroup>
+              <Button variant="link" isInline icon={<ExternalLinkSquareAltIcon />} iconPosition="right">
+                Link
+              </Button>
+            </FormGroup>
+          ) : null
+        }
+      />
+    </>
+  );
+};
diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputBasic.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputBasic.tsx
new file mode 100644
index 00000000000..711a7c26ad9
--- /dev/null
+++ b/packages/react-core/src/components/SearchInput/examples/SearchInputBasic.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { SearchInput } from '@patternfly/react-core';
+
+export const SearchInputBasic: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+
+  const onChange = (value: string) => {
+    setValue(value);
+  };
+
+  return <SearchInput placeholder="Find by name" value={value} onChange={onChange} onClear={() => onChange('')} />;
+};
diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputFocusSearch.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputFocusSearch.tsx
new file mode 100644
index 00000000000..611ba76d799
--- /dev/null
+++ b/packages/react-core/src/components/SearchInput/examples/SearchInputFocusSearch.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { SearchInput, Button } from '@patternfly/react-core';
+
+export const SearchInputFocusSearch: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  const ref: React.MutableRefObject<HTMLInputElement | null> = React.useRef(null);
+
+  return (
+    <>
+      <SearchInput ref={ref} value={value} onChange={setValue} onClear={() => setValue('')} />
+      <Button onClick={() => ref.current && ref.current.focus()}>Focus on the search input</Button>
+    </>
+  );
+};
diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputWithNavigableOptions.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputWithNavigableOptions.tsx
new file mode 100644
index 00000000000..c215b18b52a
--- /dev/null
+++ b/packages/react-core/src/components/SearchInput/examples/SearchInputWithNavigableOptions.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { SearchInput } from '@patternfly/react-core';
+
+export const SearchInputWithNavigableOptions: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  const [resultsCount, setResultsCount] = React.useState(0);
+  const [currentResult, setCurrentResult] = React.useState(1);
+
+  const onChange = (value: string) => {
+    setValue(value);
+    setResultsCount(3);
+  };
+
+  const onClear = () => {
+    setValue('');
+    setResultsCount(0);
+    setCurrentResult(1);
+  };
+
+  const onNext = () => {
+    const newCurrentResult = currentResult + 1;
+    setCurrentResult(newCurrentResult > resultsCount ? resultsCount : newCurrentResult);
+  };
+
+  const onPrevious = () => {
+    const newCurrentResult = currentResult - 1;
+    setCurrentResult(newCurrentResult > 0 ? newCurrentResult : 1);
+  };
+
+  return (
+    <SearchInput
+      placeholder="Find by name"
+      value={value}
+      onChange={onChange}
+      onClear={onClear}
+      isNextNavigationButtonDisabled={currentResult === 3}
+      isPreviousNavigationButtonDisabled={currentResult === 1}
+      resultsCount={`${currentResult} / ${resultsCount}`}
+      onNextClick={onNext}
+      onPreviousClick={onPrevious}
+    />
+  );
+};
diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputWithResultCount.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputWithResultCount.tsx
new file mode 100644
index 00000000000..5e78058a6f3
--- /dev/null
+++ b/packages/react-core/src/components/SearchInput/examples/SearchInputWithResultCount.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { SearchInput } from '@patternfly/react-core';
+
+export const SearchInputWithResultCount: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  const [resultsCount, setResultsCount] = React.useState(0);
+
+  const onChange = (value: string) => {
+    setValue(value);
+    setResultsCount(3);
+  };
+
+  const onClear = () => {
+    setValue('');
+    setResultsCount(0);
+  };
+
+  return (
+    <SearchInput
+      placeholder="Find by name"
+      value={value}
+      onChange={onChange}
+      onClear={onClear}
+      resultsCount={resultsCount}
+    />
+  );
+};
diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputWithSubmitButton.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputWithSubmitButton.tsx
new file mode 100644
index 00000000000..886d4fe7fa3
--- /dev/null
+++ b/packages/react-core/src/components/SearchInput/examples/SearchInputWithSubmitButton.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { SearchInput } from '@patternfly/react-core';
+
+export const SearchInputWithSubmitButton: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <SearchInput
+      placeholder="Find by name"
+      value={value}
+      onChange={setValue}
+      onSearch={setValue}
+      onClear={() => setValue('')}
+    />
+  );
+};