@hed-hog/lms 0.0.328 → 0.0.330

package/hedhog/frontend/app/courses/[id]/structure/_components/detail-lesson.tsx.ejs

@@ -1,314 +0,0 @@
-'use client';
-
-import { Badge } from '@/components/ui/badge';
-import { Separator } from '@/components/ui/separator';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { cn } from '@/lib/utils';
-import {
-  Clock,
-  ExternalLink,
-  FileText,
-  HelpCircle,
-  Layers,
-  Paperclip,
-  Video,
-  type LucideIcon,
-} from 'lucide-react';
-import { useStructureStore } from './store';
-import type { LessonType } from './types';
-
-const LESSON_TYPE_CONFIG: Record<
-  LessonType,
-  { icon: LucideIcon; color: string; bg: string; label: string }
-> = {
-  video: {
-    icon: Video,
-    color: 'text-blue-500',
-    bg: 'bg-blue-500/10',
-    label: 'Vídeo',
-  },
-  post: {
-    icon: FileText,
-    color: 'text-emerald-500',
-    bg: 'bg-emerald-500/10',
-    label: 'Post',
-  },
-  questao: {
-    icon: HelpCircle,
-    color: 'text-amber-500',
-    bg: 'bg-amber-500/10',
-    label: 'Quiz',
-  },
-  exercicio: {
-    icon: Layers,
-    color: 'text-rose-500',
-    bg: 'bg-rose-500/10',
-    label: 'Exercício',
-  },
-};
-
-const VIDEO_PROVIDER_LABELS: Record<string, string> = {
-  youtube: 'YouTube',
-  vimeo: 'Vimeo',
-  panda: 'Panda Video',
-  bunny: 'Bunny.net',
-  outros: 'Outros',
-};
-
-interface DetailLessonProps {
-  lessonId: string;
-}
-
-export function DetailLesson({ lessonId }: DetailLessonProps) {
-  const lesson = useStructureStore((s) =>
-    s.lessons.find((l) => l.id === lessonId)
-  );
-
-  if (!lesson) return null;
-
-  const cfg = LESSON_TYPE_CONFIG[lesson.type];
-  const Icon = cfg.icon;
-
-  return (
-    <div className="flex flex-col h-full overflow-hidden">
-      {/* Header */}
-      <div className="flex items-center gap-3 px-4 py-4 border-b bg-muted/30 shrink-0">
-        <div
-          className={cn(
-            'flex size-10 items-center justify-center rounded-lg shrink-0',
-            cfg.bg
-          )}
-        >
-          <Icon className={cn('size-5', cfg.color)} />
-        </div>
-        <div className="min-w-0 flex-1">
-          <h2 className="text-base font-semibold truncate">{lesson.title}</h2>
-          <p className="text-xs text-muted-foreground">{lesson.code}</p>
-        </div>
-        <div className="flex items-center gap-1.5 shrink-0">
-          <Badge variant="outline" className={cn('text-xs', cfg.color)}>
-            {cfg.label}
-          </Badge>
-          <Badge variant="secondary" className="gap-1 text-xs">
-            <Clock className="size-3" />
-            {lesson.duration}min
-          </Badge>
-        </div>
-      </div>
-
-      {/* Tabs */}
-      <Tabs defaultValue="dados" className="flex flex-col flex-1 min-h-0">
-        <TabsList className="mx-4 mt-3 w-auto justify-start shrink-0">
-          <TabsTrigger value="dados">Dados</TabsTrigger>
-          <TabsTrigger value="transcription">Transcrição</TabsTrigger>
-          <TabsTrigger value="resources">Recursos</TabsTrigger>
-        </TabsList>
-
-        {/* ── Dados ─────────────────────────────────────────────────────────── */}
-        <TabsContent
-          value="dados"
-          className="flex-1 overflow-y-auto px-4 pb-4 mt-3"
-        >
-          <div className="flex flex-col gap-4">
-            {lesson.publicDescription && (
-              <Section title="Descrição pública">
-                <p className="text-sm leading-relaxed">
-                  {lesson.publicDescription}
-                </p>
-              </Section>
-            )}
-
-            {lesson.privateDescription && (
-              <>
-                <Separator />
-                <Section title="Descrição interna">
-                  <p className="text-sm leading-relaxed text-muted-foreground">
-                    {lesson.privateDescription}
-                  </p>
-                </Section>
-              </>
-            )}
-
-            {/* Video */}
-            {lesson.type === 'video' && (
-              <>
-                <Separator />
-                <Section title="Configurações de vídeo">
-                  <div className="flex flex-col gap-2">
-                    {lesson.videoProvider && (
-                      <InfoRow
-                        label="Plataforma"
-                        value={
-                          VIDEO_PROVIDER_LABELS[lesson.videoProvider] ??
-                          lesson.videoProvider
-                        }
-                      />
-                    )}
-                    {lesson.videoUrl && (
-                      <div className="flex items-start gap-2">
-                        <span className="text-xs text-muted-foreground w-20 shrink-0 pt-0.5">
-                          URL
-                        </span>
-                        <a
-                          href={lesson.videoUrl}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="text-sm text-primary hover:underline flex items-center gap-1 truncate"
-                        >
-                          {lesson.videoUrl}
-                          <ExternalLink className="size-3 shrink-0" />
-                        </a>
-                      </div>
-                    )}
-                    {lesson.autoDuration !== undefined && (
-                      <InfoRow
-                        label="Duração auto"
-                        value={lesson.autoDuration ? 'Sim' : 'Não'}
-                      />
-                    )}
-                  </div>
-                </Section>
-              </>
-            )}
-
-            {/* Post */}
-            {lesson.type === 'post' && lesson.postContent && (
-              <>
-                <Separator />
-                <Section title="Conteúdo do post">
-                  <p className="text-sm leading-relaxed whitespace-pre-wrap">
-                    {lesson.postContent}
-                  </p>
-                </Section>
-              </>
-            )}
-
-            {/* Questão / exame vinculado */}
-            {lesson.type === 'questao' && lesson.linkedExam && (
-              <>
-                <Separator />
-                <Section title="Exame vinculado">
-                  <div className="flex items-center gap-2 text-sm">
-                    <HelpCircle className="size-3.5 text-amber-500 shrink-0" />
-                    <span>{lesson.linkedExam}</span>
-                  </div>
-                </Section>
-              </>
-            )}
-
-            {!lesson.publicDescription &&
-              !lesson.privateDescription &&
-              lesson.type === 'exercicio' && (
-                <div className="flex flex-col items-center gap-2 py-8 text-center">
-                  <Layers className="size-8 text-muted-foreground/40" />
-                  <p className="text-sm text-muted-foreground">
-                    Sem informações adicionais nesta aula.
-                  </p>
-                </div>
-              )}
-          </div>
-        </TabsContent>
-
-        {/* ── Transcrição ───────────────────────────────────────────────────── */}
-        <TabsContent
-          value="transcription"
-          className="flex-1 overflow-y-auto px-4 pb-4 mt-3"
-        >
-          {lesson.transcription ? (
-            <div className="rounded-md border bg-muted/20 p-3">
-              <p className="text-sm leading-relaxed whitespace-pre-wrap font-mono">
-                {lesson.transcription}
-              </p>
-            </div>
-          ) : (
-            <EmptyState
-              icon={<FileText className="size-8 text-muted-foreground/40" />}
-            >
-              Transcrição não disponível para esta aula.
-            </EmptyState>
-          )}
-        </TabsContent>
-
-        {/* ── Recursos ──────────────────────────────────────────────────────── */}
-        <TabsContent
-          value="resources"
-          className="flex-1 overflow-y-auto px-4 pb-4 mt-3"
-        >
-          {lesson.resources && lesson.resources.length > 0 ? (
-            <div className="flex flex-col gap-2">
-              {lesson.resources.map((res) => (
-                <div
-                  key={res.id}
-                  className="flex items-center gap-2 rounded-md border px-3 py-2"
-                >
-                  <Paperclip className="size-3.5 text-muted-foreground shrink-0" />
-                  <span className="flex-1 text-sm truncate">{res.name}</span>
-                  {res.size && (
-                    <span className="text-[0.6rem] text-muted-foreground shrink-0">
-                      {res.size}
-                    </span>
-                  )}
-                  <Badge
-                    variant={res.public ? 'default' : 'secondary'}
-                    className="text-[0.6rem] px-1.5 py-0 h-4 shrink-0"
-                  >
-                    {res.public ? 'Público' : 'Privado'}
-                  </Badge>
-                </div>
-              ))}
-            </div>
-          ) : (
-            <EmptyState
-              icon={<Paperclip className="size-8 text-muted-foreground/40" />}
-            >
-              Nenhum recurso anexado a esta aula.
-            </EmptyState>
-          )}
-        </TabsContent>
-      </Tabs>
-    </div>
-  );
-}
-
-// ── Local helpers ─────────────────────────────────────────────────────────────
-
-function Section({
-  title,
-  children,
-}: {
-  title: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <div className="flex flex-col gap-1.5">
-      <p className="text-xs font-medium text-muted-foreground">{title}</p>
-      {children}
-    </div>
-  );
-}
-
-function InfoRow({ label, value }: { label: string; value: string }) {
-  return (
-    <div className="flex items-center gap-2">
-      <span className="text-xs text-muted-foreground w-20 shrink-0">
-        {label}
-      </span>
-      <span className="text-sm">{value}</span>
-    </div>
-  );
-}
-
-function EmptyState({
-  icon,
-  children,
-}: {
-  icon: React.ReactNode;
-  children: React.ReactNode;
-}) {
-  return (
-    <div className="flex flex-col items-center gap-2 py-12 text-center">
-      {icon}
-      <p className="text-sm text-muted-foreground">{children}</p>
-    </div>
-  );
-}

