ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: migrate course UI from supabase (#615)

Browse Source 
* 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 <[email protected]>

* 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 <[email protected]>
This commit is contained in:
Rotimi Best
2025-12-22 02:36:48 +01:00
committed by GitHub
co-authored by Abdulmuizz Hamzat
parent e6a3cf9332
commit 9fb6c7cbaa
401 changed files with 10489 additions and 11679 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/src/lib/components/Question/CheckboxQuestion/index.svelte
+15 -23
View File
@@ -1,18 +1,16 @@
<script lang="ts">
import { preventDefault } from '$lib/utils/functions/svelte';
import CodeSnippet from '$lib/components/CodeSnippet/index.svelte';
import Checkbox from '$lib/components/Form/Checkbox.svelte';
import { CodeSnippet } from '$features/ui';
import { CheckboxField } from '@cio/ui/custom/checkbox-field';
import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { Button } from '@cio/ui/base/button';
import Grade from '$lib/components/Question/Grade.svelte';
import { t } from '$lib/utils/functions/translations';
import QuestionTitle from '../QuestionTitle.svelte';
import ReasonBox from '../ReasonBox.svelte';
interface Props {
key: string | number;
title?: string;
index?: number | string;
code: any;
@@ -52,12 +50,12 @@
isDisabled: false,
isActive: false
},
grade = $bindable(),
grade = $bindable(0),
gradeMax = 0,
disableGrading = false,
isGradeWithAI = false,
reason,
isLoading = false,
isGradeWithAI = $bindable(false),
reason = $bindable(''),
isLoading = $bindable(false),
hideGrading = false
}: Props = $props();
@@ -131,7 +129,7 @@
)}"
type="button"
>
<Checkbox
<CheckboxField
{name}
className="p-2"
value={option.value}
@@ -148,21 +146,15 @@
{#if !isPreview}
<div class="mt-3 flex w-full items-center justify-between">
<PrimaryButton
onClick={handlePrevious}
label={$t('course.navItem.lessons.exercises.all_exercises.previous')}
isDisabled={disablePreviousButton}
variant={VARIANTS.OUTLINED}
/>
<PrimaryButton
variant={nextButtonProps.isActive ? VARIANTS.CONTAINED : VARIANTS.OUTLINED}
type="submit"
label={isLast
<Button variant="outline" onclick={handlePrevious} disabled={disablePreviousButton}>
{$t('course.navItem.lessons.exercises.all_exercises.previous')}
</Button>
<Button variant={nextButtonProps.isActive ? 'default' : 'outline'} type="submit">
{isLast
? $t('course.navItem.lessons.exercises.all_exercises.finish')
: $t('course.navItem.lessons.exercises.all_exercises.next')}
isDisabled={nextButtonProps.isDisabled}
{name}
/>
disabled={nextButtonProps.isDisabled}
</Button>
</div>
{/if}
</form>
apps/dashboard/src/lib/components/Question/Grade.svelte
+3 -3
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import TextField from '$lib/components/Form/TextField.svelte';
import { InputField } from '@cio/ui/custom/input-field';
import { t } from '$lib/utils/functions/translations';
import { snackbar } from '../Snackbar/store';
import { snackbar } from '$features/ui/snackbar/store';
interface Props {
gradeMax?: number;
@@ -20,7 +20,7 @@
</script>
<div class="flex items-center font-semibold">
<TextField
<InputField
placeholder={$t('course.navItem.lessons.exercises.new_exercise_modal.points')}
bind:value={grade}
max={gradeMax}
apps/dashboard/src/lib/components/Question/RadioQuestion/index.svelte
+14 -22
View File
@@ -1,10 +1,9 @@
<script lang="ts">
import { preventDefault } from '$lib/utils/functions/svelte';
import CodeSnippet from '$lib/components/CodeSnippet/index.svelte';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import RadioItem from '$lib/components/Form/RadioItem.svelte';
import { CodeSnippet } from '$features/ui';
import { Button } from '@cio/ui/base/button';
import { RadioItem } from '@cio/ui/custom/radio-item';
import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
import Grade from '$lib/components/Question/Grade.svelte';
import { t } from '$lib/utils/functions/translations';
@@ -12,7 +11,6 @@
import QuestionTitle from '../QuestionTitle.svelte';
interface Props {
key: string | number;
title?: string;
index?: number | string;
code?: string;
@@ -53,13 +51,13 @@
isActive: false
},
isLast = false,
grade = $bindable(),
grade = $bindable(0),
gradeMax = 0,
disableGrading = false,
disableOptContainerMargin = false,
isGradeWithAI = false,
reason,
isLoading = false,
isGradeWithAI = $bindable(false),
reason = $bindable(''),
isLoading = $bindable(false),
hideGrading = false
}: Props = $props();
@@ -150,21 +148,15 @@
{#if !isPreview}
<div class="mt-3 flex w-full items-center justify-between">
<PrimaryButton
onClick={handlePrevious}
label={$t('course.navItem.lessons.exercises.all_exercises.previous')}
isDisabled={disablePreviousButton}
variant={VARIANTS.OUTLINED}
/>
<PrimaryButton
variant={nextButtonProps.isActive ? VARIANTS.CONTAINED : VARIANTS.OUTLINED}
type="submit"
label={isLast
<Button variant="outline" onclick={handlePrevious} disabled={disablePreviousButton}>
{$t('course.navItem.lessons.exercises.all_exercises.previous')}
</Button>
<Button variant={nextButtonProps.isActive ? 'default' : 'outline'} type="submit">
{isLast
? $t('course.navItem.lessons.exercises.all_exercises.finish')
: $t('course.navItem.lessons.exercises.all_exercises.next')}
isDisabled={nextButtonProps.isDisabled}
{name}
/>
disabled={nextButtonProps.isDisabled}
</Button>
</div>
{/if}
</form>
apps/dashboard/src/lib/components/Question/ReasonBox.svelte
+7 -17
View File
@@ -1,11 +1,9 @@
<script lang="ts">
import { Skeleton } from '@cio/ui/base/skeleton';
import { VARIANTS } from '../PrimaryButton/constants';
import { Button } from '@cio/ui/base/button';
import { t } from '$lib/utils/functions/translations';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
interface Props {
reason?: string;
isLoading?: boolean;
@@ -40,20 +38,12 @@
</p>
</div>
<div class="flex space-x-2">
<PrimaryButton
variant={VARIANTS.CONTAINED_SUCCESS}
label={$t('course.navItem.submissions.grading_modal.accept_grade')}
className="rounded-none py-1 px-2"
disablePadding={true}
onClick={acceptGrade}
/>
<PrimaryButton
variant={VARIANTS.CONTAINED_DANGER}
label={$t('course.navItem.submissions.grading_modal.reject_grade')}
className="rounded-none py-1 px-2"
disablePadding={true}
onClick={rejectGrade}
/>
<Button onclick={acceptGrade}>
{$t('course.navItem.submissions.grading_modal.accept_grade')}
</Button>
<Button variant="destructive" onclick={rejectGrade}>
{$t('course.navItem.submissions.grading_modal.reject_grade')}
</Button>
</div>
</div>
{/if}
apps/dashboard/src/lib/components/Question/TextareaQuestion/index.svelte
+14 -22
View File
@@ -1,10 +1,9 @@
<script lang="ts">
import { preventDefault } from '$lib/utils/functions/svelte';
import CodeSnippet from '$lib/components/CodeSnippet/index.svelte';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import TextArea from '$lib/components/Form/TextArea.svelte';
import { CodeSnippet } from '$features/ui';
import { Button } from '@cio/ui/base/button';
import { TextareaField } from '@cio/ui/custom/textarea-field';
import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
import Grade from '$lib/components/Question/Grade.svelte';
import { t } from '$lib/utils/functions/translations';
@@ -12,7 +11,6 @@
import QuestionTitle from '../QuestionTitle.svelte';
interface Props {
key: string | number;
title?: string;
index?: number | string;
code?: string;
@@ -45,12 +43,12 @@
isLast = false,
isPreview = false,
disabled = false,
grade = $bindable(),
grade = $bindable(0),
gradeMax = 0,
disableGrading = false,
isGradeWithAI = false,
reason,
isLoading = false,
isGradeWithAI = $bindable(false),
reason = $bindable(''),
isLoading = $bindable(false),
hideGrading = false
}: Props = $props();
@@ -100,7 +98,7 @@
<ReasonBox {reason} {isLoading} {acceptGrade} {rejectGrade} />
{/if}
{:else}
<TextArea
<TextareaField
bind:value={defaultValue}
rows={5}
placeholder={$t('course.navItem.lessons.exercises.all_exercises.write_your_answer_here')}
@@ -110,20 +108,14 @@
{#if !isPreview}
<div class="mt-3 flex w-full items-center justify-between">
<PrimaryButton
variant={VARIANTS.OUTLINED}
onClick={handlePrevious}
label={$t('course.navItem.lessons.exercises.all_exercises.previous')}
isDisabled={disablePreviousButton}
/>
<PrimaryButton
variant={VARIANTS.OUTLINED}
type="submit"
label={isLast
<Button variant="outline" onclick={handlePrevious} disabled={disablePreviousButton}>
{$t('course.navItem.lessons.exercises.all_exercises.previous')}
</Button>
<Button variant="outline" type="submit">
{isLast
? $t('course.navItem.lessons.exercises.all_exercises.finish')
: $t('course.navItem.lessons.exercises.all_exercises.next')}
{name}
/>
</Button>
</div>
{/if}
</form>