@soul-refiner/design-system 0.0.4 → 0.0.5

package/src/surfaces/Post/Post.tsx

@@ -0,0 +1,185 @@
+import React from "react";
+import postStyles from "./Post.module.scss";
+import { abbrRelativeTimeString } from "@soul-refiner/utils/src";
+import { User } from "@soul-refiner/models";
+import {
+  EllipsisHorizontal,
+  Like,
+  LikeOutline,
+  CommentOutline,
+  ShareOutline,
+} from "@soul-refiner/icons/src";
+import { Comment, CommentProps } from "../Comment";
+import { Avatar } from "../../iconography";
+import { Button } from "../../actions";
+import { PostInput } from "../../inputs";
+import { countComments } from "./postHelpers";
+
+export interface PostProps extends React.PropsWithChildren {
+  comments: CommentProps[];
+  content: string;
+  created: Date;
+  hasReacted: boolean;
+  locked: boolean;
+  onComment: (comment: string) => void;
+  onReact: () => void;
+  onShare: () => void;
+  poster: User;
+  postId: string;
+  reactions: number;
+  shares?: number;
+  userAvatarSrc: string;
+}
+
+export const Post = ({
+  comments,
+  children,
+  content,
+  created,
+  hasReacted,
+  onComment,
+  onReact,
+  onShare,
+  poster,
+  reactions,
+  shares,
+  userAvatarSrc,
+}: PostProps) => {
+  const [comment, setComment] = React.useState("");
+  const [showComments, setShowComments] = React.useState(false);
+
+  const handleShowComments = () => setShowComments((prev) => !prev);
+
+  const handleChange = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    setComment((event.target as HTMLTextAreaElement).value);
+  };
+
+  const handleReplySubmit = (
+    event: React.KeyboardEvent<HTMLTextAreaElement>
+  ) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      onComment(comment);
+      handleShowComments();
+      setComment("");
+    }
+  };
+
+  const commentCount = comments?.length ? countComments(comments) : 0;
+
+  return (
+    <section className={`${postStyles.post}`}>
+      <div className="post-header">
+        <Avatar
+          as="a"
+          data-testid="post-avatar"
+          href=""
+          size={64}
+          title={`${poster.firstName} ${poster.lastName}`}
+          subtitle={abbrRelativeTimeString(created)}
+          url={poster.avatar ? poster.avatar : ""}
+        />
+        <EllipsisHorizontal
+          as="button"
+          size={24}
+          iconSize={19}
+          fill="var(--color-grey-4)"
+        />
+      </div>
+      <p className="body post-content body-large">{content}</p>
+      <div className="children">{children}</div>
+      <div className="action-bar">
+        <Button
+          bold={false}
+          buttonColor="white"
+          color="var(--color-grey-4)"
+          icon={
+            hasReacted ? (
+              <Like iconSize={20} size={21} fill="var(--colorify-blue-3)" />
+            ) : (
+              <LikeOutline
+                iconSize={20}
+                size={21}
+                fill="var(--colorify-blue-3)"
+              />
+            )
+          }
+          onClick={onReact}
+          shape="rectangular"
+          style={
+            {
+              "--hover-color": "var(--color-grey-9)",
+            } as React.CSSProperties
+          }
+          uppercase={false}
+        >
+          {reactions ? reactions + " Likes" : "Like"}
+        </Button>
+        <Button
+          bold={false}
+          buttonColor="white"
+          color="var(--color-grey-4)"
+          icon={
+            <CommentOutline
+              iconSize={16}
+              size={21}
+              fill="var(--colorify-blue-3)"
+            />
+          }
+          onClick={handleShowComments}
+          shape="rectangular"
+          style={
+            {
+              "--hover-color": "var(--color-grey-9)",
+            } as React.CSSProperties
+          }
+          uppercase={false}
+        >
+          {commentCount === 0
+            ? "Comment"
+            : commentCount === 1
+            ? "1 Comment"
+            : commentCount + " Comments"}
+        </Button>
+        <Button
+          bold={false}
+          buttonColor="white"
+          color="var(--color-grey-4)"
+          icon={
+            <ShareOutline
+              iconSize={21}
+              size={21}
+              fill="var(--colorify-blue-3)"
+            />
+          }
+          onClick={onShare}
+          shape="rectangular"
+          style={
+            {
+              "--hover-color": "var(--color-grey-9)",
+            } as React.CSSProperties
+          }
+          uppercase={false}
+        >
+          {shares ? shares + " Shares" : "Share"}
+        </Button>
+      </div>
+      {showComments && !!comments.length && (
+        <div className="comments">
+          {comments.map((comment) => (
+            <Comment key={comment.id} {...comment} />
+          ))}
+        </div>
+      )}
+      <form className="input-bar">
+        <Avatar size={40} url={userAvatarSrc} />
+        <PostInput
+          placeholder="Write a comment"
+          onChange={handleChange}
+          onKeyDown={handleReplySubmit}
+          value={comment}
+        />
+      </form>
+    </section>
+  );
+};

