Release v1.0.3

.github/dependabot.yml

@@ -6,11 +6,11 @@ updates:
     target-branch: 'develop'
     versioning-strategy: 'increase'
     schedule:
-      interval: 'daily'
+      interval: 'monthly'
       time: '08:00'
       timezone: 'Canada/Pacific'
     commit-message:
-      # Prefix all commit messages with "npm: "
+      # Prefix all commit messages with "build: "
       prefix: 'build'
     reviewers:
       - 'nishiki-tech/frontend-reviewer'
@@ -20,11 +20,11 @@ updates:
     directory: '/'
     target-branch: 'develop'
     schedule:
-      interval: 'daily'
+      interval: 'monthly'
       time: '08:00'
       timezone: 'Canada/Pacific'
     commit-message:
-      # Prefix all commit messages with "npm: "
+      # Prefix all commit messages with "ci: "
       prefix: 'ci'
     reviewers:
       - 'nishiki-tech/frontend-reviewer'

.github/pull_request_template.md

@@ -3,8 +3,8 @@
 Title Naming Conventions:
 
 - Start with a capitalized prefix followed by an imperative form of a verb.
-- Refer to the "Types of Branches" section for the prefix:
-  https://github.com/nishiki-tech/nishiki-frontend/blob/develop/docs/CONTRIBUTING.md#types-of-branches
+- Refer to the "Feature Branches" section for the prefix:
+  https://github.com/nishiki-tech/nishiki-frontend/blob/develop/docs/BRANCHING.md#feature-branches
 
 Example:
 - Feature: Add button to the home page
@@ -13,6 +13,7 @@ Example:
 - Refactor: Reorganize the file structure
 - Test: Add unit tests for form validation
 - Docs: Update installation guide
+- Chore: Use this prefix if your change does not fit into any of the above.
 
 -->
 
@@ -60,8 +61,8 @@ Example:
 <!-- You can tick the checkboxes if not applicable -->
 
 - [ ] The naming convention of the PR title is correct (See the comment at the top of this template)
