From 1faea19d1e7e9e3ecac0d6bfd785baeee8ca1d97 Mon Sep 17 00:00:00 2001
From: Phantom X <71615064+anon-phantom@users.noreply.github.com>
Date: Mon, 18 Sep 2023 14:08:45 +0300
Subject: [PATCH] [docs][joy-ui] Add `use-count-up` integration with the
 Circular Progress (#38952)

---
 .../CircularProgressCountUp.js                | 69 +++++++++++++++++++
 .../CircularProgressCountUp.tsx               | 69 +++++++++++++++++++
 .../circular-progress/circular-progress.md    |  8 +++
 test/regressions/index.js                     |  1 +
 4 files changed, 147 insertions(+)
 create mode 100644 docs/data/joy/components/circular-progress/CircularProgressCountUp.js
 create mode 100644 docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx

diff --git a/docs/data/joy/components/circular-progress/CircularProgressCountUp.js b/docs/data/joy/components/circular-progress/CircularProgressCountUp.js
new file mode 100644
index 00000000000000..9c4b1e8de9616f
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx b/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx
new file mode 100644
index 00000000000000..d6a01fc813a42f
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/docs/data/joy/components/circular-progress/circular-progress.md b/docs/data/joy/components/circular-progress/circular-progress.md
index 1e3d4e7113575d..a764b83defe3d6 100644
--- a/docs/data/joy/components/circular-progress/circular-progress.md
+++ b/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.
diff --git a/test/regressions/index.js b/test/regressions/index.js
index 7724a094a8cca8..82e1997dae0e67 100644
--- a/test/regressions/index.js
+++ b/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