From 29473fe100bd096d31b70a49d07b5a330c642fec Mon Sep 17 00:00:00 2001
From: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com>
Date: Thu, 27 Jul 2023 07:53:35 +0700
Subject: [PATCH] Add ui/progress-bar stories (#936)

* Add ui/progress-bar stories

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* Add requested changes

Co-authored-by: RubensRafael <rubensrafael2@live.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>
---
 .../__stories__/ProgressBar.stories.tsx       | 60 +++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 front/src/modules/ui/progress-bar/components/__stories__/ProgressBar.stories.tsx

diff --git a/front/src/modules/ui/progress-bar/components/__stories__/ProgressBar.stories.tsx b/front/src/modules/ui/progress-bar/components/__stories__/ProgressBar.stories.tsx
new file mode 100644
index 000000000000..2b610c2a321a
--- /dev/null
+++ b/front/src/modules/ui/progress-bar/components/__stories__/ProgressBar.stories.tsx
@@ -0,0 +1,60 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { ProgressBar } from '../ProgressBar';
+
+const meta: Meta<typeof ProgressBar> = {
+  title: 'UI/ProgressBar/ProgressBar',
+  component: ProgressBar,
+  args: {
+    duration: 10000,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ProgressBar>;
+const args = {};
+const defaultArgTypes = {
+  control: false,
+};
+export const Default: Story = {
+  args,
+  decorators: [ComponentDecorator],
+};
+
+export const Catalog = {
+  args: {
+    ...args,
+  },
+  argTypes: {
+    barHeight: defaultArgTypes,
+    barColor: defaultArgTypes,
+    autoStart: defaultArgTypes,
+  },
+  parameters: {
+    catalog: [
+      {
+        name: 'animation',
+        values: [true, false],
+        props: (autoStart: string) => ({ autoStart }),
+        labels: (autoStart: string) => `AutoStart: ${autoStart}`,
+      },
+      {
+        name: 'colors',
+        values: [undefined, 'blue'],
+        props: (barColor: string) => ({ barColor }),
+        labels: (color: string) => `Color: ${color ?? 'default'}`,
+      },
+      {
+        name: 'sizes',
+        values: [undefined, 10],
+        props: (barHeight: number) => ({ barHeight }),
+        labels: (size: number) => `Size: ${size ? size + ' px' : 'default'}`,
+      },
+    ],
+  },
+  decorators: [CatalogDecorator],
+};