@soul-refiner/design-system 0.0.14 → 0.0.16

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

@@ -0,0 +1,51 @@
+@use "@soul-refiner/styles/mixins";
+
+.typeDropdown {
+  [class~="options"] {
+    & > div {
+      width: 192px;
+      padding: 8px 16px;
+      height: 44px;
+      border-radius: 8px;
+      & > span,
+      & > div {
+        justify-content: flex-start;
+        width: 136px;
+        padding: 2px 4px;
+        font-size: 16px;
+        line-height: 28px;
+      }
+    }
+  }
+}
+
+.icon {
+  @include mixins.flex($justify: center, $align: center);
+  width: 24px;
+  height: 24px;
+}
+
+.trigger {
+  @include mixins.flex($align: center, $justify: center, $gap: 10px);
+  height: 32px;
+  padding: 4px 10px;
+  cursor: pointer;
+  border: 1px solid transparent;
+
+  p {
+    @include mixins.font(600, 14px, 24px);
+    color: var(--color-grey-4);
+  }
+
+  &:hover {
+    border-radius: 6px;
+    border: 1px solid var(--color-grey-8);
+  }
+}
+
+.option {
+  @include mixins.flex($align: center, $justify: flex-start, $gap: 16px);
+  width: 160px;
+  padding-left: 8px !important;
+  padding-right: 12px !important;
+}

package/src/navigation/EditorBar/components/TextTypeDropdown/TextTypeDropdown.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import ReactTooltip from "react-tooltip";
+import {
+  getPreventDefaultHandler,
+  PlateEditor,
+  toggleNodeType,
+} from "@udecode/plate";
+import { Paragraph, TriangleDown } from "@soul-refiner/icons/src";
+
+import { Dropdown } from "../../../../actions";
+
+import {
+  ELEMENT_H1,
+  ELEMENT_H2,
+  ELEMENT_H3,
+  ELEMENT_H4,
+  ELEMENT_H5,
+  ELEMENT_H6,
+  ELEMENT_PARAGRAPH,
+} from "../../../../editor/common";
+
+import styles from "./TextTypeDropdown.module.scss";
+
+export interface TextTypeDropdownProps {
+  editorRef: PlateEditor;
+}
+
+export const TextTypeDropdown = ({ editorRef }: TextTypeDropdownProps) => {
+  const handleChange = (event: React.MouseEvent) => {
+    const value = (event.target as HTMLElement)?.getAttribute("data-value");
+    if (!value) return;
+    getPreventDefaultHandler(toggleNodeType, editorRef, {
+      activeType: value,
+    })(event);
+  };
+
+  return (
+    <Dropdown
+      className={styles.moreDropdown}
+      maintainState={false}
+      onChange={handleChange}
+      trigger={
+        <div className={styles.trigger} data-tip="Element Type">
+          <ReactTooltip place="top" type="dark" effect="solid" html />
+          <p>Type</p>
+          <TriangleDown fill="var(--color-grey-4)" iconSize={8} size={8} />
+        </div>
+      }
+    >
+      <div className={styles.option} data-value={ELEMENT_H1}>
+        <p className={styles.icon}>H1</p>
+        <p>Title</p>
+      </div>
+      <div className={styles.option} data-value={ELEMENT_H2}>
+        <p className={styles.icon}>H2</p>
+        <p>Subtitle</p>
+      </div>
+      <div className={styles.option} data-value={ELEMENT_H3}>
+        <p className={styles.icon}>H3</p>
+        <p>Heading</p>
+      </div>
+      <div className={styles.option} data-value={ELEMENT_H4}>
+        <p className={styles.icon}>H4</p>
+        <p>Subheading</p>
+      </div>
+      <div className={styles.option} data-value={ELEMENT_H5}>
+        <p className={styles.icon}>H5</p>
+        <p>Section</p>
+      </div>
+      <div className={styles.option} data-value={ELEMENT_H6}>
+        <p className={styles.icon}>H6</p>
+        <p>Subsection</p>
+      </div>
+      <div className={styles.option} data-value={ELEMENT_PARAGRAPH}>
+        <Paragraph fill="none" stroke="var(--color-grey-1)" />
+        <p>Paragraph</p>
+      </div>
+    </Dropdown>
+  );
+};

