Конечно! Ниже представлен пример простого приложения на TypeScript с использованием React и SurveyJS. Это приложение позволит создавать опросы, настраивать их и просматривать результаты.

Установите необходимые библиотеки

Первоначально установите зависимости, если вы еще этого не сделали:

npx create-react-app survey-app --template typescript
cd survey-app
npm install survey-react-ui survey-core

Создайте компоненты

SurveyCreator.tsx

Создайте компонент для создания опросов.

import React, { useState } from 'react';
import { SurveyCreator } from 'survey-creator';
import 'survey-creator/survey-creator.css';
import { SurveyModel } from 'survey-core';

const SurveyCreatorComponent: React.FC<{ onSurveySave: (json: any) => void }> = ({ onSurveySave }) => {
    const [surveyJson, setSurveyJson] = useState({});

    const creator = new SurveyCreator();

    creator.onSaveSurvey = (sender) => {
        const json = sender.text;
        setSurveyJson(json);
        onSurveySave(json);
    };

    return (
        <div>
            <div id="surveyCreator" />
            {creator.render('surveyCreator')}
        </div>
    );
};

export default SurveyCreatorComponent;

Survey.tsx

Создайте компонент для отображения и прохождения опросов.

import React from 'react';
import { Survey } from 'survey-react-ui';
import 'survey-react-ui/survey.css';

const SurveyComponent: React.FC<{ json: string }> = ({ json }) => {
    const surveyJson = JSON.parse(json);

    const onComplete = (survey: any) => {
        alert(`Survey results: ${JSON.stringify(survey.data)}`);
    };

    return <Survey json={surveyJson} onComplete={onComplete} />;
};

export default SurveyComponent;

App.tsx

Теперь создайте основной файл приложения, который будет включать созданные компоненты.

import React, { useState } from 'react';
import SurveyCreatorComponent from './SurveyCreator';
import SurveyComponent from './Survey';

const App: React.FC = () => {
    const [surveyJson, setSurveyJson] = useState<string | null>(null);

    const handleSurveySave = (json: any) => {
        setSurveyJson(json);
    };

    return (
        <div style={{ padding: '20px' }}>
            <h1>Survey Application</h1>
            <SurveyCreatorComponent onSurveySave={handleSurveySave} />
            {surveyJson && (
                <div>
                    <h2>Take the Survey</h2>
                    <SurveyComponent json={surveyJson} />
                </div>
            )}
        </div>
    );
};

export default App;

Запустите приложение

Теперь вы можете запустить приложение, выполнив команду:

npm start

Описание приложения

1. Survey Creator: Позволяет создавать опросы и сохранять их в формате JSON.
2. Survey: Позволяет пользователю проходить созданный опрос и отображает результаты в алерте по завершению.

Зависимости и версии

• Убедитесь, что вы используете совместимые версии react, survey-core, и survey-react-ui.

Примечания

• Для более сложных опросов необходимо добавить больше логики обработки, сохранения данных и, возможно, интеграции с backend.
• Для хранения результатов опросов можно использовать локальное хранилище, сервер, или другие подходящие средства.

Этот базовый пример может быть расширен в зависимости от ваших потребностей.