snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/components/dataView/Counter.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryFn } from '@storybook/react';
+
+import Counter from './Counter';
+
+export default {
+	component: Counter,
+	parameters: {
+		layout: 'centered',
+		controls: { hideNoControlsWarning: true },
+	},
+} satisfies Meta<typeof Counter>;
+
+export const Example: StoryFn<typeof Counter> = () => <Counter count={740} variation={59} description='LDAP users' />;
+
+export const WithoutVariation = {
+	args: {
+		count: 123,
+	},
+};
+
+export const WithPositiveVariation = {
+	args: {
+		count: 123,
+		variation: 4,
+	},
+};
+
+export const WithNegativeVariation = {
+	args: {
+		count: 123,
+		variation: -4,
+	},
+};
+
+export const WithDescription = {
+	args: {
+		count: 123,
+		description: 'Description',
+	},
+};

apps/meteor/client/components/dataView/Counter.tsx

@@ -0,0 +1,40 @@
+import { Box, FlexContainer, Margins } from '@rocket.chat/fuselage';
+import type { ReactNode } from 'react';
+
+import Growth from './Growth';
+
+export type CounterProps = {
+	count: ReactNode;
+	variation?: number;
+	description?: ReactNode;
+};
+
+const Counter = ({ count, variation = 0, description }: CounterProps) => (
+	<>
+		<FlexContainer alignItems='end'>
+			<Box>
+				<Box
+					is='span'
+					color='default'
+					fontScale='h2'
+					style={{
+						fontSize: '3em',
+						lineHeight: 1,
+					}}
+				>
+					{count}
+				</Box>
+				<Growth fontScale='h4'>{variation}</Growth>
+			</Box>
+		</FlexContainer>
+		<Margins block={12}>
+			<FlexContainer alignItems='center'>
+				<Box fontScale='p2' color='hint'>
+					{description}
+				</Box>
+			</FlexContainer>
+		</Margins>
+	</>
+);
+
+export default Counter;

apps/meteor/client/components/dataView/CounterSet.stories.tsx

@@ -0,0 +1,23 @@
+import type { StoryObj, Meta } from '@storybook/react';
+
+import CounterSet from './CounterSet';
+
+export default {
+	component: CounterSet,
+	parameters: {
+		layout: 'padded',
+		controls: { hideNoControlsWarning: true },
+	},
+} satisfies Meta<typeof CounterSet>;
+
+export const Default: StoryObj<typeof CounterSet> = {
+	name: 'CounterSet',
+
+	args: {
+		counters: [
+			{ count: 123, variation: 0 },
+			{ count: 456, variation: 7 },
+			{ count: 789, variation: -1, description: 'Description' },
+		],
+	},
+};

apps/meteor/client/components/dataView/CounterSet.tsx

@@ -0,0 +1,24 @@
+import { Grid, GridItem } from '@rocket.chat/fuselage';
+import type { ReactNode } from 'react';
+
+import Counter from './Counter';
+
+export type CounterSetProps = {
+	counters: {
+		count: ReactNode;
+		variation?: number;
+		description?: ReactNode;
+	}[];
+};
+
+const CounterSet = ({ counters = [] }: CounterSetProps) => (
+	<Grid>
+		{counters.map(({ count, variation, description }, i) => (
+			<GridItem key={i}>
+				<Counter count={count} variation={variation} description={description} />
+			</GridItem>
+		))}
+	</Grid>
+);
+
+export default CounterSet;

apps/meteor/client/components/dataView/Growth.stories.tsx

@@ -0,0 +1,36 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { Meta, StoryFn } from '@storybook/react';
+
+import Growth from './Growth';
+import { useAutoSequence } from '../../stories/hooks/useAutoSequence';
+
+export default {
+	component: Growth,
+	parameters: {
+		layout: 'centered',
+		controls: { hideNoControlsWarning: true },
+	},
+} satisfies Meta<typeof Growth>;
+
+export const Example: StoryFn<typeof Growth> = () => {
+	const value = useAutoSequence([3, -2, 1, -1, 2, -3]);
+
+	return <Growth>{value}</Growth>;
+};
+
+export const Positive: StoryFn<typeof Growth> = () => <Growth>{3}</Growth>;
+
+export const Zero: StoryFn<typeof Growth> = () => <Growth>{0}</Growth>;
+
+export const Negative: StoryFn<typeof Growth> = () => <Growth>{-3}</Growth>;
+
+export const WithTextStyle: StoryFn<typeof Growth> = () => (
+	<Box display='flex' flexDirection='column' alignItems='center'>
+		{(['h2', 'c1', 'micro'] as const).map((fontScale) => (
+			<Box key={fontScale}>
+				<Growth fontScale={fontScale}>{3}</Growth>
+				<Growth fontScale={fontScale}>{-3}</Growth>
+			</Box>
+		))}
+	</Box>
+);

apps/meteor/client/components/dataView/Growth.tsx

@@ -0,0 +1,24 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
+
+import NegativeGrowthSymbol from './NegativeGrowthSymbol';
+import PositiveGrowthSymbol from './PositiveGrowthSymbol';
+
+export type GrowthProps = ComponentProps<typeof Box> & {
+	children: number;
+};
+
+const Growth = ({ children, ...props }: GrowthProps) => {
+	if (children === 0) {
+		return null;
+	}
+
+	return (
+		<Box is='span' color={children < 0 ? 'status-font-on-danger' : 'status-font-on-success'} {...props}>
+			{children < 0 ? <NegativeGrowthSymbol /> : <PositiveGrowthSymbol />}
+			{String(Math.abs(children))}
+		</Box>
+	);
+};
+
+export default Growth;

