@soul-refiner/design-system 0.0.10 → 0.0.12

package/dist/src/editor/plugins/custom/styles/QA.module.scss

@@ -0,0 +1,140 @@
+@use "@soul-refiner/styles/mixins";
+
+.childrenWrapper {
+  padding: 24px;
+  background-color: #ffffff;
+  border-left: 8px solid var(--color-blue-5);
+  border-radius: 8px;
+}
+
+.answersWrapper {
+  textarea {
+    min-height: 54px;
+    padding: 15px 54px 15px 20px;
+    background-color: var(--color-blue-10);
+  }
+
+  .showAnswers {
+    @include mixins.flex($justify: flex-start, $align: center, $gap: 10px);
+    margin: 7px 24px;
+    user-select: none;
+    cursor: pointer;
+
+    p {
+      @include mixins.font(600, 15px, 28px);
+      color: var(--color-grey-6);
+    }
+
+    &:hover {
+      p {
+        color: var(--color-blue-5);
+      }
+      svg {
+        fill: var(--color-blue-5) !important;
+      }
+    }
+  }
+
+  .commentWrapper {
+    margin: 24px 0px 0px 24px;
+  }
+
+  [class~="options"] > div {
+    height: unset;
+    gap: 6px;
+  }
+
+  .inputWrapper {
+    @include mixins.flex($gap: 12px);
+    position: relative;
+    margin: 24px;
+
+    .privacyOption {
+      @include mixins.flex($gap: 7px);
+      max-width: 239px;
+      padding: 6px 12px;
+
+      .radio {
+        width: 16px;
+        height: 16px;
+        box-sizing: border-box;
+        border: 1px solid var(--color-grey-7);
+        border-radius: 50%;
+        flex-shrink: 0;
+
+        &[class~="active"] {
+          border: 4px solid var(--color-blue-5);
+        }
+      }
+      div {
+        .privacyTitle {
+          @include mixins.flex($gap: 6px);
+          p {
+            @include mixins.font(600, 15px, 15px);
+          }
+        }
+
+        & > p {
+          @include mixins.font(500, 10px, 10px);
+          color: var(--color-grey-6);
+        }
+      }
+    }
+
+    & > [class~="dropdown"] {
+      position: absolute;
+      right: 20px;
+      top: calc(50% - 17px);
+    }
+  }
+}
+
+.iconHeader {
+  svg {
+    fill: var(--color-purple-3) !important;
+  }
+}
+
+.friendsModalFooter {
+  @include mixins.flex($gap: 16px);
+
+  button {
+    flex: 1;
+  }
+
+  button:last-of-type > span {
+    color: var(--color-blue-10);
+  }
+}
+
+.friendsModal {
+  padding: 20px 32px 0px;
+
+  & > div:first-of-type {
+    border-radius: 8px !important;
+    & > div {
+      cursor: initial;
+      pointer-events: none;
+    }
+  }
+
+  input {
+    width: 518px !important;
+    padding-right: 24px;
+  }
+
+  .friendsWrapper {
+    @include mixins.flex($dir: column, $gap: 12px);
+    max-height: 328px;
+    padding: 24px 0px 40px;
+
+    .friend {
+      @include mixins.flex($justify: space-between, $align: center);
+      width: 100%;
+      padding: 8px 24px;
+      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+      border-radius: 8px;
+      cursor: pointer;
+    }
+  }
+}

package/dist/src/editor/plugins/custom/styles/Video.module.scss

@@ -0,0 +1,79 @@
+@use "@soul-refiner/styles/mixins";
+
+.wrapper {
+  @include mixins.flex($align: center, $gap: 16px);
+  position: relative;
+  width: fit-content;
+  margin-left: -16px !important;
+
+  .dropdownWrapper {
+    display: none;
+
+    .dropdown > [class~="options"] > * {
+      height: unset !important;
+    }
+
+    button {
+      border-radius: 50%;
+      &:active {
+        background-color: transparent;
+      }
+    }
+
+    .option {
+      @include mixins.flex($align: center, $gap: 16px);
+      height: 32px;
+      padding: 8px 16px;
+      border-radius: 8px;
+    }
+  }
+
+  &:hover {
+    margin-left: -56px !important;
+    .dropdownWrapper {
+      display: block;
+    }
+  }
+
+  .thumbnailWrapper {
+    position: relative;
+    width: fit-content;
+    height: 75px;
+
+    span {
+      position: absolute;
+      left: calc(50% - 12px);
+      top: calc(50% - 12px);
+    }
+
+    img {
+      width: 134px;
+      height: 100%;
+      object-fit: cover;
+      border-radius: 8px;
+    }
+
+    p {
+      @include mixins.font(600, 10px, 15px);
+      display: block;
+      position: absolute;
+      right: 7px;
+      top: calc(100% - 28px);
+      color: #ffffff;
+      padding: 4px;
+      border-radius: 4px;
+      background-color: rgba(0, 0, 0, 0.5);
+      letter-spacing: 0.5px;
+    }
+  }
+
+  h2 {
+    font-size: 24px !important;
+    font-weight: 700 !important;
+    line-height: 24px !important;
+  }
+}
+
+.notEditable {
+  cursor: pointer;
+}

