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
@@ -0,0 +1,15 @@
+export const SNACKBAR_SEVERITY = {
+  ERROR: 'ERROR',
+  WARNING: 'WARNING',
+  DEFAULT: 'DEFAULT',
+  INFO: 'INFO',
+  SUCCESS: 'SUCCESS'
+};
+
+export const SNACKBAR_SEVERITY_COLOR = {
+  ERROR: 'bg-red-600',
+  WARNING: 'bg-yellow-600',
+  INFO: 'ui:bg-primary',
+  DEFAULT: 'bg-gray-600',
+  SUCCESS: 'bg-green-600'
+};
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { Toaster, toast } from '@cio/ui/base/sonner';
+  import { SNACKBAR_SEVERITY } from './constants';
+  import { snackbarStore, snackbarStoreInitialState } from './store';
+  import { t } from '$lib/utils/functions/translations';
+
+  function handleClose() {
+    if (typeof $snackbarStore.handleClose === 'function') {
+      $snackbarStore.handleClose();
+    }
+
+    snackbarStore.update((_s) => ({
+      ..._s,
+      ...snackbarStoreInitialState
+    }));
+  }
+
+  function showToast() {
+    const message = $t($snackbarStore.message);
+    const { autoHideDuration } = $snackbarStore;
+
+    const options = {
+      duration: autoHideDuration || 5000,
+      onDismiss: handleClose,
+      onAutoClose: handleClose
+    };
+
+    if ($snackbarStore.severity === SNACKBAR_SEVERITY.SUCCESS) {
+      toast.success(message, options);
+    } else if ($snackbarStore.severity === SNACKBAR_SEVERITY.ERROR) {
+      toast.error(message, options);
+    } else {
+      toast.info(message, options);
+    }
+  }
+
+  $effect(() => {
+    if ($snackbarStore.open) {
+      showToast();
+    }
+  });
+</script>
+
+<Toaster position="top-right" />
@@ -0,0 +1,42 @@
+import { SNACKBAR_SEVERITY } from './constants';
+import { writable } from 'svelte/store';
+
+export const snackbarStoreInitialState = {
+  open: false,
+  message: '',
+  severity: SNACKBAR_SEVERITY.DEFAULT,
+  handleClose: () => {},
+  autoHideDuration: 6000
+};
+
+export const snackbarStore = writable({ ...snackbarStoreInitialState });
+
+export const snackbar = {
+  success(message = 'snackbar.success') {
+    snackbarStore.update((store) => {
+      store.open = true;
+      store.message = message;
+      store.severity = SNACKBAR_SEVERITY.SUCCESS;
+
+      return store;
+    });
+  },
+  error(message = 'snackbar.something') {
+    snackbarStore.update((store) => {
+      store.open = true;
+      store.message = message;
+      store.severity = SNACKBAR_SEVERITY.ERROR;
+
+      return store;
+    });
+  },
+  info(message = 'snackbar.updates') {
+    snackbarStore.update((store) => {
+      store.open = true;
+      store.message = message;
+      store.severity = SNACKBAR_SEVERITY.INFO;
+
+      return store;
+    });
+  }
+};