Port components to ts 5 (#2724)

* Paginator & tests

(plus some imports that needlessly specify .js)

* progress-ring

* quote component simplified and moved to body-units

* Radio panel

* role-selector

* salesforce-form, plus finally fixed the tilde issue

* select

* share icons (always minimal)

* Prettier

Author: RoyEJohnson

src/app/components/body-units/body-units.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import RawHTML from '~/components/jsx-helpers/raw-html';
-import Quote from '~/components/quote/quote.js';
+import Quote from './quote';
 import JITLoad from '~/helpers/jit-load';
 
 function Unknown({data, type}: {data: unknown; type: string}) {
@@ -19,7 +19,7 @@ type CTAData = {
     description: string;
     button_href: string;
     button_text: string;
-}
+};
 
 function CTA({data}: {data: CTAData}) {
     const alignment = convertAlignment(data.alignment);
@@ -45,7 +45,7 @@ type AImageData = {
         original: {
             src: string;
             alt: string;
-        }
+        };
     };
     alignment: string;
     alt_text: string;
@@ -71,25 +71,25 @@ function AlignedImage({data}: {data: AImageData}) {
 type PQData = {
     quote: string;
     attribution: string;
-}
+};
 
 function PullQuote({data}: {data: PQData}) {
     const model = {
-        image: {},
         content: data.quote,
         attribution: data.attribution
     };
 
     return <Quote model={model} />;
 }
 
-
 export type DocumentData = {
     download_url: string;
-}
+};
 
 function Document({data}: {data: DocumentData}) {
-    return <JITLoad importFn={() => import('./import-pdf-unit.js')} data={data} />;
+    return (
+        <JITLoad importFn={() => import('./import-pdf-unit.js')} data={data} />
+    );
 }
 
 // Using CMS tags, which are not camel-case
@@ -105,25 +105,39 @@ const bodyUnits = {
 
 export type UnitType = {
     id: string;
-} & ({
-    type: 'paragraph' | 'aligned_html';
-    value: string;
-} | {
-    type: 'aligned_image';
-    value: AImageData;
-} | {
-    type: 'pullquote';
-    value: PQData;
-} | {
-    type: 'document';
-    value: DocumentData;
-} | {
-    type: 'blog_cta';
-    value: CTAData;
-})
+} & (
+    | {
+          type: 'paragraph' | 'aligned_html';
+          value: string;
+      }
+    | {
+          type: 'aligned_image';
+          value: AImageData;
+      }
+    | {
+          type: 'pullquote';
+          value: PQData;
+      }
+    | {
+          type: 'document';
+          value: DocumentData;
+      }
+    | {
+          type: 'blog_cta';
+          value: CTAData;
+      }
+);
 
 export default function BodyUnit({unit}: {unit: UnitType}) {
-    const Unit = bodyUnits[unit.type] as ({data}: {data: typeof unit.value}) => React.JSX.Element;
-
-    return Unit ? <Unit data={unit.value} /> : <Unknown data={unit.value} type={unit.type} />;
+    const Unit = bodyUnits[unit.type] as ({
+        data
+    }: {
+        data: typeof unit.value;
+    }) => React.JSX.Element;
+
+    return Unit ? (
+        <Unit data={unit.value} />
+    ) : (
+        <Unknown data={unit.value} type={unit.type} />
+    );
 }

src/app/components/body-units/pdf-unit.tsx

