feat:Drawer

[ghost]

Description of change

Built a drawer

Issue Number

closes #151

Type of change

• New (a change which implements a new feature)

How the change has been tested

CI and Manual

Change checklist

• I have ensured that the CI Checks pass locally
• I have removed any unnecessary logic
• My code is well documented
• I have signed my commits
• My code follows the pattern of the application
• I have self reviewed my code

Summary by CodeRabbit

• New Features

  • Introduced a new Drawer UI component with interactive swipe and click-outside-to-close functionality.
  • Added a Storybook story and reusable content snippet to showcase and document the Drawer component.
  • Made the Drawer component available for import from the central fragments module.

• Style

  • Improved formatting and style consistency in the Input component's Storybook stories.

• Chores

  • Added development dependencies for CupertinoPane and svelte-gestures libraries.
  • Updated the title property in the Post component's Storybook story for improved organization.

[coderabbitai]

"""

Walkthrough

A new Drawer UI component utilizing the CupertinoPane library has been introduced to the metagram platform. Supporting changes include its export from the fragments module, a Storybook story for demonstration, a reusable snippet for drawer content, and the addition of the CupertinoPane and svelte-gestures libraries as development dependencies. A utility for detecting outside clicks was added and integrated. Minor stylistic updates were made to other Storybook files.

Changes

Files/Paths	Change Summary
platforms/metagram/package.json	Added "cupertino-pane" and "svelte-gestures" as devDependencies.
platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte	Introduced new Drawer component using CupertinoPane with swipe and outside click handling.
platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.ts	Added Storybook story for Drawer component, with metadata and basic usage example.
platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.snippet.svelte	Added reusable snippet exporting DrawerContent for drawer usage.
platforms/metagram/src/lib/fragments/index.ts	Exported Drawer component from fragments module.
platforms/metagram/src/lib/utils/clickOutside.ts	Added clickOutside utility to detect clicks outside a given node and trigger callback.
platforms/metagram/src/lib/utils/index.ts	Re-exported clickOutside utility from utils index module.
platforms/metagram/src/lib/fragments/Post/Post.stories.ts	Changed Storybook export title from 'Fragments/Post' to 'ui/Post'.
platforms/metagram/src/lib/ui/Input/Input.stories.ts	Reformatted and restyled Storybook stories for Input component; no logic changes.

Sequence Diagram(s)

sequenceDiagram
    participant App
    participant DrawerComponent
    participant CupertinoPane
    participant clickOutsideUtil

    App->>DrawerComponent: Mount with isPaneOpen=true
    DrawerComponent->>CupertinoPane: Initialize with config (backdrop, animation, breakpoints)
    CupertinoPane-->>DrawerComponent: Drawer instance ready
    DrawerComponent->>CupertinoPane: Present drawer
    CupertinoPane-->>App: Drawer UI displayed
    App->>DrawerComponent: User swipes down or clicks outside
    DrawerComponent->>clickOutsideUtil: Detect outside click
    clickOutsideUtil-->>DrawerComponent: Notify outside click
    DrawerComponent->>CupertinoPane: Dismiss drawer with animation
    DrawerComponent->>App: Update isPaneOpen state and invoke handleSwipe callback

Loading

Assessment against linked issues

Objective	Addressed	Explanation
Build a Drawer with cupertino pane (#151)	✅

Poem

A pane slides up, so smooth and bright,
The Drawer appears, a cozy sight.
With Cupertino style and gentle flair,
It brings new polish everywhere.
🐇✨
Now stories show what drawers do—
A hop ahead, this code feels new!
"""

✨ Finishing Touches

• 📝 Generate Docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 3

🧹 Nitpick comments (2)

platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.ts (1)

4-12: Standardize story title casing
The title is currently 'UI/Drawer', whereas the Post story uses 'ui/Post'. To maintain a consistent namespace, please choose one casing convention (e.g. uppercase UI/... across all stories) and apply it uniformly.

platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte (1)

1-25: Consider adding TypeScript types for the component props and events

The component uses TypeScript but doesn't define or leverage types for its API surface, which could lead to usage errors and makes it harder for consumers to understand the component's interface.

Add proper TypeScript interfaces:

<script lang="ts">
	import { onMount } from 'svelte';
	import { CupertinoPane } from 'cupertino-pane';