apps/meteor/client/components/dataView/NegativeGrowthSymbol.stories.tsx

@@ -0,0 +1,24 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { Meta } from '@storybook/react';
+
+import NegativeGrowthSymbol from './NegativeGrowthSymbol';
+import { useAutoSequence } from '../../stories/hooks/useAutoSequence';
+
+export default {
+	component: NegativeGrowthSymbol,
+	parameters: {
+		layout: 'centered',
+		controls: { hideNoControlsWarning: true },
+	},
+	decorators: [
+		(fn) => {
+			const color = useAutoSequence(['neutral-500', 'primary-500', 'danger-500', 'warning-500', 'success-500']);
+
+			return <Box color={color}>{fn()}</Box>;
+		},
+	],
+} satisfies Meta<typeof NegativeGrowthSymbol>;
+
+export const Default = {
+	name: 'NegativeGrowthSymbol',
+};

apps/meteor/client/components/dataView/NegativeGrowthSymbol.tsx

@@ -0,0 +1,26 @@
+import type { ComponentProps } from 'react';
+
+const style = { width: '1.5em', height: '1.5em', verticalAlign: '-0.5em' };
+
+export type NegativeGrowthSymbolProps = Omit<ComponentProps<'svg'>, 'style'>;
+
+const NegativeGrowthSymbol = (props: NegativeGrowthSymbolProps) => (
+	<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 24' style={style} {...props}>
+		<path
+			clipRule='evenodd'
+			fill='currentColor'
+			fillRule='evenodd'
+			d={`M4.70712 8.50049L8.55757 12.3509C9.14335 12.9367 10.0931 12.9367
+			10.6789 12.3509L11.9282 11.1016L15.9295 15.1029L14.2054 15.1029C13.6531
+			15.1029 13.2054 15.5506 13.2054 16.1029C13.2054 16.6551 13.6531 17.1029
+			14.2054 17.1029L18.3437 17.1029C18.896 17.1029 19.3437 16.6551 19.3437
+			16.1029L19.3437 11.9645C19.3437 11.4123 18.896 10.9645 18.3437 10.9645
+			C17.7914 10.9645 17.3437 11.4123 17.3437 11.9645L17.3437 13.6886L12.9889
+			9.33382C12.4031 8.74803 11.4534 8.74803 10.8676 9.33382L9.61823 10.5832
+			L6.12133 7.08627C5.73081 6.69575 5.09765 6.69575 4.70712 7.08628C4.3166
+			7.4768 4.3166 8.10996 4.70712 8.50049Z`}
+		/>
+	</svg>
+);
+
+export default NegativeGrowthSymbol;

apps/meteor/client/components/dataView/PositiveGrowthSymbol.stories.tsx

@@ -0,0 +1,24 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { Meta } from '@storybook/react';
+
+import PositiveGrowthSymbol from './PositiveGrowthSymbol';
+import { useAutoSequence } from '../../stories/hooks/useAutoSequence';
+
+export default {
+	component: PositiveGrowthSymbol,
+	parameters: {
+		layout: 'centered',
+		controls: { hideNoControlsWarning: true },
+	},
+	decorators: [
+		(fn) => {
+			const color = useAutoSequence(['neutral-500', 'primary-500', 'danger-500', 'warning-500', 'success-500']);
+
+			return <Box color={color}>{fn()}</Box>;
+		},
+	],
+} satisfies Meta<typeof PositiveGrowthSymbol>;
+
+export const Default = {
+	name: 'PositiveGrowthSymbol',
+};

apps/meteor/client/components/dataView/PositiveGrowthSymbol.tsx

@@ -0,0 +1,26 @@
+import type { ComponentProps } from 'react';
+
+const style = { width: '1.5em', height: '1.5em', verticalAlign: '-0.5em' };
+
+export type PositiveGrowthSymbolProps = Omit<ComponentProps<'svg'>, 'style'>;
+
+const PositiveGrowthSymbol = (props: PositiveGrowthSymbolProps) => (
+	<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style={style} {...props}>
+		<path
+			clipRule='evenodd'
+			fill='currentColor'
+			fillRule='evenodd'
+			d={`M4.70712 15.3265L8.55757 11.4761C9.14335 10.8903 10.0931 10.8903
+			10.6789 11.4761L11.9282 12.7254L15.9295 8.72417L14.2054 8.72417C13.6531
+			8.72417 13.2054 8.27646 13.2054 7.72417C13.2054 7.17189 13.6531 6.72417
+			14.2054 6.72417L18.3437 6.72418C18.896 6.72417 19.3437 7.17189 19.3437
+			7.72418L19.3437 11.8625C19.3437 12.4148 18.896 12.8625 18.3437 12.8625
+			C17.7914 12.8625 17.3437 12.4148 17.3437 11.8625L17.3437 10.1384L12.9889
+			14.4932C12.4031 15.079 11.4534 15.079 10.8676 14.4932L9.61823 13.2439
+			L6.12133 16.7408C5.73081 17.1313 5.09765 17.1313 4.70712 16.7408C4.3166
+			16.3502 4.3166 15.7171 4.70712 15.3265Z`}
+		/>
+	</svg>
+);
+
+export default PositiveGrowthSymbol;