@buildcanada/charts 0.1.0

package/src/components/closeButton/CloseButton.scss

@@ -0,0 +1,40 @@
+.close-button {
+    // keep in sync with CLOSE_BUTTON_SIZE in CloseButton.tsx
+    $size: 32px;
+
+    $light-stroke: $gray-20;
+
+    $active-fill: #dbe5f0;
+    $hover-fill: $gray-10;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    position: relative;
+    height: $size;
+    width: $size;
+    padding: 7px;
+
+    color: $light-text;
+    background: white;
+    border: 1px solid $light-stroke;
+    border-radius: 50%;
+
+    &:hover {
+        background: $hover-fill;
+        border-color: $hover-fill;
+        cursor: pointer;
+        color: $dark-text;
+    }
+
+    &:active {
+        background: $active-fill;
+        border: 1px solid $active-fill;
+    }
+
+    svg {
+        height: 14px;
+        width: 14px;
+    }
+}

package/src/components/closeButton/CloseButton.tsx

@@ -0,0 +1,27 @@
+import * as React from "react"
+import cx from "classnames"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faXmark } from "@fortawesome/free-solid-svg-icons"
+
+// keep in sync with $size in CloseButton.scss
+export const CLOSE_BUTTON_WIDTH = 32
+export const CLOSE_BUTTON_HEIGHT = 32
+
+export function CloseButton({
+    onClick,
+    className,
+}: {
+    onClick: React.MouseEventHandler<HTMLButtonElement>
+    className?: string
+}) {
+    return (
+        <button
+            type="button"
+            className={cx("close-button", className)}
+            onClick={onClick}
+            aria-label="Close"
+        >
+            <FontAwesomeIcon icon={faXmark} />
+        </button>
+    )
+}

package/src/components/index.ts

@@ -0,0 +1,70 @@
+/**
+ * Component exports for @buildcanada/charts
+ */
+
+// Text wrapping components
+export { TextWrap, shortenWithEllipsis } from "./TextWrap/TextWrap.js"
+
+export {
+    MarkdownTextWrap,
+    sumTextWrapHeights,
+    toPlaintext,
+} from "./MarkdownTextWrap/MarkdownTextWrap.js"
+
+// Simple markdown text
+export {
+    SimpleMarkdownText,
+    HtmlOrSimpleMarkdownText,
+} from "./SimpleMarkdownText.js"
+
+// Expandable toggle
+export { ExpandableToggle } from "./ExpandableToggle/ExpandableToggle.js"
+
+// Form components
+export { LabeledSwitch } from "./LabeledSwitch/LabeledSwitch.js"
+export { Checkbox } from "./Checkbox.js"
+export { RadioButton } from "./RadioButton.js"
+export { TextInput } from "./TextInput.js"
+export { Button } from "./Button/Button.js"
+
+// Overlay components
+export {
+    CloseButton,
+    CLOSE_BUTTON_HEIGHT,
+    CLOSE_BUTTON_WIDTH,
+} from "./closeButton/CloseButton.js"
+export { OverlayHeader } from "./OverlayHeader.js"
+
+// Visual components
+export { Halo } from "./Halo/Halo.js"
+export { BodyPortal } from "./BodyPortal/BodyPortal.js"
+export { LoadingIndicator } from "./loadingIndicator/LoadingIndicator.js"
+
+// React utilities
+export { reactRenderToStringClientOnly } from "./reactUtil.js"
+
+// Grapher-specific components
+export { GrapherTabIcon } from "./GrapherTabIcon.js"
+export { GrapherTrendArrow } from "./GrapherTrendArrow.js"
+
+// Stub components for OWID data page features
+export { CodeSnippet } from "./stubs/CodeSnippet.js"
+export {
+    makeSource,
+    makeLastUpdated,
+    makeNextUpdate,
+    makeDateRange,
+    makeUnit,
+    makeUnitConversionFactor,
+    makeLinks,
+} from "./stubs/IndicatorKeyData.js"
+export { IndicatorSources } from "./stubs/IndicatorSources.js"
+export { IndicatorProcessing } from "./stubs/IndicatorProcessing.js"
+export { DataCitation } from "./stubs/DataCitation.js"
+
+// Site constants re-exported for convenience
+export {
+    DATAPAGE_ABOUT_THIS_DATA_SECTION_ID,
+    DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID,
+    REUSE_THIS_WORK_SECTION_ID,
+} from "../types/index.js"

package/src/components/loadingIndicator/LoadingIndicator.scss

@@ -0,0 +1,40 @@
+.loading-indicator {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.loading-indicator span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    border: 5px solid;
+    box-sizing: content-box;
+    border-radius: 30px;
+    height: 30px;
+    width: 30px;
+    opacity: 0;
+
+    animation: pulsate 1s ease-out;
+    animation-iteration-count: infinite;
+}
+
+@keyframes pulsate {
+    0% {
+        transform: scale(0.1);
+        opacity: 0;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        transform: scale(1.2);
+        opacity: 0;
+    }
+}

