@bitrise/bitkit-v2 0.3.298 → 0.3.299
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -4,6 +4,7 @@ export type TrendDirection = 'up' | 'down';
|
|
|
4
4
|
export type TrendTextPlacement = 'below' | 'inline';
|
|
5
5
|
export interface BitkitStatProps extends Omit<BoxProps, 'colorPalette'> {
|
|
6
6
|
label: string;
|
|
7
|
+
placeholder?: string;
|
|
7
8
|
size?: 'lg' | '2xl' | '3xl';
|
|
8
9
|
state?: 'default' | 'skeleton';
|
|
9
10
|
subtext?: string;
|
|
@@ -4,7 +4,7 @@ import IconInfoCircle from "../../icons/IconInfoCircle.js";
|
|
|
4
4
|
import BitkitTooltip from "../BitkitTooltip/BitkitTooltip.js";
|
|
5
5
|
import { chakra, useSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
6
6
|
import { forwardRef } from "react";
|
|
7
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
8
8
|
import { Skeleton } from "@chakra-ui/react/skeleton";
|
|
9
9
|
//#region lib/components/BitkitStat/BitkitStat.tsx
|
|
10
10
|
var TREND_COLORS = {
|
|
@@ -54,7 +54,7 @@ var SKELETON_VALUE_HEIGHTS = {
|
|
|
54
54
|
"3xl": "40"
|
|
55
55
|
};
|
|
56
56
|
var BitkitStat = forwardRef((props, ref) => {
|
|
57
|
-
const { label, size = "lg", state = "default", subtext, tooltip, trendColor, trendDirection, trendText, trendTextPlacement = "below", value, variant = "default", ...rest } = props;
|
|
57
|
+
const { label, placeholder = "N/A", size = "lg", state = "default", subtext, tooltip, trendColor, trendDirection, trendText, trendTextPlacement = "below", value, variant = "default", ...rest } = props;
|
|
58
58
|
const styles = useSlotRecipe({ key: "stat" })({
|
|
59
59
|
size,
|
|
60
60
|
variant
|
|
@@ -78,13 +78,16 @@ var BitkitStat = forwardRef((props, ref) => {
|
|
|
78
78
|
css: styles.root,
|
|
79
79
|
ref,
|
|
80
80
|
...rest,
|
|
81
|
-
children: [/* @__PURE__ */
|
|
81
|
+
children: [/* @__PURE__ */ jsx(chakra.span, {
|
|
82
82
|
css: styles.value,
|
|
83
|
-
children:
|
|
83
|
+
children: !value ? /* @__PURE__ */ jsx(chakra.span, {
|
|
84
|
+
color: "text/tertiary",
|
|
85
|
+
children: placeholder
|
|
86
|
+
}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [!!TrendIcon && /* @__PURE__ */ jsx(TrendIcon, {
|
|
84
87
|
size: "16",
|
|
85
88
|
color: trend.iconColor
|
|
86
|
-
}), value]
|
|
87
|
-
}), !!trendText && /* @__PURE__ */ jsx(chakra.span, {
|
|
89
|
+
}), value] })
|
|
90
|
+
}), !!value && !!trendText && /* @__PURE__ */ jsx(chakra.span, {
|
|
88
91
|
css: styles.helpText,
|
|
89
92
|
color: trend.textColor,
|
|
90
93
|
children: trendText
|
|
@@ -118,17 +121,21 @@ var BitkitStat = forwardRef((props, ref) => {
|
|
|
118
121
|
]
|
|
119
122
|
});
|
|
120
123
|
const isInline = trendTextPlacement === "inline";
|
|
121
|
-
const
|
|
124
|
+
const showTrendText = !!value && !isInline && !!trendText;
|
|
125
|
+
const showHelpText = showTrendText || !!subtext;
|
|
122
126
|
return /* @__PURE__ */ jsxs(chakra.dl, {
|
|
123
127
|
css: styles.root,
|
|
124
128
|
ref,
|
|
125
129
|
...rest,
|
|
126
130
|
children: [
|
|
127
131
|
labelContent,
|
|
128
|
-
/* @__PURE__ */
|
|
132
|
+
/* @__PURE__ */ jsx(chakra.dd, {
|
|
129
133
|
css: styles.value,
|
|
130
134
|
alignItems: isInline && size === "3xl" ? "flex-end" : void 0,
|
|
131
|
-
children:
|
|
135
|
+
children: !value ? /* @__PURE__ */ jsx(chakra.span, {
|
|
136
|
+
color: "text/tertiary",
|
|
137
|
+
children: placeholder
|
|
138
|
+
}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [value, isInline ? /* @__PURE__ */ jsxs(chakra.span, {
|
|
132
139
|
display: "inline-flex",
|
|
133
140
|
gap: "4",
|
|
134
141
|
alignItems: "center",
|
|
@@ -144,11 +151,11 @@ var BitkitStat = forwardRef((props, ref) => {
|
|
|
144
151
|
}) : !!TrendIcon && /* @__PURE__ */ jsx(TrendIcon, {
|
|
145
152
|
size: BELOW_ICON_SIZES[size],
|
|
146
153
|
color: trend.iconColor
|
|
147
|
-
})]
|
|
154
|
+
})] })
|
|
148
155
|
}),
|
|
149
156
|
showHelpText && /* @__PURE__ */ jsxs(chakra.dd, {
|
|
150
157
|
css: styles.helpText,
|
|
151
|
-
children: [
|
|
158
|
+
children: [showTrendText && /* @__PURE__ */ jsx(chakra.span, {
|
|
152
159
|
color: trend.textColor,
|
|
153
160
|
children: trendText
|
|
154
161
|
}), !!subtext && /* @__PURE__ */ jsx(chakra.span, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitStat.js","names":[],"sources":["../../../lib/components/BitkitStat/BitkitStat.tsx"],"sourcesContent":["import { type BoxProps } from '@chakra-ui/react/box';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconArrowDown, IconArrowUp, IconInfoCircle } from '../../icons';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\n// --- Types ---\n\nexport type TrendColor = 'positive' | 'negative' | 'neutral';\nexport type TrendDirection = 'up' | 'down';\nexport type TrendTextPlacement = 'below' | 'inline';\n\nconst TREND_COLORS = {\n positive: { text: 'text/positive', icon: 'icon/positive' },\n negative: { text: 'text/negative', icon: 'icon/negative' },\n neutral: { text: 'text/secondary', icon: 'icon/tertiary' },\n} as const;\n\nconst TREND_ICONS = { up: IconArrowUp, down: IconArrowDown } as const;\nconst DEFAULT_COLORS: Record<TrendDirection, TrendColor> = { up: 'positive', down: 'negative' };\n\nconst resolveTrend = (trendColor?: TrendColor, trendDirection?: TrendDirection) => {\n const color = trendColor ?? (trendDirection ? DEFAULT_COLORS[trendDirection] : undefined);\n const colors = color ? TREND_COLORS[color] : undefined;\n return {\n textColor: colors?.text ?? 'text/secondary',\n iconColor: colors?.icon ?? 'icon/tertiary',\n Icon: trendDirection ? TREND_ICONS[trendDirection] : undefined,\n };\n};\n\nconst BELOW_ICON_SIZES = { lg: '16', '2xl': '24', '3xl': '24' } as const;\nconst INLINE_TREND_STYLES = {\n lg: { paddingBlockStart: '2' },\n '2xl': { paddingBlockStart: '6' },\n '3xl': { paddingBlockEnd: '4' },\n} as const;\nconst SKELETON_VALUE_HEIGHTS = { lg: '24', '2xl': '36px', '3xl': '40' } as const;\n\nexport interface BitkitStatProps extends Omit<BoxProps, 'colorPalette'> {\n label: string;\n size?: 'lg' | '2xl' | '3xl';\n state?: 'default' | 'skeleton';\n subtext?: string;\n tooltip?: string;\n trendColor?: TrendColor;\n trendDirection?: TrendDirection;\n trendText?: string;\n trendTextPlacement?: TrendTextPlacement;\n value?: string;\n variant?: 'default' | 'compact';\n}\n\n// --- Component ---\n\nconst BitkitStat = forwardRef<HTMLElement, BitkitStatProps>((props, ref) => {\n const {\n label,\n size = 'lg',\n state = 'default',\n subtext,\n tooltip,\n trendColor,\n trendDirection,\n trendText,\n trendTextPlacement = 'below',\n value,\n variant = 'default',\n ...rest\n } = props;\n\n const styles = useSlotRecipe({ key: 'stat' })({ size, variant });\n const trend = resolveTrend(trendColor, trendDirection);\n const { Icon: TrendIcon } = trend;\n const isCompact = variant === 'compact';\n\n // --- Compact ---\n if (isCompact) {\n if (state === 'skeleton') {\n return (\n <chakra.div css={styles.root} ref={ref} {...(rest as Record<string, unknown>)}>\n <Skeleton height=\"20\" width=\"64\" />\n <Skeleton height=\"16\" width=\"48\" />\n </chakra.div>\n );\n }\n\n return (\n <chakra.div css={styles.root} ref={ref} {...(rest as Record<string, unknown>)}>\n <chakra.span css={styles.value}>\n {!!TrendIcon && <TrendIcon size=\"16\" color={trend.iconColor} />}\n
|
|
1
|
+
{"version":3,"file":"BitkitStat.js","names":[],"sources":["../../../lib/components/BitkitStat/BitkitStat.tsx"],"sourcesContent":["import { type BoxProps } from '@chakra-ui/react/box';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconArrowDown, IconArrowUp, IconInfoCircle } from '../../icons';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\n// --- Types ---\n\nexport type TrendColor = 'positive' | 'negative' | 'neutral';\nexport type TrendDirection = 'up' | 'down';\nexport type TrendTextPlacement = 'below' | 'inline';\n\nconst TREND_COLORS = {\n positive: { text: 'text/positive', icon: 'icon/positive' },\n negative: { text: 'text/negative', icon: 'icon/negative' },\n neutral: { text: 'text/secondary', icon: 'icon/tertiary' },\n} as const;\n\nconst TREND_ICONS = { up: IconArrowUp, down: IconArrowDown } as const;\nconst DEFAULT_COLORS: Record<TrendDirection, TrendColor> = { up: 'positive', down: 'negative' };\n\nconst resolveTrend = (trendColor?: TrendColor, trendDirection?: TrendDirection) => {\n const color = trendColor ?? (trendDirection ? DEFAULT_COLORS[trendDirection] : undefined);\n const colors = color ? TREND_COLORS[color] : undefined;\n return {\n textColor: colors?.text ?? 'text/secondary',\n iconColor: colors?.icon ?? 'icon/tertiary',\n Icon: trendDirection ? TREND_ICONS[trendDirection] : undefined,\n };\n};\n\nconst BELOW_ICON_SIZES = { lg: '16', '2xl': '24', '3xl': '24' } as const;\nconst INLINE_TREND_STYLES = {\n lg: { paddingBlockStart: '2' },\n '2xl': { paddingBlockStart: '6' },\n '3xl': { paddingBlockEnd: '4' },\n} as const;\nconst SKELETON_VALUE_HEIGHTS = { lg: '24', '2xl': '36px', '3xl': '40' } as const;\n\nexport interface BitkitStatProps extends Omit<BoxProps, 'colorPalette'> {\n label: string;\n placeholder?: string;\n size?: 'lg' | '2xl' | '3xl';\n state?: 'default' | 'skeleton';\n subtext?: string;\n tooltip?: string;\n trendColor?: TrendColor;\n trendDirection?: TrendDirection;\n trendText?: string;\n trendTextPlacement?: TrendTextPlacement;\n value?: string;\n variant?: 'default' | 'compact';\n}\n\n// --- Component ---\n\nconst BitkitStat = forwardRef<HTMLElement, BitkitStatProps>((props, ref) => {\n const {\n label,\n placeholder = 'N/A',\n size = 'lg',\n state = 'default',\n subtext,\n tooltip,\n trendColor,\n trendDirection,\n trendText,\n trendTextPlacement = 'below',\n value,\n variant = 'default',\n ...rest\n } = props;\n\n const styles = useSlotRecipe({ key: 'stat' })({ size, variant });\n const trend = resolveTrend(trendColor, trendDirection);\n const { Icon: TrendIcon } = trend;\n const isCompact = variant === 'compact';\n\n // --- Compact ---\n if (isCompact) {\n if (state === 'skeleton') {\n return (\n <chakra.div css={styles.root} ref={ref} {...(rest as Record<string, unknown>)}>\n <Skeleton height=\"20\" width=\"64\" />\n <Skeleton height=\"16\" width=\"48\" />\n </chakra.div>\n );\n }\n\n return (\n <chakra.div css={styles.root} ref={ref} {...(rest as Record<string, unknown>)}>\n <chakra.span css={styles.value}>\n {!value ? (\n <chakra.span color=\"text/tertiary\">{placeholder}</chakra.span>\n ) : (\n <>\n {!!TrendIcon && <TrendIcon size=\"16\" color={trend.iconColor} />}\n {value}\n </>\n )}\n </chakra.span>\n {!!value && !!trendText && (\n <chakra.span css={styles.helpText} color={trend.textColor}>\n {trendText}\n </chakra.span>\n )}\n </chakra.div>\n );\n }\n\n // --- Default ---\n\n const labelContent = (\n <chakra.dt css={styles.label}>\n {label}\n {!!tooltip && (\n <BitkitTooltip text={tooltip}>\n <IconInfoCircle size=\"16\" color=\"icon/tertiary\" />\n </BitkitTooltip>\n )}\n </chakra.dt>\n );\n\n if (state === 'skeleton') {\n return (\n <chakra.dl css={styles.root} ref={ref} {...(rest as Record<string, unknown>)}>\n {labelContent}\n <Skeleton height={SKELETON_VALUE_HEIGHTS[size]} width=\"128\" />\n <Skeleton height=\"20\" width=\"128\" />\n </chakra.dl>\n );\n }\n\n const isInline = trendTextPlacement === 'inline';\n const showTrendText = !!value && !isInline && !!trendText;\n const showHelpText = showTrendText || !!subtext;\n\n return (\n <chakra.dl css={styles.root} ref={ref} {...(rest as Record<string, unknown>)}>\n {labelContent}\n\n <chakra.dd css={styles.value} alignItems={isInline && size === '3xl' ? 'flex-end' : undefined}>\n {!value ? (\n <chakra.span color=\"text/tertiary\">{placeholder}</chakra.span>\n ) : (\n <>\n {value}\n {isInline ? (\n <chakra.span display=\"inline-flex\" gap=\"4\" alignItems=\"center\" css={INLINE_TREND_STYLES[size]}>\n {!!TrendIcon && <TrendIcon size=\"16\" color={trend.iconColor} />}\n {!!trendText && (\n <chakra.span color={trend.textColor} textStyle=\"body/md/regular\">\n {trendText}\n </chakra.span>\n )}\n </chakra.span>\n ) : (\n !!TrendIcon && <TrendIcon size={BELOW_ICON_SIZES[size]} color={trend.iconColor} />\n )}\n </>\n )}\n </chakra.dd>\n\n {showHelpText && (\n <chakra.dd css={styles.helpText}>\n {showTrendText && <chakra.span color={trend.textColor}>{trendText}</chakra.span>}\n {!!subtext && <chakra.span color=\"text/tertiary\">{subtext}</chakra.span>}\n </chakra.dd>\n )}\n </chakra.dl>\n );\n});\n\nBitkitStat.displayName = 'BitkitStat';\n\nexport default BitkitStat;\n"],"mappings":"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"}
|