refactor: migrating Checkbox component to typescript

src/components/analytics-toggle/AnalyticsToggle.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Trans } from 'react-i18next'
 import { connect } from 'redux-bundler-react'
-import Checkbox from '../checkbox/Checkbox.js'
+import Checkbox from '../checkbox/checkbox.js'
 import Details from '../details/Details.js'
 
 const ExampleRequest = ({ url, method = 'GET' }) => {

src/components/checkbox/checkbox.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { action } from '@storybook/addon-actions'
+import type { Meta, StoryObj } from '@storybook/react'
+import Checkbox from './checkbox.js'
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Checkbox',
+  component: Checkbox
+}
+
+export default meta
+
+const bigPicture = {
+  transform: 'scale(5)',
+  transformOrigin: 'top left'
+}
+
+export const Default: StoryObj<typeof Checkbox> = {
+  render: () => (
+    <div>
+      <Checkbox className="ma2" label="Click me!" onChange={action('Checked')} />
+    </div>
+  )
+}
+
+export const Disabled: StoryObj<typeof Checkbox> = {
+  render: () => (
+    <div>
+      <Checkbox label="Click me!" className="ma2" disabled onChange={action('Checked')} />
+    </div>
+  )
+}
+
+export const Big: StoryObj<typeof Checkbox> = {
+  render: () => (
+    <div>
+      <Checkbox style={bigPicture} label="Click me!" className="ma2" onChange={action('Checked')} />
+    </div>
+  )
+}

src/components/checkbox/checkbox.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import Tick from '../../icons/GlyphSmallTick.js'
+import './Checkbox.css'
+
+export interface CheckboxProps {
+  className?: string
+  label?: React.ReactNode
+  disabled?: boolean
+  checked?: boolean
+  onChange?: (checked: boolean) => void
+  style?: React.CSSProperties
+}
+
+const Checkbox: React.FC<CheckboxProps> = ({ className = '', label = '', disabled = false, checked = false, onChange, ...props }) => {
+  className = `Checkbox dib sans-serif ${className}`
+  if (!disabled) {
+    className += ' pointer'
+  }
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange?.(event.target.checked)
+  }
+
+  return (
+    <label className={className} {...props}>
+      <input className='absolute' type='checkbox' checked={checked} disabled={disabled} onChange={handleChange} />
+      <span className='dib v-mid br1 w1 h1 pointer'>
+        <Tick className='w1 h1 o-0 fill-aqua' viewBox='25 25 50 50' />
+      </span>
+      {Boolean(label) && <span className='v-mid pl2'>
+        {label}
+      </span>}
+    </label>
+  )
+}
+
+export default Checkbox

src/components/experiments/ExperimentsPanel.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { connect } from 'redux-bundler-react'
-import Checkbox from '../checkbox/Checkbox.js'
+import Checkbox from '../checkbox/checkbox.js'
 import Box from '../box/Box.js'
 import Title from '../../settings/Title.js'
 

src/components/loading-animation/LoadingAnimation.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { withTranslation } from 'react-i18next'
 // Components
 import GlyphDots from '../../icons/GlyphDots.js'
-import Checkbox from '../checkbox/Checkbox.js'
+import Checkbox from '../checkbox/checkbox.js'
 import FileIcon from '../../files/file-icon/FileIcon.js'
 // Styles
 import './LoadingAnimation.css'

src/files/FilesPage.js

@@ -26,7 +26,7 @@ import Header from './header/Header.js'
 import FileImportStatus from './file-import-status/FileImportStatus.js'
 import { useExplore } from 'ipld-explorer-components/providers'
 import SelectedActions from './selected-actions/SelectedActions.js'
