@clickhouse/click-ui 0.0.0 → 0.0.2

package/src/components/GenericMenu.tsx

@@ -0,0 +1,114 @@
+import styled from "styled-components";
+
+export const GenericMenuPanel = styled.div<{
+  type: "popover" | "dropdown-menu" | "context-menu";
+  $showArrow?: boolean;
+}>`
+  outline: none;
+  max-width: var(--radix-${({ type }) => type}-content-available-width);
+  max-height: var(--radix-${({ type }) => type}-content-available-height);
+  overflow: hidden;
+  display: flex;
+  align-items: flex-start;
+
+  ${({ theme }) => `
+    border: 1px solid ${theme.click.genericMenu.panel.color.stroke.default};
+    background: ${theme.click.genericMenu.panel.color.background.default};
+    box-shadow: ${theme.click.genericMenu.panel.shadow.default};
+    border-radius: ${theme.click.genericMenu.panel.radii.all};
+  `};
+  ${({ $showArrow }) =>
+    $showArrow
+      ? `
+      &[data-side="bottom"] {
+        margin-top: -1px;
+      }
+      &[data-side="top"] {
+        margin-bottom: 1px;
+      }
+      &[data-side="left"] {
+        margin-right: -1px;
+      }
+      }
+      &[data-side="right"] {
+        margin-left: -1px;
+      }
+  `
+      : ""};
+`;
+
+export const GenericPopoverMenuPanel = styled.div<{
+  $type: "popover" | "hover-card";
+  $showArrow?: boolean;
+}>`
+  outline: none;
+  max-width: var(--radix-${({ $type }) => $type}-content-available-width);
+  max-height: var(--radix-${({ $type }) => $type}-content-available-height);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  z-index: 1;
+
+  ${({ theme }) => `
+    border: 1px solid ${theme.click.popover.color.panel.stroke.default};
+    background: ${theme.click.popover.color.panel.background.default};
+    padding: ${theme.click.popover.space.y} ${theme.click.popover.space.x};
+    border-radius: ${theme.click.popover.radii.all};
+    box-shadow: ${theme.click.popover.shadow.default};
+  `}
+  ${({ $showArrow }) => ($showArrow ? "margin: -1px 0;" : "")};
+`;
+
+export const Arrow = styled.svg`
+  filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 4px 6px);
+  ${({ theme }) => `
+    fill: ${theme.click.genericMenu.panel.color.background.default};
+    stroke: ${theme.click.genericMenu.panel.color.stroke.default};
+  `};
+`;
+
+export const GenericMenuItem = styled.div`
+  display: flex;
+  width: -webkit-fill-available;
+  align-items: center;
+  justify-content: space-between;
+  cursor: default;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  outline: none;
+  &[aria-selected] {
+    outline: none;
+  }
+
+  ${({ theme }) => `
+    padding: ${theme.click.genericMenu.item.space.y} ${theme.click.genericMenu.item.space.x};
+    gap: ${theme.click.genericMenu.item.space.gap};
+    font: ${theme.click.genericMenu.item.typography.label.default};
+    background: ${theme.click.genericMenu.item.color.background.default};
+    color: ${theme.click.genericMenu.item.color.text.default};
+    &[data-highlighted] {
+      font: ${theme.click.genericMenu.item.typography.label.hover};
+      background: ${theme.click.genericMenu.item.color.background.hover};
+      color:${theme.click.genericMenu.item.color.text.hover};
+      cursor: pointer;
+    }
+    &[data-state="open"] {
+      background:${theme.click.genericMenu.item.color.background.active};
+      color:${theme.click.genericMenu.item.color.text.active};
+      font: ${theme.click.genericMenu.item.typography.label.active};
+    }
+    &[data-disabled] {
+      background:${theme.click.genericMenu.item.color.background.disabled};
+      color:${theme.click.genericMenu.item.color.text.disabled};
+      font: ${theme.click.genericMenu.item.typography.label.disabled};
+      pointer-events: none;
+    }
+  `};
+  position: relative;
+  &:hover .dropdown-arrow,
+  &[data-state="open"] .dropdown-arrow {
+    left: 0.5rem;
+  }
+`;

package/src/components/HoverCard/HoverCard.stories.tsx

