Inital package setup

apps/rda/package.json

@@ -18,6 +18,7 @@
     "@dans-framework/user-auth": "workspace:*",
     "@dans-framework/utils": "workspace:*",
     "@dans-framework/freshdesk": "workspace:*",
+    "@dans-framework/knowledge-drawer": "workspace:*",
     "@fontsource/roboto": "^5.0.7",
     "@mui/icons-material": "^5.14.3",
     "@mui/material": "^5.16.7",

apps/rda/src/App.tsx

@@ -31,6 +31,7 @@ import {
   FacetedSearchProvider,
 } from "@dans-framework/rdt-search-ui";
 import { Freshdesk } from "@dans-framework/freshdesk";
+import KnowledgeDrawer from "@dans-framework/knowledge-drawer";
 
 const App = () => {
   const { i18n } = useTranslation();
@@ -105,6 +106,7 @@ const App = () => {
           </BrowserRouter>
         </FacetedSearchProvider>
         <Footer {...footer} />
+        <KnowledgeDrawer />
         <Freshdesk widgetId={80000010123} />
       </ThemeWrapper>
     </AuthWrapper>

package.json

@@ -12,7 +12,7 @@
     "build:ohsmart": "turbo build --filter=@dans-framework/ohsmart",
     "dev:cat": "turbo dev --filter=@dans-framework/cat",
     "build:cat": "turbo build --filter=@dans-framework/cat",
-    "dev:rda": "turbo dev --filter=@dans-framework/rda",
+    "dev:rda": "turbo dev --filter=@dans-framework/rda...",
     "build:rda": "turbo build --filter=@dans-framework/rda",
     "dev:swh": "turbo dev --filter=@dans-framework/swh",
     "build:swh": "turbo build --filter=@dans-framework/swh",

packages/knowledge-drawer/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@dans-framework/knowledge-drawer",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.tsx",
+    "./style.css": "./dist/style.css"
+  },
+  "scripts": {
+    "dev": "pnpx tailwindcss -i ./src/style.css -o ./dist/style.css --watch",
+    "build": "pnpx tailwindcss -i ./src/style.css -o ./dist/style.css"
+  },
+  "devDependencies": {
+    "@dans-framework/typescript-config": "workspace:*",
+    "@types/react": "18.2.15",
+    "tailwindcss": "^3.4.16",
+    "typescript": "latest"
+  },
+  "dependencies": {
+    "@headlessui/react": "^2.2.0",
+    "react": "18.2.0"
+  }
+}

packages/knowledge-drawer/src/drawer.tsx

@@ -0,0 +1,66 @@
+import { Dialog, DialogPanel, DialogTitle } from "@headlessui/react";
+
+export default function Drawer({
+  open,
+  setOpen,
+  children,
+}: {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <Dialog open={open} onClose={setOpen} className="tw-relative tw-z-[2147483001]">
+      <div className="tw-fixed tw-inset-0" />
+
+      <div className="tw-fixed tw-inset-0 tw-overflow-hidden">
+        <div className="tw-absolute tw-inset-0 tw-overflow-hidden">
+          <div className="tw-pointer-events-none tw-fixed tw-inset-y-0 tw-right-0 tw-flex tw-max-w-full tw-pl-10">
+            <DialogPanel
+              transition
+              className="tw-pointer-events-auto tw-w-screen tw-max-w-md tw-transform tw-transition tw-duration-500 tw-ease-in-out data-[closed]:tw-translate-x-full sm:tw-duration-700"
+            >
+              <div className="tw-flex tw-h-full tw-flex-col tw-overflow-y-scroll tw-bg-white tw-py-6 tw-shadow-xl">
+                <div className="tw-px-4 sm:tw-px-6">
+                  <div className="tw-flex tw-items-start tw-justify-between">
+                    <DialogTitle className="tw-text-base tw-font-semibold tw-text-gray-900">
+                      Support Materials
+                    </DialogTitle>
+                    <div className="tw-ml-3 tw-flex tw-h-7 tw-items-center">
+                      <button
+                        type="button"
+                        onClick={() => setOpen(false)}
+                        className="tw-relative tw-rounded-md tw-bg-white tw-text-gray-400 hover:tw-text-gray-500 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-[#4F8E31] focus:tw-ring-offset-2"
+                      >
+                        <span className="tw-absolute -tw-inset-2.5" />
+                        <span className="tw-sr-only">Close panel</span>
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          strokeWidth={1.5}
+                          stroke="currentColor"
+                          aria-hidden="true"
+                          className="tw-size-6"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M6 18 18 6M6 6l12 12"
+                          />
+                        </svg>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div className="tw-relative tw-mt-6 tw-flex-1 tw-px-4 sm:tw-px-6">
+                  {children}
+                </div>
+              </div>
+            </DialogPanel>
+          </div>
+        </div>
+      </div>
+    </Dialog>
+  );
+}

packages/knowledge-drawer/src/index.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import "../dist/style.css";
+import { useState } from "react";
+import Drawer from "./drawer";
+
+export default function KnowledgeDrawer() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <button
+        onClick={() => setOpen(!open)}
+        className="tw-absolute tw-bottom-24 tw-right-6 tw-bg-[#4F8E31] tw-text-white tw-p-1.5 tw-rounded-full tw-border-2 tw-border-[#4F8E31]"
+      >
+        <span className="tw-sr-only">Open Informative Resources</span>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="tw-size-5"
+          aria-hidden="true"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"
+          />
+        </svg>
+      </button>
+      <Drawer open={open} setOpen={setOpen}>
+        <p>Hello Drawer!</p>
+      </Drawer>
+    </>
+  );
+}

packages/knowledge-drawer/src/material.tsx

@@ -0,0 +1,12 @@
+type MaterialType = "PDF" | "FAQ";
+
+interface Material {
+  topic: string;
+  type: MaterialType;
+  url: string;
+}
+
+interface MaterialGroup {
+  group: string;
+  materials: Material[];
+}

packages/knowledge-drawer/src/style.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/knowledge-drawer/tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./src/**/*.{tsx,jsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+  prefix: "tw-",
+};

packages/knowledge-drawer/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@dans-framework/typescript-config/react-library.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}