b5b41da183
* storybook v2 init * Merge config into storybook vite build * Remove path * Storybook config tweaks * Added styles and settings for storybook v2, and started working on button documentation and examples. * Badges + flex wrap on mobile * Breadcrumbs+button+avatar * Checkbox * Input + moving files around * WIP table * WIP table grid * Replaced imports for new components. * Added first steps for varianttable. * Small alignment fix. * Custom Args Table - With scrollbar * Adding table to components that need it + darkmode * Add intro * Fix types * Remove V1 storybook and replace with V2 * Fix badge type error * Fixed storybook dependencies * Added cover image to storybook * Remove vita from ts config, we dont use vite. * Fixed button import. * Explained postcss pseudo plugin. * Fixed badge import. * Add Avatar Stories * ButtonGroup Stories * Fixed imports * Add checkbox stories * Add exports for differnt types of inputs * Fix form and text area input * Fix mass import errors Co-authored-by: Jeroen Reumkens <hello@jeroenreumkens.nl> Co-authored-by: Alex van Andel <me@alexvanandel.com>
70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
import { useRouter } from "next/router";
|
|
|
|
import classNames from "@calcom/lib/classNames";
|
|
import { Button } from "@calcom/ui/components/button";
|
|
import Stepper from "@calcom/ui/v2/core/Stepper";
|
|
|
|
type DefaultStep = {
|
|
title: string;
|
|
description: string;
|
|
content: JSX.Element;
|
|
enabled?: boolean;
|
|
isLoading: boolean;
|
|
};
|
|
|
|
function WizardForm<T extends DefaultStep>(props: { href: string; steps: T[]; containerClassname?: string }) {
|
|
const { href, steps } = props;
|
|
const router = useRouter();
|
|
const step = parseInt((router.query.step as string) || "1");
|
|
const currentStep = steps[step - 1];
|
|
const setStep = (newStep: number) => {
|
|
router.replace(`${href}?step=${newStep || 1}`, undefined, { shallow: true });
|
|
};
|
|
|
|
return (
|
|
<div className="mx-auto print:w-full">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img className="mx-auto mb-8 h-8" src="https://cal.com/logo.svg" alt="Cal.com Logo" />
|
|
<div
|
|
className={classNames(
|
|
"mb-8 divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow print:divide-transparent print:shadow-transparent",
|
|
props.containerClassname
|
|
)}>
|
|
<div className="px-4 py-5 sm:px-6">
|
|
<h1 className="font-cal text-2xl text-gray-900">{currentStep.title}</h1>
|
|
<p className="text-sm text-gray-500">{currentStep.description}</p>
|
|
</div>
|
|
<div className="print:p-none px-4 py-5 sm:p-6">{currentStep.content}</div>
|
|
{currentStep.enabled !== false && (
|
|
<div className="flex justify-end px-4 py-4 print:hidden sm:px-6">
|
|
{step > 1 && (
|
|
<Button
|
|
color="secondary"
|
|
onClick={() => {
|
|
setStep(step - 1);
|
|
}}>
|
|
Back
|
|
</Button>
|
|
)}
|
|
|
|
<Button
|
|
tabIndex={0}
|
|
loading={currentStep.isLoading}
|
|
type="submit"
|
|
color="primary"
|
|
form={`setup-step-${step}`}
|
|
className="relative">
|
|
{step < steps.length ? "Next" : "Finish"}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="print:hidden">
|
|
<Stepper href={href} step={step} steps={steps} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default WizardForm;
|