@@ -0,0 +1,64 @@
+import { Checkbox } from "..";
+import { Title } from "../Typography/Title/Title";
+import { HoverCard } from "./HoverCard";
+
+const HoverCardComponent = ({
+  open,
+  showArrow,
+  forceMount,
+  title,
+  openDelay,
+  closeDelay,
+}: {
+  open: "default" | "open" | "closed";
+  showArrow: boolean;
+  forceMount?: boolean;
+  title?: string;
+  openDelay?: number;
+  closeDelay?: number;
+}) => (
+  <HoverCard
+    open={open === "default" ? undefined : open === "open"}
+    openDelay={openDelay}
+    closeDelay={closeDelay}
+  >
+    <HoverCard.Trigger>Hover Here</HoverCard.Trigger>
+    <HoverCard.Content
+      showArrow={showArrow}
+      forceMount={forceMount ? true : undefined}
+      title={title}
+    >
+      <Title
+        color="default"
+        size="sm"
+        type="h5"
+      >
+        Hover Title
+      </Title>
+      <div>
+        Click on the input element below
+        <Checkbox />
+        <div>This is a sample data to experiment the popover</div>
+      </div>
+    </HoverCard.Content>
+  </HoverCard>
+);
+
+export default {
+  component: HoverCardComponent,
+  title: "Display/HoverCard",
+  tags: ["form-field", "hover-card", "autodocs"],
+  argTypes: {
+    open: { control: "radio", options: ["default", "open", "closed"] },
+    showArrow: { control: "boolean" },
+    forceMount: { control: "boolean" },
+    openDelay: { control: "number" },
+    closeDelay: { control: "number" },
+  },
+};
+
+export const Playground = {
+  args: {
+    open: "default",
+  },
+};

package/src/components/HoverCard/HoverCard.test.tsx

@@ -0,0 +1,85 @@
+import { ThemeProvider } from "styled-components";
+import "@testing-library/jest-dom";
+import { themes } from "../../theme";
+import { HoverCardProps } from "@radix-ui/react-hover-card";
+import { Checkbox, HoverCard } from "@/components";
+import { render, fireEvent, waitFor } from "@testing-library/react";
+// import userEvent from "@testing-library/user-event";
+
+describe("HoverCard", () => {
+  const renderHoverCard = (props: HoverCardProps) =>
+    render(
+      <ThemeProvider theme={themes.dark}>
+        <HoverCard
+          openDelay={0}
+          closeDelay={0}
+          {...props}
+        >
+          <HoverCard.Trigger>Hover Here</HoverCard.Trigger>
+          <HoverCard.Content data-testid="popover-panel">
+            <div>
+              Click on the input element below
+              <Checkbox />
+              <div>This is a sample data to experiment the hoverCard</div>
+            </div>
+          </HoverCard.Content>
+        </HoverCard>
+      </ThemeProvider>
+    );
+
+  it("should open hover card on hover", async () => {
+    const { getByText } = renderHoverCard({});
+    const hoverCardTrigger = getByText("Hover Here");
+    expect(hoverCardTrigger).not.toBeNull();
+    fireEvent.pointerEnter(hoverCardTrigger);
+    await waitFor(() => {
+      expect(getByText("Click on the input element below")).not.toBeNull();
+    });
+  });
+
+  it("should not close hoverCard on clicking the checkbox", async () => {
+    const { getByTestId, getByText } = renderHoverCard({});
+    const hoverCardTrigger = getByText("Hover Here");
+    expect(hoverCardTrigger).not.toBeNull();
+    fireEvent.pointerOver(hoverCardTrigger);
+
+    await waitFor(() => {
+      expect(getByText("Click on the input element below")).not.toBeNull();
+    });
+    const checkbox = getByTestId("checkbox");
+    fireEvent.click(checkbox);
+    expect(getByText("Click on the input element below")).not.toBeNull();
+  });
+
+  it("should close hover card on pointerLeave", async () => {
+    const { getByText, queryByText } = renderHoverCard({});
+    const hoverCardTrigger = getByText("Hover Here");
+    expect(hoverCardTrigger).not.toBeNull();
+    fireEvent.pointerOver(hoverCardTrigger);
+
+    await waitFor(() => {
+      expect(getByText("Click on the input element below")).not.toBeNull();
+    });
+    fireEvent.pointerLeave(hoverCardTrigger);
+    await waitFor(() => {
+      expect(queryByText("Click on the input element below")).not.toBeInTheDocument();
+    });
+  });
+
+  it("should not close hover card on pointerLeave and focus ", async () => {
+    const { getByText, queryByText, getByTestId } = renderHoverCard({});
+    const hoverCardTrigger = getByText("Hover Here");
+    expect(hoverCardTrigger).not.toBeNull();
+    fireEvent.pointerOver(hoverCardTrigger);
+
+    await waitFor(() => {
+      expect(getByText("Click on the input element below")).not.toBeNull();
+    });
+    const checkbox = getByTestId("checkbox");
+    fireEvent.click(checkbox);
+    fireEvent.pointerLeave(getByTestId("popover-panel"));
+    await waitFor(() => {
+      expect(queryByText("Click on the input element below")).not.toBeInTheDocument();
+    });
+  });
+});

