From 9c1499b805690ad27c00347bac5e1c8b47f28fb4 Mon Sep 17 00:00:00 2001 From: Harel M Date: Sun, 12 Jul 2026 14:07:28 +0300 Subject: [PATCH] Replace default export with named exports (#1998) ## Launch Checklist See title, Also removed some "_" from some file names. This is a pure refactoring, no logic changes. - [x] Briefly describe the changes in this PR. --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> --- eslint.config.js | 4 +- src/components/App.tsx | 46 +++++++++---------- src/components/AppLayout.tsx | 5 +- src/components/AppMessagePanel.tsx | 3 +- src/components/AppToolbar.tsx | 3 +- src/components/Block.tsx | 6 +-- src/components/CodeEditor.tsx | 6 +-- src/components/Collapse.tsx | 2 +- src/components/Collapser.tsx | 2 +- .../{_DataProperty.tsx => DataProperty.tsx} | 23 +++++----- ...eteStopButton.tsx => DeleteStopButton.tsx} | 5 +- src/components/Doc.tsx | 2 +- ...ionProperty.tsx => ExpressionProperty.tsx} | 11 ++--- src/components/FieldArray.tsx | 8 ++-- src/components/FieldAutocomplete.tsx | 8 ++-- src/components/FieldCheckbox.tsx | 8 ++-- src/components/FieldColor.tsx | 8 ++-- src/components/FieldComment.tsx | 7 ++- src/components/FieldDocLabel.tsx | 4 +- src/components/FieldDynamicArray.tsx | 8 ++-- src/components/FieldEnum.tsx | 8 ++-- src/components/FieldFunction.tsx | 12 ++--- src/components/FieldId.tsx | 8 ++-- src/components/FieldJson.tsx | 6 +-- src/components/FieldMaxZoom.tsx | 7 ++- src/components/FieldMinZoom.tsx | 7 ++- src/components/FieldMultiInput.tsx | 8 ++-- src/components/FieldNumber.tsx | 8 ++-- src/components/FieldSelect.tsx | 8 ++-- src/components/FieldSource.tsx | 7 ++- src/components/FieldSourceLayer.tsx | 7 ++- src/components/FieldSpec.tsx | 10 ++-- src/components/FieldString.tsx | 8 ++-- src/components/FieldType.tsx | 9 ++-- src/components/FieldUrl.tsx | 8 ++-- src/components/Fieldset.tsx | 10 ++-- src/components/FilterEditor.tsx | 17 ++++--- src/components/FilterEditorBlock.tsx | 5 +- ...unctionButtons.tsx => FunctionButtons.tsx} | 5 +- src/components/IconLayer.tsx | 4 +- src/components/InputArray.tsx | 6 +-- .../InputAutocomplete.browser.test.tsx | 2 +- src/components/InputAutocomplete.tsx | 2 +- src/components/InputButton.tsx | 2 +- src/components/InputCheckbox.tsx | 2 +- src/components/InputColor.tsx | 2 +- src/components/InputDynamicArray.tsx | 18 ++++---- src/components/InputEnum.tsx | 6 +-- src/components/InputFont.tsx | 4 +- src/components/InputJson.tsx | 3 +- src/components/InputMultiInput.tsx | 2 +- src/components/InputNumber.tsx | 4 +- src/components/InputSelect.tsx | 2 +- src/components/InputSpec.tsx | 20 ++++---- src/components/InputString.tsx | 2 +- src/components/InputUrl.tsx | 7 ++- src/components/LayerEditor.tsx | 25 +++++----- src/components/LayerEditorGroup.tsx | 2 +- src/components/LayerList.tsx | 12 ++--- src/components/LayerListGroup.tsx | 4 +- src/components/LayerListItem.tsx | 6 +-- src/components/MapMaplibreGl.tsx | 9 ++-- .../MapMaplibreGlFeaturePropertyPopup.tsx | 5 +- src/components/MapMaplibreGlLayerPopup.tsx | 7 +-- src/components/MapOpenLayers.tsx | 5 +- src/components/PropertyGroup.tsx | 4 +- src/components/ScrollContainer.tsx | 2 +- src/components/SingleFilterEditor.tsx | 8 ++-- src/components/SmallError.tsx | 3 +- .../{_SpecProperty.tsx => SpecProperty.tsx} | 8 ++-- .../{_ZoomProperty.tsx => ZoomProperty.tsx} | 21 ++++----- src/components/modals/Modal.tsx | 3 +- src/components/modals/ModalAdd.tsx | 15 +++--- src/components/modals/ModalDebug.tsx | 5 +- src/components/modals/ModalExport.tsx | 17 ++++--- src/components/modals/ModalGlobalState.tsx | 11 ++--- src/components/modals/ModalLoading.tsx | 7 ++- src/components/modals/ModalOpen.tsx | 19 ++++---- src/components/modals/ModalSettings.tsx | 25 +++++----- src/components/modals/ModalShortcuts.tsx | 5 +- src/components/modals/ModalSources.tsx | 17 ++++--- .../modals/ModalSourcesTypeEditor.tsx | 19 ++++---- src/i18n.ts | 2 +- src/index.jsx | 2 +- src/libs/document-uid.ts | 2 +- src/libs/field-spec-additional.ts | 4 +- src/libs/label-from-field-name.ts | 2 +- src/libs/layerwatcher.ts | 2 +- src/libs/sort-numerically.ts | 2 +- src/libs/store/apistore.ts | 12 ++--- src/libs/store/stylestore.ts | 4 +- src/libs/style.ts | 2 +- src/libs/urlopen.ts | 6 +-- src/libs/zoomcontrol.ts | 2 +- 94 files changed, 319 insertions(+), 402 deletions(-) rename src/components/{_DataProperty.tsx => DataProperty.tsx} (95%) rename src/components/{_DeleteStopButton.tsx => DeleteStopButton.tsx} (79%) rename src/components/{_ExpressionProperty.tsx => ExpressionProperty.tsx} (89%) rename src/components/{_FunctionButtons.tsx => FunctionButtons.tsx} (93%) rename src/components/{_SpecProperty.tsx => SpecProperty.tsx} (77%) rename src/components/{_ZoomProperty.tsx => ZoomProperty.tsx} (93%) diff --git a/eslint.config.js b/eslint.config.js index 8825a6bc..773aa3c4 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -34,7 +34,9 @@ export default defineConfig({ rules: { "react-refresh/only-export-components": [ "warn", - { allowConstantExport: true } + // Many components are exported as withTranslation()(Component); without + // this the rule cannot tell the HOC's result is still a component. + { allowConstantExport: true, extraHOCs: ["withTranslation"] } ], "@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/no-unused-vars": [ diff --git a/src/components/App.tsx b/src/components/App.tsx index 856268f5..09bc13a5 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -11,29 +11,29 @@ import {type Map, type LayerSpecification, type StyleSpecification, type Validat import {validateStyleMin} from "@maplibre/maplibre-gl-style-spec"; import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json"; -import MapMaplibreGl from "./MapMaplibreGl"; -import MapOpenLayers from "./MapOpenLayers"; -import CodeEditor from "./CodeEditor"; -import LayerList from "./LayerList"; -import LayerEditor from "./LayerEditor"; -import AppToolbar, { type MapState } from "./AppToolbar"; -import AppLayout from "./AppLayout"; -import MessagePanel from "./AppMessagePanel"; +import { MapMaplibreGl } from "./MapMaplibreGl"; +import { MapOpenLayers } from "./MapOpenLayers"; +import { CodeEditor } from "./CodeEditor"; +import { LayerList } from "./LayerList"; +import { LayerEditor } from "./LayerEditor"; +import { AppToolbar, type MapState } from "./AppToolbar"; +import { AppLayout } from "./AppLayout"; +import { AppMessagePanel as MessagePanel } from "./AppMessagePanel"; -import ModalSettings from "./modals/ModalSettings"; -import ModalExport from "./modals/ModalExport"; -import ModalSources from "./modals/ModalSources"; -import ModalOpen from "./modals/ModalOpen"; -import ModalShortcuts from "./modals/ModalShortcuts"; -import ModalDebug from "./modals/ModalDebug"; -import ModalGlobalState from "./modals/ModalGlobalState"; +import { ModalSettings } from "./modals/ModalSettings"; +import { ModalExport } from "./modals/ModalExport"; +import { ModalSources } from "./modals/ModalSources"; +import { ModalOpen } from "./modals/ModalOpen"; +import { ModalShortcuts } from "./modals/ModalShortcuts"; +import { ModalDebug } from "./modals/ModalDebug"; +import { ModalGlobalState } from "./modals/ModalGlobalState"; import {downloadGlyphsMetadata, downloadSpriteMetadata} from "../libs/metadata"; -import style from "../libs/style"; +import { emptyStyle, getAccessToken, replaceAccessTokens } from "../libs/style"; import { undoMessages, redoMessages } from "../libs/diffmessage"; import { createStyleStore, type IStyleStore } from "../libs/store/style-store-factory"; import { RevisionStore } from "../libs/revisions"; -import LayerWatcher from "../libs/layerwatcher"; +import { LayerWatcher } from "../libs/layerwatcher"; import tokens from "../config/tokens.json"; import isEqual from "lodash.isequal"; import { type MapOptions } from "maplibre-gl"; @@ -48,19 +48,19 @@ function setFetchAccessToken(url: string, mapStyle: StyleSpecification) { const matchesThunderforest = url.match(/\.thunderforest\.com/); const matchesLocationIQ = url.match(/\.locationiq\.com/); if (matchesTilehosting || matchesMaptiler) { - const accessToken = style.getAccessToken("openmaptiles", mapStyle, {allowFallback: true}); + const accessToken = getAccessToken("openmaptiles", mapStyle, {allowFallback: true}); if (accessToken) { return url.replace("{key}", accessToken); } } else if (matchesThunderforest) { - const accessToken = style.getAccessToken("thunderforest", mapStyle, {allowFallback: true}); + const accessToken = getAccessToken("thunderforest", mapStyle, {allowFallback: true}); if (accessToken) { return url.replace("{key}", accessToken); } } else if (matchesLocationIQ) { - const accessToken = style.getAccessToken("locationiq", mapStyle, {allowFallback: true}); + const accessToken = getAccessToken("locationiq", mapStyle, {allowFallback: true}); if (accessToken) { return url.replace("{key}", accessToken); } @@ -123,7 +123,7 @@ type AppState = { fileHandle: FileSystemFileHandle | null }; -export default class App extends React.Component { +export class App extends React.Component { revisionStore: RevisionStore; styleStore: IStyleStore | null = null; layerWatcher: LayerWatcher; @@ -137,7 +137,7 @@ export default class App extends React.Component { this.state = { errors: [], infos: [], - mapStyle: style.emptyStyle, + mapStyle: emptyStyle, selectedLayerIndex: 0, sources: {}, vectorLayers: {}, @@ -698,7 +698,7 @@ export default class App extends React.Component { mapStyle: (dirtyMapStyle || mapStyle), mapView: this.state.mapView, replaceAccessTokens: (mapStyle: StyleSpecification) => { - return style.replaceAccessTokens(mapStyle, { + return replaceAccessTokens(mapStyle, { allowFallback: true }); }, diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index 5431cb7d..67c1e11d 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -1,5 +1,5 @@ import React from "react"; -import ScrollContainer from "./ScrollContainer"; +import { ScrollContainer } from "./ScrollContainer"; import { type WithTranslation, withTranslation } from "react-i18next"; import { IconContext } from "react-icons"; @@ -50,5 +50,4 @@ class AppLayoutInternal extends React.Component { } } -const AppLayout = withTranslation()(AppLayoutInternal); -export default AppLayout; +export const AppLayout = withTranslation()(AppLayoutInternal); diff --git a/src/components/AppMessagePanel.tsx b/src/components/AppMessagePanel.tsx index 9a73d2e6..63e58d70 100644 --- a/src/components/AppMessagePanel.tsx +++ b/src/components/AppMessagePanel.tsx @@ -61,5 +61,4 @@ class AppMessagePanelInternal extends React.Component { } } -const AppToolbar = withTranslation()(AppToolbarInternal); -export default AppToolbar; +export const AppToolbar = withTranslation()(AppToolbarInternal); diff --git a/src/components/Block.tsx b/src/components/Block.tsx index e83e4705..ad74f995 100644 --- a/src/components/Block.tsx +++ b/src/components/Block.tsx @@ -1,7 +1,7 @@ import React, {type CSSProperties, type PropsWithChildren, type SyntheticEvent} from "react"; import classnames from "classnames"; -import FieldDocLabel from "./FieldDocLabel"; -import Doc from "./Doc"; +import { FieldDocLabel } from "./FieldDocLabel"; +import { Doc } from "./Doc"; export type BlockProps = PropsWithChildren & { "data-wd-key"?: string @@ -19,7 +19,7 @@ type BlockState = { }; /** Wrap a component with a label */ -export default class Block extends React.Component { +export class Block extends React.Component { _blockEl: HTMLDivElement | null = null; constructor (props: BlockProps) { diff --git a/src/components/CodeEditor.tsx b/src/components/CodeEditor.tsx index bcd8d22d..e2dc1534 100644 --- a/src/components/CodeEditor.tsx +++ b/src/components/CodeEditor.tsx @@ -1,4 +1,4 @@ -import InputJson from "./InputJson"; +import { InputJson } from "./InputJson"; import React from "react"; import { withTranslation, type WithTranslation } from "react-i18next"; import { type StyleSpecification } from "maplibre-gl"; @@ -24,6 +24,4 @@ const CodeEditorInternal: React.FC = (props) => { ; }; -const CodeEditor = withTranslation()(CodeEditorInternal); - -export default CodeEditor; +export const CodeEditor = withTranslation()(CodeEditorInternal); diff --git a/src/components/Collapse.tsx b/src/components/Collapse.tsx index 5dcac77d..16c1998f 100644 --- a/src/components/Collapse.tsx +++ b/src/components/Collapse.tsx @@ -9,7 +9,7 @@ type CollapseProps = { }; -export default class Collapse extends React.Component { +export class Collapse extends React.Component { static defaultProps = { isActive: true }; diff --git a/src/components/Collapser.tsx b/src/components/Collapser.tsx index 3590d4d0..bef4c25a 100644 --- a/src/components/Collapser.tsx +++ b/src/components/Collapser.tsx @@ -6,7 +6,7 @@ type CollapserProps = { style?: object }; -export default class Collapser extends React.Component { +export class Collapser extends React.Component { render() { const iconStyle = { width: 20, diff --git a/src/components/_DataProperty.tsx b/src/components/DataProperty.tsx similarity index 95% rename from src/components/_DataProperty.tsx rename to src/components/DataProperty.tsx index 93c22645..1a3a7d4d 100644 --- a/src/components/_DataProperty.tsx +++ b/src/components/DataProperty.tsx @@ -3,19 +3,19 @@ import {PiListPlusBold} from "react-icons/pi"; import {TbMathFunction} from "react-icons/tb"; import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json"; -import InputButton from "./InputButton"; -import InputSpec from "./InputSpec"; -import InputNumber from "./InputNumber"; -import InputString from "./InputString"; -import InputSelect from "./InputSelect"; -import Block from "./Block"; -import docUid from "../libs/document-uid"; -import sortNumerically from "../libs/sort-numerically"; +import { InputButton } from "./InputButton"; +import { InputSpec } from "./InputSpec"; +import { InputNumber } from "./InputNumber"; +import { InputString } from "./InputString"; +import { InputSelect } from "./InputSelect"; +import { Block } from "./Block"; +import { generateUniqueId as docUid } from "../libs/document-uid"; +import { sortNumerically } from "../libs/sort-numerically"; import {findDefaultFromSpec} from "../libs/spec-helper"; import { type WithTranslation, withTranslation } from "react-i18next"; -import labelFromFieldName from "../libs/label-from-field-name"; -import DeleteStopButton from "./_DeleteStopButton"; +import { labelFromFieldName } from "../libs/label-from-field-name"; +import { DeleteStopButton } from "./DeleteStopButton"; import { type MappedLayerErrors } from "../libs/definitions"; @@ -380,5 +380,4 @@ class DataPropertyInternal extends React.Component { +export class Doc extends React.Component { render () { const {fieldSpec} = this.props; diff --git a/src/components/_ExpressionProperty.tsx b/src/components/ExpressionProperty.tsx similarity index 89% rename from src/components/_ExpressionProperty.tsx rename to src/components/ExpressionProperty.tsx index e7a6db73..0394fd57 100644 --- a/src/components/_ExpressionProperty.tsx +++ b/src/components/ExpressionProperty.tsx @@ -2,10 +2,10 @@ import React from "react"; import {MdDelete, MdUndo} from "react-icons/md"; import { type WithTranslation, withTranslation } from "react-i18next"; -import Block from "./Block"; -import InputButton from "./InputButton"; -import labelFromFieldName from "../libs/label-from-field-name"; -import FieldJson from "./FieldJson"; +import { Block } from "./Block"; +import { InputButton } from "./InputButton"; +import { labelFromFieldName } from "../libs/label-from-field-name"; +import { FieldJson } from "./FieldJson"; import type { StylePropertySpecification } from "maplibre-gl"; import { type MappedLayerErrors } from "../libs/definitions"; @@ -90,5 +90,4 @@ class ExpressionPropertyInternal extends React.Component = (props) => { +export const FieldArray: React.FC = (props) => { return (
); }; - -export default FieldArray; diff --git a/src/components/FieldAutocomplete.tsx b/src/components/FieldAutocomplete.tsx index 30fe7f93..e3386654 100644 --- a/src/components/FieldAutocomplete.tsx +++ b/src/components/FieldAutocomplete.tsx @@ -1,5 +1,5 @@ -import Block from "./Block"; -import InputAutocomplete, { type InputAutocompleteProps } from "./InputAutocomplete"; +import { Block } from "./Block"; +import { InputAutocomplete, type InputAutocompleteProps } from "./InputAutocomplete"; type FieldAutocompleteProps = InputAutocompleteProps & { @@ -7,12 +7,10 @@ type FieldAutocompleteProps = InputAutocompleteProps & { }; -const FieldAutocomplete: React.FC = (props) => { +export const FieldAutocomplete: React.FC = (props) => { return ( ); }; - -export default FieldAutocomplete; diff --git a/src/components/FieldCheckbox.tsx b/src/components/FieldCheckbox.tsx index b4dd6ffa..958284c3 100644 --- a/src/components/FieldCheckbox.tsx +++ b/src/components/FieldCheckbox.tsx @@ -1,5 +1,5 @@ -import Block from "./Block"; -import InputCheckbox, {type InputCheckboxProps} from "./InputCheckbox"; +import { Block } from "./Block"; +import { InputCheckbox, type InputCheckboxProps } from "./InputCheckbox"; type FieldCheckboxProps = InputCheckboxProps & { @@ -7,12 +7,10 @@ type FieldCheckboxProps = InputCheckboxProps & { }; -const FieldCheckbox: React.FC = (props) => { +export const FieldCheckbox: React.FC = (props) => { return ( ); }; - -export default FieldCheckbox; diff --git a/src/components/FieldColor.tsx b/src/components/FieldColor.tsx index acb67513..917cab55 100644 --- a/src/components/FieldColor.tsx +++ b/src/components/FieldColor.tsx @@ -1,5 +1,5 @@ -import Block from "./Block"; -import InputColor, {type InputColorProps} from "./InputColor"; +import { Block } from "./Block"; +import { InputColor, type InputColorProps } from "./InputColor"; type FieldColorProps = InputColorProps & { @@ -10,12 +10,10 @@ type FieldColorProps = InputColorProps & { }; -const FieldColor: React.FC = (props) => { +export const FieldColor: React.FC = (props) => { return ( ); }; - -export default FieldColor; diff --git a/src/components/FieldComment.tsx b/src/components/FieldComment.tsx index 1d1fb344..3f6b7d8a 100644 --- a/src/components/FieldComment.tsx +++ b/src/components/FieldComment.tsx @@ -1,7 +1,7 @@ import React from "react"; -import Block from "./Block"; -import InputString from "./InputString"; +import { Block } from "./Block"; +import { InputString } from "./InputString"; import { type WithTranslation, withTranslation } from "react-i18next"; type FieldCommentInternalProps = { @@ -36,5 +36,4 @@ const FieldCommentInternal: React.FC = (props) => { ); }; -const FieldComment = withTranslation()(FieldCommentInternal); -export default FieldComment; +export const FieldComment = withTranslation()(FieldCommentInternal); diff --git a/src/components/FieldDocLabel.tsx b/src/components/FieldDocLabel.tsx index 87e5fa4c..c6c73205 100644 --- a/src/components/FieldDocLabel.tsx +++ b/src/components/FieldDocLabel.tsx @@ -10,7 +10,7 @@ type FieldDocLabelProps = { }; -const FieldDocLabel: React.FC = (props) => { +export const FieldDocLabel: React.FC = (props) => { const [open, setOpen] = React.useState(false); const onToggleDoc = (state: boolean) => { @@ -49,5 +49,3 @@ const FieldDocLabel: React.FC = (props) => { } return
; }; - -export default FieldDocLabel; diff --git a/src/components/FieldDynamicArray.tsx b/src/components/FieldDynamicArray.tsx index 4af7027f..980ed0e3 100644 --- a/src/components/FieldDynamicArray.tsx +++ b/src/components/FieldDynamicArray.tsx @@ -1,16 +1,14 @@ -import InputDynamicArray, {type InputDynamicArrayProps} from "./InputDynamicArray"; -import Fieldset from "./Fieldset"; +import { InputDynamicArray, type InputDynamicArrayProps } from "./InputDynamicArray"; +import { Fieldset } from "./Fieldset"; type FieldDynamicArrayProps = InputDynamicArrayProps & { name?: string }; -const FieldDynamicArray: React.FC = (props) => { +export const FieldDynamicArray: React.FC = (props) => { return (
); }; - -export default FieldDynamicArray; diff --git a/src/components/FieldEnum.tsx b/src/components/FieldEnum.tsx index 497ae2c0..433ce2a3 100644 --- a/src/components/FieldEnum.tsx +++ b/src/components/FieldEnum.tsx @@ -1,5 +1,5 @@ -import InputEnum, {type InputEnumProps} from "./InputEnum"; -import Fieldset from "./Fieldset"; +import { InputEnum, type InputEnumProps } from "./InputEnum"; +import { Fieldset } from "./Fieldset"; type FieldEnumProps = InputEnumProps & { @@ -10,12 +10,10 @@ type FieldEnumProps = InputEnumProps & { }; -const FieldEnum: React.FC = (props) => { +export const FieldEnum: React.FC = (props) => { return (
); }; - -export default FieldEnum; diff --git a/src/components/FieldFunction.tsx b/src/components/FieldFunction.tsx index fa7d3f61..eb995477 100644 --- a/src/components/FieldFunction.tsx +++ b/src/components/FieldFunction.tsx @@ -1,9 +1,9 @@ import React from "react"; -import SpecProperty from "./_SpecProperty"; -import DataProperty, { type Stop } from "./_DataProperty"; -import ZoomProperty from "./_ZoomProperty"; -import ExpressionProperty from "./_ExpressionProperty"; +import { SpecProperty } from "./SpecProperty"; +import { DataProperty, type Stop } from "./DataProperty"; +import { ZoomProperty } from "./ZoomProperty"; +import { ExpressionProperty } from "./ExpressionProperty"; import {function as styleFunction} from "@maplibre/maplibre-gl-style-spec"; import {findDefaultFromSpec} from "../libs/spec-helper"; import { type MappedLayerErrors } from "../libs/definitions"; @@ -128,7 +128,7 @@ type FieldFunctionProps = { /** Supports displaying spec field for zoom function objects * https://www.mapbox.com/mapbox-gl-style-spec/#types-function-zoom-property */ -const FieldFunction: React.FC = (props) => { +export const FieldFunction: React.FC = (props) => { const [dataType, setDataType] = React.useState( getDataType(props.value, props.fieldSpec) ); @@ -402,5 +402,3 @@ const FieldFunction: React.FC = (props) => {
); }; - -export default FieldFunction; diff --git a/src/components/FieldId.tsx b/src/components/FieldId.tsx index 63966d4c..ee868bca 100644 --- a/src/components/FieldId.tsx +++ b/src/components/FieldId.tsx @@ -1,7 +1,7 @@ import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json"; -import Block from "./Block"; -import InputString from "./InputString"; +import { Block } from "./Block"; +import { InputString } from "./InputString"; type FieldIdProps = { value: string @@ -10,7 +10,7 @@ type FieldIdProps = { error?: {message: string} }; -const FieldId: React.FC = (props) => { +export const FieldId: React.FC = (props) => { return ( = (props) => { ); }; - -export default FieldId; diff --git a/src/components/FieldJson.tsx b/src/components/FieldJson.tsx index 5582739e..24cae432 100644 --- a/src/components/FieldJson.tsx +++ b/src/components/FieldJson.tsx @@ -1,11 +1,9 @@ -import InputJson, {type InputJsonProps} from "./InputJson"; +import { InputJson, type InputJsonProps } from "./InputJson"; type FieldJsonProps = InputJsonProps & {}; -const FieldJson: React.FC = (props) => { +export const FieldJson: React.FC = (props) => { return ; }; - -export default FieldJson; diff --git a/src/components/FieldMaxZoom.tsx b/src/components/FieldMaxZoom.tsx index 4fc7da3b..81bf7aa3 100644 --- a/src/components/FieldMaxZoom.tsx +++ b/src/components/FieldMaxZoom.tsx @@ -1,8 +1,8 @@ import React from "react"; import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json"; -import Block from "./Block"; -import InputNumber from "./InputNumber"; +import { Block } from "./Block"; +import { InputNumber } from "./InputNumber"; import { type WithTranslation, withTranslation } from "react-i18next"; type FieldMaxZoomInternalProps = { @@ -31,5 +31,4 @@ const FieldMaxZoomInternal: React.FC = (props) => { ); }; -const FieldMaxZoom = withTranslation()(FieldMaxZoomInternal); -export default FieldMaxZoom; +export const FieldMaxZoom = withTranslation()(FieldMaxZoomInternal); diff --git a/src/components/FieldMinZoom.tsx b/src/components/FieldMinZoom.tsx index 010570e6..4a1be6d4 100644 --- a/src/components/FieldMinZoom.tsx +++ b/src/components/FieldMinZoom.tsx @@ -1,8 +1,8 @@ import React from "react"; import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json"; -import Block from "./Block"; -import InputNumber from "./InputNumber"; +import { Block } from "./Block"; +import { InputNumber } from "./InputNumber"; import { type WithTranslation, withTranslation } from "react-i18next"; type FieldMinZoomInternalProps = { @@ -31,5 +31,4 @@ const FieldMinZoomInternal: React.FC = (props) => { ); }; -const FieldMinZoom = withTranslation()(FieldMinZoomInternal); -export default FieldMinZoom; +export const FieldMinZoom = withTranslation()(FieldMinZoomInternal); diff --git a/src/components/FieldMultiInput.tsx b/src/components/FieldMultiInput.tsx index 8625fb41..11fddf7d 100644 --- a/src/components/FieldMultiInput.tsx +++ b/src/components/FieldMultiInput.tsx @@ -1,5 +1,5 @@ -import InputMultiInput, {type InputMultiInputProps} from "./InputMultiInput"; -import Fieldset from "./Fieldset"; +import { InputMultiInput, type InputMultiInputProps } from "./InputMultiInput"; +import { Fieldset } from "./Fieldset"; type FieldMultiInputProps = InputMultiInputProps & { @@ -7,12 +7,10 @@ type FieldMultiInputProps = InputMultiInputProps & { }; -const FieldMultiInput: React.FC = (props) => { +export const FieldMultiInput: React.FC = (props) => { return (
); }; - -export default FieldMultiInput; diff --git a/src/components/FieldNumber.tsx b/src/components/FieldNumber.tsx index 73af887c..af5bbd0b 100644 --- a/src/components/FieldNumber.tsx +++ b/src/components/FieldNumber.tsx @@ -1,5 +1,5 @@ -import InputNumber, {type InputNumberProps} from "./InputNumber"; -import Block from "./Block"; +import { InputNumber, type InputNumberProps } from "./InputNumber"; +import { Block } from "./Block"; type FieldNumberProps = InputNumberProps & { @@ -10,12 +10,10 @@ type FieldNumberProps = InputNumberProps & { }; -const FieldNumber: React.FC = (props) => { +export const FieldNumber: React.FC = (props) => { return ( ); }; - -export default FieldNumber; diff --git a/src/components/FieldSelect.tsx b/src/components/FieldSelect.tsx index 8c17b47b..93a556e8 100644 --- a/src/components/FieldSelect.tsx +++ b/src/components/FieldSelect.tsx @@ -1,5 +1,5 @@ -import Block from "./Block"; -import InputSelect, {type InputSelectProps} from "./InputSelect"; +import { Block } from "./Block"; +import { InputSelect, type InputSelectProps } from "./InputSelect"; type FieldSelectProps = InputSelectProps & { @@ -10,12 +10,10 @@ type FieldSelectProps = InputSelectProps & { }; -const FieldSelect: React.FC = (props) => { +export const FieldSelect: React.FC = (props) => { return ( ); }; - -export default FieldSelect; diff --git a/src/components/FieldSource.tsx b/src/components/FieldSource.tsx index b288a4d4..5003c790 100644 --- a/src/components/FieldSource.tsx +++ b/src/components/FieldSource.tsx @@ -1,8 +1,8 @@ import React from "react"; import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json"; -import Block from "./Block"; -import InputAutocomplete from "./InputAutocomplete"; +import { Block } from "./Block"; +import { InputAutocomplete } from "./InputAutocomplete"; import { type WithTranslation, withTranslation } from "react-i18next"; type FieldSourceInternalProps = { @@ -38,5 +38,4 @@ const FieldSourceInternal: React.FC = ({ }; -const FieldSource = withTranslation()(FieldSourceInternal); -export default FieldSource; +export const FieldSource = withTranslation()(FieldSourceInternal); diff --git a/src/components/FieldSourceLayer.tsx b/src/components/FieldSourceLayer.tsx index 16e597bd..f4b1ad14 100644 --- a/src/components/FieldSourceLayer.tsx +++ b/src/components/FieldSourceLayer.tsx @@ -1,8 +1,8 @@ import React from "react"; import {latest} from "@maplibre/maplibre-gl-style-spec"; -import Block from "./Block"; -import InputAutocomplete from "./InputAutocomplete"; +import { Block } from "./Block"; +import { InputAutocomplete } from "./InputAutocomplete"; import { type WithTranslation, withTranslation } from "react-i18next"; type FieldSourceLayerInternalProps = { @@ -35,5 +35,4 @@ const FieldSourceLayerInternal: React.FC = ({ ); }; -const FieldSourceLayer = withTranslation()(FieldSourceLayerInternal); -export default FieldSourceLayer; +export const FieldSourceLayer = withTranslation()(FieldSourceLayerInternal); diff --git a/src/components/FieldSpec.tsx b/src/components/FieldSpec.tsx index 0cec0f1d..4ba1c84e 100644 --- a/src/components/FieldSpec.tsx +++ b/src/components/FieldSpec.tsx @@ -1,6 +1,6 @@ -import Block, { type BlockProps } from "./Block"; -import InputSpec, { type FieldSpecType, type InputSpecProps } from "./InputSpec"; -import Fieldset, { type FieldsetProps } from "./Fieldset"; +import { Block, type BlockProps } from "./Block"; +import { InputSpec, type FieldSpecType, type InputSpecProps } from "./InputSpec"; +import { Fieldset, type FieldsetProps } from "./Fieldset"; function getElementFromType(fieldSpec: { type?: FieldSpecType, values?: unknown[] }): typeof Fieldset | typeof Block { switch(fieldSpec.type) { @@ -36,7 +36,7 @@ function getElementFromType(fieldSpec: { type?: FieldSpecType, values?: unknown[ export type FieldSpecProps = InputSpecProps & BlockProps & FieldsetProps; -const FieldSpec: React.FC = (props) => { +export const FieldSpec: React.FC = (props) => { const TypeBlock = getElementFromType(props.fieldSpec!); return ( @@ -45,5 +45,3 @@ const FieldSpec: React.FC = (props) => { ); }; - -export default FieldSpec; diff --git a/src/components/FieldString.tsx b/src/components/FieldString.tsx index 6f8fdb89..e8761546 100644 --- a/src/components/FieldString.tsx +++ b/src/components/FieldString.tsx @@ -1,5 +1,5 @@ -import Block from "./Block"; -import InputString, {type InputStringProps} from "./InputString"; +import { Block } from "./Block"; +import { InputString, type InputStringProps } from "./InputString"; type FieldStringProps = InputStringProps & { name?: string @@ -9,12 +9,10 @@ type FieldStringProps = InputStringProps & { } }; -const FieldString: React.FC = (props) => { +export const FieldString: React.FC = (props) => { return ( ); }; - -export default FieldString; diff --git a/src/components/FieldType.tsx b/src/components/FieldType.tsx index 87e14b27..c64c4b7a 100644 --- a/src/components/FieldType.tsx +++ b/src/components/FieldType.tsx @@ -1,8 +1,8 @@ import React from "react"; import {v8} from "@maplibre/maplibre-gl-style-spec"; -import Block from "./Block"; -import InputSelect from "./InputSelect"; -import InputString from "./InputString"; +import { Block } from "./Block"; +import { InputSelect } from "./InputSelect"; +import { InputString } from "./InputString"; import { type WithTranslation, withTranslation } from "react-i18next"; import { startCase } from "lodash"; @@ -43,5 +43,4 @@ const FieldTypeInternal: React.FC = ({ ); }; -const FieldType = withTranslation()(FieldTypeInternal); -export default FieldType; +export const FieldType = withTranslation()(FieldTypeInternal); diff --git a/src/components/FieldUrl.tsx b/src/components/FieldUrl.tsx index 6466022b..845b9e45 100644 --- a/src/components/FieldUrl.tsx +++ b/src/components/FieldUrl.tsx @@ -1,5 +1,5 @@ -import InputUrl, {type FieldUrlProps as InputUrlProps} from "./InputUrl"; -import Block from "./Block"; +import { InputUrl, type FieldUrlProps as InputUrlProps } from "./InputUrl"; +import { Block } from "./Block"; type FieldUrlProps = InputUrlProps & { @@ -10,12 +10,10 @@ type FieldUrlProps = InputUrlProps & { }; -const FieldUrl: React.FC = (props) => { +export const FieldUrl: React.FC = (props) => { return ( ); }; - -export default FieldUrl; diff --git a/src/components/Fieldset.tsx b/src/components/Fieldset.tsx index b0848edd..32dfa608 100644 --- a/src/components/Fieldset.tsx +++ b/src/components/Fieldset.tsx @@ -1,8 +1,8 @@ import React, { type PropsWithChildren, type ReactElement } from "react"; import classnames from "classnames"; -import FieldDocLabel from "./FieldDocLabel"; -import Doc from "./Doc"; -import generateUniqueId from "../libs/document-uid"; +import { FieldDocLabel } from "./FieldDocLabel"; +import { Doc } from "./Doc"; +import { generateUniqueId } from "../libs/document-uid"; export type FieldsetProps = PropsWithChildren & { label?: string, @@ -12,7 +12,7 @@ export type FieldsetProps = PropsWithChildren & { }; -const Fieldset: React.FC = (props) => { +export const Fieldset: React.FC = (props) => { const [showDoc, setShowDoc] = React.useState(false); const labelId = React.useRef(generateUniqueId("fieldset_label_")); @@ -49,5 +49,3 @@ const Fieldset: React.FC = (props) => { ); }; - -export default Fieldset; diff --git a/src/components/FilterEditor.tsx b/src/components/FilterEditor.tsx index 83478b7a..fb4b5d29 100644 --- a/src/components/FilterEditor.tsx +++ b/src/components/FilterEditor.tsx @@ -7,13 +7,13 @@ import {migrate, convertFilter} from "@maplibre/maplibre-gl-style-spec"; import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json"; import {combiningFilterOps} from "../libs/filterops"; -import InputSelect from "./InputSelect"; -import Block from "./Block"; -import SingleFilterEditor from "./SingleFilterEditor"; -import FilterEditorBlock from "./FilterEditorBlock"; -import InputButton from "./InputButton"; -import Doc from "./Doc"; -import ExpressionProperty from "./_ExpressionProperty"; +import { InputSelect } from "./InputSelect"; +import { Block } from "./Block"; +import { SingleFilterEditor } from "./SingleFilterEditor"; +import { FilterEditorBlock } from "./FilterEditorBlock"; +import { InputButton } from "./InputButton"; +import { Doc } from "./Doc"; +import { ExpressionProperty } from "./ExpressionProperty"; import { type WithTranslation, withTranslation } from "react-i18next"; import type { MappedLayerErrors, StyleSpecificationWithId } from "../libs/definitions"; @@ -316,5 +316,4 @@ class FilterEditorInternal extends React.Component = (props) => { +export const IconLayer: React.FC = (props) => { const iconProps = { style: props.style }; switch(props.type) { case "fill-extrusion": return ; @@ -29,5 +29,3 @@ const IconLayer: React.FC = (props) => { default: return ; } }; - -export default IconLayer; diff --git a/src/components/InputArray.tsx b/src/components/InputArray.tsx index 41e96381..10518c78 100644 --- a/src/components/InputArray.tsx +++ b/src/components/InputArray.tsx @@ -1,6 +1,6 @@ import React from "react"; -import InputString from "./InputString"; -import InputNumber from "./InputNumber"; +import { InputString } from "./InputString"; +import { InputNumber } from "./InputNumber"; export type InputArrayProps = { value: (string | number | undefined)[] @@ -17,7 +17,7 @@ type InputArrayState = { initialPropsValue: unknown[] }; -export default class InputArray extends React.Component { +export class InputArray extends React.Component { static defaultProps = { value: [], default: [], diff --git a/src/components/InputAutocomplete.browser.test.tsx b/src/components/InputAutocomplete.browser.test.tsx index fc8c8dfd..c623d3fe 100644 --- a/src/components/InputAutocomplete.browser.test.tsx +++ b/src/components/InputAutocomplete.browser.test.tsx @@ -1,7 +1,7 @@ import { expect, test } from "vitest"; import { render } from "vitest-browser-react"; import { page } from "vitest/browser"; -import InputAutocomplete from "./InputAutocomplete"; +import { InputAutocomplete } from "./InputAutocomplete"; const fruits = ["apple", "banana", "cherry"]; diff --git a/src/components/InputAutocomplete.tsx b/src/components/InputAutocomplete.tsx index 7591a776..2a5224c6 100644 --- a/src/components/InputAutocomplete.tsx +++ b/src/components/InputAutocomplete.tsx @@ -11,7 +11,7 @@ export type InputAutocompleteProps = { "aria-label"?: string }; -export default function InputAutocomplete({ +export function InputAutocomplete({ value, options = [], onChange = () => {}, diff --git a/src/components/InputButton.tsx b/src/components/InputButton.tsx index e87e6afa..6e2592a6 100644 --- a/src/components/InputButton.tsx +++ b/src/components/InputButton.tsx @@ -14,7 +14,7 @@ type InputButtonProps = { title?: string }; -export default class InputButton extends React.Component { +export class InputButton extends React.Component { render() { return