@collabchron/notiq 0.2.0

package/src/components/ui/equation/KatexRenderer.tsx

@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {JSX} from 'react';
+
+import katex from 'katex';
+import * as React from 'react';
+import {useEffect, useRef} from 'react';
+
+export default function KatexRenderer({
+  equation,
+  inline,
+  onDoubleClick,
+}: Readonly<{
+  equation: string;
+  inline: boolean;
+  onDoubleClick: () => void;
+}>): JSX.Element {
+  const katexElementRef = useRef(null);
+
+  useEffect(() => {
+    const katexElement = katexElementRef.current;
+
+    if (katexElement !== null) {
+      katex.render(equation, katexElement, {
+        displayMode: !inline, // true === block display //
+        errorColor: '#cc0000',
+        output: 'html',
+        strict: 'warn',
+        throwOnError: false,
+        trust: false,
+      });
+    }
+  }, [equation, inline]);
+
+  return (
+    // We use an empty image tag either side to ensure Android doesn't try and compose from the
+    // inner text from Katex. There didn't seem to be any other way of making this work,
+    // without having a physical space.
+    <>
+      <img
+        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+        width="0"
+        height="0"
+        alt=""
+      />
+      <span
+        role="button"
+        tabIndex={-1}
+        onDoubleClick={onDoubleClick}
+        ref={katexElementRef}
+      />
+      <img
+        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+        width="0"
+        height="0"
+        alt=""
+      />
+    </>
+  );
+}

package/src/components/ui/excalidraw/ExcalidrawModal.css

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+.ExcalidrawModal__overlay {
+  display: flex;
+  align-items: center;
+  position: fixed;
+  flex-direction: column;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  flex-grow: 0px;
+  flex-shrink: 1px;
+  z-index: 100;
+  background-color: rgba(40, 40, 40, 0.6);
+}
+.ExcalidrawModal__actions {
+  text-align: end;
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  z-index: 1;
+}
+.ExcalidrawModal__actions button {
+  background-color: #fff;
+  border-radius: 5px;
+}
+.ExcalidrawModal__row {
+  position: relative;
+  padding: 40px 5px 5px;
+  width: 70vw;
+  height: 70vh;
+  border-radius: 8px;
+  box-shadow:
+    0 12px 28px 0 rgba(0, 0, 0, 0.2),
+    0 2px 4px 0 rgba(0, 0, 0, 0.1),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+}
+.ExcalidrawModal__row > div {
+  border-radius: 5px;
+}
+.ExcalidrawModal__modal {
+  position: relative;
+  z-index: 10;
+  top: 50px;
+  width: auto;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  background-color: #eee;
+}
+.ExcalidrawModal__discardModal {
+  margin-top: 60px;
+  text-align: center;
+}

package/src/components/ui/excalidraw/ExcalidrawModal.tsx