+
+	// Define types for component props
+	type BreakpointType = 'top' | 'middle' | 'bottom';
+	
+	// Define interfaces for configurations
+	interface DrawerConfig {
+		showDraggable?: boolean;
+		backdropOpacity?: number;
+		initialBreak?: BreakpointType;
+		animationType?: string;
+		animationDuration?: number;
+		bottomClose?: boolean;
+		cssClass?: string;
+	}

	let drawerElement: HTMLElement;
	let drawer: CupertinoPane;

	onMount(() => {
		if (!drawerElement) return;
		drawer = new CupertinoPane(drawerElement, {
			showDraggable: false,
			backdrop: true,
			backdropBlur: true,
			backdropOpacity: 0.4,
			animationType: 'ease',
			animationDuration: 300,
			bottomClose: true,
			buttonDestroy: false,
			cssClass: '',
			initialBreak: 'middle'
		});

		drawer.present();
	});
</script>

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Cache: Disabled due to data retention organization setting
Knowledge Base: Disabled due to data retention organization setting

📥 Commits

Reviewing files that changed from the base of the PR and between 2d77b9c and 97aa15a.

📒 Files selected for processing (6)

• platforms/metagram/package.json (1 hunks)
• platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.ts (1 hunks)
• platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte (1 hunks)
• platforms/metagram/src/lib/fragments/Post/Post.stories.ts (1 hunks)
• platforms/metagram/src/lib/fragments/index.ts (1 hunks)
• platforms/metagram/src/lib/ui/Input/Input.stories.ts (1 hunks)

🧰 Additional context used

🪛 GitHub Actions: Check Format

platforms/metagram/package.json

[error] 1-1: pnpm install failed due to outdated pnpm-lock.yaml. Lockfile dependencies do not match package.json specs. Use 'pnpm install --no-frozen-lockfile' to bypass.

🪛 GitHub Actions: Check Code

platforms/metagram/package.json

[error] 1-1: pnpm install failed due to outdated lockfile. The pnpm-lock.yaml is not up to date with package.json dependencies. Run 'pnpm install --no-frozen-lockfile' to update the lockfile.

🔇 Additional comments (12)

platforms/metagram/src/lib/ui/Input/Input.stories.ts (7)

1-10: Consistent style update for default export
The import and default export have been reformatted to use single quotes and tabs, aligning with the project’s Storybook conventions. No functional changes introduced.

---

14-17: Consistent story formatting for Text
Switched to single quotes and tab indentation. Behavior remains unchanged.

---

21-24: Consistent story formatting for Tel
Purely stylistic refactor—single quotes and tabs.

---

28-31: Consistent story formatting for NumberInput
Reformatted only. Good to merge.

---

35-38: Consistent story formatting for Email
Style-only changes, switching to single quotes and proper indentation.

---

42-46: Consistent story formatting for Invalid
Stylistic update only; functionality unaffected.

---

50-53: Consistent story formatting for Password
Purely style adjustments—tabs and single quotes.

platforms/metagram/src/lib/fragments/Post/Post.stories.ts (1)

5-5: Story title updated for consistency
Changing from 'Fragments/Post' to 'ui/Post' aligns this story under the UI namespace.

platforms/metagram/src/lib/fragments/index.ts (1)

5-5: Export new Drawer component
Including Drawer in the central fragments index makes the component accessible project-wide. Path and naming look correct.

platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.ts (2)

1-2: Imports for drawer story
Correctly importing ComponentProps and Drawer from the fragments index.

---

14-16: Basic Main story definition
Minimal args: {} story is fine for an interactive demo.

platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte (1)

8-24:

❓ Verification inconclusive

Add error handling for drawer initialization and actions

The current implementation doesn't include error handling, which could lead to unhandled exceptions if the CupertinoPane library fails to initialize or encounters errors during operations.

Consider adding try/catch blocks to handle potential errors:

onMount(() => {
	if (!drawerElement) return;
+	try {
		drawer = new CupertinoPane(drawerElement, {
			showDraggable: false,
			backdrop: true,
			backdropBlur: true,
			backdropOpacity: 0.4,
			animationType: 'ease',
			animationDuration: 300,
			bottomClose: true,
			buttonDestroy: false,
			cssClass: '',
			initialBreak: 'middle'
		});

		drawer.present();
+	} catch (error) {
+		console.error('Failed to initialize drawer:', error);
+		// Consider dispatching an event to notify parent component of the failure
+	}
});

Please verify that the CupertinoPane library behaves as expected in error situations:

---

🏁 Script executed:

#!/bin/bash
# Check CupertinoPane documentation for error handling
rg -A 3 -B 3 "error|exception|throw|try|catch" node_modules/cupertino-pane/README.md

Length of output: 164

---

Add error handling around CupertinoPane initialization

• File: platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte (lines 8–24)