package/src/surfaces/Post/index.ts

@@ -0,0 +1 @@
+export { Post, type PostProps } from "./Post";

package/src/surfaces/Post/postHelpers.ts

@@ -0,0 +1,20 @@
+import { CommentProps } from "../Comment";
+
+export const countComments = (comments: CommentProps[]) => {
+  return comments.reduce((prev: number, current: CommentProps) => {
+    let currentNumber = 1;
+    if (!!current.replies) {
+      currentNumber = currentNumber + current.replies.length;
+    }
+    return prev + currentNumber;
+  }, 0);
+
+  // TODO: recursively return total of all comments
+  // return comments.reduce((prev: number, current: CommentProps) => {
+  //   let currentNumber = 1;
+  //   if (!!current.replies) {
+  //     currentNumber = currentNumber + countComments(current.replies);
+  //   }
+  //   return prev + currentNumber;
+  // }, 0);
+};

package/src/surfaces/ProfileHeader/ProfileHeader.module.scss

@@ -0,0 +1,202 @@
+.header {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    border-radius: var(--border-radius-normal);
+    overflow: hidden;
+    background-color: #FFF;
+    box-shadow: 0 -4px inset #F5F5F5;
+
+
+    .hero {
+        height: 640px;
+        background-color: black;
+        position: relative;
+
+        .heroImage {
+            height: 100%;
+        }
+
+        .editHeroButton {
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            bottom: 20px;
+            right: 20px;
+            background-color: var(--color-grey-7);
+            
+            [class~=icon] {
+                background-color: transparent;
+            }
+
+            & svg {
+                fill: var(--color-grey-2);
+            }
+    
+            [class~=icon] {
+                background-color: transparent;
+            }
+    
+            &:active {
+                color: var(--color-grey-3);
+                & svg {
+                    fill: var(--color-grey-3);
+                }
+            }
+
+            span {
+                display: flex;
+                gap: 8px;
+                place-items: center;
+                place-content: center;
+            }
+        }
+    }
+
+    .details {
+        gap: 16px;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        padding: 0 128px;
+    }
+
+    [class~=headerPadding] {
+        padding-top: 47px;
+    }
+
+    [class~=avatar] {
+        position: absolute;
+        left: 50%;
+        top: 0;
+        background-color: white;
+        border: 4px solid white;
+        height: 175px;
+        width: 175px;
+        border-radius: 100%;
+        transform: translateY(-50%) translateX(-50%);
+    }
+
+    .editAvatarButton {
+        background-color: var(--color-grey-7);
+        width: 40px;
+        height: 40px;
+        border-radius: 100%;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        display: flex;
+        place-items: center;
+        place-content: center;
+        & svg {
+            fill: var(--color-grey-2);
+        }
+
+        [class~=icon] {
+            background-color: transparent;
+        }
+
+        &:active {
+            & svg {
+                fill: var(--color-grey-3);
+            }
+        }
+    }
+
+    .avatar- {
+
+        &profile {
+            max-width: 140px; 
+            max-height: 140px;
+            top: 50%;
+            img {
+                max-height: 100%;
+                max-width: 100%;
+                border-radius: 100%;
+            }
+        }
+
+        &group, &channel {
+            max-width: 175px; 
+            max-height: 175px;
+
+            img {
+                max-height: 100%;
+                max-width: 100%;
+                border-radius: 100%;
+            }
+
+        }
+    }
+
+    .editAvatarButton:hover, .editHeroButton:hover {
+        background-color: var(--color-grey-8);
+    }
+
+    .upper {
+        display: flex;
+        flex-direction: row;
+        place-content: space-between;
+        place-items: flex-end;
+
+        .title {
+            font-size: var(--size-24);
+            color: var(--color-grey-0);
+        }
+
+        .subtitle {
+            font-size: var(--size-16);
+            color: var(--color-grey-6);
+        }
+
+        .stats {
+            display: flex;
+            flex-direction: row;
+            gap: 16px;
+            place-items: center;
+            font-size: var(--size-14);
+            color: var(--color-grey-6);
+        }
+    }
+
+    .lower {
+        border-top: 1px solid #e8e8e8;
+        display: flex;
+        flex-direction: row;
+        place-content: space-between;
+        height: 65px;
+        place-items: stretch;
+        padding-bottom: 4px;
+
+        .actions {
+            display: flex;
+            gap: 16px;
+            place-items: center;
+        }
+    }
+
+    [class~=ctaButton] {
+        background-color: var(--color-blue-3);
+        color: #FFF;
+        font-size: var(--size-14);
+        font-weight: var(--weight-inter-semibold);
+
+        &:hover {
+            background-color: var(--color-blue-2);
+
+            [class~=icon] {
+                background-color: rgba(255 255 255 / 20%);
+            }
+        }
+
+        [class~=icon] {
+            background-color: rgba(255 255 255 / 20%);
+
+            &>svg {
+                fill: #FFF;
+            }
+        }
+    }
+
+        
+}

