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/vitest-config" },
{ "path": "../packages/web-tools" },
{ "path": "../packages/sandbox" }
{ "path": "../packages/sandbox" },
{ "path": "../packages/ui-components" }
],
"settings": {
"editor.defaultFormatter": "biomejs.biome",

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

@ -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",

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 { 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<BusterChartLegendProps> = React.memo(
({
@ -28,13 +28,16 @@ export const BusterChartLegend: React.FC<BusterChartLegendProps> = 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<BusterChartLegendProps> = 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<BusterChartLegendProps> = 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<BusterChartLegendProps> = React.memo(
}, [animateLegend, showLegend, show]);
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
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}
{...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 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<BusterChartLegendWrapper> = 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<BusterChartLegendWrapper> =
React.memo(
({
children,
renderLegend,
legendItems,
showLegend,
showLegendHeadline,
inactiveDatasets,
animateLegend,
className,
isUpdatingChart,
isDownsampled,
onHoverItem,
onLegendItemClick,
onLegendItemFocus,
}) => {
const width = useChartWrapperContextSelector(({ width }) => width);
return (
<ChartLegendWrapperProvider inactiveDatasets={inactiveDatasets}>
<div
className={cn('legend-wrapper flex h-full w-full flex-col overflow-hidden', className)}
>
{renderLegend && (
<BusterChartLegend
show={showLegend}
animateLegend={animateLegend}
legendItems={legendItems}
containerWidth={width}
onClickItem={onLegendItemClick}
onFocusItem={onLegendItemFocus}
onHoverItem={onHoverItem}
showLegendHeadline={showLegendHeadline}
/>
)}
return (
<ChartLegendWrapperProvider inactiveDatasets={inactiveDatasets}>
<div
className={cn(
"legend-wrapper flex h-full w-full flex-col overflow-hidden",
className
)}
>
{renderLegend && (
<BusterChartLegend
show={showLegend}
animateLegend={animateLegend}
legendItems={legendItems}
containerWidth={width}
onClickItem={onLegendItemClick}
onFocusItem={onLegendItemFocus}
onHoverItem={onHoverItem}
showLegendHeadline={showLegendHeadline}
/>
)}
<div className="relative flex h-full w-full flex-col items-center justify-center overflow-hidden">
{isUpdatingChart && <LoadingOverlay />}
{children}
{isDownsampled && <DownsampleAlert isDownsampled={isDownsampled} />}
<div className="relative flex h-full w-full flex-col items-center justify-center overflow-hidden">
{isUpdatingChart && <LoadingOverlay />}
{children}
{isDownsampled && (
<DownsampleAlert isDownsampled={isDownsampled} />
)}
</div>
</div>
</div>
</ChartLegendWrapperProvider>
);
}
);
BusterChartLegendWrapper.displayName = 'BusterChartLegendWrapper';
</ChartLegendWrapperProvider>
);
}
);
BusterChartLegendWrapper.displayName = "BusterChartLegendWrapper";
const LoadingOverlay = () => {
return (

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

@ -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<ShimmerText2Props> = React.memo(
export const ShimmerText: React.FC<ShimmerTextProps> = React.memo(
({
text,
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 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 (
<>
<motion.div
className={cn('shimmer-text leading-1.3', className)}
style={memoizedStyle}
animate={animate}
transition={memoizedTransition}
>
{text}
</motion.div>
</>
<div
className={cn(
'inline-block animate-shimmer bg-[length:200%_100%] bg-clip-text text-transparent',
className
)}
style={{
backgroundImage: `linear-gradient(90deg, ${gradientColors})`,
fontSize: fontSize,
animationDuration: `${duration}s`,
}}
>
{text}
</div>
);
}
);

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

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

34
pnpm-lock.yaml
View File

@ -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: