@soul-refiner/design-system 0.0.14 → 0.0.15

package/src/surfaces/Message/Message.spec.js

@@ -0,0 +1,47 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+
+import { Message } from "./Message";
+
+const props = {
+  children: (
+    <>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque laoreet
+        ex quis purus varius, ac porttitor orci rhoncus.
+      </p>
+      <p>Quisque id bibendum leo.</p>
+      <p>
+        Aliquam vel dignissim magna, placerat maximus tortor. Vivamus tempus est
+        et sem blandit sodales.
+      </p>
+    </>
+  ),
+  created: new Date(new Date().getTime() - 700000),
+  fromSelf: false,
+  sender: {
+    id: "12309123",
+    firstName: "Ludwig",
+    lastName: "Wittgenstein",
+    url: "./avatar-male.jpg",
+  },
+};
+
+describe("Message", () => {
+  it("renders the content that was sent", () => {
+    render(<Message {...props} />);
+    expect(screen.getByText("Ludwig Wittgenstein"));
+    expect(
+      screen.getByText(
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque laoreet ex quis purus varius, ac porttitor orci rhoncus."
+      )
+    );
+    expect(screen.getByText("Quisque id bibendum leo."));
+    expect(
+      screen.getByText(
+        "Aliquam vel dignissim magna, placerat maximus tortor. Vivamus tempus est et sem blandit sodales."
+      )
+    );
+  });
+});

package/src/surfaces/Message/Message.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { User } from "@soul-refiner/models";
+import { abbrRelativeTimeString } from "@soul-refiner/utils/src";
+import messageStyles from "./Message.module.scss";
+import { Avatar } from "../../iconography";
+
+export interface MessageProps extends React.PropsWithChildren {
+  created: Date;
+  fromSelf: boolean;
+  sender: User;
+}
+
+export const Message = ({
+  children,
+  created,
+  fromSelf,
+  sender,
+}: MessageProps) => {
+  return (
+    <div
+      className={`${messageStyles.message} ${fromSelf ? "fromSelf" : ""}`}
+      data-testid="message-group"
+    >
+      <Avatar
+        url={sender.url}
+        size={64}
+        subtitle={
+          <span style={{ color: "var(--color-blue-2)" }}>
+            {abbrRelativeTimeString(created)}
+          </span>
+        }
+        textPosition={fromSelf ? "left" : "right"}
+        title={
+          <span style={{ color: "var(--color-blue-2)" }}>
+            {fromSelf ? "You" : `${sender.firstName} ${sender.lastName}`}
+          </span>
+        }
+      />
+      {React.Children.map(children, (child) => (
+        <IndividualMessage fromSelf={fromSelf}>{child}</IndividualMessage>
+      ))}
+    </div>
+  );
+};
+
+interface IndividualMessageProps extends React.PropsWithChildren {
+  fromSelf: boolean;
+}
+
+const IndividualMessage = ({ children, fromSelf }: IndividualMessageProps) => (
+  <div className={`${messageStyles.individual} ${fromSelf ? "fromSelf" : ""}`}>
+    {children}
+  </div>
+);

package/src/surfaces/Message/index.ts

@@ -0,0 +1 @@
+export { Message, type MessageProps } from "./Message";

package/src/surfaces/Modal/Modal.module.scss

@@ -0,0 +1,52 @@
+@use "@soul-refiner/styles/_mixins";
+
+.background {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  width: 100vw;
+  height: 100vh;
+  padding: 0px;
+  margin: 0px;
+  overflow: hidden;
+
+  &[class~="open"] {
+    @include mixins.flex($dir: column, $align: center, $justify: center);
+  }
+
+  &[class~="dark"] {
+    background: radial-gradient(
+      79.02% 79.02% at 50% 0%,
+      rgba(0, 27, 58, 0.8) 0%,
+      rgba(0, 0, 0, 0.8) 100%
+    );
+    backdrop-filter: blur(5px);
+    cursor: pointer;
+  }
+}
+
+.modalcontent {
+  position: absolute;
+  z-index: 101;
+  background-color: #ffffff;
+  box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.15);
+  border-radius: var(--border-radius-small);
+  cursor: initial;
+
+  [class~="header"] {
+    @include mixins.flex($align: center);
+    padding: 16px;
+    border-bottom: 1px solid var(--color-grey-7);
+    & > *:first-child {
+      flex: 1;
+      display: block;
+    }
+  }
+
+  [class~="footer"] {
+    padding: 16px;
+    border-top: 1px solid var(--color-grey-7);
+  }
+}

package/src/surfaces/Modal/Modal.spec.js