package/src/navigation/EditorBar/components/TextTypeDropdown/index.ts

@@ -0,0 +1 @@
+export { TextTypeDropdown, type TextTypeDropdownProps } from "./TextTypeDropdown";

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

@@ -0,0 +1,150 @@
+@use "@soul-refiner/styles/mixins";
+
+.content {
+  @include mixins.flex(
+    $justify: center,
+    $align: flex-start,
+    $gap: 16px,
+    $dir: column
+  );
+  padding: 24px 16px;
+
+  & > div:nth-of-type(2) {
+    width: 100%;
+    & > ul {
+      position: relative;
+      width: 100%;
+      &::before {
+        z-index: 0;
+        position: absolute;
+        content: "";
+        bottom: 0px;
+        left: 0px;
+        right: 0px;
+        height: 4px;
+        width: 100%;
+        background-color: var(--color-grey-9);
+      }
+      li {
+        z-index: 1;
+      }
+    }
+  }
+
+  .upload > div {
+    width: 365px;
+    button > span {
+      color: var(--color-blue-5);
+    }
+    button:hover > span {
+      text-decoration: underline;
+    }
+    button:active {
+      background-color: transparent !important;
+    }
+  }
+
+  .select {
+    & > div {
+      width: 365px !important;
+      padding: 12px 32px 12px 12px;
+      border-radius: 8px;
+      height: fit-content !important;
+      input {
+        width: 333px;
+        height: 24px;
+        padding-right: 24px;
+      }
+    }
+
+    .videoWrapper {
+      max-height: 271px;
+      overflow-y: auto;
+      padding: 16px 16px 24px 0px;
+
+      &::-webkit-scrollbar-track {
+        margin: 25px;
+      }
+
+      .video {
+        @include mixins.flex(
+          $gap: 20px,
+          $align: center,
+          $justify: space-between
+        );
+        position: relative;
+        height: 76px;
+        padding: 8px 12px;
+        border-bottom: 1px solid var(--color-grey-9);
+        cursor: pointer;
+
+        &:hover {
+          border-bottom: 1px solid transparent;
+          background-color: var(--color-grey-9);
+          border-radius: 8px;
+        }
+
+        .thumbnailWrapper {
+          height: 100%;
+          position: relative;
+          img {
+            height: 100%;
+            object-fit: contain;
+            border-radius: 8px;
+          }
+          .duration {
+            @include mixins.font(600, 10px, 15px);
+            display: block;
+            position: absolute;
+            right: 7px;
+            bottom: 5px;
+            color: #ffffff;
+            padding: 4px;
+            border-radius: 4px;
+            background-color: rgba(0, 0, 0, 0.5);
+            letter-spacing: 0.5px;
+          }
+        }
+
+        .selected {
+          width: 22px;
+          height: 22px;
+          box-sizing: border-box;
+          border: 1px solid var(--color-grey-8);
+          border-radius: 50%;
+          flex-shrink: 0;
+
+          &[class~="active"] {
+            border: 5px solid var(--color-blue-3);
+          }
+        }
+
+        .title {
+          @include mixins.font-clamp(2);
+          @include mixins.font(500, 14px, 18px);
+        }
+      }
+    }
+  }
+}
+
+.inputContainer {
+  cursor: pointer;
+}
+
+.footer {
+  @include mixins.flex($justify: center, $align: center, $gap: 16px);
+  & > * {
+    flex: 1;
+    height: fit-content !important;
+    span {
+      height: unset;
+      width: unset;
+    }
+  }
+}
+
+.tab {
+  line-height: 40px;
+  vertical-align: middle;
+}

package/src/navigation/EditorBar/components/VideoModal/VideoModal.tsx