package/src/surfaces/ProfileHeader/ProfileHeader.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+import { Camera } from "@soul-refiner/icons/src";
+import headerStyles from "./ProfileHeader.module.scss";
+import { MenuTabs } from "../../navigation/MenuTabs";
+import { Button } from "../../actions";
+
+export interface ProfileHeaderProps {
+  avatarUrl: string;
+  heroUrl: string;
+  title: string;
+  subtitle: string;
+  isOwner: boolean;
+  menuItems: Array<React.ReactNode>;
+  activeMenuItem: number;
+  actionItems?: React.ReactNode;
+  statItems?: React.ReactNode;
+  onChangeAvatar: () => void;
+  onChangeHero: () => void;
+  onTabClick: (index: number) => void;
+  headerType: "group" | "channel" | "profile" | "course";
+}
+
+export const ProfileHeader = ({
+  avatarUrl,
+  heroUrl,
+  title = "John Doe",
+  subtitle = "Subtitle",
+  isOwner = false,
+  headerType = "group",
+  menuItems = [],
+  activeMenuItem = 0,
+  actionItems,
+  statItems,
+  onChangeAvatar,
+  onChangeHero,
+  onTabClick,
+}: ProfileHeaderProps) => {
+  return (
+    <div className={`${headerStyles.header}`}>
+      {headerType !== "course" && headerType !== "profile" && (
+        <div className={headerStyles.hero}>
+          <img src={heroUrl} className={headerStyles.heroImage} />
+          {isOwner && (
+            <Button
+              className={headerStyles.editHeroButton}
+              onClick={onChangeHero}
+              color="var(--color-grey-0)"
+              uppercase={false}
+            >
+              <Camera
+                fill="var(--color-grey-1)"
+                iconSize={21}
+                size={21}
+                inline={true}
+                style={{ margin: 0 }}
+              />{" "}
+              Edit
+            </Button>
+          )}
+        </div>
+      )}
+      <div className={headerStyles.details}>
+        {headerType !== "course" && (
+          <>
+            <div className={`${headerStyles[`avatar-${headerType}`]} avatar`}>
+              <img src={avatarUrl} />
+              {isOwner && (
+                <Button
+                  className={headerStyles.editAvatarButton}
+                  onClick={onChangeAvatar}
+                  padded={false}
+                >
+                  <Camera
+                    fill="var(--color-grey-1)"
+                    iconSize={21}
+                    size={21}
+                    style={{ margin: 0 }}
+                  />
+                </Button>
+              )}
+            </div>
+
+            <div className={`${headerStyles.upper} headerPadding`}>
+              <div className={headerStyles.titles}>
+                <div className={headerStyles.title}>{title}</div>
+                <div className={headerStyles.subtitle}>{subtitle}</div>
+              </div>
+              <div className={headerStyles.stats}>{statItems}</div>
+            </div>
+          </>
+        )}
+        <div className={headerStyles.lower}>
+          <MenuTabs
+            activeItem={activeMenuItem}
+            onTabClick={onTabClick}
+            tabItems={menuItems}
+          />
+          <div className={headerStyles.actions}>{actionItems}</div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/surfaces/ProfileHeader/index.ts

@@ -0,0 +1 @@
+export { ProfileHeader, type ProfileHeaderProps } from "./ProfileHeader";

package/src/surfaces/RatingsOverview/RatingsOverview.module.scss

@@ -0,0 +1,54 @@
+.ratingsOverview {
+
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    [class~=upper] {
+        display: flex;
+        flex-direction: column;
+        place-items: center;
+        gap: 10px;
+
+        &>div {
+            color: var(--color-grey-3);
+            font-weight: var(--weight-inter-bold);
+            
+            &:first-child {
+                font-size: 3.8em;  
+            }
+
+            &:last-child {
+                font-size: var(--size-16);
+            }
+        }
+    }
+
+    .ratingElement {
+        display: flex;
+        flex-direction: row;
+        gap: 16px;
+        flex: 1;
+        place-items: center;
+
+        .stat, .statPercent {
+            font-size: var(--size-18);
+            font-weight: var(--weight-inter-bold);
+            color: var(--color-grey-5);
+        }
+
+        [class~=rating] {
+            display: flex;
+            place-items: center;
+            width: 40px;
+            justify-content: space-between;            
+        }
+
+        .statPercent {
+            font-size: var(--size-16);
+            place-content: flex-end;
+            width: 40px;
+            display: flex;
+        }
+    }
+}

package/src/surfaces/RatingsOverview/RatingsOverview.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { Star } from "@soul-refiner/icons/src";
+import ratingsStyle from "./RatingsOverview.module.scss";
+import { StarRating } from "../../iconography";
+import { ProgressBar } from "../../feedback";
+import { Button } from "../../actions";
+
+export interface RatingsOverviewProps {
+  rating: number;
+  reviewCount: number;
+  stars: RatingInterface;
+  onWriteReview: () => void;
+}
+
+export interface RatingInterface {
+  one: number;
+  two: number;
+  three: number;
+  four: number;
+  five: number;
+}
+
+export const RatingElement = (rating: number, percent: number) => {
+  return (
+    <div className={ratingsStyle.ratingElement}>
+      <div className="rating">
+        <div className={ratingsStyle.stat}>{rating}</div>
+        <div>
+          <Star fill="#D5A806" />
+        </div>
+      </div>
+
+      <ProgressBar color="var(--color-yellow-4)" percent={percent} />
+
+      <div className={ratingsStyle.statPercent}>{percent}%</div>
+    </div>
+  );
+};
+
+export const RatingsOverview = ({
+  rating = 4,
+  reviewCount = 4,
+  stars = { one: 1, two: 0, three: 0, four: 0, five: 50 },
+  onWriteReview = () => {
+    alert("On Write Review");
+  },
+}: RatingsOverviewProps) => {
+  return (
+    <div className={ratingsStyle.ratingsOverview}>
+      <div className="upper">
+        <div>{rating}</div>
+        <div>
+          <StarRating rating={rating} width={147} />
+        </div>
+        <div>{reviewCount} reviews</div>
+      </div>
+      <div>
+        <div>{RatingElement(5, stars.five)}</div>
+        <div>{RatingElement(4, stars.four)}</div>
+        <div>{RatingElement(3, stars.three)}</div>
+        <div>{RatingElement(2, stars.two)}</div>
+        <div>{RatingElement(1, stars.one)}</div>
+      </div>
+      <Button buttonType="secondary" onClick={onWriteReview} fluid={true}>
+        Write a review
+      </Button>
+    </div>
+  );
+};

package/src/surfaces/RatingsOverview/index.ts

@@ -0,0 +1 @@
+export { RatingsOverview, type RatingsOverviewProps } from "./RatingsOverview";