@clickhouse/click-ui 0.0.2 → 0.0.4

package/src/components/GenericMenu.tsx

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

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

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

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

@@ -1,15 +0,0 @@
-import { Icon } from "./Icon";
-
-export default {
-  component: Icon,
-  title: "Display/Icon",
-  tags: ["icon","autodocs"],
-};
-
-export const Playground = {
-  args: {
-    name: "users",
-    width: "1rem",
-    height: "16px",
-  },
-};

package/src/components/Icon/Icon.tsx

@@ -1,238 +0,0 @@
-import { ElementType, ReactElement } from "react";
-import { UsersIcon } from "../icons/UsersIcon";
-import styled from "styled-components";
-import { UserIcon } from "../icons/UserIcon";
-import ChatIcon from "../icons/ChatIcon";
-import DatabaseIcon from "../icons/DatabaseIcon";
-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";
-
-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,
-  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,
-  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 =>
-    (
-      <SvgWrapper
-        color={color}
-        width={width}
-        height={height}
-        size={size}
-        className={className}
-      >
-        <IconComponent {...props} />
-      </SvgWrapper>
-    );
-
-const SvgWrapper = styled.div<Partial<IconProps>>`
-  display: flex;
-  align-items: center;
-
-  & path[stroke] {
-    stroke: ${(props) => props.color || "currentColor"};
-  }
-
-  & path[fill] {
-    fill: ${(props) => props.color || "currentColor"};
-  }
-
-  & svg {
-    width: ${(props) =>
-      props.width ||
-      props.theme.click.image[props.size || "medium"].size.width ||
-      "24px"};
-    height: ${(props) =>
-      props.height ||
-      props.theme.click.image[props.size || "medium"].size.height ||
-      "24px"};
-  }
-
-  & svg[stroke] {
-    stroke: ${(props) => props.color || "currentColor"};
-  }
-
-  & svg[fill]:not([fill="none"]) {
-    fill: ${(props) => props.color || "currentColor"};
-  }
-`;
-
-const Icon = withStylesWrapper(SVGIcon);
-const IconToExport = styled(Icon)``;
-
-export { IconToExport as Icon };

package/src/components/Icon/types.ts

@@ -1,95 +0,0 @@
-import { SVGAttributes } from "react";
-
-export type IconSize = "small" | "medium" | "large";
-export type IconName =
-  | "activity"
-  | "arrow-down"
-  | "arrow-right"
-  | "arrow-triangle"
-  | "arrow-up"
-  | "backups"
-  | "blog"
-  | "book"
-  | "brackets"
-  | "briefcase"
-  | "building"
-  | "burger-menu"
-  | "cards"
-  | "cell-tower"
-  | "chat"
-  | "check"
-  | "check-in-circle"
-  | "chevron-down"
-  | "chevron-left"
-  | "chevron-right"
-  | "chevron-up"
-  | "clock"
-  | "cloud"
-  | "code"
-  | "code-in-square"
-  | "connect"
-  | "connect-alt"
-  | "console"
-  | "copy"
-  | "cross"
-  | "data"
-  | "database"
-  | "disk"
-  | "display"
-  | "document"
-  | "dots-horizontal"
-  | "dots-vertical"
-  | "email"
-  | "empty"
-  | "filter"
-  | "fire"
-  | "folder"
-  | "gift"
-  | "history"
-  | "home"
-  | "http"
-  | "info-in-circle"
-  | "information"
-  | "insert-row"
-  | "integrations"
-  | "light-bulb"
-  | "lightening"
-  | "loading"
-  | "metrics"
-  | "metrics-alt"
-  | "payment"
-  | "pencil"
-  | "pie-chart"
-  | "play"
-  | "plus"
-  | "popout"
-  | "question"
-  | "refresh"
-  | "search"
-  | "secure"
-  | "services"
-  | "settings"
-  | "share"
-  | "slide-in"
-  | "slide-out"
-  | "sort-alt"
-  | "sort"
-  | "sparkle"
-  | "speaker"
-  | "speed"
-  | "star"
-  | "support"
-  | "table"
-  | "taxi"
-  | "trash"
-  | "upload"
-  | "url"
-  | "user"
-  | "users"
-  | "warning";
-
-export interface IconProps extends SVGAttributes<HTMLOrSVGElement> {
-  name: IconName;
-  color?: string;
-  size?: IconSize;
-}