From cc96d55703873cdba886447f5d98dd5b9b6ac624 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Thu, 31 Mar 2022 15:57:17 -0400
Subject: [PATCH 1/2] chore(DatePicker): convert examples to TS

---
 .../DatePicker/examples/DatePicker.md         | 129 ++----------------
 .../examples/DatePickerAmerican.tsx           |  19 +++
 .../DatePicker/examples/DatePickerBasic.tsx   |  11 ++
 .../examples/DatePickerControlled.tsx         |  13 ++
 .../examples/DatePickerControlledCalendar.tsx |  17 +++
 .../DatePicker/examples/DatePickerFrench.tsx  |  26 ++++
 .../examples/DatePickerHelperText.tsx         |   6 +
 .../DatePicker/examples/DatePickerMinMax.tsx  |  17 +++
 8 files changed, 117 insertions(+), 121 deletions(-)
 create mode 100644 packages/react-core/src/components/DatePicker/examples/DatePickerAmerican.tsx
 create mode 100644 packages/react-core/src/components/DatePicker/examples/DatePickerBasic.tsx
 create mode 100644 packages/react-core/src/components/DatePicker/examples/DatePickerControlled.tsx
 create mode 100644 packages/react-core/src/components/DatePicker/examples/DatePickerControlledCalendar.tsx
 create mode 100644 packages/react-core/src/components/DatePicker/examples/DatePickerFrench.tsx
 create mode 100644 packages/react-core/src/components/DatePicker/examples/DatePickerHelperText.tsx
 create mode 100644 packages/react-core/src/components/DatePicker/examples/DatePickerMinMax.tsx

diff --git a/packages/react-core/src/components/DatePicker/examples/DatePicker.md b/packages/react-core/src/components/DatePicker/examples/DatePicker.md
index b276c094d7e..41b05a1b386 100644
--- a/packages/react-core/src/components/DatePicker/examples/DatePicker.md
+++ b/packages/react-core/src/components/DatePicker/examples/DatePicker.md
@@ -7,151 +7,38 @@ beta: true
 ---
 
 ## Examples
+
 ### Basic
-```js
-import React from 'react';
-import { DatePicker } from '@patternfly/react-core';
 
-<DatePicker
-  onBlur={(str, date) => console.log('onBlur', str, date)}
-  onChange={(str, date) => console.log('onChange', str, date)}
-/>
+```ts file="./DatePickerBasic.tsx"
 ```
 
 ### American format
-```js
-import React from 'react';
-import { DatePicker } from '@patternfly/react-core';
-
-AmericanFormat = () => {
-  const dateFormat = date => date.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g,'-');
-  const dateParse = date => {
-    const split = date.split('-');
-    if (split.length !== 3) {
-      return new Date();
-    }
-    let month = split[0];
-    let day = split[1];
-    let year = split[2];
-    return new Date(`${year.padStart(4, '0')}-${month.padStart(2, '0')}-${day.padStart(2, '0')}T00:00:00`);
-  };
 
-  return (
-    <DatePicker
-      value="03-05-2020"
-      placeholder="MM-DD-YYYY"
-      dateFormat={dateFormat}
-      dateParse={dateParse}
-    />
-  );
-}
+```ts file="./DatePickerAmerican.tsx"
 ```
 
 ### Helper text
-```js
-import React from 'react';
-import { DatePicker } from '@patternfly/react-core';
 
-<DatePicker value="2020-03-05" helperText="Select a date." />
+```ts file="./DatePickerHelperText.tsx"
 ```
 
 ### Min and max date
-```js
-import React from 'react';
-import { DatePicker } from '@patternfly/react-core';
 
-MinMaxDate = () => {
-  const minDate = new Date(2020, 2, 16);
-  const maxDate = new Date(2020, 2, 20);
-  const rangeValidator = date => {
-    if (date < minDate) {
-      return 'Date is before the allowable range.';
-    }
-    else if (date > maxDate) {
-      return 'Date is after the allowable range.';
-    }
-
-    return '';
-  };
-  return <DatePicker value="2020-03-17" validators={[rangeValidator]} />;
-}
+```ts file="./DatePickerMinMax.tsx"
 ```
 
 ### French
 
