valtech-components 2.0.687 → 2.0.689

package/src/lib/components/organisms/wizard/wizard.stories.ts

@@ -0,0 +1,653 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { WizardComponent } from './wizard.component';
+import { WizardFooterComponent } from './wizard-footer/wizard-footer.component';
+import { ComponentStates } from '../../types';
+import { WizardMetadata, Steps } from './types';
+
+/**
+ * Helper to create proper NoContentMetadata structure for wizard steps
+ */
+const createStepTitles = (
+  imageSrc: string,
+  title: string,
+  subtitle: string
+) => ({
+  image: {
+    src: imageSrc,
+    alt: title,
+    mode: 'box' as const,
+    shaded: false,
+    bordered: false,
+    size: 'small' as const,
+    limited: true,
+    alignment: 'center' as const,
+  },
+  bottomContent: {
+    color: '' as any,
+    bordered: false,
+    closable: false,
+    mode: 'center' as const,
+    actions: {
+      buttons: [],
+      position: 'center' as const,
+      columned: false,
+    },
+    content: {
+      title: {
+        content: title,
+        color: 'dark' as any,
+        size: 'medium' as const,
+        bold: false,
+      },
+      bellowTitle: {
+        content: subtitle,
+        color: 'medium' as any,
+        size: 'medium' as const,
+        bold: false,
+      },
+      position: 'center' as const,
+    },
+    alignment: 'center' as const,
+  },
+});
+
+/**
+ * Helper to create button configurations with correct token convention
+ */
+const createSolidButton = (text: string, token: string) => ({
+  text,
+  color: 'primary' as any,
+  state: ComponentStates.ENABLED,
+  fill: 'solid' as const,
+  type: 'button' as const,
+  token,
+  shape: 'round' as const,
+  size: 'default' as const,
+});
+
+const createOutlineButton = (text: string, token: string) => ({
+  text,
+  color: 'primary' as any,
+  state: ComponentStates.ENABLED,
+  fill: 'outline' as const,
+  type: 'button' as const,
+  token,
+  shape: 'round' as const,
+  size: 'default' as const,
+});
+
+const meta: Meta<WizardComponent> = {
+  title: 'Organisms/Wizard',
+  component: WizardComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, WizardComponent, WizardFooterComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Wizard configuration object',
+      control: 'object',
+    },
+    onClick: {
+      action: 'onClick',
+      description: 'Event emitted when navigation occurs',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-wizard
+
+A multi-step wizard component for guiding users through a process. Each step displays a "no content" screen with image and banners, plus projected content for forms or other inputs.
+
+### Usage
+
+The wizard requires two components working together:
+- \`val-wizard\`: Displays the step content with image and titles
+- \`val-wizard-footer\`: Displays progress bar and navigation buttons
+
+\`\`\`html
+<val-wizard [props]="wizardConfig">
+  <div step>
+    <!-- Your step content here (forms, etc.) -->
+  </div>
+</val-wizard>
+<val-wizard-footer [props]="wizardConfig" (onClick)="handleWizardAction($event)"></val-wizard-footer>
+\`\`\`
+
+### Features
+
+- Multiple step navigation
+- Progress bar indicator
+- Loading state with spinner
+- Error state handling
+- Content projection for step content
+- Automatic scroll to top on step change
+
+### State Management
+
+Use the component reference to control the wizard:
+- \`wizard.setCurrent(stepNumber)\`: Navigate to a step
+- \`wizard.working()\`: Show loading state
+- \`wizard.done()\`: Return to enabled state
+- \`wizard.setError(message)\`: Show error state
+
+### Button Token Convention
+
+For proper navigation, button tokens should include:
+- \`right\` for forward navigation (e.g., 'next-right-button')
+- \`left\` for backward navigation (e.g., 'back-left-button')
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<WizardComponent>;
+
+// Sample images for steps
+const STEP_IMAGES = {
+  step1: 'https://avatars.githubusercontent.com/u/132410?v=4',
+  step2: 'https://avatars.githubusercontent.com/u/102411?v=4',
+  step3: 'https://avatars.githubusercontent.com/u/812413?v=4',
+  error: 'https://avatars.githubusercontent.com/u/102410?v=4',
+};
+
+const createWizardProps = (currentStep: number = 1, state: string = 'ENABLED'): WizardMetadata => {
+  const steps: Steps = {
+    1: {
+      titles: createStepTitles(
+        STEP_IMAGES.step1,
+        'Step 1: Welcome',
+        "Let's get started with your account setup"
+      ),
+      buttons: [createSolidButton('Next', 'first-right-button')],
+    },
+    2: {
+      titles: createStepTitles(
+        STEP_IMAGES.step2,
+        'Step 2: Personal Info',
+        'Tell us a bit about yourself'
+      ),
+      buttons: [
+        createOutlineButton('Back', 'second-left-button'),
+        createSolidButton('Next', 'second-right-button'),
+      ],
+    },
+    3: {
+      titles: createStepTitles(
+        STEP_IMAGES.step3,
+        'Step 3: Complete',
+        'Review your information and submit'
+      ),
+      buttons: [
+        createOutlineButton('Back', 'third-left-button'),
+        createSolidButton('Submit', 'third-right-button'),
+      ],
+    },
+  };
+
+  return {
+    state: state as any,
+    current: currentStep,
+    steps,
+    error: {
+      titles: {
+        image: {
+          src: STEP_IMAGES.error,
+          alt: 'Error',
+          mode: 'box',
+          shaded: false,
+          bordered: false,
+          size: 'small',
+          limited: true,
+        },
+        bottomContent: {
+          color: 'medium',
+          bordered: false,
+          closable: false,
+          mode: 'center',
+          actions: {
+            buttons: [createSolidButton('Retry', 'error-retry-button')],
+            position: 'center',
+            columned: false,
+          },
+          content: {
+            title: {
+              content: 'Something Went Wrong',
+              color: 'dark',
+              size: 'medium',
+              bold: false,
+            },
+            bellowTitle: {
+              content: 'An error occurred during the process',
+              color: 'medium',
+              size: 'medium',
+              bold: false,
+            },
+            position: 'center',
+          },
+          alignment: 'center',
+        },
+      },
+      buttons: [],
+    },
+  } as any;
+};
+
+export const Default: Story = {
+  render: (args) => ({
+    template: `
+      <div style="max-width: 600px; margin: 0 auto;">
+        <val-wizard [props]="props">
+          <div step>
+            <div style="text-align: center; padding: 16px;">
+              <h3>Step Content</h3>
+              <p>This is the content area for the current step. You can add forms, information, or any other content here.</p>
+            </div>
+          </div>
+        </val-wizard>
+        <val-wizard-footer [props]="props"></val-wizard-footer>
+      </div>
+    `,
+    props: args,
+  }),
+  args: {
+    props: createWizardProps(1),
+  },
+};
+
+export const StepOne: Story = {
+  render: (args) => ({
+    template: `
+      <div style="max-width: 600px; margin: 0 auto;">
+        <val-wizard [props]="props">
+          <div step>
+            <div style="text-align: center; padding: 16px;">
+              <h3>Welcome!</h3>
+              <p>Click "Next" to continue to the next step.</p>
+            </div>
+          </div>
+        </val-wizard>
+        <val-wizard-footer [props]="props"></val-wizard-footer>
+      </div>
+    `,
+    props: args,
+  }),
+  args: {
+    props: createWizardProps(1),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'First step of the wizard with only a "Next" button.',
+      },
+    },
+  },
+};
+
+export const StepTwo: Story = {
+  render: (args) => ({
+    template: `
+      <div style="max-width: 600px; margin: 0 auto;">
+        <val-wizard [props]="props">
+          <div step>
+            <div style="text-align: center; padding: 16px;">
+              <h3>Personal Information</h3>
+              <p>You can go back or continue forward from this step.</p>
+            </div>
+          </div>
+        </val-wizard>
+        <val-wizard-footer [props]="props"></val-wizard-footer>
+      </div>
+    `,
+    props: args,
+  }),
+  args: {
+    props: createWizardProps(2),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Second step showing both "Back" and "Next" buttons.',
+      },
+    },
+  },
+};
+
+export const StepThree: Story = {
+  render: (args) => ({
+    template: `
+      <div style="max-width: 600px; margin: 0 auto;">
+        <val-wizard [props]="props">
+          <div step>
+            <div style="text-align: center; padding: 16px;">
+              <h3>Review & Submit</h3>
+              <p>This is the final step. Review your information and click "Submit" to complete.</p>
+            </div>
+          </div>
+        </val-wizard>
+        <val-wizard-footer [props]="props"></val-wizard-footer>
+      </div>
+    `,
+    props: args,
+  }),
+  args: {
+    props: createWizardProps(3),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Final step with "Back" and "Submit" buttons.',
+      },
+    },
+  },
+};
+
+export const LoadingState: Story = {
+  render: (args) => ({
+    template: `
+      <div style="max-width: 600px; margin: 0 auto;">
+        <val-wizard [props]="props">
+          <div step></div>
+        </val-wizard>
+        <val-wizard-footer [props]="props"></val-wizard-footer>
+      </div>
+    `,
+    props: args,
+  }),
+  args: {
+    props: createWizardProps(2, 'WORKING'),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'The wizard in loading/working state shows a spinner and disables navigation.',
+      },
+    },
+  },
+};
+
+export const ErrorState: Story = {
+  render: (args) => ({
+    template: `
+      <div style="max-width: 600px; margin: 0 auto;">
+        <val-wizard [props]="props">
+          <div step></div>
+        </val-wizard>
+        <val-wizard-footer [props]="props"></val-wizard-footer>
+      </div>
+    `,
+    props: args,
+  }),
+  args: {
+    props: createWizardProps(2, 'ERROR'),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'When an error occurs, the wizard displays the error state with retry options.',
+      },
+    },
+  },
+};
+
+export const SpanishVersion: Story = {
+  render: () => {
+    const props: WizardMetadata = {
+      state: 'ENABLED',
+      current: 1,
+      steps: {
+        1: {
+          titles: createStepTitles(
+            STEP_IMAGES.step1,
+            'Paso uno',
+            'Desde aquí puedes accionar el botón para continuar'
+          ),
+          buttons: [createSolidButton('Siguiente', 'first-right-button')],
+        },
+        2: {
+          titles: createStepTitles(
+            STEP_IMAGES.step2,
+            'Paso dos',
+            'Este es el segundo paso, puedes avanzar o retroceder'
+          ),
+          buttons: [
+            createOutlineButton('Atrás', 'second-left-button'),
+            createSolidButton('Siguiente', 'second-right-button'),
+          ],
+        },
+        3: {
+          titles: createStepTitles(
+            STEP_IMAGES.step3,
+            'Paso final',
+            'Estás en el último paso, puedes finalizar aquí'
+          ),
+          buttons: [
+            createOutlineButton('Atrás', 'third-left-button'),
+            createSolidButton('Finalizar', 'third-right-button'),
+          ],
+        },
+      },
+      error: {
+        titles: {
+          image: { src: STEP_IMAGES.error, alt: 'Error', mode: 'box', shaded: false, bordered: false, size: 'small', limited: true },
+          bottomContent: {
+            color: 'medium',
+            bordered: false,
+            closable: false,
+            mode: 'center',
+            actions: { buttons: [createSolidButton('Reintentar', 'error-retry-button')], position: 'center', columned: false },
+            content: {
+              title: { content: '¡Algo salió mal!', color: 'dark', size: 'medium', bold: false },
+              bellowTitle: { content: 'Ocurrió un error durante el proceso', color: 'medium', size: 'medium', bold: false },
+              position: 'center',
+            },
+            alignment: 'center',
+          },
+        },
+        buttons: [],
+      },
+    } as any;
+
+    return {
+      template: `
+        <div style="max-width: 600px; margin: 0 auto;">
+          <val-wizard [props]="props">
+            <div step>
+              <div style="text-align: center; padding: 16px;">
+                <h3>Contenido para el paso 1</h3>
+                <p>Este es el primer paso. Aquí puedes accionar el botón para avanzar al siguiente paso.</p>
+              </div>
+            </div>
+          </val-wizard>
+          <val-wizard-footer [props]="props"></val-wizard-footer>
+        </div>
+      `,
+      props: { props },
+    };
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Wizard with Spanish labels, matching the showcase demo.',
+      },
+    },
+  },
+};
+
+export const OnboardingWizard: Story = {
+  render: () => {
+    const props: WizardMetadata = {
+      state: 'ENABLED',
+      current: 1,
+      steps: {
+        1: {
+          titles: createStepTitles(
+            'https://ionicframework.com/docs/img/demos/avatar.svg',
+            'Welcome to Our App',
+            'Discover amazing features and get started in minutes'
+          ),
+          buttons: [
+            { text: 'Skip', color: 'medium', state: ComponentStates.ENABLED, fill: 'clear', type: 'button', token: 'skip', size: 'default' } as any,
+            createSolidButton('Get Started', 'first-right-button'),
+          ],
+        },
+        2: {
+          titles: createStepTitles(
+            'https://ionicframework.com/docs/img/demos/avatar.svg',
+            'Customize Your Experience',
+            'Set up your preferences to get the most out of the app'
+          ),
+          buttons: [
+            createOutlineButton('Back', 'second-left-button'),
+            createSolidButton('Continue', 'second-right-button'),
+          ],
+        },
+        3: {
+          titles: createStepTitles(
+            'https://ionicframework.com/docs/img/demos/avatar.svg',
+            "You're All Set!",
+            'Start exploring and enjoy all the features'
+          ),
+          buttons: [
+            createOutlineButton('Back', 'third-left-button'),
+            createSolidButton('Start Using App', 'third-right-button'),
+          ],
+        },
+      },
+      error: {
+        titles: {
+          image: { src: '', alt: 'Error', mode: 'box', shaded: false, bordered: false, size: 'small', limited: true },
+          bottomContent: {
+            color: 'medium',
+            bordered: false,
+            closable: false,
+            mode: 'center',
+            actions: { buttons: [createSolidButton('Retry', 'retry')], position: 'center', columned: false },
+            content: {
+              title: { content: 'Oops!', color: 'dark', size: 'medium', bold: false },
+              bellowTitle: { content: 'Something went wrong', color: 'medium', size: 'medium', bold: false },
+              position: 'center',
+            },
+            alignment: 'center',
+          },
+        },
+        buttons: [],
+      },
+    } as any;
+
+    return {
+      template: `
+        <div style="max-width: 600px; margin: 0 auto;">
+          <val-wizard [props]="props">
+            <div step>
+              <div style="text-align: center; padding: 24px;">
+                <p style="font-size: 48px; margin: 0;">&#128075;</p>
+                <p>Welcome! Let's get you set up.</p>
+              </div>
+            </div>
+          </val-wizard>
+          <val-wizard-footer [props]="props"></val-wizard-footer>
+        </div>
+      `,
+      props: { props },
+    };
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'An onboarding wizard for introducing users to the app features.',
+      },
+    },
+  },
+};
+
+export const WizardOnly: Story = {
+  args: {
+    props: createWizardProps(1),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Wizard component without footer. Note: For proper functionality, always use val-wizard-footer alongside val-wizard.',
+      },
+    },
+  },
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 48px; padding: 16px;">
+        <h3 style="margin: 0; color: #666;">Step Progression</h3>
+
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px;">
+          <div style="border: 1px solid #eee; border-radius: 8px; padding: 16px;">
+            <p style="margin: 0 0 8px 0; font-size: 12px; color: #999;">Step 1 of 3</p>
+            <val-wizard [props]="step1Props">
+              <div step><p style="text-align: center;">First step content</p></div>
+            </val-wizard>
+            <val-wizard-footer [props]="step1Props"></val-wizard-footer>
+          </div>
+
+          <div style="border: 1px solid #eee; border-radius: 8px; padding: 16px;">
+            <p style="margin: 0 0 8px 0; font-size: 12px; color: #999;">Step 2 of 3</p>
+            <val-wizard [props]="step2Props">
+              <div step><p style="text-align: center;">Second step content</p></div>
+            </val-wizard>
+            <val-wizard-footer [props]="step2Props"></val-wizard-footer>
+          </div>
+
+          <div style="border: 1px solid #eee; border-radius: 8px; padding: 16px;">
+            <p style="margin: 0 0 8px 0; font-size: 12px; color: #999;">Step 3 of 3</p>
+            <val-wizard [props]="step3Props">
+              <div step><p style="text-align: center;">Final step content</p></div>
+            </val-wizard>
+            <val-wizard-footer [props]="step3Props"></val-wizard-footer>
+          </div>
+        </div>
+
+        <h3 style="margin: 16px 0 0 0; color: #666;">States</h3>
+
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px;">
+          <div style="border: 1px solid #eee; border-radius: 8px; padding: 16px;">
+            <p style="margin: 0 0 8px 0; font-size: 12px; color: #999;">Loading State</p>
+            <val-wizard [props]="loadingProps">
+              <div step></div>
+            </val-wizard>
+            <val-wizard-footer [props]="loadingProps"></val-wizard-footer>
+          </div>
+
+          <div style="border: 1px solid #eee; border-radius: 8px; padding: 16px;">
+            <p style="margin: 0 0 8px 0; font-size: 12px; color: #999;">Error State</p>
+            <val-wizard [props]="errorProps">
+              <div step></div>
+            </val-wizard>
+            <val-wizard-footer [props]="errorProps"></val-wizard-footer>
+          </div>
+        </div>
+      </div>
+    `,
+    props: {
+      step1Props: createWizardProps(1),
+      step2Props: createWizardProps(2),
+      step3Props: createWizardProps(3),
+      loadingProps: createWizardProps(2, 'WORKING'),
+      errorProps: createWizardProps(2, 'ERROR'),
+    },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'A showcase of the wizard at different steps and states.',
+      },
+    },
+  },
+};