From e6b7b1e9583f156a85147611be2a1812855a030f Mon Sep 17 00:00:00 2001 From: Ankita Sahu <71656941+SAHU-01@users.noreply.github.com> Date: Mon, 29 Sep 2025 00:23:54 +0530 Subject: [PATCH 1/3] refactor: migrating ProgressBar component to typescript --- ...ar.stories.js => progress-bar.stories.tsx} | 17 ++++------ .../{ProgressBar.js => progress-bar.tsx} | 32 +++++++------------ .../file-import-status/FileImportStatus.js | 2 +- .../modals/publish-modal/PublishModal.js | 2 +- src/types/modules.d.ts | 9 ++++++ 5 files changed, 30 insertions(+), 32 deletions(-) rename src/components/progress-bar/{ProgressBar.stories.js => progress-bar.stories.tsx} (73%) rename src/components/progress-bar/{ProgressBar.js => progress-bar.tsx} (50%) create mode 100644 src/types/modules.d.ts diff --git a/src/components/progress-bar/ProgressBar.stories.js b/src/components/progress-bar/progress-bar.stories.tsx similarity index 73% rename from src/components/progress-bar/ProgressBar.stories.js rename to src/components/progress-bar/progress-bar.stories.tsx index 316a98201..f4eff087d 100644 --- a/src/components/progress-bar/ProgressBar.stories.js +++ b/src/components/progress-bar/progress-bar.stories.tsx @@ -1,16 +1,13 @@ import React from 'react' -import ProgressBar from './ProgressBar.js' +import ProgressBar from './progress-bar.js' -/** - * @type {import('@storybook/react').Meta} - */ -export default { - title: 'Progress Bars' -} +const meta = { + title: 'Progress Bars', + component: ProgressBar +} as const + +export default meta -/** - * @type {import('@storybook/react').StoryObj} - */ export const Colors = () => (
diff --git a/src/components/progress-bar/ProgressBar.js b/src/components/progress-bar/progress-bar.tsx similarity index 50% rename from src/components/progress-bar/ProgressBar.js rename to src/components/progress-bar/progress-bar.tsx index 4af66158c..2dc86a52a 100644 --- a/src/components/progress-bar/ProgressBar.js +++ b/src/components/progress-bar/progress-bar.tsx @@ -1,8 +1,18 @@ import React from 'react' -import PropTypes from 'prop-types' import './ProgressBar.css' -const ProgressBar = ({ bg, br, className, style, width, height, progress, time, ...props }) => { +export interface ProgressBarProps { + className?: string + bg?: string + width?: string + height?: string + br?: string + time?: number + progress?: number + style?: React.CSSProperties +} + +const ProgressBar: React.FC = ({ bg, br, className, style, width, height, progress, time, ...props }) => { return (
{time @@ -12,22 +22,4 @@ const ProgressBar = ({ bg, br, className, style, width, height, progress, time, ) } -ProgressBar.propTypes = { - className: PropTypes.string, - bg: PropTypes.string, - width: PropTypes.string, - height: PropTypes.string, - br: PropTypes.string, - time: PropTypes.number, - progress: PropTypes.number -} - -ProgressBar.defaultProps = { - className: '', - width: 'w-100', - height: 'h1', - bg: 'bg-aqua', - br: 'br-pill' -} - export default ProgressBar diff --git a/src/files/file-import-status/FileImportStatus.js b/src/files/file-import-status/FileImportStatus.js index 5ea3c2a02..539436ad3 100644 --- a/src/files/file-import-status/FileImportStatus.js +++ b/src/files/file-import-status/FileImportStatus.js @@ -11,7 +11,7 @@ import GlyphSmallArrows from '../../icons/GlyphSmallArrow.js' import GlyphTick from '../../icons/GlyphTick.js' import GlyphCancel from '../../icons/GlyphCancel.js' import GlyphSmallCancel from '../../icons/GlyphSmallCancel.js' -import ProgressBar from '../../components/progress-bar/ProgressBar.js' +import ProgressBar from '../../components/progress-bar/progress-bar.js' const Import = (job, t) => [...groupByPath(job?.message?.entries || new Map()).values()].map(item => ( diff --git a/src/files/modals/publish-modal/PublishModal.js b/src/files/modals/publish-modal/PublishModal.js index 2421e9199..06a5e613e 100644 --- a/src/files/modals/publish-modal/PublishModal.js +++ b/src/files/modals/publish-modal/PublishModal.js @@ -7,7 +7,7 @@ import { Modal, ModalActions, ModalBody } from '../../../components/modal/modal' import Icon from '../../../icons/StrokeSpeaker.js' import { connect } from 'redux-bundler-react' import Radio from '../../../components/radio/radio.js' -import ProgressBar from '../../../components/progress-bar/ProgressBar.js' +import ProgressBar from '../../../components/progress-bar/progress-bar.js' import GlyphCopy from '../../../icons/GlyphCopy.js' import GlyphTick from '../../../icons/GlyphTick.js' import './PublishModal.css' diff --git a/src/types/modules.d.ts b/src/types/modules.d.ts new file mode 100644 index 000000000..1511c799b --- /dev/null +++ b/src/types/modules.d.ts @@ -0,0 +1,9 @@ +declare module '*.css' { + const content: { [className: string]: string } + export default content +} + +declare module '*.module.css' { + const classes: { [key: string]: string } + export default classes +} \ No newline at end of file From 8de378e9e07fd266cf160c1fe8124ce6d55822c8 Mon Sep 17 00:00:00 2001 From: Ankita Sahu <71656941+SAHU-01@users.noreply.github.com> Date: Mon, 29 Sep 2025 00:44:26 +0530 Subject: [PATCH 2/3] fix: added default progressbar values --- src/components/progress-bar/progress-bar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/progress-bar/progress-bar.tsx b/src/components/progress-bar/progress-bar.tsx index 2dc86a52a..568d48110 100644 --- a/src/components/progress-bar/progress-bar.tsx +++ b/src/components/progress-bar/progress-bar.tsx @@ -12,7 +12,7 @@ export interface ProgressBarProps { style?: React.CSSProperties } -const ProgressBar: React.FC = ({ bg, br, className, style, width, height, progress, time, ...props }) => { +const ProgressBar: React.FC = ({ bg = 'bg-aqua', br = 'br-pill', className, style, width = 'w-100', height = 'h1', progress, time, ...props }) => { return (
{time From 3bb22bedcfbffa2ddc104b4362f842811b50a7a3 Mon Sep 17 00:00:00 2001 From: Ankita Sahu <71656941+SAHU-01@users.noreply.github.com> Date: Mon, 29 Sep 2025 00:51:54 +0530 Subject: [PATCH 3/3] fix: eslint fix --- src/types/modules.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/types/modules.d.ts b/src/types/modules.d.ts index 1511c799b..65ee57500 100644 --- a/src/types/modules.d.ts +++ b/src/types/modules.d.ts @@ -6,4 +6,4 @@ declare module '*.css' { declare module '*.module.css' { const classes: { [key: string]: string } export default classes -} \ No newline at end of file +}