chore: add Steps in storybook (CALCOM-10760) (#10810)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>

apps/storybook/.storybook/main.js

@@ -15,6 +15,7 @@ module.exports = {
     "storybook-addon-rtl-direction",
     "storybook-react-i18next",
     "storybook-addon-next",
+    "storybook-addon-next-router",
     /*{
       name: "storybook-addon-next",
       options: {

apps/storybook/.storybook/preview.jsx

@@ -1,4 +1,5 @@
 import { addDecorator } from "@storybook/react";
+import { AppRouterContext } from "next/dist/shared/lib/app-router-context";
 import { I18nextProvider } from "react-i18next";
 
 import "../styles/globals.css";
@@ -13,6 +14,13 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  nextRouter: {
+    pathname: "/",
+    asPath: "/",
+    query: {},
+    push() {},
+    Provider: AppRouterContext.Provider,
+  },
 };
 
 addDecorator((storyFn) => (

apps/storybook/package.json

@@ -23,6 +23,7 @@
     "next": "^13.4.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "storybook-addon-next-router": "^4.0.2",
     "storybook-addon-rtl-direction": "^0.0.19"
   },
   "devDependencies": {

packages/ui/components/form/step/steps.stories.mdx

@@ -0,0 +1,43 @@
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
+
+import { Title, VariantRow, VariantsTable, CustomArgsTable } from "@calcom/storybook/components";
+
+import { Steps } from "./Steps";
+
+<Meta title="UI/Form/Steps" component={Steps} />
+
+<Title title="Steps" suffix="Brief" subtitle="Version 1.0 — Last Update: 15 Aug 2023" />
+
+## Definition
+
+Steps component is used to display the current step out of the total steps in a process.
+
+## Structure
+
+The `Steps` component can be used to show the steps of the total in a process.
+
+<CustomArgsTable of={Steps} />
+
+## Steps Story
+
+<Canvas>
+  <Story
+    name="Steps"
+    args={{ maxSteps: 4, currentStep: 2 }}
+    argTypes={{ maxSteps: { control: "number" }, currentStep: { control: "number" } }}>
+    {({ maxSteps, currentStep }) => (
+      <VariantsTable titles={["Default"]} columnMinWidth={150}>
+        <VariantRow>
+          <Steps
+            maxSteps={maxSteps}
+            currentStep={currentStep}
+            navigateToStep={(step) => {
+              const newPath = `?path=/story/ui-form-steps--steps&args=currentStep:${step + 1}`;
+              window.open(newPath, "_self");
+            }}
+          />
+        </VariantRow>
+      </VariantsTable>
+    )}
+  </Story>
+</Canvas>