@learnpack/learnpack 5.0.53 → 5.0.57

package/src/creator/src/components/SyllabusEditor.tsx

@@ -0,0 +1,431 @@
+import React, { useRef, useState } from "react"
+import { SVGS } from "../assets/svgs"
+import { useShallow } from "zustand/react/shallow"
+import useStore, { FormState } from "../utils/store"
+import {
+  checkReadability,
+  interactiveCreation,
+  makeReadmeReadable,
+  readmeCreator,
+} from "../utils/rigo"
+import { CREATOR_API_URL, parseLesson, uploadFileToBucket } from "../utils/lib"
+
+import Loader from "./Loader"
+
+const slugify = (text: string) => {
+  return text
+    .toLowerCase()
+    .replace(/ /g, "-")
+    .replace(/[^\w.-]+/g, "")
+}
+
+const createLearnJson = (courseInfo: FormState) => {
+  const learnJson = {
+    slug: slugify(courseInfo.title || randomUUID()),
+    title: {
+      us: courseInfo.title,
+    },
+    description: {
+      us: courseInfo.description,
+    },
+    grading: "isolated",
+  }
+  return learnJson
+}
+
+const PARAMS = {
+  expected_grade_level: "6",
+  max_fkgl: 8,
+  max_words: 200,
+  max_rewrite_attempts: 3,
+  max_title_length: 50,
+}
+async function processExercise(
+  rigoToken: string,
+  steps: Lesson[],
+  packageContext: string,
+  exercise: Lesson,
+  exercisesDir: string
+): Promise<string> {
+  //   const tid = toast.loading("Generating lesson...")
+  const readme = await readmeCreator(rigoToken, {
+    title: `${exercise.id} - ${exercise.title}`,
+    output_lang: "en",
+    list_of_exercises: JSON.stringify(steps),
+    tutorial_description: packageContext,
+    lesson_description: exercise.description,
+    kind: exercise.type.toLowerCase(),
+  })
+
+  console.log(exercise.id, "ID")
+
+  const duration = exercise.duration
+  let attempts = 0
+  let readability = checkReadability(readme.parsed.content, 200, duration || 1)
+
+  while (
+    readability.fkglResult.fkgl > PARAMS.max_fkgl &&
+    attempts < PARAMS.max_rewrite_attempts
+  ) {
+    // Console.warning(
+    //   `The lesson ${exTitle} has as readability score of  ${
+    //     readability.fkglResult.fkgl
+    //   } . It exceeds the maximum of words per minute. Rewriting it... (Attempt ${
+    //     attempts + 1
+    //   })`
+    // )
+
+    // eslint-disable-next-line
+    const reducedReadme = await makeReadmeReadable(rigoToken, {
+      lesson: readability.body,
+      number_of_words: readability.minutes.toString(),
+      expected_number_words: PARAMS.max_words.toString(),
+      fkgl_results: JSON.stringify(readability.fkglResult),
+      expected_grade_level: PARAMS.expected_grade_level,
+    })
+
+    // console.log("REDUCED README START", reducedReadme, "REDUCED README END")
+
+    if (!reducedReadme) break
+
+    readability = checkReadability(
+      reducedReadme.parsed.content,
+      PARAMS.max_words,
+      duration || 1
+    )
+
+    attempts++
+  }
+
+  //   Console.success(
+  //     `After ${attempts} attempts, the lesson ${exTitle} has a readability score of ${
+  //       readability.fkglResult.fkgl
+  //     } using FKGL. And it has ${readability.minutes.toFixed(
+  //       2
+  //     )} minutes of reading time.`
+  //   )
+
+  const readmeFilename = "README.md"
+  await uploadFileToBucket(
+    readability.newMarkdown,
+    `${exercisesDir}/${slugify(
+      exercise.id + "-" + exercise.title
+    )}/${readmeFilename}`
+  )
+
+  if (exercise.type.toLowerCase() === "code") {
+    // const codeFile = await createCodeFile(rigoToken, {
+    //   readme: readability.newMarkdown,
+    //   tutorial_info: packageContext,
+    // })
+    // fs.writeFileSync(
+    //   path.join(
+    //     exerciseDir,
+    //     `app.${codeFile.parsed.extension.replace(".", "")}`
+    //   ),
+    //   codeFile.parsed.content
+    // )
+  }
+
+  //   toast.success("Lesson generated successfully", { id: tid })
+  return readability.newMarkdown
+}
+
+const randomUUID = () => {
+  return Math.random().toString(36).substring(2, 15)
+}
+
+// types.ts
+export interface Lesson {
+  id: string
+  title: string
+  type: "READ" | "CODE" | "QUIZ"
+  description: string
+  duration?: number
+}
+
+type TMessage = {
+  type: "user" | "assistant"
+  content: string
+}
+
+const SyllabusEditor: React.FC = () => {
+  const inputRef = useRef<HTMLInputElement>(null)
+  //   const navigate = useNavigate()
+  const [messages, setMessages] = useState<TMessage[]>([])
+  const [isGenerating, setIsGenerating] = useState(false)
+  const { syllabus, setSyllabus, auth } = useStore(
+    useShallow((state) => ({
+      syllabus: state.syllabus,
+      setSyllabus: state.setSyllabus,
+      auth: state.auth,
+    }))
+  )
+
+  const handleRemove = (id: string) => {
+    setSyllabus({
+      ...syllabus,
+      lessons: syllabus.lessons.filter((lesson) => lesson.id !== id),
+    })
+  }
+
+  const handleChange = (id: string, newTitle: string) => {
+    setSyllabus({
+      ...syllabus,
+      lessons: syllabus.lessons.map((lesson) =>
+        lesson.id === id ? { ...lesson, title: newTitle } : lesson
+      ),
+    })
+  }
+
+  const addLessonAfter = (index: number, id: string) => {
+    const newLesson: Lesson = {
+      id: (parseFloat(id) + 0.1).toString(),
+      title: "Hello World",
+      type: "READ",
+      duration: 2,
+      description: "Hello World",
+    }
+    const updated = [...syllabus.lessons]
+    updated.splice(index + 1, 0, newLesson)
+
+    setSyllabus({
+      lessons: updated,
+    })
+  }
+
+  const sendPrompt = async (prompt: string) => {
+    setMessages([...messages, { type: "user", content: prompt }])
+    const res = await interactiveCreation(auth.rigoToken, {
+      courseInfo: JSON.stringify(syllabus),
+      prevInteractions:
+        messages
+          .map((message) => `${message.type}: ${message.content}`)
+          .join("\n") + `\nUSER: ${prompt}`,
+    })
+    console.log(res, "RES")
+    const lessons = res.parsed.listOfSteps.map((step: any) => parseLesson(step))
+    setSyllabus({
+      ...syllabus,
+      lessons: lessons,
+      courseInfo: {
+        ...syllabus.courseInfo,
+        title: res.parsed.title || syllabus.courseInfo.title,
+      },
+    })
+    setMessages((prev) => [
+      ...prev,
+      { type: "assistant", content: res.parsed.aiMessage },
+    ])
+  }
+
+  const handleSubmit = async () => {
+    setIsGenerating(true)
+    const lessonsPromises = syllabus.lessons.map((lesson) =>
+      processExercise(
+        auth.rigoToken,
+        syllabus.lessons,
+        JSON.stringify(syllabus.courseInfo),
+        lesson,
+        "courses/" +
+          slugify(syllabus.courseInfo.title || randomUUID()) +
+          "/exercises"
+      )
+    )
+    await Promise.all(lessonsPromises)
+
+    const learnJson = createLearnJson(syllabus.courseInfo)
+    await uploadFileToBucket(
+      JSON.stringify(learnJson),
+      "courses/" +
+        slugify(syllabus.courseInfo.title || randomUUID()) +
+        "/learn.json"
+    )
+    setIsGenerating(false)
+
+    window.location.href = `${CREATOR_API_URL}?slug=${slugify(
+      syllabus.courseInfo.title || "exercises"
+    )}`
+  }
+
+  return isGenerating ? (
+    <Loader
+      icon={SVGS.aiStars}
+      text="Learnpack is setting up your tutorial.
+It may take a moment..."
+    />
+  ) : (
+    <div className="flex w-full bg-white rounded-md shadow-md overflow-hidden h-screen ">
+      {/* Sidebar */}
+      <div className="w-1/3 p-6 text-sm text-gray-700 border-r bg-learnpack-blue h-screen overflow-y-auto scrollbar-hide">
+        <div className="p-4 border rounded-md bg-white shadow-sm">
+          <p>We generated this syllabus based on your answers.</p>
+          <p className="mt-2">If you're satisfied, type "OK" in the chat.</p>
+          <p className="mt-2">If not, use the chat to give more context.</p>
+          <p className="mt-2 text-gray-500">We recommend:</p>
+          <ul className="mt-2 space-y-1 text-blue-500">
+            <li>
+              <a href="#">Make it have more readings</a>
+            </li>
+            <li>
+              <a href="#">Make it shorter</a>
+            </li>
+          </ul>
+        </div>
+        <div className="mt-10 space-y-2">
+          {messages.map((message, index) => (
+            <Message
+              key={index}
+              type={message.type}
+              content={message.content}
+            />
+          ))}
+        </div>
+        <input
+          ref={inputRef}
+          className="mt-10 w-full p-2 border rounded-md text-gray-400 bg-white"
+          placeholder="How can Learnpack help you?"
+          onKeyUp={(e) => {
+            if (e.key === "Enter") {
+              sendPrompt(inputRef.current?.value || "")
+              inputRef.current!.value = ""
+            }
+          }}
+        />
+      </div>
+
+      {/* Editor */}
+      <div className="w-2/3 p-8 space-y-6">
+        <div>
+          <h2 className="text-lg font-semibold">
+            I've created a detailed structure for your course.
+          </h2>
+          <p className="text-sm text-gray-600">
+            It includes a mix of reading, coding exercises, and quizzes. Give it
+            a look and let me know if it aligns with your expectations or if
+            there are any changes you'd like to make.
+          </p>
+          <h3 className="text-sm text-gray-600 mt-2 font-bold">
+            {syllabus.courseInfo.title}
+          </h3>
+        </div>
+
+        {/* Lessons */}
+        <div className="space-y-3 overflow-y-auto max-h-[60vh] pr-2 scrollbar-hide">
+          {syllabus.lessons.map((lesson, index) => (
+            <div key={lesson.id}>
+              <LessonItem
+                key={lesson.id}
+                index={lesson.id}
+                lesson={lesson}
+                onChange={handleChange}
+                onRemove={handleRemove}
+              />
+              <div className="relative h-6">
+                <div className="absolute left-1/2 -translate-x-1/2 -top-3">
+                  <button
+                    onClick={() => addLessonAfter(index, lesson.id)}
+                    className="w-6 h-6 flex items-center justify-center bg-blue-100 text-blue-600 rounded hover:bg-blue-200 shadow-sm text-sm font-semibold"
+                  >
+                    +
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="flex justify-between mt-6">
+          <button className="text-blue-600 hover:underline text-sm">
+            Skip
+          </button>
+          <button
+            onClick={handleSubmit}
+            className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700"
+          >
+            Next
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SyllabusEditor
+
+interface LessonItemProps {
+  lesson: Lesson
+  index: string
+  onChange: (id: string, newTitle: string) => void
+  onRemove: (id: string) => void
+}
+
+const LessonItem: React.FC<LessonItemProps> = ({
+  lesson,
+  index,
+  onChange,
+  onRemove,
+}) => {
+  const [isEditing, setIsEditing] = useState(false)
+
+  return (
+    <div className="flex items-center space-x-2 border border-gray-200 rounded-md p-3">
+      <span className="index-circle">{index}</span>
+      <span className="text-gray-500 text-sm">
+        {lesson.type[0] + lesson.type.slice(1).toLowerCase()} ●
+      </span>
+
+      {isEditing ? (
+        <input
+          value={lesson.title}
+          onChange={(e) => onChange(lesson.id, e.target.value)}
+          onBlur={() => setIsEditing(false)}
+          autoFocus
+          className="flex-1 bg-white border border-gray-300 rounded-md px-2 py-1 text-sm"
+        />
+      ) : (
+        <span className="flex-1 text-sm text-gray-800">{lesson.title}</span>
+      )}
+
+      <span className="text-sm text-gray-600 bg-blue-100 px-2 py-1 rounded-full">
+        {lesson.duration} min
+      </span>
+
+      <button
+        onClick={() => setIsEditing(!isEditing)}
+        className="text-gray-500 hover:text-blue-500"
+      >
+        {SVGS.pen}
+      </button>
+      <button
+        onClick={() => onRemove(lesson.id)}
+        className="text-red-500 hover:text-red-700"
+      >
+        {SVGS.trash}
+      </button>
+    </div>
+  )
+}
+
+const Message: React.FC<TMessage> = ({ type, content }) => {
+  const isAI = type === "assistant"
+
+  return (
+    <div
+      className={`flex items-start space-x-2 p-3 rounded-md border ${
+        isAI
+          ? "bg-gray-50 border-gray-300 text-gray-800"
+          : "bg-blue-50 border-blue-200 text-blue-900"
+      }`}
+    >
+      <span
+        className={`text-xs font-bold px-2 py-1 rounded ${
+          isAI ? "bg-gray-200 text-gray-800" : "bg-blue-200 text-blue-900"
+        }`}
+      >
+        {isAI ? "AI" : "YOU"}
+      </span>
+      <p className="text-sm leading-relaxed">{content}</p>
+    </div>
+  )
+}

package/src/creator/src/index.css

@@ -0,0 +1,68 @@
+@import "tailwindcss";
+
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: #213547;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  --four-geeks-blue: #0097cf;
+  --soft-blue: #f3fafd;
+  --gray-text: #6883b4;
+  --learnpack-blue: #02a9ea;
+}
+
+a {
+  font-weight: 500;
+  color: var(--learnpack-blue);
+  text-decoration: inherit;
+}
+a:hover {
+  color: var(--learnpack-blue);
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background-color: #f4f9fe;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+.bg-learnpack-blue {
+  background-color: var(--soft-blue);
+}
+
+.bg-gray-blue {
+  background-color: #e7f1ff;
+}
+
+.index-circle {
+  width: 30px;
+  height: 30px;
+  font-size: 16px;
+  font-weight: 600;
+  border-radius: 50%;
+  color: var(--four-geeks-blue);
+  background-color: var(--soft-blue);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.text-gray {
+  color: var(--gray-text);
+}
+
+.scrollbar-hide {
+  scrollbar-width: none !important;
+}

package/src/creator/src/main.tsx

@@ -0,0 +1,19 @@
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+import { BrowserRouter, Route, Routes } from "react-router"
+import "./index.css"
+import App from "./App.tsx"
+import SyllabusEditor from "./components/SyllabusEditor.tsx"
+import { Toaster } from "react-hot-toast"
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <Toaster />
+    <BrowserRouter>
+      <Routes>
+        <Route path="/creator" element={<App />} />
+        <Route path="/creator/syllabus" element={<SyllabusEditor />} />
+      </Routes>
+    </BrowserRouter>
+  </StrictMode>
+)

package/src/creator/src/utils/configTypes.ts

@@ -0,0 +1,122 @@
+export interface IFile {
+  path: string
+  name: string
+  hidden: boolean
+}
+
+export interface IExercise {
+  position?: number
+  files: Array<IFile>
+  slug: string
+  path: string
+  done: boolean
+  language?: string | null
+  entry?: string | null
+  graded?: boolean
+  translations?: { [key: string]: string }
+  title: string
+}
+
+export type TGrading = "isolated" | "incremental" | "no-grading"
+
+export type TMode = "preview" | "extension"
+
+export type TConfigAction = "test" | "build" | "tutorial" | "reset" | "generate"
+
+export type TConfigObjAttributes = "config" | "exercises" | "grading"
+
+export type TCompiler =
+  | "webpack"
+  | "vanillajs"
+  | "react"
+  | "html"
+  | "node"
+  | "python"
+  | "css"
+
+export interface IConfigPath {
+  base: string
+}
+
+export interface IEditor {
+  mode?: TMode
+  version?: string
+  agent?: TAgent
+  hideTerminal?: boolean
+}
+
+export interface TEntries {
+  python3?: string
+  html?: string
+  node?: string
+  react?: string
+  java?: string
+}
+
+export interface IConfig {
+  //   os: string
+  //   port?: string
+  //   repository?: string
+  description?: string
+  slug?: string
+  //   dirPath: string
+  //   preview?: string // Picture thumbnail
+  //   entries: TEntries
+  grading: TGrading
+  //   configPath: string
+  translations: Array<string>
+  //   outputPath?: string
+  //   editor: IEditor
+  language: string
+  title: string
+  duration: number
+  difficulty?: string
+  exercisesPath: string
+  disableGrading: boolean // TODO: Deprecate
+  actions: Array<string> // TODO: Deprecate
+  autoPlay: boolean
+  projectType?: string
+  // TODO: nameExerciseValidation
+  contact?: string
+  disabledActions?: Array<TConfigAction>
+  compiler: TCompiler
+  compilers: Array<TCompiler>
+  publicPath: string
+  publicUrl?: string
+  bugsLink?: string
+  videoSolutions?: boolean
+  skills: Array<string>
+  //   telemetry?: TTelemetryUrls
+  variables?: TVariables
+  suggestions: TSuggestions
+  warnings: TWarnings
+  runHook: (...agrs: Array<any>) => void
+  testingFinishedCallback: (arg: any | undefined) => void
+}
+export type TAgent = "os" | "vscode" | null
+
+export type TSuggestions = {
+  agent: TAgent
+}
+
+type TWarnings = {
+  agent?: string
+  extension?: string
+}
+
+type TVariable = {
+  type: "command" | "string"
+  source: string
+}
+type TVariables = {
+  [key: string]: TVariable | string
+}
+
+export interface IConfigObj {
+  session?: number
+  currentExercise?: any
+  config?: IConfig
+  exercises?: Array<IExercise>
+  confPath?: IConfigPath
+  address?: string // Maybe
+}

package/src/creator/src/utils/constants.ts

@@ -0,0 +1,2 @@
+export const RIGOBOT_HOST = "https://rigobot.herokuapp.com"
+export const BREATHECODE_HOST = "https://breathecode.herokuapp.com"

package/src/creator/src/utils/lib.ts

@@ -0,0 +1,36 @@
+import axios from "axios"
+
+type ParsedLesson = {
+  id: string
+  title: string
+  type: string
+  description: string
+  duration?: number
+}
+
+export function parseLesson(input: string): ParsedLesson | null {
+  const pattern = /^([\d.]+)\s*-\s*(.*?)\s*\[(\w+):\s*(.+)\]$/
+  const match = input.match(pattern)
+
+  if (!match) return null
+
+  const [, index, title, type, description] = match
+
+  return {
+    id: index,
+    title: title.trim(),
+    type: type.trim().toUpperCase(),
+    description: description.trim(),
+    duration: 2,
+  }
+}
+
+export const CREATOR_API_URL = "http://localhost:3000"
+
+export const uploadFileToBucket = async (content: string, path: string) => {
+  const response = await axios.post(`${CREATOR_API_URL}/upload`, {
+    content,
+    destination: path,
+  })
+  return response.data
+}