package/dist/src/editor/plugins/custom/video.tsx

@@ -0,0 +1,163 @@
+import React from "react";
+import {
+  createPluginFactory,
+  isEditorReadOnly,
+  useComposedRef,
+} from "@udecode/plate";
+import { secondsToTimeString } from "@soul-refiner/utils/src";
+import {
+  CloseThin,
+  Lock,
+  Play,
+  UnorderedList,
+  Trash,
+  VideoAdd,
+  VideoPlay,
+} from "@soul-refiner/icons/src";
+
+import { ELEMENT_VIDEO, ELEMENT_H2 } from "../../common";
+import { Dropdown } from "../../../actions";
+import { EditorContext } from "../../Editor";
+import { MediaDrawer } from "../../components";
+
+import { DefaultThumbnail } from "./assets";
+import styles from "./styles/Video.module.scss";
+
+type VideoProps = any;
+
+export const Video = ({
+  attributes,
+  className,
+  children,
+  editor,
+  element,
+}: VideoProps) => {
+  const { handleChangeVideo, handleSetVideoSrc, isUserAuthorized } =
+    React.useContext(EditorContext);
+  const {
+    id,
+    captions,
+    created,
+    duration,
+    parentId,
+    source,
+    sample,
+    status,
+    synopsis,
+    thumbnail,
+    title,
+  } = element;
+  const ref = React.useRef<HTMLParagraphElement>(null);
+  const textContent = React.useRef<string>(title);
+  const [open, setOpen] = React.useState(false);
+
+  const _children = React.Children.map(children, (element) => {
+    if (React.isValidElement(element)) {
+      // return React.cloneElement(element, { ...element.props as Record<string, any>, text: { text: (element as React.ReactElement).props.text.text.slice(30) }} as Partial<unknown> & React.Attributes)
+      return element;
+    }
+    return element;
+  });
+
+  const handleDropdown = (event: React.MouseEvent) => {
+    const value = (event.target as HTMLElement)?.getAttribute("data-value");
+    if (!value) return;
+    if (value === "manage-media") {
+      const { children: _, type: __, ...props } = element;
+      setOpen(true);
+    }
+    if (value === "add-to-outline") {
+      /**
+       * TODO: handle outline
+       */
+    }
+  };
+
+  React.useEffect(() => {
+    /**
+     * TODO: Debounce
+     */
+    if (
+      ref.current?.textContent &&
+      ref.current.textContent !== textContent.current
+    ) {
+      handleChangeVideo({
+        id,
+        title: ref.current.textContent,
+      });
+      textContent.current = ref.current.textContent;
+    }
+  }, [ref.current?.textContent]);
+
+  const editable = !isEditorReadOnly(editor);
+
+  return (
+    <div
+      className={`${styles.wrapper} ${className ? className : ""} ${
+        editable ? "" : styles.notEditable
+      }`}
+      onClick={!editable ? () => handleSetVideoSrc(source) : undefined}
+    >
+      <div contentEditable={false}>
+        <MediaDrawer
+          element={element}
+          open={open}
+          toggle={() => setOpen((prev) => !prev)}
+        />
+      </div>
+      <div className={styles.dropdownWrapper} contentEditable={false}>
+        <Dropdown
+          className={styles.dropdown}
+          maintainState={false}
+          onChange={handleDropdown}
+          trigger={
+            <VideoAdd
+              as="button"
+              fill="var(--color-blue-3)"
+              iconSize={21}
+              size={24}
+            />
+          }
+        >
+          <div className={styles.option} data-value="manage-media">
+            <VideoPlay fill="var(--color-grey-3)" iconSize={18} size={24} />
+            <p>Manage Media</p>
+          </div>
+          <div className={styles.option} data-value="add-to-outline">
+            <UnorderedList fill="var(--color-grey-3)" iconSize={18} size={24} />
+            <p>Add to Outline</p>
+          </div>
+        </Dropdown>
+      </div>
+      {(!thumbnail || thumbnail === "" || !duration) && <DefaultThumbnail />}
+      {!!thumbnail && !!duration && (
+        <div contentEditable={false} className={styles.thumbnailWrapper}>
+          <img src={thumbnail} alt="Video thumbnail" />
+          <p>{secondsToTimeString(duration)}</p>
+          {isUserAuthorized && (
+            <Play as="span" fill="#FFFFFF" iconSize={20} size={24} />
+          )}
+          {!isUserAuthorized && (
+            <Lock as="span" fill="#FFFFFF" iconSize={20} size={24} />
+          )}
+        </div>
+      )}
+      <h2 ref={useComposedRef(attributes.ref, ref)}>{_children}</h2>
+    </div>
+  );
+};
+
+export const createVideoPlugin = createPluginFactory({
+  key: ELEMENT_VIDEO,
+  type: ELEMENT_VIDEO,
+  isElement: true,
+  component: Video,
+  then: (editor) => ({
+    inject: {
+      props: {
+        classNames: undefined,
+        validTypes: [ELEMENT_H2],
+      },
+    },
+  }),
+});

