Dev mode npm run dev

Для запуска проекта в dev mode выполняйте команду npm run dev.

Для удобства повседневной работы над вашими проектами команда npm run dev запускает sh скрипт dev.sh, который игнорируется гитом. Таким образом вы можете указать путь для компиляции в любой ваш проект, так чтобы не возникало конфликтов в системе контроля версий с другими разработчиками.

Вы можете найти образец содержимого файла dev.sh в example.dev.sh

Путь указывается в абсолютном или в относительном формате со слэшом или без слэша '/' в конце - это не принципиально. Важно чтобы формат указания пути к вашему проекту в файле соответствовал следующему виду:

Цепочкой TARGET= + путь к внешнему проекту + npm run dev-watch,

например dev.sh:

TARGET=../alfaform-land8/node_modules/alfaform-first-step-component npm run dev-watch

Standalone Dev mode npm start

Запуск демо-страницы компонента через webpack-dev-server

Конфигурирование

Указать цель редиректа можно следующим образом

<FirstStepComponent
    redirectTarget='https://anketa.alfabank.ru/cc-short/post'
/>

Указать требуемые поля и их нейминг (имена полей, так чтобы они соответствовали именам полей в вашем проекте) можно следующим образом:

<FirstStepComponent
    mapping={{
        lastName: 'lastName',
        firstName: 'firstName',
        middleName: 'middleName',
        gender: 'gender',
        phone: 'phone',
        email: 'email',
        workRegion: 'workRegion'
    }}
/>

Если исключить какое-то поле из маппинга - оно не будет рендериться и на него не будут реагировать валидаторы

Настроить полосу прогресса заполнения шага можно передав в props progressConfig:

<FirstStepComponent
    progressConfig={{
        enabled: true,
        firstStepConfig: {
            weight: 20,
            text: 'Получите 20% к одобрению заявки...'
        },
        stepsCount: 6
    }}
/>

enabled: включить / выключить отображение прогрессбара

firstStepConfig: где weight - вес шага в процентах, а text - отображаемый снизу прогрессбара текст

stepsCount: общее кол-во шагов (отображается сверху прогрессбара)

Так же можно переопределять следующие параметры:

title: Заголовок формы,

redirectQuery: Объект, набор query параметров добавляемых к URL редиректа,

formatters: можно переопределить маску номера телефона и email

regions: набор options для селекта выбора региона

sendToGA: можно прокинуть функцию отправки событий в Google Analytics из лендинга в компонент первого шага