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,34 @@
+<script lang="ts">
+  import * as InputGroup from '../../base/input-group';
+  import type { ComponentProps } from 'svelte';
+  import { cn } from '../../tools';
+
+  interface Props {
+    placeholder?: string;
+    value?: string;
+    class?: string;
+    disabled?: boolean;
+    prefix?: string;
+    suffix?: string;
+  }
+
+  let {
+    placeholder = 'example.com',
+    value = $bindable(''),
+    class: className = '',
+    disabled = false,
+    prefix = 'https://',
+    suffix = '.com',
+    ...restProps
+  }: Props & Omit<ComponentProps<typeof InputGroup.Root>, 'class' | 'children'> = $props();
+</script>
+
+<InputGroup.Root class={cn('w-full', className)} data-slot="domain-input">
+  <InputGroup.Addon>
+    <InputGroup.Text>{prefix}</InputGroup.Text>
+  </InputGroup.Addon>
+  <InputGroup.Input {...restProps} {placeholder} bind:value {disabled} class="!ps-0.5" />
+  <InputGroup.Addon align="inline-end">
+    <InputGroup.Text>{suffix}</InputGroup.Text>
+  </InputGroup.Addon>
+</InputGroup.Root>
@@ -0,0 +1,5 @@
+import DomainInput from './domain-input.svelte';
+
+export { DomainInput };
+export { DomainInput as default };
+
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Content, Editor } from '@tiptap/core';
+  import type { HTMLContent, Content, Editor } from '@tiptap/core';
  import type { Transaction } from '@tiptap/pm/state';
  import { EdraEditor, EdraToolBar, EdraBubbleMenu, EdraDragHandleExtended } from './ui';
  import { slide } from 'svelte/transition';
