feat: redo settings and all org pages. (#601)

* feat: new components, deploy storybook * refactor: simplify component field definitions and enhance button loading state - Removed unnecessary type imports and simplified the FIELDS array definitions across multiple components in Storybook. - Updated button component to use a loading state instead of isLoading, improving clarity and consistency in props. - Adjusted button stories to reflect the new loading prop and enhanced the button's loading visual feedback. - Minor CSS adjustments for better layout and styling consistency. * chore: add field, card, password components * feat: improve page component & update AuthUI path * chore: update bits-ui to version 2.14.4 and all org related UI's - Updated bits-ui dependency in pnpm-lock.yaml and package.json to version 2.14.4. - Refactored imports for RoleBasedSecurity and UpgradeBanner components to use the new ui feature directory. - Removed unused Course components and related files to clean up the codebase. - Enhanced various components to improve consistency and maintainability. * chore: move all setting buttons to the top and update auth ui styles * chore: remove svelte-loading-spinners and replace with @cio/ui/base/spinner - Removed all instances of svelte-loading-spinners from the project. - Updated components to use the new Spinner from @cio/ui/base/spinner. - Cleaned up pnpm-lock.yaml and package.json to reflect the removal of svelte-loading-spinners. - Added new CSS animations for rocket launch effects in app.css. - Enhanced email change flow with updated verification messages in translations. * chore: remove supabase file upload from dashboard and move to r2 * chore: update organization API and UI components - Added new API methods for organization plan operations and team management. - Introduced middleware for API key authentication and organization admin checks. - Refactored organization-related components to utilize the new API structure. - Updated various UI components to improve consistency and maintainability. - Enhanced error handling and validation for organization-related actions. - Removed deprecated services and streamlined the codebase.
2025-12-02 09:54:38 +01:00
parent 531516a8f7
commit c7854efae3
350 changed files with 13928 additions and 3895 deletions
@@ -0,0 +1,28 @@
+import Action from './page-action.svelte';
+import Body from './page-body.svelte';
+import BodyHeader from './page-body-header.svelte';
+import Header from './page-header.svelte';
+import HeaderContent from './page-header-content.svelte';
+import Root from './page.svelte';
+import Subtitle from './page-subtitle.svelte';
+import Title from './page-title.svelte';
+
+export {
+  Root,
+  Header,
+  HeaderContent,
+  Action,
+  Title,
+  Subtitle,
+  Body,
+  BodyHeader,
+  //
+  Root as Page,
+  Header as PageHeader,
+  HeaderContent as PageHeaderContent,
+  Action as PageAction,
+  Title as PageTitle,
+  Subtitle as PageSubtitle,
+  Body as PageBody,
+  BodyHeader as PageBodyHeader
+};
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '../../tools';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="page-action"
+  class={cn('ui:flex ui:items-center ui:gap-2', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
+
@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '../../tools';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    align?: 'left' | 'right' | 'none';
+  }
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    align = 'right',
+    ...restProps
+  }: WithElementRef<Props> = $props();
+
+  const alignClasses = $derived(
+    {
+      left: 'ui:justify-start',
+      right: 'ui:justify-end',
+      none: 'ui:justify-center'
+    }[align]
+  );
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="page-body-header"
+  class={cn('ui:flex ui:items-center ui:gap-2 ui:p-2', alignClasses, className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '../../tools';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    child,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    child?: Snippet;
+  } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="page-body"
+  class={cn('ui:flex-1 ui:flex ui:gap-4 ui:flex-col ui:overflow-y-auto', className)}
+  {...restProps}
+>
+  {#if child}
+    {@render child()}
+  {/if}
+</div>
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '../../tools';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="page-header-content"
+  class={cn('ui:flex ui:flex-col ui:gap-1', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '../../tools';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} data-slot="page-header" class={cn('ui:flex ui:my-4 ui:flex-col', className)} {...restProps}>
+  <div class="ui:flex ui:items-start ui:justify-between ui:gap-4">
+    {@render children?.()}
+  </div>
+</div>
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '../../tools';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+</script>
+
+<p
+  bind:this={ref}
+  data-slot="page-subtitle"
+  class={cn('ui:text-muted-foreground ui:text-sm', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</p>
+
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '../../tools';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLHeadingElement>> = $props();
+</script>
+
+<h1
+  bind:this={ref}
+  data-slot="page-title"
+  class={cn('ui:text-2xl ui:font-normal ui:tracking-tight', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</h1>
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '../../tools';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="page"
+  class={cn('ui:flex ui:flex-col ui:gap-4 ui:min-h-[calc(100vh-48px)]', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>