@ihabdevteam/core 0.8.0

package/dist/packages/core/src/components/Training/TrainingStepConfirmWithText.js

@@ -0,0 +1,60 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { useTranslation } from 'react-i18next';
+import Button from '../Button';
+import "./TrainingStep.css";
+import TrainingStep from "./TrainingStep";
+import TrainingStepTextBox from "./TrainingStepTextBox";
+/** @public */
+export default function TrainingStepConfirmWithText({ index, stepIndex, isLast = false, title, onDone, onChange, context, demoSelected }) {
+    const { t } = useTranslation();
+    const resolvedTitle = title ?? t('training.confirmTitle', '문장을 확인하고 잘 들렸는지 선택하세요.');
+    const idx = typeof index === 'number' ? index : -1;
+    const currentState = (typeof stepIndex !== 'number') ? 'disabled' : (idx < stepIndex ? 'done' : idx === stepIndex ? 'active' : 'disabled');
+    const sentence = context && typeof context === 'object' ? (context.sentence || '') : (typeof context === 'string' ? context : '');
+    const choices = context && typeof context === 'object' ? context.choices : undefined;
+    const [selectedAnswer, setSelectedAnswer] = useState(demoSelected ?? null);
+    useEffect(() => {
+        // 데모 강제 선택 시에는 sentence 변경 리셋을 건너뜀
+        if (demoSelected != null)
+            return undefined;
+        if (selectedAnswer !== null) {
+            const id = setTimeout(() => setSelectedAnswer(null), 0);
+            return () => clearTimeout(id);
+        }
+        return undefined;
+    }, [sentence, demoSelected, selectedAnswer]);
+    const handleEndedLocal = useCallback((payload) => {
+        const p = (typeof payload === 'object' && payload !== null)
+            ? Object.assign({}, payload, { __ts: Date.now() })
+            : { value: payload, __ts: Date.now() };
+        if (typeof onChange === 'function')
+            onChange(p);
+        if (currentState === 'active' && typeof onDone === 'function')
+            onDone(p);
+    }, [onChange, currentState, onDone]);
+    const handleSelectFalse = useCallback(() => {
+        /* 끝낸 단계(done)에서는 고를 수 없다 — 단추는 `!== 'disabled'` 로 열려 있었는데
+           기록은 `=== 'active'` 일 때만 나가서, **화면 선택은 바뀌는데 점수는 그대로**였다.
+           되돌아본 사람이 옮겨 놓은 선택을 보며 옛 점수를 읽게 된다. 같은 자리를
+           TrainingStepCardOrder 는 이미 이렇게 막고 있다(그 꼴을 맞춘다). */
+        if (currentState !== 'active')
+            return;
+        setSelectedAnswer(false);
+        handleEndedLocal(false);
+    }, [handleEndedLocal, currentState]);
+    const handleSelectTrue = useCallback(() => {
+        if (currentState !== 'active')
+            return;
+        setSelectedAnswer(true);
+        handleEndedLocal(true);
+    }, [handleEndedLocal, currentState]);
+    return (_jsxs(TrainingStep, { index: index, stepIndex: stepIndex, isLast: isLast, title: resolvedTitle, onDone: onDone, useTitleFaded: false, children: [_jsx(TrainingStepTextBox, { context: context, state: currentState }), _jsx("div", { className: "training-step__buttons", children: Array.isArray(choices) && choices.length > 0 ? (choices.slice(0, 6).map((c, i) => (_jsx(Button, { size: 56, type: "bar", onClick: () => {
+                        if (currentState !== 'active')
+                            return;
+                        setSelectedAnswer(i);
+                        if (handleEndedLocal)
+                            handleEndedLocal(i);
+                    }, disabled: currentState === 'disabled', ariaLabel: String(c), label: c, variant: currentState, selected: selectedAnswer === i }, i)))) : (_jsxs(_Fragment, { children: [_jsx(Button, { size: 56, type: "bar", onClick: handleSelectFalse, disabled: currentState === 'disabled', icon: 'x', ariaLabel: t('training.notHeard', '안 들렸어요.'), label: t('training.notHeard', '안 들렸어요.'), variant: 'default', selected: selectedAnswer === false }), _jsx(Button, { size: 56, type: "bar", onClick: handleSelectTrue, disabled: currentState === 'disabled', icon: 'circle', ariaLabel: t('training.heardWell', '잘 들렸어요.'), label: t('training.heardWell', '잘 들렸어요.'), variant: 'default', selected: selectedAnswer === true })] })) })] }));
+}

