chore: move more components into @ourworldindata/components

packages/@ourworldindata/grapher/src/core/OverlayHeader.tsx → 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,

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 {

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 {

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;
 }

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 {

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

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

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,

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