package/src/components/HoverCard/HoverCard.tsx

@@ -0,0 +1,65 @@
+import * as RadixHoverCard from "@radix-ui/react-hover-card";
+import { Arrow, GenericPopoverMenuPanel } from "../GenericMenu";
+import styled from "styled-components";
+import { ReactNode } from "react";
+import PopoverArrow from "../icons/PopoverArrow";
+
+export const HoverCard = ({ children, ...props }: RadixHoverCard.HoverCardProps) => {
+  return <RadixHoverCard.Root {...props}>{children}</RadixHoverCard.Root>;
+};
+
+const Trigger = styled(RadixHoverCard.Trigger)`
+  width: fit-content;
+`;
+
+const HoverCardTrigger = ({
+  children,
+  ...props
+}: RadixHoverCard.HoverCardTriggerProps) => {
+  return <Trigger {...props}>{children}</Trigger>;
+};
+HoverCardTrigger.displayName = "HoverCardTrigger";
+HoverCard.Trigger = HoverCardTrigger;
+
+interface HoverCardContentProps extends RadixHoverCard.HoverCardContentProps {
+  showArrow?: boolean;
+  forceMount?: true;
+  container?: HTMLElement | null;
+  children: ReactNode;
+}
+
+const HoverCardContent = ({
+  children,
+  showArrow,
+  forceMount,
+  container,
+  ...props
+}: HoverCardContentProps) => {
+  return (
+    <RadixHoverCard.Portal
+      forceMount={forceMount}
+      container={container}
+    >
+      <GenericPopoverMenuPanel
+        as={RadixHoverCard.Content}
+        $type="hover-card"
+        $showArrow={showArrow}
+        {...props}
+      >
+        {showArrow && (
+          <Arrow
+            asChild
+            as={RadixHoverCard.Arrow}
+            width={15}
+            height={10}
+          >
+            <PopoverArrow />
+          </Arrow>
+        )}
+        {children}
+      </GenericPopoverMenuPanel>
+    </RadixHoverCard.Portal>
+  );
+};
+HoverCardContent.displayName = "HoverCardContent";
+HoverCard.Content = HoverCardContent;

package/src/components/Icon/Icon.stories.ts

@@ -2,45 +2,14 @@ import { Icon } from "./Icon";
 
 export default {
   component: Icon,
-  title: "Icon",
-  tags: ["icon"],
+  title: "Display/Icon",
+  tags: ["icon","autodocs"],
 };
 
-export const Default = {
+export const Playground = {
   args: {
     name: "users",
     width: "1rem",
     height: "16px",
   },
-};
-
-export const Color = {
-  args: {
-    name: "users",
-    color: "darkturquoise",
-  },
-};
-
-export const Small = {
-  args: {
-    name: "users",
-    color: "darkturquoise",
-    size: "small",
-  },
-};
-
-export const Medium = {
-  args: {
-    name: "users",
-    color: "darkturquoise",
-    size: "medium",
-  },
-};
-
-export const Large = {
-  args: {
-    name: "users",
-    color: "darkturquoise",
-    size: "large",
-  },
-};
+};

