@soul-refiner/design-system 0.0.5 → 0.0.7

package/src/surfaces/Post/Post.tsx

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

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

package/src/surfaces/Post/postHelpers.ts

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

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

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

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

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

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

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

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