@@ -7,7 +7,7 @@

  interface Props {
    // Content of the editor
-    content?: Content;
+    content?: HTMLContent;
    // Whether the toolbar should be visible
    showToolBar?: boolean;
    // Whether the editor is editable
@@ -25,13 +25,13 @@
    // Placeholder text for the editor
    placeholder?: string | ((node: any) => string);
    // Callback functions
-    onContentChange?: (content: Content) => void;
+    onContentChange?: (content: HTMLContent) => void;
    onEditorReady?: (editor: Editor) => void;
    onEditorDestroy?: () => void;
  }

  let {
-    content = $bindable(getDefaultContent()),
+    content = $bindable(''),
    showToolBar = true,
    editable = true,
    enablePersistence = false,
@@ -50,24 +50,6 @@
  // Browser detection
  const browser = typeof window !== 'undefined';

-  // Default content fallback
-  function getDefaultContent(): Content {
-    return {
-      type: 'doc',
-      content: [
-        {
-          type: 'paragraph',
-          content: [
-            {
-              type: 'text',
-              text: 'Start typing...'
-            }
-          ]
-        }
-      ]
-    };
-  }
-
  // Handle content persistence
  $effect(() => {
    if (enablePersistence && browser && content) {
@@ -89,9 +71,8 @@
        // Load content
        const rawContentString = localStorage.getItem(contentStorageKey);
        if (rawContentString !== null) {
-          const persistedContent: Content = JSON.parse(rawContentString);
-          console.log('persistedContent', persistedContent);
-          content = persistedContent;
+          console.log('persistedContent', rawContentString);
+          content = rawContentString;
        }

        // Load editable state
@@ -1,2 +1,2 @@
 export { default as Editor } from './editor.svelte';
-export type { Content, Editor as TiptapEditor } from '@tiptap/core';
+export type { HTMLContent, Content, Editor as TiptapEditor } from '@tiptap/core';
@@ -0,0 +1,67 @@
+<script lang="ts">
+  import * as EmptyBase from '../../base/empty';
+  import type { ComponentProps, Snippet } from 'svelte';
+  import type { Component } from 'svelte';
+  import { tv, type VariantProps } from 'tailwind-variants';
+  import { cn } from '../../tools';
+
+  const emptyVariants = tv({
+    base: 'ui:w-full',
+    variants: {
+      variant: {
+        default: '',
+        page: 'ui:h-full ui:border ui:border-dashed ui:max-w-3xl ui:max-h-2/4 ui:mx-auto'
+      }
+    }
+  });
+
+  type EmptyVariant = VariantProps<typeof emptyVariants>['variant'];
+
+  interface Props {
+    title?: string;
+    description?: string;
+    icon?: Component<any, any, any>;
+    class?: string;
+    children?: Snippet;
+    variant?: EmptyVariant;
+  }
+
+  let {
+    title,
+    description,
+    icon: IconComponent,
+    class: className = '',
+    children,
+    variant = 'default',
+    ...restProps
+  }: Props & Omit<ComponentProps<typeof EmptyBase.Root>, 'class' | 'children'> = $props();
+
+  const mergedProps = $derived({
+    class: cn(emptyVariants({ variant }), className),
+    'data-slot': 'empty',
+    'data-variant': variant,
+    ...restProps
+  });
+</script>
+
+<EmptyBase.Root {...mergedProps}>
+  <EmptyBase.Header class="">
+    {#if IconComponent}
+      <EmptyBase.Media variant="icon">
+        {@const Icon = IconComponent}
+        <Icon />
+      </EmptyBase.Media>
+    {/if}
+    {#if title}
+      <EmptyBase.Title>{title}</EmptyBase.Title>
+    {/if}
+    {#if description}
+      <EmptyBase.Description>{description}</EmptyBase.Description>
+    {/if}
+  </EmptyBase.Header>
+  {#if children}
+    <EmptyBase.Content>
+      {@render children()}
+    </EmptyBase.Content>
+  {/if}
+</EmptyBase.Root>
@@ -0,0 +1,4 @@
+import Empty from './empty.svelte';
+
+export { Empty };
+export { Empty as default };
@@ -0,0 +1,5 @@
+import Password from './password.svelte';
+
+export { Password };
+export { Password as default };
+
@@ -0,0 +1,80 @@
+<script lang="ts">
+  import * as InputGroup from '../../base/input-group';
+  import * as Tooltip from '../../base/tooltip';
+  import LockIcon from '@lucide/svelte/icons/lock';
+  import EyeIcon from '@lucide/svelte/icons/eye';
+  import EyeOffIcon from '@lucide/svelte/icons/eye-off';
+  import type { ComponentProps } from 'svelte';
+  import { cn } from '../../tools';
+
+  interface Props {
+    placeholder?: string;
+    value?: string;
+    class?: string;
+    disabled?: boolean;
+    'aria-invalid'?: 'true' | 'false' | undefined;
+    autocomplete?: string;
+    showPasswordTooltip?: string;
+    hidePasswordTooltip?: string;
+    showPasswordAriaLabel?: string;
+    hidePasswordAriaLabel?: string;
+  }
+
+  let {
+    placeholder = '************',
+    value = $bindable(''),
+    class: className = '',
+    disabled = false,
+    'aria-invalid': ariaInvalid,
+    autocomplete,
+    showPasswordTooltip = 'Show password',
+    hidePasswordTooltip = 'Hide password',
+    showPasswordAriaLabel = 'Show password',
+    hidePasswordAriaLabel = 'Hide password',
+    ...restProps
+  }: Props & Omit<ComponentProps<typeof InputGroup.Root>, 'class' | 'children'> = $props();
+
+  let showPassword = $state(false);
+
+  const tooltipText = $derived(showPassword ? hidePasswordTooltip : showPasswordTooltip);
+  const ariaLabel = $derived(showPassword ? hidePasswordAriaLabel : showPasswordAriaLabel);
+</script>
+
+<InputGroup.Root class={cn('w-full', className)} data-slot="password">
+  <InputGroup.Addon align="inline-start">
+    <LockIcon />
+  </InputGroup.Addon>
+  <InputGroup.Input
+    type={showPassword ? 'text' : 'password'}
+    {placeholder}
+    bind:value
+    {disabled}
+    aria-invalid={ariaInvalid}
+    autocomplete={autocomplete}
+    {...restProps}
+  />
+  <InputGroup.Addon align="inline-end">
+    <Tooltip.Provider>
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          {#snippet child({ props })}
+            <InputGroup.Button
+              {...props}
+              onclick={() => (showPassword = !showPassword)}
+              aria-label={ariaLabel}
+              {disabled}
+            >
+              {#if showPassword}
+                <EyeOffIcon />
+              {:else}
+                <EyeIcon />
+              {/if}
+            </InputGroup.Button>
+          {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content>{tooltipText}</Tooltip.Content>
+      </Tooltip.Root>
+    </Tooltip.Provider>
+  </InputGroup.Addon>
+</InputGroup.Root>
+
@@ -0,0 +1,5 @@
+import Search from './search.svelte';
+
+export { Search };
+export { Search as default };
+
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import * as InputGroup from '../../base/input-group';
+  import SearchIcon from '@lucide/svelte/icons/search';
+  import type { ComponentProps } from 'svelte';
+  import { cn } from '../../tools';
+
+  interface Props {
+    placeholder?: string;
+    value?: string;
+    class?: string;
+  }
+
+  let {
+    placeholder = '',
+    value = $bindable(''),
+    class: className = '',
+    ...restProps
+  }: Props & Omit<ComponentProps<typeof InputGroup.Root>, 'class' | 'children'> = $props();
+
+  const mergedProps = $derived({
+    class: cn('w-fit max-w-[200px]', className),
+    'data-slot': 'search',
+    ...restProps
+  });
+</script>
+
+<InputGroup.Root {...mergedProps}>
+  <InputGroup.Input {placeholder} bind:value />
+  <InputGroup.Addon>
+    <SearchIcon />
+  </InputGroup.Addon>
+</InputGroup.Root>