@bundle-stats/ui 4.13.0-beta.0 → 4.13.0-beta.2

package/src/components/bundle-packages/index.jsx

@@ -6,9 +6,14 @@ import * as webpack from '@bundle-stats/utils/lib-esm/webpack/compare';
 import { useRowsFilter } from '../../hooks/rows-filter';
 import { useRowsSort } from '../../hooks/rows-sort';
 import { useSearchParams } from '../../hooks/search-params';
-import { useShowEntry } from '../../hooks/show-entry';
+import { useEntryInfo } from '../../hooks/entry-info';
 import { BundlePackages as BundlePackagesComponent } from './bundle-packages';
-import { getDuplicatePackages, getAddRowDuplicateFlag, getRowFilter, getCustomSort } from './bundle-packages.utils';
+import {
+  getDuplicatePackages,
+  getAddRowDuplicateFlag,
+  getRowFilter,
+  getCustomSort,
+} from './bundle-packages.utils';
 
 export const BundlePackages = (props) => {
   const { jobs, search, filters, setState, sortBy, direction, ...restProps } = props;
@@ -55,7 +60,7 @@ export const BundlePackages = (props) => {
     getCustomSort,
   });
 
-  const { hideEntryInfo, showEntryInfo } = useShowEntry({ setState });
+  const [hideEntryInfo, showEntryInfo] = useEntryInfo({ setState });
 
   return (
     <BundlePackagesComponent

package/src/components/metrics-display-selector/metrics-display-selector.tsx

@@ -25,26 +25,22 @@ export const MetricsDisplaySelector = (
         active={value === MetricsDisplayType.TABLE}
         size="small"
         type="button"
+        glyph={Icon.ICONS.TABLE}
         onClick={() => onSelect(MetricsDisplayType.TABLE)}
         className={css.button}
       >
-        <FlexStack space="xxxsmall" alignItems="center">
-          <Icon glyph={Icon.ICONS.TABLE} className={css.icon} />
-          <span>Table</span>
-        </FlexStack>
+        Table
       </Button>
       <Button
         outline
         active={value === MetricsDisplayType.TREEMAP}
         size="small"
         type="button"
+        glyph={Icon.ICONS.TREEMAP}
         onClick={() => onSelect(MetricsDisplayType.TREEMAP)}
         className={cx(css.button)}
       >
-        <FlexStack space="xxxsmall" alignItems="center">
-          <Icon glyph={Icon.ICONS.TREEMAP} className={css.icon} />
-          <span>Treemap</span>
-        </FlexStack>
+        Treemap
       </Button>
     </FlexStack>
   );

package/src/components/metrics-treemap/metrics-treemap.module.css

@@ -12,6 +12,7 @@
   height: 100%;
   fill: var(--color-text);
   font-family: var(--font-family);
+  background: var(--color-outline);
 }
 
 /** Tile overlay fill background transition */
@@ -20,29 +21,31 @@
   transition-property: opacity;
 }
 
