chore: ui component revamp (#2415)

* chore: swap tooltip component with plane ui package

* chore: swap linear progress component with plane ui package

* fix: login button fix

packages/ui/package.json

@@ -31,7 +31,10 @@
     "access": "public"
   },
   "dependencies": {
+    "@blueprintjs/core": "^4.16.3",
+    "@blueprintjs/popover2": "^1.13.3",
     "@headlessui/react": "^1.7.17",
-    "clsx": "^2.0.0"
+    "clsx": "^2.0.0",
+    "next-themes": "^0.2.1"
   }
 }

packages/ui/src/button/button.tsx

@@ -1,11 +1,16 @@
 import * as React from "react";
 
-import { getIconStyling, getButtonStyling, TButtonVariant } from "./helper";
+import {
+  getIconStyling,
+  getButtonStyling,
+  TButtonVariant,
+  TButtonSizes,
+} from "./helper";
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: TButtonVariant;
-  size?: "sm" | "md" | "lg";
+  size?: TButtonSizes;
   className?: string;
   loading?: boolean;
   disabled?: boolean;

packages/ui/src/button/helper.tsx

@@ -10,7 +10,7 @@ export type TButtonVariant =
   | "link-danger"
   | "tertiary-danger";
 
-export type TButtonSizes = "sm" | "md" | "lg";
+export type TButtonSizes = "sm" | "md" | "lg" | "xl";
 
 export interface IButtonStyling {
   [key: string]: {
@@ -24,13 +24,15 @@ export interface IButtonStyling {
 enum buttonSizeStyling {
   sm = `px-3 py-1.5 font-medium text-xs rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`,
   md = `px-4 py-1.5 font-medium text-sm rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`,
-  lg = `px-5 py-2 font-medium text-base rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`,
+  lg = `px-5 py-2 font-medium text-sm rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`,
+  xl = `px-5 py-3.5 font-medium text-sm rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`,
 }
 
 enum buttonIconStyling {
   sm = "h-3 w-3 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0",
   md = "h-3.5 w-3.5 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0",
   lg = "h-4 w-4 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0",
+  xl = "h-4 w-4 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0",
 }
 
 export const buttonStyling: IButtonStyling = {
@@ -110,16 +112,12 @@ export const getButtonStyling = (
   } ${currentVariant.pressed}`;
 
   let _size: string = ``;
-  if (size === "sm") _size = buttonSizeStyling["sm"];
-  if (size === "md") _size = buttonSizeStyling["md"];
-  if (size === "lg") _size = buttonSizeStyling["lg"];
+  if (size) _size = buttonSizeStyling[size];
   return `${_variant} ${_size}`;
 };
 
 export const getIconStyling = (size: TButtonSizes): string => {
   let icon: string = ``;
-  if (size === "sm") icon = buttonIconStyling["sm"];
-  if (size === "md") icon = buttonIconStyling["md"];
-  if (size === "lg") icon = buttonIconStyling["lg"];
+  if (size) icon = buttonIconStyling[size];
   return icon;
 };

packages/ui/src/index.tsx

@@ -3,3 +3,4 @@ export * from "./form-fields";
 export * from "./progress";
 export * from "./spinners";
 export * from "./loader";
+export * from "./tooltip";

packages/ui/src/progress/index.tsx

@@ -1,2 +1,3 @@
 export * from "./radial-progress";
 export * from "./progress-bar";
+export * from "./linear-progress-indicator";

packages/ui/src/progress/linear-progress-indicator.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { Tooltip } from "../tooltip";
+
+type Props = {
+  data: any;
+  noTooltip?: boolean;
+};
+
+export const LinearProgressIndicator: React.FC<Props> = ({
+  data,
+  noTooltip = false,
+}) => {
+  const total = data.reduce((acc: any, cur: any) => acc + cur.value, 0);
+  let progress = 0;
+
+  const bars = data.map((item: any) => {
+    const width = `${(item.value / total) * 100}%`;
+    const style = {
+      width,
+      backgroundColor: item.color,
+    };
+    progress += item.value;
+    if (noTooltip) return <div style={style} />;
+    else
+      return (
+        <Tooltip
+          key={item.id}
+          tooltipContent={`${item.name} ${Math.round(item.value)}%`}
+        >
+          <div style={style} />
+        </Tooltip>
+      );
+  });
+
+  return (
+    <div className="flex h-1 w-full items-center justify-between gap-1">
+      {total === 0 ? (
+        <div className="flex h-full w-full gap-1 bg-neutral-500">{bars}</div>
+      ) : (
+        <div className="flex h-full w-full gap-1">{bars}</div>
+      )}
+    </div>
+  );
+};

packages/ui/src/tooltip/index.tsx

@@ -0,0 +1 @@
+export * from "./tooltip";

packages/ui/src/tooltip/tooltip.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+
+// next-themes
+import { useTheme } from "next-themes";
+import { Tooltip2 } from "@blueprintjs/popover2";
+
+export type TPosition =
+  | "top"
+  | "right"
+  | "bottom"
+  | "left"
+  | "auto"
+  | "auto-end"
+  | "auto-start"
+  | "bottom-left"
+  | "bottom-right"
+  | "left-bottom"
+  | "left-top"
+  | "right-bottom"
+  | "right-top"
+  | "top-left"
+  | "top-right";
+
+interface ITooltipProps {
+  tooltipHeading?: string;
+  tooltipContent: string | React.ReactNode;
+  position?: TPosition;
+  children: JSX.Element;
+  disabled?: boolean;
+  className?: string;
+  openDelay?: number;
+  closeDelay?: number;
+}
+
+export const Tooltip: React.FC<ITooltipProps> = ({
+  tooltipHeading,
+  tooltipContent,
+  position = "top",
+  children,
+  disabled = false,
+  className = "",
+  openDelay = 200,
+  closeDelay,
+}) => {
+  const { theme } = useTheme();
+
+  return (
+    <Tooltip2
+      disabled={disabled}
+      hoverOpenDelay={openDelay}
+      hoverCloseDelay={closeDelay}
+      content={
+        <div
+          className={`relative z-50 max-w-xs gap-1 rounded-md p-2 text-xs shadow-md ${
+            theme === "custom"
+              ? "bg-custom-background-100 text-custom-text-200"
+              : "bg-black text-gray-400"
+          } break-words overflow-hidden ${className}`}
+        >
+          {tooltipHeading && (
+            <h5
+              className={`font-medium ${
+                theme === "custom" ? "text-custom-text-100" : "text-white"
+              }`}
+            >
+              {tooltipHeading}
+            </h5>
+          )}
+          {tooltipContent}
+        </div>
+      }
+      position={position}
+      renderTarget={({
+        isOpen: isTooltipOpen,
+        ref: eleReference,
+        ...tooltipProps
+      }) =>
+        React.cloneElement(children, {
+          ref: eleReference,
+          ...tooltipProps,
+          ...children.props,
+        })
+      }
+    />
+  );
+};

web/components/account/email-code-form.tsx

@@ -212,7 +212,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
           <Button
             variant="primary"
             className="w-full"
-            size="md"
+            size="xl"
             onClick={() => {
               handleSubmit(onSubmit)().then(() => {
                 setResendCodeTimer(30);

web/components/command-palette/command-k.tsx

@@ -26,8 +26,8 @@ import {
   commandGroups,
 } from "components/command-palette";
 // ui
-import { Icon, Tooltip } from "components/ui";
-import { Loader, ToggleSwitch } from "@plane/ui";
+import { Icon } from "components/ui";
+import { Loader, ToggleSwitch, Tooltip } from "@plane/ui";
 // icons
 import { DiscordIcon, GithubIcon, SettingIcon } from "components/icons";
 import { InboxIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";

web/components/core/activity.tsx

@@ -7,7 +7,8 @@ import useEstimateOption from "hooks/use-estimate-option";
 // services
 import issuesService from "services/issue.service";
 // icons
-import { Icon, Tooltip } from "components/ui";
+import { Tooltip } from "@plane/ui";
+import { Icon } from "components/ui";
 import {
   TagIcon,
   CopyPlus,

web/components/core/filters/issues-view-filter.tsx

@@ -11,8 +11,8 @@ import useEstimateOption from "hooks/use-estimate-option";
 // components
 import { SelectFilters } from "components/views";
 // ui
-import { CustomMenu, Tooltip } from "components/ui";
-import { ToggleSwitch } from "@plane/ui";
+import { CustomMenu } from "components/ui";
+import { ToggleSwitch, Tooltip } from "@plane/ui";
 // icons
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 import {

web/components/core/modals/existing-issues-list-modal.tsx

@@ -13,8 +13,7 @@ import useToast from "hooks/use-toast";
 import useIssuesView from "hooks/use-issues-view";
 import useDebounce from "hooks/use-debounce";
 // ui
-import { Button, Loader, ToggleSwitch } from "@plane/ui";
-import { Tooltip } from "components/ui";
+import { Button, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
 // icons
 import { LaunchOutlined } from "@mui/icons-material";
 import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";

web/components/core/views/board-view/single-issue.tsx

@@ -17,7 +17,8 @@ import { ViewDueDateSelect, ViewEstimateSelect, ViewStartDateSelect } from "comp
 import { MembersSelect, LabelSelect, PrioritySelect } from "components/project";
 import { StateSelect } from "components/states";
 // ui
-import { ContextMenu, CustomMenu, Tooltip } from "components/ui";
+import { ContextMenu, CustomMenu } from "components/ui";
+import { Tooltip } from "@plane/ui";
 // icons
 import {
   ClipboardDocumentCheckIcon,

web/components/core/views/calendar-view/single-issue.tsx

@@ -13,10 +13,11 @@ import trackEventServices from "services/track_event.service";
 import useIssuesProperties from "hooks/use-issue-properties";
 import useToast from "hooks/use-toast";
 // components
-import { CustomMenu, Tooltip } from "components/ui";
+import { CustomMenu } from "components/ui";
 import { ViewDueDateSelect, ViewEstimateSelect, ViewStartDateSelect } from "components/issues";
 import { LabelSelect, MembersSelect, PrioritySelect } from "components/project";
 import { StateSelect } from "components/states";
+import { Tooltip } from "@plane/ui";
 // icons
 import { LinkIcon, PaperClipIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
 import { LayerDiagonalIcon } from "components/icons";

web/components/core/views/list-view/single-issue.tsx

@@ -14,7 +14,8 @@ import { ViewDueDateSelect, ViewEstimateSelect, ViewStartDateSelect } from "comp
 import { LabelSelect, MembersSelect, PrioritySelect } from "components/project";
 import { StateSelect } from "components/states";
 // ui
-import { Tooltip, CustomMenu, ContextMenu } from "components/ui";
+import { CustomMenu, ContextMenu } from "components/ui";
+import { Tooltip } from "@plane/ui";
 // icons
 import {
   ClipboardDocumentCheckIcon,

web/components/cycles/active-cycle-details.tsx

@@ -10,10 +10,9 @@ import cyclesService from "services/cycles.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { LinearProgressIndicator, Tooltip } from "components/ui";
 import { AssigneesList } from "components/ui/avatar";
 import { SingleProgressStats } from "components/core";
-import { Loader } from "@plane/ui";
+import { Loader, Tooltip, LinearProgressIndicator } from "@plane/ui";
 // components
 import ProgressChart from "components/core/sidebar/progress-chart";
 import { ActiveCycleProgressStats } from "components/cycles";

web/components/cycles/cycles-board-card.tsx

@@ -7,9 +7,9 @@ import useToast from "hooks/use-toast";
 // components
 import { SingleProgressStats } from "components/core";
 // ui
-import { CustomMenu, LinearProgressIndicator, Tooltip } from "components/ui";
+import { CustomMenu } from "components/ui";
 import { AssigneesList } from "components/ui/avatar";
-import { RadialProgressBar } from "@plane/ui";
+import { RadialProgressBar, Tooltip, LinearProgressIndicator } from "@plane/ui";
 // icons
 import { CalendarDaysIcon } from "@heroicons/react/20/solid";
 import {

web/components/cycles/cycles-list-item.tsx

@@ -4,8 +4,8 @@ import { useRouter } from "next/router";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { RadialProgressBar } from "@plane/ui";
-import { CustomMenu, LinearProgressIndicator, Tooltip } from "components/ui";
+import { RadialProgressBar, Tooltip, LinearProgressIndicator } from "@plane/ui";
+import { CustomMenu } from "components/ui";
 // icons
 import { CalendarDaysIcon } from "@heroicons/react/20/solid";
 import {

web/components/cycles/gantt-chart/blocks.tsx

@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 
 // ui
-import { Tooltip } from "components/ui";
+import { Tooltip } from "@plane/ui";
 // icons
 import { ContrastIcon } from "components/icons";
 // helpers
@@ -44,9 +44,7 @@ export const CycleGanttBlock = ({ data }: { data: ICycle }) => {
         }
         position="top-left"
       >
-        <div className="relative text-custom-text-100 text-sm truncate py-1 px-2.5 w-full">
-          {data?.name}
-        </div>
+        <div className="relative text-custom-text-100 text-sm truncate py-1 px-2.5 w-full">{data?.name}</div>
       </Tooltip>
     </div>
   );