package/dist/src/editor/plugins/index.ts

@@ -0,0 +1,18 @@
+export { 
+  createExamplePlugin, 
+  ExampleElement,
+  createFootnotePlugin,
+  Footnote,
+  createButtonsPlugin,
+  Button,
+  createPaywallPlugin,
+  Paywall,
+  exitBreakPlugin,
+  resetBlockTypePlugin,
+  selectOnBackspace,
+  softBreakPlugin,
+} from "./custom";
+export { blocks } from "./blocks";
+export { inline } from "./inline";
+export { marks } from "./marks";
+export { utils } from "./utils";

package/dist/src/editor/plugins/inline.ts

@@ -0,0 +1,46 @@
+import {
+  createAlignPlugin,
+  createIndentPlugin,
+  createLineHeightPlugin,
+  createLinkPlugin,
+  PlateFloatingLink,
+} from "@udecode/plate";
+
+import {
+  ELEMENT_H1,
+  ELEMENT_H2,
+  ELEMENT_H3,
+  ELEMENT_H4,
+  ELEMENT_H5,
+  ELEMENT_H6,
+  ELEMENT_PARAGRAPH,
+} from "../common";
+
+export const inline = [
+  createAlignPlugin({
+    inject: {
+      props: {
+        validTypes: [
+          ELEMENT_PARAGRAPH,
+          ELEMENT_H1,
+          ELEMENT_H2,
+          ELEMENT_H3,
+          ELEMENT_H4,
+          ELEMENT_H5,
+          ELEMENT_H6,
+        ],
+      },
+    },
+  }),
+  createIndentPlugin({
+    inject: {
+      props: {
+        validTypes: [ELEMENT_PARAGRAPH, ELEMENT_H1],
+      },
+    },
+  }),
+  createLineHeightPlugin(),
+  createLinkPlugin({
+    renderAfterEditable: PlateFloatingLink,
+  }),
+];

package/dist/src/editor/plugins/marks.ts

@@ -0,0 +1,25 @@
+import {
+  createBoldPlugin,
+  createCodePlugin,
+  createFontBackgroundColorPlugin,
+  createFontSizePlugin,
+  createFontFamilyPlugin,
+  createItalicPlugin,
+  createStrikethroughPlugin,
+  createSubscriptPlugin,
+  createSuperscriptPlugin,
+  createUnderlinePlugin,
+} from "@udecode/plate";
+
+export const marks = [
+  createBoldPlugin(),
+  createCodePlugin(),
+  createFontBackgroundColorPlugin(),
+  createFontSizePlugin(),
+  createFontFamilyPlugin(),
+  createItalicPlugin(),
+  createStrikethroughPlugin(),
+  createSubscriptPlugin(),
+  createSuperscriptPlugin(),
+  createUnderlinePlugin(),
+];

package/dist/src/editor/plugins/utils.ts

@@ -0,0 +1,22 @@
+import {
+  createExitBreakPlugin,
+  createHistoryPlugin,
+  createResetNodePlugin,
+  createSelectOnBackspacePlugin,
+  createSoftBreakPlugin,
+} from "@udecode/plate";
+
+import {
+  exitBreakPlugin,
+  resetBlockTypePlugin,
+  selectOnBackspace,
+  softBreakPlugin,
+} from "./custom";
+
+export const utils = [
+  createExitBreakPlugin(exitBreakPlugin),
+  createHistoryPlugin(),
+  createResetNodePlugin(resetBlockTypePlugin),
+  createSelectOnBackspacePlugin(selectOnBackspace),
+  createSoftBreakPlugin(softBreakPlugin),
+];

package/dist/src/feedback/Chip/Chip.module.scss

