From b776a242502bae568440b29ba3e33536240cdb2d Mon Sep 17 00:00:00 2001 From: Andrew Koreykin Date: Thu, 30 Jan 2025 16:56:10 +0400 Subject: [PATCH] refactor: tabs navigation --- .vscode/settings.json | 3 +- .../view-preview/project-settings-wrapper.tsx | 2 +- .../pages/view-preview/repo-view-wrapper.tsx | 2 +- .../profile-settings-layout.tsx | 2 +- .../project/project-settings-layout.tsx | 2 +- .../gitness/src/pages-v2/repo/repo-layout.tsx | 2 +- packages/ui/src/components/repo-subheader.tsx | 51 +++++----- packages/ui/src/components/topbar.tsx | 2 +- .../src/views/layouts/PullRequestLayout.tsx | 92 +++++++++---------- .../profile-settings-tab-nav.tsx | 21 +++-- .../project/project-settings-tab-nav.tsx | 6 +- .../ui/src/views/repo/repo-layout/index.tsx | 52 ++++++----- .../ui/src/views/tailwind-values-exporter.tsx | 1 + packages/ui/tailwind.ts | 3 + packages/views/src/layouts/SandboxLayout.tsx | 6 +- 15 files changed, 129 insertions(+), 118 deletions(-) create mode 100644 packages/ui/src/views/tailwind-values-exporter.tsx diff --git a/.vscode/settings.json b/.vscode/settings.json index 043bb10e90..3c3688372d 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -9,5 +9,6 @@ "[ignore]": { "editor.defaultFormatter": "foxundermoon.shell-format" }, - "prettier.trailingComma": "none" + "prettier.trailingComma": "none", + "eslint.workingDirectories": [{ "pattern": "./apps/*/" }, { "pattern": "./packages/*/" }] } diff --git a/apps/design-system/src/pages/view-preview/project-settings-wrapper.tsx b/apps/design-system/src/pages/view-preview/project-settings-wrapper.tsx index 945b473ecb..68c80bbfe4 100644 --- a/apps/design-system/src/pages/view-preview/project-settings-wrapper.tsx +++ b/apps/design-system/src/pages/view-preview/project-settings-wrapper.tsx @@ -9,7 +9,7 @@ import RootViewWrapper from './root-view-wrapper' const Layout = () => { return ( -
+
) diff --git a/apps/design-system/src/pages/view-preview/repo-view-wrapper.tsx b/apps/design-system/src/pages/view-preview/repo-view-wrapper.tsx index d248b420d6..fab2463a64 100644 --- a/apps/design-system/src/pages/view-preview/repo-view-wrapper.tsx +++ b/apps/design-system/src/pages/view-preview/repo-view-wrapper.tsx @@ -13,7 +13,7 @@ const RepoViewWrapper: FC>> path="*" element={ <> -
+
{children} diff --git a/apps/gitness/src/pages-v2/profile-settings/profile-settings-layout.tsx b/apps/gitness/src/pages-v2/profile-settings/profile-settings-layout.tsx index c4fd99e08e..e6f107af2b 100644 --- a/apps/gitness/src/pages-v2/profile-settings/profile-settings-layout.tsx +++ b/apps/gitness/src/pages-v2/profile-settings/profile-settings-layout.tsx @@ -10,7 +10,7 @@ export const ProfileSettingsLayout = () => { return ( <> -
+
diff --git a/apps/gitness/src/pages-v2/project/project-settings-layout.tsx b/apps/gitness/src/pages-v2/project/project-settings-layout.tsx index d968272538..ab56360319 100644 --- a/apps/gitness/src/pages-v2/project/project-settings-layout.tsx +++ b/apps/gitness/src/pages-v2/project/project-settings-layout.tsx @@ -7,7 +7,7 @@ import { useTranslationStore } from '../../i18n/stores/i18n-store' export const ProjectSettingsLayout = () => { return ( <> -
+
diff --git a/apps/gitness/src/pages-v2/repo/repo-layout.tsx b/apps/gitness/src/pages-v2/repo/repo-layout.tsx index b7021e19f4..dd3a716482 100644 --- a/apps/gitness/src/pages-v2/repo/repo-layout.tsx +++ b/apps/gitness/src/pages-v2/repo/repo-layout.tsx @@ -10,7 +10,7 @@ const RepoLayout = () => { return ( <> -
+
diff --git a/packages/ui/src/components/repo-subheader.tsx b/packages/ui/src/components/repo-subheader.tsx index 06f35fb15e..93d9e6c828 100644 --- a/packages/ui/src/components/repo-subheader.tsx +++ b/packages/ui/src/components/repo-subheader.tsx @@ -1,5 +1,5 @@ -import { useMemo } from 'react' -import { NavLink, useLocation } from 'react-router-dom' +import { useCallback, useMemo } from 'react' +import { useLocation, useNavigate } from 'react-router-dom' import { Tabs, TabsList, TabsTrigger } from '@/components' import { SandboxLayout, TranslationStore } from '@/views' @@ -23,9 +23,12 @@ export const RepoSubheader = ({ useTranslationStore: () => TranslationStore showPipelinesTab?: boolean }) => { + const navigate = useNavigate() const location = useLocation() const { t } = useTranslationStore() + const makeHandleTabChange = useCallback((tab: string) => () => navigate(tab), [navigate]) + const activeTab = useMemo(() => { // Prioritize 'pulls' over 'commits' if both are present in the pathname if (location.pathname.includes(RepoTabsKeys.PULLS)) { @@ -36,32 +39,32 @@ export const RepoSubheader = ({ }, [location.pathname]) return ( - + - - {t('views:repos.summary', 'Summary')} - - - {t('views:repos.files', 'Files')} - + + {t('views:repos.summary', 'Summary')} + + + {t('views:repos.files', 'Files')} + {showPipelinesTab && ( - - {t('views:repos.pipelines', 'Pipelines')} - + + {t('views:repos.pipelines', 'Pipelines')} + )} - - {t('views:repos.commits', 'Commits')} - - - {t('views:repos.pull-requests', 'Pull Requests')} - - - {t('views:repos.branches', 'Branches')} - - - {t('views:repos.settings', 'Settings')} - + + {t('views:repos.commits', 'Commits')} + + + {t('views:repos.pull-requests', 'Pull Requests')} + + + {t('views:repos.branches', 'Branches')} + + + {t('views:repos.settings', 'Settings')} + diff --git a/packages/ui/src/components/topbar.tsx b/packages/ui/src/components/topbar.tsx index 523306f100..62ba0508cb 100644 --- a/packages/ui/src/components/topbar.tsx +++ b/packages/ui/src/components/topbar.tsx @@ -18,7 +18,7 @@ const Topbar = { return (
diff --git a/packages/ui/src/views/layouts/PullRequestLayout.tsx b/packages/ui/src/views/layouts/PullRequestLayout.tsx index 66ce16f969..47b4477933 100644 --- a/packages/ui/src/views/layouts/PullRequestLayout.tsx +++ b/packages/ui/src/views/layouts/PullRequestLayout.tsx @@ -1,6 +1,8 @@ -import { NavLink, Outlet } from 'react-router-dom' +import { useCallback } from 'react' +import { Outlet, useLocation, useNavigate } from 'react-router-dom' import { Badge, Icon, Spacer, Tabs, TabsList, TabsTrigger } from '@components/index' +import { TabsTriggerProps } from '@radix-ui/react-tabs' import { TranslationStore } from '@views/repo' import { PullRequestHeader } from '@views/repo/pull-request/components/pull-request-header' import { IPullRequestStore } from '@views/repo/pull-request/pull-request.types' @@ -30,6 +32,22 @@ const PullRequestLayout: React.FC = ({ }) => { const { pullRequest } = usePullRequestStore() const { t } = useTranslationStore() + const navigate = useNavigate() + const location = useLocation() + + const getIsActiveTab = useCallback( + (tab: string) => (location.pathname.endsWith(tab) ? 'active' : 'inactive'), + [location.pathname] + ) + const makeHandleTabChange = useCallback((tab: string) => () => navigate(tab), [navigate]) + + const getTabProps = (tab: PullRequestTabsKeys): TabsTriggerProps => ({ + value: tab, + ...{ 'data-state': getIsActiveTab(tab) }, + onClick: makeHandleTabChange(tab), + className: 'gap-x-1.5', + role: 'link' + }) return ( @@ -59,54 +77,30 @@ const PullRequestLayout: React.FC = ({ )} - - {({ isActive }) => ( - -
- - {t('views:pullRequests.conversation')} -
- - )} - - - {({ isActive }) => ( - -
- - {t('views:repos.commits')} -
- - {pullRequest?.stats?.commits} - - - )} - - - {({ isActive }) => ( - -
- - {t('views:pullRequests.changes')} -
- - {pullRequest?.stats?.files_changed} - - - )} - + +
+ + {t('views:pullRequests.conversation')} +
+ + +
+ + {t('views:repos.commits')} +
+ + {pullRequest?.stats?.commits} + + + +
+ + {t('views:pullRequests.changes')} +
+ + {pullRequest?.stats?.files_changed} + + diff --git a/packages/ui/src/views/profile-settings/profile-settings-tab-nav.tsx b/packages/ui/src/views/profile-settings/profile-settings-tab-nav.tsx index 2f1cdff54d..d035e5d5b5 100644 --- a/packages/ui/src/views/profile-settings/profile-settings-tab-nav.tsx +++ b/packages/ui/src/views/profile-settings/profile-settings-tab-nav.tsx @@ -1,4 +1,5 @@ -import { NavLink } from 'react-router-dom' +import { useCallback } from 'react' +import { useNavigate } from 'react-router-dom' import { Tabs, TabsList, TabsTrigger } from '@/components' import { SandboxLayout, TranslationStore } from '@/views' @@ -11,17 +12,21 @@ function ProfileSettingsTabNav({ useTranslationStore: () => TranslationStore }) { const { t } = useTranslationStore() + const navigate = useNavigate() + + const makeHandleTabChange = useCallback((tab: string) => () => navigate(tab), [navigate]) + return ( <> - + - - {t('views:profileSettings.GeneralTab', 'General')} - - - {t('views:profileSettings.KeysTab', 'Keys and Tokens')} - + + {t('views:profileSettings.GeneralTab', 'General')} + + + {t('views:profileSettings.KeysTab', 'Keys and Tokens')} + diff --git a/packages/ui/src/views/project/project-settings-tab-nav.tsx b/packages/ui/src/views/project/project-settings-tab-nav.tsx index 65e2b03b8a..243019f71b 100644 --- a/packages/ui/src/views/project/project-settings-tab-nav.tsx +++ b/packages/ui/src/views/project/project-settings-tab-nav.tsx @@ -21,13 +21,13 @@ const ProjectSettingsTabNav: FC = ({ useTranslationS - + {t('views:projectSettings.tabs.general', 'General')} - + {t('views:projectSettings.tabs.members', 'Members')} - + {t('views:projectSettings.tabs.labels', 'Labels')} diff --git a/packages/ui/src/views/repo/repo-layout/index.tsx b/packages/ui/src/views/repo/repo-layout/index.tsx index 90bd1b819a..f4addf2253 100644 --- a/packages/ui/src/views/repo/repo-layout/index.tsx +++ b/packages/ui/src/views/repo/repo-layout/index.tsx @@ -1,5 +1,5 @@ -import { useMemo } from 'react' -import { NavLink, Outlet, useLocation } from 'react-router-dom' +import { useCallback, useMemo } from 'react' +import { Outlet, useLocation, useNavigate } from 'react-router-dom' import { Tabs, TabsList, TabsTrigger } from '@/components' import { SandboxLayout, TranslationStore } from '@/views' @@ -20,6 +20,10 @@ export const RepoLayout = ({ useTranslationStore }: { useTranslationStore: () => const location = useLocation() const { t } = useTranslationStore() + const navigate = useNavigate() + + const makeHandleTabChange = useCallback((tab: string) => () => navigate(tab), [navigate]) + const activeTab = useMemo(() => { // Prioritize 'pulls' over 'commits' if both are present in the pathname if (location.pathname.includes(RepoTabsKeys.PULLS)) { @@ -31,30 +35,30 @@ export const RepoLayout = ({ useTranslationStore }: { useTranslationStore: () => return ( <> - + - - {t('views:repos.summary', 'Summary')} - - - {t('views:repos.files', 'Files')} - - - {t('views:repos.pipelines', 'Pipelines')} - - - {t('views:repos.commits', 'Commits')} - - - {t('views:repos.pull-requests', 'Pull Requests')} - - - {t('views:repos.branches', 'Branches')} - - - {t('views:repos.settings', 'Settings')} - + + {t('views:repos.summary', 'Summary')} + + + {t('views:repos.files', 'Files')} + + + {t('views:repos.pipelines', 'Pipelines')} + + + {t('views:repos.commits', 'Commits')} + + + {t('views:repos.pull-requests', 'Pull Requests')} + + + {t('views:repos.branches', 'Branches')} + + + {t('views:repos.settings', 'Settings')} + diff --git a/packages/ui/src/views/tailwind-values-exporter.tsx b/packages/ui/src/views/tailwind-values-exporter.tsx new file mode 100644 index 0000000000..4a5f58b821 --- /dev/null +++ b/packages/ui/src/views/tailwind-values-exporter.tsx @@ -0,0 +1 @@ +export const TailwindValuesExporter = () =>
diff --git a/packages/ui/tailwind.ts b/packages/ui/tailwind.ts index 3cf96f0d61..2b4a10ded8 100644 --- a/packages/ui/tailwind.ts +++ b/packages/ui/tailwind.ts @@ -339,6 +339,9 @@ export default { animation: { 'accordion-down': 'accordion-down 0.2s ease-out', 'accordion-up': 'accordion-up 0.2s ease-out' + }, + spacing: { + '14.5': '3.625rem' } } }, diff --git a/packages/views/src/layouts/SandboxLayout.tsx b/packages/views/src/layouts/SandboxLayout.tsx index 417185197b..ffe6b6db0f 100644 --- a/packages/views/src/layouts/SandboxLayout.tsx +++ b/packages/views/src/layouts/SandboxLayout.tsx @@ -40,7 +40,7 @@ function LeftSubPanel({ className?: string }) { const paddingTopClass = - hasHeader && hasSubHeader ? 'top-[100px]' : hasHeader ? 'top-[55px]' : hasSubHeader ? 'top-[45px]' : '' + hasHeader && hasSubHeader ? 'top-[100px]' : hasHeader ? 'top-14.5' : hasSubHeader ? 'top-[2.75rem]' : '' return (
{children} @@ -93,7 +93,7 @@ function Main({ hasLeftSubPanel?: boolean }) { const paddingTopClass = - hasHeader && hasSubHeader ? `pt-[calc(55px+45px)]` : hasHeader ? 'pt-[55px]' : hasSubHeader ? 'pt-[45px]' : '' + hasHeader && hasSubHeader ? `pt-[calc(55px+45px)]` : hasHeader ? 'pt-[55px]' : hasSubHeader ? 'pt-[2.75rem]' : '' const paddingLeftClass = hasLeftPanel && hasLeftSubPanel