package/src/components/Icon/Icon.tsx

@@ -8,38 +8,186 @@ import FilterIcon from "../icons/FilterIcon";
 import HistoryIcon from "../icons/HistoryIcon";
 import InsertRowIcon from "../icons/InsertRowIcon";
 import SortAltIcon from "../icons/SortAltIcon";
+import SortIcon from "../icons/SortIcon";
 import { IconProps } from "./types";
 import { ChevronRight } from "../icons/ChevronRight";
 import { ChevronDown } from "../icons/ChevronDown";
+import ArrowDown from "@/components/icons/ArrowDown";
+import InfoInCircleIcon from "@/components/icons/InfoInCircleIcon";
+import CheckIcon from "@/components/icons/CheckIcon";
+import InformationIcon from "@/components/icons/InformationIcon";
+import WarningIcon from "@/components/icons/WarningIcon";
+import CrossIcon from "@/components/icons/CrossIcon";
+import ChevronUp from "../icons/ChevronUp";
+import Activity from "../icons/Activity";
+import ArrowRight from "../icons/ArrowRight";
+import ArrowTriangle from "../icons/ArrowTriangle";
+import ArrowUp from "../icons/ArrowUp";
+import BackUps from "../icons/Backups";
+import Blog from "../icons/Blog";
+import Book from "../icons/Book";
+import Brackets from "../icons/Brackets";
+import Briefcase from "../icons/Briefcase";
+import Building from "../icons/Building";
+import BurgerMenu from "../icons/BurgerMenu";
+import Cards from "../icons/Cards";
+import CellTower from "../icons/CellTower";
+import CheckInCircle from "../icons/CheckInCircle";
+import ChevronLeft from "../icons/ChevronLeft";
+import Clock from "../icons/Clock";
+import Cloud from "../icons/Cloud";
+import Code from "../icons/Code";
+import CodeInSquare from "../icons/CodeInSquare";
+import Connect from "../icons/Connect";
+import ConnectAlt from "../icons/ConnectAlt";
+import Console from "../icons/Console";
+import Copy from "../icons/Copy";
+import Data from "../icons/Data";
+import Disk from "../icons/Disk";
+import Display from "../icons/Display";
+import Document from "../icons/Document";
+import DotsVertical from "../icons/DotsVertical";
+import DotsHorizontal from "../icons/DotsHorizontal";
+import Email from "../icons/Email";
+import Empty from "../icons/Empty";
+import Fire from "../icons/Fire";
+import Folder from "../icons/Folder";
+import Gift from "../icons/Gift";
+import Home from "../icons/Home";
+import Http from "../icons/Http";
+import Integrations from "../icons/Integrations";
+import LightBulb from "../icons/LightBulb";
+import Lightening from "../icons/Lightening";
+import Loading from "../icons/Loading";
+import Metrics from "../icons/Metrics";
+import MetricsAlt from "../icons/MetricsAlt";
+import Payment from "../icons/Payment";
+import Pencil from "../icons/Pencil";
+import PieChart from "../icons/PieChart";
+import Play from "../icons/Play";
+import Plus from "../icons/Plus";
+import Popout from "../icons/Popout";
+import Question from "../icons/Question";
+import Refresh from "../icons/Refresh";
+import Search from "../icons/Search";
+import Secure from "../icons/Secure";
+import Services from "../icons/Services";
+import Settings from "../icons/Settings";
+import Share from "../icons/Share";
+import SlideIn from "../icons/SlideIn";
+import SlideOut from "../icons/SlideOut";
+import Sparkle from "../icons/Sparkle";
+import Speaker from "../icons/Speaker";
+import Speed from "../icons/Speed";
+import Star from "../icons/Star";
+import Support from "../icons/Support";
+import Table from "../icons/Table";
+import Taxi from "../icons/Taxi";
+import Trash from "../icons/Trash";
+import Upload from "../icons/Upload";
+import Url from "../icons/Url";
 
