Skip to content

feat: add storybook components for datetime picker and swipeable deck #50

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

feat: add storybook components for datetime picker and swipeable deck #50

wants to merge 1 commit into from

Conversation

teczopio
Copy link

@teczopio teczopio commented Sep 4, 2025

Pull Request

Description

Please provide a brief description of the changes introduced in this pull request.

Type of Change

  • 🐛 Bug fix (non-breaking change which fixes an issue)
  • ✨ New feature (non-breaking change which adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • 📚 Documentation update
  • 🔧 Configuration change
  • ⚡ Performance improvement
  • ♻️ Code refactoring

Related Issues

Closes #<issue_number>

Branch Naming

  • My branch follows the naming convention (feat/, fix/, docs/, hotfix/, etc.)
  • I'm merging to the correct base branch (features → develop, hotfixes → main)

Checklist

  • My code follows the code style of this project
  • I have performed a self-review of my code
  • I have commented my code, particularly in hard-to-understand areas
  • I have updated the documentation, if necessary
  • I have added tests that prove my fix is effective or my feature works
  • New and existing tests pass locally with my changes
  • I have checked my code with pnpm lint and pnpm test
  • My commit messages follow the conventional commit format

Screenshots (if applicable)

Additional Notes

@teczopio teczopio requested review from uozopio and mkzopio September 4, 2025 11:35
@teczopio teczopio requested review from a team as code owners September 4, 2025 11:35
@github-actions GitHub Actions
Copy link

github-actions bot commented Sep 4, 2025

🤖 Reviewers have been automatically assigned based on the CODEOWNERS file. If you need different reviewers, please update manually.

@github-actions GitHub Actions
Copy link

github-actions bot commented Sep 4, 2025 •
edited
Loading

✅ PR Size Check Passed

This PR changes 2633 lines across 6 files.

@teczopio
Copy link
Author

teczopio commented Sep 4, 2025

📄 Description

Added new UI components (.tsx) for:

datetime-picker

deck

dialog-stack

Created corresponding Storybook files (.stories.tsx) for each component to enable visual documentation and testing.

🛠 Changes

UI components: Added under packages/design-system/ui.

Storybook files: Added under devapps/storybook/stories.

github-advanced-security[bot]
github-advanced-security bot found potential problems Sep 4, 2025
View reviewed changes
packages/design-system/ui/deck.tsx
import * as React from 'react';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@repo/design-system/lib/utils';
import { ChevronLeft, ChevronRight, RotateCcw, X, Heart } from 'lucide-react';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused import ChevronRight.

Copilot Autofix

AI about 1 month ago

To resolve the "Unused import ChevronRight" issue:

  • Remove ChevronRight from the named imports on line 10: import { ChevronLeft, ChevronRight, RotateCcw, X, Heart } from 'lucide-react';.
  • No other changes are necessary, as removing unused imports does not affect code functionality.
  • This change should be made in the file packages/design-system/ui/deck.tsx, on the import statement at line 10.
Suggested changeset 1
packages/design-system/ui/deck.tsx

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/packages/design-system/ui/deck.tsx b/packages/design-system/ui/deck.tsx
--- a/packages/design-system/ui/deck.tsx
+++ b/packages/design-system/ui/deck.tsx
@@ -7,7 +7,7 @@
 import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@repo/design-system/lib/utils';
-import { ChevronLeft, ChevronRight, RotateCcw, X, Heart } from 'lucide-react';
+import { ChevronLeft, RotateCcw, X, Heart } from 'lucide-react';
 
 // Deck variants
 const deckVariants = cva(
EOF
@@ -7,7 +7,7 @@
import * as React from 'react';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@repo/design-system/lib/utils';
import { ChevronLeft, ChevronRight, RotateCcw, X, Heart } from 'lucide-react';
import { ChevronLeft, RotateCcw, X, Heart } from 'lucide-react';

// Deck variants
const deckVariants = cva(
Copilot is powered by AI and may make mistakes. Always verify output.
packages/design-system/ui/dialog-stack.tsx
throw new Error("DialogStackOverlay must be used within a DialogStack");
}

const { closeDialog, maximizeDialog, bringToFront } = context;

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused variable maximizeDialog.

Copilot Autofix

AI about 1 month ago

To fix the problem, we should remove the unused variable maximizeDialog from the destructuring assignment within the DialogStackOverlay component (line 226). Only closeDialog and bringToFront should be destructured from context, as those are the only ones referenced within the function body. The fix only involves removing maximizeDialog from the curly braces to eliminate the unused variable warning and possible confusion.

Suggested changeset 1
packages/design-system/ui/dialog-stack.tsx

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/packages/design-system/ui/dialog-stack.tsx b/packages/design-system/ui/dialog-stack.tsx
--- a/packages/design-system/ui/dialog-stack.tsx
+++ b/packages/design-system/ui/dialog-stack.tsx
@@ -223,7 +223,7 @@
       throw new Error("DialogStackOverlay must be used within a DialogStack");
     }
 
-    const { closeDialog, maximizeDialog, bringToFront } = context;
+    const { closeDialog, bringToFront } = context;
 
     const handleBackdropClick = (e: React.MouseEvent) => {
       if (e.target === e.currentTarget && dialog.closable !== false) {
EOF
@@ -223,7 +223,7 @@
throw new Error("DialogStackOverlay must be used within a DialogStack");
}

const { closeDialog, maximizeDialog, bringToFront } = context;
const { closeDialog, bringToFront } = context;

const handleBackdropClick = (e: React.MouseEvent) => {
if (e.target === e.currentTarget && dialog.closable !== false) {
Copilot is powered by AI and may make mistakes. Always verify output.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@uozopio uozopio Awaiting requested review from uozopio

@mkzopio mkzopio Awaiting requested review from mkzopio

At least 1 approving review is required to merge this pull request.

Assignees

@teczopio teczopio

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@teczopio