@sybilion/uilib 1.3.23 → 1.3.26

package/src/components/ui/Tooltip/Tooltip.tsx

@@ -1,4 +1,13 @@
 import cn from 'classnames';
+import {
+  type Ref,
+  createContext,
+  useCallback,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+} from 'react';
 
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
@@ -10,6 +19,83 @@ import type {
   TooltipTriggerProps,
 } from './Tooltip.types';
 
+type TooltipContextValue = {
+  triggerRef: React.RefObject<HTMLElement | null>;
+};
+
+const TooltipContext = createContext<TooltipContextValue | null>(null);
+
+function composeRefs<T>(...refs: (Ref<T> | undefined)[]) {
+  return (node: T | null) => {
+    for (const ref of refs) {
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    }
+  };
+}
+
+function getPopperWrapper(contentEl: HTMLElement): HTMLElement | null {
+  const wrapper = contentEl.parentElement;
+  if (!wrapper?.hasAttribute('data-radix-popper-content-wrapper')) return null;
+
+  return wrapper;
+}
+
+const OVER_TRIGGER_OFFSET = { left: -10, top: -6 };
+
+function applyOverTriggerStyles(
+  contentEl: HTMLElement,
+  triggerEl: HTMLElement,
+) {
+  const wrapper = getPopperWrapper(contentEl);
+  if (!wrapper) return;
+
+  const rect = triggerEl.getBoundingClientRect();
+  const computed = window.getComputedStyle(triggerEl);
+
+  wrapper.style.setProperty('position', 'fixed', 'important');
+  wrapper.style.setProperty(
+    'left',
+    `${rect.left + OVER_TRIGGER_OFFSET.left}px`,
+    'important',
+  );
+  wrapper.style.setProperty(
+    'top',
+    `${rect.top + OVER_TRIGGER_OFFSET.top}px`,
+    'important',
+  );
+  wrapper.style.setProperty('transform', 'none', 'important');
+  wrapper.style.setProperty('min-width', '0', 'important');
+  wrapper.style.setProperty('width', `${rect.width}px`, 'important');
+
+  contentEl.style.width = '100%';
+  contentEl.style.boxSizing = 'border-box';
+  contentEl.style.fontSize = computed.fontSize;
+  contentEl.style.lineHeight = computed.lineHeight;
+}
+
+function clearOverTriggerStyles(contentEl: HTMLElement | null) {
+  if (!contentEl) return;
+
+  const wrapper = getPopperWrapper(contentEl);
+  if (!wrapper) return;
+
+  wrapper.style.removeProperty('position');
+  wrapper.style.removeProperty('left');
+  wrapper.style.removeProperty('top');
+  wrapper.style.removeProperty('transform');
+  wrapper.style.removeProperty('min-width');
+  wrapper.style.removeProperty('width');
+
+  contentEl.style.removeProperty('width');
+  contentEl.style.removeProperty('box-sizing');
+  contentEl.style.removeProperty('font-size');
+  contentEl.style.removeProperty('line-height');
+}
+
 function TooltipProvider({
   delayDuration = 0,
   ...props
@@ -23,16 +109,31 @@ function TooltipProvider({
   );
 }
 
-function Tooltip(props: TooltipProps) {
+function Tooltip({ children, ...props }: TooltipProps) {
+  const triggerRef = useRef<HTMLElement | null>(null);
+  const contextValue = useMemo(() => ({ triggerRef }), []);
+
   return (
     <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+      <TooltipContext.Provider value={contextValue}>
+        <TooltipPrimitive.Root data-slot="tooltip" {...props}>
+          {children}
+        </TooltipPrimitive.Root>
+      </TooltipContext.Provider>
     </TooltipProvider>
   );
 }
 
-function TooltipTrigger({ ...props }: TooltipTriggerProps) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+function TooltipTrigger({ ref, ...props }: TooltipTriggerProps) {
+  const context = useContext(TooltipContext);
+
+  return (
+    <TooltipPrimitive.Trigger
+      ref={context ? composeRefs(context.triggerRef, ref) : ref}
+      data-slot="tooltip-trigger"
+      {...props}
+    />
+  );
 }
 
 function TooltipContent({
@@ -40,22 +141,69 @@ function TooltipContent({
   sideOffset = 0,
   children,
   maxWidth,
+  overTrigger = false,
+  align,
+  side,
+  avoidCollisions,
+  style: styleProp,
   ...props
 }: TooltipContentProps) {
-  const style = { ...props.style };
+  const context = useContext(TooltipContext);
+  const contentRef = useRef<HTMLDivElement | null>(null);
+
+  const updateOverTriggerPosition = useCallback(() => {
+    const triggerEl = context?.triggerRef.current;
+    const contentEl = contentRef.current;
+    if (!overTrigger || !triggerEl || !contentEl) return;
+
+    applyOverTriggerStyles(contentEl, triggerEl);
+  }, [context, overTrigger]);
+
+  useLayoutEffect(() => {
+    if (!overTrigger) return;
+
+    let frameId = 0;
+
+    const tick = () => {
+      updateOverTriggerPosition();
+      frameId = requestAnimationFrame(tick);
+    };
+
+    tick();
+
+    window.addEventListener('scroll', updateOverTriggerPosition, true);
+    window.addEventListener('resize', updateOverTriggerPosition);
+
+    return () => {
+      cancelAnimationFrame(frameId);
+      window.removeEventListener('scroll', updateOverTriggerPosition, true);
+      window.removeEventListener('resize', updateOverTriggerPosition);
+      clearOverTriggerStyles(contentRef.current);
+    };
+  }, [overTrigger, updateOverTriggerPosition]);
+
+  const style = { ...styleProp };
   if (maxWidth) style.maxWidth = `${maxWidth}px`;
 
   return (
     <TooltipPrimitive.Portal>
       <TooltipPrimitive.Content
+        ref={contentRef}
         data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        className={cn(S.tooltipContent, className)}
+        side={overTrigger ? 'bottom' : side}
+        align={overTrigger ? 'start' : align}
+        sideOffset={overTrigger ? 0 : sideOffset}
+        avoidCollisions={overTrigger ? false : avoidCollisions}
+        className={cn(
+          S.tooltipContent,
+          overTrigger && S.tooltipContentOverTrigger,
+          className,
+        )}
         {...props}
         style={style}
       >
         {children}
-        <TooltipPrimitive.Arrow className={S.tooltipArrow} />
+        {!overTrigger && <TooltipPrimitive.Arrow className={S.tooltipArrow} />}
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   );

package/src/components/ui/Tooltip/Tooltip.types.ts

@@ -20,4 +20,5 @@ export interface TooltipContentProps extends React.ComponentProps<
   className?: string;
   sideOffset?: number;
   maxWidth?: number;
+  overTrigger?: boolean;
 }

package/src/components/widgets/PerformanceChart/HorizonsSelector/HorizonsSelector.styl

@@ -0,0 +1,25 @@
+@import '../../../../lib/theme.styl'
+
+.root
+  display flex
+  align-items center
+  justify-content flex-end
+  gap var(--p-4)
+  flex-grow 1
+
+.horizonsLabel
+  font-size 14px
+  color var(--foreground)
+  font-weight 500
+
+.horizonsButtons
+  display flex
+  gap var(--p-2)
+
+.horizonButton
+  min-width 40px
+
+.infoIcon
+  margin-left 4px
+  font-size 12px
+  opacity 0.6

package/src/components/widgets/PerformanceChart/HorizonsSelector/HorizonsSelector.styl.d.ts

@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'horizonButton': string;
+  'horizonsButtons': string;
+  'horizonsLabel': string;
+  'infoIcon': string;
+  'root': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/widgets/PerformanceChart/HorizonsSelector/HorizonsSelector.tsx

@@ -0,0 +1,67 @@
+import { useMemo } from 'react';
+
+import { Tabs, TabsList, TabsTrigger } from '#uilib/components/ui/Tabs';
+import { useThrottledCallback } from '#uilib/hooks/useThrottledCallback';
+
+import S from './HorizonsSelector.styl';
+
+interface HorizonsSelectorProps {
+  selectedHorizon: string;
+  onHorizonChange: (horizon: string) => void;
+  availableHorizons: string[];
+}
+
+export function HorizonsSelector({
+  selectedHorizon,
+  onHorizonChange,
+  availableHorizons,
+}: HorizonsSelectorProps) {
+  const horizons = useMemo(() => {
+    return availableHorizons
+      .sort((a, b) => {
+        // Sort by horizon number: horizon_1, horizon_2, etc.
+        const numA = parseInt(a.replace('horizon_', ''), 10);
+        const numB = parseInt(b.replace('horizon_', ''), 10);
+        return numA - numB;
+      })
+      .map(horizon => {
+        const num = horizon.replace('horizon_', '');
+        return {
+          value: horizon,
+          label: num,
+        };
+      });
+  }, [availableHorizons]);
+
+  const onChangeThrottled = useThrottledCallback(onHorizonChange, 300);
+
+  if (horizons.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={S.root}>
+      <span className={S.horizonsLabel}>Planning horizon in months:</span>
+      <Tabs
+        value={selectedHorizon}
+        onValueChange={onHorizonChange}
+        variant="button"
+      >
+        <TabsList>
+          {horizons.map(horizon => (
+            <TabsTrigger
+              key={horizon.value}
+              value={horizon.value}
+              onPointerMove={() => {
+                if (selectedHorizon !== horizon.value)
+                  onChangeThrottled(horizon.value);
+              }}
+            >
+              {horizon.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </Tabs>
+    </div>
+  );
+}

package/src/components/widgets/PerformanceChart/PerformanceChart.constants.ts

@@ -0,0 +1,17 @@
+export const METRICS_KEY = '24m' as const;
+export const MONTHS_24 = 24;
+
+export const MONTH_NAMES = [
+  'Jan',
+  'Feb',
+  'Mar',
+  'Apr',
+  'May',
+  'Jun',
+  'Jul',
+  'Aug',
+  'Sep',
+  'Oct',
+  'Nov',
+  'Dec',
+];

package/src/components/widgets/PerformanceChart/PerformanceChart.styl

@@ -0,0 +1,194 @@
+@import '../../../lib/theme.styl'
+
+.root
+  display flex
+  flex-direction column
+  width 100%
+  flex 1
+  min-height 0
+  transition opacity 300ms ease-out
+
+.viewTabs
+  display flex
+  flex-direction column
+  width 100%
+  flex 1
+  min-height 0
+
+.toolbarRow
+  display flex
+  flex-direction row
+  align-items center
+  flex-wrap wrap
+  gap var(--p-4)
+  margin-bottom var(--p-4)
+  width 100%
+
+.toolBarRight
+  flex-grow 1
+  display flex
+  align-items center
+  justify-content flex-end
+  gap var(--p-4)
+
+.viewTabsList
+  display inline-flex
+  align-items center
+  flex-wrap wrap
+  gap var(--p-2)
+  margin-bottom 0
+  background-color transparent
+  flex-shrink 0
+
+.perHorizonChartWrap
+  position relative
+  width 100%
+  min-height var(--chart-height)
+
+.perHorizonChartWrapLoading
+  .chartContainer
+    opacity 0.3
+    pointer-events none
+
+  :global(.recharts-line-dots)
+    display none
+
+.performanceLoadingLayer
+  position absolute
+  inset 0
+  z-index 10
+  pointer-events none
+
+.chartEmptyOverlay
+  position absolute
+  inset 0
+  z-index 11
+  display flex
+  align-items center
+  justify-content center
+  padding var(--p-6)
+  pointer-events none
+
+  a
+    pointer-events auto
+
+.performanceLoadingText
+  font-size 16px
+  font-weight 500
+  color var(--foreground)
+
+.loading
+  opacity 0.5
+
+.loaded
+  opacity 1
+
+.chartContainer
+  margin-left calc(-1 * var(--page-x-padding) + 26px)
+  width calc(100% + 60px)
+  max-width @width
+  transition opacity 300ms ease-out
+
+  [data-slot="skeleton"]
+    position relative
+    height 100% !important
+    width 100% !important
+    filter opacity(0.6)
+
+    .loaded &
+      opacity 0
+
+  svg
+    overflow visible
+
+  @media (max-width: unit(MOBILE, 'px'))
+    margin-left calc(-1 * var(--page-x-padding) + 10px)
+    width calc(100% + 30px)
+    max-width @width
+
+.isEmpty
+  .chartContainer
+    opacity 0.3
+    pointer-events none
+
+  :global(.recharts-line-dots)
+    display none
+
+.tableSection
+  --side-margin: calc(var(--page-x-padding) * -1)
+  margin var(--p-6) var(--side-margin) 0 var(--side-margin)
+  display flex
+  flex-direction column
+  gap var(--p-4)
+
+.tableWrapper
+  position relative
+
+.tableContainer
+  position relative
+  width 100%
+  overflow-x auto
+
+.table
+  background var(--card)
+  border-radius 14px
+  box-shadow inset 0 0 0 1px var(--border)
+
+  th:first-child
+  td:first-child
+    padding-left var(--p-10) !important
+
+  td:last-child
+  th:last-child
+    padding-right 0 !important
+
+.tableCustomDataFooterRow
+  td
+    text-align center
+    border-top 1px solid var(--border)
+    vertical-align middle
+
+.tableCustomDataFooterCell:first-child:last-child
+  padding 0 !important
+  text-align center
+
+  button
+    width calc(100% - 2px)
+    height calc(100% - 2px)
+    border-radius 0
+
+.scrollbar
+  bottom calc(var(--p-7) * -1 + 2px) !important
+
+.forecastCell
+  display flex
+  align-items center
+  gap 8px
+
+.colorCircle
+  width 5px
+  height 20px
+  border-radius 10px
+  flex-shrink 0
+  margin-left -10px
+
+.emptyState
+  position absolute
+  z-index 1
+  top calc(50% - 4em)
+  left 0
+  width 100%
+  display block
+  text-align center
+  padding var(--p-4) var(--p-10)
+  color var(--muted-foreground)
+
+  .performanceLoadingLayer &
+    color var(--foreground)
+
+  a
+    padding 0 var(--p-1)
+    text-decoration underline
+
+    &:hover
+      color var(--sb-cyan-400)

package/src/components/widgets/PerformanceChart/PerformanceChart.styl.d.ts

@@ -0,0 +1,30 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'chartContainer': string;
+  'chartEmptyOverlay': string;
+  'colorCircle': string;
+  'emptyState': string;
+  'forecastCell': string;
+  'isEmpty': string;
+  'loaded': string;
+  'loading': string;
+  'perHorizonChartWrap': string;
+  'perHorizonChartWrapLoading': string;
+  'performanceLoadingLayer': string;
+  'performanceLoadingText': string;
+  'root': string;
+  'scrollbar': string;
+  'table': string;
+  'tableContainer': string;
+  'tableCustomDataFooterCell': string;
+  'tableCustomDataFooterRow': string;
+  'tableSection': string;
+  'tableWrapper': string;
+  'toolBarRight': string;
+  'toolbarRow': string;
+  'viewTabs': string;
+  'viewTabsList': string;
+}
+export const cssExports: CssExports;
+export default cssExports;