@rebasepro/ui 0.17.3 → 0.18.0

package/src/components/Tooltip.tsx

@@ -1,153 +0,0 @@
-"use client";
-import React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-
-import { cls } from "../util";
-import { useInjectStyles } from "../hooks";
-import { usePortalContainer } from "../hooks/PortalContainerContext";
-
-export type TooltipProps = {
-    open?: boolean,
-    defaultOpen?: boolean,
-    onOpenChange?: (open: boolean) => void,
-    side?: "top" | "bottom" | "left" | "right",
-    align?: "start" | "center" | "end",
-    sideOffset?: number,
-    title?: string | React.ReactNode,
-    delayDuration?: number;
-    asChild?: boolean;
-    tooltipClassName?: string,
-    tooltipStyle?: React.CSSProperties;
-    children: React.ReactNode,
-    className?: string,
-    container?: HTMLElement,
-    style?: React.CSSProperties;
-};
-
-export const Tooltip = ({
-                            open,
-                            defaultOpen,
-                            side = "bottom",
-                            delayDuration = 200,
-                            sideOffset,
-                            align,
-                            onOpenChange,
-                            title,
-                            tooltipClassName,
-                            tooltipStyle,
-                            children,
-                            asChild = false,
-                            container,
-                            className,
-                            style
-                        }: TooltipProps) => {
-
-    useInjectStyles("Tooltip", styles);
-
-    // Get the portal container from context
-    const contextContainer = usePortalContainer();
-
-    // Prioritize manual prop, fallback to context container
-    const finalContainer = (container ?? contextContainer ?? undefined) as HTMLElement | undefined;
-
-    if (!title)
-        return <>{children}</>;
-
-    const trigger = asChild
-        ? <TooltipPrimitive.Trigger asChild={true}>
-            {children}
-        </TooltipPrimitive.Trigger>
-        : <TooltipPrimitive.Trigger asChild={true}>
-            <div style={style} className={className}>
-                {children}
-            </div>
-        </TooltipPrimitive.Trigger>;
-
-    return (
-        <TooltipPrimitive.Provider delayDuration={delayDuration}>
-            <TooltipPrimitive.Root {...(open !== undefined ? { open,
-onOpenChange } : {})} defaultOpen={defaultOpen}>
-                {trigger}
-                <TooltipPrimitive.Portal container={finalContainer}>
-                    <TooltipPrimitive.Content
-                        className={cls("TooltipContent",
-                            "max-w-lg leading-relaxed",
-                            "z-50 rounded-md px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 bg-surface-accent-700/90 dark:bg-surface-accent-800/90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100",
-                            tooltipClassName)}
-                        style={tooltipStyle}
-                        sideOffset={sideOffset === undefined ? 4 : sideOffset}
-                        align={align}
-                        side={side}>
-                        {title}
-                    </TooltipPrimitive.Content>
-                </TooltipPrimitive.Portal>
-            </TooltipPrimitive.Root>
-        </TooltipPrimitive.Provider>
-    );
-};
-
-const styles = `
-
-.TooltipContent {
-  animation-duration: 220ms;
-  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  will-change: transform, opacity;
-}
-
-.TooltipContent[data-state='delayed-open'][data-side='top'] {
-  animation-name: slideDownAndFade;
-}
-.TooltipContent[data-state='delayed-open'][data-side='right'] {
-  animation-name: slideLeftAndFade;
-}
-.TooltipContent[data-state='delayed-open'][data-side='bottom'] {
-  animation-name: slideUpAndFade;
-}
-.TooltipContent[data-state='delayed-open'][data-side='left'] {
-  animation-name: slideRightAndFade;
-}
-
-
-@keyframes slideUpAndFade {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideRightAndFade {
-  from {
-    opacity: 0;
-    transform: translateX(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes slideDownAndFade {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideLeftAndFade {
-  from {
-    opacity: 0;
-    transform: translateX(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}`;

package/src/components/Typography.tsx