package/dist/packages/core/src/components/Training/TrainingStepListen.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+import "./TrainingStep.css";
+/** @public */
+export type TrainingStepListenProps = {
+    index?: number;
+    stepIndex?: number;
+    isLast?: boolean;
+    title?: string;
+    onDone?: (ok?: boolean) => void;
+    btnLabel?: ReactNode;
+    soundSrc?: string | string[] | {
+        src?: string;
+    } | null;
+    bucketPath?: string | null;
+    usePreviewTextBtn?: boolean;
+    previewText?: string | string[] | null;
+    onPreviewTextBtn?: (() => void) | undefined;
+    disabled?: boolean;
+    _pageIndex?: number;
+    /** 문장(재생 소리) waveform 표시 여부. 기본 true — 소리 비교로 같음/다름을 판단하는 훈련처럼
+     *  waveform 모양으로 답이 드러나면 안 되는 화면에서는 false로 끈다. */
+    showSoundWaveForm?: boolean;
+    /** 소음 waveform 표시 여부. 기본 true. */
+    showNoiseWaveForm?: boolean;
+};
+/** @public */
+export default function TrainingStepListen({ index, stepIndex, isLast, title, onDone, btnLabel, soundSrc, bucketPath, usePreviewTextBtn, previewText, onPreviewTextBtn, disabled, _pageIndex, showSoundWaveForm, showNoiseWaveForm }: TrainingStepListenProps): import("react").JSX.Element;

package/dist/packages/core/src/components/Training/TrainingStepListen.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import TrainingStepAudioPlayer from './TrainingStepAudioPlayer';
+import "./TrainingStep.css";
+import TrainingStep from "./TrainingStep";
+/** @public */
+export default function TrainingStepListen({ index, stepIndex, isLast = false, title, onDone, btnLabel, soundSrc, bucketPath, usePreviewTextBtn, previewText = null, onPreviewTextBtn, disabled, _pageIndex, showSoundWaveForm, showNoiseWaveForm }) {
+    const { t } = useTranslation();
+    const resolvedTitle = title ?? t('training.listenTitle', '제시하는 문장을 들어주세요.');
+    const effectiveDisabled = disabled ?? (typeof stepIndex === 'number' && typeof index === 'number' ? index > stepIndex : false);
+    return (_jsx(TrainingStep, { index: index, stepIndex: stepIndex, isLast: isLast, title: resolvedTitle, onDone: onDone, titleProps: { usePreviewTextBtn, previewText, onPreviewTextBtn }, children: _jsx(TrainingStepAudioPlayer, { soundSrc: soundSrc, ttsText: !soundSrc ? (previewText ?? resolvedTitle) : null, bucketPath: bucketPath, btnLabel: btnLabel || t('training.listenButton', '문장 듣기'), disabled: effectiveDisabled, className: "training-step__listen-sticky", showSoundWaveForm: showSoundWaveForm, showNoiseWaveForm: showNoiseWaveForm }, `audio-p${_pageIndex ?? 0}-s${index}`) }));
+}

package/dist/packages/core/src/components/Training/TrainingStepOrderList.css