package/hedhog/frontend/app/courses/[id]/structure/_components/detail-session.tsx.ejs

@@ -1,174 +0,0 @@
-'use client';
-
-import { Badge } from '@/components/ui/badge';
-import { Separator } from '@/components/ui/separator';
-import { cn } from '@/lib/utils';
-import {
-  Clock,
-  FileText,
-  HelpCircle,
-  Layers,
-  Video,
-  type LucideIcon,
-} from 'lucide-react';
-import { useStructureStore } from './store';
-import type { Lesson, LessonType } from './types';
-
-const LESSON_TYPE_CONFIG: Record<
-  LessonType,
-  { icon: LucideIcon; color: string; label: string; bg: string }
-> = {
-  video:     { icon: Video,      color: 'text-blue-500',    label: 'Vídeo',     bg: 'bg-blue-500/10'    },
-  post:      { icon: FileText,   color: 'text-emerald-500', label: 'Post',      bg: 'bg-emerald-500/10' },
-  questao:   { icon: HelpCircle, color: 'text-amber-500',   label: 'Quiz',      bg: 'bg-amber-500/10'   },
-  exercicio: { icon: Layers,     color: 'text-rose-500',    label: 'Exercício', bg: 'bg-rose-500/10'    },
-};
-
-interface DetailSessionProps {
-  sessionId: string;
-}
-
-export function DetailSession({ sessionId }: DetailSessionProps) {
-  const session = useStructureStore((s) => s.sessions.find((ss) => ss.id === sessionId));
-  const lessons = useStructureStore((s) => s.lessons.filter((l) => l.sessionId === sessionId).sort((a, b) => a.order - b.order));
-  const selectItem = useStructureStore((s) => s.selectItem);
-
-  if (!session) return null;
-
-  const totalMinutes = lessons.reduce((sum, l) => sum + l.duration, 0);
-  const hours = Math.floor(totalMinutes / 60);
-  const minutes = totalMinutes % 60;
-
-  const typeCounts = lessons.reduce<Partial<Record<LessonType, number>>>(
-    (acc, l) => ({ ...acc, [l.type]: (acc[l.type] ?? 0) + 1 }),
-    {}
-  );
-
-  return (
-    <div className="flex flex-col overflow-y-auto h-full">
-      {/* Header */}
-      <div className="flex items-center gap-3 px-4 py-4 border-b bg-muted/30 shrink-0">
-        <div className="flex size-10 items-center justify-center rounded-lg bg-muted shrink-0">
-          <Layers className="size-5 text-muted-foreground" />
-        </div>
-        <div className="min-w-0 flex-1">
-          <h2 className="text-base font-semibold truncate">{session.title}</h2>
-          <p className="text-xs text-muted-foreground">{session.code}</p>
-        </div>
-      </div>
-
-      <div className="flex flex-col gap-5 p-4">
-        {/* Stats */}
-        <div className="grid grid-cols-2 gap-3">
-          <StatCard label="Aulas" value={lessons.length} />
-          <StatCard
-            label="Duração"
-            value={hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`}
-          />
-        </div>
-
-        {/* Type breakdown */}
-        {Object.entries(typeCounts).length > 0 && (
-          <>
-            <Separator />
-            <div>
-              <p className="text-xs font-medium text-muted-foreground mb-2">
-                Tipos de aula
-              </p>
-              <div className="flex flex-wrap gap-2">
-                {(Object.entries(typeCounts) as [LessonType, number][]).map(
-                  ([type, count]) => {
-                    const cfg = LESSON_TYPE_CONFIG[type];
-                    const Icon = cfg.icon;
-                    return (
-                      <div
-                        key={type}
-                        className={cn(
-                          'flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs',
-                          cfg.bg
-                        )}
-                      >
-                        <Icon className={cn('size-3', cfg.color)} />
-                        <span className={cfg.color}>{cfg.label}</span>
-                        <span className="font-semibold">{count}</span>
-                      </div>
-                    );
-                  }
-                )}
-              </div>
-            </div>
-          </>
-        )}
-
-        {/* Lesson list */}
-        {lessons.length > 0 && (
-          <>
-            <Separator />
-            <div>
-              <p className="text-xs font-medium text-muted-foreground mb-2">
-                Aulas
-              </p>
-              <div className="flex flex-col gap-0.5">
-                {lessons.map((lesson) => (
-                  <LessonListItem
-                    key={lesson.id}
-                    lesson={lesson}
-                    onSelect={() => selectItem(lesson.id, 'lesson')}
-                  />
-                ))}
-              </div>
-            </div>
-          </>
-        )}
-
-        {lessons.length === 0 && (
-          <div className="flex flex-col items-center gap-2 py-8 text-center">
-            <Layers className="size-8 text-muted-foreground/40" />
-            <p className="text-sm text-muted-foreground">
-              Esta sessão ainda não tem aulas.
-            </p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function LessonListItem({
-  lesson,
-  onSelect,
-}: {
-  lesson: Lesson;
-  onSelect: () => void;
-}) {
-  const cfg = LESSON_TYPE_CONFIG[lesson.type];
-  const Icon = cfg.icon;
-
-  return (
-    <button
-      onClick={onSelect}
-      className="flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-muted/60 cursor-pointer transition-colors text-left w-full"
-    >
-      <Icon className={cn('size-3.5 shrink-0', cfg.color)} />
-      <span className="text-sm flex-1 truncate">{lesson.title}</span>
-      <div className="flex items-center gap-1 shrink-0">
-        <Clock className="size-3 text-muted-foreground" />
-        <span className="text-[0.6rem] text-muted-foreground">
-          {lesson.duration}min
-        </span>
-      </div>
-      <Badge variant="outline" className="text-[0.55rem] px-1 py-0 h-4 shrink-0">
-        {lesson.code}
-      </Badge>
-    </button>
-  );
-}
-
-function StatCard({ label, value }: { label: string; value: string | number }) {
-  return (
-    <div className="flex flex-col items-center rounded-lg border bg-muted/30 py-3 gap-0.5">
-      <span className="text-lg font-bold tabular-nums">{value}</span>
-      <span className="text-[0.65rem] text-muted-foreground">{label}</span>
-    </div>
-  );
-}

package/hedhog/frontend/app/courses/[id]/structure/_components/mock-data.ts.ejs

@@ -1,185 +0,0 @@
-/**
- * Mock Data — LMS Course Structure
- *
- * ⚠️  TEMPORARY — replace when integrating with the real API.
- *
- * TODO[API]: Remove this file entirely once `useCourseStructure` fetches data
- *            from GET /lms/courses/:id/structure. The Zustand store should then
- *            be seeded with the server response instead of these constants.
- */
-
-import type {
-  Course,
-  Lesson,
-  LessonStatus,
-  LessonType,
-  Session,
-  VideoProvider,
-  Visibility,
-} from './types';
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Mock Data — LMS Course Structure
-// ─────────────────────────────────────────────────────────────────────────────
-
-export const MOCK_COURSE: Course = {
-  id: 'course-1',
-  code: 'REACT-ADV',
-  name: 'React Avancado',
-  title: 'React Avancado',
-  description:
-    'Domine os conceitos avancados do React: hooks, patterns, performance e gerenciamento de estado moderno.',
-  slug: 'react-avancado',
-  published: true,
-};
-
-// Session config: title + how many lessons each gets
-const SESSION_CONFIG: { title: string; lessonCount: number }[] = [
-  { title: 'Boas-vindas ao curso', lessonCount: 5 },
-  { title: 'Hooks Avancados useReducer e useContext', lessonCount: 32 },
-  { title: 'Patterns de Composicao', lessonCount: 31 },
-  { title: 'Gerenciamento de Estado com Zustand', lessonCount: 8 },
-  { title: 'Performance e Otimizacao', lessonCount: 30 },
-  { title: 'React Server Components', lessonCount: 10 },
-  { title: 'Data Fetching Moderno', lessonCount: 9 },
-  { title: 'Roteamento Avancado com Next.js', lessonCount: 7 },
-  { title: 'Formularios e Validacao com RHF', lessonCount: 11 },
-  { title: 'Autenticacao e Seguranca', lessonCount: 9 },
-  { title: 'Testing com React Testing Library', lessonCount: 12 },
-  { title: 'Acessibilidade a11y', lessonCount: 6 },
-  { title: 'Internacionalizacao i18n', lessonCount: 7 },
-  { title: 'Animacoes com Framer Motion', lessonCount: 8 },
-  { title: 'Arquitetura de Projetos Escalaveis', lessonCount: 10 },
-  { title: 'Design Systems e Storybook', lessonCount: 8 },
-  { title: 'Deploy CI/CD e DevOps', lessonCount: 7 },
-  { title: 'Monorepos e Micro-frontends', lessonCount: 6 },
-  { title: 'Debugging Avancado', lessonCount: 6 },
-  { title: 'Projeto Final App Completo', lessonCount: 5 },
-];
-
-export const MOCK_SESSIONS: Session[] = SESSION_CONFIG.map((s, i) => ({
-  id: `s${i + 1}`,
-  code: `S${String(i + 1).padStart(2, '0')}`,
-  title: s.title,
-  duration: s.lessonCount * 12,
-  order: i,
-}));
-
-// Lesson title patterns
-const TITLE_PATTERNS = [
-  'Introducao e objetivos',
-  'Conceitos fundamentais',
-  'Configuracao do ambiente',
-  'Pratica guiada passo a passo',
-  'Exercicio: implementacao',
-  'Quiz de revisao',
-  'Caso de uso real',
-  'Implementacao completa',
-  'Debugging e troubleshooting',
-  'Otimizacoes e boas praticas',
-  'Desafio pratico',
-  'Revisao do modulo',
-  'Q e A e duvidas frequentes',
-  'Proximos passos',
-];
-
-const LESSON_STATUSES: LessonStatus[] = [
-  'preparada',
-  'gravada',
-  'editada',
-  'finalizada',
-  'publicada',
-];
-
-const VISIBILITIES: Visibility[] = [
-  'publico',
-  'publico',
-  'privado',
-  'restrito',
-];
-
-const LESSON_TYPES: LessonType[] = [
-  'video',
-  'video',
-  'video',
-  'post',
-  'video',
-  'video',
-  'questao',
-  'exercicio',
-];
-const PROVIDERS: VideoProvider[] = [
-  'youtube',
-  'vimeo',
-  'bunny',
-  'youtube',
-  'youtube',
-];
-
-let _lid = 0;
-
-export const MOCK_LESSONS: Lesson[] = SESSION_CONFIG.flatMap((s, si) =>
-  Array.from({ length: s.lessonCount }, (_, li) => {
-    _lid += 1;
-    const type = LESSON_TYPES[_lid % LESSON_TYPES.length] as LessonType;
-    const isVideo = type === 'video';
-    const provider = PROVIDERS[_lid % PROVIDERS.length] as VideoProvider;
-    const baseTitle = TITLE_PATTERNS[li % TITLE_PATTERNS.length] as string;
-    const title =
-      li < TITLE_PATTERNS.length
-        ? baseTitle
-        : baseTitle +
-          ' parte ' +
-          String(Math.floor(li / TITLE_PATTERNS.length) + 1);
-
-    const hasResource = li % 4 === 0;
-
-    const status = LESSON_STATUSES[
-      _lid % LESSON_STATUSES.length
-    ] as LessonStatus;
-    const visibility = VISIBILITIES[_lid % VISIBILITIES.length] as Visibility;
-
-    const lesson: Lesson = {
-      id: `l${_lid}`,
-      code: `A${String(_lid).padStart(3, '0')}`,
-      title,
-      type,
-      status,
-      visibility,
-      duration: 8 + (_lid % 32),
-      publicDescription: `Aprenda ${s.title.toLowerCase()} de forma pratica nesta aula.`,
-      privateDescription: li % 7 === 0 ? 'Revisar antes de publicar.' : '',
-      sessionId: `s${si + 1}`,
-      order: li,
-      resources: hasResource
-        ? [
-            {
-              id: `r${_lid}`,
-              name: `material-${String(_lid).padStart(3, '0')}.pdf`,
-              size: `${1 + (_lid % 5)}.${_lid % 9} MB`,
-              type: 'application/pdf',
-              public: _lid % 2 === 0,
-              url: `https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF1.pdf`,
-            },
-          ]
-        : [],
-    };
-
-    if (isVideo) {
-      lesson.videoProvider = provider;
-      lesson.videoUrl = `https://example.com/video/${_lid}`;
-      lesson.autoDuration = _lid % 3 !== 0;
-      if (li === 0) {
-        lesson.transcription = `Transcricao completa da primeira aula de "${s.title}". Lorem ipsum dolor sit amet, consectetur adipiscing elit.`;
-      }
-    }
-    if (type === 'questao') {
-      lesson.linkedExam = `exam-${_lid}`;
-    }
-    if (type === 'post') {
-      lesson.postContent = `Conteudo detalhado sobre ${s.title.toLowerCase()}...`;
-    }
-
-    return lesson;
-  })
-);