@@ -0,0 +1,38 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+import { Button } from "../../actions/Button";
+import { Modal } from "./Modal";
+
+describe("Modal", () => {
+  it("works as expected", () => {
+    render(
+      <Modal>
+        <Modal.Trigger>
+          <Button>Open Modal</Button>
+        </Modal.Trigger>
+        <Modal.Content
+          footer={<Button>Action 1</Button>}
+          header={<h4>This is a header</h4>}
+        >
+          <p>This is the open modal</p>
+          <Modal.Dismiss>
+            <Button>Dismiss</Button>
+          </Modal.Dismiss>
+        </Modal.Content>
+      </Modal>
+    );
+    fireEvent.click(screen.getByText("Open Modal"));
+    const header = screen.getByText("This is a header");
+    const modal = header.parentElement.parentElement.parentElement.parentElement;
+    expect(modal).toHaveStyle(`display: block;`);
+    fireEvent.click(header.parentElement.nextSibling);
+    expect(modal).toHaveClass("closed");
+    fireEvent.click(screen.getByText("Open Modal"));
+    expect(modal).toHaveClass("open");
+    fireEvent.click(screen.getByText("Dismiss"));
+    expect(modal).toHaveClass("closed");
+  });
+})
+

package/src/surfaces/Modal/Modal.tsx

@@ -0,0 +1,131 @@
+import React from "react";
+import { CloseThin } from "@soul-refiner/icons/src";
+import modalStyles from "./Modal.module.scss";
+
+const callAll =
+  (...fns: Function[]) =>
+  (...args: any) =>
+    fns.forEach((fn) => fn && fn(...args));
+
+const ModalContext = React.createContext<
+  [boolean, React.Dispatch<React.SetStateAction<boolean>>]
+>([false, (() => undefined) as React.Dispatch<React.SetStateAction<boolean>>]);
+
+export interface ModalProps extends React.PropsWithChildren {
+  /**
+   * This is to make the Modal a controlled component,
+   * instead of it managing its own state
+   */
+  controlledOpen?: boolean;
+}
+
+const Modal = ({ controlledOpen, ...props }: ModalProps) => {
+  const [open, setOpen] = React.useState(controlledOpen || false);
+
+  React.useEffect(() => {
+    if (controlledOpen !== undefined) {
+      setOpen(controlledOpen);
+    }
+  }, [controlledOpen]);
+
+  return <ModalContext.Provider value={[open, setOpen]} {...props} />;
+};
+
+const ModalTrigger = ({
+  children: child,
+}: {
+  children: React.ReactElement;
+}) => {
+  const [, setOpen] = React.useContext(ModalContext);
+  return (
+    child &&
+    React.cloneElement(child, {
+      onClick: callAll(() => setOpen(true), child.props.onClick),
+    })
+  );
+};
+
+ModalTrigger.displayName = "Modal.Trigger";
+Modal.Trigger = ModalTrigger;
+
+const ModalDismiss = ({
+  children: child,
+  setClosed,
+}: {
+  children: React.ReactElement;
+  setClosed?: () => void;
+}) => {
+  const [, setOpen] = React.useContext(ModalContext);
+  return (
+    child &&
+    React.cloneElement(child, {
+      onClick: callAll(
+        () => setOpen(false),
+        child.props.onClick,
+        () => setClosed && setClosed()
+      ),
+    })
+  );
+};
+
+ModalDismiss.displayName = "Modal.Dismiss";
+Modal.Dismiss = ModalDismiss;
+
+export interface ModalContentProps extends React.PropsWithChildren {
+  backgroundDark?: boolean;
+  footer?: React.ReactElement;
+  header?: React.ReactElement;
+  setClosed?: () => void;
+}
+
+const ModalContent = ({
+  backgroundDark = true,
+  children,
+  footer,
+  header,
+  setClosed,
+  ...props
+}: ModalContentProps) => {
+  const [open, setOpen] = React.useContext(ModalContext);
+
+  const handleOutsideClick = (event: React.MouseEvent) => {
+    if (event.currentTarget != event.target) return;
+    setClosed ? setClosed() : setOpen(false);
+  };
+
+  return (
+    <div
+      className={`${modalStyles.background} ${open ? "open" : "closed"} ${
+        backgroundDark ? "dark" : ""
+      }`}
+      onClick={handleOutsideClick}
+    >
+      <div className={`${modalStyles.modalcontent}`} {...props}>
+        {header && (
+          <div className="header">
+            <div>{header}</div>
+            <Modal.Dismiss setClosed={setClosed}>
+              <CloseThin
+                as="button"
+                iconColor="#FFFFFF"
+                fill="var(--color-grey-3)"
+                iconSize={14}
+                size={24}
+                style={{
+                  borderRadius: "50%",
+                }}
+              />
+            </Modal.Dismiss>
+          </div>
+        )}
+        {children}
+        {footer && <div className="footer">{footer}</div>}
+      </div>
+    </div>
+  );
+};
+
+ModalContent.displayName = "Modal.Content";
+Modal.Content = ModalContent;
+
+export { Modal };