package/src/components/loadingIndicator/LoadingIndicator.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+import { Bounds } from "../../utils/index.js"
+
+const DEFAULT_COLOR = "#333"
+
+export const LoadingIndicator = (props: {
+    backgroundColor?: string
+    bounds?: Bounds
+    color?: string
+    title?: string
+}): React.ReactElement => {
+    return (
+        <div
+            className="loading-indicator"
+            title={props.title}
+            style={{
+                backgroundColor: props.backgroundColor,
+                ...props.bounds?.toCSS(),
+            }}
+        >
+            <span
+                style={{
+                    borderColor: props.color || DEFAULT_COLOR,
+                }}
+            />
+        </div>
+    )
+}

package/src/components/markdown/remarkPlainLinks.ts

@@ -0,0 +1,36 @@
+import { findAndReplace } from "mdast-util-find-and-replace"
+
+// This regex matches:
+//   "http"
+//   an optional "s"
+//   two / characters
+//   The subdomains and hostname: Any word or numeric character or "-" one or more times followed by a period
+//   The TLD: Any word or numeric character or "-" one or more times (the TLD is optional, and URLs like localhost are also valid)
+//   The port: A colon followed by one or more digits (optional)
+//   The path, query string and fragment: A forward slash followed by any word or numeric character (unicode classes so umlauts like ö match
+//       as well as any of the following: .+?:%&=~#) zero or more times. Note that we exclude space even though that is valid in a URL but it tends
+//       to make the match too greedy.
+//       We match the same subgroup [\p{L}\p{N}_\-.\+/?:%&=~#] twice, once with a * and then excactly once but without interpuncation characters .?:
+//       This is to make sure that we don't match trailing punctuation as part of the URL ("This is an http://example.com." - note that the leading
+//       period should not be part of the URL)
+//       Finally, the very last part is a lone forward slash which would not be matched by the previous subgroup.
+export const urlRegex =
+    /https?:\/\/([\w-]+\.)*[\w-]+(:\d+)?((\/[\p{L}\p{N}_\-.+/?:%&=~#]*[\p{L}\p{N}_\-+/%&=~#])|\/)?/gu
+
+export function remarkPlainLinks() {
+    const turnIntoLink = (value: string) => {
+        return {
+            type: "link" as const,
+            url: value,
+            children: [
+                {
+                    type: "text" as const,
+                    value: value,
+                },
+            ],
+        }
+    }
+    return (tree: any) => {
+        findAndReplace(tree, [[urlRegex, turnIntoLink]])
+    }
+}

package/src/components/reactUtil.ts

@@ -0,0 +1,20 @@
+import { createRoot } from "react-dom/client"
+import { flushSync } from "react-dom"
+
+export const reactRenderToStringClientOnly = (
+    element: React.ReactElement
+): string => {
+    if (typeof document === "undefined") {
+        throw new Error(
+            "reactRenderToStringClientOnly can only be used in a browser environment"
+        )
+    }
+
+    // This is the React-recommended way of rendering a component to HTML on the client-side, see https://react.dev/reference/react-dom/server/renderToString#removing-rendertostring-from-the-client-code
+    const div = document.createElement("div")
+    const root = createRoot(div)
+    flushSync(() => root.render(element))
+    const html = div.innerHTML
+    root.unmount()
+    return html
+}

package/src/components/stubs/CodeSnippet.tsx

@@ -0,0 +1,19 @@
+/**
+ * Stub component for CodeSnippet.
+ * This is a placeholder - the consuming application should provide
+ * its own implementation if code snippet functionality is needed.
+ */
+import React from "react"
+
+export interface CodeSnippetProps {
+    code: string
+    language?: string
+}
+
+export function CodeSnippet({ code }: CodeSnippetProps): React.ReactElement {
+    return (
+        <pre style={{ background: "#f5f5f5", padding: "1rem", overflow: "auto" }}>
+            <code>{code}</code>
+        </pre>
+    )
+}

package/src/components/stubs/DataCitation.tsx

@@ -0,0 +1,16 @@
+/**
+ * Stub component for DataCitation.
+ * This is a placeholder for OWID data page functionality.
+ */
+import React from "react"
+
+export interface DataCitationProps {
+    citation?: string
+    citationShort?: string
+    citationLong?: string
+    [key: string]: unknown
+}
+
+export function DataCitation(_props: DataCitationProps): React.ReactElement | null {
+    return null
+}

package/src/components/stubs/IndicatorKeyData.tsx

@@ -0,0 +1,45 @@
+/**
+ * Stub functions for IndicatorKeyData.
+ * These are placeholders for OWID data page functionality.
+ */
+import React from "react"
+
+export interface KeyDataItem {
+    label: string
+    value: React.ReactNode
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function makeSource(_source: unknown): any {
+    return null
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function makeLastUpdated(_date: unknown): any {
+    return null
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function makeNextUpdate(_date: unknown): any {
+    return null
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function makeDateRange(_range: unknown): any {
+    return null
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function makeUnit(_unit: unknown): any {
+    return null
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function makeUnitConversionFactor(_factor: unknown): any {
+    return null
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function makeLinks(_links: unknown): any {
+    return null
+}

package/src/components/stubs/IndicatorProcessing.tsx

@@ -0,0 +1,15 @@
+/**
+ * Stub component for IndicatorProcessing.
+ * This is a placeholder for OWID data page functionality.
+ */
+import React from "react"
+
+export interface IndicatorProcessingProps {
+    processing?: unknown
+    descriptionProcessing?: string
+    [key: string]: unknown
+}
+
+export function IndicatorProcessing(_props: IndicatorProcessingProps): React.ReactElement | null {
+    return null
+}

package/src/components/stubs/IndicatorSources.tsx

@@ -0,0 +1,15 @@
+/**
+ * Stub component for IndicatorSources.
+ * This is a placeholder for OWID data page functionality.
+ */
+import React from "react"
+
+export interface IndicatorSourcesProps {
+    sources?: unknown[]
+    isEmbeddedInADataPage?: boolean
+    [key: string]: unknown
+}
+
+export function IndicatorSources(_props: IndicatorSourcesProps): React.ReactElement | null {
+    return null
+}

package/src/components/styles/colors.scss

@@ -0,0 +1,113 @@
+/*******************************************************************************
+ * Colors
+ */
+
+@use "sass:color";
+
+// Brand colors
+$oxford-blue: #002147;
+$vermillion: #ce261e;
+$amber: #f7c020;
+
+// Blue shades
+$blue-100: #002147;
+$blue-95: #112e4f;
+$blue-90: #1d3d63;
+$blue-60: #577291;
+$blue-65: #46688f;
+$blue-50: #6e87a2;
+$blue-40: #98a9bd;
+$blue-30: #a4b6ca;
+$blue-20: #dbe5f0;
+$blue-10: #ebeef2;
+$blue-5: #f0f4fa;
+
+// Gray shades
+$gray-100: #2d2e2d;
+$gray-90: #4e4e4e;
+$gray-80: #5b5b5b;
+$gray-70: #767676;
+$gray-60: #a1a1a1;
+$gray-50: #c6c6c6;
+$gray-30: #dadada;
+$gray-20: #e7e7e7;
+$gray-10: #f2f2f2;
+$gray-5: #f7f7f7;
+
+// Amber shades
+$amber-110: #f9cf44;
+$amber-10: #f4eddb;
+
+$beige: #fbf9f3;
+$white: #ffffff;
+
+// Accent colors
+$accent-electric-blue: #2162e6;
+$accent-pale-blue: #e7f2ff;
+$accent-vermillion: #b40000;
+
+// Visited
+$purple-90: #631d49;
+$purple-60: #91577c;
+$visited-light: #b398a9;
+
+/* Text colors */
+$tertiary-text-color: $amber;
+$grey-text-color: #616161;
+$text-color: $blue-90;
+$secondary-text-color: $blue-60;
+$bluish-grey-text-color: $blue-50;
+$error-text-color: $vermillion;
+
+/* Category colors */
+$population-color: #2082a2;
+$health-color: #bf1b1b;
+$food-color: #588a0f;
+$energy-color: #ca6f34;
+$environment-color: #0c6947;
+$technology-color: #2774c6;
+$growth-inequality-color: #009655;
+$work-life-color: #ab348a;
+$public-sector-color: #eb6400;
+$global-connections-color: #17393d;
+$war-peace-color: #660000;
+$politics-color: #1b0655;
+$violence-rights-color: #cc235c;
+$education-color: #253f77;
+$media-color: #0089be;
+$culture-color: #af488f;
+
+/* Controls color */
+$controls-color: #0073e6;
+$light-shadow:
+    rgba(0, 0, 0, 0.1) 0px 0px 0px 1px,
+    rgba(0, 0, 0, 0.08) 0px 2px 2px;
+
+/* SDG colors */
+$sdgColors: (
+    1: color.scale(#e5243b, $lightness: -15%),
+    2: #dda63a,
+    3: color.scale(#4c9f38, $lightness: -17%),
+    4: color.scale(#c5192d, $lightness: -15%),
+    5: color.scale(#ff3a21, $lightness: -19%),
+    6: #26bde2,
+    7: #fcc30b,
+    8: color.scale(#a21942, $lightness: -15%),
+    9: #fd6925,
+    10: color.scale(#dd1367, $lightness: -15%),
+    11: #fd9d24,
+    12: #bf8b2e,
+    13: color.scale(#3f7e44, $lightness: -15%),
+    14: color.scale(#0a97d9, $lightness: -20%),
+    15: #56c02b,
+    16: color.scale(#00689d, $lightness: -15%),
+    17: color.scale(#19486a, $lightness: -15%),
+);
+
+:root {
+    // See also owidTypes.ts > OwidGdocPostContent > cover-color
+    --amber: #{$amber};
+    @each $i, $sdgColor in $sdgColors {
+        --sdg-color-#{$i}: #{$sdgColor};
+    }
+}