-```js
-import React from 'react';
-import { DatePicker, Weekday } from '@patternfly/react-core';
-
-FrenchMinMaxDate = () => {
-  const minDate = new Date(2020, 2, 16);
-  const maxDate = new Date(2020, 2, 20);
-  const rangeValidator = date => {
-    if (date < minDate) {
-      return 'Cette date est antérieure à la première date valide.';
-    }
-    else if (date > maxDate) {
-      return 'Cette date est postérieure à la dernière date valide.';
-    }
-
-    return '';
-  };
-  return (
-    <DatePicker
-      value="2020-03-17"
-      validators={[rangeValidator]}
-      placeholder="aaaa-mm-jj"
-      invalidFormatText="Cette date est invalide."
-      locale="fr"
-      weekStart={Weekday.Monday}
-    />
-  );
-}
+```ts file="./DatePickerFrench.tsx"
 ```
 
 ### Controlled
 
-```js
-import React from 'react';
-import { Button, DatePicker } from '@patternfly/react-core';
-
-ControlledDate = () => {
-  const initialValue = '2020-03-17';
-  const [value, setValue] = React.useState(initialValue);
-  return (
-    <React.Fragment>
-      <Button onClick={() => setValue(initialValue)}>
-        Reset date
-      </Button>
-      <DatePicker
-        value={value}
-        onChange={value => setValue(value)}
-      />
-    </React.Fragment>
-  );
-}
+```ts file="./DatePickerControlled.tsx"
 ```
 
 ### Controlling the date picker calendar state
 