@@ -0,0 +1,234 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {
+  AppState,
+  BinaryFiles,
+  ExcalidrawImperativeAPI,
+  ExcalidrawInitialDataState,
+} from '@excalidraw/excalidraw/types';
+import type {JSX} from 'react';
+
+import './ExcalidrawModal.css';
+
+import {Excalidraw} from '@excalidraw/excalidraw';
+import {isDOMNode} from 'lexical';
+import * as React from 'react';
+import {ReactPortal, useEffect, useLayoutEffect, useRef, useState} from 'react';
+import {createPortal} from 'react-dom';
+import Modal from './Modal';
+import { Button } from '@/components/ui/button';
+
+
+
+export type ExcalidrawInitialElements = ExcalidrawInitialDataState['elements'];
+
+type Props = {
+  closeOnClickOutside?: boolean;
+  /**
+   * The initial set of elements to draw into the scene
+   */
+  initialElements: ExcalidrawInitialElements;
+  /**
+   * The initial set of elements to draw into the scene
+   */
+  initialAppState: AppState;
+  /**
+   * The initial set of elements to draw into the scene
+   */
+  initialFiles: BinaryFiles;
+  /**
+   * Controls the visibility of the modal
+   */
+  isShown?: boolean;
+  /**
+   * Callback when closing and discarding the new changes
+   */
+  onClose: () => void;
+  /**
+   * Completely remove Excalidraw component
+   */
+  onDelete: () => void;
+  /**
+   * Callback when the save button is clicked
+   */
+  onSave: (
+    elements: ExcalidrawInitialElements,
+    appState: Partial<AppState>,
+    files: BinaryFiles,
+  ) => void;
+};
+
+/**
+ * @explorer-desc
+ * A component which renders a modal with Excalidraw (a painting app)
+ * which can be used to export an editable image
+ */
+export default function ExcalidrawModal({
+  closeOnClickOutside = false,
+  onSave,
+  initialElements,
+  initialAppState,
+  initialFiles,
+  isShown = false,
+  onDelete,
+  onClose,
+}: Props): ReactPortal | null {
+  const excaliDrawModelRef = useRef<HTMLDivElement | null>(null);
+  const [excalidrawAPI, setExcalidrawAPI] =
+    useState<ExcalidrawImperativeAPI | null>(null);
+  const [discardModalOpen, setDiscardModalOpen] = useState(false);
+  const [elements, setElements] =
+    useState<ExcalidrawInitialElements>(initialElements);
+  const [files, setFiles] = useState<BinaryFiles>(initialFiles);
+
+  useEffect(() => {
+    excaliDrawModelRef.current?.focus();
+  }, []);
+
+  useEffect(() => {
+    let modalOverlayElement: HTMLElement | null = null;
+
+    const clickOutsideHandler = (event: MouseEvent) => {
+      const target = event.target;
+      if (
+        excaliDrawModelRef.current !== null &&
+        isDOMNode(target) &&
+        !excaliDrawModelRef.current.contains(target) &&
+        closeOnClickOutside
+      ) {
+        onDelete();
+      }
+    };
+
+    if (excaliDrawModelRef.current !== null) {
+      modalOverlayElement = excaliDrawModelRef.current?.parentElement;
+      modalOverlayElement?.addEventListener('click', clickOutsideHandler);
+    }
+
+    return () => {
+      modalOverlayElement?.removeEventListener('click', clickOutsideHandler);
+    };
+  }, [closeOnClickOutside, onDelete]);
+
+  useLayoutEffect(() => {
+    const currentModalRef = excaliDrawModelRef.current;
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onDelete();
+      }
+    };
+
+    currentModalRef?.addEventListener('keydown', onKeyDown);
+
+    return () => {
+      currentModalRef?.removeEventListener('keydown', onKeyDown);
+    };
+  }, [elements, files, onDelete]);
+
+  const save = () => {
+    if (elements?.some((el) => !el.isDeleted)) {
+      const appState = excalidrawAPI?.getAppState();
+      // We only need a subset of the state
+      const partialState: Partial<AppState> = {
+        exportBackground: appState?.exportBackground,
+        exportScale: appState?.exportScale,
+        exportWithDarkMode: appState?.theme === 'dark',
+        isBindingEnabled: appState?.isBindingEnabled,
+        isLoading: appState?.isLoading,
+        name: appState?.name,
+        theme: appState?.theme,
+        viewBackgroundColor: appState?.viewBackgroundColor,
+        viewModeEnabled: appState?.viewModeEnabled,
+        zenModeEnabled: appState?.zenModeEnabled,
+        zoom: appState?.zoom,
+      };
+      onSave(elements, partialState, files);
+    } else {
+      // delete node if the scene is clear
+      onDelete();
+    }
+  };
+
+  const discard = () => {
+    setDiscardModalOpen(true);
+  };
+
+  function ShowDiscardDialog(): JSX.Element {
+    return (
+      <Modal
+        title="Discard"
+        onClose={() => {
+          setDiscardModalOpen(false);
+        }}
+        closeOnClickOutside={false}>
+        Are you sure you want to discard the changes?
+        <div className="ExcalidrawModal__discardModal">
+          <Button
+            onClick={() => {
+              setDiscardModalOpen(false);
+              onClose();
+            }}>
+            Discard
+          </Button>{' '}
+          <Button
+            onClick={() => {
+              setDiscardModalOpen(false);
+            }}>
+            Cancel
+          </Button>
+        </div>
+      </Modal>
+    );
+  }
+
+  if (isShown === false) {
+    return null;
+  }
+
+  const onChange = (
+    els: ExcalidrawInitialElements,
+    _: AppState,
+    fls: BinaryFiles,
+  ) => {
+    setElements(els);
+    setFiles(fls);
+  };
+
+  return createPortal(
+    <div className="ExcalidrawModal__overlay" role="dialog">
+      <div
+        className="ExcalidrawModal__modal"
+        ref={excaliDrawModelRef}
+        tabIndex={-1}>
+        <div className="ExcalidrawModal__row">
+          {discardModalOpen && <ShowDiscardDialog />}
+          <Excalidraw
+            onChange={onChange}
+            excalidrawAPI={setExcalidrawAPI}
+            initialData={{
+              appState: initialAppState || {isLoading: false},
+              elements: initialElements,
+              files: initialFiles,
+            }}
+          />
+          <div className="ExcalidrawModal__actions">
+            <button className="action-button" onClick={discard}>
+              Discard
+            </button>
+            <button className="action-button" onClick={save}>
+              Save
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}

