From 117157f7f3c4f804be9aee53f0f64cf98d1bf951 Mon Sep 17 00:00:00 2001 From: Ankita Sahu <71656941+SAHU-01@users.noreply.github.com> Date: Mon, 29 Sep 2025 01:17:07 +0530 Subject: [PATCH] refactor: migrating Checkbox component to typescript --- .../analytics-toggle/AnalyticsToggle.js | 2 +- src/components/checkbox/Checkbox.js | 57 ------------------- src/components/checkbox/Checkbox.stories.js | 43 -------------- src/components/checkbox/checkbox.stories.tsx | 40 +++++++++++++ src/components/checkbox/checkbox.tsx | 37 ++++++++++++ .../experiments/ExperimentsPanel.js | 2 +- .../loading-animation/LoadingAnimation.js | 2 +- src/files/FilesPage.js | 2 +- src/files/file/File.js | 2 +- src/files/files-grid/grid-file.tsx | 2 +- src/files/files-list/FilesList.js | 2 +- .../modals/pinning-modal/PinningModal.js | 2 +- src/files/modals/remove-modal/RemoveModal.js | 2 +- src/peers/AddConnection/AddConnection.js | 2 +- src/settings/SettingsPage.js | 2 +- src/types/module.d.ts | 9 +++ tsconfig.json | 2 +- 17 files changed, 98 insertions(+), 112 deletions(-) delete mode 100644 src/components/checkbox/Checkbox.js delete mode 100644 src/components/checkbox/Checkbox.stories.js create mode 100644 src/components/checkbox/checkbox.stories.tsx create mode 100644 src/components/checkbox/checkbox.tsx create mode 100644 src/types/module.d.ts diff --git a/src/components/analytics-toggle/AnalyticsToggle.js b/src/components/analytics-toggle/AnalyticsToggle.js index 22e5ec473..5bcd7486d 100644 --- a/src/components/analytics-toggle/AnalyticsToggle.js +++ b/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' }) => { diff --git a/src/components/checkbox/Checkbox.js b/src/components/checkbox/Checkbox.js deleted file mode 100644 index d858309b8..000000000 --- a/src/components/checkbox/Checkbox.js +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import Tick from '../../icons/GlyphSmallTick.js' -import './Checkbox.css' - -/** - * @param {Object} props - * @param {string} [props.className] - * @param {React.ReactNode} [props.label] - * @param {boolean} [props.disabled] - * @param {boolean} [props.checked] - * @param {function(boolean): void} props.onChange - * @returns {React.ReactElement} - */ -const Checkbox = ({ className, label, disabled, checked, onChange, ...props }) => { - className = `Checkbox dib sans-serif ${className}` - if (!disabled) { - className += ' pointer' - } - - /** - * @param {React.ChangeEvent} event - */ - const change = (event) => { - onChange(event.target.checked) - } - - return ( - - ) -} - -Checkbox.propTypes = { - className: PropTypes.string, - label: PropTypes.node, - disabled: PropTypes.bool, - checked: PropTypes.bool, - onChange: PropTypes.func -} - -Checkbox.defaultProps = { - className: '', - label: '', - disabled: false, - checked: null, - onChange: () => {} -} - -export default Checkbox diff --git a/src/components/checkbox/Checkbox.stories.js b/src/components/checkbox/Checkbox.stories.js deleted file mode 100644 index 5d61c8e42..000000000 --- a/src/components/checkbox/Checkbox.stories.js +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react' -import { action } from '@storybook/addon-actions' - -import Checkbox from './Checkbox.js' - -const bigPicture = { - transform: 'scale(5)', - transformOrigin: 'top left' -} - -/** - * @type {import('@storybook/react').Meta} - */ -export default { - title: 'Checkbox' -} - -/** - * @type {import('@storybook/react').StoryFn} - */ -export const Default = () => ( -
- -
-) - -/** - * @type {import('@storybook/react').StoryFn} - */ -export const Disabled = () => ( -
- -
-) - -/** - * @type {import('@storybook/react').StoryFn} - */ -export const Big = () => ( -
- -
-) diff --git a/src/components/checkbox/checkbox.stories.tsx b/src/components/checkbox/checkbox.stories.tsx new file mode 100644 index 000000000..216275ad5 --- /dev/null +++ b/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 = { + title: 'Checkbox', + component: Checkbox +} + +export default meta + +const bigPicture = { + transform: 'scale(5)', + transformOrigin: 'top left' +} + +export const Default: StoryObj = { + render: () => ( +
+ +
+ ) +} + +export const Disabled: StoryObj = { + render: () => ( +
+ +
+ ) +} + +export const Big: StoryObj = { + render: () => ( +
+ +
+ ) +} diff --git a/src/components/checkbox/checkbox.tsx b/src/components/checkbox/checkbox.tsx new file mode 100644 index 000000000..0d35f3f7b --- /dev/null +++ b/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 = ({ className = '', label = '', disabled = false, checked = false, onChange, ...props }) => { + className = `Checkbox dib sans-serif ${className}` + if (!disabled) { + className += ' pointer' + } + + const handleChange = (event: React.ChangeEvent) => { + onChange?.(event.target.checked) + } + + return ( + + ) +} + +export default Checkbox diff --git a/src/components/experiments/ExperimentsPanel.js b/src/components/experiments/ExperimentsPanel.js index d95dd1506..488560e4c 100644 --- a/src/components/experiments/ExperimentsPanel.js +++ b/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' diff --git a/src/components/loading-animation/LoadingAnimation.js b/src/components/loading-animation/LoadingAnimation.js index 8e4070977..8aa880cb4 100644 --- a/src/components/loading-animation/LoadingAnimation.js +++ b/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' diff --git a/src/files/FilesPage.js b/src/files/FilesPage.js index 64d70973c..c1be0e94c 100644 --- a/src/files/FilesPage.js +++ b/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, diff --git a/src/files/file/File.js b/src/files/file/File.js index 3e1617212..e472bf068 100644 --- a/src/files/file/File.js +++ b/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' diff --git a/src/files/files-grid/grid-file.tsx b/src/files/files-grid/grid-file.tsx index 3cdb076a5..7aef477f8 100644 --- a/src/files/files-grid/grid-file.tsx +++ b/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' diff --git a/src/files/files-list/FilesList.js b/src/files/files-list/FilesList.js index a34b117f0..6ace1a360 100644 --- a/src/files/files-list/FilesList.js +++ b/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' diff --git a/src/files/modals/pinning-modal/PinningModal.js b/src/files/modals/pinning-modal/PinningModal.js index 9bd488280..4f911f4fa 100644 --- a/src/files/modals/pinning-modal/PinningModal.js +++ b/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' diff --git a/src/files/modals/remove-modal/RemoveModal.js b/src/files/modals/remove-modal/RemoveModal.js index 2dc45671b..6219b9d93 100644 --- a/src/files/modals/remove-modal/RemoveModal.js +++ b/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' diff --git a/src/peers/AddConnection/AddConnection.js b/src/peers/AddConnection/AddConnection.js index f0ba2cbbf..b47c3ab16 100644 --- a/src/peers/AddConnection/AddConnection.js +++ b/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' diff --git a/src/settings/SettingsPage.js b/src/settings/SettingsPage.js index d814c656b..f5623c154 100644 --- a/src/settings/SettingsPage.js +++ b/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' diff --git a/src/types/module.d.ts b/src/types/module.d.ts new file mode 100644 index 000000000..65ee57500 --- /dev/null +++ b/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 +} diff --git a/tsconfig.json b/tsconfig.json index 722f98599..b51c8a3d5 100644 --- a/tsconfig.json +++ b/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/**/*",