@widgetic/design-system 0.3.68

package/dist/components/modals/BaseModal.svelte

@@ -0,0 +1,409 @@
+<script lang="ts">
+  // Svelte imports
+  import { fade, scale } from 'svelte/transition';
+  import { cubicOut } from 'svelte/easing';
+  import { createEventDispatcher, onMount } from 'svelte';
+  const dispatch = createEventDispatcher();
+
+  // Design system componentsimports
+  import { Button, WScrollArea, Portal } from '..';
+  import { IconX } from '../../icons';
+
+  // Modal store
+  import { modalState, openModal, closeModal } from './modalStore';
+
+  /* COMPONENT PROPS */
+  // class and style props
+  let className = '';
+  export { className as class };
+  export let style: string = '';
+  // modal dimensions
+  export let width: string = '808px';
+  export let height: string = '500px';
+  // modal props
+  export let modalType: string | undefined = undefined;
+  export let modalData: any = undefined;  
+  // portal target
+  export let target: string = '';
+  // title props
+  export let title: string | undefined = undefined;
+  export let titlePadding: 'small' | 'large' = 'large';
+  // modal state props
+  export let open = false;
+  export let enableSpaceKey = false;
+  export let isSelected = false;
+  export let showScroll = false;
+
+  // children prop(svelte 5) to replace the traditional slot(svelte 4)
+  export let children: any;
+
+  /* CONSTANTS */
+  // Modal transition and style variables
+  const transitionDuration = 200;
+  const backdropOpacity = '0.4';
+  const backdropBlur = '4px';
+  const easing = cubicOut;
+
+  // Update constants for modal constraints
+  const PADDING = 24; // Consistent padding for sides and bottom
+
+  /* STATE VARIABLES */
+  // Add viewport dimension state
+  let viewportWidth = 0;
+  let viewportHeight = 0;
+
+  // Modal vars
+  let modalHeight = 0; // Height of the modal including borders that's why binded to offsetHeight
+  
+
+  // All Content Container vars
+  const contentPadding = 16;
+  let allContentHeight = 0;
+  $: allContentHeight = 2 * contentPadding + titleHeight + contentHolderHeight;
+  
+  // Title vars
+  let titleHeight = 0;
+
+  // Content only vars
+  let contentHolderHeight = 0;
+  $: contentAvailableHeight = modalHeight - (2 * contentPadding + titleHeight);
+  let updateContentDimInterval:any;
+
+  // Show logs
+  let showLogs = false;
+
+
+  /* METHODS */
+  function toggleUpdateContentDimensions(flag: boolean = true) {
+    if (!flag) {
+      clearInterval(updateContentDimInterval);
+      updateContentDimInterval = undefined;
+    } else {
+      // updateContentDimInterval = setInterval(() => {updateViewportDimensions()}, 200);
+    }
+  }
+
+  /** 
+   * LIFECYCLE HOOKS 
+   * */
+  // Check stored state on mount and reopen if needed
+  onMount(() => {
+    if ($modalState.isOpen && !open) {
+      if(showLogs) console.log('Checking modal restoration:', {
+        currentType: modalType,
+        storedType: $modalState.modalType,
+        storedData: $modalState.data
+      });
+      
+      // Only reopen if this is the correct modal type
+      if ($modalState.modalType === modalType) {
+        if(showLogs) console.log('Restoring modal state for:', modalType);
+        open = true;
+        modalData = $modalState.data;
+        dispatch('restore', $modalState.data);
+      }
+    }
+
+    // Initialize update content dimensions
+    // updateViewportDimensions();
+
+    // Add keydown listener
+    window.addEventListener('keydown', handleKeydown);    
+    
+    // Add resize listener
+    // window.addEventListener('resize', updateViewportDimensions);
+    
+    return () => {
+      // window.removeEventListener('resize', updateViewportDimensions);
+      window.removeEventListener('keydown', handleKeydown);
+
+      // Close the modal if it is open
+      if (open) {
+        closeModal();
+        toggleUpdateContentDimensions(false);
+      }
+    };
+  });
+
+  // Function to update viewport dimensions
+  function updateViewportDimensions() {// not used anymore
+    // read window width and height
+    // viewportWidth = window.innerWidth;
+    // viewportHeight = window.innerHeight;
+
+    // update the conetent holder height
+    // setTimeout(() => {
+      allContentHeight = 2 * contentPadding + titleHeight + contentHolderHeight;
+      if(showLogs) console.log('Modal current height:', allContentHeight);
+      // let availableHeight = modalHeight - 2 * contentPadding;
+      // if(showLogs) console.log('Modal current height:', allContentHeight, availableHeight);
+      // contentHolderHeight = allContentHeight > availableHeight ? (availableHeight - titleHeight) + 'px' : 'auto';
+      // modalFinalHeight = titleHeight + contentHeight + 2 * PADDING;
+      // if(showLogs) console.log('Modal current height:', modalHeight, modalFinalHeight);
+      // modalFinalHeight = Math.min(modalHeight, contentCurrentHeight);
+    // }, 10);
+    // if(showLogs) console.log('Updating viewport dimensions:', viewportWidth, viewportHeight);
+  }
+
+  // Reactive Statement to Calculate dynamic modal position and dimensions
+  $: modalStyle = (() => {
+    if (viewportWidth === 0 || viewportHeight === 0) {
+      // Return default styles during SSR
+      return {
+        width: width,
+        height: height,
+        maxWidth: `calc(100vw - ${2 * PADDING}px)`,
+        maxHeight: `calc(100vh - ${2 * PADDING}px)`,
+        top: '50%',
+        transform: 'translateY(-50%)'
+      };
+    }
+    
+    // Parse provided dimensions
+    const providedWidth = parseInt(width);
+    const providedHeight = parseInt(height);
+    
+    // Calculate maximum dimensions
+    const maxWidth = viewportWidth - (2 * PADDING);
+    const maxHeight = viewportHeight - (2 * PADDING);
+    
+    // Calculate actual dimensions
+    const actualWidth = Math.min(providedWidth, maxWidth);
+    const actualHeight = Math.min(providedHeight, maxHeight);
+    
+    // If the actual height is less than maxHeight, center it vertically(but ensure it never goes above PADDING
+    const centeredTop = Math.max(PADDING, (viewportHeight - actualHeight) / 2);
+    
+    // Return the calculated styles
+    return {
+      width: `${actualWidth}px`,
+      height: `${actualHeight}px`,
+      maxWidth: `${maxWidth}px`,
+      maxHeight: `${maxHeight}px`,
+      top: `${centeredTop}px`,
+      transform: 'none'
+    };
+  })();
+
+  function handleKeydown(event: KeyboardEvent) {
+    // Only log keyboard events that we actually handle
+    if (['Backspace', 'Escape', 'Space'].includes(event.key)) {
+      if(showLogs) console.log('Modal handling key:', event.key, 'Target:', (event.target as HTMLElement).tagName);
+    }
+    
+    const target = event.target as HTMLElement;
+    const isInput = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
+
+    // Let input fields handle their own events
+    if (isInput) {
+      return;
+    }
+    
+    // Prevent backspace navigation when not in input
+    if (event.key === 'Backspace') {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+
+    if (event.key === 'Escape') {
+      handleClose();
+    }
+
+    if (enableSpaceKey && open && event.code === 'Space') {
+      event.preventDefault();
+      event.stopPropagation();
+      dispatch('spaceKey');
+    }
+  }
+
+  function handleClose() {
+    if(showLogs) console.log('handleClose');
+
+    // change the open state to false
+    open = false;
+    
+    // Close the modal
+    closeModal();
+
+    // Stop updating the content dimensions
+    toggleUpdateContentDimensions(false);
+
+    // Dispatch close event
+    dispatch('close');
+  }
+
+  // Only update the modal store when the open state actually changes
+  let previousOpen = open;
+  $: if (open !== previousOpen) {
+    previousOpen = open;
+    
+    if(showLogs) console.log('Modal open state changed:', { open, modalType, modalData });
+    
+    // Open the modal if the open state is true
+    if (open) {
+      openModal(modalType, modalData);
+      toggleUpdateContentDimensions(true);
+    } else {
+      closeModal();
+      toggleUpdateContentDimensions(false);
+    }
+  }
+
+  // Improved backdrop click handler
+  function handleBackdropClick(event: MouseEvent) {
+    // Prevent any propagation
+    event.preventDefault();
+    event.stopPropagation();
+    
+    // Only handle clicks directly on the backdrop
+    if (event.target === event.currentTarget) {
+      if(showLogs) console.log('Modal backdrop clicked!', event.type);
+      handleClose();
+    }
+  }
+</script>
+
+{#if open}
+  <Portal class="{className ? className + ' ' : ''}base-modal-portal" 
+          target={target || `modal-${modalType || 'default'}`}
+          style={style}
+          bind:clientWidth={viewportWidth}
+          bind:clientHeight={viewportHeight}
+  >
+      <!-- Backdrop Container with blur restricted to file browser -->
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <div 
+        class="modal-backdrop-container absolute inset-0 pointer-events-auto"
+        style="background-color: rgba(15, 32, 16, {backdropOpacity}); backdrop-filter: blur({backdropBlur}); z-index: 999;"
+        
+        transition:fade={{ duration: transitionDuration, easing }}
+        on:mousedown={handleBackdropClick}
+        on:click={handleBackdropClick}
+      ></div>
+
+      <!-- Close button -->
+      <div class="modal-close-bt-container absolute top-4 right-4 z-[1004]" transition:fade={{ duration: transitionDuration, easing }}>
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
+        <div 
+          class="close-button widgetic-colors p-0 w-10 h-10 bg-[hsl(var(--dark))] hover:bg-[hsl(var(--grey6))] transition-colors duration-200 rounded-full flex items-center justify-center cursor-pointer" 
+          on:click|stopPropagation|preventDefault={handleClose}
+          aria-label="Close modal"
+          role="button"
+          tabindex="0"
+        >
+          <IconX class="!w-[24px] !h-[24px] text-white" />
+        </div>
+      </div>
+
+      <!-- Modal Main Container -->
+      <div 
+        class="modal-root-container absolute w-full h-full inset-x-0 flex justify-center pointer-events-none items-center"
+        style="z-index: 1000;"
+      >
+        <!-- Modal Content Container -->
+        <div 
+          class="modal-content-inner-container fixed pointer-events-auto mx-6 overflow-hidden
+                 bg-white modal-shadow widgetic-colors rounded-medium widgetic-radius
+                 border select-text {isSelected && modalType === 'filePreview' ? 'border-[hsl(var(--grey1))]' : 'border-[hsl(var(--grey1))]'}"
+          style="
+            width: {modalStyle.width};
+            height: {allContentHeight}px;
+            min-width: {2 * contentPadding + 100}px;
+            min-height: {2 * contentPadding + 50}px;
+            max-width: {modalStyle.maxWidth};
+            max-height: {modalStyle.maxHeight};
+            padding: {contentPadding}px 0;
+            user-select: text;
+            -webkit-user-select: text;
+            -moz-user-select: text;
+            -ms-user-select: text;
+            z-index: 1003;
+          "
+          bind:offsetHeight={modalHeight}
+          in:scale={{ duration: transitionDuration, start: 0.95, opacity: 0, easing }}
+          out:scale={{ duration: transitionDuration, start: 0.95, opacity: 0, easing }}
+          on:click|stopPropagation
+        >
+                <!-- Content Title -->
+                {#if title}
+                  <div bind:clientHeight={titleHeight} 
+                       class="modal-title-container h5 text-[hsl(var(--grey7))] overflow-hidden
+                              text-center px-4 {titlePadding === 'small' ? 'pb-2' : 'pb-4'}">
+                    {title}
+                  </div>
+                {/if}
+
+                <!-- Content Slot Container -->
+                {#snippet contentSlot()}
+                  <div class="modal-content-slot-container w-full" bind:clientHeight={contentHolderHeight}>
+                    {@render children()}
+                  </div>
+                {/snippet}
+
+                <!-- Content with Scroll Area -->
+                {#if showScroll}
+                <WScrollArea class="modal-content-container scroll-container" type="always" scrollOutside={true}
+                  style="height: {contentAvailableHeight}px"
+                >
+                  {@render contentSlot()}                
+                </WScrollArea>
+                {:else}
+                  <div class="modal-content-container" 
+                  style="height: {contentAvailableHeight}px;"
+                  >
+                    {@render contentSlot()}
+                  </div>
+                {/if}
+
+        </div>
+      </div>
+  </Portal>
+{/if}
+
+<style>
+  .modal-content-container {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  /* Add specific styling for the backdrop to ensure it captures all clicks */
+  .modal-backdrop-container {
+    pointer-events: all !important;
+  }
+
+  :global(.ScrollAreaViewport) {
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+  }
+
+  :global(.ScrollAreaScrollbar[data-state='hidden']) {
+    display: none;
+  }
+
+  /* Ensure text selection works in modals */
+  :global(.base-modal-portal),
+  :global(.modal-content-inner-container),
+  :global(.modal-content-root-container) {
+    user-select: text !important;
+    -webkit-user-select: text !important;
+    -moz-user-select: text !important;
+    -ms-user-select: text !important;
+  }
+
+  /* Ensure text selection works in input fields */
+  :global(.base-modal-portal input),
+  :global(.base-modal-portal textarea),
+  :global(.base-modal-portal select),
+  :global(.base-modal-portal [contenteditable="true"]) {
+    user-select: text !important;
+    -webkit-user-select: text !important;
+    -moz-user-select: text !important;
+    -ms-user-select: text !important;
+    cursor: text !important;
+  }
+</style>

package/dist/components/modals/BaseModal.svelte.d.ts

@@ -0,0 +1,38 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const BaseModal: $$__sveltets_2_IsomorphicComponent<{
+    class?: string;
+    style?: string;
+    width?: string;
+    height?: string;
+    modalType?: string | undefined;
+    modalData?: any;
+    target?: string;
+    title?: string | undefined;
+    titlePadding?: "small" | "large";
+    open?: boolean;
+    enableSpaceKey?: boolean;
+    isSelected?: boolean;
+    showScroll?: boolean;
+    children: any;
+}, {
+    click: MouseEvent;
+    restore: CustomEvent<any>;
+    spaceKey: CustomEvent<any>;
+    close: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type BaseModal = InstanceType<typeof BaseModal>;
+export default BaseModal;

package/dist/components/modals/NewItemDialog.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+  // Svelte imports
+  import { createEventDispatcher } from 'svelte';
+  const dispatch = createEventDispatcher();
+
+  // Design system imports
+  import { Button } from '../ui/button';
+  import { Input } from '../ui/input';
+  import { toast } from '../ui/sonner';
+  // Import BaseModal as a default import using relative path, similar to RenameDialog
+  import BaseModal from './BaseModal.svelte';
+
+  // Props
+  let className = '';
+  export { className as class };
+  export let style: string = '';
+  //
+  export let isOpen = false;
+  export let title = ''; // Make title optional
+  export let showTitle = true; // Whether to show a title at all
+  export let itemType = "item"; // "folder", "file", "project", etc.
+  export let placeholder = `${itemType} name...`;
+  export let target: string = 'new-item-dialog'; // target for Portal
+  export let currentPath: string[] = [];
+  export let currentPathNames: string[] = [];
+  export let confirmLabel = "Create";
+  export let cancelLabel = "Cancel";
+  export let modalType: string = "newItem";
+  export let modalWidth = "410px";
+  export let modalHeight = "168px";
+  export let maxLength = 200;
+  export let modalData: Record<string, any> = {};
+
+  // Local state
+  let itemName = '';
+  let isValid = false;
+  let hasAttemptedSubmit = false; // Track if user has attempted to submit
+
+  // Compute title based on itemType if not provided
+  $: displayTitle = title || `New ${itemType.charAt(0).toUpperCase() + itemType.slice(1)}`;
+
+  $: if (isOpen) {
+    itemName = '';
+    hasAttemptedSubmit = false;
+  }
+
+  $: {
+    isValid = itemName.trim().length > 0 && itemName.length <= maxLength;
+  }
+
+  function handleSubmit() {
+    hasAttemptedSubmit = true;
+    
+    if (!itemName.trim() || itemName.length < 1) {
+      // Show error toast for empty item name
+      toast.error(`Invalid ${itemType} name`, {
+        description: `Please enter a ${itemType} name`
+      });
+      return;
+    }
+    
+    if (itemName.length > maxLength) {
+      // Show error toast for name too long
+      toast.error(`Invalid ${itemType} name`, {
+        description: `${itemType} name cannot exceed ${maxLength} characters`
+      });
+      return;
+    }
+    
+    console.log(`Creating ${itemType}:`, { itemName, path: currentPath });
+    dispatch('create', { itemName: itemName.trim(), path: currentPath });
+    handleClose();
+  }
+
+  function handleClose() {
+    isOpen = false;
+    itemName = '';
+    isValid = false;
+    hasAttemptedSubmit = false;
+    dispatch('cancel');
+  }
+
+  // Combine the custom modal data with our required path info
+  $: combinedModalData = { 
+    ...modalData,
+    currentPath, 
+    currentPathNames 
+  };
+</script>
+
+<BaseModal 
+  bind:open={isOpen} 
+  on:close={handleClose}
+  width={modalWidth}
+  height={modalHeight}
+  {modalType}
+  modalData={combinedModalData}
+  title={showTitle ? displayTitle : undefined}
+  {target}
+  on:restore={(event: CustomEvent<any>) => {
+    if (event.detail) {
+      if (event.detail.currentPath) currentPath = event.detail.currentPath;
+      if (event.detail.currentPathNames) currentPathNames = event.detail.currentPathNames;
+    }
+  }}
+>
+  <div class="{className ? `${className} ` : ''}new-item-dialog-container h-full flex flex-col min-h-[136px] justify-between" style={style}>
+    <div class="flex flex-col items-center pt-6">
+      <!-- Replace Input component with native input to match RenameDialog styling -->
+      <input 
+        type="text"
+        bind:value={itemName}
+        onkeydown={(e) => {
+          if (e.key === 'Escape') {
+            handleClose();
+          } else {
+            e.stopPropagation(); // Stop all keyboard events except Escape from bubbling up
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              handleSubmit();
+            }
+          }
+        }}
+        onfocus={(e) => {
+          const target = e.target as HTMLInputElement;
+          target.placeholder = "";
+        }}
+        onblur={(e) => {
+          const target = e.target as HTMLInputElement;
+          target.placeholder = placeholder;
+        }}
+        required
+        class="w-full h5 text-[24px] text-[hsl(var(--grey7))] text-center
+               bg-transparent border-none focus:outline-none focus:ring-0
+               placeholder:text-[24px] placeholder:text-[hsl(var(--grey3))]
+               {!isValid && hasAttemptedSubmit ? 'input-error' : ''}"
+        placeholder={placeholder}
+        maxlength={maxLength}
+        data-min-length="1"
+      />
+      {#if !isValid && hasAttemptedSubmit}
+        <div class="text-xs text-[hsl(var(--error))] mt-1">
+          Please enter a valid {itemType} name
+        </div>
+      {/if}
+    </div>
+
+    <div class="buttons-container flex justify-center gap-4">
+      <Button 
+        type="button" 
+        variant="secondary"
+        class="modal-btn-secondary !rounded-[100px] !h-[34px]" 
+        onclick={handleClose}
+      >
+        {cancelLabel}
+      </Button>
+      <Button 
+        type="submit" 
+        class="modal-btn-primary !rounded-[100px] !h-[34px]"
+        onclick={handleSubmit}
+        disabled={!isValid}
+      >
+        {confirmLabel}
+      </Button>
+    </div>
+  </div>
+</BaseModal>
+
+<style>
+  @keyframes pulse-subtle {
+    0%, 100% { opacity: 0; }
+    50% { opacity: 0.1; }
+  }
+
+  :global(.animate-pulse-subtle) {
+    animation: pulse-subtle 2s ease-in-out infinite;
+  }
+
+  :global(.input-error) {
+    animation: shake 0.4s ease-in-out;
+    border-bottom: 1px solid hsl(var(--error)) !important;
+  }
+
+  @keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    25% { transform: translateX(-5px); }
+    75% { transform: translateX(5px); }
+  }
+</style> 

package/dist/components/modals/NewItemDialog.svelte.d.ts

@@ -0,0 +1,39 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const NewItemDialog: $$__sveltets_2_IsomorphicComponent<{
+    class?: string;
+    style?: string;
+    isOpen?: boolean;
+    title?: string;
+    showTitle?: boolean;
+    itemType?: string;
+    placeholder?: string;
+    target?: string;
+    currentPath?: string[];
+    currentPathNames?: string[];
+    confirmLabel?: string;
+    cancelLabel?: string;
+    modalType?: string;
+    modalWidth?: string;
+    modalHeight?: string;
+    maxLength?: number;
+    modalData?: Record<string, any>;
+}, {
+    create: CustomEvent<any>;
+    cancel: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type NewItemDialog = InstanceType<typeof NewItemDialog>;
+export default NewItemDialog;