refactor: create project page

apps/gitness/src/framework/routing/types.ts

@@ -67,6 +67,7 @@ export enum RouteConstants {
   toExternalTickets = 'toExternalTickets',
   toProjectMembers = 'toProjectMembers',
   toProjectGeneral = 'toProjectGeneral',
+  toProjectCreate = 'toProjectCreate',
   toGitOps = 'toGitOps',
   toCI = 'toCI',
   toCode = 'toCode',

apps/gitness/src/pages-v2/create-project.tsx

@@ -0,0 +1,17 @@
+import { CreateProjectPage } from '@harnessio/ui/views'
+
+import { useTranslationStore } from '../i18n/stores/i18n-store'
+
+export const CreateProject = () => {
+  const isLoading = false
+  const error = null
+
+  return (
+    <CreateProjectPage
+      isLoading={isLoading}
+      error={error?.message}
+      useTranslationStore={useTranslationStore}
+      onFormSubmit={() => {}}
+    />
+  )
+}

apps/gitness/src/pages-v2/signup.tsx

@@ -19,7 +19,7 @@ export const SignUp: React.FC = () => {
 
   useEffect(() => {
     if (isSuccess) {
-      navigate(routes.toHome()) // Redirect to Home page
+      navigate(routes.toProjectCreate())
     }
   }, [isSuccess])
 

apps/gitness/src/routes.tsx

@@ -1032,6 +1032,11 @@ export const routes: CustomRouteObject[] = [
       }
     ]
   },
+  {
+    path: 'create-project',
+    element: <CreateProject />,
+    handle: { routeName: RouteConstants.toProjectCreate }
+  },
   {
     path: 'signin',
     element: <SignIn />,

packages/ui/locales/en/views.json

@@ -447,4 +447,4 @@
     "newUserButton": "New user",
     "usersHeader": "Users"
   }
-}
+}

packages/ui/locales/es/views.json

@@ -439,4 +439,4 @@
     "token": "Token",
     "status": "Status"
   }
-}
+}

packages/ui/locales/fr/views.json

@@ -441,4 +441,4 @@
     "newUserButton": "New user",
     "usersHeader": "Users"
   }
-}
+}

packages/ui/src/components/language-selector/language-dialog.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 
 import { Button, ButtonGroup, Dialog, Icon } from '@/components'
 

packages/ui/src/components/styled-link.tsx

@@ -1,17 +1,22 @@
 import { Link, type LinkProps } from 'react-router-dom'
 
 import { cn } from '@utils/cn'
+import { cva, VariantProps } from 'class-variance-authority'
 
-type StyledLinkProps = LinkProps & React.RefAttributes<HTMLAnchorElement>
+const linkVariants = cva(
+  'whitespace-nowrap underline decoration-transparent decoration-1 underline-offset-4 transition-colors duration-200',
+  {
+    variants: {
+      variant: {
+        default: 'text-foreground-1 hover:decoration-foreground-1',
+        accent: 'text-foreground-accent hover:decoration-foreground-accent'
+      }
+    }
+  }
+)
 