@@ -0,0 +1,221 @@
+
+.order-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+}
+
+
+.order-list__item {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-s);
+
+}
+
+/* draggable card */
+.order-list__draggable {
+    border-radius: var(--radius-m);
+    padding: 0 0 0 4px;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    flex: 1;
+    justify-content: space-between;
+    will-change: transform;
+    min-height: 60px;
+}
+
+.order-list__item-text {
+    color: var(--color-black);
+
+}
+
+.order-list__item-buttons {
+    display: inline-flex;
+    gap: 2px;
+    align-items: center;
+    align-self: center;
+}
+
+@media (max-width: 600px) {
+    .order-list__item-buttons {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        align-self: center;
+    }
+    .order-list__item-buttons > * {
+        display: inline-flex;
+        box-sizing: border-box;
+    }
+}
+
+.order-list__item.correct {
+    border: 1px solid var(--color-main);
+}
+
+.order-list__slot {
+    background-color: var(--color-darkWhite);
+    border-radius: var(--radius-m);
+    height: auto;
+    padding: 4px 10px;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.order-list__marker {
+    width: 24px;
+    height: 24px;
+    border-radius: var(--radius-sm);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--color-main);
+    --marker-pos: 50%;
+    background: color-mix(in srgb,
+        var(--color-main) calc(100% - var(--marker-pos)),
+        var(--color-sub) var(--marker-pos)
+    );
+    color: #ffffff;
+    border: 2px solid var(--color-pureWhite);
+    box-sizing: border-box;
+}
+
+@media (max-width: 600px) {
+    .order-list__marker {
+        width: 24px;
+        height: 24px;
+        min-width: 24px;
+    }
+}
+
+.order-list__item:hover .order-list__slot {
+    box-shadow: inset 0 0 0 1px var(--color-main);
+    background-color: var(--color-deepWhite);
+    transition: box-shadow 160ms cubic-bezier(.22,.9,.39,1);
+}
+
+.order-list__item.drag-over .order-list__slot {
+    box-shadow: inset 0 0 0 1px var(--color-main);
+    background-color: var(--color-white);
+}
+
+.order-list__slot.pulse {
+    transition: background-color 420ms cubic-bezier(.22,.9,.39,1);
+    background-color: var(--color-white);
+}
+.order-list__slot.pulse.to-dark {
+    background-color: var(--color-darkWhite);
+}
+
+.order-list__slot-number {
+    display: inline-flex;
+    width: 32px;
+    height: 32px;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-sm);
+    color: #ffffff;
+    align-self: center;
+}
+
+.order-list__draggable.dragging {
+    opacity: 0.2;
+    background-color: var(--color-white);
+}
+
+.order-list__dragging-object {
+    position: fixed;
+    top: 0;
+    left: 0;
+    transform: translate3d(-9999px, -9999px, 0) scale(1);
+   pointer-events: none;
+    z-index: var(--z-popover); /* 드래그 중 항목 — 다른 콘텐츠 위 */
+    box-shadow: 0 14px 40px rgba(16,24,40,0.18);
+    border-radius: var(--radius-m);
+    background: var(--color-white);
+    padding: 20px 20px;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-s);
+    color: var(--color-black);
+    max-width: calc(100vw - var(--spacing-page) *3 );
+    width: auto;
+    box-sizing: border-box;
+    opacity: 1;
+    transition: transform 160ms cubic-bezier(.22,.9,.39,1), opacity 180ms ease;
+    will-change: transform, opacity;
+    white-space: normal;
+    word-break: keep-all;
+    overflow-wrap: anywhere;
+    min-height: 60px;
+
+}
+
+.order-list__dragging-object--visible {
+    opacity: 1;
+}
+
+.order-list__item.drag-over .order-list__slot:hover {
+    box-shadow: inset 0 0 0 1px var(--color-main);
+    transition: box-shadow 160ms cubic-bezier(.22,.9,.39,1);
+    background-color: var(--color-white);
+    border-radius: var(--radius-m);
+}
+
+.order-list__item-text {
+    white-space: normal;
+    word-break: keep-all;
+    overflow-wrap: anywhere;
+    display: block;
+    width: 100%;
+    margin: 0;
+    line-height: 1.4;
+}
+
+.order-list__draggable[draggable="false"],
+.order-list__draggable[data-disabled="true"] {
+    pointer-events: none;
+    cursor: default;
+    opacity: 0.9;
+    background-color: var(--color-darkWhite);
+    box-shadow: none !important;
+}
+
+.order-list__draggable[draggable="false"] .order-list__item-text,
+.order-list__draggable[data-disabled="true"] .order-list__item-text {
+    display: none !important;
+    color: var(--color-gray);
+    opacity: 0.9;
+}
+
+.order-list__draggable[draggable="false"] .order-list__item-buttons,
+.order-list__draggable[data-disabled="true"] .order-list__item-buttons,
+.order-list__slot-number[hidden],
+.order-list__draggable[draggable="false"] ~ .order-list__slot .order-list__slot-number,
+.order-list__draggable[data-disabled="true"] ~ .order-list__slot .order-list__slot-number {
+    display: none !important;
+}
+
+.order-list__draggable[draggable="false"] + .order-list__slot,
+.order-list__draggable[data-disabled="true"] + .order-list__slot,
+.order-list__draggable[draggable="false"] .order-list__slot,
+.order-list__draggable[data-disabled="true"] .order-list__slot {
+    box-shadow: none !important;
+    background-color: var(--color-darkWhite) !important;
+}
+
+.order-list__slot[data-disabled="true"] {
+    pointer-events: none !important;
+    cursor: default !important;
+    box-shadow: none !important;
+    background-color: var(--color-darkWhite) !important;
+}
+
+.order-list__slot[data-disabled="true"] .order-list__slot-number {
+    display: none !important;
+}

package/dist/packages/core/src/components/Training/TrainingStepOrderList.d.ts

@@ -0,0 +1,7 @@
+import "./TrainingPagePopup.css";
+import "./TrainingStep.css";
+import "./TrainingStepOrderList.css";
+import type { TrainingStepOrderListProps } from './trainingStepOrderListTypes';
+export type { TrainingContextItem, ShuffledItem, ChangeResult, TrainingStepOrderListProps } from './trainingStepOrderListTypes';
+/** @public */
+export default function TrainingStepOrderList({ index, stepIndex, isLast, title, onDone, onChange, context, }: TrainingStepOrderListProps): import("react").JSX.Element;