-```js
-import React from 'react';
-import { Button, DatePicker } from '@patternfly/react-core';
-
-ControllingDatePicker = () => {
-    const dateRef = React.useRef(null);
-    const onClick = () => {
-        if (dateRef.current) {
-            dateRef.current.toggleCalendar()
-        }
-    };
-    return (
-        <React.Fragment>
-            <Button onClick={onClick}>
-                Toggle calendar
-            </Button>
-            <DatePicker ref={ dateRef } />
-        </React.Fragment>
-    );
-}
+```ts file="./DatePickerControlledCalendar.tsx"
 ```
diff --git a/packages/react-core/src/components/DatePicker/examples/DatePickerAmerican.tsx b/packages/react-core/src/components/DatePicker/examples/DatePickerAmerican.tsx
new file mode 100644
index 00000000000..b79aab4c72e
--- /dev/null
+++ b/packages/react-core/src/components/DatePicker/examples/DatePickerAmerican.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { DatePicker } from '@patternfly/react-core';
+
+export const AmericanFormat: React.FunctionComponent = () => {
+  const dateFormat = (date: Date) =>
+    date.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-');
+  const dateParse = (date: string) => {
+    const split = date.split('-');
+    if (split.length !== 3) {
+      return new Date();
+    }
+    const month = split[0];
+    const day = split[1];
+    const year = split[2];
+    return new Date(`${year.padStart(4, '0')}-${month.padStart(2, '0')}-${day.padStart(2, '0')}T00:00:00`);
+  };
+
+  return <DatePicker value="03-05-2020" placeholder="MM-DD-YYYY" dateFormat={dateFormat} dateParse={dateParse} />;
+};
diff --git a/packages/react-core/src/components/DatePicker/examples/DatePickerBasic.tsx b/packages/react-core/src/components/DatePicker/examples/DatePickerBasic.tsx
new file mode 100644
index 00000000000..f1603fe224d
--- /dev/null
+++ b/packages/react-core/src/components/DatePicker/examples/DatePickerBasic.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { DatePicker } from '@patternfly/react-core';
+
+export const BasicDatePicker: React.FunctionComponent = () => (
+  <DatePicker
+    // eslint-disable-next-line no-console
+    onBlur={(str, date) => console.log('onBlur', str, date)}
+    // eslint-disable-next-line no-console
+    onChange={(str, date) => console.log('onChange', str, date)}
+  />
+);
diff --git a/packages/react-core/src/components/DatePicker/examples/DatePickerControlled.tsx b/packages/react-core/src/components/DatePicker/examples/DatePickerControlled.tsx
new file mode 100644
index 00000000000..1f378a56d3a
--- /dev/null
+++ b/packages/react-core/src/components/DatePicker/examples/DatePickerControlled.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Button, DatePicker } from '@patternfly/react-core';
+
+export const ControlledDate: React.FunctionComponent = () => {
+  const initialValue = '2020-03-17';
+  const [value, setValue] = React.useState(initialValue);
+  return (
+    <React.Fragment>
+      <Button onClick={() => setValue(initialValue)}>Reset date</Button>
+      <DatePicker value={value} onChange={value => setValue(value)} />
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/DatePicker/examples/DatePickerControlledCalendar.tsx b/packages/react-core/src/components/DatePicker/examples/DatePickerControlledCalendar.tsx
new file mode 100644
index 00000000000..b65a8d55199
--- /dev/null
+++ b/packages/react-core/src/components/DatePicker/examples/DatePickerControlledCalendar.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Button, DatePicker } from '@patternfly/react-core';
+
+export const ControllingDatePicker: React.FunctionComponent = () => {
+  const dateRef = React.useRef(null);
+  const onClick = () => {
+    if (dateRef.current) {
+      dateRef.current.toggleCalendar();
+    }
+  };
+  return (
+    <React.Fragment>
+      <Button onClick={onClick}>Toggle calendar</Button>
+      <DatePicker ref={dateRef} />
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/DatePicker/examples/DatePickerFrench.tsx b/packages/react-core/src/components/DatePicker/examples/DatePickerFrench.tsx
new file mode 100644
index 00000000000..99c5947ab06
--- /dev/null
+++ b/packages/react-core/src/components/DatePicker/examples/DatePickerFrench.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { DatePicker, Weekday } from '@patternfly/react-core';
+
+export const FrenchMinMaxDate: React.FunctionComponent = () => {
+  const minDate = new Date(2020, 2, 16);
+  const maxDate = new Date(2020, 2, 20);
+  const rangeValidator = (date: Date) => {
+    if (date < minDate) {
+      return 'Cette date est antérieure à la première date valide.';
+    } else if (date > maxDate) {
+      return 'Cette date est postérieure à la dernière date valide.';
+    }
+
+    return '';
+  };
+  return (
+    <DatePicker
+      value="2020-03-17"
+      validators={[rangeValidator]}
+      placeholder="aaaa-mm-jj"
+      invalidFormatText="Cette date est invalide."
+      locale="fr"
+      weekStart={Weekday.Monday}
+    />
+  );
+};
diff --git a/packages/react-core/src/components/DatePicker/examples/DatePickerHelperText.tsx b/packages/react-core/src/components/DatePicker/examples/DatePickerHelperText.tsx
new file mode 100644
index 00000000000..36cd9f8347f
--- /dev/null
+++ b/packages/react-core/src/components/DatePicker/examples/DatePickerHelperText.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { DatePicker } from '@patternfly/react-core';
+
+export const HelperTextDatePicker: React.FunctionComponent = () => (
+  <DatePicker value="2020-03-05" helperText="Select a date." />
+);
diff --git a/packages/react-core/src/components/DatePicker/examples/DatePickerMinMax.tsx b/packages/react-core/src/components/DatePicker/examples/DatePickerMinMax.tsx
new file mode 100644
index 00000000000..b7a5cbf8ae4
--- /dev/null
+++ b/packages/react-core/src/components/DatePicker/examples/DatePickerMinMax.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { DatePicker } from '@patternfly/react-core';
+
+export const MinMaxDate: React.FunctionComponent = () => {
+  const minDate = new Date(2020, 2, 16);
+  const maxDate = new Date(2020, 2, 20);
+  const rangeValidator = (date: Date) => {
+    if (date < minDate) {
+      return 'Date is before the allowable range.';
+    } else if (date > maxDate) {
+      return 'Date is after the allowable range.';
+    }
+
+    return '';
+  };
+  return <DatePicker value="2020-03-17" validators={[rangeValidator]} />;
+};

From 244b2711720d53d2b5024fc633b89407f9d69f1f Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Mon, 4 Apr 2022 14:00:26 -0400
Subject: [PATCH 2/2] rename function components to match file names

---
 .../src/components/DatePicker/examples/DatePickerAmerican.tsx   | 2 +-
 .../src/components/DatePicker/examples/DatePickerBasic.tsx      | 2 +-
 .../src/components/DatePicker/examples/DatePickerControlled.tsx | 2 +-
 .../DatePicker/examples/DatePickerControlledCalendar.tsx        | 2 +-
 .../src/components/DatePicker/examples/DatePickerFrench.tsx     | 2 +-
 .../src/components/DatePicker/examples/DatePickerHelperText.tsx | 2 +-
 .../src/components/DatePicker/examples/DatePickerMinMax.tsx     | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/react-core/src/components/DatePicker/examples/DatePickerAmerican.tsx b/packages/react-core/src/components/DatePicker/examples/DatePickerAmerican.tsx
index b79aab4c72e..54dba78291f 100644
--- a/packages/react-core/src/components/DatePicker/examples/DatePickerAmerican.tsx
+++ b/packages/react-core/src/components/DatePicker/examples/DatePickerAmerican.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { DatePicker } from '@patternfly/react-core';
 
-export const AmericanFormat: React.FunctionComponent = () => {
+export const DatePickerAmerican: React.FunctionComponent = () => {
   const dateFormat = (date: Date) =>
     date.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-');
   const dateParse = (date: string) => {
diff --git a/packages/react-core/src/components/DatePicker/examples/DatePickerBasic.tsx b/packages/react-core/src/components/DatePicker/examples/DatePickerBasic.tsx
index f1603fe224d..000cf4c9807 100644
--- a/packages/react-core/src/components/DatePicker/examples/DatePickerBasic.tsx
+++ b/packages/react-core/src/components/DatePicker/examples/DatePickerBasic.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { DatePicker } from '@patternfly/react-core';
 
-export const BasicDatePicker: React.FunctionComponent = () => (
+export const DatePickerBasic: React.FunctionComponent = () => (
   <DatePicker
     // eslint-disable-next-line no-console
     onBlur={(str, date) => console.log('onBlur', str, date)}
diff --git a/packages/react-core/src/components/DatePicker/examples/DatePickerControlled.tsx b/packages/react-core/src/components/DatePicker/examples/DatePickerControlled.tsx
index 1f378a56d3a..a55469bfce6 100644
--- a/packages/react-core/src/components/DatePicker/examples/DatePickerControlled.tsx
+++ b/packages/react-core/src/components/DatePicker/examples/DatePickerControlled.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, DatePicker } from '@patternfly/react-core';
 
-export const ControlledDate: React.FunctionComponent = () => {
+export const DatePickerControlled: React.FunctionComponent = () => {
   const initialValue = '2020-03-17';
   const [value, setValue] = React.useState(initialValue);
   return (
diff --git a/packages/react-core/src/components/DatePicker/examples/DatePickerControlledCalendar.tsx b/packages/react-core/src/components/DatePicker/examples/DatePickerControlledCalendar.tsx
index b65a8d55199..7065c3d8c8f 100644
--- a/packages/react-core/src/components/DatePicker/examples/DatePickerControlledCalendar.tsx
+++ b/packages/react-core/src/components/DatePicker/examples/DatePickerControlledCalendar.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, DatePicker } from '@patternfly/react-core';
 
-export const ControllingDatePicker: React.FunctionComponent = () => {
+export const DatePickerControlledCalendar: React.FunctionComponent = () => {
   const dateRef = React.useRef(null);
   const onClick = () => {
     if (dateRef.current) {
diff --git a/packages/react-core/src/components/DatePicker/examples/DatePickerFrench.tsx b/packages/react-core/src/components/DatePicker/examples/DatePickerFrench.tsx
index 99c5947ab06..1dc033ecb19 100644
--- a/packages/react-core/src/components/DatePicker/examples/DatePickerFrench.tsx
+++ b/packages/react-core/src/components/DatePicker/examples/DatePickerFrench.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { DatePicker, Weekday } from '@patternfly/react-core';
 
-export const FrenchMinMaxDate: React.FunctionComponent = () => {
+export const DatePickerFrench: React.FunctionComponent = () => {
   const minDate = new Date(2020, 2, 16);
   const maxDate = new Date(2020, 2, 20);
   const rangeValidator = (date: Date) => {
diff --git a/packages/react-core/src/components/DatePicker/examples/DatePickerHelperText.tsx b/packages/react-core/src/components/DatePicker/examples/DatePickerHelperText.tsx
index 36cd9f8347f..fe47fdd10ad 100644
--- a/packages/react-core/src/components/DatePicker/examples/DatePickerHelperText.tsx
+++ b/packages/react-core/src/components/DatePicker/examples/DatePickerHelperText.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { DatePicker } from '@patternfly/react-core';
 
-export const HelperTextDatePicker: React.FunctionComponent = () => (
+export const DatePickerHelperText: React.FunctionComponent = () => (
   <DatePicker value="2020-03-05" helperText="Select a date." />
 );
diff --git a/packages/react-core/src/components/DatePicker/examples/DatePickerMinMax.tsx b/packages/react-core/src/components/DatePicker/examples/DatePickerMinMax.tsx
index b7a5cbf8ae4..1253f5bab56 100644
--- a/packages/react-core/src/components/DatePicker/examples/DatePickerMinMax.tsx
+++ b/packages/react-core/src/components/DatePicker/examples/DatePickerMinMax.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { DatePicker } from '@patternfly/react-core';
 
-export const MinMaxDate: React.FunctionComponent = () => {
+export const DatePickerMinMax: React.FunctionComponent = () => {
   const minDate = new Date(2020, 2, 16);
   const maxDate = new Date(2020, 2, 20);
   const rangeValidator = (date: Date) => {