From 52ad9e7b25363ade7aacb231c50b57c082fda231 Mon Sep 17 00:00:00 2001 From: Marcel Gerber Date: Thu, 25 Jul 2024 13:12:32 +0100 Subject: [PATCH] chore: move more components into `@ourworldindata/components` --- .../src/core => components/src}/OverlayHeader.scss | 0 .../{grapher/src/core => components/src}/OverlayHeader.tsx | 2 +- .../src/closeButton/CloseButton.scss | 0 .../src/closeButton/CloseButton.tsx | 0 packages/@ourworldindata/components/src/index.ts | 6 ++++++ .../@ourworldindata/grapher/src/controls/SettingsMenu.tsx | 2 +- packages/@ourworldindata/grapher/src/core/grapher.scss | 5 +++-- .../grapher/src/entitySelector/EntitySelector.tsx | 7 +++++-- .../@ourworldindata/grapher/src/modal/DownloadModal.tsx | 3 +-- packages/@ourworldindata/grapher/src/modal/EmbedModal.tsx | 3 +-- packages/@ourworldindata/grapher/src/modal/ModalHeader.tsx | 2 +- .../@ourworldindata/grapher/src/modal/SourcesModal.tsx | 5 +++-- 12 files changed, 22 insertions(+), 13 deletions(-) rename packages/@ourworldindata/{grapher/src/core => components/src}/OverlayHeader.scss (100%) rename packages/@ourworldindata/{grapher/src/core => components/src}/OverlayHeader.tsx (91%) rename packages/@ourworldindata/{grapher => components}/src/closeButton/CloseButton.scss (100%) rename packages/@ourworldindata/{grapher => components}/src/closeButton/CloseButton.tsx (100%) diff --git a/packages/@ourworldindata/grapher/src/core/OverlayHeader.scss b/packages/@ourworldindata/components/src/OverlayHeader.scss similarity index 100% rename from packages/@ourworldindata/grapher/src/core/OverlayHeader.scss rename to packages/@ourworldindata/components/src/OverlayHeader.scss diff --git a/packages/@ourworldindata/grapher/src/core/OverlayHeader.tsx b/packages/@ourworldindata/components/src/OverlayHeader.tsx similarity index 91% rename from packages/@ourworldindata/grapher/src/core/OverlayHeader.tsx rename to packages/@ourworldindata/components/src/OverlayHeader.tsx index 2942f27939f..2a9ec837502 100644 --- a/packages/@ourworldindata/grapher/src/core/OverlayHeader.tsx +++ b/packages/@ourworldindata/components/src/OverlayHeader.tsx @@ -1,6 +1,6 @@ import React from "react" import cx from "classnames" -import { CloseButton } from "../closeButton/CloseButton.js" +import { CloseButton } from "./closeButton/CloseButton.js" export function OverlayHeader({ title, diff --git a/packages/@ourworldindata/grapher/src/closeButton/CloseButton.scss b/packages/@ourworldindata/components/src/closeButton/CloseButton.scss similarity index 100% rename from packages/@ourworldindata/grapher/src/closeButton/CloseButton.scss rename to packages/@ourworldindata/components/src/closeButton/CloseButton.scss diff --git a/packages/@ourworldindata/grapher/src/closeButton/CloseButton.tsx b/packages/@ourworldindata/components/src/closeButton/CloseButton.tsx similarity index 100% rename from packages/@ourworldindata/grapher/src/closeButton/CloseButton.tsx rename to packages/@ourworldindata/components/src/closeButton/CloseButton.tsx diff --git a/packages/@ourworldindata/components/src/index.ts b/packages/@ourworldindata/components/src/index.ts index d4d3f6a5d3a..13390550cea 100644 --- a/packages/@ourworldindata/components/src/index.ts +++ b/packages/@ourworldindata/components/src/index.ts @@ -34,6 +34,12 @@ export { IndicatorProcessing } from "./IndicatorProcessing/IndicatorProcessing.j export { Checkbox } from "./Checkbox.js" export { RadioButton } from "./RadioButton.js" +export { + CloseButton, + CLOSE_BUTTON_HEIGHT, + CLOSE_BUTTON_WIDTH, +} from "./closeButton/CloseButton.js" +export { OverlayHeader } from "./OverlayHeader.js" export { IndicatorSources } from "./IndicatorSources/IndicatorSources.js" export { diff --git a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx index 667af330e03..fe821f32780 100644 --- a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx +++ b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx @@ -30,7 +30,7 @@ import { TableFilterToggle, TableFilterToggleManager, } from "./settings/TableFilterToggle" -import { OverlayHeader } from "../core/OverlayHeader" +import { OverlayHeader } from "@ourworldindata/components" import { DEFAULT_GRAPHER_ENTITY_TYPE_PLURAL } from "../core/GrapherConstants" const { diff --git a/packages/@ourworldindata/grapher/src/core/grapher.scss b/packages/@ourworldindata/grapher/src/core/grapher.scss index 33e0bc952b2..216c1b47cef 100644 --- a/packages/@ourworldindata/grapher/src/core/grapher.scss +++ b/packages/@ourworldindata/grapher/src/core/grapher.scss @@ -77,9 +77,7 @@ $zindex-controls-drawer: 150; @import "../tabs/ExpandableTabs.scss"; @import "../slideInDrawer/SlideInDrawer.scss"; @import "../sidePanel/SidePanel.scss"; - @import "../closeButton/CloseButton.scss"; @import "../controls/Dropdown.scss"; - @import "../core/OverlayHeader.scss"; } // These rules are currently used elsewhere in the site. e.g. Explorers @@ -90,6 +88,9 @@ $zindex-controls-drawer: 150; @import "../../../components/src/Checkbox.scss"; @import "../../../components/src/RadioButton.scss"; +@import "../../../components/src/closeButton/CloseButton.scss"; +@import "../../../components/src/OverlayHeader.scss"; + .grapher_dark { color: $dark-text; } diff --git a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx index dd6ad58e7c9..2c73dd4b926 100644 --- a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx +++ b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx @@ -21,7 +21,11 @@ import { excludeUndefined, intersection, } from "@ourworldindata/utils" -import { Checkbox, RadioButton } from "@ourworldindata/components" +import { + Checkbox, + RadioButton, + OverlayHeader, +} from "@ourworldindata/components" import { FuzzySearch } from "../controls/FuzzySearch" import { faCircleXmark, @@ -46,7 +50,6 @@ import { scaleLinear, type ScaleLinear } from "d3-scale" import { ColumnSlug, OwidColumnDef } from "@ourworldindata/types" import { buildVariableTable } from "../core/LegacyToOwidTable" import { loadVariableDataAndMetadata } from "../core/loadVariable" -import { OverlayHeader } from "../core/OverlayHeader.js" import { DrawerContext } from "../slideInDrawer/SlideInDrawer.js" export interface EntitySelectorState { diff --git a/packages/@ourworldindata/grapher/src/modal/DownloadModal.tsx b/packages/@ourworldindata/grapher/src/modal/DownloadModal.tsx index 0d6f3995b2d..21dd4e3822b 100644 --- a/packages/@ourworldindata/grapher/src/modal/DownloadModal.tsx +++ b/packages/@ourworldindata/grapher/src/modal/DownloadModal.tsx @@ -8,7 +8,7 @@ import { triggerDownloadFromBlob, triggerDownloadFromUrl, } from "@ourworldindata/utils" -import { Checkbox } from "@ourworldindata/components" +import { Checkbox, OverlayHeader } from "@ourworldindata/components" import { LoadingIndicator } from "../loadingIndicator/LoadingIndicator" import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js" import { faDownload, faInfoCircle } from "@fortawesome/free-solid-svg-icons" @@ -20,7 +20,6 @@ import { } from "@ourworldindata/core-table" import { Modal } from "./Modal" import { GrapherExport } from "../captionedChart/StaticChartRasterizer.js" -import { OverlayHeader } from "../core/OverlayHeader.js" export interface DownloadModalManager { displaySlug: string diff --git a/packages/@ourworldindata/grapher/src/modal/EmbedModal.tsx b/packages/@ourworldindata/grapher/src/modal/EmbedModal.tsx index 11dc19d1d4d..919024e58d7 100644 --- a/packages/@ourworldindata/grapher/src/modal/EmbedModal.tsx +++ b/packages/@ourworldindata/grapher/src/modal/EmbedModal.tsx @@ -3,8 +3,7 @@ import React from "react" import { computed, action } from "mobx" import { Bounds, DEFAULT_BOUNDS } from "@ourworldindata/utils" import { Modal } from "./Modal" -import { CodeSnippet } from "@ourworldindata/components" -import { OverlayHeader } from "../core/OverlayHeader.js" +import { CodeSnippet, OverlayHeader } from "@ourworldindata/components" export interface EmbedModalManager { canonicalUrl?: string diff --git a/packages/@ourworldindata/grapher/src/modal/ModalHeader.tsx b/packages/@ourworldindata/grapher/src/modal/ModalHeader.tsx index fbc8db3a5cd..2cbf22a5173 100644 --- a/packages/@ourworldindata/grapher/src/modal/ModalHeader.tsx +++ b/packages/@ourworldindata/grapher/src/modal/ModalHeader.tsx @@ -1,5 +1,5 @@ import React from "react" -import { CloseButton } from "../closeButton/CloseButton.js" +import { CloseButton } from "@ourworldindata/components" export function ModalHeader({ title, diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx b/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx index 267d97536df..4210be78314 100644 --- a/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx +++ b/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx @@ -21,6 +21,9 @@ import { IndicatorProcessing, SimpleMarkdownText, DataCitation, + OverlayHeader, + CLOSE_BUTTON_WIDTH, + CloseButton, } from "@ourworldindata/components" import React from "react" import cx from "classnames" @@ -36,9 +39,7 @@ import { SourcesDescriptions } from "./SourcesDescriptions" import { Tabs } from "../tabs/Tabs" import { ExpandableTabs } from "../tabs/ExpandableTabs" import { LoadingIndicator } from "../loadingIndicator/LoadingIndicator" -import { CLOSE_BUTTON_WIDTH, CloseButton } from "../closeButton/CloseButton" import { isContinentsVariableId } from "../core/GrapherConstants" -import { OverlayHeader } from "../core/OverlayHeader.js" // keep in sync with variables in SourcesModal.scss const MAX_CONTENT_WIDTH = 640