@soul-refiner/design-system 0.0.14 → 0.0.15

package/src/navigation/Drawer/Drawer.tsx

@@ -0,0 +1,177 @@
+import React from "react";
+import styles from "./Drawer.module.scss";
+import { sortChildrenByType } from "@soul-refiner/utils/src";
+import { Close } from "@soul-refiner/icons/src";
+
+import { MenuTabs } from "../MenuTabs";
+import { IconHeader, IconHeaderProps } from "../../iconography";
+import { Button, ButtonProps } from "../../actions";
+
+export interface DrawerProps extends React.PropsWithChildren {
+  activeTab?: number;
+  background?: string;
+  className?: string;
+  heading?: React.ReactNode;
+  open?: boolean;
+  toggle?: (open: boolean) => void;
+}
+
+const Drawer = ({
+  activeTab: controlledActiveTab,
+  background = "#F2F5F6",
+  className,
+  children,
+  open,
+  toggle,
+}: DrawerProps) => {
+  const [activeTab, setActiveTab] = React.useState(0);
+
+  const tabs: string[] = [];
+  const _children = sortChildrenByType(children);
+
+  React.Children.forEach(_children["Drawer.Tab"], (child) => {
+    tabs.push((child as { props: { name: string } })?.props.name);
+  });
+
+  const handleTabChange = (index: number) => setActiveTab(index);
+
+  React.useEffect(() => {
+    if (typeof controlledActiveTab === "number") {
+      setActiveTab(controlledActiveTab);
+    }
+  }, [controlledActiveTab]);
+
+  return (
+    <>
+      {open && (
+        <div
+          onClick={() => toggle && toggle(false)}
+          className={styles.background}
+        />
+      )}
+      <div
+        className={`${styles.drawer} ${open ? "" : "closed"} ${
+          className ? " " + className : ""
+        }`}
+        style={
+          {
+            "--background-color": background,
+          } as React.CSSProperties
+        }
+      >
+        {React.Children.map(_children["Drawer.Heading"], (child) => {
+          if (React.isValidElement(child)) {
+            return React.cloneElement(child, {
+              toggleDrawer: () => toggle && toggle(!open),
+            } as Partial<unknown> & React.Attributes);
+          }
+          return child;
+        })}
+        <div
+          className={`children-wrapper ${
+            _children["Drawer.Action"] ? " with-actions" : ""
+          }`}
+        >
+          {_children["General"]}
+          {_children["undefined"]}
+          {!!tabs.length && (
+            <div className="tabs-wrapper">
+              <MenuTabs
+                activeItem={activeTab}
+                onTabClick={handleTabChange}
+                tabItems={tabs}
+              />
+            </div>
+          )}
+          {_children["Drawer.Tab"] &&
+            React.Children.map(
+              (_children["Drawer.Tab"][activeTab] as React.ReactElement).props
+                .children,
+              (child, index) => {
+                return React.cloneElement(child, {
+                  key: "menu-item-" + index.toString(36),
+                });
+              }
+            )}
+        </div>
+        <div className="actions-wrapper">
+          {_children["Drawer.Action"] &&
+            _children["Drawer.Action"].map((button, index) => {
+              if (
+                React.isValidElement(button) &&
+                index === _children["Drawer.Action"].length - 1
+              ) {
+                return React.cloneElement(button, {
+                  buttonColor: "var(--color-blue-3)",
+                  color: "var(--color-blue-10)",
+                } as Partial<ButtonProps> & React.Attributes);
+              }
+              return React.cloneElement(button as React.ReactElement, {
+                buttonType: "secondary",
+              });
+            })}
+        </div>
+      </div>
+    </>
+  );
+};
+
+const Heading = ({
+  children,
+  toggleDrawer,
+}: {
+  children: React.ReactNode;
+  toggleDrawer?: () => void;
+}) => (
+  <div className={styles.heading}>
+    {children}
+    <Close
+      as="button"
+      fill="var(--color-grey-4)"
+      iconColor="#FFFFFF"
+      iconSize={18}
+      onClick={toggleDrawer}
+      size={32}
+      style={{ borderRadius: "50%" }}
+    />
+  </div>
+);
+
+Heading.displayName = "Drawer.Heading";
+Drawer.Heading = Heading;
+
+export interface DrawerTabProps extends React.PropsWithChildren {
+  name: string;
+}
+
+const Tab = ({ children }: DrawerTabProps) => {
+  return <>{React.Children.toArray(children)}</>;
+};
+
+Tab.displayName = "Drawer.Tab";
+Drawer.Tab = Tab;
+
+export interface DrawerItemProps extends React.PropsWithChildren {
+  header: IconHeaderProps;
+}
+
+const Item = ({ children, header }: DrawerItemProps) => {
+  return (
+    <div className={styles.item}>
+      {header && <IconHeader {...header} />}
+      {children}
+    </div>
+  );
+};
+
+Item.displayName = "Drawer.Item";
+Drawer.Item = Item;
+
+const Action = ({ children, ...rest }: Omit<ButtonProps, "size">) => {
+  return <Button {...rest}>{children}</Button>;
+};
+
+Action.displayName = "Drawer.Action";
+Drawer.Action = Action;
+
+export { Drawer };