@@ -1,132 +0,0 @@
-import React, { ReactEventHandler } from "react";
-import { cls } from "../util";
-
-export type TypographyVariant = keyof typeof typographyVariants;
-export type TypographyProps<C extends React.ElementType = "span"> = {
-    align?: "center" | "inherit" | "justify" | "left" | "right";
-    children?: React.ReactNode;
-    className?: string;
-    component?: C;
-    gutterBottom?: boolean;
-    noWrap?: boolean;
-    paragraph?: boolean;
-    variant?: TypographyVariant;
-    variantMapping?: { [key: string]: string };
-    color?: "inherit" | "initial" | "primary" | "secondary" | "disabled" | "error";
-    onClick?: ReactEventHandler<HTMLElement>;
-    style?: React.CSSProperties;
-} & React.ComponentPropsWithoutRef<C>;
-
-const typographyVariants = {
-    h1: "h1",
-    h2: "h2",
-    h3: "h3",
-    h4: "h4",
-    h5: "h5",
-    h6: "h6",
-    subtitle1: "h6",
-    subtitle2: "h6",
-    label: "label",
-    body1: "p",
-    body2: "p",
-    inherit: "p",
-    caption: "p",
-    button: "span",
-    lead: "p",
-    micro: "span",
-    mono: "span",
-    stat: "span"
-};
-
-const colorToClasses = {
-    inherit: "text-inherit",
-    initial: "text-current",
-    primary: "text-text-primary dark:text-text-primary-dark",
-    secondary: "text-text-secondary dark:text-text-secondary-dark",
-    disabled: "text-text-disabled dark:text-text-disabled-dark",
-    error: "text-red-600 dark:text-red-500"
-};
-
-const gutterBottomClasses = {
-    h1: "mb-5",
-    h2: "mb-4",
-    h3: "mb-4",
-    h4: "mb-4",
-    h5: "mb-3",
-    h6: "mb-3",
-    subtitle1: "mb-3",
-    subtitle2: "mb-3",
-    body1: "mb-3",
-    body2: "mb-3",
-    inherit: "mb-3",
-    caption: "mb-2",
-    button: "mb-2",
-    label: "mb-2",
-    lead: "mb-4",
-    micro: "mb-1",
-    mono: "mb-2",
-    stat: "mb-1"
-};
-
-const variantToClasses = {
-    h1: "typography-h1",
-    h2: "typography-h2",
-    h3: "typography-h3",
-    h4: "typography-h4",
-    h5: "typography-h5",
-    h6: "typography-h6",
-    subtitle1: "typography-subtitle1",
-    subtitle2: "typography-subtitle2",
-    body1: "typography-body1",
-    body2: "typography-body2",
-    label: "typography-label",
-    inherit: "typography-inherit",
-    caption: "typography-caption",
-    button: "typography-button",
-    lead: "typography-lead",
-    micro: "typography-micro",
-    mono: "typography-mono",
-    stat: "typography-stat"
-};
-
-export function Typography<C extends React.ElementType = "span">(
-    {
-        align = "inherit",
-        color = "primary",
-        children,
-        className,
-        component,
-        gutterBottom = false,
-        noWrap = false,
-        paragraph = false,
-        variant = "body1",
-        variantMapping = typographyVariants,
-        style,
-        onClick,
-        ...other
-    }: TypographyProps<C>
-) {
-    const Component =
-        component ||
-        (paragraph ? "p" : variantMapping[variant] || typographyVariants[variant]) ||
-        "span";
-
-    const classes = cls(
-        variantToClasses[variant],
-        color ? colorToClasses[color] : "",
-        align !== "inherit" && `text-${align}`,
-        gutterBottom && gutterBottomClasses[variant],
-        noWrap && "truncate",
-        paragraph && "mb-3",
-        className
-    );
-
-    return (
-        <Component className={classes}
-                   onClick={onClick}
-                   style={style}
-                   {...other}>
-            {children}
-        </Component>
-    );
-}

package/src/components/VirtualTable/VirtualTable.performance.test.tsx

@@ -1,90 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import React from "react";
-import { render } from "@testing-library/react";
-import { VirtualTable } from "./VirtualTable";
-import { VirtualTableProps } from "./VirtualTableProps";
-
-// Counts executions of the row component body. The real VirtualTableRow is
-// swapped for a memoized stub so the count reflects React's bail-out decision
-// and nothing else.
-const renderCallback = jest.fn();
-jest.mock("./VirtualTableRow", () => {
-    const React = require("react");
-    // Memoized like the real component: without this the stub would re-render
-    // on any parent render and the count would say nothing about the context.
-    const VirtualTableRow = React.memo((props: any) => {
-        renderCallback();
-        return <div data-testid="row">{props.children}</div>;
-    });
-    VirtualTableRow.displayName = "VirtualTableRow";
-    return { VirtualTableRow };
-});
-
-// Fixed bounds: the real hook measures nothing in jsdom, so the list would
-// render zero rows.
-jest.mock("react-use-measure", () => {
-    return () => [
-        (element: any) => {},
-        { width: 500,
-height: 500,
-top: 0,
-left: 0,
-bottom: 0,
-right: 0,
-x: 0,
-y: 0 }
-    ];
-});
-
-// jsdom has no ResizeObserver, and VirtualTable passes the global in as the
-// `react-use-measure` polyfill — the identifier has to resolve even though the
-// mock above means it is never constructed.
-global.ResizeObserver = class ResizeObserver {
-    observe() {}
-    unobserve() {}
-    disconnect() {}
-};
-
-describe("VirtualTable Performance", () => {
-
-    beforeEach(() => {
-        renderCallback.mockClear();
-    });
-
-    it("does not re-render rows when VirtualTable re-renders but data is unchanged", async () => {
-        const columns = [{ key: "col1",
-title: "Column 1",
-width: 100 }];
-        const data = Array.from({ length: 10 }).map((_, i) => ({ col1: `Value ${i}` }));
-        const cellRenderer = () => <div>Cell</div>;
-
-        const props: VirtualTableProps<any> = {
-            data,
-            columns,
-            rowHeight: 50,
-            cellRenderer
-        };
-
-        const { rerender } = render(<VirtualTable {...props}
-            className={"a"}/>);
-
-        const initialRenderCount = renderCallback.mock.calls.length;
-        expect(initialRenderCount).toBe(data.length);
-
-        // `className` is deliberately NOT one of the context memo's dependencies:
-        // changing it forces VirtualTable's body to run again (React.memo on the
-        // table itself would otherwise bail out) while every value the rows read
-        // stays identical.
-        rerender(<VirtualTable {...props}
-            className={"b"}/>);
-
-        // Rows read everything through VirtualListContext, and the value handed
-        // to the provider is memoized. If that memo goes away the provider gets a
-        // fresh object, every Consumer re-runs, and each one hands the row a new
-        // `style` object and a new children array — which defeats React.memo and
-        // re-renders all 10 rows. So an unchanged count is the whole assertion.
-        expect(renderCallback.mock.calls.length).toBe(initialRenderCount);
-    });
-});