Merge pull request #457 from ably/generate-types

[WEB-3951] Bundle TS declarations in with package

.gitignore

@@ -1,10 +1,11 @@
 .bundle
 .DS_Store
 node_modules
-server_killer.rb
 yarn-error.log
 /dist
 /preview
 /core
 /reset
 .idea/*
+types
+index.d.ts

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.3.4",
+  "version": "14.4.0",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
@@ -11,8 +11,10 @@
     "core",
     "reset",
     "tailwind.config.js",
-    "tailwind.extend.js"
+    "tailwind.extend.js",
+    "index.d.ts"
   ],
+  "types": "index.d.ts",
   "devDependencies": {
     "@storybook/addon-a11y": "^8.2.9",
     "@storybook/addon-essentials": "^8.2.9",
@@ -25,6 +27,9 @@
     "@storybook/test": "^8.2.9",
     "@swc/cli": "^0.4.0",
     "@swc/core": "^1.4.11",
+    "@types/dompurify": "^3.0.5",
+    "@types/js-cookie": "^3.0.6",
+    "@types/lodash.throttle": "^4.1.9",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react": "^4.2.1",
@@ -45,9 +50,10 @@
   },
   "scripts": {
     "build:prebuild": "rm -rf core reset",
-    "build:swc": "swc src/core src/reset -d dist --quiet --copy-files --include-dotfiles --strip-leading-paths --config-file .swc --ignore **/*.stories.tsx,**/*.snap" ,
+    "build:swc": "swc src/core src/reset -d dist --copy-files --include-dotfiles --strip-leading-paths --config-file .swc --ignore **/*.stories.tsx,**/*.snap",
+    "build:tsc": "tsc && node tsc.js && rm -r types",
     "build:cleanup": "mv dist/* . && rm -r dist",
-    "build": "yarn build:prebuild && yarn build:swc && node sprites.js && yarn build:cleanup",
+    "build": "yarn build:prebuild && yarn build:swc && node sprites.js && yarn build:tsc && yarn build:cleanup",
     "watch": "yarn build:swc -w",
     "format:check": "prettier -c *.{js,ts} src/**/*.{js,ts,tsx}",
     "format:write": "prettier -w *.{js,ts} src/**/*.{js,ts,tsx}",
@@ -60,7 +66,6 @@
     "build-storybook": "yarn build && storybook build --quiet -o preview",
     "test": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook && yarn http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && yarn test-storybook --url http://127.0.0.1:6007\"",
     "test:update-snapshots": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook && yarn http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && yarn test-storybook -u --url http://127.0.0.1:6007\""
-
   },
   "dependencies": {
     "addsearch-js-client": "^0.8.11",
@@ -70,8 +75,8 @@
     "highlightjs-curl": "^1.3.0",
     "js-cookie": "^3.0.5",
     "lodash.throttle": "^4.1.1",
-    "react-dom": "^18.2.0",
     "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "redux": "^4.0.5",
     "scroll-lock": "^2.1.4"
   },

src/core/Accordion.tsx

