Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix workspace settings

This commit is contained in:
Nate Kelley 2025-07-23 11:31:37 -06:00
parent 4723e97c99
commit b01450e706
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
7 changed files with 115 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/buster.code-workspace vendored
View File

@ -18,7 +18,8 @@
{ "path": "../packages/typescript-config" }, { "path": "../packages/typescript-config" },
{ "path": "../packages/vitest-config" }, { "path": "../packages/vitest-config" },
{ "path": "../packages/web-tools" }, { "path": "../packages/web-tools" },
{ "path": "../packages/sandbox" } { "path": "../packages/sandbox" },
{ "path": "../packages/ui-components" }
], ],
"settings": { "settings": {
"editor.defaultFormatter": "biomejs.biome", "editor.defaultFormatter": "biomejs.biome",

5
packages/ui-components/package.json
View File

@ -12,7 +12,10 @@
"./styles": "./src/styles/styles.css", "./styles": "./src/styles/styles.css",
"./dist/style.css": "./dist/style.css" "./dist/style.css": "./dist/style.css"
}, },
"files": ["dist", "src/styles/styles.css"], "files": [
"dist",
"src/styles/styles.css"
],
"scripts": { "scripts": {
"prebuild": "tsx scripts/validate-env.ts", "prebuild": "tsx scripts/validate-env.ts",
"build": "vite build && tsc --emitDeclarationOnly --declaration", "build": "vite build && tsc --emitDeclarationOnly --declaration",

45
packages/ui-components/src/components/charts/BusterChartLegend/BusterChartLegend.tsx
View File

@ -1,13 +1,13 @@
'use client'; "use client";
import { useMemoizedFn } from '@/hooks/useMemoizedFn'; import { useMemoizedFn } from "@/hooks/useMemoizedFn";
import { AnimatePresence, motion } from 'framer-motion'; import { AnimatePresence, motion } from "framer-motion";
import React, { useMemo, useRef } from 'react'; import React, { useMemo, useRef } from "react";
import { ErrorBoundary } from '../../error'; import { ErrorBoundary } from "../../error";
import { LegendItem } from './LegendItem'; import { LegendItem } from "./LegendItem";
import { OverflowButton } from './OverflowContainer'; import { OverflowButton } from "./OverflowContainer";
import { computeHiddenShowItems } from './helpers'; import { computeHiddenShowItems } from "./helpers";
import type { BusterChartLegendProps } from './interfaces'; import type { BusterChartLegendProps } from "./interfaces";
export const BusterChartLegend: React.FC<BusterChartLegendProps> = React.memo( export const BusterChartLegend: React.FC<BusterChartLegendProps> = React.memo(
({ ({
@ -28,13 +28,16 @@ export const BusterChartLegend: React.FC<BusterChartLegendProps> = React.memo(
return { shownItems: [], hiddenItems: [] }; return { shownItems: [], hiddenItems: [] };
} }
const { shownItems, hiddenItems } = computeHiddenShowItems(legendItems, legendWidth); const { shownItems, hiddenItems } = computeHiddenShowItems(
legendItems,
legendWidth
);
return { shownItems, hiddenItems }; return { shownItems, hiddenItems };
}, [legendItems, legendWidth, show]); }, [legendItems, legendWidth, show]);
const legendKey = useMemo(() => { const legendKey = useMemo(() => {
return legendItems.map((item) => item.id).join(''); return legendItems.map((item) => item.id).join("");
}, [legendItems]); }, [legendItems]);
const hasOverflowButtons = hiddenItems.length > 0; const hasOverflowButtons = hiddenItems.length > 0;
@ -47,8 +50,8 @@ export const BusterChartLegend: React.FC<BusterChartLegendProps> = React.memo(
const hasHeadline = !completedInitialAnimation.current const hasHeadline = !completedInitialAnimation.current
? showLegendHeadline ? showLegendHeadline
: legendItems.some((item) => item.headline); : legendItems.some((item) => item.headline);
if (hasHeadline) return '38px'; if (hasHeadline) return "38px";
return '24px'; return "24px";
}, [legendItems, showLegendHeadline]); }, [legendItems, showLegendHeadline]);
const memoizedAnimation = useMemo(() => { const memoizedAnimation = useMemo(() => {
@ -56,8 +59,10 @@ export const BusterChartLegend: React.FC<BusterChartLegendProps> = React.memo(
return { return {
initial: { initial: {
height: show && !completedInitialAnimation.current ? initialHeight : 0, height:
minHeight: show && !completedInitialAnimation.current ? initialHeight : 0, show && !completedInitialAnimation.current ? initialHeight : 0,
minHeight:
show && !completedInitialAnimation.current ? initialHeight : 0,
}, },
animate: { animate: {
height: showLegend ? initialHeight : 0, height: showLegend ? initialHeight : 0,
@ -96,9 +101,13 @@ export const BusterChartLegend: React.FC<BusterChartLegendProps> = React.memo(
}, [animateLegend, showLegend, show]); }, [animateLegend, showLegend, show]);
return ( return (
<ErrorBoundary errorComponent={<div className="text-red-500">Error rendering legend</div>}> <ErrorBoundary
errorComponent={
<div className="text-red-500">Error rendering legend</div>
}
>
<motion.div <motion.div
className={`chart-legend flex w-full items-center overflow-hidden ${forceInitialHeight ? 'min-h-[24px]' : ''}`} className={`chart-legend flex w-full items-center overflow-hidden ${forceInitialHeight ? "min-h-[24px]" : ""}`}
onAnimationComplete={onAnimationComplete} onAnimationComplete={onAnimationComplete}
{...memoizedAnimation} {...memoizedAnimation}
> >
@ -136,4 +145,4 @@ export const BusterChartLegend: React.FC<BusterChartLegendProps> = React.memo(
} }
); );
BusterChartLegend.displayName = 'BusterChartLegend'; BusterChartLegend.displayName = "BusterChartLegend";

108
packages/ui-components/src/components/charts/BusterChartLegend/BusterChartLegendWrapper.tsx
View File

@ -1,13 +1,13 @@
import { cn } from '@/lib/classMerge'; import { cn } from "@/lib/classMerge";
import type { ShowLegendHeadline } from '@buster/server-shared/metrics'; import type { ShowLegendHeadline } from "@buster/server-shared/metrics";
import React from 'react'; import React from "react";
import { BusterChartLegend, type BusterChartLegendItem } from '.'; import { BusterChartLegend, type BusterChartLegendItem } from ".";
import CircleSpinnerLoader from '../../loaders/CircleSpinnerLoader'; import CircleSpinnerLoader from "../../loaders/CircleSpinnerLoader";
import { import {
ChartLegendWrapperProvider, ChartLegendWrapperProvider,
useChartWrapperContextSelector, useChartWrapperContextSelector,
} from '../chartHooks/useChartWrapperProvider'; } from "../chartHooks/useChartWrapperProvider";
import { DownsampleAlert } from './DownsampleAlert'; import { DownsampleAlert } from "./DownsampleAlert";
export type BusterChartLegendWrapper = { export type BusterChartLegendWrapper = {
children: React.ReactNode; children: React.ReactNode;
@ -25,53 +25,59 @@ export type BusterChartLegendWrapper = {
onLegendItemFocus: ((item: BusterChartLegendItem) => void) | undefined; onLegendItemFocus: ((item: BusterChartLegendItem) => void) | undefined;
}; };
export const BusterChartLegendWrapper: React.FC<BusterChartLegendWrapper> = React.memo( export const BusterChartLegendWrapper: React.FC<BusterChartLegendWrapper> =
({ React.memo(
children, ({
renderLegend, children,
legendItems, renderLegend,
showLegend, legendItems,
showLegendHeadline, showLegend,
inactiveDatasets, showLegendHeadline,
animateLegend, inactiveDatasets,
className, animateLegend,
isUpdatingChart, className,
isDownsampled, isUpdatingChart,
onHoverItem, isDownsampled,
onLegendItemClick, onHoverItem,
onLegendItemFocus, onLegendItemClick,
}) => { onLegendItemFocus,
const width = useChartWrapperContextSelector(({ width }) => width); }) => {
const width = useChartWrapperContextSelector(({ width }) => width);
return ( return (
<ChartLegendWrapperProvider inactiveDatasets={inactiveDatasets}> <ChartLegendWrapperProvider inactiveDatasets={inactiveDatasets}>
<div <div
className={cn('legend-wrapper flex h-full w-full flex-col overflow-hidden', className)} className={cn(
> "legend-wrapper flex h-full w-full flex-col overflow-hidden",
{renderLegend && ( className
<BusterChartLegend )}
show={showLegend} >
animateLegend={animateLegend} {renderLegend && (
legendItems={legendItems} <BusterChartLegend
containerWidth={width} show={showLegend}
onClickItem={onLegendItemClick} animateLegend={animateLegend}
onFocusItem={onLegendItemFocus} legendItems={legendItems}
onHoverItem={onHoverItem} containerWidth={width}
showLegendHeadline={showLegendHeadline} onClickItem={onLegendItemClick}
/> onFocusItem={onLegendItemFocus}
)} onHoverItem={onHoverItem}
showLegendHeadline={showLegendHeadline}
/>
)}
<div className="relative flex h-full w-full flex-col items-center justify-center overflow-hidden"> <div className="relative flex h-full w-full flex-col items-center justify-center overflow-hidden">
{isUpdatingChart && <LoadingOverlay />} {isUpdatingChart && <LoadingOverlay />}
{children} {children}
{isDownsampled && <DownsampleAlert isDownsampled={isDownsampled} />} {isDownsampled && (
<DownsampleAlert isDownsampled={isDownsampled} />
)}
</div>
</div> </div>
</div> </ChartLegendWrapperProvider>
</ChartLegendWrapperProvider> );
); }
} );
); BusterChartLegendWrapper.displayName = "BusterChartLegendWrapper";
BusterChartLegendWrapper.displayName = 'BusterChartLegendWrapper';
const LoadingOverlay = () => { const LoadingOverlay = () => {
return ( return (

56
packages/ui-components/src/components/typography/ShimmerText.tsx
View File

@ -1,10 +1,8 @@
'use client'; 'use client';
import { cn } from '@/lib/classMerge'; import { cn } from '@/lib/classMerge';
import { type MotionProps, motion } from 'framer-motion'; import React from 'react';
import React, { useMemo } from 'react'; interface ShimmerTextProps {
interface ShimmerText2Props {
text: string; text: string;
colors?: string[]; colors?: string[];
duration?: number; duration?: number;
@ -12,11 +10,7 @@ interface ShimmerText2Props {
className?: string; className?: string;
} }
const animate = { export const ShimmerText: React.FC<ShimmerTextProps> = React.memo(
backgroundPosition: ['200% 50%', '0% 50%'],
};
export const ShimmerText: React.FC<ShimmerText2Props> = React.memo(
({ ({
text, text,
colors = ['var(--color-foreground)', 'var(--color-text-tertiary)'], colors = ['var(--color-foreground)', 'var(--color-text-tertiary)'],
@ -30,38 +24,20 @@ export const ShimmerText: React.FC<ShimmerText2Props> = React.memo(
const gradientColors = [...colors, colors[0]].join(', '); 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 ( return (
<> <div
<motion.div className={cn(
className={cn('shimmer-text leading-1.3', className)} 'inline-block animate-shimmer bg-[length:200%_100%] bg-clip-text text-transparent',
style={memoizedStyle} className
animate={animate} )}
transition={memoizedTransition} style={{
> backgroundImage: `linear-gradient(90deg, ${gradientColors})`,
{text} fontSize: fontSize,
</motion.div> animationDuration: `${duration}s`,
</> }}
>
{text}
</div>
); );
} }
); );

1
packages/ui-components/vite.config.ts
View File

@ -9,6 +9,7 @@ export default defineConfig({
lib: { lib: {
entry: resolve(__dirname, 'src/index.ts'), entry: resolve(__dirname, 'src/index.ts'),
formats: ['es'], formats: ['es'],
fileName: () => 'index.js',
}, },
rollupOptions: { rollupOptions: {
external: ['react', 'react-dom'], external: ['react', 'react-dom'],

34
pnpm-lock.yaml
View File

@ -17601,23 +17601,23 @@ snapshots:
chai: 5.2.0 chai: 5.2.0
tinyrainbow: 2.0.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: dependencies:
'@vitest/spy': 3.2.4 '@vitest/spy': 3.2.4
estree-walker: 3.0.3 estree-walker: 3.0.3
magic-string: 0.30.17 magic-string: 0.30.17
optionalDependencies: optionalDependencies:
msw: 2.10.4(@types/node@20.19.4)(typescript@5.8.3) 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: dependencies:
'@vitest/spy': 3.2.4 '@vitest/spy': 3.2.4
estree-walker: 3.0.3 estree-walker: 3.0.3
magic-string: 0.30.17 magic-string: 0.30.17
optionalDependencies: optionalDependencies:
msw: 2.10.4(@types/node@24.0.10)(typescript@5.8.3) 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': '@vitest/pretty-format@2.0.5':
dependencies: dependencies:
@ -24159,24 +24159,6 @@ snapshots:
- supports-color - supports-color
- typescript - 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): 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: dependencies:
esbuild: 0.25.5 esbuild: 0.25.5
@ -24235,7 +24217,7 @@ snapshots:
dependencies: dependencies:
'@types/chai': 5.2.2 '@types/chai': 5.2.2
'@vitest/expect': 3.2.4 '@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/pretty-format': 3.2.4
'@vitest/runner': 3.2.4 '@vitest/runner': 3.2.4
'@vitest/snapshot': 3.2.4 '@vitest/snapshot': 3.2.4
@ -24253,7 +24235,7 @@ snapshots:
tinyglobby: 0.2.14 tinyglobby: 0.2.14
tinypool: 1.1.1 tinypool: 1.1.1
tinyrainbow: 2.0.0 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) 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 why-is-node-running: 2.3.0
optionalDependencies: optionalDependencies:
@ -24280,7 +24262,7 @@ snapshots:
dependencies: dependencies:
'@types/chai': 5.2.2 '@types/chai': 5.2.2
'@vitest/expect': 3.2.4 '@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/pretty-format': 3.2.4
'@vitest/runner': 3.2.4 '@vitest/runner': 3.2.4
'@vitest/snapshot': 3.2.4 '@vitest/snapshot': 3.2.4
@ -24298,7 +24280,7 @@ snapshots:
tinyglobby: 0.2.14 tinyglobby: 0.2.14
tinypool: 1.1.1 tinypool: 1.1.1
tinyrainbow: 2.0.0 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) 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 why-is-node-running: 2.3.0
optionalDependencies: optionalDependencies: