feat: create list feature

components/atoms/FilterChip/filter-chip.tsx

@@ -0,0 +1,25 @@
+import clsx from "clsx";
+import React from "react";
+import { MdClose } from "react-icons/md";
+
+interface FilterChipProps {
+  className?: string;
+  items: string[];
+  onClear: () => void;
+}
+const FilterChip = ({ className, items, onClear }: FilterChipProps) => {
+  return (
+    <div
+      className={clsx(
+        "p-2.5 rounded-xl bg-sauced-light w-max text-sauced-orange max-w-[12.5rem] flex items-center",
+        className
+      )}
+    >
+      <span className="max-w-[75%] truncate">{items[0]}</span>
+      {items.length > 1 && <span className="text-sauced-orange"> ,+{items.length - 1}</span>}
+      <MdClose onClick={onClear} className="ml-1 text-2xl" />
+    </div>
+  );
+};
+
+export default FilterChip;

components/atoms/ListNameHeader/list-name-header.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import { HiPencil } from "react-icons/hi";
 import clsx from "clsx";
 
@@ -9,36 +9,54 @@ interface ListNameHeaderProps {
   onEditTitle?: (value: string) => void;
 }
 const ListNameHeader = ({ title, onEditTitle }: ListNameHeaderProps) => {
-  const ref = useRef<HTMLSpanElement>(null);
+  const ref = useRef<HTMLInputElement>(null);
+  const [focused, setFocused] = useState(false);
 
   const handleFocus = () => {
-    ref.current?.focus();
-    // select all text in the span... this is a hacky way to do it and not sure if it's the best way
-    document.execCommand("selectAll", false, undefined);
+    ref?.current?.focus();
   };
 
   return (
     <div>
       <Title className="text-base text-sauced-orange">New List</Title>
       <div className="flex items-center gap-3">
-        {/* Using a span to mimic an input because native inputs can't auto grow in width relative to it's content
-         ** https://css-tricks.com/auto-growing-inputs-textareas/
-         */}
-        <span
-          ref={ref}
-          onInput={(e) => {
-            onEditTitle && onEditTitle(e.currentTarget.textContent ?? "");
-          }}
-          suppressContentEditableWarning
-          className={clsx("text-3xl auto-grow-input text-gray-300 focus:outline-none cursor-text")}
-          role="text-box"
-          contentEditable
-        >
-          {title}
-        </span>
-        <button onClick={handleFocus} type="button">
-          <HiPencil className="text-xl" />
-        </button>
+        <div className="relative text-3xl w-max">
+          <input
+            ref={ref}
+            onChange={(e) => {
+              onEditTitle?.(e.target.value);
+            }}
+            onBlur={() => {
+              setFocused(false);
+            }}
+            onFocus={(e) => {
+              setFocused(true);
+              e.target.select();
+            }}
+            autoFocus
+            value={title}
+            type="text"
+            placeholder="List Name"
+            className={clsx(
+              "text-3xl w-40 bg-transparent text-light-slate-12 focus:outline-none cursor-text",
+              !focused && "!text-white"
+            )}
+          />
+          <span className={clsx("absolute left-0 w-max", focused && "invisible")}>
+            {title}
+
+            {title && title.length > 0 && (
+              <button onClick={handleFocus} type="button">
+                <HiPencil className="ml-2 text-xl" />
+              </button>
+            )}
+          </span>
+        </div>
+        {!focused && !title && (
+          <button onClick={handleFocus} type="button">
+            <HiPencil className="ml-2 text-xl" />
+          </button>
+        )}
       </div>
     </div>
   );

components/atoms/ToggleSwitch/toggle-switch.tsx

@@ -26,7 +26,7 @@ const ToggleSwitch = ({
         classNames ?? classNames,
         checked && "!bg-light-orange-10 justify-end",
         "flex rounded-2xl p-[2px] transition overflow-hidden bg-light-slate-8",
-        size === "lg" ? "w-14 h-[30px]" : size === "base" ? "w-11 h-6" : size === "sm" ? "w-7 h-4" : ""
+        size === "lg" ? "w-14 h-[30px]" : size === "base" ? "w-10 h-5" : size === "sm" ? "w-7 h-4" : ""
       )}
     >
       <Switch.Thumb className={clsx("bg-white block rounded-2xl  h-full w-1/2")} />

components/molecules/ComponentDateFilter/component-date-filter.tsx

@@ -20,21 +20,18 @@ const ComponentDateFilter = ({ setRangeFilter, defaultRange }: ComponentDateFilt
   };
 
   return (
-    <div className="flex text-sm gap-4 items-center">
-      <span>Date filter:</span>
-      <div className="flex items-center">
-        {dates.map((range, index) => (
-          <div
-            onClick={() => handleFilterClick(range)}
-            className={`px-2 py-1  rounded-lg cursor-pointer transition text-light-slate-9 ${
-              activeFilter === range && "border text-light-slate-12 border-light-orange-10"
-            }`}
-            key={index}
-          >
-            {rangeFormatter(range)}
-          </div>
-        ))}
-      </div>
+    <div className="flex items-center text-sm bg-white rounded-lg">
+      {dates.map((range, index) => (
+        <div
+          onClick={() => handleFilterClick(range)}
+          className={`px-4 py-1.5 rounded-lg cursor-pointer transition text-light-slate-9 ${
+            activeFilter === range && "border text-light-slate-12 bg-light-slate-5"
+          }`}
+          key={index}
+        >
+          {rangeFormatter(range)}
+        </div>
+      ))}
     </div>
   );
 };

components/molecules/ContributorListTableHeader/contributor-list-table-header.tsx

@@ -2,13 +2,26 @@ import clsx from "clsx";
 import React from "react";
 import TableTitle from "components/atoms/TableTitle/table-title";
 import { classNames } from "components/organisms/RepositoriesTable/repositories-table";
+import Checkbox from "components/atoms/Checkbox/checkbox";
 
-const ContributorListTableHeaders = () => {
+interface ContributorListTableHeadersProps {
+  selected?: boolean;
+  handleOnSelectAllContributor?: (contributor: any) => void;
+}
+
+const ContributorListTableHeaders = ({ selected, handleOnSelectAllContributor }: ContributorListTableHeadersProps) => {
   return (
     <div className="mt-4">
       {/* Mobile */}
-      <div className="flex justify-between gap-2 px-6 py-4 rounded-t-lg md:hidden bg-light-slate-3">
-        <div className="w-[58%]">
+      <div className="flex justify-between gap-2 px-2 py-4 rounded-t-lg md:hidden bg-light-slate-3">
+        {handleOnSelectAllContributor && (
+          <Checkbox
+            checked={selected ? true : false}
+            onCheckedChange={handleOnSelectAllContributor}
+            className={`${"border-orange-500 hover:bg-orange-600"}`}
+          />
+        )}
+        <div className="w-[50%]">
           <TableTitle>Contributor</TableTitle>
         </div>
         <div className="flex-1 w-[42%]">
@@ -17,23 +30,30 @@ const ContributorListTableHeaders = () => {
       </div>
       {/* Desktop */}
       <div className="hidden gap-6 px-6 py-4 border rounded-t-lg md:flex bg-light-slate-3">
-        <div className={clsx("flex-1 lg:min-w-[250px]  flex justify-center")}>
+        {handleOnSelectAllContributor && (
+          <Checkbox
+            checked={selected ? true : false}
+            onCheckedChange={handleOnSelectAllContributor}
+            className={`${"border-orange-500 hover:bg-orange-600"}`}
+          />
+        )}
+        <div className={clsx("flex-1 lg:min-w-[12.5rem]  flex justify-center")}>
           <TableTitle>Contributor</TableTitle>
         </div>
-        <div className={clsx(" flex-1 lg:max-w-[100px]   flex justify-center ")}>
+        <div className={clsx(" flex-1 lg:max-w-[6.25rem]   flex justify-center ")}>
           <TableTitle>Act</TableTitle>
         </div>
-        <div className={clsx("flex-1 lg:max-w-[100px]  ")}>
+        <div className={clsx("flex-1 lg:max-w-[6.25rem]  ")}>
           <TableTitle>Repositories</TableTitle>
         </div>
-        <div className={clsx("flex-1 lg:max-w-[130px]  ")}>
+        <div className={clsx("flex-1 lg:max-w-[8.1rem]  ")}>
           <TableTitle>Last Contributed</TableTitle>
         </div>
-        <div className={clsx(" flex flex-1 justify-center    max-w-[120px]")}>
+        <div className={clsx(" flex flex-1 justify-center    max-w-[7.5rem]")}>
           <TableTitle>Language</TableTitle>
         </div>
 
-        <div className={clsx("flex-1 hidden  lg:flex justify-center lg:max-w-[80px]")}>
+        <div className={clsx("flex-1 hidden  lg:flex justify-center lg:max-w-[5rem]")}>
           <TableTitle>Time zone</TableTitle>
         </div>
         <div className={clsx("flex-1 hidden lg:flex lg:max-w-fit")}>

components/molecules/ContributorListTableRow/contributor-list-table-row.tsx

@@ -10,12 +10,15 @@ import { classNames } from "components/organisms/RepositoriesTable/repositories-
 import useContributorPullRequests from "lib/hooks/api/useContributorPullRequests";
 import useRepoList from "lib/hooks/useRepoList";
 import { useFetchUser } from "lib/hooks/useFetchUser";
+import Checkbox from "components/atoms/Checkbox/checkbox";
 import { getActivity } from "../RepoRow/repo-row";
 import DevProfile from "../DevProfile/dev-profile";
 
 interface ContributorListTableRow {
   contributor: DbPRContributor;
   topic: string;
+  selected?: boolean;
+  handleOnSelectContributor?: (state: boolean, contributor: DbPRContributor) => void;
 }
 
 function getLastContributionDate(contributions: DbRepoPR[]) {
@@ -39,7 +42,12 @@ function getLastContributedRepo(pullRequests: DbRepoPR[]) {
 
   return sortedPullRequests[0].full_name;
 }
-const ContributorListTableRow = ({ contributor, topic }: ContributorListTableRow) => {
+const ContributorListTableRow = ({
+  contributor,
+  topic,
+  selected,
+  handleOnSelectContributor,
+}: ContributorListTableRow) => {
   const [tableOpen, setTableOpen] = useState(false);
 
   const { data: user } = useFetchUser(contributor.author_login);
@@ -62,9 +70,18 @@ const ContributorListTableRow = ({ contributor, topic }: ContributorListTableRow
   return (
     <>
       {/* Mobile version */}
-      <div className="px-5 py-2 overflow-hidden odd:bg-white md:hidden even:bg-light-slate-2">
+      <div className="px-2 py-2 overflow-hidden md:px-5 odd:bg-white md:hidden even:bg-light-slate-2">
         <div className="flex items-center gap-x-3 text-light-slate-12">
-          <div className="w-[66%]">
+          {handleOnSelectContributor && (
+            <Checkbox
+              checked={selected ? true : false}
+              disabled={!user}
+              title={!user ? "Connect to GitHub" : ""}
+              onCheckedChange={(state) => handleOnSelectContributor?.(state as boolean, contributor)}
+              className={`${user && "border-orange-500 hover:bg-orange-600"}`}
+            />
+          )}
+          <div className="w-[68%]">
             <DevProfile company={user?.company || getLastContributedRepo(data)} username={contributor.author_login} />
           </div>
           <div className="w-[34%] text-normal text-light-slate-11  h-full">
@@ -121,34 +138,36 @@ const ContributorListTableRow = ({ contributor, topic }: ContributorListTableRow
       {/* Desktop Version */}
 
       <div className={`${classNames.row} !gap-6 text-light-slate-11`}>
-        {/* <Checkbox
-          checked={true}
-          onCheckedChange={() => console.log("yeah")}
-          disabled={!user}
-          title={!user ? "Connect to GitHub" : ""}
-          className={`${user && "border-orange-500 hover:bg-orange-600"}`}
-        /> */}
+        {handleOnSelectContributor && (
+          <Checkbox
+            checked={selected ? true : false}
+            disabled={!user}
+            title={!user ? "Connect to GitHub" : ""}
+            onCheckedChange={(state) => handleOnSelectContributor?.(state as boolean, contributor)}
+            className={`${user && "border-orange-500 hover:bg-orange-600"}`}
+          />
+        )}
 
         {/* Column: Contributors */}
-        <div className={clsx("flex-1 lg:min-w-[250px] overflow-hidden")}>
+        <div className={clsx("flex-1 lg:min-w-[12.5rem] overflow-hidden")}>
           <DevProfile company={user?.company || getLastContributedRepo(data)} username={contributor.author_login} />
         </div>
 
         {/* Column: Act */}
-        <div className={clsx("flex-1 flex lg:max-w-[100px] w-fit   justify-center")}>
+        <div className={clsx("flex-1 flex lg:max-w-[6.25rem] w-fit justify-center")}>
           {getActivity(totalPrs, false)}
         </div>
 
         {/* Column Repositories */}
-        <div className={clsx("flex-1 lg:max-w-[100px]  flex justify-center ")}>{repoList.length}</div>
+        <div className={clsx("flex-1 lg:max-w-[6.25rem]  flex justify-center ")}>{repoList.length}</div>
 
         {/* Column: Last Contribution */}
         <div className={clsx("flex-1 lg:max-w-[130px]  flex text-light-slate-11 justify-center ")}>
           <div className="flex">{<p>{getLastContributionDate(mergedPrs)}</p>}</div>
         </div>
 
         {/* Column: Language */}
-        <div className={clsx("flex-1 hidden lg:max-w-[120px]  justify-center lg:flex")}>
+        <div className={clsx("flex-1 hidden lg:max-w-[7.5rem]  justify-center lg:flex")}>
           {contributorLanguageList.length > 0 ? (
             <p>
               {contributorLanguageList[0]}
@@ -160,16 +179,16 @@ const ContributorListTableRow = ({ contributor, topic }: ContributorListTableRow
         </div>
 
         {/* Column: Time Zone */}
-        <div className={clsx("flex-1 hidden lg:max-w-[80px] text-light-slate-11 justify-center   lg:flex ")}>
+        <div className={clsx("flex-1 hidden lg:max-w-[5rem] text-light-slate-11 justify-center   lg:flex ")}>
           <div className="flex gap-x-3">{user && user.timezone ? <p>{user.timezone}</p> : "-"}</div>
         </div>
 
         {/* Column: Contributions */}
-        <div className={clsx("flex-1 hidden justify-center  lg:flex lg:max-w-[120px]")}>
+        <div className={clsx("flex-1 hidden justify-center  lg:flex lg:max-w-[7.5rem]")}>
           <p>{mergedPrs.length}</p>
         </div>
         {/* Column Last 30 Days */}
-        <div className={clsx("flex-1 lg:min-w-[150px] hidden lg:flex justify-center")}>
+        <div className={clsx("flex-1 lg:min-w-[9.37rem] hidden lg:flex justify-center")}>
           {last30days ? <Sparkline data={last30days} width="100%" height={54} /> : "-"}
         </div>
       </div>

components/molecules/DevProfile/dev-profile.tsx

@@ -19,7 +19,7 @@ const DevProfile = ({ username, company }: DevProfileProps) => {
       </div>
       {/* Desktop */}
       <div className="hidden rounded-full md:flex">
-        <Avatar className="" size={60} isCircle avatarURL={getAvatarByUsername(username)} />
+        <Avatar className="" size={45} isCircle avatarURL={getAvatarByUsername(username)} />
       </div>
       <div>
         <h1 className="text-light-slate-12">