@o2s/modules.surveyjs 0.1.0 → 0.1.1

package/dist/frontend/frontend/Components/Fieldset/Fieldset.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Typography } from '@o2s/ui/elements/typography';
+export const Fieldset = ({ legend, children, optionalLabel }) => {
+    return (React.createElement("fieldset", { className: 'border-0 m-0 p-0' },
+        React.createElement("legend", { className: 'items-center gap-2 hidden' },
+            React.createElement(Typography, { variant: "small" }, legend),
+            React.createElement(Typography, { variant: "small" }, optionalLabel)),
+        React.createElement("div", { className: 'flex flex-col gap-4' }, children)));
+};

package/dist/frontend/frontend/Elements/{CustomSurveyNavigationButton.jsx → CustomSurveyNavigationButton.js}

@@ -3,9 +3,7 @@ import { ReactElementFactory, SurveyNavigationButton } from 'survey-react-ui';
 import { Button } from '@o2s/ui/elements/button';
 class CustomSurveyNavigationButton extends SurveyNavigationButton {
     renderElement() {
-        return (<Button disabled={this.item.disabled} onMouseDown={this.item.data && this.item.data.mouseDown} onClick={this.item.action}>
-                {this.item.title}
-            </Button>);
+        return (React.createElement(Button, { disabled: this.item.disabled, onMouseDown: this.item.data && this.item.data.mouseDown, onClick: this.item.action }, this.item.title));
     }
 }
 ReactElementFactory.Instance.registerElement('sv-nav-btn', (props) => {

package/dist/frontend/frontend/Elements/{CustomSurveyPanel.jsx → CustomSurveyPanel.js}

@@ -6,7 +6,7 @@ class CustomSurveyPanel extends SurveyPanel {
     hasBeenExpanded1 = false;
     renderElement() {
         const header = this.renderHeader();
-        const errors = (<SurveyElementErrors element={this.panelBase} cssClasses={this.panelBase.cssClasses} creator={this.creator}/>);
+        const errors = (React.createElement(SurveyElementErrors, { element: this.panelBase, cssClasses: this.panelBase.cssClasses, creator: this.creator }));
         const style = {
             paddingLeft: this.panel.innerPaddingLeft,
             display: !this.panel.isCollapsed ? undefined : 'none',
@@ -24,31 +24,25 @@ class CustomSurveyPanel extends SurveyPanel {
             if (this.panelBase)
                 this.panelBase.focusIn();
         };
-        const inner = (<>
-                {header}
-                {content}
-                {errors}
-            </>);
-        return (<>
-                <div ref={this.rootRef} className="rounded-lg border bg-card text-card-foreground !shadow-xs !p-4 !m-0" onFocus={focusIn} id={this.panelBase.id}>
-                    {inner}
-                </div>
-            </>);
+        const inner = (React.createElement(React.Fragment, null,
+            header,
+            content,
+            errors));
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { ref: this.rootRef, className: "rounded-lg border bg-card text-card-foreground !shadow-xs !p-4 !m-0", onFocus: focusIn, id: this.panelBase.id }, inner)));
     }
     renderHeader() {
         if (!this.panel.hasTitle && !this.panel.hasDescription) {
-            return <></>;
+            return React.createElement(React.Fragment, null);
         }
-        return (<div className={'my-4 first:mt-0'}>
-                <Typography>{this.panel.title}</Typography>
-            </div>);
+        return (React.createElement("div", { className: 'my-4 first:mt-0' },
+            React.createElement(Typography, null, this.panel.title)));
     }
     renderContent(style, rows, className) {
         const bottom = this.renderBottom();
-        return (<div style={style} className={cn(className, 'p-0')} id={this.panel.contentId}>
-                {bottom}
-                {rows}
-            </div>);
+        return (React.createElement("div", { style: style, className: cn(className, 'p-0'), id: this.panel.contentId },
+            bottom,
+            rows));
     }
 }
 ReactElementFactory.Instance.registerElement('panel', function (props) {

package/dist/frontend/frontend/Elements/{CustomSurveyQuestion.jsx → CustomSurveyQuestion.js}

@@ -12,35 +12,28 @@ class CustomSurveyQuestion extends SurveyQuestion {
         const errorsAboveQuestion = this.question.showErrorsAboveQuestion ? this.renderErrors() : null;
         const errorsBelowQuestion = this.question.showErrorsBelowQuestion ? this.renderErrors() : null;
         const questionContent = this.wrapQuestionContent(this.renderQuestionContent());
-        return (<>
-                <div id={question.id} className={'h-full w-full box-border !p-0'} role={question.ariaRole} aria-required={this.question.ariaRequired} aria-invalid={this.question.ariaInvalid} aria-labelledby={question.ariaLabelledBy} aria-describedby={question.ariaDescribedBy} aria-expanded={question.ariaExpanded === null ? undefined : question.ariaExpanded === 'true'}>
-                    {headerTop}
-                    {errorsAboveQuestion}
-                    {questionContent}
-                    {errorsBelowQuestion}
-                    {headerBottom}
-                </div>
-            </>);
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { id: question.id, className: 'h-full w-full box-border !p-0', role: question.ariaRole, "aria-required": this.question.ariaRequired, "aria-invalid": this.question.ariaInvalid, "aria-labelledby": question.ariaLabelledBy, "aria-describedby": question.ariaDescribedBy, "aria-expanded": question.ariaExpanded === null ? undefined : question.ariaExpanded === 'true' },
+                headerTop,
+                errorsAboveQuestion,
+                questionContent,
+                errorsBelowQuestion,
+                headerBottom)));
     }
     renderHeader() {
         if (this.question.getType() === 'text' ||
             this.question.getType() === 'comment' ||
             this.question.getType() === 'dropdown') {
-            return <></>;
+            return React.createElement(React.Fragment, null);
         }
-        return (<div className={'header my-2 first:mt-0'}>
-                <Label htmlFor={this.question.id}>{this.question.title}</Label>
-            </div>);
+        return (React.createElement("div", { className: 'header my-2 first:mt-0' },
+            React.createElement(Label, { htmlFor: this.question.id }, this.question.title)));
     }
     renderErrors() {
         if (!this.question.errors?.length) {
-            return <></>;
+            return React.createElement(React.Fragment, null);
         }
-        return (<div role="alert" aria-live="polite" className={'mt-2'}>
-                {this.question.errors.map((error) => (<Typography variant="small" className="text-destructive" key={error.locText.renderedHtml}>
-                        {this.renderLocString(error.locText)}
-                    </Typography>))}
-            </div>);
+        return (React.createElement("div", { role: "alert", "aria-live": "polite", className: 'mt-2' }, this.question.errors.map((error) => (React.createElement(Typography, { variant: "small", className: "text-destructive", key: error.locText.renderedHtml }, this.renderLocString(error.locText))))));
     }
 }
 ReactElementFactory.Instance.registerElement('question', function (props) {

package/dist/frontend/frontend/Questions/CustomSurveyQuestionBoolean.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { RendererFactory } from 'survey-core';
+import { ReactQuestionFactory, SurveyQuestionBoolean } from 'survey-react-ui';
+import { cn } from '@o2s/ui/lib/utils';
+import { ToggleGroup, ToggleGroupItem } from '@o2s/ui/elements/toggle-group';
+class CustomSurveyQuestionBoolean extends SurveyQuestionBoolean {
+    renderElement() {
+        return (React.createElement(ToggleGroup, { type: "single", value: this.question.booleanValue === null ? undefined : this.question.booleanValue ? 'true' : 'false', size: "default", variant: "outline", disabled: this.question.readOnly, onValueChange: (value) => {
+                this.question.booleanValue = value === 'true';
+            }, className: cn(this.question.errors?.length && 'border-destructive', 'justify-start'), "aria-label": this.question.title, "aria-invalid": !!this.question.errors?.length },
+            React.createElement(ToggleGroupItem, { value: this.question.swapOrder ? 'true' : 'false', className: cn(this.question.errors?.length && 'border-destructive', 'justify-center min-w-12') }, this.renderLocString(this.question.locLabelLeft)),
+            React.createElement(ToggleGroupItem, { value: this.question.swapOrder ? 'false' : 'true', className: cn(this.question.errors?.length && 'border-destructive', 'justify-center min-w-12') }, this.renderLocString(this.question.locLabelRight))));
+    }
+}
+ReactQuestionFactory.Instance.registerQuestion('CustomSurveyQuestionBoolean', function (props) {
+    return React.createElement(CustomSurveyQuestionBoolean, props);
+});
+RendererFactory.Instance.registerRenderer('boolean', 'boolean-o2s', 'CustomSurveyQuestionBoolean');

package/dist/frontend/frontend/Questions/{CustomSurveyQuestionCheckbox.jsx → CustomSurveyQuestionCheckbox.js}

@@ -6,9 +6,7 @@ import { CheckboxWithLabel } from '@o2s/ui/elements/checkbox';
 import { Fieldset } from '../Components/Fieldset/Fieldset';
 class CustomSurveyQuestionCheckbox extends SurveyQuestionCheckbox {
     renderElement() {
-        return (<Fieldset legend={this.question.locTitle.renderedHtml}>
-                {this.getItems('', this.question.dataChoices)}
-            </Fieldset>);
+        return (React.createElement(Fieldset, { legend: this.question.locTitle.renderedHtml }, this.getItems('', this.question.dataChoices)));
     }
 }
 ReactQuestionFactory.Instance.registerQuestion('CustomSurveyQuestionCheckbox ', function (props) {
@@ -17,9 +15,9 @@ ReactQuestionFactory.Instance.registerQuestion('CustomSurveyQuestionCheckbox ',
 RendererFactory.Instance.registerRenderer('checkbox', 'checkbox-o2s', 'CustomSurveyQuestionCheckbox ');
 class CustomSurveyQuestionCheckboxItem extends SurveyQuestionCheckboxItem {
     renderElement() {
-        return (<CheckboxWithLabel id={this.question.getItemId(this.item)} value={this.item.value} checked={this.question.isItemSelected(this.item)} disabled={this.question.readOnly} onCheckedChange={(value) => {
+        return (React.createElement(CheckboxWithLabel, { id: this.question.getItemId(this.item), value: this.item.value, checked: this.question.isItemSelected(this.item), disabled: this.question.readOnly, onCheckedChange: (value) => {
                 this.question.clickItemHandler(this.item, value === true);
-            }} aria-invalid={!!this.question.errors?.length} className={cn(this.question.errors?.length && 'border-destructive')} label={this.renderLocString(this.item.locText, this.textStyle)}/>);
+            }, "aria-invalid": !!this.question.errors?.length, className: cn(this.question.errors?.length && 'border-destructive'), label: this.renderLocString(this.item.locText, this.textStyle) }));
     }
 }
 ReactElementFactory.Instance.registerElement('CustomSurveyQuestionCheckboxItem', function (props) {

package/dist/frontend/frontend/Questions/{CustomSurveyQuestionComment.jsx → CustomSurveyQuestionComment.js}

@@ -5,9 +5,9 @@ import { cn } from '@o2s/ui/lib/utils';
 import { TextareaWithLabel } from '@o2s/ui/elements/textarea';
 class CustomSurveyQuestionComment extends SurveyQuestionComment {
     renderElement() {
-        return (<TextareaWithLabel id={this.question.name} name={this.question.name} value={this.question.value} placeholder={this.question.placeholder} disabled={this.question.readOnly} onChange={(event) => {
+        return (React.createElement(TextareaWithLabel, { id: this.question.name, name: this.question.name, value: this.question.value, placeholder: this.question.placeholder, disabled: this.question.readOnly, onChange: (event) => {
                 this.question.value = event.target.value;
-            }} aria-invalid={!!this.question.errors?.length} className={cn(this.question.errors?.length && 'border-destructive')} label={this.question.title}/>);
+            }, "aria-invalid": !!this.question.errors?.length, className: cn(this.question.errors?.length && 'border-destructive'), label: this.question.title }));
     }
 }
 ReactQuestionFactory.Instance.registerQuestion('CustomSurveyQuestionComment', function (props) {

package/dist/frontend/frontend/Questions/CustomSurveyQuestionDropdown.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { RendererFactory } from 'survey-core';
+import { ReactQuestionFactory, SurveyQuestionDropdown } from 'survey-react-ui';
+import { cn } from '@o2s/ui/lib/utils';
+import { SelectContent, SelectItem, SelectTrigger, SelectValue, SelectWithTitle } from '@o2s/ui/elements/select';
+class CustomSurveyQuestionDropdown extends SurveyQuestionDropdown {
+    renderElement() {
+        return (React.createElement("div", { className: "grid w-full items-center gap-2" },
+            React.createElement(SelectWithTitle, { value: this.question.value, onValueChange: (value) => {
+                    this.question.value = value;
+                }, disabled: this.question.readOnly, label: this.question.title, id: this.question.name },
+                React.createElement(SelectTrigger, { className: cn(this.question.errors?.length && 'border-destructive'), id: this.question.id },
+                    React.createElement(SelectValue, { placeholder: this.question.renderedPlaceholder })),
+                React.createElement(SelectContent, null, this.question.visibleChoices.map((choice) => (React.createElement(SelectItem, { key: choice.value, value: choice.value }, choice.text)))))));
+    }
+}
+ReactQuestionFactory.Instance.registerQuestion('CustomSurveyQuestionDropdown', function (props) {
+    return React.createElement(CustomSurveyQuestionDropdown, props);
+});
+RendererFactory.Instance.registerRenderer('dropdown', 'dropdown-o2s', 'CustomSurveyQuestionDropdown');

package/dist/frontend/frontend/Questions/{CustomSurveyQuestionRadioGroup.jsx → CustomSurveyQuestionRadioGroup.js}

@@ -5,13 +5,11 @@ import { cn } from '@o2s/ui/lib/utils';
 import { RadioGroup, RadioGroupItemWithLabel } from '@o2s/ui/elements/radio-group';
 class CustomSurveyQuestionRadiogroup extends SurveyQuestionRadiogroup {
     renderElement() {
-        return (<RadioGroup id={this.question.questionName} disabled={this.question.readOnly} name={this.question.questionName} onValueChange={(value) => {
+        return (React.createElement(RadioGroup, { id: this.question.questionName, disabled: this.question.readOnly, name: this.question.questionName, onValueChange: (value) => {
                 this.question.renderedValue = value;
-            }} defaultValue={this.question.value} orientation="vertical" aria-invalid={!!this.question.errors?.length} aria-label={this.question.title} className="flex flex-col gap-4">
-                <>{this.getItems('', this.question.dataChoices)}</>
-                {/*empty element to overcome RadioGroup requiring multiple children*/}
-                <></>
-            </RadioGroup>);
+            }, defaultValue: this.question.value, orientation: "vertical", "aria-invalid": !!this.question.errors?.length, "aria-label": this.question.title, className: "flex flex-col gap-4" },
+            React.createElement(React.Fragment, null, this.getItems('', this.question.dataChoices)),
+            React.createElement(React.Fragment, null)));
     }
 }
 ReactQuestionFactory.Instance.registerQuestion('CustomSurveyQuestionRadiogroup', function (props) {
@@ -20,7 +18,7 @@ ReactQuestionFactory.Instance.registerQuestion('CustomSurveyQuestionRadiogroup',
 RendererFactory.Instance.registerRenderer('radiogroup', 'radiogroup-o2s', 'CustomSurveyQuestionRadiogroup');
 class CustomSurveyQuestionRadioItem extends SurveyQuestionRadioItem {
     renderElement() {
-        return (<RadioGroupItemWithLabel value={this.item.value} id={this.item.value} className={cn(this.question.errors?.length && 'border-destructive', 'justify-start')} label={this.renderLocString(this.item.locText, this.textStyle)} labelClassName="text-sm leading-none cursor-pointer peer-disabled:opacity-70"/>);
+        return (React.createElement(RadioGroupItemWithLabel, { value: this.item.value, id: this.item.value, className: cn(this.question.errors?.length && 'border-destructive', 'justify-start'), label: this.renderLocString(this.item.locText, this.textStyle), labelClassName: "text-sm leading-none cursor-pointer peer-disabled:opacity-70" }));
     }
 }
 ReactElementFactory.Instance.registerElement('CustomSurveyQuestionRadioItem', function (props) {

package/dist/frontend/frontend/Questions/CustomSurveyQuestionText.js

@@ -0,0 +1,56 @@
+'use client';
+import { format } from 'date-fns';
+import { de, enUS, pl } from 'date-fns/locale';
+import { CalendarIcon } from 'lucide-react';
+import { useLocale } from 'next-intl';
+import React, { useState } from 'react';
+import { RendererFactory } from 'survey-core';
+import { ReactQuestionFactory } from 'survey-react-ui';
+import { cn } from '@o2s/ui/lib/utils';
+import { Button } from '@o2s/ui/elements/button';
+import { Calendar } from '@o2s/ui/elements/calendar';
+import { InputWithLabel } from '@o2s/ui/elements/input';
+import { Label } from '@o2s/ui/elements/label';
+import { Popover, PopoverContent, PopoverTrigger } from '@o2s/ui/elements/popover';
+const localeMap = {
+    en: {
+        locale: enUS,
+        format: 'MM.dd.yyyy',
+    },
+    pl: {
+        locale: pl,
+        format: 'dd.MM.yyyy',
+    },
+    de: {
+        locale: de,
+        format: 'dd.MM.yyyy',
+    },
+};
+const CustomSurveyQuestionText = (props) => {
+    const [open, setOpen] = useState(false);
+    const locale = useLocale();
+    const question = props.question;
+    if (question.inputType === 'date') {
+        return (React.createElement("div", { className: "grid w-full items-center gap-2" },
+            React.createElement(Label, { htmlFor: question.inputId }, question.title),
+            React.createElement(Popover, { open: open, onOpenChange: setOpen },
+                React.createElement(PopoverTrigger, { asChild: true, disabled: question.readOnly },
+                    React.createElement(Button, { variant: 'outline', className: cn('w-full justify-start text-left font-normal', !question.value && 'text-muted-foreground', question.errors?.length && 'border-destructive'), name: question.inputId, disabled: question.readOnly },
+                        React.createElement(CalendarIcon, null),
+                        question.value ? (format(new Date(question.value), localeMap[locale].format || localeMap.en.format, {
+                            locale: localeMap[locale].locale || localeMap.en.locale,
+                        })) : (React.createElement("span", null, question.placeholder)))),
+                React.createElement(PopoverContent, { className: "w-auto p-0" },
+                    React.createElement(Calendar, { mode: "single", selected: question.value ? new Date(question.value) : undefined, initialFocus: true, id: question.inputId, onSelect: (value) => {
+                            question.value = value?.toISOString() || null;
+                            setOpen(false);
+                        }, showYearSwitcher: true, locale: localeMap[locale].locale || localeMap.en.locale })))));
+    }
+    return (React.createElement(InputWithLabel, { id: question.inputId, name: question.inputId, value: question.value?.toString() || '', placeholder: question.placeholder, disabled: question.isDisplayMode, onChange: (event) => {
+            question.value = event.target.value;
+        }, "aria-invalid": !!question.errors?.length, className: cn(question.errors?.length && 'border-destructive', 'font-regular'), label: question.title }));
+};
+ReactQuestionFactory.Instance.registerQuestion('CustomSurveyQuestionText', function (props) {
+    return React.createElement(CustomSurveyQuestionText, props);
+});
+RendererFactory.Instance.registerRenderer('text', 'text-o2s', 'CustomSurveyQuestionText');

package/dist/frontend/frontend/{Survey.jsx → Survey.js}

@@ -117,7 +117,6 @@ export const Survey = ({ code, labels, locale, accessToken }) => {
         };
         loadSurvey();
     }, [dispatch, code, locale, accessToken, labels]);
-    return (<LoadingOverlay isActive={state.isLoading} fallback={<Loading bars={12}/>}>
-            <div className={'min-h-[400px]'}>{state.model && <SurveySDK model={state.model}/>}</div>
-        </LoadingOverlay>);
+    return (React.createElement(LoadingOverlay, { isActive: state.isLoading, fallback: React.createElement(Loading, { bars: 12 }) },
+        React.createElement("div", { className: 'min-h-[400px]' }, state.model && React.createElement(SurveySDK, { model: state.model }))));
 };