-export function StyledLink({ className, ...props }: StyledLinkProps) {
-  return (
-    <Link
-      className={cn(
-        'text-foreground-accent hover:decoration-foreground-accent underline decoration-transparent underline-offset-4 transition-colors duration-200',
-        className
-      )}
-      {...props}
-    />
-  )
+type StyledLinkProps = LinkProps & React.RefAttributes<HTMLAnchorElement> & VariantProps<typeof linkVariants>
+
+export const StyledLink = ({ className, variant, ...props }: StyledLinkProps) => {
+  return <Link className={cn(linkVariants({ variant }), className)} {...props} />
 }

packages/ui/src/components/theme-selector-v2/theme-dialog.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 
 import { Button, ButtonGroup, Dialog, Separator, Text } from '@/components'
 import { cn } from '@/utils/cn'
@@ -43,7 +43,7 @@ const ThemeDialog: FC<ThemeDialogProps> = ({
         <div>
           <div className="flex flex-col gap-1">
             <Text className="text-md font-medium">Mode</Text>
-            <Text className="text-xs text-foreground-3">Select or customize your UI theme.</Text>
+            <Text className="text-foreground-3 text-xs">Select or customize your UI theme.</Text>
           </div>
           <div className="mt-4 flex gap-4">
             {Object.values(Mode).map(item => (
@@ -83,7 +83,7 @@ const ThemeDialog: FC<ThemeDialogProps> = ({
         <div>
           <div className="flex flex-col gap-1">
             <Text className="text-md font-medium">Contrast</Text>
-            <Text className="text-xs text-foreground-3">
+            <Text className="text-foreground-3 text-xs">
               High contrast improves readability, Dimmer mode reduces glare.
             </Text>
           </div>
@@ -116,7 +116,7 @@ const ThemeDialog: FC<ThemeDialogProps> = ({
         <div>
           <div className="flex flex-col gap-1">
             <Text className="text-md font-medium">Color Adjustment</Text>
-            <Text className="text-xs text-foreground-3">Adjust colors for different types of color blindness.</Text>
+            <Text className="text-foreground-3 text-xs">Adjust colors for different types of color blindness.</Text>
           </div>
           <div className="mt-4 flex gap-2">
             {Object.values(ColorAdjustment).map(item => (
@@ -147,7 +147,7 @@ const ThemeDialog: FC<ThemeDialogProps> = ({
         <div>
           <div className="flex flex-col gap-1">
             <Text className="text-md font-medium">Accent Color</Text>
-            <Text className="text-xs text-foreground-3">Select your application accent color.</Text>
+            <Text className="text-foreground-3 text-xs">Select your application accent color.</Text>
           </div>
           <div className="mt-4 flex gap-2">
             {Object.values(AccentColor).map(item => (

packages/ui/src/views/auth/components/agreements.tsx

@@ -1,24 +1,10 @@
-import { Link } from 'react-router-dom'
-
-import { Text } from '@/components'
+import { StyledLink, Text } from '@/components'
 
 export function Agreements() {
   return (
     <Text className="relative z-10 mt-auto leading-tight" size={0} color="foreground-5" align="center">
-      By joining, you agree to{' '}
-      <Link
-        className="whitespace-nowrap text-foreground-1 underline decoration-transparent decoration-1 underline-offset-4 transition-colors duration-200 hover:decoration-foreground-1"
-        to="https://harness.io/privacy"
-      >
-        Terms of Service
-      </Link>{' '}
-      and&nbsp;
-      <Link
-        className="whitespace-nowrap text-foreground-1 underline decoration-transparent decoration-1 underline-offset-4 transition-colors duration-200 hover:decoration-foreground-1"
-        to="https://harness.io/subscriptionterms"
-      >
-        Privacy Policy
-      </Link>
+      By joining, you agree to <StyledLink to="https://harness.io/privacy">Terms of Service</StyledLink> and&nbsp;
+      <StyledLink to="https://harness.io/subscriptionterms">Privacy Policy</StyledLink>
     </Text>
   )
 }

packages/ui/src/views/auth/signin-page.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import { Link } from 'react-router-dom'
 
-import { Button, Card, Input, Spacer, Text } from '@/components'
+import { Button, Card, Input, Spacer, StyledLink, Text } from '@/components'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
@@ -72,7 +71,7 @@ export function SignInPage({ handleSignIn, isLoading, error }: SignInPageProps)
 
   return (
     <Floating1ColumnLayout
-      className="flex-col bg-background-7 pt-20 sm:pt-[186px]"
+      className="bg-background-7 flex-col pt-20 sm:pt-[186px]"
       highlightTheme={hasError ? 'error' : 'blue'}
       verticalCenter
     >
@@ -122,12 +121,9 @@ export function SignInPage({ handleSignIn, isLoading, error }: SignInPageProps)
           <Spacer size={4} />
           <Text className="block" size={2} color="foreground-5" weight="normal" align="center" as="p">
             Don’t have an account?{' '}
-            <Link
-              className="text-foreground-accent underline decoration-transparent decoration-1 underline-offset-4 transition-colors duration-200 hover:decoration-foreground-accent"
-              to="/signup"
-            >
+            <StyledLink variant="accent" to="/signup">
               Sign up
-            </Link>
+            </StyledLink>
           </Text>
         </Card.Content>
       </Card.Root>

packages/ui/src/views/auth/signup-page.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import { Link } from 'react-router-dom'
 
-import { Button, Card, Input, Spacer, Text } from '@/components'
+import { Button, Card, Input, Spacer, StyledLink, Text } from '@/components'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
@@ -69,7 +68,7 @@ export function SignUpPage({ isLoading, handleSignUp, error }: SignUpPageProps)
 
   return (
     <Floating1ColumnLayout
-      className="flex-col bg-background-7 pt-20 sm:pt-[186px]"
+      className="bg-background-7 flex-col pt-20 sm:pt-[186px]"
       highlightTheme={hasError ? 'error' : 'green'}
       verticalCenter
     >
@@ -127,7 +126,7 @@ export function SignUpPage({ isLoading, handleSignUp, error }: SignUpPageProps)
             />
             {serverError && (
               <>
-                <Text className="mt-1 leading-none tracking-tight text-foreground-danger" size={0}>
+                <Text className="text-foreground-danger mt-1 leading-none tracking-tight" size={0}>
                   {serverError}
                 </Text>
               </>
@@ -147,12 +146,9 @@ export function SignUpPage({ isLoading, handleSignUp, error }: SignUpPageProps)
           <Spacer size={4} />
           <Text className="block" size={2} color="foreground-5" weight="normal" align="center" as="p">
             Already have an account?{' '}
-            <Link
-              className="text-foreground-accent underline decoration-transparent decoration-1 underline-offset-4 transition-colors duration-200 hover:decoration-foreground-accent"
-              to="/signin"
-            >
+            <StyledLink variant="accent" to="/signin">
               Sign in
-            </Link>
+            </StyledLink>
           </Text>
         </Card.Content>
       </Card.Root>

packages/ui/src/views/create-project-page.tsx

@@ -26,7 +26,7 @@ const createProjectSchema = z.object({
 
 export type CreateProjectFormFields = z.infer<typeof createProjectSchema>
 
-export function CreateProjectPage({ isLoading, onFormSubmit, apiError, useTranslationStore }: PageProps) {
+function CreateProjectPage({ isLoading, onFormSubmit, apiError, useTranslationStore }: PageProps) {
   const {
     register,
     handleSubmit,