@learnpack/learnpack 5.0.65 → 5.0.67

package/src/creator/src/utils/store.ts

@@ -1,6 +1,6 @@
 import { create } from "zustand"
 import { persist } from "zustand/middleware"
-import { Lesson } from "../components/SyllabusEditor"
+import { Lesson } from "../components/LessonItem"
 
 export type FormState = {
   description: string
@@ -21,6 +21,10 @@ type Auth = {
 type Syllabus = {
   lessons: Lesson[]
   courseInfo: FormState
+  uploadedFiles: {
+    name: string
+    text: string
+  }[]
 }
 
 type Store = {
@@ -64,6 +68,7 @@ const useStore = create<Store>()(
           currentStep: 0,
           title: "",
         },
+        uploadedFiles: [],
       },
       setSyllabus: (syllabus: Partial<Syllabus>) =>
         set((state) => ({ syllabus: { ...state.syllabus, ...syllabus } })),

package/{lib/creatorDist/assets/index-tt9JBVY0.css → src/creatorDist/assets/index-t6ma_gVm.css}

@@ -43,8 +43,10 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
       "Liberation Mono", "Courier New", monospace;
+    --color-red-300: oklch(80.8% 0.114 19.571);
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-700: oklch(50.5% 0.213 27.518);
+    --color-yellow-50: oklch(98.7% 0.026 102.212);
     --color-sky-500: oklch(68.5% 0.169 237.323);
     --color-sky-600: oklch(58.8% 0.158 241.966);
     --color-blue-50: oklch(97% 0.014 254.604);
@@ -69,8 +71,6 @@
     --spacing: 0.25rem;
     --container-sm: 24rem;
     --container-xl: 36rem;
-    --text-xs: 0.75rem;
-    --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
     --text-lg: 1.125rem;
@@ -352,9 +352,24 @@
   .relative {
     position: relative;
   }
+  .-top-1 {
+    top: calc(var(--spacing) * -1);
+  }
   .-top-3 {
     top: calc(var(--spacing) * -3);
   }
+  .right-0 {
+    right: calc(var(--spacing) * 0);
+  }
+  .right-2 {
+    right: calc(var(--spacing) * 2);
+  }
+  .bottom-2 {
+    bottom: calc(var(--spacing) * 2);
+  }
+  .bottom-4 {
+    bottom: calc(var(--spacing) * 4);
+  }
   .left-1\/2 {
     left: 50%;
   }
@@ -367,6 +382,9 @@
   .mx-auto {
     margin-inline: auto;
   }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
@@ -403,21 +421,36 @@
   .inline {
     display: inline;
   }
+  .inline-block {
+    display: inline-block;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }
   .h-2 {
     height: calc(var(--spacing) * 2);
   }
+  .h-3 {
+    height: calc(var(--spacing) * 3);
+  }
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
   .h-24 {
     height: calc(var(--spacing) * 24);
   }
+  .h-full {
+    height: 100%;
+  }
   .h-screen {
     height: 100vh;
   }
   .max-h-\[60vh\] {
     max-height: 60vh;
   }
+  .max-h-\[300px\] {
+    max-height: 300px;
+  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -430,12 +463,21 @@
   .w-2\/3 {
     width: 66.6667%;
   }
+  .w-3 {
+    width: calc(var(--spacing) * 3);
+  }
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
+  .w-\[90\%\] {
+    width: 90%;
+  }
   .w-full {
     width: 100%;
   }
+  .max-w-\[700px\] {
+    max-width: 700px;
+  }
   .max-w-sm {
     max-width: var(--container-sm);
   }
@@ -465,6 +507,12 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .resize {
+    resize: both;
+  }
+  .resize-none {
+    resize: none;
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -483,21 +531,18 @@
   .justify-center {
     justify-content: center;
   }
+  .justify-end {
+    justify-content: flex-end;
+  }
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
-  :where(.space-y-1 > :not(:last-child)) {
-    --tw-space-y-reverse: 0;
-    margin-block-start: calc(
-      calc(var(--spacing) * 1) * var(--tw-space-y-reverse)
-    );
-    margin-block-end: calc(
-      calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))
-    );
-  }
   :where(.space-y-2 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(
@@ -603,9 +648,6 @@
   .bg-gray-50 {
     background-color: var(--color-gray-50);
   }
-  .bg-gray-200 {
-    background-color: var(--color-gray-200);
-  }
   .bg-gray-300 {
     background-color: var(--color-gray-300);
   }
@@ -615,6 +657,9 @@
   .bg-white {
     background-color: var(--color-white);
   }
+  .bg-yellow-50 {
+    background-color: var(--color-yellow-50);
+  }
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
@@ -648,12 +693,18 @@
   .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }
+  .pb-16 {
+    padding-bottom: calc(var(--spacing) * 16);
+  }
   .text-center {
     text-align: center;
   }
   .text-left {
     text-align: left;
   }
+  .font-sans {
+    font-family: var(--font-sans);
+  }
   .text-4xl {
     font-size: var(--text-4xl);
     line-height: var(--tw-leading, var(--text-4xl--line-height));
@@ -670,9 +721,8 @@
     font-size: var(--text-xl);
     line-height: var(--tw-leading, var(--text-xl--line-height));
   }
-  .text-xs {
-    font-size: var(--text-xs);
-    line-height: var(--tw-leading, var(--text-xs--line-height));
+  .text-\[10px\] {
+    font-size: 10px;
   }
   .leading-relaxed {
     --tw-leading: var(--leading-relaxed);
@@ -762,6 +812,9 @@
     .hover\:bg-blue-700:hover {
       background-color: var(--color-blue-700);
     }
+    .hover\:bg-red-300:hover {
+      background-color: var(--color-red-300);
+    }
     .hover\:text-blue-500:hover {
       color: var(--color-blue-500);
     }
@@ -774,9 +827,6 @@
     .hover\:text-red-700:hover {
       color: var(--color-red-700);
     }
-    .hover\:underline:hover {
-      text-decoration-line: underline;
-    }
     .hover\:shadow-lg:hover {
       --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a),
         0 4px 6px -4px var(--tw-shadow-color, #0000001a);
@@ -799,6 +849,7 @@
   --soft-blue: #f3fafd;
   --gray-text: #6883b4;
   --learnpack-blue: #02a9ea;
+  --learnpack-light-blue: #c7f3fd;
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   font-weight: 400;
   line-height: 1.5;
@@ -845,6 +896,53 @@ h1 {
 .scrollbar-hide {
   scrollbar-width: none !important;
 }
+.loader {
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  animation: 1s linear infinite glowing;
+  display: flex;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.loader-icon {
+  border: 2px solid var(--loader-color);
+  border-top-color: #0000;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  position: relative;
+}
+.loader-icon:after {
+  content: "";
+  border: 2px solid var(--gray-text);
+  border-top: 2px solid var(--learnpack-blue);
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+  animation: 2s linear infinite spin;
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+@keyframes glowing {
+  0% {
+    opacity: 0.6;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.blue-on-hover:hover svg,
+.blue-on-hover:hover svg path {
+  fill: var(--learnpack-blue);
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;