@@ -66,7 +66,9 @@ function toggleFullscreen(
     if (!fsFn) {
         return;
     }
-    elem.requestFullscreen = elem[fsFn as keyof typeof elem] as () => Promise<void>;
+    elem.requestFullscreen = elem[
+        fsFn as keyof typeof elem
+    ] as () => Promise<void>;
 
     if (!document.fullscreenElement) {
         elem.requestFullscreen().catch((err) => {
@@ -123,7 +125,9 @@ export default function Document({data}: {data: DocumentData}) {
         >
             <PDF
                 file={data.download_url}
-                onLoadSuccess={({numPages: n}: {numPages: number}) => setNumPages(n)}
+                onLoadSuccess={({numPages: n}: {numPages: number}) =>
+                    setNumPages(n)
+                }
                 inputRef={ref}
             >
                 <div className="pages-side-by-side">

src/app/components/body-units/quote.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import RawHTML from '~/components/jsx-helpers/raw-html';
+
+export default function Quote({
+    model
+}: {
+    model: {
+        content: string;
+        attribution: string;
+    };
+}) {
+    return (
+        <div className="quote">
+            <blockquote>
+                <RawHTML html={model.content} />
+                {Boolean(model.attribution) && (
+                    <div className="attribution">— {model.attribution}</div>
+                )}
+            </blockquote>
+        </div>
+    );
+}

src/app/components/form-select/form-select.tsx

@@ -1,21 +1,28 @@
 import React from 'react';
 import DropdownSelect from '~/components/select/drop-down/drop-down';
+import {SelectItem} from '../select/select-context';
 
 export default function FormSelect({
-    label, name, selectAttributes, options=[], onValueUpdate
+    label,
+    name,
+    selectAttributes,
+    options = [],
+    onValueUpdate
 }: {
     label: string;
     name: string;
     selectAttributes: object;
-    options: unknown[];
-    onValueUpdate?: unknown;
+    options: SelectItem[];
+    onValueUpdate?: (v: string) => void;
 }) {
     return (
         <div className="control-group">
             {label && <label className="field-label">{label}</label>}
             <DropdownSelect
-                name={name} {...selectAttributes}
-                options={options} onValueUpdate={onValueUpdate}
+                name={name}
+                {...selectAttributes}
+                options={options}
+                onValueUpdate={onValueUpdate}
             />
         </div>
     );

src/app/components/paginator/paginator-context.js

@@ -0,0 +1,38 @@
+import {useState, useCallback} from 'react';
+import buildContext from '~/components/jsx-helpers/build-context';
+
+type ContextParams = {
+    resultsPerPage?: number;
+    initialPage?: number;
+};
+
+function useContextValue(params: ContextParams = {}) {
+    const {resultsPerPage = 1, initialPage = 1} = params;
+    const [currentPage, setCurrentPage] = useState(initialPage);
+    const firstOnPage = (currentPage - 1) * resultsPerPage;
+    const lastOnPage = firstOnPage + resultsPerPage - 1;
+    const isVisible = useCallback(
+        (childIndex: number) =>
+            childIndex >= firstOnPage && childIndex <= lastOnPage,
+        [firstOnPage, lastOnPage]
+    );
+    const visibleChildren = useCallback(
+        (children: React.ReactNode[]) =>
+            children.slice(firstOnPage, lastOnPage + 1),
+        [firstOnPage, lastOnPage]
+    );
+
+    return {
+        currentPage,
+        setCurrentPage,
+        resultsPerPage,
+        firstOnPage,
+        lastOnPage,
+        isVisible,
+        visibleChildren
+    };
+}
+
+const {useContext, ContextProvider} = buildContext({useContextValue});
+
+export {useContext as default, ContextProvider as PaginatorContextProvider};

src/app/components/paginator/paginator-context.ts

@@ -2,28 +2,28 @@ import React from 'react';
 import usePaginatorContext from '../paginator-context';
 import './paginator.scss';
 
-function getPageIndicators(pages, currentPage) {
+function getPageIndicators(pages: number, currentPage: number) {
     const indicatorCount = Math.min(pages, 5);
-    const propsFor = (label) => ({
+    const propsFor = (label: number) => ({
         label,
         page: `page ${label}`,
         disabled: label === currentPage,
         selected: label === currentPage
     });
-    const result = Array(indicatorCount).fill();
+    const result = Array(indicatorCount).fill(0);
 
     if (pages - currentPage < 3) {
         result[0] = pages - indicatorCount + 1;
     } else {
-        result[0] = (currentPage > 3) ? currentPage - 2 : 1;
+        result[0] = currentPage > 3 ? currentPage - 2 : 1;
     }
     for (let i = 1; i < indicatorCount; ++i) {
-        result[i] = result[i-1] + 1;
+        result[i] = result[i - 1] + 1;
     }
     return result.map(propsFor);
 }
 
-function PageButtonBar({pages}) {
+function PageButtonBar({pages}: {pages: number}) {
     const {currentPage, setCurrentPage} = usePaginatorContext();
     const disablePrevious = currentPage === 1;
     const disableNext = currentPage === pages;
@@ -37,32 +37,44 @@ function PageButtonBar({pages}) {
     }
 
     return (
-        <nav aria-label='pagination'>
-            <ul className='no-bullets button-bar'>
-                <li><button disabled={disablePrevious} onClick={prevPage}>Previous</button></li>
-                {
-                    pageIndicators.map((indicator) =>
-                        <li key={indicator.page}><button
+        <nav aria-label="pagination">
+            <ul className="no-bullets button-bar">
+                <li>
+                    <button disabled={disablePrevious} onClick={prevPage}>
+                        Previous
+                    </button>
+                </li>
+                {pageIndicators.map((indicator) => (
+                    <li key={indicator.page}>
+                        <button
                             disabled={indicator.disabled}
                             aria-current={indicator.selected ? 'page' : 'false'}
                             aria-label={indicator.page}
                             onClick={() => setCurrentPage(indicator.label)}
-                        >{indicator.label}</button></li>
-                    )
-                }
-                <li><button disabled={disableNext} onClick={nextPage}>Next</button></li>
+                        >
+                            {indicator.label}
+                        </button>
+                    </li>
+                ))}
+                <li>
+                    <button disabled={disableNext} onClick={nextPage}>
+                        Next
+                    </button>
+                </li>
             </ul>
         </nav>
     );
 }
 
-export function PaginatorControls({items}) {
+export function PaginatorControls({items}: {items: number}) {
     const {currentPage, resultsPerPage} = usePaginatorContext();
     const pages = Math.ceil(items / resultsPerPage);
     const firstIndex = (currentPage - 1) * resultsPerPage;
     const endBefore = Math.min(firstIndex + resultsPerPage, items);
     const resultRange = `${firstIndex + 1}-${endBefore}`;
-    const searchTerm = new window.URLSearchParams(window.location.search).get('q');
+    const searchTerm = new window.URLSearchParams(window.location.search).get(
+        'q'
+    );
 
     return (
         <div className="paginator">