chore: port JSX assets to TSX

.editorconfig

@@ -13,8 +13,8 @@ max_line_length = 80
 [*.md]
 trim_trailing_whitespace = false
 
-[*.{css,html,js,jsx,json,rb,erb}]
+[*.{css,html,js,json,rb,erb}]
 charset = utf-8
 
-[*.{html,jsx,erb,json}]
+[*.{html,erb,json}]
 max_line_length = 160

.github/workflows/push.yml

@@ -29,11 +29,11 @@ jobs:
         with:
           eslint: true
           eslint_dir: src
-          eslint_extensions: js,ts,jsx,tsx
+          eslint_extensions: js,ts,tsx
           eslint_auto_fix: false
           prettier: true
           prettier_dir: src
-          prettier_extensions: js,ts,jsx,tsx
+          prettier_extensions: js,ts,tsx
           prettier_auto_fix: false
       # Cypress disabled until tests rewritten to use new SB paths
       # - name: Cypress

.prettierignore

@@ -3,3 +3,4 @@ vendor
 ./reset
 preview
 node_modules
+public

.prettierrc.json

@@ -1,7 +1,7 @@
 {
   "overrides": [
     {
-      "files": ["*.html", "*.jsx"],
+      "files": ["*.html"],
       "options": {
         "printWidth": 160,
         "htmlWhitespaceSensitivity": "strict"

README.md

@@ -233,7 +233,7 @@ All components live in `src` and follow a directory and filename convention:
   - component directory (TitleCase)
     - `component.js` - this is the entry file for a component and is the only required file
     - `components.css` - additional CSS
-    - for react, `components.jsx`
+    - for react, `components.tsx`
 
 For example:
 
@@ -244,7 +244,7 @@ For example:
   - Accordion
     - component.js
     - component.css
-    - component.jsx
+    - component.tsx
 ```
 
 #### CSS

package.json

@@ -66,9 +66,9 @@
     "build": "node scripts/build.js",
     "build:verbose": "node scripts/build.js -v",
     "watch": "node scripts/build.js -w",
-    "format:check": "yarn prettier -c *.{js,ts} src/**/*.{js,jsx,ts,tsx} cypress",
-    "format:write": "yarn prettier -w *.{js,ts} src/**/*.{js,jsx,ts,tsx} cypress",
-    "lint": "eslint *.{js,ts} src/**/*.{js,jsx,ts,tsx} cypress",
+    "format:check": "yarn prettier -c *.{js,ts} src/**/*.{js,ts,tsx} cypress",
+    "format:write": "yarn prettier -w *.{js,ts} src/**/*.{js,ts,tsx} cypress",
+    "lint": "eslint *.{js,ts} src/**/*.{js,ts,tsx} cypress",
     "cy:open": "cypress open",
     "cy:headless": "cypress run --quiet",
     "update:all": "./scripts/update-dependents.sh",
@@ -87,7 +87,6 @@
     "js-cookie": "^2.2.1",
     "lodash.throttle": "^4.1.1",
     "nanoid": "^4.0.0",
-    "prop-types": "^15.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "redux": "^4.0.5",

public/mockServiceWorker.js

@@ -95,7 +95,7 @@ self.addEventListener("fetch", function (event) {
 
   // Bypass navigation requests.
   if (request.mode === "navigate") {
-    return;
+    return; 
   }
 
   // Opening the DevTools triggers the "only-if-cached" request

src/core/Code/Code.stories.tsx

@@ -1,4 +1,4 @@
-import Code from "./component.jsx";
+import Code from "./component.tsx";
 
 export default {
   title: "Components/Code",

src/core/Code/component.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+
+import "../utils/syntax-highlighter.css";
+import {
+  highlightSnippet,
+  registerDefaultLanguages,
+} from "../utils/syntax-highlighter";
+import languagesRegistry from "../utils/syntax-highlighter-registry";
+
+registerDefaultLanguages(languagesRegistry);
+
+type CodeProps = {
+  language: string;
+  snippet: string;
+  textSize?: string;
+  padding?: string;
+  additionalCSS?: string;
+};
+
+const Code = ({
+  language,
+  snippet,
+  textSize = "ui-text-code",
+  padding = "p-32",
+  additionalCSS = "",
+}: CodeProps) => {
+  const HTMLraw = highlightSnippet(language, `${snippet}`.trim()) ?? "";
+  const className = `language-${language} ${textSize}`;
+
+  return (
+    <div
+      className={`hljs overflow-auto ${padding} ${additionalCSS}`}
+      data-id="code"
+    >
+      <pre lang={language}>
+        <code
+          className={className}
+          dangerouslySetInnerHTML={{ __html: HTMLraw }}
+        />
+      </pre>
+    </div>
+  );
+};
+
+export default Code;

src/core/ConnectStateWrapper/component.jsx → src/core/ConnectStateWrapper/component.tsx

@@ -12,14 +12,18 @@ import { connectState, getRemoteDataStore } from "../remote-data-store";
   - initial state is set in useEffect so the wrapped component needs to handle it's props set to undefined initially
 */
 
-export const ConnectStateWrapper = (Component, selectors) => {
+const ConnectStateWrapper = (Component, selectors) => {
   const [state, setState] = useState({});
 
-  const setStateForKey = (key) => (storeState) => setState(() => ({ [key]: storeState }));
+  const setStateForKey = (key) => (storeState) =>
+    setState(() => ({ [key]: storeState }));
 
   useEffect(() => {
     const store = getRemoteDataStore();
-    const resolvedState = Object.keys(selectors).reduce((acc, key) => ({ ...acc, [key]: selectors[key](store) }), {});
+    const resolvedState = Object.keys(selectors).reduce(
+      (acc, key) => ({ ...acc, [key]: selectors[key](store) }),
+      {}
+    );
 
     // Set initial state
     setState(resolvedState);

src/core/ContactFooter/ContactFooter.stories.tsx

@@ -1,4 +1,4 @@
-import ContactFooter from "./component.jsx";
+import ContactFooter from "./component.tsx";
 
 export default {
   title: "Components/Contact Footer",

src/core/ContactFooter/component.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect } from "react";
+
+import Icon from "../Icon/component.tsx";
+import _absUrl from "../url-base.js";
+import toggleChatWidget from "../hubspot-chat-toggle";
+import "./component.css";
+
+type ContactFooterProps = {
+  urlBase: string;
+};
+
+const ContactFooter = ({ urlBase }: ContactFooterProps) => {
+  useEffect(() => toggleChatWidget({ dataId: "contact-footer" }), []);
+  const absUrl = (path) => _absUrl(path, urlBase);
+
+  return (
+    <div
+      className="ui-contact-footer font-sans antialiased"
+      data-id="contact-footer"
+    >
+      <div className="w-full bp-lg max-w-screen-xl mx-auto py-64 grid grid-cols-1 md:grid-cols-3 ui-grid-gap ui-grid-px">
+        <div className="ui-contact-footer-box">
+          <Icon
+            name="icon-display-live-chat"
+            size="3rem"
+            additionalCSS="block mb-16"
+          />
+          <div>
+            <div className="ui-text-h3 mb-24">Live Chat</div>
+            <p className="ui-text-p1">
+              Reach out team of experts over chat powered by Ably.
+            </p>
+          </div>
+          <button
+            type="button"
+            className="ui-btn-secondary self-start mt-16"
+            disabled
+            data-id="open-chat-widget"
+            data-enabled-label="Start a live chat"
+            data-disabled-label="Live chat unavailable"
+          >
+            Live chat unavailable
+          </button>
+        </div>
+
+        <div className="ui-contact-footer-box">
+          <Icon
+            name="icon-display-call-mobile"
+            size="3rem"
+            additionalCSS="block mb-16"
+          />
+          <div className="flex-grow">
+            <div className="ui-text-h3 mb-24">Call us</div>
+            <p className="ui-text-p1">
+              <span className="block">
+                <strong className="font-bold">+1 877 434 5287</strong> (USA,
+                toll free)
+              </span>
+              <span className="block">
+                <strong className="font-bold">+44 20 3318 4689</strong> (UK)
+              </span>
+            </p>
+          </div>
+        </div>
+
+        <div className="ui-contact-footer-box">
+          <Icon
+            name="icon-display-tech-account-comms"
+            size="3rem"
+            additionalCSS="block mb-16"
+          />
+          <div>
+            <div className="ui-text-h3 mb-24">
+              Technical and account support
+            </div>
+            <p className="ui-text-p1">
+              We&apos;re standing by to help with any questions or code.
+            </p>
+          </div>
+          <a
+            className="ui-btn-secondary self-start p-btn mt-16"
+            href={absUrl("/support")}
+          >
+            Get support now
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ContactFooter;

src/core/CookieMessage/CookieMessage.stories.tsx

@@ -1,4 +1,4 @@
-import CookieMessage from "./component.jsx";
+import CookieMessage from "./component.tsx";
 
 export default {
   title: "Components/Cookie Message",

src/core/CookieMessage/component.css

@@ -1,13 +1,11 @@
-@layer components {
-  .ui-cookie-message {
-    @apply rounded-lg bg-white font-sans;
-    @apply justify-between items-center;
-    @apply opacity-100 z-50 bottom-0 fixed sm:flex;
-    @apply p-16 mb-16 ml-16;
-    max-width: 70vw;
-    box-shadow: 0px 24px 32px 0px #0000000d;
-    border: 1px solid var(--color-mid-grey);
-    border-left: 0.5rem solid var(--color-electric-cyan);
-    transition: bottom 250ms ease-out, opacity 150ms ease-out;
-  }
+.ui-cookie-message {
+  @apply rounded-lg bg-white font-sans;
+  @apply justify-between items-center;
+  @apply opacity-100 z-50 bottom-0 fixed sm:flex;
+  @apply p-16 mb-16 ml-16;
+  max-width: 70vw;
+  box-shadow: 0px 24px 32px 0px #0000000d;
+  border: 1px solid var(--color-mid-grey);
+  border-left: 0.5rem solid var(--color-electric-cyan);
+  transition: bottom 250ms ease-out, opacity 150ms ease-out;
 }