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

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
pull/10808/head^2
GitStart-Cal.com 2023-08-17 05:26:08 -03:00 committed by GitHub
parent 053da1ec32
commit f45803fcfa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 53 additions and 0 deletions

View File

@ -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: {

View File

@ -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) => (

View File

@ -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": {

View File

@ -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>