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>
This commit is contained in:
Rotimi Best
co-authored by
Abdulmuizz Hamzat
Abdulmuizz Hamzat
parent
e6a3cf9332
commit
9fb6c7cbaa
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user