refactor: labels

pixel-point · Feb 7, 2025 · 042fee1 · 042fee1
1 parent d2f4a68
commit 042fee1
Show file tree

Hide file tree

Showing 26 changed files with 258 additions and 277 deletions.
diff --git a/packages/ui/locales/en/views.json b/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…",

diff --git a/packages/ui/locales/es/views.json b/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...",

diff --git a/packages/ui/locales/fr/views.json b/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...",

diff --git a/packages/ui/src/components/chat/chat-diff-viewer.tsx b/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}

diff --git a/packages/ui/src/components/chat/chat-empty-preview-wrapper.tsx b/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 />

diff --git a/packages/ui/src/components/chat_deprecated.tsx b/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>

diff --git a/packages/ui/src/components/input.tsx b/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 }
diff --git a/packages/ui/src/components/label-marker.tsx b/packages/ui/src/components/label-marker.tsx
@@ -1,13 +1,12 @@
 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
 }
 
 export const LabelMarkerColor = {
@@ -26,22 +25,29 @@ 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 }) => {
+  const isDynamic = type === LabelType.DYNAMIC
+
   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="flex max-w-full items-center gap-2">
+      <span
+        className={cn(
+          `inline-flex text-12 leading-3 h-5 py-px px-2 items-center font-medium rounded overflow-hidden w-fit ${LabelMarkerColor[color]}`,
+          { 'pr-px': !!value }
+        )}
+      >
+        <span className={cn('truncate', { 'pr-1.5': !!value })}>{label}</span>
+
+        {!!value && (
+          <span
+            className={`flex h-full items-center overflow-hidden rounded-[3px] bg-label-background-black pl-1.5 pr-[7px]`}
+          >
+            <span className="max-w-full truncate">{value}</span>
+          </span>
+        )}
+      </span>
+
+      {isDynamic && <Icon name="circle-plus" size={12} className="text-icons-4" />}
+    </div>
   )
 }
diff --git a/packages/ui/src/components/language-selector/language-dialog.tsx b/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

diff --git a/packages/ui/src/components/multi-select.tsx b/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>

diff --git a/packages/ui/src/components/navbar-project-chooser.tsx b/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..."

diff --git a/packages/ui/src/components/navbar-skeleton/group.tsx b/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}

diff --git a/packages/ui/src/components/problems.tsx b/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>

diff --git a/packages/ui/src/components/select.tsx b/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

