@getmicdrop/svelte-components 5.17.1 → 5.17.3

package/dist/patterns/layout/Sidebar.spec.js

@@ -1,6 +1,14 @@
-import { render } from '@testing-library/svelte';
+import { render, screen } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
 import { expect, describe, test } from 'vitest';
 import Sidebar from './Sidebar.svelte';
+import SidebarTestWrapper from './SidebarTestWrapper.svelte';
+
+function textSnippet(text) {
+  return createRawSnippet(() => ({
+    render: () => `<span>${text}</span>`
+  }));
+}
 
 describe('Sidebar Component', () => {
   test('renders a wrapper div', () => {
@@ -157,3 +165,234 @@ describe('Sidebar Combinations', () => {
     expect(children[1]).toHaveClass('lg:w-96');
   });
 });
+
+describe('Sidebar Snippet Rendering (lines 25-32)', () => {
+  test('renders sidebar snippet content when provided', () => {
+    render(SidebarTestWrapper, {
+      props: { showSidebar: true, sidebarText: 'Stats Panel' }
+    });
+
+    expect(screen.getByTestId('sidebar-content')).toBeInTheDocument();
+    expect(screen.getByTestId('sidebar-content').textContent).toBe('Stats Panel');
+  });
+
+  test('renders children snippet content when provided', () => {
+    render(SidebarTestWrapper, {
+      props: { showChildren: true, childrenText: 'Main Area' }
+    });
+
+    expect(screen.getByTestId('main-content')).toBeInTheDocument();
+    expect(screen.getByTestId('main-content').textContent).toBe('Main Area');
+  });
+
+  test('renders both sidebar and children with left position', () => {
+    render(SidebarTestWrapper, {
+      props: {
+        sidebarPosition: 'left',
+        showSidebar: true,
+        sidebarText: 'Left Sidebar',
+        showChildren: true,
+        childrenText: 'Page Content'
+      }
+    });
+
+    expect(screen.getByTestId('sidebar-content').textContent).toBe('Left Sidebar');
+    expect(screen.getByTestId('main-content').textContent).toBe('Page Content');
+  });
+
+  test('renders both sidebar and children with right position', () => {
+    render(SidebarTestWrapper, {
+      props: {
+        sidebarPosition: 'right',
+        showSidebar: true,
+        sidebarText: 'Right Sidebar',
+        showChildren: true,
+        childrenText: 'Page Body'
+      }
+    });
+
+    expect(screen.getByTestId('sidebar-content').textContent).toBe('Right Sidebar');
+    expect(screen.getByTestId('main-content').textContent).toBe('Page Body');
+  });
+
+  test('sidebar content appears inside aside element with left position', () => {
+    const { container } = render(SidebarTestWrapper, {
+      props: {
+        sidebarPosition: 'left',
+        showSidebar: true
+      }
+    });
+
+    const aside = container.querySelector('aside');
+    expect(aside).toBeInTheDocument();
+    expect(aside.querySelector('[data-testid="sidebar-content"]')).toBeInTheDocument();
+  });
+
+  test('children content appears inside main element with left position', () => {
+    const { container } = render(SidebarTestWrapper, {
+      props: {
+        sidebarPosition: 'left',
+        showChildren: true
+      }
+    });
+
+    const main = container.querySelector('main');
+    expect(main).toBeInTheDocument();
+    expect(main.querySelector('[data-testid="main-content"]')).toBeInTheDocument();
+  });
+
+  test('left position renders aside before main in DOM', () => {
+    const { container } = render(SidebarTestWrapper, {
+      props: {
+        sidebarPosition: 'left',
+        showSidebar: true,
+        showChildren: true
+      }
+    });
+
+    const wrapper = container.firstElementChild;
+    const els = wrapper.children;
+    expect(els[0].tagName).toBe('ASIDE');
+    expect(els[1].tagName).toBe('MAIN');
+  });
+
+  test('right position renders main before aside in DOM', () => {
+    const { container } = render(SidebarTestWrapper, {
+      props: {
+        sidebarPosition: 'right',
+        showSidebar: true,
+        showChildren: true
+      }
+    });
+
+    const wrapper = container.firstElementChild;
+    const els = wrapper.children;
+    expect(els[0].tagName).toBe('MAIN');
+    expect(els[1].tagName).toBe('ASIDE');
+  });
+});
+
+describe('Sidebar with Raw Snippets (lines 23, 25-32)', () => {
+  test('renders sidebar and children snippets directly with left position', () => {
+    const { container } = render(Sidebar, {
+      props: {
+        sidebarPosition: 'left',
+        sidebar: textSnippet('Side Panel'),
+        children: textSnippet('Main Panel')
+      }
+    });
+
+    const aside = container.querySelector('aside');
+    expect(aside).toBeInTheDocument();
+    expect(aside.textContent).toContain('Side Panel');
+
+    const main = container.querySelector('main');
+    expect(main).toBeInTheDocument();
+    expect(main.textContent).toContain('Main Panel');
+  });
+
+  test('renders sidebar and children snippets directly with right position', () => {
+    const { container } = render(Sidebar, {
+      props: {
+        sidebarPosition: 'right',
+        sidebar: textSnippet('Right Side'),
+        children: textSnippet('Main Body')
+      }
+    });
+
+    const aside = container.querySelector('aside');
+    expect(aside.textContent).toContain('Right Side');
+
+    const main = container.querySelector('main');
+    expect(main.textContent).toContain('Main Body');
+  });
+
+  test('renders with sidebar snippet only (no children)', () => {
+    const { container } = render(Sidebar, {
+      props: {
+        sidebar: textSnippet('Only Sidebar')
+      }
+    });
+
+    const aside = container.querySelector('aside');
+    expect(aside.textContent).toContain('Only Sidebar');
+  });
+
+  test('renders with children snippet only (no sidebar)', () => {
+    const { container } = render(Sidebar, {
+      props: {
+        children: textSnippet('Only Main')
+      }
+    });
+
+    const main = container.querySelector('main');
+    expect(main.textContent).toContain('Only Main');
+  });
+
+  test('renders with className interpolation', () => {
+    const { container } = render(Sidebar, {
+      props: {
+        class: 'test-class',
+        sidebar: textSnippet('Sidebar'),
+        children: textSnippet('Main')
+      }
+    });
+
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('test-class');
+    expect(wrapper).toHaveClass('flex');
+  });
+
+  test('renders without className (empty string default)', () => {
+    const { container } = render(Sidebar, {
+      props: {
+        sidebarPosition: 'left',
+        sidebar: textSnippet('Sidebar'),
+        children: textSnippet('Main')
+      }
+    });
+
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('flex');
+    expect(wrapper).toHaveClass('gap-6');
+  });
+
+  test('handles invalid sidebarWidth gracefully', () => {
+    const { container } = render(Sidebar, {
+      props: {
+        sidebarWidth: 'invalid',
+        sidebarPosition: 'left',
+        sidebar: textSnippet('Sidebar'),
+        children: textSnippet('Main')
+      }
+    });
+
+    // Should still render without crashing
+    const aside = container.querySelector('aside');
+    expect(aside).toBeInTheDocument();
+  });
+
+  test('handles invalid sidebarWidth on right position', () => {
+    const { container } = render(Sidebar, {
+      props: {
+        sidebarWidth: 'invalid',
+        sidebarPosition: 'right',
+        sidebar: textSnippet('Sidebar'),
+        children: textSnippet('Main')
+      }
+    });
+
+    const main = container.querySelector('main');
+    expect(main).toBeInTheDocument();
+  });
+
+  test('renders with undefined className (no class prop)', () => {
+    const { container } = render(Sidebar);
+
+    const wrapper = container.firstElementChild;
+    // className defaults to empty string, so the class should not contain undefined
+    const classAttr = wrapper.getAttribute('class');
+    expect(classAttr).not.toContain('undefined');
+    expect(classAttr).toContain('flex');
+  });
+});

package/dist/patterns/layout/Sidebar.svelte

@@ -1,39 +1,39 @@
-<script>
-  let {
-    sidebarWidth = 'medium',
-    sidebarPosition = 'right',
-    class: className = '',
-    sidebar,
-    children,
-  } = $props();
-
-  const widthClasses = {
-    narrow: 'lg:w-72',
-    medium: 'lg:w-80',
-    wide: 'lg:w-96',
-  };
-
-  const mainWidthClasses = {
-    narrow: 'lg:w-[calc(100%-18rem)]',
-    medium: 'lg:w-[calc(100%-20rem)]',
-    wide: 'lg:w-[calc(100%-24rem)]',
-  };
-</script>
-
-<div class="flex flex-col lg:flex-row gap-6 {className}">
-  {#if sidebarPosition === 'left'}
-    <aside class="w-full {widthClasses[sidebarWidth]} shrink-0">
-      {@render sidebar?.()}
-    </aside>
-    <main class="w-full {mainWidthClasses[sidebarWidth]} grow min-w-0">
-      {@render children?.()}
-    </main>
-  {:else}
-    <main class="w-full {mainWidthClasses[sidebarWidth]} grow min-w-0">
-      {@render children?.()}
-    </main>
-    <aside class="w-full {widthClasses[sidebarWidth]} shrink-0">
-      {@render sidebar?.()}
-    </aside>
-  {/if}
-</div>
+<script>
+  let {
+    sidebarWidth = 'medium',
+    sidebarPosition = 'right',
+    class: className = '',
+    sidebar,
+    children,
+  } = $props();
+
+  const widthClasses = {
+    narrow: 'lg:w-72',
+    medium: 'lg:w-80',
+    wide: 'lg:w-96',
+  };
+
+  const mainWidthClasses = {
+    narrow: 'lg:w-[calc(100%-18rem)]',
+    medium: 'lg:w-[calc(100%-20rem)]',
+    wide: 'lg:w-[calc(100%-24rem)]',
+  };
+</script>
+
+<div class="flex flex-col lg:flex-row gap-6 {className}">
+  {#if sidebarPosition === 'left'}
+    <aside class="w-full {widthClasses[sidebarWidth]} shrink-0">
+      {@render sidebar?.()}
+    </aside>
+    <main class="w-full {mainWidthClasses[sidebarWidth]} grow min-w-0">
+      {@render children?.()}
+    </main>
+  {:else}
+    <main class="w-full {mainWidthClasses[sidebarWidth]} grow min-w-0">
+      {@render children?.()}
+    </main>
+    <aside class="w-full {widthClasses[sidebarWidth]} shrink-0">
+      {@render sidebar?.()}
+    </aside>
+  {/if}
+</div>

package/dist/patterns/layout/SidebarTestWrapper.svelte

@@ -0,0 +1,34 @@
+<script>
+  import Sidebar from "./Sidebar.svelte";
+
+  /** @type {{
+    sidebarWidth?: 'narrow' | 'medium' | 'wide',
+    sidebarPosition?: 'left' | 'right',
+    class?: string,
+    showSidebar?: boolean,
+    sidebarText?: string,
+    showChildren?: boolean,
+    childrenText?: string,
+  }} */
+  let {
+    sidebarWidth = 'medium',
+    sidebarPosition = 'right',
+    class: className = '',
+    showSidebar = false,
+    sidebarText = 'Sidebar Content',
+    showChildren = false,
+    childrenText = 'Main Content',
+  } = $props();
+</script>
+
+<Sidebar {sidebarWidth} {sidebarPosition} class={className}>
+  {#snippet sidebar()}
+    {#if showSidebar}
+      <div data-testid="sidebar-content">{sidebarText}</div>
+    {/if}
+  {/snippet}
+
+  {#if showChildren}
+    <div data-testid="main-content">{childrenText}</div>
+  {/if}
+</Sidebar>

package/dist/patterns/layout/SidebarTestWrapper.svelte.d.ts

@@ -0,0 +1,23 @@
+export default SidebarTestWrapper;
+type SidebarTestWrapper = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        sidebarWidth?: "medium" | "narrow" | "wide" | undefined;
+        sidebarPosition?: "left" | "right" | undefined;
+        class?: string | undefined;
+        showSidebar?: boolean | undefined;
+        sidebarText?: string | undefined;
+        showChildren?: boolean | undefined;
+        childrenText?: string | undefined;
+    }>): void;
+};
+declare const SidebarTestWrapper: import("svelte").Component<{
+    sidebarWidth?: "narrow" | "medium" | "wide";
+    sidebarPosition?: "left" | "right";
+    class?: string;
+    showSidebar?: boolean;
+    sidebarText?: string;
+    showChildren?: boolean;
+    childrenText?: string;
+}, {}, "">;
+//# sourceMappingURL=SidebarTestWrapper.svelte.d.ts.map

package/dist/patterns/layout/SidebarTestWrapper.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarTestWrapper.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/layout/SidebarTestWrapper.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AAkDA;mBARmB,QAAQ,GAAG,QAAQ,GAAG,MAAM;sBACzB,MAAM,GAAG,OAAO;YAC1B,MAAM;kBACA,OAAO;kBACP,MAAM;mBACL,OAAO;mBACP,MAAM;WAEwC"}

package/dist/patterns/layout/index.js

@@ -1,29 +1,29 @@
-// Layout pattern components
-// Note: These are canonical exports from components/Layout/
-
-// Core layout primitives
-export { default as Grid } from '../../components/Layout/Grid.svelte';
-export { default as Section } from '../../components/Layout/Section.svelte';
-export { default as Sidebar } from '../../components/Layout/Sidebar.svelte';
-export { default as Stack } from '../../components/Layout/Stack.svelte';
-
-// Typography components
-// Note: Text is exported from components/Text.svelte (simpler API)
-// Note: Heading is exported from components/Heading.svelte (canonical export)
-// Layout/Text.svelte and Layout/Heading.svelte are internal - use the main exports
-
-// Container components
-export { default as PageContainer } from '../../components/Layout/PageContainer.svelte';
-export { default as ContentSection } from '../../components/Layout/ContentSection.svelte';
-export { default as TwoColumn } from '../../components/Layout/TwoColumn.svelte';
-
-// App shell
-export { default as AppShell } from '../../components/Layout/AppShell.svelte';
-
-// Note: EmptyState is exported from recipes/feedback to avoid naming conflict
-// Use: import { EmptyState } from '@getmicdrop/svelte-components' (from recipes)
-
-// Responsive utilities
-export { default as Responsive } from '../../components/Layout/Responsive.svelte';
-export { default as ShowOnMobile } from '../../components/Layout/ShowOnMobile.svelte';
-export { default as ShowOnDesktop } from '../../components/Layout/ShowOnDesktop.svelte';
+// Layout pattern components
+// Note: These are canonical exports from components/Layout/
+
+// Core layout primitives
+export { default as Grid } from '../../components/Layout/Grid.svelte';
+export { default as Section } from '../../components/Layout/Section.svelte';
+export { default as Sidebar } from '../../components/Layout/Sidebar.svelte';
+export { default as Stack } from '../../components/Layout/Stack.svelte';
+
+// Typography components
+// Note: Text is exported from components/Text.svelte (simpler API)
+// Note: Heading is exported from components/Heading.svelte (canonical export)
+// Layout/Text.svelte and Layout/Heading.svelte are internal - use the main exports
+
+// Container components
+export { default as PageContainer } from '../../components/Layout/PageContainer.svelte';
+export { default as ContentSection } from '../../components/Layout/ContentSection.svelte';
+export { default as TwoColumn } from '../../components/Layout/TwoColumn.svelte';
+
+// App shell
+export { default as AppShell } from '../../components/Layout/AppShell.svelte';
+
+// Note: EmptyState is exported from recipes/feedback to avoid naming conflict
+// Use: import { EmptyState } from '@getmicdrop/svelte-components' (from recipes)
+
+// Responsive utilities
+export { default as Responsive } from '../../components/Layout/Responsive.svelte';
+export { default as ShowOnMobile } from '../../components/Layout/ShowOnMobile.svelte';
+export { default as ShowOnDesktop } from '../../components/Layout/ShowOnDesktop.svelte';