feat(#1978): drawer component

libs/react-components/package.exp.json

@@ -0,0 +1,3 @@
+{
+  "sideEffects": false
+}

libs/react-components/package.json

@@ -29,6 +29,11 @@
       "import": "./index.mjs",
       "require": "./index.js",
       "types": "./index.d.ts"
+    },
+    "./experimental": {
+      "import": "./experimental.mjs",
+      "require": "./experimental.js",
+      "types": "./experimental/index.d.ts"
     }
   }
-}
+}

libs/react-components/project.json

@@ -21,7 +21,9 @@
       ],
       "defaultConfiguration": "production",
       "options": {
-        "outputPath": "dist/libs/react-components"
+        "outputPath": "dist/libs/react-components",
+        "project": "libs/react-components/src/package.json",
+        "entryFile": "libs/react-components/src/index.ts"
       },
       "configurations": {
         "development": {

libs/react-components/src/experimental/index.ts

@@ -1,2 +1,2 @@
-// experimental imports
 export * from "./resizable-panel/ResizablePanel";
+export * from "../lib/drawer/drawer";

libs/react-components/src/lib/drawer/drawer.spec.tsx

@@ -0,0 +1,32 @@
+import { render, waitFor } from "@testing-library/react";
+import { describe, it } from "vitest";
+import GoADrawer from "./drawer";
+
+const noop = () => {/* nothing */}
+
+describe("Drawer", () => {
+  it("renders", async () => {
+    const content = render(
+      <GoADrawer 
+        open={false} 
+        position="bottom" 
+        heading="The heading"
+        maxSize="50ch"
+        testId="the testid"
+        onClose={noop}
+      >
+        The content
+      </GoADrawer>
+    );
+
+    const el = content.container.querySelector("goa-drawer");
+    expect(el).toBeTruthy();
+    await waitFor(() => {
+      expect(el?.getAttribute("open")).toBeNull();
+      expect(el?.getAttribute("position")).toBe("bottom");
+      expect(el?.getAttribute("heading")).toBe("The heading");
+      expect(el?.getAttribute("maxsize")).toBe("50ch");
+      expect(el?.getAttribute("data-testid")).toBe("the testid");
+    })
+  });
+});

libs/react-components/src/lib/drawer/drawer.tsx

@@ -0,0 +1,71 @@
+import { ReactNode, useEffect, useRef } from "react";
+
+type DrawerPosition = "bottom" | "left" | "right" | undefined;
+type DrawerSizeUnit = "px" | "rem" | "ch" | "vh" | "vw";
+type DrawerSize = `${number}${DrawerSizeUnit}` | undefined;
+
+interface WCProps {
+  open: boolean | undefined;
+  position: DrawerPosition;
+  heading?: string;
+  maxsize?: DrawerSize;
+  testid?: string;
+  ref: React.RefObject<HTMLElement>;
+}
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IntrinsicElements {
+      "goa-drawer": WCProps & React.HTMLAttributes<HTMLElement>;
+    }
+  }
+}
+
+export interface GoADrawerProps {
+  open: boolean;
+  position: DrawerPosition;
+  heading?: string;
+  maxSize?: DrawerSize;
+  testId?: string;
+  children: ReactNode;
+  onClose: () => void;
+}
+
+export function GoADrawer({
+  open,
+  position,
+  heading,
+  maxSize,
+  testId,
+  children,
+  onClose,
+}: GoADrawerProps): JSX.Element {
+  const el = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    if (!el?.current || !onClose) {
+      return;
+    }
+    el.current?.addEventListener("_close", onClose)
+    return () => {
+      el.current?.removeEventListener("_close", onClose)
+    }
+  }, [el, onClose])
+
+  return (
+    <goa-drawer
+      ref={el}
+      open={open ? true : undefined}
+      position={position}
+      heading={heading}
+      maxsize={maxSize}
+      data-testid={testId}
+    >
+      {children}
+    </goa-drawer>
+  );
+}
+
+export default GoADrawer;

libs/react-components/tsconfig.exp.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "include": [
+    "src/experimental/**/*.js", 
+    "src/experimental/**/*.jsx", 
+    "src/experimental/**/*.ts", 
+    "src/experimental/**/*.tsx"
+  ]
+}
+
+

libs/react-components/vite.config.ts

@@ -14,10 +14,7 @@ export default defineConfig({
     nxViteTsPaths(),
     dts({
       entryRoot: "src",
-      tsConfigFilePath: path.join(__dirname, "tsconfig.lib.json"),
-      skipDiagnostics: false,
-      formats: ["es", "cjs"],
-      filename: "index.d.ts"
+      tsconfigPath: path.join(__dirname, "tsconfig.lib.json"),
     }),
   ],
 
@@ -34,9 +31,8 @@ export default defineConfig({
     emptyOutDir: true,
     lib: {
       // Could also be a dictionary or array of multiple entry points.
-      entry: "src/index.ts",
+      entry: { index: "src/index.ts", experimental: "src/experimental/index.ts" },
       name: "react-components",
-      fileName: "index",
       // Change this to the formats you want to support.
       // Don't forget to update your package.json as well.
       formats: ["es", "cjs"],

libs/web-components/src/common/types.ts

@@ -0,0 +1,4 @@
+// Drawer
+export type DrawerPosition = "bottom" | "left" | "right" | undefined;
+export type DrawerSizeUnit = "px" | "rem" | "ch" | "vh" | "vw";
+export type DrawerSize = `${number}${DrawerSizeUnit}` | undefined;

libs/web-components/src/common/utils.ts

@@ -80,7 +80,7 @@ export function relay<T>(
 export function dispatch<T>(
   el: HTMLElement | Element | null | undefined,
   eventName: string,
-  detail: T,
+  detail?: T,
   opts?: { bubbles?: boolean; cancelable?: boolean; timeout?: number },
 ) {
   // console.log(`DISPATCH(${eventName}):`, detail, el);