@soul-refiner/design-system 0.0.10 → 0.0.11

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

@@ -0,0 +1,106 @@
+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/dist/src/navigation/EditorBar/components/AlignmentDropdown/index.ts

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

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

@@ -0,0 +1,85 @@
+@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/dist/src/navigation/EditorBar/components/ButtonModal/ButtonModal.tsx

@@ -0,0 +1,314 @@
+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/dist/src/navigation/EditorBar/components/ButtonModal/assets/Comment.tsx

@@ -0,0 +1,28 @@
+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/dist/src/navigation/EditorBar/components/ButtonModal/assets/GiftSubscription.tsx

@@ -0,0 +1,28 @@
+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/dist/src/navigation/EditorBar/components/ButtonModal/assets/Link.tsx

@@ -0,0 +1,28 @@
+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/dist/src/navigation/EditorBar/components/ButtonModal/assets/Share.tsx

@@ -0,0 +1,28 @@
+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/dist/src/navigation/EditorBar/components/ButtonModal/assets/ShareCommunity.tsx

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