-import Checkbox from '../components/checkbox/Checkbox.js'
+import Checkbox from '../components/checkbox/checkbox.js'
 
 const FilesPage = ({
   doFetchPinningServices, doFilesFetch, doPinsFetch, doFilesSizeGet, doFilesDownloadLink, doFilesDownloadCarLink, doFilesWrite, doAddCarFile, doFilesBulkCidImport, doFilesAddPath, doUpdateHash,

src/files/file/File.js

@@ -9,7 +9,7 @@ import { useDrag, useDrop } from 'react-dnd'
 // Components
 import GlyphDots from '../../icons/GlyphDots.js'
 import Tooltip from '../../components/tooltip/Tooltip.tsx'
-import Checkbox from '../../components/checkbox/Checkbox.js'
+import Checkbox from '../../components/checkbox/checkbox.js'
 import FileIcon from '../file-icon/FileIcon.js'
 import { CID } from 'multiformats/cid'
 import { NativeTypes } from 'react-dnd-html5-backend'

src/files/files-grid/grid-file.tsx

@@ -9,7 +9,7 @@ import { connect } from 'redux-bundler-react'
 import FileThumbnail from '../file-preview/file-thumbnail.js'
 import PinIcon from '../pin-icon/PinIcon.js'
 import GlyphDots from '../../icons/GlyphDots.js'
-import Checkbox from '../../components/checkbox/Checkbox.js'
+import Checkbox from '../../components/checkbox/checkbox.js'
 import { NativeTypes } from 'react-dnd-html5-backend'
 import { join, basename } from 'path'
 import './grid-file.css'

src/files/files-list/FilesList.js

@@ -12,7 +12,7 @@ import { List, WindowScroller, AutoSizer } from 'react-virtualized'
 import { NativeTypes } from 'react-dnd-html5-backend'
 import { useDrop } from 'react-dnd'
 // Components
-import Checkbox from '../../components/checkbox/Checkbox.js'
+import Checkbox from '../../components/checkbox/checkbox.js'
 // import SelectedActions from '../selected-actions/SelectedActions.js'
 import File from '../file/File.js'
 import LoadingAnimation from '../../components/loading-animation/LoadingAnimation.js'

src/files/modals/pinning-modal/PinningModal.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { /* Trans, */ withTranslation } from 'react-i18next'
 import { humanSize } from '../../../lib/files.js'
 import Button from '../../../components/button/button.tsx'
-import Checkbox from '../../../components/checkbox/Checkbox.js'
+import Checkbox from '../../../components/checkbox/checkbox.js'
 import GlyphPin from '../../../icons/GlyphPin.js'
 import Icon from '../../../icons/StrokePinCloud.js'
 import { Modal, ModalActions, ModalBody } from '../../../components/modal/modal'

src/files/modals/remove-modal/RemoveModal.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { withTranslation } from 'react-i18next'
 import TrashIcon from '../../../icons/StrokeTrash.js'
 import Button from '../../../components/button/button.tsx'
-import Checkbox from '../../../components/checkbox/Checkbox.js'
+import Checkbox from '../../../components/checkbox/checkbox.js'
 import { Modal, ModalActions, ModalBody } from '../../../components/modal/modal'
 import { connect } from 'redux-bundler-react'
 

src/peers/AddConnection/AddConnection.js

@@ -4,7 +4,7 @@ import { connect } from 'redux-bundler-react'
 import { multiaddr } from '@multiformats/multiaddr'
 import { P2P, Circuit, WebRTC } from '@multiformats/multiaddr-matcher'
 
-import Checkbox from '../../components/checkbox/Checkbox.js'
+import Checkbox from '../../components/checkbox/checkbox.js'
 import Icon from '../../icons/StrokeDecentralization.js'
 import Button from '../../components/button/button.tsx'
 import Overlay from '../../components/overlay/overlay'

src/settings/SettingsPage.js

@@ -23,7 +23,7 @@ import { JsonEditor } from './editor/JsonEditor.js'
 import Experiments from '../components/experiments/ExperimentsPanel.js'
 import Title from './Title.js'
 import CliTutorMode from '../components/cli-tutor-mode/CliTutorMode.js'
-import Checkbox from '../components/checkbox/Checkbox.js'
+import Checkbox from '../components/checkbox/checkbox.js'
 import ComponentLoader from '../loader/ComponentLoader.js'
 import StrokeCode from '../icons/StrokeCode.js'
 import { cliCmdKeys, cliCommandList } from '../bundles/files/consts.js'

src/types/module.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
+}

tsconfig.json

@@ -78,7 +78,7 @@
     "src/files/type-from-ext/index.js",
     "src/files/file-icon/FileIcon.js",
     "src/files/pin-icon/PinIcon.js",
-    "src/components/checkbox/Checkbox.js",
+    "src/components/checkbox/checkbox.tsx",
     "src/files/type-from-ext/extToType.js",
     "src/pins/**/*",
     "src/blank/**/*",