@bitrise/bitkit-v2 0.3.293 → 0.3.295
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.
|
@@ -3,6 +3,7 @@ export interface BitkitLabeledDataProps extends Omit<BoxProps, 'colorPalette'> {
|
|
|
3
3
|
label: string;
|
|
4
4
|
labelVariant?: 'primary' | 'secondary';
|
|
5
5
|
limitValue?: string;
|
|
6
|
+
placeholder?: string;
|
|
6
7
|
showWarning?: boolean;
|
|
7
8
|
size?: 'lg' | '2xl' | '3xl' | 'sm' | 'md';
|
|
8
9
|
state?: 'default' | 'skeleton';
|
|
@@ -4,7 +4,7 @@ import BitkitTooltip from "../BitkitTooltip/BitkitTooltip.js";
|
|
|
4
4
|
import BitkitDefinitionTooltip from "../BitkitDefinitionTooltip/BitkitDefinitionTooltip.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/BitkitLabeledData/BitkitLabeledData.tsx
|
|
10
10
|
var SKELETON_VALUE_HEIGHTS = {
|
|
@@ -13,7 +13,7 @@ var SKELETON_VALUE_HEIGHTS = {
|
|
|
13
13
|
"3xl": "40"
|
|
14
14
|
};
|
|
15
15
|
var BitkitLabeledData = forwardRef((props, ref) => {
|
|
16
|
-
const { label, labelVariant = "primary", limitValue, showWarning, size = "lg", state = "default", subtext, tooltip, tooltipAnchor = "value", value, variant = "default", ...rest } = props;
|
|
16
|
+
const { label, labelVariant = "primary", limitValue, placeholder = "N/A", showWarning, size = "lg", state = "default", subtext, tooltip, tooltipAnchor = "value", value, variant = "default", ...rest } = props;
|
|
17
17
|
const styles = useSlotRecipe({ key: "labeledData" })({ size: variant === "inline" ? void 0 : size });
|
|
18
18
|
if (variant === "inline") {
|
|
19
19
|
const isSm = size === "sm";
|
|
@@ -60,8 +60,8 @@ var BitkitLabeledData = forwardRef((props, ref) => {
|
|
|
60
60
|
children: [wrapWithTooltip(label, "label"), colonSuffix]
|
|
61
61
|
}), /* @__PURE__ */ jsx(chakra.span, {
|
|
62
62
|
textStyle: isSm ? "body/sm/regular" : "body/md/regular",
|
|
63
|
-
color: "text/body",
|
|
64
|
-
children: wrapWithTooltip(value
|
|
63
|
+
color: !value ? "text/tertiary" : "text/body",
|
|
64
|
+
children: !value ? placeholder : wrapWithTooltip(value, "value")
|
|
65
65
|
})]
|
|
66
66
|
})]
|
|
67
67
|
});
|
|
@@ -98,12 +98,15 @@ var BitkitLabeledData = forwardRef((props, ref) => {
|
|
|
98
98
|
...rest,
|
|
99
99
|
children: [
|
|
100
100
|
labelContent,
|
|
101
|
-
/* @__PURE__ */
|
|
101
|
+
/* @__PURE__ */ jsx(chakra.dd, {
|
|
102
102
|
css: styles.value,
|
|
103
|
-
children:
|
|
103
|
+
children: !value ? /* @__PURE__ */ jsx(chakra.span, {
|
|
104
|
+
color: "text/tertiary",
|
|
105
|
+
children: placeholder
|
|
106
|
+
}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [value, !!limitValue && /* @__PURE__ */ jsxs(chakra.span, {
|
|
104
107
|
css: styles.limit,
|
|
105
108
|
children: ["/ ", limitValue]
|
|
106
|
-
})]
|
|
109
|
+
})] })
|
|
107
110
|
}),
|
|
108
111
|
!!subtext && /* @__PURE__ */ jsx(chakra.dd, {
|
|
109
112
|
css: styles.helpText,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitLabeledData.js","names":[],"sources":["../../../lib/components/BitkitLabeledData/BitkitLabeledData.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 { IconInfoCircle, IconWarningYellow } from '../../icons';\nimport BitkitDefinitionTooltip from '../BitkitDefinitionTooltip/BitkitDefinitionTooltip';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\n// --- Types ---\n\nexport interface BitkitLabeledDataProps extends Omit<BoxProps, 'colorPalette'> {\n label: string;\n labelVariant?: 'primary' | 'secondary';\n limitValue?: string;\n showWarning?: boolean;\n size?: 'lg' | '2xl' | '3xl' | 'sm' | 'md';\n state?: 'default' | 'skeleton';\n subtext?: string;\n tooltip?: string;\n tooltipAnchor?: 'label' | 'value';\n value?: string;\n variant?: 'default' | 'inline';\n}\n\nconst SKELETON_VALUE_HEIGHTS = { lg: '24', '2xl': '36px', '3xl': '40' } as const;\n\n// --- Component ---\n\nconst BitkitLabeledData = forwardRef<HTMLElement, BitkitLabeledDataProps>((props, ref) => {\n const {\n label,\n labelVariant = 'primary',\n limitValue,\n showWarning,\n size = 'lg',\n state = 'default',\n subtext,\n tooltip,\n tooltipAnchor = 'value',\n value,\n variant = 'default',\n ...rest\n } = props;\n\n const styles = useSlotRecipe({ key: 'labeledData' })({\n size: variant === 'inline' ? undefined : (size as 'lg' | '2xl' | '3xl'),\n });\n\n // --- Inline variant ---\n if (variant === 'inline') {\n const isSm = size === 'sm';\n const isPrimary = labelVariant === 'primary';\n const labelTextStyle = isPrimary\n ? isSm\n ? 'body/sm/semibold'\n : 'body/md/semibold'\n : isSm\n ? 'body/sm/regular'\n : 'body/md/regular';\n const labelEndsWithColon = label.endsWith(':') || label.endsWith('：');\n const colonSuffix = labelEndsWithColon ? '' : ':';\n\n if (state === 'skeleton') {\n return (\n <chakra.div ref={ref} display=\"flex\" alignItems=\"center\" gap=\"8\" {...rest}>\n {!!showWarning && <IconWarningYellow size=\"16\" />}\n <chakra.div display=\"flex\" alignItems=\"center\" gap=\"4\">\n <chakra.span textStyle={labelTextStyle} color={isPrimary ? 'text/primary' : 'text/secondary'}>\n {label}\n {colonSuffix}\n </chakra.span>\n <Skeleton height={isSm ? '16' : '20'} width=\"64\" />\n </chakra.div>\n </chakra.div>\n );\n }\n\n const wrapWithTooltip = (text: string, anchor: 'label' | 'value') =>\n tooltip && tooltipAnchor === anchor ? (\n <BitkitDefinitionTooltip text={tooltip}>{text}</BitkitDefinitionTooltip>\n ) : (\n text\n );\n\n return (\n <chakra.div ref={ref} display=\"flex\" alignItems=\"center\" gap=\"8\" {...rest}>\n {!!showWarning && <IconWarningYellow size=\"16\" />}\n <chakra.div display=\"flex\" alignItems=\"center\" gap=\"4\">\n <chakra.span textStyle={labelTextStyle} color={isPrimary ? 'text/primary' : 'text/secondary'}>\n {wrapWithTooltip(label, 'label')}\n {colonSuffix}\n </chakra.span>\n <chakra.span
|
|
1
|
+
{"version":3,"file":"BitkitLabeledData.js","names":[],"sources":["../../../lib/components/BitkitLabeledData/BitkitLabeledData.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 { IconInfoCircle, IconWarningYellow } from '../../icons';\nimport BitkitDefinitionTooltip from '../BitkitDefinitionTooltip/BitkitDefinitionTooltip';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\n// --- Types ---\n\nexport interface BitkitLabeledDataProps extends Omit<BoxProps, 'colorPalette'> {\n label: string;\n labelVariant?: 'primary' | 'secondary';\n limitValue?: string;\n placeholder?: string;\n showWarning?: boolean;\n size?: 'lg' | '2xl' | '3xl' | 'sm' | 'md';\n state?: 'default' | 'skeleton';\n subtext?: string;\n tooltip?: string;\n tooltipAnchor?: 'label' | 'value';\n value?: string;\n variant?: 'default' | 'inline';\n}\n\nconst SKELETON_VALUE_HEIGHTS = { lg: '24', '2xl': '36px', '3xl': '40' } as const;\n\n// --- Component ---\n\nconst BitkitLabeledData = forwardRef<HTMLElement, BitkitLabeledDataProps>((props, ref) => {\n const {\n label,\n labelVariant = 'primary',\n limitValue,\n placeholder = 'N/A',\n showWarning,\n size = 'lg',\n state = 'default',\n subtext,\n tooltip,\n tooltipAnchor = 'value',\n value,\n variant = 'default',\n ...rest\n } = props;\n\n const styles = useSlotRecipe({ key: 'labeledData' })({\n size: variant === 'inline' ? undefined : (size as 'lg' | '2xl' | '3xl'),\n });\n\n // --- Inline variant ---\n if (variant === 'inline') {\n const isSm = size === 'sm';\n const isPrimary = labelVariant === 'primary';\n const labelTextStyle = isPrimary\n ? isSm\n ? 'body/sm/semibold'\n : 'body/md/semibold'\n : isSm\n ? 'body/sm/regular'\n : 'body/md/regular';\n const labelEndsWithColon = label.endsWith(':') || label.endsWith('：');\n const colonSuffix = labelEndsWithColon ? '' : ':';\n\n if (state === 'skeleton') {\n return (\n <chakra.div ref={ref} display=\"flex\" alignItems=\"center\" gap=\"8\" {...rest}>\n {!!showWarning && <IconWarningYellow size=\"16\" />}\n <chakra.div display=\"flex\" alignItems=\"center\" gap=\"4\">\n <chakra.span textStyle={labelTextStyle} color={isPrimary ? 'text/primary' : 'text/secondary'}>\n {label}\n {colonSuffix}\n </chakra.span>\n <Skeleton height={isSm ? '16' : '20'} width=\"64\" />\n </chakra.div>\n </chakra.div>\n );\n }\n\n const wrapWithTooltip = (text: string, anchor: 'label' | 'value') =>\n tooltip && tooltipAnchor === anchor ? (\n <BitkitDefinitionTooltip text={tooltip}>{text}</BitkitDefinitionTooltip>\n ) : (\n text\n );\n\n return (\n <chakra.div ref={ref} display=\"flex\" alignItems=\"center\" gap=\"8\" {...rest}>\n {!!showWarning && <IconWarningYellow size=\"16\" />}\n <chakra.div display=\"flex\" alignItems=\"center\" gap=\"4\">\n <chakra.span textStyle={labelTextStyle} color={isPrimary ? 'text/primary' : 'text/secondary'}>\n {wrapWithTooltip(label, 'label')}\n {colonSuffix}\n </chakra.span>\n <chakra.span\n textStyle={isSm ? 'body/sm/regular' : 'body/md/regular'}\n color={!value ? 'text/tertiary' : 'text/body'}\n >\n {!value ? placeholder : wrapWithTooltip(value, 'value')}\n </chakra.span>\n </chakra.div>\n </chakra.div>\n );\n }\n\n // --- Default variant ---\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 as keyof typeof SKELETON_VALUE_HEIGHTS]} width=\"128\" />\n <Skeleton height=\"20\" width=\"128\" />\n </chakra.dl>\n );\n }\n\n return (\n <chakra.dl css={styles.root} ref={ref} {...(rest as Record<string, unknown>)}>\n {labelContent}\n <chakra.dd css={styles.value}>\n {!value ? (\n <chakra.span color=\"text/tertiary\">{placeholder}</chakra.span>\n ) : (\n <>\n {value}\n {!!limitValue && <chakra.span css={styles.limit}>/ {limitValue}</chakra.span>}\n </>\n )}\n </chakra.dd>\n {!!subtext && <chakra.dd css={styles.helpText}>{subtext}</chakra.dd>}\n </chakra.dl>\n );\n});\n\nBitkitLabeledData.displayName = 'BitkitLabeledData';\n\nexport default BitkitLabeledData;\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bitrise/bitkit-v2",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.3.
|
|
4
|
+
"version": "0.3.295",
|
|
5
5
|
"description": "Bitrise Design System Components built with Chakra UI V3",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"react",
|
|
@@ -76,10 +76,10 @@
|
|
|
76
76
|
"@figma-export/output-components-as-svg": "^6.4.1",
|
|
77
77
|
"@figma-export/transform-svg-with-svgo": "^6.4.1",
|
|
78
78
|
"@google-cloud/storage": "^7.21.0",
|
|
79
|
-
"@storybook/addon-docs": "
|
|
79
|
+
"@storybook/addon-docs": "10.4.6",
|
|
80
80
|
"@storybook/addon-mcp": "^0.7.0",
|
|
81
81
|
"@storybook/mcp": "^0.8.0",
|
|
82
|
-
"@storybook/react-vite": "
|
|
82
|
+
"@storybook/react-vite": "10.4.6",
|
|
83
83
|
"@svgr/plugin-jsx": "^8.1.0",
|
|
84
84
|
"@types/node": "^26.1.1",
|
|
85
85
|
"@types/react": "^18.3.31",
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
"react": "^18.3.1",
|
|
89
89
|
"react-dom": "^18.3.1",
|
|
90
90
|
"release-it": "^20.2.1",
|
|
91
|
-
"storybook": "
|
|
91
|
+
"storybook": "10.4.6",
|
|
92
92
|
"tsx": "^4.23.1",
|
|
93
93
|
"typescript": "^6.0.3",
|
|
94
94
|
"vite": "^8.1.5",
|