Merge pull request #326 from ably/jsx-to-tsx

[WEB-3649] Port JSX 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

.eslintrc.js

@@ -5,27 +5,13 @@ module.exports = {
     node: true,
     "cypress/globals": true,
   },
-  extends: [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "prettier",
-    "plugin:cypress/recommended",
-    "plugin:storybook/recommended",
-  ],
+  extends: ["eslint:recommended", "prettier", "plugin:cypress/recommended"],
   parserOptions: {
-    ecmaFeatures: {
-      jsx: true,
-    },
     ecmaVersion: 12,
     sourceType: "module",
   },
-  plugins: ["react", "cypress"],
+  plugins: ["cypress"],
   rules: {},
-  settings: {
-    react: {
-      version: "detect",
-    },
-  },
   overrides: [
     {
       files: ["*.ts", "*.tsx"],

.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",

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",