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,5 @@
+import InputField from './input-field.svelte';
+
+export { InputField };
+export { InputField as default };
+
@@ -0,0 +1,100 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import * as Field from '../../base/field';
+  import { Input } from '../../base/input';
+
+  interface Props {
+    label?: string;
+    placeholder?: string;
+    value?: string | number | null;
+    name?: string;
+    onKeyDown?: (e: KeyboardEvent) => void;
+    className?: string;
+    labelClassName?: string;
+    type?: string;
+    autoFocus?: boolean;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    min?: string | number | null | undefined;
+    max?: string | number | null | undefined;
+    errorMessage?: string;
+    helperMessage?: string;
+    autoComplete?: boolean;
+    onchange?: (e: Event) => void;
+    onInputChange?: (e: Event) => void;
+  }
+
+  let {
+    label = '',
+    placeholder = '',
+    value = $bindable(),
+    name = '',
+    onKeyDown = (_e) => {},
+    className = '',
+    labelClassName = '',
+    type = $bindable('text'),
+    autoFocus = false,
+    isRequired = false,
+    isDisabled = false,
+    min = undefined,
+    max = undefined,
+    errorMessage = '',
+    helperMessage = '',
+    autoComplete = true,
+    onchange = () => {},
+    onInputChange = () => {}
+  }: Props = $props();
+
+  let inputRef: HTMLInputElement | null = $state(null);
+
+  onMount(() => {
+    if (autoFocus && inputRef) {
+      inputRef.focus();
+    }
+  });
+
+  // Handle input change event
+  function handleInputChange(e: Event) {
+    onInputChange(e);
+  }
+
+  // Handle blur event
+  function handleBlur(e: Event) {
+    onchange(e);
+  }
+</script>
+
+<Field.Field class={className}>
+  {#if label}
+    <Field.Label for={name || 'input-field'} class={labelClassName}>
+      {label}
+      {#if isRequired}
+        <span class="text-red-700">*</span>
+      {/if}
+    </Field.Label>
+  {/if}
+
+  <Input
+    bind:ref={inputRef}
+    id={name || 'input-field'}
+    {type}
+    {placeholder}
+    bind:value
+    {name}
+    {min}
+    {max}
+    required={isRequired}
+    disabled={isDisabled}
+    autocomplete={autoComplete ? 'on' : 'off'}
+    aria-invalid={errorMessage ? 'true' : undefined}
+    onkeydown={onKeyDown}
+    onchange={handleInputChange}
+    onblur={handleBlur}
+  />
+
+  {#if errorMessage}
+    <Field.Error>{errorMessage}</Field.Error>
+  {:else if helperMessage}
+    <Field.Description>{helperMessage}</Field.Description>
+  {/if}
+</Field.Field>