diff --git a/CHANGELOG.md b/CHANGELOG.md index 31ef3159fe..72635dcb15 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,27 @@ > All notable changes to this project will be documented in this file +## [1.58.0-beta.3](https://github.com/open-sauced/insights/compare/v1.58.0-beta.2...v1.58.0-beta.3) (2023-07-31) + + +### πŸ› Bug Fixes + +* improve layout design for large screens [#1231](https://github.com/open-sauced/insights/issues/1231) ([#1437](https://github.com/open-sauced/insights/issues/1437)) ([d8ae808](https://github.com/open-sauced/insights/commit/d8ae8088b5b0e62f8ea63dfa8c7863db16cd7014)) + +## [1.58.0-beta.2](https://github.com/open-sauced/insights/compare/v1.58.0-beta.1...v1.58.0-beta.2) (2023-07-31) + + +### πŸ• Features + +* new contributor highlight card ([#1443](https://github.com/open-sauced/insights/issues/1443)) ([c88000b](https://github.com/open-sauced/insights/commit/c88000b3b7474ec302ea796083294dc373fbd2b8)) + +## [1.58.0-beta.1](https://github.com/open-sauced/insights/compare/v1.57.1-beta.10...v1.58.0-beta.1) (2023-07-31) + + +### πŸ• Features + +* add devcard button to user profile ([#1339](https://github.com/open-sauced/insights/issues/1339)) ([6a1dbdc](https://github.com/open-sauced/insights/commit/6a1dbdce4aa520c463f9771af57cf8ec16d312e8)) + ### [1.57.1-beta.10](https://github.com/open-sauced/insights/compare/v1.57.1-beta.9...v1.57.1-beta.10) (2023-07-27) diff --git a/components/molecules/ContributorHighlight/contributor-highlight-card.tsx b/components/molecules/ContributorHighlight/contributor-highlight-card.tsx index f072484f92..d3f5f37702 100644 --- a/components/molecules/ContributorHighlight/contributor-highlight-card.tsx +++ b/components/molecules/ContributorHighlight/contributor-highlight-card.tsx @@ -1,14 +1,17 @@ import React, { useState, useEffect } from "react"; import { HiOutlineEmojiHappy } from "react-icons/hi"; import { TfiMoreAlt } from "react-icons/tfi"; -import { FiEdit, FiLinkedin, FiTwitter } from "react-icons/fi"; -import { BsCalendar2Event, BsLink45Deg } from "react-icons/bs"; +import { FiEdit, FiLinkedin } from "react-icons/fi"; +import { BsCalendar2Event, BsLink45Deg, BsTwitter } from "react-icons/bs"; import { GrFlag } from "react-icons/gr"; import Emoji from "react-emoji-render"; import { usePostHog } from "posthog-js/react"; import { MdError } from "react-icons/md"; import { format } from "date-fns"; import { FaUserPlus } from "react-icons/fa"; +import { BiGitPullRequest } from "react-icons/bi"; +import { VscIssues } from "react-icons/vsc"; +import clsx from "clsx"; import Title from "components/atoms/Typography/title"; import { Textarea } from "components/atoms/Textarea/text-area"; @@ -21,7 +24,7 @@ import { } from "components/atoms/Dropdown/dropdown"; import useSupabaseAuth from "lib/hooks/useSupabaseAuth"; -import { generateApiPrUrl } from "lib/utils/github"; +import { generateApiPrUrl, getAvatarByUsername, getOwnerAndRepoNameFromUrl } from "lib/utils/github"; import { fetchGithubPRInfo } from "lib/hooks/fetchGithubPRInfo"; import { updateHighlights } from "lib/hooks/updateHighlight"; import { deleteHighlight } from "lib/hooks/deleteHighlight"; @@ -51,6 +54,7 @@ import { } from "../AlertDialog/alert-dialog"; import { Popover, PopoverContent, PopoverTrigger } from "../Popover/popover"; import { Calendar } from "../Calendar/calendar"; +import CardRepoList, { RepoList } from "../CardRepoList/card-repo-list"; interface ContributorHighlightCardProps { title?: string; @@ -61,7 +65,9 @@ interface ContributorHighlightCardProps { shipped_date: string; refreshCallBack?: () => void; emojis: DbEmojis[]; + type?: HighlightType; } +type HighlightType = "pull_request" | "issue" | "blog"; const ContributorHighlightCard = ({ title, @@ -71,6 +77,7 @@ const ContributorHighlightCard = ({ id, refreshCallBack, emojis, + type = "pull_request", shipped_date, }: ContributorHighlightCardProps) => { const { toast } = useToast(); @@ -151,6 +158,50 @@ const ContributorHighlightCard = ({ } }; + const { owner: repoOwner, repoName } = getOwnerAndRepoNameFromUrl(prLink); + const repoIcon = getAvatarByUsername(repoOwner, 60); + + const repo: RepoList = { + repoIcon, + repoName, + repoOwner, + }; + + const getHighlightTypePreset = (type: HighlightType): { text: string; icon?: React.ReactElement } => { + switch (type) { + case "pull_request": + return { text: "Pull request", icon: }; + case "blog": + return { + text: "Blog post", + icon: ( + // Used svg as i could not find the exact icon in react-icons + + + + ), + }; + case "issue": + return { text: "Issue", icon: }; + + default: + return { text: "Pull request", icon: }; + } + }; + + const { icon, text } = getHighlightTypePreset(type); + const handleUpdateHighlight = async (e: React.FormEvent) => { e.preventDefault(); @@ -221,6 +272,10 @@ const ContributorHighlightCard = ({ return (
+
+ {icon} + {getHighlightTypePreset(type).text} +
diff --git a/components/molecules/ContributorProfileHeader/contributor-profile-header.tsx b/components/molecules/ContributorProfileHeader/contributor-profile-header.tsx index 95b91e8dee..76428333ea 100644 --- a/components/molecules/ContributorProfileHeader/contributor-profile-header.tsx +++ b/components/molecules/ContributorProfileHeader/contributor-profile-header.tsx @@ -3,6 +3,7 @@ import { useRouter } from "next/router"; import Image from "next/image"; import { TfiMoreAlt } from "react-icons/tfi"; import { FiCopy } from "react-icons/fi"; +import { FaIdCard } from "react-icons/fa"; import { SignInWithOAuthCredentials, User } from "@supabase/supabase-js"; import { usePostHog } from "posthog-js/react"; @@ -19,6 +20,7 @@ import { import { useUserCollaborations } from "lib/hooks/useUserCollaborations"; import { useToast } from "lib/hooks/useToast"; +import { cardPageUrl } from "lib/utils/urls"; import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../Dialog/dialog"; interface ContributorProfileHeaderProps { @@ -144,7 +146,10 @@ const ContributorProfileHeader = ({ {/* Mobile dropdown menu */} -
+
+
{/* Column: Contributors */} -
+
{contributorData.length! > 0 ? : "-"} {contributorData.length! > 5 ?
 {`+${contributorData.length - 5}`}
: ""}
{/* Column: Last 30 Days */} -
+
{repo.id && last30days ? : "-"}
diff --git a/components/organisms/Repositories/repositories.tsx b/components/organisms/Repositories/repositories.tsx index 7dda5a5c70..8ea2f01b59 100644 --- a/components/organisms/Repositories/repositories.tsx +++ b/components/organisms/Repositories/repositories.tsx @@ -102,7 +102,7 @@ const Repositories = ({ repositories }: RepositoriesProps): JSX.Element => { title="Repositories" />
-
+
Repository @@ -133,10 +133,10 @@ const Repositories = ({ repositories }: RepositoriesProps): JSX.Element => {
SPAM
-
+
Contributors
-
+
Last 30 Days
diff --git a/lib/utils/github.ts b/lib/utils/github.ts index 689d01e06a..59a896c8ed 100644 --- a/lib/utils/github.ts +++ b/lib/utils/github.ts @@ -90,8 +90,15 @@ const isValidPullRequestUrl = (url: string): boolean => { return url.match(/((https?:\/\/)?(www\.)?github\.com\/[^\/]+\/[^\/]+\/pull\/[0-9]+)/) ? true : false; }; +const getOwnerAndRepoNameFromUrl = (url: string): { owner: string; repoName: string } => { + const [, , , owner, repoName] = url.split("/"); + + return { owner, repoName }; +}; + export { getAvatarById, + getOwnerAndRepoNameFromUrl, getAvatarByUsername, getProfileLink, getRepoIssuesLink, diff --git a/lib/utils/urls.ts b/lib/utils/urls.ts index ad86a77fef..cbeea8284a 100644 --- a/lib/utils/urls.ts +++ b/lib/utils/urls.ts @@ -1,5 +1,5 @@ export const siteUrl = (path: string = "") => { - let url = process.env.NEXT_PUBLIC_BASE_URL || "/"; + let url = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000/"; // Make sure to include `https://` when not localhost. url = url.includes("http") ? url : `https://${url}`; // Make sure to including trailing `/`. diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index 6cde4eabf5..4f9e4c63f9 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -1,12 +1,12 @@ { "name": "@open-sauced/insights", - "version": "1.57.1-beta.10", + "version": "1.58.0-beta.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@open-sauced/insights", - "version": "1.57.1-beta.10", + "version": "1.58.0-beta.3", "hasInstallScript": true, "license": "Apache 2.0", "dependencies": { diff --git a/package.json b/package.json index 86fc22210e..7eca2f88e9 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@open-sauced/insights", "description": "πŸ•The dashboard for open source discovery.", "keywords": [], - "version": "1.57.1-beta.10", + "version": "1.58.0-beta.3", "author": "Brian Douglas ", "private": true, "license": "Apache 2.0", diff --git a/stories/molecules/contributor-highlight-card.stories.tsx b/stories/molecules/contributor-highlight-card.stories.tsx new file mode 100644 index 0000000000..f36a4796d0 --- /dev/null +++ b/stories/molecules/contributor-highlight-card.stories.tsx @@ -0,0 +1,93 @@ +import { TooltipProvider } from "@radix-ui/react-tooltip"; +import { Meta, StoryFn } from "@storybook/react"; +import ContributorHighlightCard from "components/molecules/ContributorHighlight/contributor-highlight-card"; + +export default { + title: "Design System/Molecules/ContributorHighlightCard", +} as Meta; + +const Template: StoryFn = (args) => ( + + + +); + +export const Default = Template.bind({}); +export const PullRequest = Template.bind({}); +export const Issue = Template.bind({}); +export const BlogPost = Template.bind({}); + +Default.args = { + title: "Contributor Highlight", + desc: "This is a description", + user: "bdougie", + prLink: "https://github.com/open-sauced/insights/pull/1", + shipped_date: "2023-01-19 13:24:51.000000", + emojis: [ + { + name: "100", + url: "https://github.githubassets.com/images/icons/emoji/unicode/1f4af.png?v8", + display_order: 1, + id: "2", + created_at: "", + updated_at: "", + }, + ], +}; + +PullRequest.args = { + title: "Contributor Highlight", + desc: "This is a description", + user: "bdougie", + prLink: "https://github.com/open-sauced/insights/pull/1", + shipped_date: "2023-01-19 13:24:51.000000", + emojis: [ + { + name: "100", + url: "https://github.githubassets.com/images/icons/emoji/unicode/1f4af.png?v8", + display_order: 3, + id: "4", + created_at: "", + updated_at: "", + }, + ], + type: "pull_request", +}; + +Issue.args = { + title: "Contributor Highlight", + desc: "This is a description", + user: "bdougie", + prLink: "https://github.com/open-sauced/insights/pull/1", + shipped_date: "2023-01-19 13:24:51.000000", + emojis: [ + { + name: "100", + url: "https://github.githubassets.com/images/icons/emoji/unicode/1f4af.png?v8", + display_order: 3, + id: "4", + created_at: "", + updated_at: "", + }, + ], + type: "issue", +}; + +BlogPost.args = { + title: "Contributor Highlight", + desc: "This is a description", + user: "bdougie", + prLink: "https://github.com/open-sauced/insights/pull/1", + shipped_date: "2023-01-19 13:24:51.000000", + emojis: [ + { + name: "100", + url: "https://github.githubassets.com/images/icons/emoji/unicode/1f4af.png?v8", + display_order: 3, + id: "4", + created_at: "", + updated_at: "", + }, + ], + type: "blog", +};