@soul-refiner/design-system 0.0.5 → 0.0.7

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

@@ -1,106 +0,0 @@
-import React from "react";
-import ReactTooltip from "react-tooltip";
-import {
-  Alignment,
-  AlignToolbarButton,
-  getPreventDefaultHandler,
-  isCollapsed,
-  PlateEditor,
-  setAlign,
-  someNode,
-} from "@udecode/plate";
-import {
-  TextAlign,
-  TextAlignCenter,
-  TextAlignJustify,
-  TextAlignLeft,
-  TextAlignRight,
-} from "@soul-refiner/icons/src";
-
-import { Dropdown } from "../../../../actions";
-
-export interface AlignmentDropdownProps {
-  editorRef: PlateEditor;
-  stateEditor: PlateEditor;
-}
-
-export const AlignmentDropdown = ({
-  editorRef,
-  stateEditor,
-}: AlignmentDropdownProps) => {
-  const handleAlign = (event: React.MouseEvent) => {
-    const value = (event.target as HTMLElement)?.getAttribute(
-      "data-value"
-    ) as Alignment | null;
-    if (!value) return;
-    const handler = getPreventDefaultHandler(setAlign, stateEditor, {
-      value,
-    });
-    handler(event);
-  };
-
-  const alignment = (() => {
-    if (!isCollapsed(editorRef?.selection)) {
-      return "multiple-lines";
-    } else if (
-      someNode(editorRef!, { match: { align: "center" } }) ? true : undefined
-    ) {
-      return "center";
-    } else if (
-      someNode(editorRef!, { match: { align: "right" } }) ? true : undefined
-    ) {
-      return "right";
-    } else if (
-      someNode(editorRef!, { match: { align: "justify" } }) ? true : undefined
-    ) {
-      return "justify";
-    } else {
-      return "left";
-    }
-  })();
-
-  return (
-    <Dropdown
-      maintainState={false}
-      onChange={handleAlign}
-      trigger={
-        <div>
-          <ReactTooltip place="top" type="dark" effect="solid" html />
-          <div data-tip="Alignment">
-            <TextAlign
-              as="button"
-              fill={"var(--color-grey-1)"}
-              size={32}
-              iconSize={24}
-            />
-          </div>
-        </div>
-      }
-    >
-      <AlignToolbarButton
-        active={alignment === "left" ? true : undefined}
-        data-value="left"
-        value="left"
-        icon={<TextAlignLeft className="fill" fill="var(--color-grey-1)" />}
-      />
-      <AlignToolbarButton
-        active={alignment === "center" ? true : undefined}
-        data-value="center"
-        value="center"
-        icon={<TextAlignCenter className="fill" fill="var(--color-grey-1)" />}
-      />
-      <AlignToolbarButton
-        active={alignment === "right" ? true : undefined}
-        data-value="right"
-        value="right"
-        icon={<TextAlignRight className="fill" fill="var(--color-grey-1)" />}
-      />
-      <AlignToolbarButton
-        active={alignment === "justify" ? true : undefined}
-        data-value="justify"
-        value="justify"
-        icon={<TextAlignJustify className="fill" fill="var(--color-grey-1)" />}
-      />
-    </Dropdown>
-  );
-};

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

@@ -1 +0,0 @@
-export { AlignmentDropdown, type AlignmentDropdownProps } from "./AlignmentDropdown";

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