@@ -0,0 +1,23 @@
+@use "@soul-refiner/styles/_mixins";
+
+@mixin fontstyles() {
+  @include mixins.font(700, 14px, 28px);
+  color: var(--color);
+}
+
+.chip {
+  width: fit-content;
+  padding: 4px 16px;
+  background-color: var(--background-color);
+  border-radius: var(--border-radius);
+  @include fontstyles();
+
+  & > * {
+    @include fontstyles();
+  }
+
+  &[class~="disabled"] {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+}

package/dist/src/feedback/Chip/Chip.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import chipStyles from "./Chip.module.scss";
+import { determineTextColor } from "@soul-refiner/utils/src";
+
+export interface ChipProps extends React.PropsWithChildren {
+  chipColor?: string;
+  disabled?: boolean;
+  shape?: "rounded" | "rectangular";
+  style?: React.CSSProperties;
+  type?: "success" | "pending" | "error" | "regular";
+}
+
+export const Chip = ({
+  children,
+  chipColor,
+  disabled,
+  shape = "rounded",
+  style,
+  type = "regular",
+}: ChipProps) => {
+  const backgroundColor = chipColor
+    ? chipColor
+    : type === "success"
+    ? "var(--color-green-9)"
+    : type === "error"
+    ? "var(--color-red-7)"
+    : type === "pending"
+    ? "var(--color-yellow-7)"
+    : "var(--color-blue-8)";
+  const color = chipColor
+    ? determineTextColor(backgroundColor)
+    : type === "success"
+    ? "var(--color-green-3)"
+    : type === "error"
+    ? "var(--color-red-1)"
+    : type === "pending"
+    ? "var(--color-yellow-2)"
+    : "var(--color-blue-2)";
+
+  return (
+    <div
+      className={`${chipStyles.chip} ${type} ${
+        chipColor ? chipColor : ""
+      } ${shape} ${disabled ? "disabled" : ""}`}
+      style={
+        {
+          "--color": color,
+          "--background-color": backgroundColor,
+          "--border-radius":
+            shape === "rounded" ? "100px" : "var(--border-radius-tiny)",
+          ...style,
+        } as React.CSSProperties
+      }
+    >
+      {children}
+    </div>
+  );
+};

package/dist/src/feedback/Chip/index.ts

@@ -0,0 +1 @@
+export { Chip, type ChipProps } from "./Chip";

package/dist/src/feedback/Loader/Loader.module.scss

@@ -0,0 +1,18 @@
+.loader {
+  border: 2px solid transparent;
+  border-radius: 50%;
+  animation: spin .8s linear infinite;
+
+  &[class~=inverse] {
+    border-top-color: transparent !important;
+  }
+
+  &[class~=inline] {
+    display: inline-block;
+  }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

package/dist/src/feedback/Loader/Loader.spec.js

@@ -0,0 +1,18 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+
+
+import { Loader } from "./Loader";
+
+const generateMockProps = props => ({
+  ...props,
+});
+
+describe("Loader renders", () => {
+  it("without crashing", () => {
+    const props = generateMockProps({
+    });
+    render(<Loader {...props} />);
+  });
+})

package/dist/src/feedback/Loader/Loader.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import loaderStyles from "./Loader.module.scss";
+
+export interface LoaderProps {
+  color?: string;
+  inline?: boolean;
+  inverse?: boolean;
+  size?: number;
+  styles?: React.CSSProperties;
+}
+
+export const Loader = ({
+  color = "var(--color-grey-8)",
+  inline,
+  inverse,
+  size = 16,
+  styles,
+}: LoaderProps) => {
+  const additionalStyles = {
+    width: size,
+    height: size,
+    ...styles,
+  };
+
+  const borderWidth =
+    size >= 8
+      ? 1
+      : size > 8 && size <= 24
+      ? 2
+      : size > 32 && size <= 64
+      ? 4
+      : size > 64 && size < 96
+      ? 6
+      : 8;
+
+  additionalStyles.borderWidth = borderWidth;
+
+  if (inverse) {
+    additionalStyles.borderColor = color;
+  } else {
+    additionalStyles.borderColor = "transparent";
+    additionalStyles.borderTopColor = color;
+  }
+
+  return (
+    <div
+      className={`${loaderStyles.loader} ${inline ? "inline" : ""} ${
+        inverse ? "inverse" : ""
+      }`}
+      style={additionalStyles}
+    />
+  );
+};

package/dist/src/feedback/Loader/index.ts

@@ -0,0 +1 @@
+export { Loader, type LoaderProps } from "./Loader";

package/dist/src/feedback/ProgressBar/ProgressBar.module.scss

@@ -0,0 +1,13 @@
+.progressBar {
+    border-radius: 999px;
+    overflow: hidden;
+    height: 7px;
+    display: flex;
+    flex: 1;
+    background-color: var(--color-grey-9);
+
+    .fill {
+        border-radius: 999px;
+        background-color: var(--color-blue-6);
+    }
+}