@soul-refiner/design-system 0.0.5 → 0.0.7

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

@@ -1,51 +0,0 @@
-@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

@@ -1,80 +0,0 @@
-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

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

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

@@ -1,150 +0,0 @@
-@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

@@ -1,163 +0,0 @@
-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

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

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

@@ -1,7 +0,0 @@
-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

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

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

@@ -1,34 +0,0 @@
-.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

@@ -1,36 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

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

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

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