refactor: labels

apps/gitness/src/routes.tsx

@@ -1,6 +1,6 @@
 import { Navigate } from 'react-router-dom'
 
-import { Breadcrumb } from '@harnessio/ui/components'
+import { Breadcrumb, Text } from '@harnessio/ui/components'
 import {
   EmptyPage,
   ProfileSettingsLayout,

packages/ui/locales/en/views.json

@@ -10,7 +10,7 @@
     "pull-requests": "Pull Requests",
     "branches": "Branches",
     "settings": "Settings",
-    "descriptionPlaceholder": "Enter a description",
+    "descriptionPlaceholder": "Enter a short description for the label",
     "description": "Description",
     "error": "Error:",
     "saving": "Saving…",
@@ -288,12 +288,13 @@
     "compareChangesTabOverview": "Overview",
     "compareChangesTabCommits": "Commits",
     "compareChangesTabChanges": "Changes",
-    "findOrAddNewValue": "Search or add a new value",
+    "findOrAddNewValue": "Find or add a new value",
     "searchValue": "Search value",
     "addValue": "Add new value",
-    "noLabels": "No labels found",
+    "labelNotFound": "Label not found",
     "labels": "Labels",
     "searchLabels": "Search labels",
+    "noLabels": "No labels found",
     "deleted": "Deleted",
     "deletedComment": "This comment was deleted.",
     "reviewers": "Reviewers",

packages/ui/locales/es/views.json

@@ -10,7 +10,7 @@
     "pull-requests": "Pull Requests",
     "branches": "Branches",
     "settings": "Settings",
-    "descriptionPlaceholder": "Enter a description",
+    "descriptionPlaceholder": "Enter a short description for the label",
     "description": "Description",
     "error": "Error:",
     "saving": "Saving...",
@@ -288,12 +288,13 @@
     "compareChangesTabOverview": "Resumen",
     "compareChangesTabCommits": "Commits",
     "compareChangesTabChanges": "Cambios",
-    "findOrAddNewValue": "Search or add a new value",
+    "findOrAddNewValue": "Find or add a new value",
     "searchValue": "Search value",
     "addValue": "Add new value",
-    "noLabels": "No labels found",
+    "labelNotFound": "Label not found",
     "labels": "Labels",
     "searchLabels": "Search labels",
+    "noLabels": "No labels found",
     "deleted": "",
     "deletedComment": "",
     "reviewers": "",

packages/ui/locales/fr/views.json

@@ -10,7 +10,7 @@
     "pull-requests": "Requêtes de tirage",
     "branches": "Branches",
     "settings": "Paramètres",
-    "descriptionPlaceholder": "Entrez une description",
+    "descriptionPlaceholder": "Enter a description",
     "description": "Description",
     "error": "Erreur :",
     "saving": "Enregistrement...",
@@ -291,9 +291,10 @@
     "findOrAddNewValue": "Find or add a new value",
     "searchValue": "Search value",
     "addValue": "Add new value",
-    "noLabels": "Aucune étiquette trouvée.",
+    "labelNotFound": "Label not found",
     "labels": "Étiquettes",
     "searchLabels": "Rechercher des étiquettes..",
+    "noLabels": "No labels found",
     "deleted": "Supprimé",
     "deletedComment": "Ce commentaire a été supprimé.",
     "reviewers": "Réviseurs",

packages/ui/src/components/chat/chat-diff-viewer.tsx

@@ -65,16 +65,16 @@ export const ChatDiffViewer = ({ data, mode = 4, lang = 'go', fileName }: ChatDi
   }, [data, lang, setDiffInstanceCb])
 
   return (
-    <div className="border-borders-1 bg-background-1 mr-7 mt-3 flex flex-col rounded-md border">
+    <div className="mr-7 mt-3 flex flex-col rounded-md border border-borders-1 bg-background-1">
       {fileName && (
-        <span className="bg-background-2 text-foreground-1 text-14 rounded-[inherit] p-4 font-medium">{fileName}</span>
+        <span className="rounded-[inherit] bg-background-2 p-4 text-14 font-medium text-foreground-1">{fileName}</span>
       )}
       {diffFileInstance && (
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         <DiffView
           style={{ '--diff-plain-lineNumber--': 'hsl(var(--canary-background-01))' } as CSSProperties}
-          className="text-foreground-8 w-full"
+          className="w-full text-foreground-8"
           diffFile={diffFileInstance}
           diffViewFontSize={14}
           diffViewHighlight={true}

packages/ui/src/components/chat/chat-empty-preview-wrapper.tsx

@@ -4,7 +4,7 @@ import { Chat } from '@/components'
 
 export const ChatEmptyPreviewWrapper: FC = () => {
   return (
-    <div className="border-borders-4 h-[calc(100vh-100px)] border-r">
+    <div className="h-[calc(100vh-100px)] border-r border-borders-4">
       <Chat.Root>
         <Chat.Body>
           <Chat.EmptyState />

packages/ui/src/components/chat_deprecated.tsx

@@ -5,17 +5,17 @@ import { cn } from '@/utils/cn'
 
 // Root Container
 const Root: React.FC<{ children: ReactNode }> = ({ children }) => {
-  return <div className="w-full h-full overflow-y-auto flex flex-col">{children}</div>
+  return <div className="flex size-full flex-col overflow-y-auto">{children}</div>
 }
 
 // Body
 const Body: React.FC<{ children: ReactNode }> = ({ children }) => {
-  return <div className="flex-1 flex flex-col gap-6 mb-3 p-6">{children}</div>
+  return <div className="mb-3 flex flex-1 flex-col gap-6 p-6">{children}</div>
 }
 
 // Footer
 const Footer: React.FC<{ children: ReactNode }> = ({ children }) => {
-  return <div className="sticky bottom-0 p-6 pt-0 bg-background">{children}</div>
+  return <div className="sticky bottom-0 bg-background p-6 pt-0">{children}</div>
 }
 
 // Message Component
@@ -48,8 +48,8 @@ const Message: React.FC<MessageProps> = ({ self, time, avatar, actions, children
         >
           {children}
         </div>
-        <div className="flex gap-3 items-center justify-between mt-1">
-          <div>{actions && <div className="flex gap-1 items-center justify-start">{actions}</div>}</div>
+        <div className="mt-1 flex items-center justify-between gap-3">
+          <div>{actions && <div className="flex items-center justify-start gap-1">{actions}</div>}</div>
           {time && (
             <Text size={1} className="text-primary opacity-20">
               {time}
@@ -68,9 +68,9 @@ interface TypingProps {
 
 const Typing: React.FC<TypingProps> = ({ avatar }) => {
   return (
-    <div className="flex items-center gap-3 mt-3">
+    <div className="mt-3 flex items-center gap-3">
       {avatar}
-      <div className="flex gap-1 text-success text-lg font-medium" aria-live="polite">
+      <div className="flex gap-1 text-lg font-medium text-success" aria-live="polite">
         <span className="dot animate-bounce">&middot;</span>
         <span className="dot animate-bounce" style={{ animationDelay: '0.15s' }}>
           &middot;
@@ -115,10 +115,10 @@ const InputField: React.FC<InputFieldProps> = ({
   sendIcon = <Icon name="chevron-up" size={16} />
 }) => {
   return (
-    <div className="sticky bottom-0 bg-background flex items-center gap-2">
+    <div className="sticky bottom-0 flex items-center gap-2 bg-background">
       <Input
         ref={inputRef}
-        className="flex-1 pt-6 px-4 pb-16 rounded-lg focus:ring-0"
+        className="flex-1 rounded-lg px-4 pb-16 pt-6 focus:ring-0"
         value={value}
         onChange={onChange}
         onKeyDown={onKeyDown}
@@ -130,7 +130,7 @@ const InputField: React.FC<InputFieldProps> = ({
         variant="outline"
         size="icon"
         disabled={disabled}
-        className="absolute right-3.5 bottom-3.5 z-10 w-6 h-6"
+        className="absolute bottom-3.5 right-3.5 z-10 size-6"
       >
         {sendIcon}
       </Button>

packages/ui/src/components/input.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, Fragment, InputHTMLAttributes, ReactNode } from 'react'
+import { forwardRef, InputHTMLAttributes, ReactNode } from 'react'
 
 import { Caption, ControlGroup, Icon, IconProps, Label, Message, MessageTheme } from '@/components'
 import { cn } from '@utils/cn'
@@ -69,7 +69,7 @@ const BaseInputWithWrapper = forwardRef<HTMLInputElement, BaseInputWithWrapperPr
 
 BaseInputWithWrapper.displayName = 'BaseInputWithWrapper'
 
-interface InputProps extends BaseInputProps {
+export interface InputProps extends BaseInputProps {
   label?: string
   caption?: ReactNode
   error?: string
@@ -114,14 +114,6 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     },
     ref
   ) => {
-    const isControlGroup = !!error || !!caption || !!label || !!wrapperClassName
-    const InputWrapper = isControlGroup ? ControlGroup : Fragment
-    const inputWrapperProps = isControlGroup
-      ? {
-          className: wrapperClassName
-        }
-      : {}
-
     const InputComponent = customContent ? BaseInputWithWrapper : BaseInput
 
     const baseInputComp = (
@@ -167,7 +159,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     }
 
     return (
-      <InputWrapper {...inputWrapperProps}>
+      <ControlGroup className={wrapperClassName}>
         {!!label && (
           <Label className="mb-2.5" color={disabled ? 'disabled-dark' : 'secondary'} optional={optional} htmlFor={id}>
             {label}
@@ -182,12 +174,11 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           </Message>
         )}
         {caption && <Caption className={disabled ? 'text-foreground-9' : ''}>{caption}</Caption>}
-      </InputWrapper>
+      </ControlGroup>
     )
   }
 )
 
 Input.displayName = 'Input'
 
 export { Input }
-export type { InputProps }

packages/ui/src/components/label-marker.tsx

@@ -1,13 +1,15 @@
 import { FC } from 'react'
 
+import { Icon } from '@/components'
 import { cn } from '@utils/cn'
-import { ColorsEnum } from '@views/labels'
+import { ColorsEnum, ILabelType, LabelType } from '@views/labels'
 
-export interface LabelMarkerProps {
+export interface LabelMarkerProps extends Pick<ILabelType, 'color' | 'type'> {
   label: string
   value?: string
-  color: ColorsEnum
-  inTable?: boolean
+  className?: string
+  counter?: ILabelType['value_count']
+  widthType?: 'auto' | 'balanced'
 }
 
 export const LabelMarkerColor = {
@@ -26,22 +28,43 @@ export const LabelMarkerColor = {
   [ColorsEnum.LIME]: 'bg-label-background-lime text-label-foreground-lime'
 }
 
-export const LabelMarker: FC<LabelMarkerProps> = ({ label, value, color, inTable = false }) => {
+export const LabelMarker: FC<LabelMarkerProps> = ({
+  label,
+  value,
+  color,
+  type,
+  counter,
+  className,
+  widthType = 'auto'
+}) => {
+  const isDynamic = type === LabelType.DYNAMIC
+  const isBalancedWidthType = widthType === 'balanced'
+  const isWithExtraContent = !!value || !!counter
+
   return (
-    <span
-      className={cn(
-        `inline-flex text-12 leading-5 h-5 py-px px-2 items-center font-medium rounded overflow-hidden max-w-full ${LabelMarkerColor[color]}`,
-        { 'pr-px': !!value }
-      )}
-    >
-      <span className={cn('truncate', { 'flex-1': inTable }, { 'pr-1.5': !!value })}>{label}</span>
-      {!!value && (
-        <span
-          className={`flex h-full items-center overflow-hidden rounded-r bg-label-background-black pl-1.5 pr-[7px] ${inTable && 'max-w-[50%]'}`}
-        >
-          <span className="max-w-full truncate">{value}</span>
-        </span>
-      )}
-    </span>
+    <div className={cn('flex max-w-full items-center gap-2', className)}>
+      <span
+        className={cn(
+          `grid text-12 leading-3 h-5 py-px px-2 items-center font-medium rounded overflow-hidden w-fit ${LabelMarkerColor[color]}`,
+          { 'pr-px': isWithExtraContent },
+          { 'grid-cols-[1fr,auto]': !!counter || !isBalancedWidthType },
+          { 'grid-cols-[minmax(30%,1fr),auto]': !!value && isBalancedWidthType }
+        )}
+      >
+        <span className={cn('truncate', { 'pr-1.5': isWithExtraContent, 'pr-1': isBalancedWidthType })}>{label}</span>
+
+        {isWithExtraContent && (
+          <span
+            className={`flex h-full items-center overflow-hidden rounded-[3px] bg-label-background-black pl-1.5 pr-[7px]`}
+          >
+            {!!value && <span className="max-w-full truncate">{value}</span>}
+
+            {!!counter && counter}
+          </span>
+        )}
+      </span>
+
+      {isDynamic && <Icon name="circle-plus" size={12} className="min-w-3 text-icons-4" />}
+    </div>
   )
 }

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

@@ -40,7 +40,7 @@ const LanguageDialog: FC<LanguageDialogProps> = ({
               }}
             >
               <div className="flex items-center gap-2">
-                <div className="bg-background-12 text-12 text-foreground-3 flex size-6 items-center justify-center rounded">
+                <div className="flex size-6 items-center justify-center rounded bg-background-12 text-12 text-foreground-3">
                   {lang.code}
                 </div>
                 <span

packages/ui/src/components/multi-select.tsx

@@ -48,7 +48,7 @@ export const MultiSelect = <T = unknown,>({
         </Label>
       )}
       <DropdownMenu.Root>
-        <DropdownMenu.Trigger className="flex h-9 w-full items-center justify-between rounded border border-borders-2 px-3 transition-colors data-[state=open]:border-borders-8 bg-input-background">
+        <DropdownMenu.Trigger className="flex h-9 w-full items-center justify-between rounded border border-borders-2 bg-input-background px-3 transition-colors data-[state=open]:border-borders-8">
           {placeholder}
           <Icon name="chevron-down" className="chevron-down ml-auto" size={12} />
         </DropdownMenu.Trigger>

packages/ui/src/components/navbar-project-chooser.tsx

@@ -24,7 +24,7 @@ function Root({ logo }: ProjectProps) {
 
   return (
     <div className="flex w-full flex-col place-items-start px-3 pb-3">
-      <div className="flex h-[58px] px-1 items-center">{logo}</div>
+      <div className="flex h-[58px] items-center px-1">{logo}</div>
       <SearchBox
         width="full"
         placeholder="Search..."

packages/ui/src/components/navbar-skeleton/group.tsx

@@ -22,7 +22,7 @@ export function Group({ children, title, topBorder, isSubMenu = false, titleClas
     >
       {title && (
         <div className={cn('text-foreground-7 mt-1.5', isSubMenu ? 'mb-3' : 'mb-1.5', titleClassName)}>
-          <p className="text-xs font-normal px-2.5">{title}</p>
+          <p className="px-2.5 text-xs font-normal">{title}</p>
         </div>
       )}
       {children}

packages/ui/src/components/problems.tsx

@@ -41,7 +41,7 @@ const ProblemsComponent = {
         role="button"
         tabIndex={0}
         onClick={onClick}
-        className={`width-100 flex flex-1 cursor-pointer items-center gap-2 text-nowrap py-0.5 justify-between px-4 ${rowClasses}`}
+        className={`width-100 flex flex-1 cursor-pointer items-center justify-between gap-2 text-nowrap px-4 py-0.5 ${rowClasses}`}
       >
         {children}
       </div>

packages/ui/src/components/search-box.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   ForwardedRef,
   forwardRef,
   ReactNode,
@@ -8,7 +8,7 @@ import React, {
   type InputHTMLAttributes
 } from 'react'
 
-import { Icon, Input, Text } from '@/components'
+import { Icon, Input } from '@/components'
 import { cn } from '@utils/cn'
 import { noop } from 'lodash-es'
 
@@ -115,14 +115,14 @@ const Root = forwardRef<HTMLInputElement, SearchBoxProps>(
     return (
       <div className={cn('relative', width === 'full' ? 'w-full' : 'w-96', className)}>
         {hasSearchIcon && (
-          <Icon name="search" size={12} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-icons-1" />
+          <Icon name="search" size={12} className="absolute left-2.5 top-1/2 z-10 -translate-y-1/2 text-icons-1" />
         )}
+
         {hasShortcut && !!shortcutLetter && (
           <div className="absolute right-1.5 top-1/2 flex h-5 -translate-y-1/2 cursor-pointer items-center gap-0.5 rounded-sm border bg-background-3 px-1 text-foreground-2 duration-100 ease-in-out">
             <Icon name="apple-shortcut" size={12} />
-            <Text size={0} className="text-inherit">
-              {shortcutLetter}
-            </Text>
+
+            <span className="text-inherit">{shortcutLetter}</span>
           </div>
         )}
         <Input

packages/ui/src/components/select.tsx

@@ -6,7 +6,7 @@ import { useDebounceSearch } from '@hooks/use-debounce-search'
 import * as SelectPrimitive from '@radix-ui/react-select'
 import { cn } from '@utils/cn'
 
-interface SelectProps
+export interface SelectProps
   extends Omit<Omit<PropsWithChildren<React.HTMLAttributes<HTMLElement>>, 'defaultValue'>, 'dir'>,
     SelectPrimitive.SelectProps {
   label?: string