[docs][joy-ui] Add use-count-up integration with the Circular Progr…

…ess (mui#38952)

docs/data/joy/components/circular-progress/CircularProgressCountUp.js

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import Stack from '@mui/joy/Stack';
+import Button from '@mui/joy/Button';
+import Typography from '@mui/joy/Typography';
+import CircularProgress from '@mui/joy/CircularProgress';
+import { useCountUp } from 'use-count-up';
+
+export default function CircularProgressCountUp() {
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [buttonLabel, setButtonLabel] = React.useState('Start');
+
+  const { value: value1, reset: resetValue1 } = useCountUp({
+    isCounting: isLoading,
+    duration: 1,
+    start: 0,
+    end: 25,
+    onComplete: () => {
+      setIsLoading(false);
+      setButtonLabel('Reset');
+    },
+  });
+
+  const { value: value2, reset } = useCountUp({
+    isCounting: true,
+    duration: 1,
+    start: 0,
+    end: 75,
+  });
+
+  const handleButtonClick = () => {
+    if (isLoading) {
+      setIsLoading(false);
+      setButtonLabel('Start');
+      resetValue1();
+    } else if (buttonLabel === 'Reset') {
+      setButtonLabel('Start');
+      resetValue1();
+    } else {
+      setIsLoading(true);
+      setButtonLabel('Reset');
+    }
+  };
+
+  return (
+    <Stack direction="row" alignItems="center" flexWrap="wrap" spacing={8}>
+      <Stack spacing={2}>
+        <CircularProgress size="lg" determinate value={value1}>
+          <Typography>{value1}%</Typography>
+        </CircularProgress>
+        <Button
+          size="sm"
+          variant="outlined"
+          color="neutral"
+          onClick={handleButtonClick}
+        >
+          {buttonLabel}
+        </Button>
+      </Stack>
+      <Stack spacing={2}>
+        <CircularProgress size="lg" determinate value={value2}>
+          <Typography>{value2}%</Typography>
+        </CircularProgress>
+        <Button size="sm" variant="outlined" color="neutral" onClick={reset}>
+          Reload
+        </Button>
+      </Stack>
+    </Stack>
+  );
+}

docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import Stack from '@mui/joy/Stack';
+import Button from '@mui/joy/Button';
+import Typography from '@mui/joy/Typography';
+import CircularProgress from '@mui/joy/CircularProgress';
+import { useCountUp } from 'use-count-up';
+
+export default function CircularProgressCountUp() {
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [buttonLabel, setButtonLabel] = React.useState('Start');
+
+  const { value: value1, reset: resetValue1 } = useCountUp({
+    isCounting: isLoading,
+    duration: 1,
+    start: 0,
+    end: 25,
+    onComplete: () => {
+      setIsLoading(false);
+      setButtonLabel('Reset');
+    },
+  });
+
+  const { value: value2, reset } = useCountUp({
+    isCounting: true,
+    duration: 1,
+    start: 0,
+    end: 75,
+  });
+
+  const handleButtonClick = () => {
+    if (isLoading) {
+      setIsLoading(false);
+      setButtonLabel('Start');
+      resetValue1();
+    } else if (buttonLabel === 'Reset') {
+      setButtonLabel('Start');
+      resetValue1();
+    } else {
+      setIsLoading(true);
+      setButtonLabel('Reset');
+    }
+  };
+
+  return (
+    <Stack direction="row" alignItems="center" flexWrap="wrap" spacing={8}>
+      <Stack spacing={2}>
+        <CircularProgress size="lg" determinate value={value1 as number}>
+          <Typography>{value1}%</Typography>
+        </CircularProgress>
+        <Button
+          size="sm"
+          variant="outlined"
+          color="neutral"
+          onClick={handleButtonClick}
+        >
+          {buttonLabel}
+        </Button>
+      </Stack>
+      <Stack spacing={2}>
+        <CircularProgress size="lg" determinate value={value2 as number}>
+          <Typography>{value2}%</Typography>
+        </CircularProgress>
+        <Button size="sm" variant="outlined" color="neutral" onClick={reset}>
+          Reload
+        </Button>
+      </Stack>
+    </Stack>
+  );
+}

docs/data/joy/components/circular-progress/circular-progress.md

@@ -86,6 +86,14 @@ The size of the Circular Progress is controlled by a button, an icon button, or
 
 {{"demo": "CircularProgressButton.js"}}
 
+## Third-party integrations
+
+### use-count-up
+
+Use the `useCountUp` hook from the [use-count-up](https://www.npmjs.com/package/use-count-up) package to create a counting animation by providing `start`, `end`, and `duration` values.
+
+{{"demo": "CircularProgressCountUp.js"}}
+
 ## CSS variables playground
 
 Play around with all the CSS variables available on the component to see how the design changes.

test/regressions/index.js

@@ -32,6 +32,7 @@ const blacklist = [
   'docs-joy-tools/PaletteThemeViewer.png', // No need for theme tokens
   'docs-joy-tools/ShadowThemeViewer.png', // No need for theme tokens
   'docs-joy-customization-theme-typography/TypographyThemeViewer.png', // No need for theme tokens
+  'docs-joy-components-circular-progress/CircularProgressCountUp.png', // Flaky due to animation
   'docs-joy-components-divider/DividerChildPosition.png', // Needs interaction
   'docs-joy-components-linear-progress/LinearProgressCountUp.png', // Flaky due to animation
   'docs-base-guides-working-with-tailwind-css/PlayerFinal.png', // No public components