chore: migrating storybook jsx to typescript #18100 (#18133)

* Migrating storybook jsx to typescript #18100

* Migrating storybook jsx to typescript

Co-authored-by: Jayakrishnan Karolil <jayakrishnan.karolil@nielsen.com>

superset-frontend/packages/superset-ui-core/src/time-format/TimeFormatterRegistrySingleton.ts

@@ -84,7 +84,7 @@ export function getTimeFormatterForGranularity(granularity?: TimeGranularity) {
 
 export function formatTime(
   formatId: string | undefined,
-  value: Date | null | undefined,
+  value: Date | number | null | undefined,
   granularity?: TimeGranularity,
 ) {
   return getTimeFormatter(formatId, granularity)(value);

superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-number-format/BigNumberStories.tsx

@@ -17,41 +17,37 @@
  * under the License.
  */
 
-/* eslint-disable jsx-a11y/label-has-associated-control */
 import React from 'react';
 import { formatNumber } from '@superset-ui/core';
 
-const propTypes = {};
-const defaultProps = {};
-
 class NumberFormatValidator extends React.PureComponent {
+  state: { formatString: string; testValues: (number | null | undefined)[] } = {
+    formatString: '.3~s',
+    testValues: [
+      987654321,
+      12345.6789,
+      3000,
+      400.14,
+      70.00002,
+      1,
+      0,
+      -1,
+      -70.00002,
+      -400.14,
+      -3000,
+      -12345.6789,
+      -987654321,
+      Number.POSITIVE_INFINITY,
+      Number.NEGATIVE_INFINITY,
+      NaN,
+      null,
+      undefined,
+    ],
+  };
+
   constructor(props) {
     super(props);
 
-    this.state = {
-      formatString: '.3~s',
-      testValues: [
-        987654321,
-        12345.6789,
-        3000,
-        400.14,
-        70.00002,
-        1,
-        0,
-        -1,
-        -70.00002,
-        -400.14,
-        -3000,
-        -12345.6789,
-        -987654321,
-        Number.POSITIVE_INFINITY,
-        Number.NEGATIVE_INFINITY,
-        NaN,
-        null,
-        undefined,
-      ],
-    };
-
     this.handleFormatChange = this.handleFormatChange.bind(this);
   }
 
@@ -90,14 +86,17 @@ class NumberFormatValidator extends React.PureComponent {
           <div className="col-sm-8">
             <div className="form">
               <div className="form-group">
-                <label>Enter D3 format string:&nbsp;&nbsp;</label>
-                <input
-                  id="formatString"
-                  className="form-control form-control-lg"
-                  type="text"
-                  value={formatString}
-                  onChange={this.handleFormatChange}
-                />
+                {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+                <label>
+                  Enter D3 format string:
+                  <input
+                    id="formatString"
+                    className="form-control form-control-lg"
+                    type="text"
+                    value={formatString}
+                    onChange={this.handleFormatChange}
+                  />
+                </label>
               </div>
             </div>
           </div>
@@ -113,8 +112,8 @@ class NumberFormatValidator extends React.PureComponent {
                 </tr>
               </thead>
               <tbody>
-                {testValues.map(v => (
-                  <tr key={v}>
+                {testValues.map((v, index) => (
+                  <tr key={index}>
                     <td>
                       <code>{`${v}`}</code>
                     </td>
@@ -132,9 +131,6 @@ class NumberFormatValidator extends React.PureComponent {
   }
 }
 
-NumberFormatValidator.propTypes = propTypes;
-NumberFormatValidator.defaultProps = defaultProps;
-
 export default {
   title: 'Core Packages/@superset-ui-number-format',
 };

superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-time-format/TimeFormatStories.tsx

@@ -17,30 +17,28 @@
  * under the License.
  */
 
-/* eslint-disable jsx-a11y/label-has-associated-control */
 import React from 'react';
 import { formatTime } from '@superset-ui/core';
 
-const propTypes = {};
-const defaultProps = {};
-
 class TimeFormatValidator extends React.PureComponent {
+  state: {
+    formatString: string;
+    testValues: (Date | number | null | undefined)[];
+  } = {
+    formatString: '%Y-%m-%d %H:%M:%S',
+    testValues: [
+      new Date(Date.UTC(1986, 5, 14, 8, 30, 53)),
+      new Date(Date.UTC(2001, 9, 27, 13, 45, 2, 678)),
+      new Date(Date.UTC(2009, 1, 1, 0, 0, 0)),
+      new Date(Date.UTC(2018, 1, 1, 10, 20, 33)),
+      0,
+      null,
+      undefined,
+    ],
+  };
+
   constructor(props) {
     super(props);
-
-    this.state = {
-      formatString: '%Y-%m-%d %H:%M:%S',
-      testValues: [
-        new Date(Date.UTC(1986, 5, 14, 8, 30, 53)),
-        new Date(Date.UTC(2001, 9, 27, 13, 45, 2, 678)),
-        new Date(Date.UTC(2009, 1, 1, 0, 0, 0)),
-        new Date(Date.UTC(2018, 1, 1, 10, 20, 33)),
-        0,
-        null,
-        undefined,
-      ],
-    };
-
     this.handleFormatChange = this.handleFormatChange.bind(this);
   }
 
@@ -78,14 +76,17 @@ class TimeFormatValidator extends React.PureComponent {
           <div className="col-sm-8">
             <div className="form">
               <div className="form-group">
-                <label>Enter D3 time format string:&nbsp;&nbsp;</label>
-                <input
-                  id="formatString"
-                  className="form-control form-control-lg"
-                  type="text"
-                  value={formatString}
-                  onChange={this.handleFormatChange}
-                />
+                {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+                <label>
+                  Enter D3 time format string:
+                  <input
+                    id="formatString"
+                    className="form-control form-control-lg"
+                    type="text"
+                    value={formatString}
+                    onChange={this.handleFormatChange}
+                  />
+                </label>
               </div>
             </div>
           </div>
@@ -101,8 +102,8 @@ class TimeFormatValidator extends React.PureComponent {
                 </tr>
               </thead>
               <tbody>
-                {testValues.map(v => (
-                  <tr key={v}>
+                {testValues.map((v, index) => (
+                  <tr key={index}>
                     <td>
                       <code>
                         {v instanceof Date ? v.toUTCString() : `${v}`}
@@ -122,9 +123,6 @@ class TimeFormatValidator extends React.PureComponent {
   }
 }
 
-TimeFormatValidator.propTypes = propTypes;
-TimeFormatValidator.defaultProps = defaultProps;
-
 export default {
   title: 'Core Packages/@superset-ui-time-format',
 };