-- [ ] The base branch is correct (See: [Types of Branches](https://github.com/nishiki-tech/nishiki-frontend/blob/develop/docs/CONTRIBUTING.md#types-of-branches))
-- [ ] The branch name follows the [Branch Naming Conventions](https://github.com/nishiki-tech/nishiki-frontend/blob/develop/docs/CONTRIBUTING.md#branch-naming-conventions)
+- [ ] The base branch is correct (See: [Feature Branches](https://github.com/nishiki-tech/nishiki-frontend/blob/develop/docs/BRANCHING.md#feature-branches))
+- [ ] The branch name follows the [Branch Naming Conventions](https://github.com/nishiki-tech/nishiki-frontend/blob/develop/docs/BRANCHING.md#branch-naming-conventions)
 - [ ] The correct assignees and reviewers have been designated for this PR
 - [ ] The coding style follows the [Coding Style Guide](https://github.com/nishiki-tech/nishiki-frontend/blob/develop/docs/STYLEGUIDE.md)
 - [ ] All the related issues are associated with this PR

README.md

@@ -69,7 +69,7 @@ Please refer to the [Setup Documentation](./docs/SETUP.md) for instructions on h
 
 ## Community
 
-The Nishiki community can be found on [GitHub Discussions]() where you can ask questions, voice ideas, and share your projects with other people.
+The Nishiki community can be found on [GitHub Discussions](https://github.com/nishiki-tech/nishiki-frontend/discussions) where you can ask questions, voice ideas, and share your projects with other people.
 
 To chat with the team or other community members, you can join the Nishiki [Discord](https://discord.gg/kZ9kZE8dcP) server.
 

src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/GroupCardDropdownMenuContent.tsx

@@ -0,0 +1,46 @@
+import { IconDelete, IconPen } from '@/assets/images/icons';
+import {
+  DropdownMenuButton,
+  DropdownMenuButtonIcon,
+  DropdownMenuButtonText,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  Icon,
+} from '@/components/ui';
+
+interface IGroupCardDropdownMenuContentProps {
+  /**
+   * Function to handle the rename button click.
+   */
+  handleRenameClick: () => void;
+  /**
+   * The function to close the dropdown menu.
+   */
+  handleDeleteClick: () => void;
+}
+
+export const GroupCardDropdownMenuContent = ({
+  handleRenameClick,
+  handleDeleteClick,
+}: IGroupCardDropdownMenuContentProps) => {
+  return (
+    <DropdownMenuContent>
+      <DropdownMenuItem asChild>
+        <DropdownMenuButton onClick={handleRenameClick}>
+          <DropdownMenuButtonIcon>
+            <Icon icon={IconPen} size={5} color="primary" />
+          </DropdownMenuButtonIcon>
+          <DropdownMenuButtonText>Rename</DropdownMenuButtonText>
+        </DropdownMenuButton>
+      </DropdownMenuItem>
+      <DropdownMenuItem asChild>
+        <DropdownMenuButton onClick={handleDeleteClick}>
+          <DropdownMenuButtonIcon>
+            <Icon icon={IconDelete} size={5} color="danger" />
+          </DropdownMenuButtonIcon>
+          <DropdownMenuButtonText>Delete</DropdownMenuButtonText>
+        </DropdownMenuButton>
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  );
+};

src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/index.tsx

@@ -0,0 +1,63 @@
+'use client';
+import { IconMenuKebab } from '@/assets/images/icons';
+import { Button, DialogRoot, DropdownMenu, DropdownMenuTrigger, Icon } from '@/components/ui';
+import { DeleteGroupDialogContent } from '@/features/groups/components/DeleteGroupDialogContent';
+import { useAutoFocus } from '@/hooks';
+import { IGroup } from '@/types/definition';
+
+import { useState } from 'react';
+
+import { GroupCardDropdownMenuContent } from './GroupCardDropdownMenuContent';
+
+interface IGroupCardMenuButtonProps {
+  /**
+   * The ID of the group to be deleted.
+   */
+  groupId: IGroup['id'];
+  /**
+   * Function to handle the rename button click.
+   */
+  handleRenameClick: () => void;
+  /**
+   * A state of renaming input field to be opened (=true) or closed(=false)
+   */
+  isRenameFormOpen: boolean;
+}
+
+export const GroupCardDropdownMenu = ({
+  groupId,
+  handleRenameClick,
+  isRenameFormOpen,
+}: IGroupCardMenuButtonProps) => {
+  const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState(false);
+  const [isDeleteGroupDialogOpen, setIsDeleteGroupDialogOpen] = useState(false);
+
+  const kebabRef = useAutoFocus<HTMLButtonElement>(!isDeleteGroupDialogOpen && !isRenameFormOpen);
+
+  const handleDeleteClick = () => {
+    setIsDropdownMenuOpen(false);
+    setIsDeleteGroupDialogOpen(true);
+  };
+  return (
+    <>
+      <DropdownMenu open={isDropdownMenuOpen} onOpenChange={setIsDropdownMenuOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="w-12" ref={kebabRef}>
+            <Icon icon={IconMenuKebab} size={4.5} />
+          </Button>
+        </DropdownMenuTrigger>
+        <GroupCardDropdownMenuContent
+          handleRenameClick={handleRenameClick}
+          handleDeleteClick={handleDeleteClick}
+        />
+      </DropdownMenu>
+      <DialogRoot open={isDeleteGroupDialogOpen} onOpenChange={setIsDeleteGroupDialogOpen}>
+        <DeleteGroupDialogContent
+          groupId={groupId}
+          onParentClose={() => setIsDropdownMenuOpen(false)}
+          onDialogClose={() => setIsDeleteGroupDialogOpen(false)}
+        />
+      </DialogRoot>
+    </>
+  );
+};

src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx

@@ -1,18 +1,31 @@
 'use client';
 import { Card } from '@/components/ui';
+import { IGroup } from '@/types/definition';
 
 import Link from 'next/link';
 import { FC, useState } from 'react';
 
 import { ContainerCount } from './ContainerCount';
-import { GroupCardDropdownMenuTriggerButton } from './GroupCardDropdownMenuTriggerButton';
+import { GroupCardDropdownMenu } from './GroupCardDropdownMenu';
 import { RenameGroupForm } from './RenameGroupForm';
 import { UserCount } from './UserCount';
 
 interface IGroupCardContentProps {
-  groupId: string;
-  groupName: string;
+  /**
+   * the identifier of a group
+   */
+  groupId: IGroup['id'];
+  /**
+   * a group name used to display on each card
+   */
+  groupName: IGroup['name'];
+  /**
+   * the number of container which belongs to a group
+   */
   containerCount: number;
+  /**
+   * the number of user who belongs to a group
+   */
   userCount: number;
 }
 
@@ -50,7 +63,11 @@ export const GroupCardContent: FC<IGroupCardContentProps> = ({
           <UserCount userCount={userCount} />
         </div>
       </Link>
-      <GroupCardDropdownMenuTriggerButton groupId={groupId} handleRenameClick={handleRenameClick} />
+      <GroupCardDropdownMenu
+        groupId={groupId}
+        handleRenameClick={handleRenameClick}
+        isRenameFormOpen={isRenameFormOpen}
+      />
     </Card>
   );
 };