package/src/components/ui/excalidraw/Modal.css

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+.Modal__overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  flex-direction: column;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  background-color: rgba(40, 40, 40, 0.6);
+  flex-grow: 0px;
+  flex-shrink: 1px;
+  z-index: 100;
+}
+.Modal__modal {
+  padding: 20px;
+  min-height: 100px;
+  min-width: 300px;
+  display: flex;
+  flex-grow: 0px;
+  background-color: #fff;
+  flex-direction: column;
+  position: relative;
+  box-shadow: 0 0 20px 0 #444;
+  border-radius: 10px;
+}
+.Modal__title {
+  color: #444;
+  margin: 0px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #ccc;
+}
+.Modal__closeButton {
+  border: 0px;
+  position: absolute;
+  right: 20px;
+  border-radius: 20px;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  cursor: pointer;
+  background-color: #eee;
+}
+.Modal__closeButton:hover {
+  background-color: #ddd;
+}
+.Modal__content {
+  padding-top: 20px;
+}

package/src/components/ui/excalidraw/Modal.tsx

@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {JSX} from 'react';
+
+import './Modal.css';
+
+import {isDOMNode} from 'lexical';
+import * as React from 'react';
+import {ReactNode, useEffect, useRef} from 'react';
+import {createPortal} from 'react-dom';
+
+function PortalImpl({
+  onClose,
+  children,
+  title,
+  closeOnClickOutside,
+}: {
+  children: ReactNode;
+  closeOnClickOutside: boolean;
+  onClose: () => void;
+  title: string;
+}) {
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (modalRef.current !== null) {
+      modalRef.current.focus();
+    }
+  }, []);
+
+  useEffect(() => {
+    let modalOverlayElement: HTMLElement | null = null;
+    const handler = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+    const clickOutsideHandler = (event: MouseEvent) => {
+      const target = event.target;
+      if (
+        modalRef.current !== null &&
+        isDOMNode(target) &&
+        !modalRef.current.contains(target) &&
+        closeOnClickOutside
+      ) {
+        onClose();
+      }
+    };
+    const modelElement = modalRef.current;
+    if (modelElement !== null) {
+      modalOverlayElement = modelElement.parentElement;
+      if (modalOverlayElement !== null) {
+        modalOverlayElement.addEventListener('click', clickOutsideHandler);
+      }
+    }
+
+    window.addEventListener('keydown', handler);
+
+    return () => {
+      window.removeEventListener('keydown', handler);
+      if (modalOverlayElement !== null) {
+        modalOverlayElement?.removeEventListener('click', clickOutsideHandler);
+      }
+    };
+  }, [closeOnClickOutside, onClose]);
+
+  return (
+    <div className="Modal__overlay" role="dialog">
+      <div className="Modal__modal" tabIndex={-1} ref={modalRef}>
+        <h2 className="Modal__title">{title}</h2>
+        <button
+          className="Modal__closeButton"
+          aria-label="Close modal"
+          type="button"
+          onClick={onClose}>
+          X
+        </button>
+        <div className="Modal__content">{children}</div>
+      </div>
+    </div>
+  );
+}
+
+export default function Modal({
+  onClose,
+  children,
+  title,
+  closeOnClickOutside = false,
+}: {
+  children: ReactNode;
+  closeOnClickOutside?: boolean;
+  onClose: () => void;
+  title: string;
+}): JSX.Element {
+  return createPortal(
+    <PortalImpl
+      onClose={onClose}
+      title={title}
+      closeOnClickOutside={closeOnClickOutside}>
+      {children}
+    </PortalImpl>,
+    document.body,
+  );
+}

package/src/components/ui/hover-card.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

package/src/components/ui/image/error-image.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export default function ErrorImage() {
+  return (
+    <img
+        src={"https://cdn.mos.cms.futurecdn.net/Wh46bS2Gw8vUC6iQh2wEd6-1020-80.png"}
+        style={{
+          height: 300,
+          width: 300,
+        }}
+        draggable="false"
+      />
+    );
+  
+}
+
+