@@ -1,85 +0,0 @@
-@use "@soul-refiner/styles/mixins";
-
-.option {
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer {
-  @include mixins.flex($gap: 16px);
-
-  .footerButton {
-    flex-shrink: 0;
-    flex-grow: 1;
-    width: unset !important;
-    height: unset !important;
-    span {
-      flex-shrink: 0;
-      height: min-content;
-      width: max-content;
-    }
-
-    &:first-of-type {
-      outline: 1px solid var(--color-grey-8);
-    }
-  }
-}
-
-.content {
-  @include mixins.flex($dir: column, $gap: 32px, $align: stretch);
-  max-height: 483px;
-  min-width: 615px;
-  padding: 32px 20px 48px 32px;
-  margin-right: 12px;
-  overflow: auto;
-
-  &::-webkit-scrollbar-track {
-    margin: 24px;
-  }
-
-  .selectionWrapper {
-    border: 2px solid var(--color-grey-8);
-    border-radius: 8px;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-
-    &[class~="selected"] {
-      border: 2px solid var(--colorify-blue-3);
-    }
-
-    .selection {
-      @include mixins.flex($gap: 14px);
-      padding: 24px;
-      background-color: #f2f7fd;
-      border-bottom: 1px solid #d1d9e2;
-      border-radius: 8px 8px 0px 0px;
-      cursor: pointer;
-
-      .radio {
-        width: 24px;
-        height: 24px;
-        box-sizing: border-box;
-        border: 1px solid var(--color-grey-8);
-        border-radius: 50%;
-
-        &[class~="selected"] {
-          border: 6px solid var(--color-blue-3);
-        }
-      }
-
-      h3 {
-        @include mixins.font(700, 14px, 21px);
-      }
-
-      p {
-        @include mixins.font(400, 14px, 21px);
-      }
-    }
-
-    .imgWrapper {
-      @include mixins.flex($align: center, $justify: center);
-      padding: 24px;
-    }
-  }
-}

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

@@ -1,314 +0,0 @@
-import React from "react";
-import ReactTooltip from "react-tooltip";
-import { getPluginType, insertNodes, PlateEditor } from "@udecode/plate";
-import {
-  Button as ButtonIcon,
-  Check,
-  CloseThin,
-} from "@soul-refiner/icons/src";
-
-import { Button } from "../../../../actions";
-import { IconHeader } from "../../../../iconography";
-import { Modal } from "../../../../surfaces";
-import {
-  BUTTON_COMMENT,
-  BUTTON_GIFT_SUBSCRIPTION,
-  BUTTON_LINK,
-  BUTTON_SHARE,
-  BUTTON_SHARE_PAGE,
-  BUTTON_SIGNUP,
-  BUTTON_SPECIAL_OFFER,
-  BUTTON_SUBSCRIBE,
-  ELEMENT_BUTTON,
-} from "../../../../editor/common";
-
-import {
-  Comment,
-  GiftSubscription,
-  Link,
-  Share,
-  ShareCommunity,
-  Signup,
-  Special,
-  Subscribe,
-} from "./assets";
-import styles from "./ButtonModal.module.scss";
-
-export interface ButtonModalProps {
-  editorRef: PlateEditor;
-  pageName: string;
-}
-
-type ButtonNode =
-  | typeof BUTTON_COMMENT
-  | typeof BUTTON_GIFT_SUBSCRIPTION
-  | typeof BUTTON_LINK
-  | typeof BUTTON_SHARE
-  | typeof BUTTON_SHARE_PAGE
-  | typeof BUTTON_SIGNUP
-  | typeof BUTTON_SPECIAL_OFFER
-  | typeof BUTTON_SUBSCRIBE;
-
-export const ButtonModal = ({ editorRef, pageName }: ButtonModalProps) => {
-  const [selected, setSelected] = React.useState<ButtonNode>(BUTTON_SUBSCRIBE);
-
-  const handleSubmit = () => {
-    switch (selected) {
-      case BUTTON_COMMENT:
-        insertNodes(editorRef, {
-          type: getPluginType(editorRef, ELEMENT_BUTTON),
-          buttonType: BUTTON_COMMENT,
-          children: [
-            {
-              text: "Leave a comment",
-            },
-          ],
-        });
-        return;
-      case BUTTON_GIFT_SUBSCRIPTION:
-        insertNodes(editorRef, {
-          type: getPluginType(editorRef, ELEMENT_BUTTON),
-          buttonType: BUTTON_GIFT_SUBSCRIPTION,
-          children: [
-            {
-              text: "Gift a subscription",
-            },
-          ],
-        });
-        return;
-      // TODO: BUTTON_LINK
-      // case BUTTON_LINK:
-      //   insertNodes(editorRef, {
-      //     type: getPluginType(editorRef, ELEMENT_BUTTON),
-      //     buttonType: BUTTON_LINK,
-      //     children: [
-      //       {
-      //         text: "Link to a site"
-      //       }
-      //     ]
-      //   });
-      //   return;
-      case BUTTON_SHARE:
-        insertNodes(editorRef, {
-          type: getPluginType(editorRef, ELEMENT_BUTTON),
-          buttonType: BUTTON_SHARE,
-          children: [
-            {
-              text: "Share now",
-            },
-          ],
-        });
-        return;
-      case BUTTON_SHARE_PAGE:
-        const shareText = `Share ${pageName}' page Now`;
-        insertNodes(editorRef, {
-          type: getPluginType(editorRef, ELEMENT_BUTTON),
-          buttonType: BUTTON_SHARE_PAGE,
-          children: [
-            {
-              text: shareText,
-            },
-            {
-              text: "Thanks for reading Soul Refiner! This post is public so feel free to share it.",
-              beforeElement: true,
-            },
-          ],
-        });
-        return;
-      case BUTTON_SPECIAL_OFFER:
-        const specialOfferText = `Share ${pageName}'s page Now`;
-        insertNodes(editorRef, {
-          type: getPluginType(editorRef, ELEMENT_BUTTON),
-          buttonType: BUTTON_SPECIAL_OFFER,
-          children: [
-            {
-              text: specialOfferText,
-            },
-            {
-              text: "Get 20% off when you subscribe before December 25th, 2022",
-              beforeElement: true,
-            },
-          ],
-        });
-        return;
-      case BUTTON_SUBSCRIBE:
-        insertNodes(editorRef, {
-          type: getPluginType(editorRef, ELEMENT_BUTTON),
-          buttonType: BUTTON_SUBSCRIBE,
-          children: [
-            {
-              text: "Subscribe now",
-            },
-          ],
-        });
-        return;
-      case BUTTON_SIGNUP:
-        const subscribeCaptionText = `Thanks for reading ${pageName} Subscribe for free to receive new posts and support our work.`;
-        insertNodes(editorRef, {
-          type: getPluginType(editorRef, ELEMENT_BUTTON),
-          buttonType: BUTTON_SIGNUP,
-          children: [
-            {
-              text: "Signup",
-            },
-            {
-              text: subscribeCaptionText,
-              beforeElement: true,
-            },
-          ],
-        });
-        return;
-    }
-  };
-
-  return (
-    <Modal>
-      <ReactTooltip place="top" type="dark" effect="solid" html />
-      <Modal.Trigger>
-        <span className={styles.option} data-tip="Insert Button">
-          <ButtonIcon fill="var(--color-grey-4)" />
-        </span>
-      </Modal.Trigger>
-      <Modal.Content
-        header={
-          <IconHeader
-            color="blue"
-            icon={<ButtonIcon fill="var(--color-blue-3)" />}
-            title="Insert Button"
-          />
-        }
-        footer={
-          <div className={styles.footer}>
-            <Modal.Dismiss>
-              <Button
-                buttonType="secondary"
-                className={styles.footerButton}
-                icon={<CloseThin />}
-                shape="rectangular"
-              >
-                Cancel
-              </Button>
-            </Modal.Dismiss>
-            <Modal.Dismiss>
-              <Button
-                buttonColor="var(--color-blue-3)"
-                buttonType="primary"
-                className={styles.footerButton}
-                color="#FFFFFF"
-                icon={<Check />}
-                onClick={handleSubmit}
-                shape="rectangular"
-              >
-                Confirm
-              </Button>
-            </Modal.Dismiss>
-          </div>
-        }
-      >
-        <div className={styles.content}>
-          <Selection
-            description="A button encouraging the reader to purchase a paid subscription to your community"
-            name="Subscribe Now"
-            onClick={() => setSelected(BUTTON_SUBSCRIBE)}
-            selected={selected === BUTTON_SUBSCRIBE}
-          >
-            <Subscribe />
-          </Selection>
-          <Selection
-            description="Insert an input to collect email newsletter subscribers"
-            name="Signup for Newsletter"
-            onClick={() => setSelected(BUTTON_SIGNUP)}
-            selected={selected === BUTTON_SIGNUP}
-          >
-            <Signup />
-          </Selection>
-          {/* <Selection 
-            description="A button that links to a URL"
-            name="Link Button"
-            onClick={() => setSelected(BUTTON_LINK)}
-            selected={selected === BUTTON_LINK}
-          >
-            <Link />
-          </Selection> */}
-          <Selection
-            description="A share button to share about this course"
-            name="Share this course"
-            onClick={() => setSelected(BUTTON_SHARE)}
-            selected={selected === BUTTON_SHARE}
-          >
-            <Share />
-          </Selection>
-          <Selection
-            description="A share button to share about your community"
-            name="Share community page"
-            onClick={() => setSelected(BUTTON_SHARE_PAGE)}
-            selected={selected === BUTTON_SHARE_PAGE}
-          >
-            <ShareCommunity />
-          </Selection>
-          <Selection
-            description="Allow readers to comment in this course"
-            name="Leave a comment"
-            onClick={() => setSelected(BUTTON_COMMENT)}
-            selected={selected === BUTTON_COMMENT}
-          >
-            <Comment />
-          </Selection>
-          <Selection
-            description="A button encouraging the reader to purchase a paid subscription to your community for a friend"
-            name="Give a gift subscription"
-            onClick={() => setSelected(BUTTON_GIFT_SUBSCRIPTION)}
-            selected={selected === BUTTON_GIFT_SUBSCRIPTION}
-          >
-            <GiftSubscription />
-          </Selection>
-          <Selection
-            description="Offer a special discount to readers of this course"
-            name="Special Offer"
-            onClick={() => setSelected(BUTTON_SPECIAL_OFFER)}
-            selected={selected === BUTTON_SPECIAL_OFFER}
-          >
-            <Special />
-          </Selection>
-        </div>
-      </Modal.Content>
-    </Modal>
-  );
-};
-
-interface SelectionProps extends React.PropsWithChildren {
-  description: string;
-  name: string;
-  onClick: () => void;
-  selected: boolean;
-}
-
-const Selection = ({
-  children,
-  description,
-  name,
-  onClick,
-  selected,
-}: SelectionProps) => {
-  return (
-    <div
-      className={`${styles.selectionWrapper} ${
-        selected ? "selected" : ""
-      }`.trim()}
-      onClick={onClick}
-    >
-      <div className={styles.selection}>
-        <div
-          className={`${styles.radio} ${
-            selected ? "selected" : "not-selected"
-          }`.trim()}
-        />
-        <div>
-          <h3>{name}</h3>
-          <p>{description}</p>
-        </div>
-      </div>
-      <div className={styles.imgWrapper}>{children}</div>
-    </div>
-  );
-};

package/src/navigation/EditorBar/components/ButtonModal/assets/Comment.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-
-export const Comment = () => (
-  <svg
-    width="168"
-    height="40"
-    viewBox="0 0 168 40"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M0.5 4.9082C0.5 2.69906 2.29086 0.908203 4.5 0.908203H163.5C165.709 0.908203 167.5 2.69906 167.5 4.9082V35.9082C167.5 38.1173 165.709 39.9082 163.5 39.9082H4.5C2.29086 39.9082 0.5 38.1173 0.5 35.9082V4.9082Z"
-      fill="#2393EF"
-    />
-    <text
-      fill="white"
-      style={{ whiteSpace: "pre" }}
-      fontFamily="Inter"
-      fontSize="14"
-      fontWeight="600"
-      letterSpacing="0em"
-    >
-      <tspan x="24.5205" y="25.4991">
-        Leave a comment
-      </tspan>
-    </text>
-  </svg>
-);

package/src/navigation/EditorBar/components/ButtonModal/assets/GiftSubscription.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-
-export const GiftSubscription = () => (
-  <svg
-    width="206"
-    height="40"
-    viewBox="0 0 206 40"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M0 4.9082C0 2.69906 1.79086 0.908203 4 0.908203H202C204.209 0.908203 206 2.69906 206 4.9082V35.9082C206 38.1173 204.209 39.9082 202 39.9082H4C1.79086 39.9082 0 38.1173 0 35.9082V4.9082Z"
-      fill="#2393EF"
-    />
-    <text
-      fill="white"
-      style={{ whiteSpace: "pre" }}
-      fontFamily="Inter"
-      fontSize="14"
-      fontWeight="600"
-      letterSpacing="0em"
-    >
-      <tspan x="24.4961" y="25.4991">
-        Give a gift subscription
-      </tspan>
-    </text>
-  </svg>
-);

package/src/navigation/EditorBar/components/ButtonModal/assets/Link.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-
-export const Link = () => (
-  <svg
-    width="126"
-    height="40"
-    viewBox="0 0 126 40"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M0.5 4.9082C0.5 2.69906 2.29086 0.908203 4.5 0.908203H121.5C123.709 0.908203 125.5 2.69906 125.5 4.9082V35.9082C125.5 38.1173 123.709 39.9082 121.5 39.9082H4.5C2.29086 39.9082 0.5 38.1173 0.5 35.9082V4.9082Z"
-      fill="#2393EF"
-    />
-    <text
-      fill="#F6FBFE"
-      style={{ whiteSpace: "pre" }}
-      fontFamily="Inter"
-      fontSize="14"
-      fontWeight="600"
-      letterSpacing="0em"
-    >
-      <tspan x="24.5615" y="25.4991">
-        Link Button
-      </tspan>
-    </text>
-  </svg>
-);

package/src/navigation/EditorBar/components/ButtonModal/assets/Share.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-
-export const Share = () => (
-  <svg
-    width="88"
-    height="40"
-    viewBox="0 0 88 40"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M0 4.9082C0 2.69906 1.79086 0.908203 4 0.908203H84C86.2091 0.908203 88 2.69906 88 4.9082V35.9082C88 38.1173 86.2091 39.9082 84 39.9082H4C1.79086 39.9082 0 38.1173 0 35.9082V4.9082Z"
-      fill="#2393EF"
-    />
-    <text
-      fill="white"
-      style={{ whiteSpace: "pre" }}
-      fontFamily="Inter"
-      fontSize="14"
-      fontWeight="600"
-      letterSpacing="0em"
-    >
-      <tspan x="24.374" y="25.4991">
-        Share
-      </tspan>
-    </text>
-  </svg>
-);

package/src/navigation/EditorBar/components/ButtonModal/assets/ShareCommunity.tsx

@@ -1,42 +0,0 @@
-import React from "react";
-
-export const ShareCommunity = () => (
-  <svg
-    width="352"
-    height="107"
-    viewBox="0 0 352 107"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <text
-      fill="#4A4F55"
-      style={{ whiteSpace: "pre" }}
-      fontFamily="Inter"
-      fontSize="14"
-      letterSpacing="0em"
-    >
-      <tspan x="8.49228" y="16.4991">
-        Thanks for reading Soul Refiner! This post is public{" "}
-      </tspan>
-      <tspan x="101.878" y="37.4991">
-        so feel free to share it.
-      </tspan>
-    </text>
-    <path
-      d="M66 71.9082C66 69.6991 67.7909 67.9082 70 67.9082H282C284.209 67.9082 286 69.6991 286 71.9082V102.908C286 105.117 284.209 106.908 282 106.908H70C67.7909 106.908 66 105.117 66 102.908V71.9082Z"
-      fill="#2393EF"
-    />
-    <text
-      fill="white"
-      style={{ whiteSpace: "pre" }}
-      fontFamily="Inter"
-      fontSize="14"
-      fontWeight="600"
-      letterSpacing="0em"
-    >
-      <tspan x="90.0381" y="92.4991">
-        Share Soul Refiner&#x2019;s Page
-      </tspan>
-    </text>
-  </svg>
-);