diff --git a/packages/ui/src/components/table.tsx b/packages/ui/src/components/table.tsx
@@ -8,7 +8,7 @@ const tableVariants = cva('w-full text-sm', {
     variant: {
       default: 'caption-bottom',
       asStackedList:
-        'bg-background-surface rounded-md border [&_td]:px-4 [&_td]:py-2.5 [&_td]:align-top [&_th]:px-4 [&_thead]:bg-background-2'
+        'rounded-md border bg-background-surface [&_td]:px-4 [&_td]:py-2.5 [&_td]:align-top [&_th]:px-4 [&_thead]:bg-background-2'
     }
   },
   defaultVariants: {

diff --git a/packages/ui/src/components/theme-selector-v2/theme-dialog.tsx b/packages/ui/src/components/theme-selector-v2/theme-dialog.tsx
@@ -38,8 +38,8 @@ const ThemeDialog: FC<ThemeDialogProps> = ({ defaultTheme, theme, open, onOpenCh
         {/* Mode */}
         <div className="mt-1 flex flex-col gap-y-5">
           <div className="flex flex-col">
-            <span className="text-16 text-foreground-1 font-medium">Mode</span>
-            <p className="text-14 text-foreground-3 mt-1.5 leading-snug">
+            <span className="text-16 font-medium text-foreground-1">Mode</span>
+            <p className="mt-1.5 text-14 leading-snug text-foreground-3">
               Choose Dark mode for low light or Light mode for bright spaces.
             </p>
             <div className="mt-[18px] grid grid-cols-2 gap-x-4">
@@ -63,7 +63,7 @@ const ThemeDialog: FC<ThemeDialogProps> = ({ defaultTheme, theme, open, onOpenCh
                         )}
                       />
                       {mode === item && (
-                        <Icon className="text-foreground-1 absolute bottom-2 left-2" name="checkbox-circle" size={16} />
+                        <Icon className="absolute bottom-2 left-2 text-foreground-1" name="checkbox-circle" size={16} />
                       )}
                       <div
                         className="absolute right-[27px] top-[61px] h-2 w-9 rounded-sm"
@@ -78,20 +78,20 @@ const ThemeDialog: FC<ThemeDialogProps> = ({ defaultTheme, theme, open, onOpenCh
                         aria-hidden
                       />
                     </div>
-                    <span className="text-14 text-foreground-1 leading-tight">{item}</span>
+                    <span className="text-14 leading-tight text-foreground-1">{item}</span>
                   </button>
                 )
               })}
             </div>
           </div>
 
-          <Separator className="bg-borders-4 h-px" />
+          <Separator className="h-px bg-borders-4" />
 
           {/* Contrast */}
           <div className="grid grid-cols-[246px_1fr] gap-x-8">
             <div>
-              <span className="text-16 text-foreground-1 font-medium">Contrast</span>
-              <p className="text-14 text-foreground-3 mt-1.5 leading-snug">
+              <span className="text-16 font-medium text-foreground-1">Contrast</span>
+              <p className="mt-1.5 text-14 leading-snug text-foreground-3">
                 High contrast improves readability, Dimmer mode reduces glare.
               </p>
             </div>
@@ -114,13 +114,13 @@ const ThemeDialog: FC<ThemeDialogProps> = ({ defaultTheme, theme, open, onOpenCh
             </Select>
           </div>
 
-          <Separator className="bg-borders-4 h-px" />
+          <Separator className="h-px bg-borders-4" />
 
           {/* Color Adjustment */}
           <div className="grid grid-cols-[246px_1fr] gap-x-8">
             <div>
-              <span className="text-16 text-foreground-1 font-medium">Color adjustment</span>
-              <p className="text-14 text-foreground-3 mt-1.5 leading-snug">
+              <span className="text-16 font-medium text-foreground-1">Color adjustment</span>
+              <p className="mt-1.5 text-14 leading-snug text-foreground-3">
                 Adjust colors for different types of color blindness.
               </p>
             </div>
@@ -143,13 +143,13 @@ const ThemeDialog: FC<ThemeDialogProps> = ({ defaultTheme, theme, open, onOpenCh
             </Select>
           </div>
 
-          <Separator className="bg-borders-4 h-px" />
+          <Separator className="h-px bg-borders-4" />
 
           {/* Accent Color */}
           <div className="grid grid-cols-[246px_1fr] gap-x-8">
             <div>
-              <span className="text-16 text-foreground-1 font-medium">Accent color</span>
-              <p className="text-14 text-foreground-3 mt-1.5 leading-snug">Select your application accent color.</p>
+              <span className="text-16 font-medium text-foreground-1">Accent color</span>
+              <p className="mt-1.5 text-14 leading-snug text-foreground-3">Select your application accent color.</p>
             </div>
             <div className="flex flex-wrap gap-1.5">
               {Object.values(AccentColor).map(item => (
@@ -176,13 +176,13 @@ const ThemeDialog: FC<ThemeDialogProps> = ({ defaultTheme, theme, open, onOpenCh
             </div>
           </div>
 
-          <Separator className="bg-borders-4 h-px" />
+          <Separator className="h-px bg-borders-4" />
 
           {/* Gray Color */}
           <div className="grid grid-cols-[246px_1fr] gap-x-8">
             <div>
-              <span className="text-16 text-foreground-1 font-medium">Gray color</span>
-              <p className="text-14 text-foreground-3 mt-1.5 leading-snug">Select your application gray color.</p>
+              <span className="text-16 font-medium text-foreground-1">Gray color</span>
+              <p className="mt-1.5 text-14 leading-snug text-foreground-3">Select your application gray color.</p>
             </div>
             <div className="flex flex-wrap gap-1.5">
               {Object.values(GrayColor).map(item => (