feat: migrate box component to typescript

src/components/about-ipfs/AboutIpfs.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { withTranslation, Trans } from 'react-i18next'
-import Box from '../box/Box.js'
+import Box from '../box/Box'
 
 export const AboutIpfs = ({ t }) => {
   return (

src/components/about-webui/AboutWebUI.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { withTranslation, Trans } from 'react-i18next'
-import Box from '../box/Box.js'
+import Box from '../box/Box'
 
 export const AboutWebUI = ({ t }) => {
   return (

src/components/box/Box.tsx

@@ -0,0 +1,28 @@
+import React, { ReactNode } from 'react'
+import ErrorBoundary from '../error/ErrorBoundary'
+
+interface BoxProps {
+  className?: string;
+  style?: React.CSSProperties;
+  children: ReactNode;
+  [key: string]: any; // For any additional props
+}
+
+export const Box: React.FC<BoxProps> = ({
+  className = 'pa4',
+  style,
+  children,
+  ...props
+}) => {
+  return (
+    <section
+      className={className}
+      style={{ background: '#fbfbfb', ...style }}
+      {...props}
+    >
+      <ErrorBoundary>{children}</ErrorBoundary>
+    </section>
+  )
+}
+
+export default Box

src/components/experiments/ExperimentsPanel.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { connect } from 'redux-bundler-react'
 import Checkbox from '../checkbox/Checkbox.js'
-import Box from '../box/Box.js'
+import Box from '../box/Box'
 import Title from '../../settings/Title.js'
 
 const Experiments = ({ doExpToggleAction, experiments, t }) => {

src/components/is-connected/IsConnected.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { withTranslation } from 'react-i18next'
-import Box from '../box/Box.js'
+import Box from '../box/Box'
 import GlyphTick from '../../icons/GlyphTick.js'
 
 export const IsConnected = ({ t }) => {

src/components/is-not-connected/IsNotConnected.js

@@ -3,7 +3,7 @@ import { connect } from 'redux-bundler-react'
 import { withTranslation, Trans } from 'react-i18next'
 import classNames from 'classnames'
 import ApiAddressForm from '../api-address-form/ApiAddressForm.js'
-import Box from '../box/Box.js'
+import Box from '../box/Box'
 import Shell from '../shell/Shell.js'
 import GlyphAttention from '../../icons/GlyphAttention.js'
 

src/files/info-boxes/add-files-info/AddFilesInfo.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { withTranslation, Trans } from 'react-i18next'
-import Box from '../../../components/box/Box.js'
+import Box from '../../../components/box/Box'
 
 const AddFilesInfo = ({ t }) => (
   <div className='mv4 tc navy f5' >

src/files/info-boxes/companion-info/CompanionInfo.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { withTranslation, Trans } from 'react-i18next'
-import Box from '../../../components/box/Box.js'
+import Box from '../../../components/box/Box'
 
 const CompanionInfo = ({ t }) => (
   <div className='mv4 tc navy f5' >

src/peers/PeersPage.js

@@ -8,7 +8,7 @@ import { peersTour } from '../lib/tours.js'
 import { getJoyrideLocales } from '../helpers/i8n.js'
 
 // Components
-import Box from '../components/box/Box.js'
+import Box from '../components/box/Box'
 import WorldMap from './WorldMap/WorldMap.js'
 import PeersTable from './PeersTable/PeersTable.js'
 import AddConnection from './AddConnection/AddConnection.js'

src/settings/AnalyticsPage.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { Helmet } from 'react-helmet'
 import { withTranslation } from 'react-i18next'
 import Title from './Title.js'
-import Box from '../components/box/Box.js'
+import Box from '../components/box/Box'
 import AnalyticsToggle from '../components/analytics-toggle/AnalyticsToggle.js'
 
 export const AnalyticsPage = ({ t }) => (

src/settings/SettingsPage.js

@@ -9,7 +9,7 @@ import withTour from '../components/tour/withTour.js'
 import { getJoyrideLocales } from '../helpers/i8n.js'
 // Components
 import Tick from '../icons/GlyphSmallTick.js'
-import Box from '../components/box/Box.js'
+import Box from '../components/box/Box'
 import Button from '../components/button/button.tsx'
 import LanguageSelector from '../components/language-selector/LanguageSelector.js'
 import PinningManager from '../components/pinning-manager/PinningManager.js'

src/status/BandwidthStatsDisabled.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { withTranslation, Trans } from 'react-i18next'
 import Shell from '../components/shell/Shell.js'
-import Box from '../components/box/Box.js'
+import Box from '../components/box/Box'
 
 const StatusNotConnected = ({ t }) => {
   return (

src/status/PeerBandwidthTable.js

@@ -4,7 +4,7 @@ import { withTranslation } from 'react-i18next'
 import PropTypes from 'prop-types'
 import { humanSize } from '../lib/files.js'
 import CountryFlag from 'react-country-flag'
-import Box from '../components/box/Box.js'
+import Box from '../components/box/Box'
 import { Title } from './Commons.js'
 import ComponentLoader from '../loader/ComponentLoader.js'
 

src/status/StatusPage.js

@@ -10,7 +10,7 @@ import NodeInfo from './NodeInfo.js'
 import NodeInfoAdvanced from './NodeInfoAdvanced.js'
 import NodeBandwidthChart from './NodeBandwidthChart.js'
 import NetworkTraffic from './NetworkTraffic.js'
-import Box from '../components/box/Box.js'
+import Box from '../components/box/Box'
 import AnalyticsBanner from '../components/analytics-banner/AnalyticsBanner.js'
 import { statusTour } from '../lib/tours.js'
 import { getJoyrideLocales } from '../helpers/i8n.js'