-const ICONS_MAP = {
+export const ICONS_MAP = {
+  activity: Activity,
+  "arrow-down": ArrowDown,
+  "arrow-right": ArrowRight,
+  "arrow-triangle": ArrowTriangle,
+  "arrow-up": ArrowUp,
+  backups: BackUps,
+  blog: Blog,
+  book: Book,
+  brackets: Brackets,
+  briefcase: Briefcase,
+  building: Building,
+  "burger-menu": BurgerMenu,
+  cards: Cards,
+  "cell-tower": CellTower,
   chat: ChatIcon,
-  "chevron-right": ChevronRight,
+  check: CheckIcon,
+  "check-in-circle": CheckInCircle,
   "chevron-down": ChevronDown,
+  "chevron-left": ChevronLeft,
+  "chevron-right": ChevronRight,
+  "chevron-up": ChevronUp,
+  clock: Clock,
+  cloud: Cloud,
+  code: Code,
+  "code-in-square": CodeInSquare,
+  connect: Connect,
+  "connect-alt": ConnectAlt,
+  console: Console,
+  copy: Copy,
+  cross: CrossIcon,
+  data: Data,
   database: DatabaseIcon,
+  disk: Disk,
+  display: Display,
+  document: Document,
+  "dots-horizontal": DotsHorizontal,
+  "dots-vertical": DotsVertical,
+  email: Email,
+  empty: Empty,
   filter: FilterIcon,
+  fire: Fire,
+  folder: Folder,
+  gift: Gift,
   history: HistoryIcon,
-  insertRow: InsertRowIcon,
-  sort: SortAltIcon,
+  home: Home,
+  http: Http,
+  "info-in-circle": InfoInCircleIcon,
+  information: InformationIcon,
+  "insert-row": InsertRowIcon,
+  integrations: Integrations,
+  "light-bulb": LightBulb,
+  lightening: Lightening,
+  loading: Loading,
+  metrics: Metrics,
+  "metrics-alt": MetricsAlt,
+  payment: Payment,
+  pencil: Pencil,
+  "pie-chart": PieChart,
+  play: Play,
+  plus: Plus,
+  popout: Popout,
+  question: Question,
+  refresh: Refresh,
+  search: Search,
+  secure: Secure,
+  services: Services,
+  settings: Settings,
+  share: Share,
+  "slide-in": SlideIn,
+  "slide-out": SlideOut,
+  "sort-alt": SortAltIcon,
+  sort: SortIcon,
+  sparkle: Sparkle,
+  speaker: Speaker,
+  speed: Speed,
+  star: Star,
+  support: Support,
+  table: Table,
+  taxi: Taxi,
+  trash: Trash,
+  upload: Upload,
+  url: Url,
   user: UserIcon,
   users: UsersIcon,
+  warning: WarningIcon,
 };
 
 const SVGIcon = ({ name, ...delegated }: IconProps) => {
   const Component = ICONS_MAP[name];
+
+  if (!Component) {
+    return null;
+  }
+
   return <Component {...delegated} />;
 };
 
 const withStylesWrapper =
   (IconComponent: ElementType) =>
-  ({
-    color,
-    width,
-    height,
-    className,
-    size,
-    ...props
-  }: IconProps): ReactElement =>
+  ({ color, width, height, className, size, ...props }: IconProps): ReactElement =>
     (
       <SvgWrapper
         color={color}
@@ -57,30 +205,30 @@ const SvgWrapper = styled.div<Partial<IconProps>>`
   align-items: center;
 
   & path[stroke] {
-    stroke: ${props => props.color || "currentColor"};
+    stroke: ${(props) => props.color || "currentColor"};
   }
 
   & path[fill] {
-    fill: ${props => props.color || "currentColor"};
+    fill: ${(props) => props.color || "currentColor"};
   }
 
   & svg {
-    width: ${props =>
+    width: ${(props) =>
       props.width ||
       props.theme.click.image[props.size || "medium"].size.width ||
       "24px"};
-    height: ${props =>
+    height: ${(props) =>
       props.height ||
       props.theme.click.image[props.size || "medium"].size.height ||
       "24px"};
   }
 
   & svg[stroke] {
-    stroke: ${props => props.color || "currentColor"};
+    stroke: ${(props) => props.color || "currentColor"};
   }
 
   & svg[fill]:not([fill="none"]) {
-    fill: ${props => props.color || "currentColor"};
+    fill: ${(props) => props.color || "currentColor"};
   }
 `;