@soul-refiner/design-system 0.0.18 → 0.0.20

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

@@ -1,140 +0,0 @@
-@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/src/editor/plugins/custom/styles/Video.module.scss

@@ -1,79 +0,0 @@
-@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/src/editor/plugins/custom/video.tsx

@@ -1,163 +0,0 @@
-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/src/editor/plugins/index.ts

@@ -1,18 +0,0 @@
-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/src/editor/plugins/inline.ts

@@ -1,46 +0,0 @@
-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/src/editor/plugins/marks.ts

@@ -1,25 +0,0 @@
-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/src/editor/plugins/utils.ts

@@ -1,22 +0,0 @@
-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/src/feedback/Chip/Chip.module.scss

@@ -1,23 +0,0 @@
-@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/src/feedback/Chip/Chip.tsx

@@ -1,58 +0,0 @@
-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/src/feedback/Chip/index.ts

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

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

@@ -1,18 +0,0 @@
-.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/src/feedback/Loader/Loader.spec.js

@@ -1,18 +0,0 @@
-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/src/feedback/Loader/Loader.tsx

@@ -1,53 +0,0 @@
-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/src/feedback/Loader/index.ts

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

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

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