diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 5557aa46..99ca3c2a 100644 --- a/.github/dependabot.yml +++ b/.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' diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index d6635437..f8a24c88 100644 --- a/.github/pull_request_template.md +++ b/.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: - [ ] 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 diff --git a/README.md b/README.md index 7b44aac2..609d742a 100644 --- a/README.md +++ b/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. diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/GroupCardDropdownMenuContent.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/GroupCardDropdownMenuContent.tsx new file mode 100644 index 00000000..0c39e38e --- /dev/null +++ b/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 ( + + + + + + + Rename + + + + + + + + Delete + + + + ); +}; diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/index.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/index.tsx new file mode 100644 index 00000000..3d67fa7f --- /dev/null +++ b/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(!isDeleteGroupDialogOpen && !isRenameFormOpen); + + const handleDeleteClick = () => { + setIsDropdownMenuOpen(false); + setIsDeleteGroupDialogOpen(true); + }; + return ( + <> + + + + + + + + setIsDropdownMenuOpen(false)} + onDialogClose={() => setIsDeleteGroupDialogOpen(false)} + /> + + + ); +}; diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/DeleteGroupDialogTriggerButton/index.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/DeleteGroupDialogTriggerButton/index.tsx deleted file mode 100644 index 218de128..00000000 --- a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/DeleteGroupDialogTriggerButton/index.tsx +++ /dev/null @@ -1,51 +0,0 @@ -'use client'; -import { IconDelete } from '@/assets/images/icons'; -import { - DialogRoot, - DialogTrigger, - DropdownMenuButton, - DropdownMenuButtonIcon, - DropdownMenuButtonText, - Icon, -} from '@/components/ui'; -import { DeleteGroupDialogContent } from '@/features/groups/components/DeleteGroupDialogContent'; -import { IGroup } from '@/types/definition'; - -import { useState } from 'react'; - -interface IGroupCardDropdownMenuDeleteButtonProps { - /** - * The ID of the group to delete. - */ - groupId: IGroup['id']; - - /** - * The function to close the dropdown menu. - */ - onDropdownMenuClose: () => void; -} - -export const DeleteGroupDialogTriggerButton = ({ - groupId, - onDropdownMenuClose, -}: IGroupCardDropdownMenuDeleteButtonProps) => { - const [isDialogOpen, setIsDialogOpen] = useState(false); - - return ( - - - - - - - Delete - - - setIsDialogOpen(false)} - /> - - ); -}; diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/index.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/index.tsx deleted file mode 100644 index 041f1a1a..00000000 --- a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/index.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import { IconPen } from '@/assets/images/icons'; -import { - DropdownMenuButton, - DropdownMenuButtonIcon, - DropdownMenuButtonText, - DropdownMenuContent, - DropdownMenuItem, - Icon, -} from '@/components/ui'; -import { IGroup } from '@/types/definition'; - -import { DeleteGroupDialogTriggerButton } from './DeleteGroupDialogTriggerButton'; - -interface IGroupCardDropdownMenuContentProps { - /** - * The ID of the group to delete. - */ - groupId: IGroup['id']; - /** - * Function to handle the rename button click. - */ - handleRenameClick: () => void; - - /** - * The function to close the dropdown menu. - */ - onDropdownMenuClose: () => void; -} - -export const GroupCardDropdownMenuContent = ({ - groupId, - handleRenameClick, - onDropdownMenuClose, -}: IGroupCardDropdownMenuContentProps) => { - /** - * The function that is called when the dropdown menu item is selected. - * e.preventDefault() prevents the dropdown menu from closing when selecting that item. - * This is necessary because closing dropdown menu also closes the dialog unintentionally. - * @see {@link https://www.radix-ui.com/primitives/docs/components/dropdown-menu#item} - * - * @param e - The event object - * @returns void - */ - const handleSelect = (e: Event) => { - e.preventDefault(); - }; - - return ( - - - - - - - Rename - - - - - - - ); -}; diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/index.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/index.tsx deleted file mode 100644 index 16fbad53..00000000 --- a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/index.tsx +++ /dev/null @@ -1,40 +0,0 @@ -'use client'; -import { IconMenuKebab } from '@/assets/images/icons'; -import { Button, DropdownMenu, DropdownMenuTrigger, Icon } from '@/components/ui'; -import { IGroup } from '@/types/definition'; - -import { useState } from 'react'; - -import { GroupCardDropdownMenuContent } from './GroupCardDropdownMenuContent'; - -interface IGroupCardMenuButtonProps { - /** - * The ID of the group to delete. - */ - groupId: IGroup['id']; - /** - * Function to handle the rename button click. - */ - handleRenameClick: () => void; -} - -export const GroupCardDropdownMenuTriggerButton = ({ - groupId, - handleRenameClick, -}: IGroupCardMenuButtonProps) => { - const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState(false); - return ( - - - - - setIsDropdownMenuOpen(false)} - /> - - ); -}; diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx index 4cc466c2..3e145e24 100644 --- a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx +++ b/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 = ({ - + ); };