@soul-refiner/design-system 0.0.18 → 0.0.20

package/dist/src/navigation/Drawer/Drawer.tsx

@@ -1,177 +0,0 @@
-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/dist/src/navigation/Drawer/index.ts

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

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

@@ -1,118 +0,0 @@
-@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/dist/src/navigation/EditorBar/EditorBar.tsx

@@ -1,416 +0,0 @@
-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>
-  );
-};