From 4b89ac74473c27f38559f852dfa7f554d67c6d6a Mon Sep 17 00:00:00 2001 From: jayakrishnankk Date: Mon, 24 Jan 2022 00:32:18 -0600 Subject: [PATCH] chore: migrating storybook jsx to typescript #18100 (#18133) * Migrating storybook jsx to typescript #18100 * Migrating storybook jsx to typescript Co-authored-by: Jayakrishnan Karolil --- .../TimeFormatterRegistrySingleton.ts | 2 +- ...sStories.jsx => ColorPallettesStories.tsx} | 0 ...{RenderPalettes.jsx => RenderPalettes.tsx} | 0 ...NumberStories.jsx => BigNumberStories.tsx} | 78 +++++++++---------- .../{ThemeStories.jsx => ThemeStories.tsx} | 0 ...ormatStories.jsx => TimeFormatStories.tsx} | 60 +++++++------- 6 files changed, 67 insertions(+), 73 deletions(-) rename superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-color/{ColorPallettesStories.jsx => ColorPallettesStories.tsx} (100%) rename superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-color/{RenderPalettes.jsx => RenderPalettes.tsx} (100%) rename superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-number-format/{BigNumberStories.jsx => BigNumberStories.tsx} (75%) rename superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-style/{ThemeStories.jsx => ThemeStories.tsx} (100%) rename superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-time-format/{TimeFormatStories.jsx => TimeFormatStories.tsx} (77%) diff --git a/superset-frontend/packages/superset-ui-core/src/time-format/TimeFormatterRegistrySingleton.ts b/superset-frontend/packages/superset-ui-core/src/time-format/TimeFormatterRegistrySingleton.ts index becab8441ce63..2eae7a41b50d0 100644 --- a/superset-frontend/packages/superset-ui-core/src/time-format/TimeFormatterRegistrySingleton.ts +++ b/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); diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-color/ColorPallettesStories.jsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-color/ColorPallettesStories.tsx similarity index 100% rename from superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-color/ColorPallettesStories.jsx rename to superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-color/ColorPallettesStories.tsx diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-color/RenderPalettes.jsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-color/RenderPalettes.tsx similarity index 100% rename from superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-color/RenderPalettes.jsx rename to superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-color/RenderPalettes.tsx diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-number-format/BigNumberStories.jsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-number-format/BigNumberStories.tsx similarity index 75% rename from superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-number-format/BigNumberStories.jsx rename to superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-number-format/BigNumberStories.tsx index a09920a620cf4..df57c4ad99142 100644 --- a/superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-number-format/BigNumberStories.jsx +++ b/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 {
- - + {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */} +
@@ -113,8 +112,8 @@ class NumberFormatValidator extends React.PureComponent { - {testValues.map(v => ( - + {testValues.map((v, index) => ( + {`${v}`} @@ -132,9 +131,6 @@ class NumberFormatValidator extends React.PureComponent { } } -NumberFormatValidator.propTypes = propTypes; -NumberFormatValidator.defaultProps = defaultProps; - export default { title: 'Core Packages/@superset-ui-number-format', }; diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-style/ThemeStories.jsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-style/ThemeStories.tsx similarity index 100% rename from superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-style/ThemeStories.jsx rename to superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-style/ThemeStories.tsx diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-time-format/TimeFormatStories.jsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-time-format/TimeFormatStories.tsx similarity index 77% rename from superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-time-format/TimeFormatStories.jsx rename to superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-time-format/TimeFormatStories.tsx index 02af3c33744a2..76d95206d2d68 100644 --- a/superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-time-format/TimeFormatStories.jsx +++ b/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 {
- - + {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */} +
@@ -101,8 +102,8 @@ class TimeFormatValidator extends React.PureComponent { - {testValues.map(v => ( - + {testValues.map((v, index) => ( + {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', };