-.tileOverlay {
-  fill: var(--color-outline);
+.leafBackground {
+  fill: var(--color-background);
+}
+
+.leafBackdrop {
+  fill: var(--color-background);
   transition: var(--ui-transition-out);
   transition-property: opacity;
-  opacity: 0.4;
+  opacity: 0.2;
 }
 
-.root .tile:hover .tileOverlay {
+.leaf:hover .leafBackdrop {
   transition: var(--ui-transition-in);
-  opacity: 0.8;
+  opacity: 0.5;
 }
 
-/** Tile content */
-.tileContent {
+/** Leaf wrapper button */
+.leafAction {
   appearance: none;
   border: 0;
-  border-radius: none;
+  border-radius: 0;
   padding: 0;
   background: none;
-
   width: 100%;
   height: 100%;
-  padding: var(--space-xxsmall) var(--space-small);
   display: flex;
   align-items: center;
   font-family: var(--font-family-fixed);
@@ -51,78 +54,90 @@
   text-align: left;
 }
 
-.tileContentWrapper {
+.leafContent {
   width: 100%;
-  max-height: 100%;
+  height: 100%;
   display: flex;
   flex-flow: column;
-  gap: 4px;
+  justify-content: center;
+  padding: var(--space-xxsmall) var(--space-xxsmall);
+  gap: var(--space-xxsmall);
+  line-height: var(--line-height-heading);
+}
+
+/** Align label to other elements on the first column leafs */
+.leafWrapper[x="0"] .leafContent {
+  padding-left: var(--space-small);
 }
 
-.tileContentLabel {
-  margin-right: calc(0px - var(--space-xxsmall)); /* take more space if necessary */
-  margin-bottom: calc(0px - 2px);
-  flex: 1 1 auto;
-  max-width: calc(100% + var(--space-xxsmall));  /* take more space if necessary */
+.leadContentLabel {
+  flex: 0 1 auto;
+  width: 100%;
+  min-width: 0;
+  max-height: calc(2em * var(--line-height-heading));
   overflow: hidden;
   word-break: break-word;
 }
 
-.tileContentValue {
+.leadContentValue {
   flex: 0 0 auto;
   max-width: calc(100% + var(--space-xxsmall));
-  margin-right: calc(0px - var(--space-xxsmall)); /* take more space if necessary */
   white-space: nowrap;
   overflow: hidden;
 }
 
-.tileContentMetric {
+.leadContentMetric {
   font-weight: bold;
 }
 
-.tileContentDelta {
+.leadContentDelta {
   margin-left: var(--space-xxxsmall);
 }
 
 /** Tile size variation */
-.tileSmall .tileContent {
+.leafSmall .leafContent {
+  padding: var(--space-xxxsmall) var(--space-xxsmall);
+  gap: 0;
   font-size: var(--size-xsmall);
 }
 
-.tileSmall .tileContentLabel {
+.leafSmall .leadContentLabel {
   margin-top: 0;
 }
 
 /** Tile diff variation */
-.tile-NO_CHANGE .tileContent {
+.leaf-NO_CHANGE .leafBackdrop {
+  fill: transparent;
+}
+
+.leaf-NO_CHANGE .leafAction {
   color: var(--color-text-light);
 }
 
-.tile-HIGH_NEGATIVE .tileOverlay {
+.leaf-HIGH_NEGATIVE .leafBackdrop {
   fill: var(--color-red-100);
 }
 
-.tile-NEGATIVE .tileOverlay {
+.leaf-NEGATIVE .leafBackdrop {
   fill: var(--color-red-50);
 }
 
-.tile-LOW_NEGATIVE .tileOverlay {
+.leaf-LOW_NEGATIVE .leafBackdrop {
   fill: var(--color-red-25);
 }
 
-.tile-LOW_POSITIVE .tileOverlay {
+.leaf-LOW_POSITIVE .leafBackdrop {
   fill: var(--color-green-25);
 }
 
-.tile-POSITIVE .tileOverlay {
+.leaf-POSITIVE .leafBackdrop {
   fill: var(--color-green-50);
 }
 
-.tile-HIGH_POSITIVE .tileOverlay {
+.leaf-HIGH_POSITIVE .leafBackdrop {
   fill: var(--color-green-100);
 }
 
-
 /** empty message */
 .emptyMessage {
   position: absolute;
@@ -140,7 +155,12 @@
   text-align: center;
 }
 
-/** tooltip content */
+/** tooltip */
+.leafContentTooltipAnchor {
+  width: 100%;
+  height: 100%;
+}
+
 .tooltip {
   z-index: var(--layer-xxhigh);
   padding: var(--space-xsmall) var(--space-small);
@@ -154,15 +174,11 @@
   font-size: var(--size-small);
 }
 
-.tooltipArrow {
-  border: var(--space-xxsmall) solid var(--color-background);
-  border-width: var(--space-xxsmall) var(--space-xxsmall) 0;
-  border-left-color: transparent;
-  border-right-color: transparent;
-  position: absolute;
-  top: 100%;
+.leafTooltipArrow svg {
+  display: block;
+  fill: var(--color-background) !important;
 }
 
-.tooltipContentTitle {
+.leafTooltipContentTitle {
   font-size: var(--size-medium);
 }

package/src/components/metrics-treemap/metrics-treemap.tsx

@@ -1,16 +1,9 @@
-import React, { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+import React, { RefObject, forwardRef, useCallback, useMemo, useRef } from 'react';
+import { useDebounce, useHoverDirty, useMeasure, useMouseHovered } from 'react-use';
 import cx from 'classnames';
-import { useMeasure } from 'react-use';
 import type { ReportMetricRow, MetricRunInfo, MetricRunInfoBaseline } from '@bundle-stats/utils';
-import { hierarchy, treemap, treemapSquarify } from 'd3';
-import {
-  FloatingPortal,
-  useClientPoint,
-  useFloating,
-  useHover,
-  useInteractions,
-} from '@floating-ui/react';
-import { arrow, offset } from '@floating-ui/react-dom';
+import { hierarchy, treemap, treemapSquarify, window } from 'd3';
+import { Tooltip, TooltipArrow, TooltipAnchor, useTooltipState, useTooltip } from 'ariakit/tooltip';
 
 import { Stack } from '../../layout/stack';
 import { FileName } from '../../ui/file-name';
@@ -36,10 +29,10 @@ const VERTICAL_SPACING = 4;
 const LINE_HEIGHT = 16;
 const LINE_HEIGHT_SMALL = 13.3;
 
-function resolveTileSizeDisplay(width: number, height: number): TileSizeDisplay {
+function resolveLeafSizeDisplay(width: number, height: number): TileSizeDisplay {
   if (
     height > PADDING_TOP + PADDING_BOTTOM + VERTICAL_SPACING + LINE_HEIGHT * 2 &&
-    width > PADDING_LEFT + PADDING_RIGHT + 96
+    width > PADDING_LEFT + PADDING_RIGHT + 128
   ) {
     return 'default';
   }
@@ -54,19 +47,20 @@ function resolveTileSizeDisplay(width: number, height: number): TileSizeDisplay
   return 'minimal';
 }
 
-interface TooltipContentProps {
-  data: ReportMetricRow;
+interface LeafTooltipContentProps {
+  item: ReportMetricRow;
 }
 
-const TooltipContent = (props: TooltipContentProps) => {
-  const { data } = props;
-  const currentRun = data.runs[0] as MetricRunInfo;
-  const baselineRun = data.runs[data.runs.length - 1] as MetricRunInfoBaseline;
+const LeafTooltipContent = (props: LeafTooltipContentProps) => {
+  const { item } = props;
+
+  const currentRun = item.runs[0] as MetricRunInfo;
+  const baselineRun = item.runs[item.runs.length - 1] as MetricRunInfoBaseline;
 
   return (
-    <Stack space="small" className={css.tooltipContent}>
-      <h3 className={css.tooltipContentTitle}>
-        <FileName as="code" name={data.label} />
+    <Stack space="small" className={css.leafTooltipContent}>
+      <h3 className={css.leafTooltipContentTitle}>
+        <FileName as="code" name={item.label} />
       </h3>
       <RunInfo
         current={currentRun.displayValue}
@@ -78,7 +72,77 @@ const TooltipContent = (props: TooltipContentProps) => {
   );
 };
 
-const TileButton = forwardRef((props: React.ComponentProps<'button'>, ref) => (
+interface LeafContentProps {
+  sizeDisplay: 'minimal' | 'small' | 'default';
+  item: ReportMetricRow;
+  runInfo: MetricRunInfo;
+}
+
+const LeafContent = forwardRef((props: LeafContentProps, ref: React.Ref<HTMLDivElement>) => {
+  const { sizeDisplay, item, runInfo } = props;
+
+  if (sizeDisplay === 'minimal') {
+    return <div className={css.leafContent} ref={ref} />;
+  }
+
+  return (
+    <div className={css.leafContent} ref={ref}>
+      <p className={css.leadContentLabel}>{item.label}</p>
+      {sizeDisplay !== 'small' && (
+        <p className={css.leadContentValue}>
+          <span className={css.leadContentMetric}>{runInfo.displayValue}</span>
+          <Delta
+            className={css.leadContentDelta}
+            displayValue={runInfo.displayDeltaPercentage}
+            deltaType={runInfo.deltaType}
+          />
+        </p>
+      )}
+    </div>
+  );
+});
+
+const LeafContentWithTooltip = (props: LeafContentProps & { parentRef: RefObject<Element> }) => {
+  const { sizeDisplay, item, runInfo, parentRef } = props;
+
+  const pointer = useMouseHovered(parentRef, { whenHovered: true });
+
+  // Return custom rect based on the mouse position
+  const getAnchorRect = useCallback(() => {
+    // Skip custom component rect area if the pointer position is empty
+    if (pointer.docX === 0 && pointer.docY === 0 && pointer.elW === 0 && pointer.elH === 0) {
+      return null;
+    }
+
+    const newRect = {
+      x: pointer.docX - (document?.defaultView?.pageXOffset ?? 0),
+      y: pointer.docY - (document?.defaultView?.pageYOffset ?? 0),
+      w: 1,
+      h: 1,
+    };
+
+    return newRect;
+  }, [pointer.docX, pointer.docY]);
+
+  const tooltipState = useTooltipState({ gutter: 8, getAnchorRect, timeout: 100 });
+
+  // Update tooltip position when poiner values are changing
+  useDebounce(tooltipState.render, 10, [pointer.docX, pointer.docY]);
+
+  return (
+    <>
+      <TooltipAnchor state={tooltipState} className={css.leafContentTooltipAnchor}>
+        <LeafContent sizeDisplay={sizeDisplay} item={item} runInfo={runInfo} />
+      </TooltipAnchor>
+      <Tooltip state={tooltipState} className={css.tooltip}>
+        <TooltipArrow state={tooltipState} size={16} className={css.leafTooltipArrow} />
+        <LeafTooltipContent item={item} />
+      </Tooltip>
+    </>
+  );
+};
+
+const LeafAction = forwardRef((props: React.ComponentProps<'button'>, ref) => (
   // @ts-expect-error
   <button type="button" xmlns="http://www.w3.org/1999/xhtml" ref={ref} {...props} />
 ));
@@ -105,98 +169,61 @@ interface LeafProps {
   onClick?: (id: string) => void;
 }
 
-const Tile = (props: LeafProps) => {
+const Leaf = (props: LeafProps) => {
   const { x, y, width, height, data, onClick } = props;
+
   const { item } = data;
   const runInfo = item.runs?.[0] as MetricRunInfo;
 
-  const [isOpen, setIsOpen] = useState(false);
-  const arrowRef = useRef(null);
-  const { refs, floatingStyles, context, middlewareData } = useFloating({
-    placement: 'top',
-    open: isOpen,
-    onOpenChange: setIsOpen,
-    middleware: [arrow({ element: arrowRef }), offset(16)],
-  });
-  const clientPoint = useClientPoint(context);
-  const hover = useHover(context);
-  const { getReferenceProps, getFloatingProps } = useInteractions([hover, clientPoint]);
-
-  const tileSizeDisplay = useMemo(() => resolveTileSizeDisplay(width, height), [width, height]);
-
-  const handleOnClick = useCallback(() => {
-    if (onClick) {
-      onClick(item.key);
-    }
-  }, [item.key]);
+  const sizeDisplay = useMemo(() => resolveLeafSizeDisplay(width, height), [width, height]);
+  const handleOnClick = useCallback(() => onClick?.(item.key), [item.key]);
+
+  const leafContentRef = useRef<HTMLElement>(null);
+  const hover = useHoverDirty(leafContentRef);
+
+  const leafClassName = cx(
+    css.leaf,
+    css[`leaf-${runInfo.deltaType}`],
+    sizeDisplay === 'small' && css.leafSmall,
+  );
 
   return (
-    <g
-      className={cx(
-        css.tile,
-        !item.changed && css['tile-NO_CHANGE'],
-        css[`tile-${runInfo.deltaType}`],
-        tileSizeDisplay === 'small' && css.tileSmall,
-      )}
-    >
-      <rect x={x} y={y} width={width} height={height} className={css.tileOverlay} />
-      <foreignObject height={height} width={width} x={x} y={y}>
-        <TileButton
-          onClick={handleOnClick}
-          className={css.tileContent}
-          ref={refs.setReference}
-          {...getReferenceProps()}
-        >
-          {tileSizeDisplay !== 'minimal' && (
-            <div className={css.tileContentWrapper}>
-              <p className={css.tileContentLabel}>{item.label}</p>
-              <p className={css.tileContentValue}>
-                <span className={css.tileContentMetric}>{runInfo.displayValue}</span>
-                <Delta
-                  className={css.tileContentDelta}
-                  displayValue={runInfo.displayDeltaPercentage}
-                  deltaType={runInfo.deltaType}
-                />
-              </p>
-            </div>
+    <g className={leafClassName}>
+      <rect x={x} y={y} width={width} height={height} className={css.leafBackground} />
+      <rect x={x} y={y} width={width} height={height} className={css.leafBackdrop} />
+      <foreignObject height={height} width={width} x={x} y={y} className={css.leafWrapper}>
+        <LeafAction onClick={handleOnClick} ref={leafContentRef} className={css.leafAction}>
+          {hover ? (
+            <LeafContentWithTooltip
+              sizeDisplay={sizeDisplay}
+              item={item}
+              runInfo={runInfo}
+              parentRef={leafContentRef}
+            />
+          ) : (
+            <LeafContent sizeDisplay={sizeDisplay} item={item} runInfo={runInfo} />
           )}
-        </TileButton>
-        {isOpen && (
-          <FloatingPortal>
-            <div
-              ref={refs.setFloating}
-              style={floatingStyles}
-              {...getFloatingProps()}
-              className={css.tooltip}
-            >
-              <div
-                ref={arrowRef}
-                style={{ left: middlewareData.arrow?.x }}
-                className={css.tooltipArrow}
-              />
-              <TooltipContent data={item} />
-            </div>
-          </FloatingPortal>
-        )}
+        </LeafAction>
       </foreignObject>
     </g>
   );
 };
 
-interface MetricsTreemapProps {
+interface UseMetricsTreemapHierarchyParams {
   items: Array<ReportMetricRow>;
-  emptyMessage?: React.ReactNode;
-  onItemClick?: (entryId: string) => void;
+  width: number;
+  height: number;
 }
 
-export const MetricsTreemap = (props: MetricsTreemapProps & React.ComponentProps<'div'>) => {
-  const { className = '', items, onItemClick, emptyMessage = 'No data', ...restProps } = props;
-
-  const [containerRef, { width, height }] = useMeasure<HTMLDivElement>();
+function useMetricsTreemapHierarchy(params: UseMetricsTreemapHierarchyParams) {
+  const { items, width, height } = params;
 
   const treemapHierarchy = useMemo(() => {
     const children = items.map((item) => {
-      // set tile value to the largest run value to display the impact of deleted items
+      /**
+       * Set leaf value to the largest run value to allow to
+       * display the impact of deleted / items
+       */
       const values = item.runs.map((run) => run?.value || 0);
       const value = Math.max(...values);
 
@@ -234,29 +261,39 @@ export const MetricsTreemap = (props: MetricsTreemapProps & React.ComponentProps
     return tremapLayout.leaves().filter((leaf) => Boolean(leaf.parent));
   }, [height, width, treemapHierarchy]);
 
+  return cells;
+}
+
+interface MetricsTreemapProps {
+  items: Array<ReportMetricRow>;
+  emptyMessage?: React.ReactNode;
+  onItemClick?: (entryId: string) => void;
+}
+
+export const MetricsTreemap = (props: MetricsTreemapProps & React.ComponentProps<'div'>) => {
+  const { className = '', items, onItemClick, emptyMessage = 'No data', ...restProps } = props;
+
+  const [containerRef, { width, height }] = useMeasure<HTMLDivElement>();
+  const cells = useMetricsTreemapHierarchy({ items, width, height });
+
   return (
     <div className={cx(css.root, className)} {...restProps} ref={containerRef}>
       {cells.length > 0 ? (
-        <svg
-          width={width}
-          height={height}
-          viewBox={`0 0 ${width} ${height}`}
-          className={css.canvas}
-        >
+        <svg viewBox={`0 0 ${width} ${height}`} className={css.canvas}>
           {cells.map((leaf) => {
             if (!leaf.parent) {
               return null;
             }
 
             return (
-              <Tile
+              <Leaf
                 x={leaf.x0}
                 y={leaf.y0}
                 width={leaf.x1 - leaf.x0}
                 height={leaf.y1 - leaf.y0}
                 data={leaf.data as TreeNode}
-                key={leaf.id}
                 onClick={onItemClick}
+                key={leaf.id}
               />
             );
           })}

package/src/hooks/entry-info.ts

@@ -0,0 +1,19 @@
+import { useCallback } from 'react';
+
+interface UseEntryInfoParams {
+  setState: (data: { entryId: string }) => void;
+}
+
+type UseEntryInfo = [() => void, (entryId: string) => void];
+
+/**
+ * Show/hide side panel entry
+ */
+export function useEntryInfo(params: UseEntryInfoParams): UseEntryInfo {
+  const { setState } = params;
+
+  const hideEntryInfo = useCallback(() => setState({ entryId: '' }), [setState]);
+  const showEntryInfo = useCallback((entryId: string) => setState({ entryId }), [setState]);
+
+  return [hideEntryInfo, showEntryInfo];
+}

package/src/query-state.tsx

@@ -30,7 +30,7 @@ export const useComponentQueryState = (componentName: string) => {
 
       setQueryState({ [componentName]: newState });
     },
-    [componentState],
+    [componentState, setQueryState],
   );
 
   return [componentState, setState];

package/src/ui/button/button.module.css

@@ -256,6 +256,7 @@ a.root {
 .small .glyph {
   width: calc(var(--space-xsmall) + 2px);
   height: calc(var(--space-xsmall) + 2px);
+  margin: 1px; /* compensate to keep the same height when the text is not provided */
 }
 
 .medium {

package/types/hooks/entry-info.d.ts

@@ -0,0 +1,8 @@
+interface UseEntryInfoParams {
+    setState: (data: {
+        entryId: string;
+    }) => void;
+}
+type UseEntryInfo = [() => void, (entryId: string) => void];
+export declare function useEntryInfo(params: UseEntryInfoParams): UseEntryInfo;
+export {};

package/lib/hooks/show-entry.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useShowEntry = void 0;
-const react_1 = require("react");
-const useShowEntry = (params) => {
-    const { setState } = params;
-    return (0, react_1.useMemo)(() => ({
-        hideEntryInfo: () => setState({ entryId: '' }),
-        showEntryInfo: (entryId) => setState({ entryId }),
-    }), [setState]);
-};
-exports.useShowEntry = useShowEntry;
-//# sourceMappingURL=show-entry.js.map

package/lib/hooks/show-entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"show-entry.js","sourceRoot":"","sources":["../../src/hooks/show-entry.ts"],"names":[],"mappings":";;;AAAA,iCAAgC;AAMzB,MAAM,YAAY,GAAG,CAAC,MAAwB,EAAE,EAAE;IACvD,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC;IAE5B,OAAO,IAAA,eAAO,EACZ,GAAG,EAAE,CAAC,CAAC;QACL,aAAa,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;QAC9C,aAAa,EAAE,CAAC,OAAe,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;KAC1D,CAAC,EACF,CAAC,QAAQ,CAAC,CACX,CAAC;AACJ,CAAC,CAAC;AAVW,QAAA,YAAY,gBAUvB"}

package/lib-esm/hooks/show-entry.js

@@ -1,9 +0,0 @@
-import { useMemo } from 'react';
-export const useShowEntry = (params) => {
-    const { setState } = params;
-    return useMemo(() => ({
-        hideEntryInfo: () => setState({ entryId: '' }),
-        showEntryInfo: (entryId) => setState({ entryId }),
-    }), [setState]);
-};
-//# sourceMappingURL=show-entry.js.map

package/lib-esm/hooks/show-entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"show-entry.js","sourceRoot":"","sources":["../../src/hooks/show-entry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAMhC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,MAAwB,EAAE,EAAE;IACvD,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC;IAE5B,OAAO,OAAO,CACZ,GAAG,EAAE,CAAC,CAAC;QACL,aAAa,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;QAC9C,aAAa,EAAE,CAAC,OAAe,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;KAC1D,CAAC,EACF,CAAC,QAAQ,CAAC,CACX,CAAC;AACJ,CAAC,CAAC"}

package/src/hooks/show-entry.ts

@@ -1,17 +0,0 @@
-import { useMemo } from 'react';
-
-interface UseEntryIdParams {
-  setState: (data: { entryId: string }) => void;
-}
-
-export const useShowEntry = (params: UseEntryIdParams) => {
-  const { setState } = params;
-
-  return useMemo(
-    () => ({
-      hideEntryInfo: () => setState({ entryId: '' }),
-      showEntryInfo: (entryId: string) => setState({ entryId }),
-    }),
-    [setState],
-  );
-};