feat(AlertDialog): add new AlertDialog composites

.changeset/open-poems-return.md

@@ -0,0 +1,5 @@
+---
+'@vapor-ui/composites': patch
+---
+
+add composite `AlertDialog` component

.github/workflows/test-regressions.yml

@@ -1,4 +1,4 @@
-name: 'Visual Regression'
+name: "Visual Regression"
 
 on:
     workflow_dispatch:
@@ -18,7 +18,7 @@ env:
     AWS_REGION: ${{ secrets.AWS_REGION }}
     AWS_IAM_ROLE_NAME: ${{ secrets.AWS_IAM_ROLE_NAME }}
     AWS_IAM_ROLE_SESSION_NAME: ${{ secrets.AWS_IAM_ROLE_SESSION_NAME }}
-    REPORT_PATH: ''
+    REPORT_PATH: ""
     TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
     TURBO_TEAM: ${{ vars.TURBO_TEAM }}
 
@@ -158,19 +158,25 @@ jobs:
                       DURATION="Unknown"
                   fi
 
+                  # Resolve commit SHA (PR head on pull_request, otherwise github.sha)
+                  SHA_FULL="${{ github.sha }}"
+                  SHA_SHORT="${SHA_FULL:0:7}"
+
                   echo "passed=$PASSED" >> $GITHUB_OUTPUT
                   echo "failed=$FAILED" >> $GITHUB_OUTPUT
                   echo "total=$TOTAL" >> $GITHUB_OUTPUT
                   echo "duration=$DURATION" >> $GITHUB_OUTPUT
+                  echo "sha_full=$SHA_FULL" >> $GITHUB_OUTPUT
+                  echo "sha_short=$SHA_SHORT" >> $GITHUB_OUTPUT
 
             - uses: marocchino/sticky-pull-request-comment@v2
               with:
                   message: |
                       ${{ contains(needs.test.result, 'failure') && format('🚫 **{0} tests failed!**', steps.parse-results.outputs.failed) || '✅ **All tests passed!**' }}
 
-                      | Tests | Passed | Failed | Duration | Report |
-                      | :---- | :----- | :----- | :------- | :----- |
-                      | ${{ steps.parse-results.outputs.total }} | ${{ steps.parse-results.outputs.passed }} | ${{ steps.parse-results.outputs.failed }} | ${{ steps.parse-results.outputs.duration }} | [Open report ↗︎](http://${{ env.BUCKET_NAME }}/${{ env.REPORT_PATH }}/index.html) |
+                      | Tests | Passed | Failed | Duration | Commit | Report |
+                      | :---- | :----- | :----- | :------- | :----- | :----- |
+                      | ${{ steps.parse-results.outputs.total }} | ${{ steps.parse-results.outputs.passed }} | ${{ steps.parse-results.outputs.failed }} | ${{ steps.parse-results.outputs.duration }} | [`${{ steps.parse-results.outputs.sha_short }}`](https://github.com/${{ github.repository }}/commit/${{ steps.parse-results.outputs.sha_full }}) | [Open report ↗︎](http://${{ env.BUCKET_NAME }}/${{ env.REPORT_PATH }}/index.html) |
 
                       [Click here](https://github.com/goorm-dev/vapor-ui/actions/workflows/update-snapshots.yml) if you need to update snapshots.
 

packages/composites/src/components/alert-dialog/alert-dialog.figma.ts

@@ -0,0 +1,43 @@
+// url=https://www.figma.com/design/he4tiAGOKGPl0Fm56ZpJsy/-Composites--Vapor-Design-System?node-id=2359-50676&t=TnnpGTYHBh9MjPQH-11
+// source=src/components/alert-dialog/alert-dialog.tsx
+// component=AlertDialog
+import figma from 'figma';
+
+import { getProperties } from '../../utils/figma-utils';
+
+const instance = figma.selectedInstance;
+
+const popup = getProperties(instance, '(Popup)', {
+    type: { kind: 'enum', name: 'type', options: { critical: 'critical', confirm: 'confirm' } },
+});
+
+const header = getProperties(instance, '(Header)', {
+    description: { kind: 'string', name: 'description' },
+    title: { kind: 'string', name: 'title' },
+});
+
+const body = getProperties(instance, '(Body)', {
+    children: { kind: 'slot', name: '(content)' },
+});
+
+const footer = getProperties(instance, '(Footer)', {
+    cancel: { kind: 'instance', name: 'Cancel' },
+    action: { kind: 'instance', name: 'Action' },
+});
+
+export default {
+    example: figma.code`
+        <AlertDialog.Root
+            ${popup.type}
+            ${header.description}
+            ${header.title}
+            ${footer.cancel}
+            ${footer.action}
+        >
+            ${body.children}
+        </AlertDialog.Root>
+    `,
+    imports: ['import { AlertDialog } from "@vapor-ui/composites"'],
+    id: 'alert-dialog',
+    metadata: { nestable: false },
+};

packages/composites/src/components/alert-dialog/alert-dialog.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '@vapor-ui/core';
+
+import { AlertDialog } from '.';
+
+export default {
+    title: 'Composites/AlertDialog',
+    component: AlertDialog.Root,
+    argTypes: {
+        type: { control: 'inline-radio', options: ['critical', 'confirm'] },
+        title: { control: 'text' },
+        description: { control: 'text' },
+    },
+} satisfies Meta<typeof AlertDialog.Root>;
+
+type Story = StoryObj<typeof AlertDialog.Root>;
+
+export const Default: Story = {
+    args: {
+        type: 'critical',
+        title: '이 항목을 삭제할까요?',
+        description: '삭제하면 되돌릴 수 없습니다. 연결된 기록도 함께 사라집니다.',
+    },
+    render: ({
+        action = <AlertDialog.Action>Remove</AlertDialog.Action>,
+        cancel = <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>,
+        ...args
+    }) => {
+        return (
+            <AlertDialog.Root
+                trigger={<Button>트리거</Button>}
+                cancel={cancel}
+                action={action}
+                {...args}
+            />
+        );
+    },
+};