From b01450e7064fde92e9ecd089e723448eef5df39f Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Wed, 23 Jul 2025 11:31:37 -0600 Subject: [PATCH] fix workspace settings --- .vscode/buster.code-workspace | 3 +- packages/ui-components/package.json | 5 +- .../BusterChartLegend/BusterChartLegend.tsx | 45 +++++--- .../BusterChartLegendWrapper.tsx | 108 +++++++++--------- .../src/components/typography/ShimmerText.tsx | 56 +++------ packages/ui-components/vite.config.ts | 1 + pnpm-lock.yaml | 34 ++---- 7 files changed, 115 insertions(+), 137 deletions(-) diff --git a/.vscode/buster.code-workspace b/.vscode/buster.code-workspace index 8e8b620e4..af98d5932 100644 --- a/.vscode/buster.code-workspace +++ b/.vscode/buster.code-workspace @@ -18,7 +18,8 @@ { "path": "../packages/typescript-config" }, { "path": "../packages/vitest-config" }, { "path": "../packages/web-tools" }, - { "path": "../packages/sandbox" } + { "path": "../packages/sandbox" }, + { "path": "../packages/ui-components" } ], "settings": { "editor.defaultFormatter": "biomejs.biome", diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json index 8f6758381..885b41904 100644 --- a/packages/ui-components/package.json +++ b/packages/ui-components/package.json @@ -12,7 +12,10 @@ "./styles": "./src/styles/styles.css", "./dist/style.css": "./dist/style.css" }, - "files": ["dist", "src/styles/styles.css"], + "files": [ + "dist", + "src/styles/styles.css" + ], "scripts": { "prebuild": "tsx scripts/validate-env.ts", "build": "vite build && tsc --emitDeclarationOnly --declaration", diff --git a/packages/ui-components/src/components/charts/BusterChartLegend/BusterChartLegend.tsx b/packages/ui-components/src/components/charts/BusterChartLegend/BusterChartLegend.tsx index e85bbd234..af2761b3e 100644 --- a/packages/ui-components/src/components/charts/BusterChartLegend/BusterChartLegend.tsx +++ b/packages/ui-components/src/components/charts/BusterChartLegend/BusterChartLegend.tsx @@ -1,13 +1,13 @@ -'use client'; +"use client"; -import { useMemoizedFn } from '@/hooks/useMemoizedFn'; -import { AnimatePresence, motion } from 'framer-motion'; -import React, { useMemo, useRef } from 'react'; -import { ErrorBoundary } from '../../error'; -import { LegendItem } from './LegendItem'; -import { OverflowButton } from './OverflowContainer'; -import { computeHiddenShowItems } from './helpers'; -import type { BusterChartLegendProps } from './interfaces'; +import { useMemoizedFn } from "@/hooks/useMemoizedFn"; +import { AnimatePresence, motion } from "framer-motion"; +import React, { useMemo, useRef } from "react"; +import { ErrorBoundary } from "../../error"; +import { LegendItem } from "./LegendItem"; +import { OverflowButton } from "./OverflowContainer"; +import { computeHiddenShowItems } from "./helpers"; +import type { BusterChartLegendProps } from "./interfaces"; export const BusterChartLegend: React.FC = React.memo( ({ @@ -28,13 +28,16 @@ export const BusterChartLegend: React.FC = React.memo( return { shownItems: [], hiddenItems: [] }; } - const { shownItems, hiddenItems } = computeHiddenShowItems(legendItems, legendWidth); + const { shownItems, hiddenItems } = computeHiddenShowItems( + legendItems, + legendWidth + ); return { shownItems, hiddenItems }; }, [legendItems, legendWidth, show]); const legendKey = useMemo(() => { - return legendItems.map((item) => item.id).join(''); + return legendItems.map((item) => item.id).join(""); }, [legendItems]); const hasOverflowButtons = hiddenItems.length > 0; @@ -47,8 +50,8 @@ export const BusterChartLegend: React.FC = React.memo( const hasHeadline = !completedInitialAnimation.current ? showLegendHeadline : legendItems.some((item) => item.headline); - if (hasHeadline) return '38px'; - return '24px'; + if (hasHeadline) return "38px"; + return "24px"; }, [legendItems, showLegendHeadline]); const memoizedAnimation = useMemo(() => { @@ -56,8 +59,10 @@ export const BusterChartLegend: React.FC = React.memo( return { initial: { - height: show && !completedInitialAnimation.current ? initialHeight : 0, - minHeight: show && !completedInitialAnimation.current ? initialHeight : 0, + height: + show && !completedInitialAnimation.current ? initialHeight : 0, + minHeight: + show && !completedInitialAnimation.current ? initialHeight : 0, }, animate: { height: showLegend ? initialHeight : 0, @@ -96,9 +101,13 @@ export const BusterChartLegend: React.FC = React.memo( }, [animateLegend, showLegend, show]); return ( - Error rendering legend}> + Error rendering legend + } + > @@ -136,4 +145,4 @@ export const BusterChartLegend: React.FC = React.memo( } ); -BusterChartLegend.displayName = 'BusterChartLegend'; +BusterChartLegend.displayName = "BusterChartLegend"; diff --git a/packages/ui-components/src/components/charts/BusterChartLegend/BusterChartLegendWrapper.tsx b/packages/ui-components/src/components/charts/BusterChartLegend/BusterChartLegendWrapper.tsx index ea5078a1a..f96b576a0 100644 --- a/packages/ui-components/src/components/charts/BusterChartLegend/BusterChartLegendWrapper.tsx +++ b/packages/ui-components/src/components/charts/BusterChartLegend/BusterChartLegendWrapper.tsx @@ -1,13 +1,13 @@ -import { cn } from '@/lib/classMerge'; -import type { ShowLegendHeadline } from '@buster/server-shared/metrics'; -import React from 'react'; -import { BusterChartLegend, type BusterChartLegendItem } from '.'; -import CircleSpinnerLoader from '../../loaders/CircleSpinnerLoader'; +import { cn } from "@/lib/classMerge"; +import type { ShowLegendHeadline } from "@buster/server-shared/metrics"; +import React from "react"; +import { BusterChartLegend, type BusterChartLegendItem } from "."; +import CircleSpinnerLoader from "../../loaders/CircleSpinnerLoader"; import { ChartLegendWrapperProvider, useChartWrapperContextSelector, -} from '../chartHooks/useChartWrapperProvider'; -import { DownsampleAlert } from './DownsampleAlert'; +} from "../chartHooks/useChartWrapperProvider"; +import { DownsampleAlert } from "./DownsampleAlert"; export type BusterChartLegendWrapper = { children: React.ReactNode; @@ -25,53 +25,59 @@ export type BusterChartLegendWrapper = { onLegendItemFocus: ((item: BusterChartLegendItem) => void) | undefined; }; -export const BusterChartLegendWrapper: React.FC = React.memo( - ({ - children, - renderLegend, - legendItems, - showLegend, - showLegendHeadline, - inactiveDatasets, - animateLegend, - className, - isUpdatingChart, - isDownsampled, - onHoverItem, - onLegendItemClick, - onLegendItemFocus, - }) => { - const width = useChartWrapperContextSelector(({ width }) => width); +export const BusterChartLegendWrapper: React.FC = + React.memo( + ({ + children, + renderLegend, + legendItems, + showLegend, + showLegendHeadline, + inactiveDatasets, + animateLegend, + className, + isUpdatingChart, + isDownsampled, + onHoverItem, + onLegendItemClick, + onLegendItemFocus, + }) => { + const width = useChartWrapperContextSelector(({ width }) => width); - return ( - -
- {renderLegend && ( - - )} + return ( + +
+ {renderLegend && ( + + )} -
- {isUpdatingChart && } - {children} - {isDownsampled && } +
+ {isUpdatingChart && } + {children} + {isDownsampled && ( + + )} +
-
- - ); - } -); -BusterChartLegendWrapper.displayName = 'BusterChartLegendWrapper'; + + ); + } + ); +BusterChartLegendWrapper.displayName = "BusterChartLegendWrapper"; const LoadingOverlay = () => { return ( diff --git a/packages/ui-components/src/components/typography/ShimmerText.tsx b/packages/ui-components/src/components/typography/ShimmerText.tsx index 692cafabf..eaae3d1a2 100644 --- a/packages/ui-components/src/components/typography/ShimmerText.tsx +++ b/packages/ui-components/src/components/typography/ShimmerText.tsx @@ -1,10 +1,8 @@ 'use client'; import { cn } from '@/lib/classMerge'; -import { type MotionProps, motion } from 'framer-motion'; -import React, { useMemo } from 'react'; - -interface ShimmerText2Props { +import React from 'react'; +interface ShimmerTextProps { text: string; colors?: string[]; duration?: number; @@ -12,11 +10,7 @@ interface ShimmerText2Props { className?: string; } -const animate = { - backgroundPosition: ['200% 50%', '0% 50%'], -}; - -export const ShimmerText: React.FC = React.memo( +export const ShimmerText: React.FC = React.memo( ({ text, colors = ['var(--color-foreground)', 'var(--color-text-tertiary)'], @@ -30,38 +24,20 @@ export const ShimmerText: React.FC = React.memo( const gradientColors = [...colors, colors[0]].join(', '); - const memoizedStyle: MotionProps['style'] = useMemo(() => { - return { - position: 'relative', - display: 'inline-block', - background: `linear-gradient(90deg, ${gradientColors})`, - backgroundSize: '200% 100%', - backgroundClip: 'text', - WebkitBackgroundClip: 'text', - WebkitTextFillColor: 'transparent', - fontSize: fontSize, - }; - }, [gradientColors, fontSize]); - - const memoizedTransition: MotionProps['transition'] = useMemo(() => { - return { - duration, - repeat: Number.POSITIVE_INFINITY, - ease: 'linear', - }; - }, [duration]); - return ( - <> - - {text} - - +
+ {text} +
); } ); diff --git a/packages/ui-components/vite.config.ts b/packages/ui-components/vite.config.ts index b85c2730f..82172b7ab 100644 --- a/packages/ui-components/vite.config.ts +++ b/packages/ui-components/vite.config.ts @@ -9,6 +9,7 @@ export default defineConfig({ lib: { entry: resolve(__dirname, 'src/index.ts'), formats: ['es'], + fileName: () => 'index.js', }, rollupOptions: { external: ['react', 'react-dom'], diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3e08bf325..fe52c8779 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17601,23 +17601,23 @@ snapshots: chai: 5.2.0 tinyrainbow: 2.0.0 - '@vitest/mocker@3.2.4(msw@2.10.4(@types/node@20.19.4)(typescript@5.8.3))(vite@6.3.5(@types/node@20.19.4)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.2)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0))': + '@vitest/mocker@3.2.4(msw@2.10.4(@types/node@20.19.4)(typescript@5.8.3))(vite@7.0.5(@types/node@20.19.4)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.2)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0))': dependencies: '@vitest/spy': 3.2.4 estree-walker: 3.0.3 magic-string: 0.30.17 optionalDependencies: msw: 2.10.4(@types/node@20.19.4)(typescript@5.8.3) - vite: 6.3.5(@types/node@20.19.4)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.2)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0) + vite: 7.0.5(@types/node@20.19.4)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.2)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0) - '@vitest/mocker@3.2.4(msw@2.10.4(@types/node@24.0.10)(typescript@5.8.3))(vite@6.3.5(@types/node@24.0.10)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.2)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0))': + '@vitest/mocker@3.2.4(msw@2.10.4(@types/node@24.0.10)(typescript@5.8.3))(vite@7.0.5(@types/node@24.0.10)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.2)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0))': dependencies: '@vitest/spy': 3.2.4 estree-walker: 3.0.3 magic-string: 0.30.17 optionalDependencies: msw: 2.10.4(@types/node@24.0.10)(typescript@5.8.3) - vite: 6.3.5(@types/node@24.0.10)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.2)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0) + vite: 7.0.5(@types/node@24.0.10)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.2)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0) '@vitest/pretty-format@2.0.5': dependencies: @@ -24159,24 +24159,6 @@ snapshots: - supports-color - typescript - vite@6.3.5(@types/node@20.19.4)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.2)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0): - dependencies: - esbuild: 0.25.5 - fdir: 6.4.6(picomatch@4.0.2) - picomatch: 4.0.2 - postcss: 8.5.6 - rollup: 4.44.2 - tinyglobby: 0.2.14 - optionalDependencies: - '@types/node': 20.19.4 - fsevents: 2.3.3 - jiti: 2.4.2 - lightningcss: 1.30.1 - sass: 1.89.2 - terser: 5.43.1 - tsx: 4.20.3 - yaml: 2.8.0 - vite@6.3.5(@types/node@24.0.10)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.2)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0): dependencies: esbuild: 0.25.5 @@ -24235,7 +24217,7 @@ snapshots: dependencies: '@types/chai': 5.2.2 '@vitest/expect': 3.2.4 - '@vitest/mocker': 3.2.4(msw@2.10.4(@types/node@20.19.4)(typescript@5.8.3))(vite@6.3.5(@types/node@20.19.4)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.2)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0)) + '@vitest/mocker': 3.2.4(msw@2.10.4(@types/node@20.19.4)(typescript@5.8.3))(vite@7.0.5(@types/node@20.19.4)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.2)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0)) '@vitest/pretty-format': 3.2.4 '@vitest/runner': 3.2.4 '@vitest/snapshot': 3.2.4 @@ -24253,7 +24235,7 @@ snapshots: tinyglobby: 0.2.14 tinypool: 1.1.1 tinyrainbow: 2.0.0 - vite: 6.3.5(@types/node@20.19.4)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.2)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0) + vite: 7.0.5(@types/node@20.19.4)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.2)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0) vite-node: 3.2.4(@types/node@20.19.4)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.2)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0) why-is-node-running: 2.3.0 optionalDependencies: @@ -24280,7 +24262,7 @@ snapshots: dependencies: '@types/chai': 5.2.2 '@vitest/expect': 3.2.4 - '@vitest/mocker': 3.2.4(msw@2.10.4(@types/node@24.0.10)(typescript@5.8.3))(vite@6.3.5(@types/node@24.0.10)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.2)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0)) + '@vitest/mocker': 3.2.4(msw@2.10.4(@types/node@24.0.10)(typescript@5.8.3))(vite@7.0.5(@types/node@24.0.10)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.2)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0)) '@vitest/pretty-format': 3.2.4 '@vitest/runner': 3.2.4 '@vitest/snapshot': 3.2.4 @@ -24298,7 +24280,7 @@ snapshots: tinyglobby: 0.2.14 tinypool: 1.1.1 tinyrainbow: 2.0.0 - vite: 6.3.5(@types/node@24.0.10)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.2)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0) + vite: 7.0.5(@types/node@24.0.10)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.2)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0) vite-node: 3.2.4(@types/node@24.0.10)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.2)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0) why-is-node-running: 2.3.0 optionalDependencies: