/** Source code string shown in the Storybook Docs tab for the ERP Onboarding Wizard story */
declare const formExampleSource = "\nimport {\n  StepperLayout,\n  StepperLayoutContent,\n  StepperLayoutFooter,\n  StepperLayoutNav,\n  StepperLayoutPanel,\n  StepperLayoutBack,\n  StepperLayoutNext,\n  useStepper,\n  useStepperState,\n  useStepperHandlers,\n  useStepperBeforeNavigate,\n} from '@jtl-software/platform-ui-react';\nimport { Button, Box } from '@jtl-software/platform-ui-react';\nimport { StepperStep } from '@jtl-software/platform-ui-react';\nimport { AppHeader } from '@jtl-software/platform-ui-react';\n\ntype StepperFormMap = {\n  welcome:  { __stored?: { instanceType: string } };\n  company:  { __stored?: { firstName: string; lastName: string; companyName: string } };\n  shipping: { __stored?: { shippingProvider: string; acceptShippingTerms: boolean } };\n  shop:     { __stored?: { salesChannel: string; shopName: string; acceptShopTerms: boolean } };\n  setup:    Record<string, never>;\n};\n\nconst stepperDefinition = [\n  { id: 'welcome'  as const, title: 'Welcome',      description: 'How would you like to get started?',   schema: welcomeSchema,      defaultValues: { instanceType: '' } },\n  { id: 'company'  as const, title: 'Company Data',  description: 'Please enter your company data.',       schema: companyDataSchema,   defaultValues: { firstName: '', lastName: '', companyName: '' } },\n  { id: 'shipping' as const, title: 'Shipping',      description: 'Pick a shipping provider.',             schema: shippingSchema,      defaultValues: { shippingProvider: 'dhl', acceptShippingTerms: false } },\n  { id: 'shop'     as const, title: 'Online Shop',   description: 'Choose a sales channel.',               schema: onlineShopSchema,    defaultValues: { salesChannel: 'jtl-shop', shopName: '', acceptShopTerms: false } },\n  { id: 'setup'    as const, title: 'Setup',         description: 'Your instance is being prepared.' },\n];\n\n// \u2500\u2500 Step component pattern \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n//\n// Each step reads its own schema/defaultValues from the stepper context via\n// useStepperState, saves data via useStepperHandlers, and intercepts navigation\n// for async validation via useStepperBeforeNavigate.\n\ninterface IWelcomeStepProps {\n  id: 'welcome';\n}\n\nconst WelcomeStep = ({ id }: IWelcomeStepProps) => {\n  void id;\n\n  // useStepperState \u2014 read current step's initialData (schema + defaultValues)\n  // and previously stored data (storedData) for restoring on back-navigation.\n  const { currentStep } = useStepperState<StepperFormMap, 'welcome'>();\n  const { schema, defaultValues } = currentStep.initialData;\n\n  // useStepperHandlers \u2014 setStepData persists form values into the stepper store;\n  // getStepData reads another step's saved values.\n  const { setStepData } = useStepperHandlers<StepperFormMap>();\n\n  const form = useZodForm({\n    schema,\n    defaultValues: currentStep.storedData ?? defaultValues,\n  });\n\n  // useStepperBeforeNavigate \u2014 one interceptor consulted before every move (next / back / goto).\n  // Return false to block; anything else proceeds. Do NOT call goNext/goBack/goTo here \u2014\n  // the stepper performs the move for you.\n  useStepperBeforeNavigate<StepperFormMap>(async action => {\n    if (action.type === 'next' && !(await form.trigger())) return false; // block when invalid\n    setStepData('welcome', form.getValues()); // persist a draft on every leave\n  });\n\n  return (\n    <Form form={form} onSubmit={() => {}} noValidate>\n      {/* step-specific fields */}\n    </Form>\n  );\n};\n\n// \u2500\u2500 Root wizard component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nexport const ERPOnboardingWizard = () => {\n  const stepper = useStepper<StepperFormMap>(stepperDefinition);\n\n  return (\n    <StepperLayout stepper={stepper}>\n      <StepperLayoutNav>\n        {stepperDefinition.map(s => (\n          <StepperStep key={s.id} title={s.title} />\n        ))}\n      </StepperLayoutNav>\n\n      <StepperLayoutContent>\n        <StepperLayoutPanel stepId=\"welcome\">\n          <AppHeader title=\"Welcome!\" subtitle=\"How would you like to get started?\" icon={{ icon: 'Plus', variant: 'info', size: 'lg' }} />\n          <WelcomeStep id=\"welcome\" />\n        </StepperLayoutPanel>\n\n        <StepperLayoutPanel stepId=\"company\">\n          <AppHeader title=\"Company Data\" subtitle=\"Please enter your company data to get started.\" icon={{ icon: 'Building2', variant: 'info', size: 'lg' }} />\n          <CompanyDataStep id=\"company\" />\n        </StepperLayoutPanel>\n\n        <StepperLayoutPanel stepId=\"shipping\">\n          <AppHeader title=\"Shipping setup\" subtitle=\"Pick a shipping provider and accept the terms.\" icon={{ icon: 'Truck', variant: 'info', size: 'lg' }} />\n          <ShippingStep id=\"shipping\" />\n        </StepperLayoutPanel>\n\n        <StepperLayoutPanel stepId=\"shop\">\n          <AppHeader title=\"Connect your online shop\" subtitle=\"Choose a sales channel and accept the terms.\" icon={{ icon: 'Store', variant: 'info', size: 'lg' }} />\n          <OnlineShopStep id=\"shop\" />\n        </StepperLayoutPanel>\n\n        <StepperLayoutPanel stepId=\"setup\">\n          <AppHeader title=\"Finishing up\" subtitle=\"Your instance is being prepared.\" icon={{ icon: 'Loader2', variant: 'info', size: 'lg' }} />\n          <SetupStep id=\"setup\" />\n        </StepperLayoutPanel>\n\n        <StepperLayoutFooter>\n          {/* StepperLayoutBack renders invisible (keeps space) on the first step */}\n          <StepperLayoutBack>\n            <Button\n              label=\"Back\"\n              variant=\"outline\"\n              icon=\"ChevronLeft\"\n              iconPosition=\"left\"\n              onClick={stepper.layoutProps.onBack}\n            />\n          </StepperLayoutBack>\n\n          {/* Pass onNext \u2014 label and icon adapt to the current step */}\n          <StepperLayoutNext>\n          <Box className=\"flex gap-2\">\n            <Button label=\"Cancel\" variant=\"ghost\" onClick={stepper.reset} />\n\n            <Button\n              label={stepper.isLast ? 'Submit' : 'Next'}\n              icon={!stepper.isLast ? 'ChevronRight' : undefined}\n              iconPosition=\"right\"\n              onClick={stepper.layoutProps.onNext}\n            />\n          </Box>\n          </StepperLayoutNext>\n        </StepperLayoutFooter>\n      </StepperLayoutContent>\n    </StepperLayout>\n  );\n};\n";
export default formExampleSource;