@@ -12,7 +12,7 @@ type AccordionRowProps = {
   active: boolean;
   last: boolean;
   name: string;
-  index;
+  index: number;
   children: ReactNode;
   arrowIcon?: boolean;
   setActiveIndex: (index: number) => void;

src/core/ConnectStateWrapper.tsx

@@ -12,10 +12,12 @@ 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
 */
 
-const ConnectStateWrapper = (Component, selectors) => {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const ConnectStateWrapper = (Component: any, selectors: any) => {
   const [state, setState] = useState({});
 
-  const setStateForKey = (key) => (storeState) =>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const setStateForKey = (key: string) => (storeState: any) =>
     setState(() => ({ [key]: storeState }));
 
   useEffect(() => {
@@ -35,7 +37,8 @@ const ConnectStateWrapper = (Component, selectors) => {
     });
   }, []);
 
-  const WrappedComponent = (props) => <Component {...props} {...state} />;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const WrappedComponent = (props: any) => <Component {...props} {...state} />;
 
   return WrappedComponent;
 };

src/core/ContactFooter.tsx

@@ -10,7 +10,7 @@ type ContactFooterProps = {
 
 const ContactFooter = ({ urlBase }: ContactFooterProps) => {
   useEffect(() => toggleChatWidget({ dataId: "contact-footer" }), []);
-  const absUrl = (path) => _absUrl(path, urlBase);
+  const absUrl = (path: string) => _absUrl(path, urlBase);
 
   return (
     <div

src/core/CookieMessage.tsx

@@ -26,7 +26,7 @@ const CookieMessage = ({ cookieId, urlBase }: CookieMessageProps) => {
     setTimeout(() => setHideCookieMessage(true), 500);
   };
 
-  const absUrl = (path) => _absUrl(path, urlBase);
+  const absUrl = (path: string) => _absUrl(path, urlBase);
 
   // Presume the message is hidden by default
   if (hideCookieMessage) return null;

src/core/DropdownMenu.tsx

@@ -45,8 +45,8 @@ const DropdownMenu = ({ children }: DropdownMenuProps) => {
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    const clickHandler = (e) => {
-      if (ref.current?.contains(e.target)) return;
+    const clickHandler = (e: MouseEvent) => {
+      if (ref.current?.contains(e.target as Node)) return;
       setOpen(false);
     };
 

src/core/FeaturedLink.tsx

@@ -19,7 +19,7 @@ type TargetProps = { target?: string; rel?: string };
 // When generating links with target=_blank, we only add `noreferrer` to
 // links that don't start with `/`, so we can continue tracking referrers
 // across our own domains
-const buildTargetAndRel = (url, newWindow) => {
+const buildTargetAndRel = (url: string, newWindow: boolean) => {
   const props: TargetProps = {};
 
   if (newWindow) {

src/core/Flash.tsx

@@ -4,10 +4,12 @@ import { getRemoteDataStore } from "./remote-data-store.js";
 import ConnectStateWrapper from "./ConnectStateWrapper";
 import Icon from "./Icon";
 
+type FlashPropsType = "error" | "success" | "notice" | "info" | "alert";
+
 type FlashProps = {
   id: string;
   removed: boolean;
-  type: "error" | "success" | "notice" | "info" | "alert";
+  type: FlashPropsType;
   content: string;
   removeFlash: (id: string) => void;
 };
@@ -26,7 +28,12 @@ const FLASH_DATA_ID = "ui-flashes";
 const initialState = { items: [] };
 
 const reducerFlashes = {
-  [REDUCER_KEY]: (state = initialState, action) => {
+  [REDUCER_KEY]: (
+    state: {
+      items: FlashProps[];
+    } = initialState,
+    action: { type: string; payload: FlashProps | FlashProps[] },
+  ) => {
     switch (action.type) {
       case "flash/push": {
         const flashes = Array.isArray(action.payload)
@@ -40,7 +47,10 @@ const reducerFlashes = {
   },
 };
 
-const selectFlashes = (store) => store.getState()[REDUCER_KEY];
+// Not cool but redux isn't a long term plan here
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const selectFlashes = (store: any): { items: FlashProps[] } =>
+  store.getState()[REDUCER_KEY];
 
 const FLASH_BG_COLOR = {
   error: "bg-gui-error",
@@ -61,7 +71,7 @@ const FLASH_TEXT_COLOR = {
 const AUTO_HIDE = ["success", "info", "notice"];
 const AUTO_HIDE_TIME = 8000;
 
-const useAutoHide = (type, closeFlash) => {
+const useAutoHide = (type: string, closeFlash: () => void) => {
   const timeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
@@ -117,18 +127,20 @@ const Flash = ({ id, type, content, removeFlash }: FlashProps) => {
     ALLOWED_ATTR: ["href", "data-method", "rel"],
   });
 
-  const withIcons = {
+  const withIcons: Record<FlashPropsType, string> = {
     notice: "icon-gui-ably-badge",
     success: "icon-gui-tick",
     error: "icon-gui-warning",
     alert: "icon-gui-warning",
+    info: "",
   };
 
-  const iconColor = {
+  const iconColor: Record<FlashPropsType, string> = {
     notice: "text-cool-black",
     success: "text-cool-black",
     error: "text-white",
     alert: "text-white",
+    info: "",
   };
 
   return (
@@ -175,7 +187,7 @@ const Flash = ({ id, type, content, removeFlash }: FlashProps) => {
 const Flashes = ({ flashes }: FlashesProps) => {
   const [flashesWithIds, setFlashesWithIds] = useState<FlashProps[]>([]);
 
-  const removeFlash = (flashId) =>
+  const removeFlash = (flashId: string) =>
     setFlashesWithIds((items) => items.filter((item) => item.id !== flashId));
 
   useEffect(() => {

src/core/Footer.tsx

@@ -17,7 +17,7 @@ type FooterProps = {
 };
 
 const Footer = ({ paths, urlBase, statusUrl }: FooterProps) => {
-  const absUrl = (path) => _absUrl(path, urlBase);
+  const absUrl = (path: string) => _absUrl(path, urlBase);
 
   // create a react hook that calls the statusUrl and returns the status of the system every minute
 

src/core/Meganav.tsx

@@ -29,8 +29,26 @@ export type MeganavTheme = {
 
 export type AbsUrl = (path: string) => string;
 
+export type MeganavPaths = {
+  logo: string;
+  iconSprites: string;
+  ablyStack: string;
+  blogThumb1: string;
+  blogThumb2: string;
+  blogThumb3: string;
+  awsLogo?: string;
+};
+
 export type MeganavPanels = {
-  [index: string]: ({ paths, absUrl, statusUrl }) => ReactNode;
+  [index: string]: ({
+    paths,
+    absUrl,
+    statusUrl,
+  }: {
+    paths?: MeganavPaths;
+    absUrl: (path: string) => string;
+    statusUrl: string;
+  }) => ReactNode;
 };
 
 export type MeganavSessionState = {
@@ -67,15 +85,7 @@ type SignInProps = {
 };
 
 type MeganavProps = {
-  paths?: {
-    logo: string;
-    iconSprites: string;
-    ablyStack: string;
-    blogThumb1: string;
-    blogThumb2: string;
-    blogThumb3: string;
-  };
-
+  paths?: MeganavPaths;
   themeName: "white" | "black" | "transparentToWhite";
   notice?: {
     props: {
@@ -168,13 +178,11 @@ const Meganav = ({
 
   useEffect(() => {
     const teardown = MeganavScripts({ themeName, addSearchApiKey });
-    // TODO(jamiehenson): update this when JS assets are converted to TS
-    // @ts-expect-error: teardown parsed as Element from JS file, cannot be coerced into Function form
     return () => teardown();
   }, [sessionState]);
 
   const theme = MeganavData.themes[themeName];
-  const absUrl = (path) => _absUrl(path, urlBase);
+  const absUrl = (path: string) => _absUrl(path, urlBase);
 
   return (
     <nav

src/core/Meganav/component.js

@@ -110,9 +110,7 @@ const documentScroll = (themeName) => {
   };
 };
 
-export default function Meganav(
-  { themeName, addSearchApiKey } = { themeName: null },
-) {
+export default function Meganav({ themeName, addSearchApiKey }) {
   const controls = MeganavControl();
   const panelOpenControls = MobilePanelOpenClick();
   const panelCloseControls = MobilePanelCloseClick();
@@ -135,7 +133,7 @@ export default function Meganav(
     ].forEach((i) => i.clear());
 
   const teardowns = [
-    documentScroll(themeName),
+    documentScroll(themeName ?? null),
     documentClick(closeAll),
     windowOnBlur(closeAll),
     mobileDropdownControl,

src/core/MeganavContentCompany.tsx

@@ -4,13 +4,11 @@ import MeganavBlogPostsList from "./MeganavBlogPostsList";
 import ConnectStateWrapper from "./ConnectStateWrapper";
 import { selectRecentBlogPosts } from "./remote-blogs-posts.js";
 import Icon from "./Icon";
-import { AbsUrl } from "./Meganav";
+import { AbsUrl, MeganavPaths } from "./Meganav";
 
 type MeganavContentCompanyProps = {
   absUrl: AbsUrl;
-  paths: {
-    awsLogo: string;
-  };
+  paths?: MeganavPaths;
 };
 
 const MeganavContentCompany = ({
@@ -80,7 +78,7 @@ const MeganavContentCompany = ({
                 href={absUrl("/aws")}
                 className="ui-meganav-media-with-image group"
               >
-                <img src={paths.awsLogo} alt="AWS logo" />
+                {paths && <img src={paths.awsLogo} alt="AWS logo" />}
                 <div className="flex flex-col justify-center">
                   <p className="ui-meganav-media-heading">Partners</p>
                   <p className="ui-meganav-media-copy">

src/core/MeganavContentProducts.tsx

@@ -1,13 +1,10 @@
 import React from "react";
 
 import FeaturedLink from "./FeaturedLink";
-import { AbsUrl } from "./Meganav";
+import { AbsUrl, MeganavPaths } from "./Meganav";
 
 type MeganavContentProductsProps = {
-  paths: {
-    ablyStack: string;
-    iconSprites: string;
-  };
+  paths?: MeganavPaths;
   absUrl: AbsUrl;
 };
 
@@ -20,7 +17,7 @@ const MeganavContentProducts = ({
     <section className="grid grid-cols-12 ui-grid-gap-x w-full">
       <div className="col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey">
         <div className="flex mb-20">
-          <img src={paths.ablyStack} alt="Ably homepage" />
+          {paths && <img src={paths?.ablyStack} alt="Ably homepage" />}
           <h3 className="ui-meganav-overline ml-24">The Ably Platform</h3>
         </div>
         <p className="ui-text-p2 font-bold mb-24" style={{ maxWidth: "330px" }}>

src/core/MeganavItemsDesktop.tsx

@@ -2,18 +2,11 @@ import React from "react";
 
 import MeganavData from "./Meganav/component.json";
 import MeganavControl from "./MeganavControl";
-import { AbsUrl, MeganavPanels, MeganavTheme } from "./Meganav";
+import { AbsUrl, MeganavPanels, MeganavPaths, MeganavTheme } from "./Meganav";
 
 type MeganavDesktopItems = {
   panels: MeganavPanels;
-  paths?: {
-    logo: string;
-    iconSprites: string;
-    ablyStack: string;
-    blogThumb1: string;
-    blogThumb2: string;
-    blogThumb3: string;
-  };
+  paths?: MeganavPaths;
   theme: MeganavTheme;
   absUrl: AbsUrl;
   statusUrl: string;