chore: update imports to reference TSX directly

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

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/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

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 
-import Icon from "../Icon/component.jsx";
+import Icon from "../Icon/component.tsx";
 import _absUrl from "../url-base.js";
 import toggleChatWidget from "../hubspot-chat-toggle";
 

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

src/core/CustomerLogos/CustomerLogos.stories.tsx

@@ -1,4 +1,4 @@
-import CustomerLogos from "./component.jsx";
+import CustomerLogos from "./component.tsx";
 
 import hubspot from "../images/cust-logo-hubspot-mono-pos.svg";
 import webflow from "../images/cust-logo-webflow-col-pos.svg";

src/core/DropdownMenu/DropdownMenu.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import Icon from "../Icon/component.jsx";
-import DropdownMenu from "./component.jsx";
+import Icon from "../Icon/component.tsx";
+import DropdownMenu from "./component.tsx";
 
 export default {
   title: "Components/Dropdown Menu",

src/core/DropdownMenu/component.tsx

@@ -7,7 +7,7 @@ import React, {
   ReactNode,
   Dispatch,
 } from "react";
-import Icon from "../Icon/component.jsx";
+import Icon from "../Icon/component.tsx";
 
 const DropdownMenuContext = createContext<{
   isOpen: boolean;

src/core/FeaturedLink/FeaturedLink.stories.tsx

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

src/core/FeaturedLink/component.tsx

@@ -1,6 +1,6 @@
 import React, { CSSProperties, ReactNode } from "react";
 
-import Icon from "../Icon/component.jsx";
+import Icon from "../Icon/component.tsx";
 
 type FeaturedLinkProps = {
   url: string;

src/core/Flash/Flash.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Flash, { reducerFlashes } from "./component.jsx";
+import Flash, { reducerFlashes } from "./component.tsx";
 
 import {
   attachStoreToWindow,

src/core/Flash/component.tsx

@@ -4,7 +4,7 @@ import { nanoid } from "nanoid/non-secure";
 
 import { getRemoteDataStore } from "../remote-data-store.js";
 import ConnectStateWrapper from "../ConnectStateWrapper/component.js";
-import Icon from "../Icon/component.jsx";
+import Icon from "../Icon/component.tsx";
 import "./component.css";
 
 type FlashProps = {

src/core/Footer/Footer.stories.tsx

@@ -1,4 +1,4 @@
-import Footer from "./component.jsx";
+import Footer from "./component.tsx";
 
 import ablyStack from "../images/ably-stack.svg";
 import highestPerformer from "../images/high-performer-2023.svg";

src/core/Footer/component.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import Icon from "../Icon/component.jsx";
+import Icon from "../Icon/component.tsx";
 import _absUrl from "../url-base.js";
 import "./component.css";
 

src/core/Icon/Icon.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Icon from "./component.jsx";
+import Icon from "./component.tsx";
 
 export default {
   title: "Components/Icon",

src/core/Loader/Loader.stories.tsx

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

src/core/Logo/Logo.stories.tsx

@@ -1,4 +1,4 @@
-import Logo from "./component.jsx";
+import Logo from "./component.tsx";
 import logoUrl from "../images/ably-logo.png";
 
 export default {

src/core/Meganav/Meganav.stories.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { rest } from "msw";
 
-import Meganav from "./component.jsx";
+import Meganav from "./component.tsx";
 import loadIcons from "../icons.js";
 import logo from "../images/ably-logo.png";
 import ablyStack from "../images/ably-stack.svg";

src/core/Meganav/component.js

@@ -12,13 +12,13 @@ import "./component.css";
 
 import { queryId, queryIdAll } from "../dom-query";
 
-import MeganavControl from "../MeganavControl/component";
+import MeganavControl from "../MeganavControl/component.tsx";
 
-import MeganavControlMobileDropdown from "../MeganavControlMobileDropdown/component";
-import MobilePanelOpenClick from "../MeganavControlMobilePanelOpen/component";
-import MobilePanelCloseClick from "../MeganavControlMobilePanelClose/component";
-import MeganavSearchAutocomplete from "../MeganavSearchAutocomplete/component";
-import MeganavSearchSuggestions from "../MeganavSearchSuggestions/component";
+import MeganavControlMobileDropdown from "../MeganavControlMobileDropdown/component.tsx";
+import MobilePanelOpenClick from "../MeganavControlMobilePanelOpen/component.tsx";
+import MobilePanelCloseClick from "../MeganavControlMobilePanelClose/component.tsx";
+import MeganavSearchAutocomplete from "../MeganavSearchAutocomplete/component.tsx";
+import MeganavSearchSuggestions from "../MeganavSearchSuggestions/component.tsx";
 
 // Close menu when user clicks outside of viewport
 const windowOnBlur = (closeAll) => {

src/core/Meganav/component.tsx

@@ -6,18 +6,18 @@ import { selectSessionData } from "../remote-session-data.js";
 import Logo from "../Logo/component.js";
 
 import MeganavScripts from "./component.js";
-import MeganavItemsDesktop from "../MeganavItemsDesktop/component.jsx";
-import MeganavItemsSignedIn from "../MeganavItemsSignedIn/component.jsx";
-import MeganavItemsMobile from "../MeganavItemsMobile/component.jsx";
-import Notice from "../Notice/component";
+import MeganavItemsDesktop from "../MeganavItemsDesktop/component.tsx";
+import MeganavItemsSignedIn from "../MeganavItemsSignedIn/component.tsx";
+import MeganavItemsMobile from "../MeganavItemsMobile/component.tsx";
+import Notice from "../Notice/component.tsx";
 import MeganavData from "./component.json";
 import _absUrl from "../url-base.js";
 
-import MeganavContentProducts from "../MeganavContentProducts/component.jsx";
-import MeganavContentUseCases from "../MeganavContentUseCases/component.jsx";
-import MeganavContentCompany from "../MeganavContentCompany/component.jsx";
-import MeganavContentDevelopers from "../MeganavContentDevelopers/component.jsx";
-import MeganavSearch from "../MeganavSearch/component.jsx";
+import MeganavContentProducts from "../MeganavContentProducts/component.tsx";
+import MeganavContentUseCases from "../MeganavContentUseCases/component.tsx";
+import MeganavContentCompany from "../MeganavContentCompany/component.tsx";
+import MeganavContentDevelopers from "../MeganavContentDevelopers/component.tsx";
+import MeganavSearch from "../MeganavSearch/component.tsx";
 
 export type MeganavTheme = {
   backgroundColor?: string;

src/core/MeganavBlogPostsList/component.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import FeaturedLink from "../FeaturedLink/component";
-import { AbsUrl } from "../Meganav/component";
+import FeaturedLink from "../FeaturedLink/component.tsx";
+import { AbsUrl } from "../Meganav/component.tsx";
 
 type MeganavBlogPostsListProps = {
   recentBlogPosts: {

src/core/MeganavContentCompany/component.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
-import MeganavBlogPostsList from "../MeganavBlogPostsList/component";
-import ConnectStateWrapper from "../ConnectStateWrapper/component";
+import MeganavBlogPostsList from "../MeganavBlogPostsList/component.tsx";
+import ConnectStateWrapper from "../ConnectStateWrapper/component.tsx";
 import { selectRecentBlogPosts } from "../remote-blogs-posts.js";
-import Icon from "../Icon/component";
+import Icon from "../Icon/component.tsx";
 import { AbsUrl } from "../Meganav/component.js";
 
 type MeganavContentCompanyProps = {

src/core/MeganavContentDevelopers/component.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import Icon from "../Icon/component";
-import { AbsUrl } from "../Meganav/component";
+import Icon from "../Icon/component.tsx";
+import { AbsUrl } from "../Meganav/component.tsx";
 
 const MeganavContentDevelopers = ({ absUrl }: { absUrl: AbsUrl }) => (
   <div className="flex max-w-screen-xl mx-auto">

src/core/MeganavContentProducts/component.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import FeaturedLink from "../FeaturedLink/component";
-import { AbsUrl } from "../Meganav/component";
+import FeaturedLink from "../FeaturedLink/component.tsx";
+import { AbsUrl } from "../Meganav/component.tsx";
 
 type MeganavContentProductsProps = {
   paths: {

src/core/MeganavContentUseCases/component.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import Icon from "../Icon/component";
-import { AbsUrl } from "../Meganav/component";
+import Icon from "../Icon/component.tsx";
+import { AbsUrl } from "../Meganav/component.tsx";
 
 const MeganavContentUseCases = ({ absUrl }: { absUrl: AbsUrl }) => (
   <div className="flex max-w-screen-xl mx-auto">

src/core/MeganavControl/component.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react";
 
-import Icon from "../Icon/component";
-import { MeganavTheme } from "../Meganav/component";
+import Icon from "../Icon/component.tsx";
+import { MeganavTheme } from "../Meganav/component.tsx";
 
 type MeganavControlProps = {
   ariaControls: string;

src/core/MeganavControlMobileDropdown/component.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import Icon from "../Icon/component";
-import { MeganavTheme } from "../Meganav/component";
+import Icon from "../Icon/component.tsx";
+import { MeganavTheme } from "../Meganav/component.tsx";
 
 const MeganavControlMobileDropdown = ({ theme }: { theme: MeganavTheme }) => (
   <button

src/core/MeganavControlMobilePanelClose/component.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import Icon from "../Icon/component";
+import Icon from "../Icon/component.tsx";
 
 type MeganavControlMobilePanelCloseProps = {
   ariaControls: string;

src/core/MeganavControlMobilePanelOpen/component.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 
-import Icon from "../Icon/component";
+import Icon from "../Icon/component.tsx";
 
 type MeganavControlMobilePanelOpenProps = {
   ariaControls: string;

src/core/MeganavItemsDesktop/component.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
 import MeganavData from "../Meganav/component.json";
-import MeganavControl from "../MeganavControl/component";
-import { AbsUrl, MeganavPanels, MeganavTheme } from "../Meganav/component";
+import MeganavControl from "../MeganavControl/component.tsx";
+import { AbsUrl, MeganavPanels, MeganavTheme } from "../Meganav/component.tsx";
 
 type MeganavDesktopItems = {
   panels: MeganavPanels;

src/core/MeganavItemsMobile/component.tsx

@@ -1,19 +1,19 @@
 import React from "react";
 
-import SignOutLink from "../SignOutLink/component";
-import MeganavSearchSuggestions from "../MeganavSearchSuggestions/component";
-import Icon from "../Icon/component";
+import SignOutLink from "../SignOutLink/component.tsx";
+import MeganavSearchSuggestions from "../MeganavSearchSuggestions/component.tsx";
+import Icon from "../Icon/component.tsx";
 import MeganavData from "../Meganav/component.json";
-import MeganavControlMobileDropdown from "../MeganavControlMobileDropdown/component";
-import MeganavControlMobilePanelClose from "../MeganavControlMobilePanelClose/component";
-import MeganavControlMobilePanelOpen from "../MeganavControlMobilePanelOpen/component";
-import MeganavSearchAutocomplete from "../MeganavSearchAutocomplete/component";
+import MeganavControlMobileDropdown from "../MeganavControlMobileDropdown/component.tsx";
+import MeganavControlMobilePanelClose from "../MeganavControlMobilePanelClose/component.tsx";
+import MeganavControlMobilePanelOpen from "../MeganavControlMobilePanelOpen/component.tsx";
+import MeganavSearchAutocomplete from "../MeganavSearchAutocomplete/component.tsx";
 import {
   AbsUrl,
   MeganavPanels,
   MeganavSessionState,
   MeganavTheme,
-} from "../Meganav/component";
+} from "../Meganav/component.tsx";
 
 type MeganavItemsMobileProps = {
   panels: MeganavPanels;

src/core/MeganavItemsSignedIn/component.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 
-import MeganavControl from "../MeganavControl/component";
-import SignOutLink from "../SignOutLink/component";
-import MeganavSearch from "../MeganavSearch/component";
+import MeganavControl from "../MeganavControl/component.tsx";
+import SignOutLink from "../SignOutLink/component.tsx";
+import MeganavSearch from "../MeganavSearch/component.tsx";
 import {
   AbsUrl,
   MeganavSessionState,
   MeganavTheme,
-} from "../Meganav/component";
+} from "../Meganav/component.tsx";
 
 type MeganavItemsSignedIn = {
   sessionState: MeganavSessionState;

src/core/MeganavSearch/component.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
-import Icon from "../Icon/component";
-import MeganavSearchPanel from "../MeganavSearchPanel/component";
-import { AbsUrl } from "../Meganav/component";
+import Icon from "../Icon/component.tsx";
+import MeganavSearchPanel from "../MeganavSearchPanel/component.tsx";
+import { AbsUrl } from "../Meganav/component.tsx";
 
 const MeganavSearch = ({ absUrl }: { absUrl: AbsUrl }) => (
   <>

src/core/MeganavSearchPanel/component.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
-import Icon from "../Icon/component";
-import MeganavSearchSuggestions from "../MeganavSearchSuggestions/component";
-import MeganavSearchAutocomplete from "../MeganavSearchAutocomplete/component";
-import { AbsUrl } from "../Meganav/component";
+import Icon from "../Icon/component.tsx";
+import MeganavSearchSuggestions from "../MeganavSearchSuggestions/component.tsx";
+import MeganavSearchAutocomplete from "../MeganavSearchAutocomplete/component.tsx";
+import { AbsUrl } from "../Meganav/component.tsx";
 
 const MeganavSearchPanel = ({ absUrl }: { absUrl: AbsUrl }) => (
   <section className="ui-meganav-content grid-cols-12">

src/core/MeganavSearchSuggestions/component.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import FeaturedLink from "../FeaturedLink/component";
-import { AbsUrl } from "../Meganav/component";
+import FeaturedLink from "../FeaturedLink/component.tsx";
+import { AbsUrl } from "../Meganav/component.tsx";
 
 type MeganavSearchSuggestionsProps = {
   absUrl: AbsUrl;