feat: migrate course UI from supabase (#615)

* chore: fix storybook build * chore: implement theming * community list not showing properly * refactor: migrate Chip component to @cio/ui/custom/chip - Updated imports for the Chip component across multiple files to use the new location in the @cio/ui package. - Replaced the previous Chip implementation with a new version that utilizes a Badge for better styling and functionality. - Adjusted related components to ensure consistent usage of the updated Chip component. * fix: align course sidebar design to match organization design (#611) * fix: align course sidebar design to match organization design * feat: add hideSearch prop to AppHeader and update sidebar layout --------- Co-authored-by: Rotimi Best <best@classroomio.com> * refactor: replace PrimaryButton with Button component across multiple files - Updated various components to use the new Button component from @cio/ui/base/button instead of the deprecated PrimaryButton. - Ensured consistent button usage throughout the application for improved styling and functionality. - Removed the PrimaryButton component and its associated constants from the codebase. * refactor: standardize button and input usage across components - Replaced instances of deprecated components such as TextField, TextArea, and IconButton with their updated counterparts (InputField, TextareaField, and updated IconButton). - Ensured consistent event handling by changing `onClick` to `onclick` for better alignment with Svelte's event binding conventions. - Removed unused components and streamlined imports to enhance code maintainability and readability. * chore: themeing, course card, use $features * refactor: centralize UI components and update modal implementations - Refactored various components to centralize UI elements, improving discoverability and maintainability. - Replaced deprecated modal components with the new Dialog component for consistent modal behavior across the application. - Removed unused components and streamlined imports to enhance code clarity and reduce complexity. * feat: add new documentation and refactor org and lms UI components - Introduced new documentation files for Auth Flow, Breadcrumbs Refactoring, Page and Route Creation, and Route Page Setup to enhance developer onboarding and reference. - Refactored various UI components, including the Course Sidebar and Lesson Modal, to improve layout and functionality. - Removed deprecated components and streamlined imports for better maintainability. - Updated translations across multiple languages to ensure consistency in user experience. * refactor: update UI components and improve styling consistency - Refactored various components to enhance styling consistency, including updates to button and text color classes. - Removed deprecated components and streamlined imports for better maintainability. - Replaced instances of PageBody with a more flexible Page component structure across multiple routes. - Updated translations and UI elements to align with the new design system. - Deleted unused components to reduce code complexity and improve clarity. * update output.css --------- Co-authored-by: Abdulmuizz Hamzat <103611443+canhamzacode@users.noreply.github.com>
2025-12-22 02:36:48 +01:00
parent e6a3cf9332
commit 9fb6c7cbaa
401 changed files with 10489 additions and 11679 deletions
@@ -1,5 +1,5 @@
 import { env } from '$env/dynamic/private';
-import { getSubdomain } from '$lib/features/app/layout-setup';
+import { getSubdomain } from '$features/app/layout-setup';
 import { redirect } from '@sveltejs/kit';

 const APP_SUBDOMAINS = env.PRIVATE_APP_SUBDOMAINS?.split(',') || ['app'];
@@ -4,12 +4,12 @@
  import * as Sidebar from '@cio/ui/base/sidebar';
  import { Skeleton } from '@cio/ui/base/skeleton';
  import { currentOrg } from '$lib/utils/store/org';
-  import { AppHeader } from '$lib/features/ui';
+  import { AppHeader } from '$features/ui';

-  import { VerifyEmailModal } from '$lib/features/onboarding/components';
+  import { VerifyEmailModal } from '$features/onboarding/components';

-  import { OrgSidebar } from '$lib/features/ui/sidebar/org-sidebar/index.js';
-  import AddOrgModal from '$lib/components/Org/AddOrgModal/AddOrgModal.svelte';
+  import { OrgSidebar } from '$features/ui/sidebar/org-sidebar';
+  import { AddOrgModal } from '$features/org';

  let { data, children } = $props();

@@ -35,7 +35,7 @@
  <Sidebar.Inset>
    <AppHeader />

-    <div class="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-4 overflow-y-auto px-4">
+    <div class="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-4 px-4">
      {#if data.orgName === '*'}
        <div class="grid auto-rows-min gap-4 md:grid-cols-3">
          <Skeleton class="aspect-video rounded-xl" />
@@ -11,16 +11,15 @@
  import { calDateDiff } from '$lib/utils/functions/date';
  import { getGreeting } from '$lib/utils/functions/date';
  import { currentOrgPath } from '$lib/utils/store/org';
-  import { dashStatApi } from '$lib/features/org/api';
+  import { dashStatApi } from '$features/org/api';

-  import { CreateCourseButton } from '$lib/features/course/components';
+  import { CreateCourseButton } from '$features/course/components';
  import * as Avatar from '@cio/ui/base/avatar';
-  import { ActivityCard } from '$lib/components/Analytics';
  import { shortenName } from '$lib/utils/functions/string';
-  import Progress from '$lib/components/Progress/index.svelte';
+  import { Progress } from '@cio/ui/base/progress';
  import { Button } from '@cio/ui/base/button';
-  import { WelcomeModal } from '$lib/features/onboarding/components';
-  import VisitOrgSiteButton from '$lib/components/Buttons/VisitOrgSite.svelte';
+  import { WelcomeModal } from '$features/onboarding/components';
+  import { ActivityCard, VisitOrgSiteButton } from '$features/ui';
  import * as Page from '@cio/ui/base/page';
  import { Empty } from '@cio/ui/custom/empty';

@@ -1,11 +1,11 @@
 <script>
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import { AudiencePage } from '$lib/features/audience/pages';
+  import { Button } from '@cio/ui/base/button';
+  import { AudiencePage } from '$features/audience/pages';
  import { t } from '$lib/utils/functions/translations';
  import { currentOrgPlan, currentOrgMaxAudience } from '$lib/utils/store/org';
  import { PLAN } from '@cio/utils/plans';
  import * as Page from '@cio/ui/base/page';
-  import { orgApi } from '$lib/features/org/api/org.svelte';
+  import { orgApi } from '$features/org/api/org.svelte';

  let isLoading = $state(false);

@@ -33,7 +33,9 @@
      </Page.Title>
    </Page.HeaderContent>
    <Page.Action>
-      <PrimaryButton label={$t('audience.export')} onClick={exportAudience} isDisabled={isLoading} {isLoading} />
+      <Button onclick={exportAudience} disabled={isLoading} loading={isLoading}>
+        {$t('audience.export')}
+      </Button>
    </Page.Action>
  </Page.Header>
  <Page.Body>
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { UserAnalyticsPage } from '$lib/features/audience/pages';
+  import { UserAnalyticsPage } from '$features/audience/pages';
  import * as Page from '@cio/ui/base/page';

  let { data } = $props();
@@ -1,6 +1,6 @@
 <script>
-  import { CommunityPage } from '$lib/features/community/pages';
-  import { AskCommunityButton } from '$lib/features/community/components';
+  import { CommunityPage } from '$features/community/pages';
+  import { AskCommunityButton } from '$features/community/components';
  import { t } from '$lib/utils/functions/translations';
  import * as Page from '@cio/ui/base/page';
 </script>
@@ -5,29 +5,27 @@
  import { Skeleton } from '@cio/ui/base/skeleton';
  import * as Select from '@cio/ui/base/select';
  import TrashIcon from '@lucide/svelte/icons/trash';
-  import ArrowLeftIcon from '@lucide/svelte/icons/arrow-left';

  import { t } from '$lib/utils/functions/translations';
-  import { courses } from '$lib/features/course/utils/store';
+  import { courses } from '$features/course/utils/store';
  import { calDateDiff } from '$lib/utils/functions/date';
  import { supabase } from '$lib/utils/functions/supabase';
-  import { snackbar } from '$lib/components/Snackbar/store';
+  import { snackbar } from '$features/ui/snackbar/store';
  import { fetchCourses } from '$lib/utils/services/courses';
-  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import { Button } from '@cio/ui/base/button';
  import { currentOrg, currentOrgPath, isOrgAdmin } from '$lib/utils/store/org';
  import { askCommunityValidation, commentInCommunityValidation } from '$lib/utils/functions/validator';

  import type { Course } from '$lib/utils/types';
  import { profile } from '$lib/utils/store/user';
-  import Vote from '$lib/components/Vote/index.svelte';
-  import { IconButton } from '$lib/components/IconButton';
+  import { Vote } from '$features/ui';
+  import { IconButton } from '@cio/ui/custom/icon-button';
  import * as Avatar from '@cio/ui/base/avatar';
-  import TextField from '$lib/components/Form/TextField.svelte';
+  import { InputField } from '@cio/ui/custom/input-field';
  import { shortenName } from '$lib/utils/functions/string';
-  import TextEditor from '$lib/components/TextEditor/index.svelte';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import { CommunityDeleteModal } from '$lib/features/community/components';
-  import CircleCheckIcon from '$lib/components/Icons/CircleCheckIcon.svelte';
+  import { TextEditor } from '$features/ui';
+  import { CommunityDeleteModal } from '$features/community/components';
+  import { CircleCheckIcon } from '$features/ui/icons';
  import * as Page from '@cio/ui/base/page';

  interface Comment {
@@ -64,7 +62,6 @@
    title?: string;
  } = $state({});
  let isValidAnswer = false; // V2 allow admin mark an answer as accepted
-  let resetInput = 1;
  let voted: {
    question: boolean;
    comment: {
@@ -211,7 +208,7 @@
          id: _c.id,
          authorId: $profile.id || '',
          name: $profile?.fullname || '',
-          avatar: $profile?.avatar_url || '',
+          avatar: $profile?.avatarUrl || '',
          votes: 0,
          comment: _c.body,
          createdAt: calDateDiff(_c.created_at)
@@ -220,7 +217,6 @@

      // Reset input
      comment = '';
-      resetInput = new Date().getTime();
    }
  }

@@ -397,17 +393,11 @@
  </div>
 {:else}
  <Page.Root class="mx-auto max-w-3xl md:mx-10 lg:mb-20">
-    <div class="px-5 py-10">
-      <a class="text-md flex items-center text-gray-500 dark:text-white" href={`${$currentOrgPath}/community`}>
-        <ArrowLeftIcon size={16} />
-        {$t('community.ask.go_back')}
-      </a>
-    </div>
    <Page.Header>
      <Page.HeaderContent>
        {#if isEditMode}
          <div class="flex w-full items-center gap-2">
-            <TextField bind:value={editContent.title} className="flex-1" errorMessage={errors.title} />
+            <InputField bind:value={editContent.title} className="flex-1" errorMessage={errors.title} />
            <Select.Root type="single" bind:value={editContent.courseId}>
              <Select.Trigger class="h-full w-[25%]">
                <p>
@@ -432,20 +422,13 @@
      </Page.HeaderContent>
      {#if question.author.id === $profile.id}
        <Page.Action>
-          <PrimaryButton
-            label={isEditMode ? $t('community.ask.save') : $t('community.ask.edit')}
-            variant={VARIANTS.OUTLINED}
-            onClick={handleQuestionEdit}
-            className="h-fit"
-          />
+          <Button variant="outline" onclick={handleQuestionEdit}>
+            {isEditMode ? $t('community.ask.save') : $t('community.ask.edit')}
+          </Button>
          {#if isEditMode}
-            <PrimaryButton
-              label={$t('community.ask.cancel')}
-              variant={VARIANTS.TEXT}
-              onClick={() => (isEditMode = !isEditMode)}
-              className="py-3 px-6 rounded-sm h-fit"
-              disablePadding={true}
-            />
+            <Button variant="ghost" onclick={() => (isEditMode = !isEditMode)}>
+              {$t('community.ask.cancel')}
+            </Button>
          {/if}
        </Page.Action>
      {/if}
@@ -469,8 +452,7 @@
            </div>
            {#if question.author.id === $profile.id || $isOrgAdmin}
              <IconButton
-                value="delete-question"
-                onClick={() => {
+                onclick={() => {
                  if (!question) return;

                  deleteQuestion.shouldDelete = true;
@@ -529,8 +511,7 @@

                {#if comment.authorId === $profile.id || $isOrgAdmin}
                  <IconButton
-                    value="delete-comment"
-                    onClick={() => {
+                    onclick={() => {
                      deleteComment.shouldDelete = true;
                      deleteComment.commentId = comment.id;
                    }}
@@ -554,7 +535,9 @@
          {/if}

          <div class="mt-2 flex justify-end">
-            <PrimaryButton label={$t('community.ask.comment')} onClick={submitComment} />
+            <Button onclick={submitComment}>
+              {$t('community.ask.comment')}
+            </Button>
          </div>
        </div>
      {/snippet}
@@ -5,18 +5,17 @@
  import type { Course } from '$lib/utils/types';
  import { profile } from '$lib/utils/store/user';
  import { t } from '$lib/utils/functions/translations';
-  import { courses } from '$lib/features/course/utils/store';
+  import { courses } from '$features/course/utils/store';
  import { supabase } from '$lib/utils/functions/supabase';
-  import { snackbar } from '$lib/components/Snackbar/store';
+  import { snackbar } from '$features/ui/snackbar/store';
  import { fetchCourses } from '$lib/utils/services/courses';
  import generateSlug from '$lib/utils/functions/generateSlug';
  import { currentOrg, currentOrgPath } from '$lib/utils/store/org';
-  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
  import { askCommunityValidation } from '$lib/utils/functions/validator';
+  import { Button } from '@cio/ui/base/button';

-  import TextField from '$lib/components/Form/TextField.svelte';
-  import TextEditor from '$lib/components/TextEditor/index.svelte';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { InputField } from '@cio/ui/custom/input-field';
+  import { TextEditor } from '$features/ui';
  import * as Page from '@cio/ui/base/page';

  let errors: {
@@ -99,13 +98,15 @@
      <Page.Title>{$t('community.ask.ask_the')}</Page.Title>
    </Page.HeaderContent>
    <Page.Action>
-      <PrimaryButton label={$t('community.ask.publish')} variant={VARIANTS.CONTAINED_DARK} onClick={handleSave} />
+      <Button variant="default" onclick={handleSave}>
+        {$t('community.ask.publish')}
+      </Button>
    </Page.Action>
  </Page.Header>
  <Page.Body>
    {#snippet child()}
      <div class="mb-3 flex justify-between gap-x-5">
-        <TextField
+        <InputField
          bind:value={fields.title}
          placeholder={$t('community.ask.title')}
          errorMessage={errors.title}
@@ -1,9 +1,9 @@
 <script lang="ts">
  import { profile } from '$lib/utils/store/user';
  import { fetchCourses } from '$lib/utils/services/courses';
-  import { CoursesPage } from '$lib/features/course/pages';
-  import { CreateCourseButton } from '$lib/features/course/components';
-  import { courses, courseMetaDeta } from '$lib/features/course/utils/store';
+  import { CoursesPage } from '$features/course/pages';
+  import { CreateCourseButton } from '$features/course/components';
+  import { courses, courseMetaDeta } from '$features/course/utils/store';
  import { currentOrg } from '$lib/utils/store/org';
  import type { Course } from '$lib/utils/types';
  import { browser } from '$app/environment';
@@ -1,8 +1,6 @@
 <script>
-  import Quizzes from '$lib/components/Org/Quiz/Quizzes.svelte';
-  import NewQuizModal from '$lib/components/Org/Quiz/NewQuizModal.svelte';
-  import DeleteModal from '$lib/components/Org/Quiz/DeleteModal.svelte';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { Quizzes, NewQuizModal, DeleteModal } from '$features/org';
+  import { Button } from '@cio/ui/base/button';
  import { createQuizModal } from '$lib/utils/store/org';
  import { isMobile } from '$lib/utils/store/useMobile';
  import PlusIcon from '@lucide/svelte/icons/plus';
@@ -17,11 +15,11 @@
    <div class="mb-10 flex items-center justify-between">
      <h1 class="text-2xl md:text-3xl dark:text-white">Interactive Quizzes</h1>
      {#if $isMobile}
-        <PrimaryButton onClick={() => ($createQuizModal.open = true)}>
+        <Button onclick={() => ($createQuizModal.open = true)}>
          <PlusIcon size={16} />
-        </PrimaryButton>
+        </Button>
      {:else}
-        <PrimaryButton label="Create Quiz" onClick={() => ($createQuizModal.open = true)} />
+        <Button onclick={() => ($createQuizModal.open = true)}>Create Quiz</Button>
      {/if}
    </div>

@@ -7,17 +7,14 @@
  import * as Select from '@cio/ui/base/select';
  import ArrowLeftIcon from '@lucide/svelte/icons/arrow-left';
  import CircleAlertIcon from '@lucide/svelte/icons/circle-alert';
-  import CircleCheckIcon from '$lib/components/Icons/CircleCheckIcon.svelte';
+  import { CircleCheckIcon } from '$features/ui/icons';

-  import Preview from '$lib/components/Org/Quiz/Play/Preview.svelte';
-  import DeleteModal from '$lib/components/Org/Quiz/DeleteModal.svelte';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import QuizQuestion from '$lib/components/Org/Quiz/QuizQuestion.svelte';
+  import { Preview, DeleteModal, QuizQuestion } from '$features/org';
+  import { Button } from '@cio/ui/base/button';

  import { t } from '$lib/utils/functions/translations';
  import { supabase } from '$lib/utils/functions/supabase';
-  import { snackbar } from '$lib/components/Snackbar/store';
-  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import { snackbar } from '$features/ui/snackbar/store';
  import { currentOrgPath, deleteModal, quizStore, quizesStore } from '$lib/utils/store/org';
  import { allOptions, allThemes, booleanOptions, themeImages } from '$lib/utils/constants/quiz';

@@ -274,7 +271,7 @@
      </div>

      <div class="flex w-full justify-end">
-        <PrimaryButton label="Add Question" variant={VARIANTS.CONTAINED} onClick={addQuestion} />
+        <Button onclick={addQuestion}>Add Question</Button>
      </div>
    </div>
  </aside>
@@ -297,21 +294,16 @@
        {/if}

        {#if currentQuestion.type !== 'boolean'}
-          <div class="mb-4 flex w-full justify-center">
+          <div class="mb-4 flex w-full justify-center gap-4">
            {#if currentQuestion.options.length < allOptions.length}
-              <PrimaryButton
-                label={$t('components.quiz.add_more')}
-                variant={VARIANTS.CONTAINED_WHITE}
-                onClick={addOption}
-                className="mr-5"
-              />
+              <Button onclick={addOption}>
+                {$t('components.quiz.add_more')}
+              </Button>
            {/if}
            {#if currentQuestion.options.length > 0}
-              <PrimaryButton
-                label={$t('components.quiz.remove_last')}
-                variant={VARIANTS.CONTAINED_WHITE}
-                onClick={deleteOption}
-              />
+              <Button onclick={deleteOption}>
+                {$t('components.quiz.remove_last')}
+              </Button>
            {/if}
          </div>
        {/if}
@@ -323,17 +315,19 @@
  <aside class="settings h-full w-1/5 bg-gray-100 p-4 dark:bg-neutral-800">
    <div class="py-5">
      <h5>Quiz settings</h5>
-      <PrimaryButton label="Save Changes" variant={VARIANTS.CONTAINED} onClick={saveQuiz} className="my-3" />
-      <PrimaryButton label="Preview Quiz" variant={VARIANTS.OUTLINED} onClick={previewQuiz} className="my-3" />
-      <PrimaryButton
-        label="Delete question"
-        variant={VARIANTS.TEXT}
-        onClick={() => {
+      <Button onclick={saveQuiz} class="my-3">Save Changes</Button>
+      <Button variant="outline" onclick={previewQuiz} class="my-3">Preview Quiz</Button>
+      <Button
+        variant="ghost"
+        onclick={() => {
          if ($quizStore.questions.length === 1) return;
          $deleteModal.open = true;
          $deleteModal.isQuestion = true;
        }}
-        className="my-3"
+        class="my-3"
+      >
+        Delete question
+      </Button>
      />
    </div>

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { ProfilePage } from '$lib/features/settings/pages';
-  import ViewSiteBtn from '$lib/components/Buttons/VisitOrgSite.svelte';
+  import { ProfilePage } from '$features/settings/pages';
+  import { VisitOrgSiteButton } from '$features/ui';
  import { t } from '$lib/utils/functions/translations';
  import { Button } from '@cio/ui/base/button';
  import * as Page from '@cio/ui/base/page';
@@ -27,10 +27,11 @@
    <Page.Title>{$t('settings.heading')}</Page.Title>
  </Page.HeaderContent>
  <Page.Action>
-    <Button variant="default" loading={isLoading} onclick={handleUpdate}>
+    <Button variant="secondary" loading={isLoading} onclick={handleUpdate}>
      {$t('settings.profile.update_profile')}
    </Button>
-    <ViewSiteBtn />
+
+    <VisitOrgSiteButton />
  </Page.Action>
 </Page.Header>
 <Page.Body>
@@ -1,5 +1,5 @@
 <script>
-  import { BillingPage } from '$lib/features/settings/pages';
+  import { BillingPage } from '$features/settings/pages';
  import { t } from '$lib/utils/functions/translations';
  import * as Page from '@cio/ui/base/page';
 </script>
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { CustomizeLmsPage } from '$lib/features/settings/pages';
+  import { CustomizeLmsPage } from '$features/settings/pages';
  import { t } from '$lib/utils/functions/translations';
  import { Button } from '@cio/ui/base/button';
  import * as Page from '@cio/ui/base/page';
@@ -1,5 +1,5 @@
 <script>
-  import { DomainsPage } from '$lib/features/settings/pages';
+  import { DomainsPage } from '$features/settings/pages';
  import { t } from '$lib/utils/functions/translations';
  import * as Page from '@cio/ui/base/page';
 </script>
@@ -1,5 +1,5 @@
 <script>
-  import { IntegrationsPage } from '$lib/features/settings/pages';
+  import { IntegrationsPage } from '$features/settings/pages';
  import { t } from '$lib/utils/functions/translations';
  import * as Page from '@cio/ui/base/page';
 </script>
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { LandingpagePage } from '$lib/features/settings/pages';
+  import { LandingpagePage } from '$features/settings/pages';
  import { t } from '$lib/utils/functions/translations';
  import { Button } from '@cio/ui/base/button';
  import * as Page from '@cio/ui/base/page';
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { OrgPage } from '$lib/features/settings/pages';
+  import { OrgPage } from '$features/settings/pages';
  import { t } from '$lib/utils/functions/translations';
  import { Button } from '@cio/ui/base/button';
  import * as Page from '@cio/ui/base/page';
@@ -1,5 +1,5 @@
 <script>
-  import { TeamsPage } from '$lib/features/settings/pages';
+  import { TeamsPage } from '$features/settings/pages';
  import { t } from '$lib/utils/functions/translations';
  import * as Page from '@cio/ui/base/page';
 </script>
@@ -9,14 +9,14 @@
  import UsersIcon from '@lucide/svelte/icons/users';
  import GlobeIcon from '@lucide/svelte/icons/globe';
  import FileTextIcon from '@lucide/svelte/icons/file-text';
-  import SetupProgress from '$lib/features/setup/components/setup-progress.svelte';
+  import SetupProgress from '$features/setup/components/setup-progress.svelte';

  import { currentOrg } from '$lib/utils/store/org';
  import { goto } from '$app/navigation';
-  import { snackbar } from '$lib/components/Snackbar/store.js';
+  import { snackbar } from '$features/ui/snackbar/store';
  import { profile } from '$lib/utils/store/user';
  import { t } from '$lib/utils/functions/translations';
-  import { setupProgressApi } from '$lib/features/setup/api/setup-progress.svelte';
+  import { setupProgressApi } from '$features/setup/api/setup-progress.svelte';
  import { onMount } from 'svelte';

  const setupList = $derived(