package/src/surfaces/Modal/index.ts

@@ -0,0 +1,5 @@
+export {
+  Modal,
+  type ModalProps,
+  type ModalContentProps,
+} from "./Modal"

package/src/surfaces/Plan/Plan.module.scss

@@ -0,0 +1,79 @@
+.plan {
+    border: 1px solid #7EB7FA;
+    border-radius: var(--border-radius-large);
+    padding: 32px;
+    display: flex;
+    flex-direction: column;
+    place-items: center;
+    gap: 32px;
+    width: 300px;
+    
+    .popular {
+        padding: 4px 16px;
+        background-color: var(--color-blue-9);
+        color: var(--color-blue-3);
+        font-size: var(--size-14);
+        font-weight: var(--weight-inter-bold);
+        transform: translateY(-32px);
+        border-radius: 0 0 var(--border-radius-normal) var(--border-radius-normal);
+    }
+ 
+    .name {
+        font-size: var(--size-20);
+        font-weight: var(--weight-inter-bold);
+        color: var(--color-blue-3);
+    }
+
+    .description {
+        font-size: var(--size-14);
+    }
+
+    .price {
+        font-size: var(--size-32);
+        font-weight: var(--weight-inter-bold);
+        color: var(--color-grey-3);
+    }
+
+    .benefits {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        align-self: stretch;
+    }
+
+    .benefit {
+        display: flex;
+        font-size: var(--size-14);
+        gap: 10px;
+        place-items: center;
+    }
+
+    .benefitIcon {
+        display: inline-flex;
+        background-color: var(--color-purple-3);
+        place-content: center;
+        align-content: center;
+        border-radius: 100%;
+        height: 18px;
+        width: 18px;
+        align-items: center;
+    }
+
+    .annualSavePercent {
+        display: flex;
+        flex-direction: row;
+        align-self: flex-end;
+        width: 50%;
+        place-content: center;
+        padding: 8px 0;
+        color: var(--color-green-5);
+        font-size: var(--size-14);
+        font-weight: var(--weight-inter-semibold);
+    }
+
+    .fluid {
+        display: flex;
+        flex-direction: column;
+        align-self: stretch;
+    }
+}

package/src/surfaces/Plan/Plan.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { Check } from "@soul-refiner/icons/src";
+import planStyles from "./Plan.module.scss";
+import { Button } from "../../actions";
+import { Switch } from "../../actions";
+
+export interface PlanProps {
+  activeSubscription: string;
+  annualPrice: number;
+  monthlyPrice: number;
+  name: string;
+  mostPopular: boolean;
+  description: string;
+  benefits: string[];
+}
+
+export const Plan = ({
+  activeSubscription,
+  annualPrice = 99.99,
+  monthlyPrice = 9.99,
+  name = "Basic",
+  mostPopular = false,
+  description = "Enjoy most features with cheapest plan to get you started right away.",
+  benefits = ["Monthly Extras", "Weekly Extras", "Daily Extras"],
+}: PlanProps) => {
+  const annualSavePercent = Math.round(
+    100 - (Number(annualPrice) / 12 / Number(monthlyPrice)) * 100
+  );
+  return (
+    <div className={planStyles.plan}>
+      {mostPopular && <div className={planStyles.popular}>Most Popular</div>}
+      <div className={planStyles.name}>{name}</div>
+
+      <div className={planStyles.description}>{description}</div>
+
+      <div className={planStyles.price}>
+        $
+        {activeSubscription === "Monthly"
+          ? monthlyPrice.toString()
+          : annualPrice.toString()}
+      </div>
+
+      <div className={planStyles.fluid}>
+        <Switch
+          active={activeSubscription}
+          fluid={true}
+          options={["Monthly", "Annually"]}
+        />
+        <div className={planStyles.annualSavePercent}>
+          <>Save {annualSavePercent}%</>
+        </div>
+      </div>
+
+      <div className={planStyles.benefits}>
+        {benefits.map((benefit, index) => {
+          return (
+            <div className={planStyles.benefit} key={index}>
+              <div className={planStyles.benefitIcon}>
+                <Check size={16} fill="#FFFFFF" />
+              </div>
+              {benefit}
+            </div>
+          );
+        })}
+      </div>
+      <Button
+        buttonColor="var(--color-blue-9)"
+        color="var(--color-blue-3)"
+        fluid={true}
+      >
+        Get Started
+      </Button>
+    </div>
+  );
+};

package/src/surfaces/Plan/index.ts

