feat: generate types for ui-components (#51184)

.eslintignore

@@ -11,4 +11,5 @@ config/superblocks.js
 web/**
 docs/**/*.md
 tools/ui-components/dist/**
-playwright.config.ts
+playwright.config.ts
+tools/ui-components/types/**

.prettierignore

@@ -25,3 +25,4 @@ curriculum-server/data/curriculum.json
 docs/**/*.md
 client/src/components/Donation/types.js
 tools/ui-components/dist
+tools/ui-components/types

tools/ui-components/.gitignore

@@ -0,0 +1,2 @@
+types/
+dist/

tools/ui-components/package.json

@@ -7,6 +7,7 @@
   "main": "dist/bundle.js",
   "module": "dist/bundle.es.js",
   "style": "dist/base.css",
+  "types": "types/src/index.d.ts",
   "files": [
     "dist"
   ],
@@ -71,7 +72,7 @@
     "storybook": "start-storybook -p 6006",
     "storybook:theming": "pnpm run storybook --no-manager-cache",
     "build-storybook": "build-storybook",
-    "build": "pnpm run build:css && pnpm run build:js",
+    "build": "pnpm run build:css && pnpm run build:js && tsc",
     "build:js": "cross-env NODE_ENV=production rollup -c",
     "build:css": "pnpm dlx tailwindcss -i ./src/base.css -o ./dist/base.css --minify",
     "dev:js": "cross-env NODE_ENV=development rollup -c -w ",

tools/ui-components/rollup.config.js

@@ -24,7 +24,7 @@ const config = {
   plugins: [
     postcss(),
     resolve(),
-    typescript({ sourceMap: false }),
+    typescript({ sourceMap: false, declaration: false }),
     babel({ babelHelpers: 'bundled' }),
     commonjs(),
     production && terser()

tools/ui-components/src/drop-down/drop-down.tsx

@@ -2,14 +2,45 @@ import React, { createContext, useContext, useRef } from 'react';
 import { Menu } from '@headlessui/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCaretDown, faCaretUp } from '@fortawesome/free-solid-svg-icons';
+import { Props } from '@headlessui/react/dist/types';
 
-type MenuItemsProps = React.ComponentPropsWithoutRef<typeof Menu.Items>;
+type MenuTag = React.ExoticComponent<{
+  children?: React.ReactNode;
+}>;
 
-export type DropdownProps = React.ComponentPropsWithoutRef<typeof Menu> & {
+interface MenuRenderPropArg {
+  open: boolean;
+  close: () => void;
+}
+
+type DropdownMenuProps = Props<
+  MenuTag,
+  MenuRenderPropArg,
+  never,
+  {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    __demoMode?: boolean;
+  }
+>;
+
+export type DropdownProps = DropdownMenuProps & {
   dropup?: boolean;
 };
 
-type DropDownButtonProps = React.ComponentPropsWithoutRef<typeof Menu>;
+export interface ButtonRenderPropArg {
+  open: boolean;
+}
+
+type ButtonPropsWeControl = 'aria-controls' | 'aria-expanded' | 'aria-haspopup';
+
+type DropDownButtonProps = Props<
+  'button',
+  ButtonRenderPropArg,
+  ButtonPropsWeControl,
+  {
+    disabled?: boolean;
+  }
+>;
 
 type DropDownContextProps = DropdownProps & {
   menuButtonRef: React.MutableRefObject<HTMLButtonElement | null>;
@@ -24,30 +55,29 @@ const dropUpItems = dropDownItems + ' transform -translate-y-full top-0';
 const toggleClassNames =
   'cursor-pointer border-3 border-solid w-full block text-center touch-manipulation bg-background-quaternary text-foreground-secondary px-3 py-1.5 relative hover:bg-foreground-secondary hover:text-background-secondary btn-block border-foreground-secondary';
 
-export const MenuItems = React.forwardRef<
-  React.ElementRef<typeof Menu.Items>,
-  MenuItemsProps
->(({ children, className }, ref) => {
-  const { dropup, menuButtonRef } = useContext(DropDownContext);
+export const MenuItems = React.forwardRef<HTMLDivElement, DropDownButtonProps>(
+  ({ children, className }, ref): JSX.Element => {
+    const { dropup, menuButtonRef } = useContext(DropDownContext);
 
-  const handleClick = () => {
-    menuButtonRef.current?.focus();
-  };
+    const handleClick = () => {
+      menuButtonRef.current?.focus();
+    };
 
-  const itemsClasses = dropup ? dropUpItems : dropDownItems;
-  const buttonClass: string = [className, itemsClasses].join(' ');
-  return (
-    <Menu.Items className={buttonClass} ref={ref} onClick={handleClick}>
-      {children}
-    </Menu.Items>
-  );
-});
+    const itemsClasses = dropup ? dropUpItems : dropDownItems;
+    const buttonClass: string = [className, itemsClasses].join(' ');
+    return (
+      <Menu.Items className={buttonClass} ref={ref} onClick={handleClick}>
+        {children}
+      </Menu.Items>
+    );
+  }
+);
 
 const DropDownButton = ({
   children,
   className,
   ...rest
-}: DropDownButtonProps) => {
+}: DropDownButtonProps): JSX.Element => {
   const { dropup, menuButtonRef } = useContext(DropDownContext);
 
   const classes = [className, toggleClassNames].join(' ');

tools/ui-components/tsconfig.json

@@ -8,8 +8,11 @@
     "esModuleInterop": true,
     "moduleResolution": "node",
     "strict": true,
-    "noEmit": true
+    "emitDeclarationOnly": true,
+    "declaration": true,
+    "declarationDir": "types"
   },
+  "exclude": ["node_modules", "dist", "types"],
   "ts-node": {
     "compilerOptions": {
       "module": "commonjs"