@@ -0,0 +1,163 @@
+import React from "react";
+import ReactTooltip from "react-tooltip";
+import { insertNodes, PlateEditor } from "@udecode/plate";
+import { Media } from "@soul-refiner/models";
+import { Video } from "@soul-refiner/icons/src";
+import { includesKeyword, secondsToTimeString } from "@soul-refiner/utils/src";
+
+import { MenuTabs } from "../../../";
+import { Button, Dropzone } from "../../../../actions";
+import { EditorContext, ELEMENT_VIDEO } from "../../../../editor";
+import { SearchInput } from "../../../../inputs";
+import { Modal } from "../../../../surfaces";
+
+import styles from "./VideoModal.module.scss";
+
+export interface VideoModalProps {
+  editorRef: PlateEditor;
+}
+
+export const VideoModal = ({ editorRef }: VideoModalProps) => {
+  const { handleUploadVideo, availableVideos: videos } =
+    React.useContext(EditorContext);
+  const [activeTab, setActiveTab] = React.useState(0);
+  const [videoQuery, setVideoQuery] = React.useState("");
+  const [selected, setSelected] = React.useState<Media | null>(null);
+
+  const handleVideoQuery = (event: React.FormEvent) => {
+    const value = (event.target as HTMLTextAreaElement).value;
+    setVideoQuery(value ?? "");
+  };
+
+  const handleInsertSelectedVideo = () => {
+    if (!!selected) {
+      insertNodes(editorRef, [
+        {
+          id: selected.id,
+          created: selected.created,
+          parentId: selected.parentId,
+          children: [
+            {
+              text: selected.title,
+            },
+          ],
+          captions: selected.captions ?? [],
+          duration: selected.duration,
+          sample: selected.sample,
+          source: selected.source,
+          status: selected.status,
+          synopsis: selected.synopsis,
+          thumbnail: selected.thumbnail,
+          title: selected.title,
+          type: ELEMENT_VIDEO,
+        },
+      ]);
+    }
+    setSelected(null);
+  };
+
+  const handleDropzoneChange = async (files: FileList) => {
+    const file = files[0];
+    handleUploadVideo(file).then((obj) => setSelected(obj));
+  };
+
+  return (
+    <>
+      <ReactTooltip place="top" type="dark" effect="solid" html />
+      <Modal>
+        <Modal.Trigger>
+          <div className={`${styles.inputContainer}`} data-tip="Insert Video">
+            <Video
+              as="span"
+              fill="var(--color-grey-1)"
+              stroke="var(--color-grey-1)"
+              size={32}
+              iconSize={22}
+            />
+          </div>
+        </Modal.Trigger>
+        <Modal.Content
+          footer={
+            <div className={styles.footer}>
+              <Modal.Dismiss>
+                <Button buttonType="secondary">Cancel</Button>
+              </Modal.Dismiss>
+              <Modal.Dismiss>
+                <Button
+                  buttonColor="var(--color-blue-3)"
+                  color="var(--color-blue-10)"
+                  disabled={!selected}
+                  onClick={handleInsertSelectedVideo}
+                >
+                  Insert
+                </Button>
+              </Modal.Dismiss>
+            </div>
+          }
+        >
+          <div className={styles.content}>
+            <div>
+              <h4>Insert Video</h4>
+              <p>Upload or select a video to insert into the text</p>
+            </div>
+            <MenuTabs
+              activeItem={activeTab}
+              onTabClick={(tab: number) => setActiveTab(tab)}
+              tabItems={[
+                <p className={styles.tab}>Upload</p>,
+                <p className={styles.tab}>Select</p>,
+              ]}
+            />
+            {activeTab === 0 && (
+              <div className={styles.upload}>
+                <Dropzone
+                  color="grey"
+                  fileType="video"
+                  onDrop={handleDropzoneChange}
+                  showBrowse
+                  text="Drag here or "
+                />
+              </div>
+            )}
+            {activeTab === 1 && (
+              <div className={styles.select}>
+                <SearchInput
+                  as="div"
+                  expandable={false}
+                  expanded={true}
+                  placeholder="Search..."
+                  onChange={handleVideoQuery}
+                  value={videoQuery}
+                />
+                <div className={styles.videoWrapper}>
+                  {(
+                    includesKeyword(videoQuery, videos, "title") as Media[]
+                  ).map((video) => (
+                    <div
+                      className={styles.video}
+                      key={video.id}
+                      onClick={() => setSelected(video)}
+                    >
+                      <div className={styles.thumbnailWrapper}>
+                        <img src={video.thumbnail} alt={video.title} />
+                        <span className={styles.duration}>
+                          {secondsToTimeString(video.duration)}
+                        </span>
+                      </div>
+                      <p className={styles.title}>{video.title}</p>
+                      <div
+                        className={`${styles.selected} ${
+                          selected?.id === video.id ? "active" : ""
+                        }`}
+                      />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        </Modal.Content>
+      </Modal>
+    </>
+  );
+};

package/src/navigation/EditorBar/components/VideoModal/index.ts

@@ -0,0 +1 @@
+export { VideoModal, type VideoModalProps } from "./VideoModal";

package/src/navigation/EditorBar/components/index.ts

@@ -0,0 +1,7 @@
+export { AlignmentDropdown, type AlignmentDropdownProps } from "./AlignmentDropdown";
+export { ButtonModal, type ButtonModalProps } from "./ButtonModal";
+export { FontDropdown, type FontDropdownProps } from "./FontDropdown"
+export { MoreDropdown, type MoreDropdownProps } from "./MoreDropdown";
+export { OutlineDropdown, type OutlineDropdownProps } from "./OutlineDropdown";
+export { TextTypeDropdown, type TextTypeDropdownProps } from "./TextTypeDropdown";
+export { VideoModal, type VideoModalProps } from "./VideoModal";

package/src/navigation/EditorBar/index.ts

@@ -0,0 +1 @@
+export { EditorBar, type EditorBarProps } from "./EditorBar";

package/src/navigation/MenuTabs/MenuTabs.module.scss

@@ -0,0 +1,34 @@
+.tabs {
+    display: flex;
+    
+    ul {
+        display: flex;
+        flex-direction: row;
+        place-items: stretch;
+        gap: 20px;
+
+        li {
+            display: flex;
+            place-items: center;
+            font-size: var(--size-14);
+            font-weight: var(--weight-inter-semibold);
+            letter-spacing: 0.5px;
+            color: var(--color-grey-5);
+            text-transform: uppercase;
+            padding: 0 12px;
+            border-radius: 4px;
+            border-bottom: 4px solid transparent;
+            padding-top: 4px;
+            cursor: pointer;
+
+            &:hover {
+                border-bottom: 4px solid rgba(0, 118, 217, 0.15);
+                background-color: var(--color-grey-10);
+            }
+            &[class~=active] {
+                border-bottom-color: #0076D9;
+                background-color: transparent;
+            }
+        }
+    }
+}

package/src/navigation/MenuTabs/MenuTabs.spec.js

@@ -0,0 +1,36 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import { MenuTabs } from "./MenuTabs";
+
+const generateMockProps = props => ({
+  children: [1, 2, 3].map(number => <p>Tab {number}</p>),
+  onTabClick: jest.fn(),
+  ...props,
+});
+
+describe("Menu Tabs", () => {
+  it("renders the children as options", () => {
+    const props = generateMockProps({});
+    render(<MenuTabs {...props} />);
+    expect(screen.getByText("Tab 1"));
+    expect(screen.getByText("Tab 2"));
+    expect(screen.getByText("Tab 3"));
+  });
+
+  it("renders an active option", () => {
+    const props = generateMockProps({
+      activeItem: 0,
+    });
+    render(<MenuTabs {...props} />);
+    expect(screen.getByText("Tab 1").parentNode).toHaveClass("active");
+  });
+
+  it("calls the onTabClick handler", () => {
+    const props = generateMockProps({});
+    render(<MenuTabs {...props} />);
+    fireEvent.click(screen.getByText("Tab 2"));
+    expect(props.onTabClick).toHaveBeenCalledWith(1);
+  });
+});

package/src/navigation/MenuTabs/MenuTabs.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import tabStyles from "./MenuTabs.module.scss";
+
+export interface MenuTabsProps extends React.PropsWithChildren {
+  tabItems?: Array<React.ReactNode>;
+  activeItem?: number;
+  onTabClick?: (tabIndex: number) => void;
+}
+
+export const MenuTabs = ({
+  children,
+  tabItems,
+  activeItem,
+  onTabClick,
+}: MenuTabsProps) => {
+  const HandleTabClick = (index: number) => {
+    if (onTabClick) {
+      onTabClick(index);
+    }
+  };
+
+  return (
+    <div className={tabStyles.tabs}>
+      <ul>
+        {tabItems &&
+          tabItems.map((tabItem, index) => {
+            return (
+              <li
+                key={index}
+                onClick={() => HandleTabClick(index)}
+                className={activeItem === index ? "active" : ""}
+              >
+                {tabItem}
+              </li>
+            );
+          })}
+        {children &&
+          React.Children.map(children, (tabItem, index) => {
+            return (
+              <li
+                key={index}
+                onClick={() => HandleTabClick(index)}
+                className={activeItem === index ? "active" : ""}
+              >
+                {tabItem}
+              </li>
+            );
+          })}
+      </ul>
+    </div>
+  );
+};

package/src/navigation/MenuTabs/index.ts

@@ -0,0 +1 @@
+export { MenuTabs, type MenuTabsProps } from "./MenuTabs"

package/src/navigation/Navigation/Navigation.module.scss

@@ -0,0 +1,92 @@
+@use "@soul-refiner/styles/mixins";
+
+.primary {
+  @include mixins.flex();
+  width: fit-content;
+  position: sticky;
+  position: -webkit-sticky;
+  max-height: 100vh;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  background-color: #ffffff;
+
+  & > div:first-child {
+    @include mixins.flex($dir: column, $gap: 8px);
+    width: 100px;
+    height: 100vh;
+    padding: 0px 6px;
+
+    & > [class~="logo"] {
+      width: 21px;
+      height: 22px;
+      margin: 36px 33px;
+      box-sizing: padding-box;
+    }
+
+    & > ul {
+      @include mixins.flex($dir: column, $gap: 8px);
+    }
+
+    & > ul:last-of-type {
+      margin-top: auto;
+    }
+
+    [class~="avatar-wrapper"] {
+      background-color: var(--color-grey-10);
+      padding: 12px 34px;
+      margin: 0 -6px;
+      user-select: none;
+
+      & > div > * {
+        img {
+          background-color: #ffffff;
+        }
+      }
+    }
+  }
+}
+
+.item {
+  @include mixins.flex(
+    $dir: column,
+    $gap: 4px,
+    $align: center,
+    $justify: center
+  );
+  width: 88px;
+  height: 56px;
+  padding: 8px 6px;
+  border-radius: 6px;
+  cursor: pointer;
+  user-select: none;
+
+  & > p {
+    @include mixins.font(500, 12px, 16px);
+    color: var(--color-grey-5);
+  }
+
+  &[class~="active"] {
+    background-color: var(--color-blue-4);
+    & > div > svg {
+      fill: #ffffff;
+    }
+    & > p {
+      color: #ffffff;
+    }
+  }
+
+  &:hover:not(&[class~="active"]) {
+    background-color: var(--color-grey-9);
+    & > div > svg {
+      fill: var(--color-blue-3);
+    }
+    & > p {
+      color: var(--color-blue-3);
+    }
+  }
+
+  &:active:not(&[class~="active"]) {
+    background-color: var(--color-blue-9);
+  }
+}