@soul-refiner/design-system 0.0.5 → 0.0.7

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

@@ -1,47 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

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

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

@@ -1,52 +0,0 @@
-@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

@@ -1,38 +0,0 @@
-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

@@ -1,131 +0,0 @@
-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

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

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

@@ -1,79 +0,0 @@
-.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

@@ -1,75 +0,0 @@
-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

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

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

@@ -1,46 +0,0 @@
-@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

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