@@ -0,0 +1 @@
+export { Plan, type PlanProps } from "./Plan";

package/src/surfaces/Post/Post.module.scss

@@ -0,0 +1,46 @@
+@use "@soul-refiner/styles/_mixins";
+
+.post {
+  position: relative;
+  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.08);
+  border-radius: var(--border-radius-large);
+  padding: 16px 24px 24px;
+
+  [class~="post-header"] {
+    @include mixins.flex($justify: space-between);
+    margin: 0px -24px;
+    border-bottom: 1px solid var(--color-grey-9);
+    padding: 16px 24px;
+  }
+
+  [class~="post-content"] {
+    color: var(--color-grey-0);
+    padding: 24px 0px;
+  }
+
+  [class~="children"] {
+    margin: -24px;
+    padding: 24px 0px;
+  }
+
+  [class~="action-bar"] {
+    @include mixins.flex($justify: space-between);
+    padding: 15px 16px;
+    margin: 0px -24px;
+    border-bottom: 1px solid var(--color-grey-9);
+  }
+
+  [class~="comments"] {
+    padding: 24px 48px 0px;
+    margin: 0px -24px;
+    border-bottom: 1px solid var(--color-grey-9);
+  }
+
+  [class~="input-bar"] {
+    @include mixins.flex($gap: 12px);
+    padding: 24px 0px 0px;
+    textarea {
+      flex: 1;
+    }
+  }
+}

package/src/surfaces/Post/Post.spec.js

@@ -0,0 +1,103 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+import { Post } from "./Post";
+
+const generateMockProps = (props) => ({
+  children: <p>Child element</p>,
+  content: "This is the post content",
+  comments: [
+    {
+      commenter: {
+        id: 86,
+        avatar: "https://i.pravatar.cc/33",
+        firstName: "Jose",
+        lastName: "Giraldo",
+        url: "",
+      },
+      content:
+        "Onec euismod, nisl eget consectetur tempor, nisl nunc egestas nisi, euismod aliquam.",
+      created: new Date(),
+      reactions: 3,
+      hasReacted: false,
+      onReact: jest.fn(),
+      onReply: jest.fn(),
+      showReplies: true,
+    },
+  ],
+  created: new Date(),
+  onReact: jest.fn(),
+  onShare: jest.fn(),
+  onComment: jest.fn(),
+  poster: {
+    id: 76,
+    avatar: "https://i.pravatar.cc/64",
+    firstName: "Paul",
+    lastName: "Tillich",
+    url: "https://soulrefiner.com",
+  },
+  reactions: 12,
+  shares: 6,
+  ...props,
+});
+
+describe("Post renders", () => {
+  it("an avatar, the content, the author's name, the date posted, and the children", () => {
+    const props = generateMockProps();
+    render(<Post {...props} />);
+    expect(screen.getByTestId("post-avatar"));
+    expect(screen.getByText("This is the post content"));
+    expect(screen.getByText("Paul Tillich"));
+    expect(screen.getByText("Just now"));
+    expect(screen.getByText("Child element"));
+  });
+
+  it("with likes", () => {
+    const props = generateMockProps();
+    render(<Post {...props} />);
+    expect(screen.getByText("12 Likes"));
+  });
+
+  it("without likes", () => {
+    const props = generateMockProps({
+      reactions: 0,
+    });
+    render(<Post {...props} />);
+    expect(!screen.queryByTestId("likes-wrapper"));
+  });
+
+  it("the comments", () => {
+    const props = generateMockProps();
+    render(<Post {...props} />);
+    const commentButton = screen.getByText("1 Comment");
+    fireEvent.click(commentButton);
+    expect(screen.getByText("Jose Giraldo"));
+  });
+
+  it("an incrementable like count", () => {
+    const props = generateMockProps();
+    render(<Post {...props} />);
+    const likeButton = screen.getByText("12 Likes");
+    fireEvent.click(likeButton);
+    expect(props.onReact).toHaveBeenCalled();
+  });
+
+  it("a working share button", () => {
+    const props = generateMockProps();
+    render(<Post {...props} />);
+    const shareButton = screen.getByText("6 Shares");
+    fireEvent.click(shareButton);
+    expect(props.onShare).toHaveBeenCalled();
+  });
+
+  it("a working comment input", () => {
+    const props = generateMockProps();
+    render(<Post {...props} />);
+    const textarea = screen.getByRole("textbox");
+    fireEvent.change(textarea, { target: { value: "Comment" } });
+    expect(textarea.value).toEqual("Comment");
+    fireEvent.keyDown(textarea, { key: "Enter", code: "Enter", charCode: 13 });
+    expect(props.onComment).toHaveBeenCalledWith("Comment");
+  });
+});