The onMount block currently assumes new CupertinoPane(...) and drawer.present() will always succeed. If the library throws (for example, due to invalid options or DOM issues), the app could crash. Wrap these calls in a try/catch to guard against unexpected failures:

 onMount(() => {
     if (!drawerElement) return;
+    try {
         drawer = new CupertinoPane(drawerElement, {
             showDraggable: false,
             backdrop: true,
             backdropBlur: true,
             backdropOpacity: 0.4,
             animationType: 'ease',
             animationDuration: 300,
             bottomClose: true,
             buttonDestroy: false,
             cssClass: '',
             initialBreak: 'middle'
         });
 
         drawer.present();
+    } catch (error) {
+        console.error('Failed to initialize or present drawer:', error);
+        // Optionally dispatch an event or show a fallback UI
+    }
 });

Please manually verify in the CupertinoPane documentation or by testing edge cases whether new CupertinoPane() or present() can throw errors, and adjust the handling logic accordingly.

[coderabbitai]

⚠️ Potential issue

New devDependency added—lockfile update required
You’ve added "cupertino-pane": "^1.4.22" under devDependencies, but CI is failing due to an out-of-date pnpm-lock.yaml. Please run pnpm install --no-frozen-lockfile (or the equivalent command) to regenerate the lockfile and commit the updated lockfile so that the pipeline passes.

🤖 Prompt for AI Agents

In platforms/metagram/package.json at line 35, you added "cupertino-pane" as a
new devDependency but did not update the pnpm lockfile. To fix this, run `pnpm
install --no-frozen-lockfile` locally to regenerate the pnpm-lock.yaml file and
then commit the updated lockfile along with your changes to ensure the CI
pipeline passes.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (3)

platforms/metagram/src/lib/utils/clickOutside.ts (3)

4-4: Consider adding null checking before the type assertion.

For improved type safety, you might want to check that event.target is not null before casting it to Node.

- if (node && !node.contains(event.target as Node) && !event.defaultPrevented) {
+ if (node && event.target && !node.contains(event.target as Node) && !event.defaultPrevented) {

---

10-10: Consider using options object for addEventListener.

Modern browsers support an options object as the third parameter which provides more flexibility. While using the boolean for capture works perfectly fine, using an options object makes the code more explicit.

- document.addEventListener('click', handleClick, true);
+ document.addEventListener('click', handleClick, { capture: true });

And similar change for the removeEventListener in the destroy method.

---

2-17: Consider adding support for keyboard events.

For improved accessibility, you might want to extend this utility to also handle keyboard events (specifically Escape key presses) which would help users who navigate via keyboard to dismiss the drawer.

- export const clickOutside = (node: HTMLElement, callback: () => void) => {
+ export const clickOutside = (node: HTMLElement, callback: () => void, options = { handleEscape: true }) => {
  const handleClick = (event: Event) => {
    if (node && !node.contains(event.target as Node) && !event.defaultPrevented) {
      callback(); // Call the provided callback
      node.dispatchEvent(new CustomEvent('click_outside'));
    }
  };
+  
+  const handleKeydown = (event: KeyboardEvent) => {
+    if (options.handleEscape && event.key === 'Escape' && !event.defaultPrevented) {
+      callback(); // Call the provided callback
+      node.dispatchEvent(new CustomEvent('click_outside'));
+    }
+  };

  document.addEventListener('click', handleClick, true);
+  if (options.handleEscape) {
+    document.addEventListener('keydown', handleKeydown, true);
+  }

  return {
    destroy() {
      document.removeEventListener('click', handleClick, true);
+      if (options.handleEscape) {
+        document.removeEventListener('keydown', handleKeydown, true);
+      }
    }
  };
};

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Cache: Disabled due to data retention organization setting
Knowledge Base: Disabled due to data retention organization setting

📥 Commits

Reviewing files that changed from the base of the PR and between 97aa15a and a40ea25.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (6)

• platforms/metagram/package.json (2 hunks)
• platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.snippet.svelte (1 hunks)
• platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.ts (1 hunks)
• platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte (1 hunks)
• platforms/metagram/src/lib/utils/clickOutside.ts (1 hunks)
• platforms/metagram/src/lib/utils/index.ts (1 hunks)

✅ Files skipped from review due to trivial changes (2)

• platforms/metagram/src/lib/utils/index.ts
• platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.snippet.svelte

🚧 Files skipped from review as they are similar to previous changes (3)

• platforms/metagram/package.json
• platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.ts
• platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte

🔇 Additional comments (1)

platforms/metagram/src/lib/utils/clickOutside.ts (1)

1-17: Well-implemented utility function with proper cleanup.

This is a clean implementation of a click-outside detection utility that follows best practices:

• Clear documentation
• Proper event listener cleanup to prevent memory leaks
• Thoughtful event handling with checks for both containment and defaultPrevented
• Follows the Svelte action pattern perfectly with the return of a destroy method

[JulienAuvo]

I love your prose