package/src/navigation/Drawer/index.ts

@@ -0,0 +1 @@
+export { Drawer, type DrawerProps } from "./Drawer";

package/src/navigation/EditorBar/EditorBar.module.scss

@@ -0,0 +1,118 @@
+@use "@soul-refiner/styles/_mixins";
+
+.editornav {
+  position: fixed;
+  z-index: 2;
+  left: 0;
+  right: 0;
+  top: 0;
+  background-color: #ffffff;
+}
+
+.menubarWrapper {
+  border-bottom: 1px solid var(--color-grey-9);
+}
+
+.menubar {
+  @include mixins.flex($gap: 5px, $justify: center);
+  max-width: 1200px;
+  width: fit-content;
+  min-width: 1000px;
+  margin: 0 auto;
+  padding: 8px;
+
+  .divider {
+    width: 1px;
+    height: 32px;
+    background-color: var(--color-grey-8);
+    margin: 0px 7px;
+  }
+
+  button.icon {
+    padding: 6px;
+    height: 32px !important;
+    width: 34px !important;
+  }
+
+  & > button,
+  & > span,
+  & > div > button,
+  & > div > span,
+  & > label > span {
+    border-radius: var(--border-radius-tiny);
+    border: 1px solid transparent !important;
+    height: 32px;
+    width: 34px;
+
+    &:hover:not(&[class~="slate-ToolbarButton-active"]) {
+      background-color: var(--color-grey-10) !important;
+      border: 1px solid var(--color-grey-8) !important;
+      color: var(--color-grey-3);
+    }
+    &[class~="slate-ToolbarButton-active"] {
+      background-color: var(--color-grey-4);
+      & > div {
+        & > svg > path {
+          stroke: var(--color-grey-10);
+        }
+        &[class~="fill"] > svg > path {
+          fill: var(--color-grey-10);
+        }
+      }
+      .nostroke > svg > path {
+        stroke: none;
+      }
+    }
+  }
+
+  [class~="options"] {
+    z-index: 5;
+    [class~="selected"] {
+      background-color: var(--color-grey-3);
+      color: #ffffff;
+      & > button > svg {
+        fill: #ffffff;
+      }
+    }
+    div {
+      padding: 5px 0px;
+    }
+  }
+}
+
+.buttonoptions {
+  margin-bottom: 16px;
+  cursor: pointer;
+  &:last-of-type {
+    margin-bottom: 0px;
+  }
+}
+
+.option {
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.moredropdown {
+  @include mixins.flex($align: center, $gap: 16px);
+  p {
+    line-height: 28px;
+  }
+  margin-bottom: 16px;
+  cursor: pointer;
+  &:last-of-type {
+    margin-bottom: 0px;
+  }
+}
+
+.inputContainer {
+  position: relative;
+  input {
+    display: none;
+  }
+}
+.audio {
+  cursor: pointer;
+}

package/src/navigation/EditorBar/EditorBar.tsx

@@ -0,0 +1,416 @@
+import React from "react";
+import ReactTooltip from "react-tooltip";
+import {
+  focusEditor,
+  getPluginType,
+  getPreventDefaultHandler,
+  ImageToolbarButton,
+  insertImage,
+  insertNodes,
+  LinkToolbarButton,
+  MarkToolbarButton,
+  setMarks,
+  toggleIndentList,
+  toggleNodeType,
+  ToolbarButton,
+  usePlateEditorRef,
+  usePlateEditorState,
+} from "@udecode/plate";
+
+import styles from "./EditorBar.module.scss";
+import {
+  Audio,
+  BlockQuote,
+  Bold,
+  Bookmark,
+  Code,
+  CurrencyUSD,
+  Highlighter,
+  Image,
+  Italic,
+  Link,
+  OrderedList,
+  Note,
+  Preferences,
+  QA,
+  Redo,
+  Strikethrough,
+  Undo,
+  Underline,
+  UnorderedList,
+  Video,
+} from "@soul-refiner/icons/src";
+
+import {
+  EditorContext,
+  BUTTON_SUBSCRIBE,
+  ELEMENT_BLOCKQUOTE,
+  ELEMENT_BUTTON,
+  ELEMENT_DEFAULT,
+  ELEMENT_H2,
+  ELEMENT_PARAGRAPH,
+  ELEMENT_PAYWALL,
+  ELEMENT_QA,
+  MARK_BOLD,
+  MARK_CODE,
+  MARK_ITALIC,
+  MARK_HIGHLIGHT,
+  MARK_STRIKETHROUGH,
+  MARK_SUBSCRIPT,
+  MARK_SUPERSCRIPT,
+  MARK_UNDERLINE,
+} from "../../editor";
+import { Dropdown } from "../../actions";
+import { Modal } from "../../surfaces";
+
+import {
+  AlignmentDropdown,
+  ButtonModal,
+  FontDropdown,
+  MoreDropdown,
+  OutlineDropdown,
+  TextTypeDropdown,
+  VideoModal,
+} from "./components";
+
+export interface EditorBarProps {
+  buttonsMenu?: boolean;
+  editable: boolean;
+  mediaMenu?: boolean;
+  moreMenu?: boolean;
+  notes?: boolean;
+}
+
+export const EditorBar = ({
+  buttonsMenu = true,
+  editable,
+  mediaMenu = true,
+  moreMenu = true,
+  notes = false,
+}: EditorBarProps) => {
+  const { handleUploadImage, pageName, outline } =
+    React.useContext(EditorContext);
+  const editorRef = usePlateEditorRef("main");
+  const stateEditor = usePlateEditorState();
+  const audioRef = React.useRef<HTMLInputElement>(null);
+  const imageRef = React.useRef<HTMLInputElement>(null);
+  const videoRef = React.useRef<HTMLInputElement>(null);
+
+  const handleAudioChange = async (event: React.FormEvent) => {
+    const file = (event.target as HTMLInputElement)?.files?.[0];
+    if (!file) return;
+    /**
+     * TODO: Insert audio component
+     */
+  };
+
+  const handleBlockquote = (event: React.MouseEvent) => {
+    getPreventDefaultHandler(toggleNodeType, stateEditor, {
+      activeType: ELEMENT_BLOCKQUOTE,
+    })(event);
+  };
+
+  const handleImageChange = async (event: React.FormEvent) => {
+    const file = (event.target as HTMLInputElement)?.files?.[0];
+    if (!file) return;
+    const imageurl = await handleUploadImage(file);
+    if (imageurl) {
+      insertImage(editorRef, imageurl);
+    }
+  };
+
+  const handleFont = (value: string) => {
+    const type = getPluginType(editorRef, "fontSize");
+    focusEditor(editorRef);
+    setMarks(stateEditor, { [type]: `${value}px` });
+  };
+
+  const handleOrderedList = (event: any) => {
+    event.preventDefault();
+    toggleIndentList(editorRef, {
+      listStyleType: "decimals",
+    });
+  };
+
+  const handleUnorderedList = (event: any) => {
+    event.preventDefault();
+    toggleIndentList(editorRef, {
+      listStyleType: "disc",
+    });
+  };
+
+  const handleVideoChange = async (event: React.FormEvent) => {
+    const file = (event.target as HTMLInputElement)?.files?.[0];
+    if (!file) return;
+    /**
+     * TODO: Insert video component
+     */
+  };
+
+  const handlePaywall = () => {
+    insertNodes(editorRef, [
+      {
+        type: ELEMENT_PAYWALL,
+        children: [
+          {
+            type: ELEMENT_H2,
+            children: [
+              {
+                text: "Keep reading with a paid subscription",
+              },
+            ],
+          },
+          {
+            type: ELEMENT_PARAGRAPH,
+            children: [
+              {
+                text: "Subscribe to ",
+              },
+              {
+                text: pageName,
+                italic: true,
+              },
+              {
+                text: " to keep reading this content.",
+              },
+            ],
+          },
+          {
+            type: ELEMENT_BUTTON,
+            buttonType: BUTTON_SUBSCRIBE,
+            children: [
+              {
+                text: "Get Access",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        type: ELEMENT_DEFAULT,
+        children: [
+          {
+            text: "",
+          },
+        ],
+      },
+    ]);
+    focusEditor(editorRef);
+  };
+
+  const handleQA = () => {
+    insertNodes(editorRef, {
+      type: ELEMENT_QA,
+      children: [
+        {
+          type: ELEMENT_PARAGRAPH,
+          children: [
+            {
+              text: "Ask your question here...",
+            },
+          ],
+        },
+      ],
+    });
+  };
+
+  return (
+    <div className={styles.editornav}>
+      <ReactTooltip place="top" type="dark" effect="solid" html />
+      <div className={styles.menubarWrapper}>
+        <nav
+          aria-label="editor-navigation"
+          className={styles.menubar}
+          data-testid="editor-bar-top"
+        >
+          {outline && <OutlineDropdown editable={editable} outline={outline} />}
+          {!editable && (
+            <>
+              <Dropdown
+                onChange={() => undefined}
+                trigger={
+                  <Highlighter
+                    as="button"
+                    size={32}
+                    iconSize={22}
+                    fill={"var(--color-grey-6)"}
+                  />
+                }
+              ></Dropdown>
+              <Dropdown
+                onChange={() => undefined}
+                trigger={
+                  <Bookmark
+                    as="button"
+                    size={32}
+                    iconSize={18}
+                    fill={"var(--color-grey-6)"}
+                  />
+                }
+              ></Dropdown>
+              <Modal>
+                <Modal.Trigger>
+                  <Note
+                    as="button"
+                    size={32}
+                    iconSize={20}
+                    fill="var(--color-grey-6)"
+                  />
+                </Modal.Trigger>
+              </Modal>
+              <Modal>
+                <Modal.Trigger>
+                  <Preferences
+                    as="button"
+                    size={32}
+                    iconSize={22}
+                    fill="var(--color-grey-6)"
+                  />
+                </Modal.Trigger>
+              </Modal>
+            </>
+          )}
+        </nav>
+      </div>
+      <div className={styles.menubarWrapper}>
+        <nav
+          aria-label="editor-navigation"
+          className={styles.menubar}
+          data-testid="editor-bar"
+        >
+          <Undo
+            as="button"
+            data-tip="Undo"
+            fill={"var(--color-grey-1)"}
+            onClick={() => editorRef.undo()}
+            size={32}
+            iconSize={22}
+          />
+          <Redo
+            as="button"
+            data-tip="Redo"
+            fill={"var(--color-grey-1)"}
+            onClick={() => editorRef.redo()}
+            size={32}
+            iconSize={22}
+          />
+          <div className={styles.divider} />
+          <TextTypeDropdown editorRef={editorRef} />
+          <div className={styles.divider} />
+          <FontDropdown editorRef={editorRef} onChange={handleFont} />
+          <div data-tip="Bold">
+            <MarkToolbarButton
+              type={getPluginType(editorRef, MARK_BOLD)}
+              icon={<Bold fill={"var(--color-grey-1)"} />}
+            />
+          </div>
+          <div data-tip="Italic">
+            <MarkToolbarButton
+              type={getPluginType(editorRef, MARK_ITALIC)}
+              icon={<Italic fill={"var(--color-grey-1)"} />}
+            />
+          </div>
+          <div data-tip="Strikethrough">
+            <MarkToolbarButton
+              type={getPluginType(editorRef, MARK_STRIKETHROUGH)}
+              icon={<Strikethrough fill={"var(--color-grey-1)"} />}
+            />
+          </div>
+          <div data-tip="Underline">
+            <MarkToolbarButton
+              type={getPluginType(editorRef, MARK_UNDERLINE)}
+              icon={
+                <Underline
+                  fill={"var(--color-grey-1)"}
+                  className="fill"
+                  size={32}
+                  iconSize={22}
+                />
+              }
+            />
+          </div>
+          <div data-tip="Inline code">
+            <MarkToolbarButton
+              type={getPluginType(editorRef, MARK_CODE)}
+              icon={
+                <Code fill={"var(--color-grey-1)"} size={32} iconSize={22} />
+              }
+            />
+          </div>
+          <AlignmentDropdown stateEditor={stateEditor} editorRef={editorRef} />
+          <div className={styles.divider} />
+          <div data-tip="Link">
+            <LinkToolbarButton
+              icon={
+                <Link
+                  fill="var(--color-grey-1)"
+                  className={`fill ${styles.nostroke}`}
+                />
+              }
+            />
+          </div>
+          <label
+            data-tip="Insert image"
+            onChange={handleImageChange}
+            className={styles.inputContainer}
+          >
+            <ImageToolbarButton
+              icon={<Image fill="var(--color-grey-1)" />}
+              onMouseDown={() => imageRef.current?.click()}
+            />
+            <input accept="image/*" type="file" ref={imageRef} />
+          </label>
+          <VideoModal editorRef={editorRef} />
+          <div
+            className={`${styles.inputContainer} ${styles.audio}`}
+            data-tip="Insert Audio"
+          >
+            <Audio
+              as="span"
+              fill="var(--color-grey-1)"
+              size={32}
+              iconSize={18}
+            />
+          </div>
+          <span
+            className={styles.option}
+            data-tip="Blockquote"
+            onClick={handleBlockquote}
+          >
+            <BlockQuote fill="var(--color-grey-4)" size={32} iconSize={18} />
+          </span>
+          <ButtonModal editorRef={editorRef} pageName={pageName} />
+          <span
+            className={styles.option}
+            data-tip="Insert Q&A"
+            onClick={handleQA}
+          >
+            <QA fill="var(--color-grey-4)" />
+          </span>
+          <span
+            className={styles.option}
+            data-tip="Insert Paywall"
+            onClick={handlePaywall}
+          >
+            <CurrencyUSD fill="var(--color-grey-4)" />
+          </span>
+          <div className={styles.divider} />
+          <div data-tip="Unordered List">
+            <ToolbarButton
+              onMouseDown={handleUnorderedList}
+              icon={<UnorderedList fill="var(--color-grey-1)" />}
+            />
+          </div>
+          <div data-tip="Ordered List">
+            <ToolbarButton
+              onMouseDown={handleOrderedList}
+              icon={<OrderedList fill="var(--color-grey-1)" />}
+            />
+          </div>
+          <div className={styles.divider} />
+          <MoreDropdown editorRef={editorRef} stateEditor={stateEditor} />
+        </nav>
+      </div>
+    </div>
+  );
+};