From f5e3c69c852bc18e1c3c7e83e8db14e3fd4f1c18 Mon Sep 17 00:00:00 2001
From: Daniel Lizano <dlizano@outlook.com>
Date: Thu, 13 Jul 2023 02:33:06 -0600
Subject: [PATCH] refactor: implement abstract factory

---
 stories/Doughnut.tsx | 66 +++++++++++++++++++++++++++++++-------------
 1 file changed, 47 insertions(+), 19 deletions(-)

diff --git a/stories/Doughnut.tsx b/stories/Doughnut.tsx
index c11dd27b6..9c437f109 100644
--- a/stories/Doughnut.tsx
+++ b/stories/Doughnut.tsx
@@ -3,6 +3,46 @@ import 'chart.js/auto';
 import { Doughnut } from '../src';
 import { data } from '../sandboxes/doughnut/default/App';
 
+// Interface for the chart factory
+interface ChartFactory {
+  createChart(args: any): JSX.Element;
+}
+
+// Implementation of the Doughnut chart factory
+class DoughnutFactory implements ChartFactory {
+  /**
+   * Creates a Doughnut chart with the given arguments.
+   * @param args - The arguments to pass to the Doughnut component.
+   * @returns A JSX element representing the Doughnut chart.
+   */
+  createChart(args: any): JSX.Element {
+    return <Doughnut {...args} />;
+  }
+}
+
+// Implementation of the Rotating Doughnut chart factory
+class RotatingDoughnutFactory implements ChartFactory {
+  /**
+   * Creates a Rotating Doughnut chart with the given arguments.
+   * @param args - The arguments to pass to the Doughnut component.
+   * @returns A JSX element representing the Rotating Doughnut chart.
+   */
+  createChart(args: any): JSX.Element {
+    const [rotation, setRotation] = useState(0);
+
+    useEffect(() => {
+      const interval = setInterval(() => {
+        setRotation(rotation => rotation + 90);
+      }, 3000);
+
+      return () => clearInterval(interval);
+    });
+
+    return <Doughnut {...args} options={{ rotation }} />;
+  }
+}
+
+// Storybook configuration for the Doughnut component
 export default {
   title: 'Components/Doughnut',
   component: Doughnut,
@@ -15,26 +55,14 @@ export default {
   },
 };
 
-export const Default = args => <Doughnut {...args} />;
-
-Default.args = {
-  data,
+// Storybook story for the default Doughnut chart
+export const Default = args => {
+  const factory = new DoughnutFactory();
+  return factory.createChart({ ...args, data });
 };
 
+// Storybook story for the rotating Doughnut chart
 export const Rotation = args => {
-  const [rotation, setRotation] = useState(0);
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setRotation(rotation => rotation + 90);
-    }, 3000);
-
-    return () => clearInterval(interval);
-  });
-
-  return <Doughnut {...args} options={{ rotation }} />;
-};
-
-Rotation.args = {
-  data,
+  const factory = new RotatingDoughnutFactory();
+  return factory.createChart({ ...args, data });
 };