Refactor/progress bar typescript

src/components/progress-bar/ProgressBar.stories.js → 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 = () => (
   <div className="ma2">
     <ProgressBar bg="bg-navy" progress={42} />

src/components/progress-bar/ProgressBar.js → 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<ProgressBarProps> = ({ bg = 'bg-aqua', br = 'br-pill', className, style, width = 'w-100', height = 'h1', progress, time, ...props }) => {
   return (
     <div className={`ProgressBar sans-serif overflow-hidden ${br} dib ${className} ${width} ${height}`} style={{ background: '#DDE6EB', ...style }} {...props}>
       {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

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 => (

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'

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
+}