feat: transfer form-field-set components to ui/components

pixel-point · Dec 4, 2024 · 7ef40bd · 7ef40bd
1 parent a884c8e
commit 7ef40bd
Show file tree

Hide file tree

Showing 16 changed files with 95 additions and 51 deletions.
diff --git a/packages/ui/src/components/button.tsx b/packages/ui/src/components/button.tsx
@@ -12,11 +12,11 @@ const buttonVariants = cva(
       variant: {
         default:
           'bg-background-5 text-foreground-6 hover:bg-background-10 disabled:bg-background-6 disabled:text-foreground-9',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm',
+        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
         outline:
-          'border-borders-2 text-foreground-2 hover:border-borders-6 hover:text-foreground-8 border bg-transparent',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm',
-        tertiary: 'bg-tertiary text-secondary-foreground hover:bg-tertiary/80 shadow-sm',
+          'border border-borders-2 bg-transparent text-foreground-2 hover:border-borders-6 hover:text-foreground-8',
+        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        tertiary: 'bg-tertiary text-secondary-foreground shadow-sm hover:bg-tertiary/80',
         ghost: 'hover:bg-background-12 hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
         link_accent: 'text-foreground-accent underline-offset-4 hover:underline',

diff --git a/packages/ui/src/components/checkbox.tsx b/packages/ui/src/components/checkbox.tsx
@@ -15,7 +15,7 @@ const Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxP
     <div className={cn('flex gap-x-2.5', className)}>
       <CheckboxPrimitive.Root
         ref={ref}
-        className="border-icons-1 hover:border-icons-3 disabled:border-icons-4 data-[state=checked]:border-icons-2 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow disabled:cursor-not-allowed"
+        className="peer size-4 shrink-0 rounded-sm border border-icons-1 shadow hover:border-icons-3 disabled:cursor-not-allowed disabled:border-icons-4 data-[state=checked]:border-icons-2 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
         {...props}
       >
         <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>

diff --git a/packages/ui/src/components/form-legend.tsx b/packages/ui/src/components/form-legend.tsx
@@ -0,0 +1,24 @@
+import { ReactNode } from 'react'
+
+import { Text } from '@components/text'
+
+interface FormLegendProps {
+  title: ReactNode
+  description?: ReactNode
+  className?: string
+}
+
+export function FormLegend({ title, description, className }: FormLegendProps) {
+  return (
+    <div className={className}>
+      <Text size={3} weight={'medium'} as="p" role="heading">
+        {title}
+      </Text>
+      {description && (
+        <Text size={2} as="p" id="fieldset-description">
+          {description}
+        </Text>
+      )}
+    </div>
+  )
+}
diff --git a/packages/ui/src/components/form-separator.tsx b/packages/ui/src/components/form-separator.tsx
@@ -0,0 +1,17 @@
+import { cn } from '@utils/cn'
+
+interface FormSeparatorProps {
+  dashed?: boolean
+  dotted?: boolean
+  className?: string
+}
+
+export function FormSeparator({ dashed, dotted, className }: FormSeparatorProps) {
+  return (
+    <div
+      className={cn('border-b', { 'border-dashed': dashed, 'border-dotted': dotted }, className)}
+      role="separator"
+      aria-orientation="horizontal"
+    />
+  )
+}
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
@@ -41,6 +41,8 @@ export * from './breadcrumb'
 export * from './skeleton-list'
 export * from './dialog'
 export * from './path-breadcrumbs'
+export * from './form-separator'
+export * from './form-legend'
 
 export * as ShaBadge from './sha-badge'
 export * as ListActions from './list-actions'

diff --git a/packages/ui/src/components/input.tsx b/packages/ui/src/components/input.tsx
@@ -12,11 +12,11 @@ export interface BaseInputProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>,
     VariantProps<typeof inputVariants> {}
 
-const inputVariants = cva('text-foreground-1 bg-transparent px-2.5 py-1 disabled:cursor-not-allowed', {
+const inputVariants = cva('bg-transparent px-2.5 py-1 text-foreground-1 disabled:cursor-not-allowed', {
   variants: {
     variant: {
       default:
-        'placeholder:text-foreground-4 flex w-full rounded border text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:rounded focus-visible:outline-none',
+        'flex w-full rounded border text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-foreground-4 focus-visible:rounded focus-visible:outline-none',
       extended: 'grow border-none focus-visible:outline-none'
     },
     size: {
@@ -72,7 +72,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           </FormErrorMessage>
         )}
         {caption && (
-          <Text className="text-foreground-4 mt-1 leading-snug" size={2}>
+          <Text className="mt-1 leading-snug text-foreground-4" size={2}>
             {caption}
           </Text>
         )}

diff --git a/packages/ui/src/components/label.tsx b/packages/ui/src/components/label.tsx
@@ -41,7 +41,7 @@ interface LabelProps extends VariantProps<typeof labelVariants>, PropsWithChildr
 const Label = ({ htmlFor, optional, color, variant, children, className }: LabelProps) => {
   return (
     <LabelRoot htmlFor={htmlFor} variant={variant} color={color} className={className}>
-      {children} {optional && <span className="text-foreground-7 align-top">(optional)</span>}
+      {children} {optional && <span className="align-top text-foreground-7">(optional)</span>}
     </LabelRoot>
   )
 }

diff --git a/packages/ui/src/components/manage-navigation/index.tsx b/packages/ui/src/components/manage-navigation/index.tsx
@@ -127,7 +127,7 @@ export const ManageNavigation = ({
         </AlertDialogHeader>
         <ScrollArea className="-mx-5 -mb-5 mt-1">
           <div className="px-5">
-            <Text className="text-foreground-7 inline-block leading-none" size={1}>
+            <Text className="inline-block leading-none text-foreground-7" size={1}>
               Pinned
             </Text>
             {!currentPinnedItems.length ? (

diff --git a/packages/ui/src/components/radio-group.tsx b/packages/ui/src/components/radio-group.tsx
@@ -1,6 +1,5 @@
 import { ComponentPropsWithoutRef, ElementRef, FC, forwardRef, ReactElement, ReactNode } from 'react'
 
-import { CheckIcon } from '@radix-ui/react-icons'
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
 import { cn } from '@utils/cn'
 
@@ -64,14 +63,12 @@ const RadioButton = forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        'border-primary hover:border-icons-3 text-icons-5 aspect-square h-4 w-4 rounded-full border shadow focus-visible:rounded-full disabled:cursor-not-allowed disabled:border-icons-4',
+        'relative border-primary hover:border-icons-3 text-icons-5 aspect-square h-4 w-4 rounded-full border shadow focus-visible:rounded-full disabled:cursor-not-allowed disabled:border-icons-4 flex items-center justify-center',
         className
       )}
       {...props}
     >
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <CheckIcon className="size-3.5 fill-icons-2" />
-      </RadioGroupPrimitive.Indicator>
+      <RadioGroupPrimitive.Indicator className="bg-primary size-2 rounded-full" />
     </RadioGroupPrimitive.Item>
   )
 })

diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
@@ -49,7 +49,7 @@ const Select: FC<SelectProps> = ({
       </FormErrorMessage>
     )}
     {caption && (
-      <Text className="text-foreground-4 mt-1 leading-snug" size={2}>
+      <Text className="mt-1 leading-snug text-foreground-4" size={2}>
         {caption}
       </Text>
     )}

diff --git a/packages/ui/src/components/textarea.tsx b/packages/ui/src/components/textarea.tsx
@@ -46,7 +46,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           </FormErrorMessage>
         )}
         {caption && (
-          <Text className="text-foreground-4 mt-1 leading-snug" size={2}>
+          <Text className="mt-1 leading-snug text-foreground-4" size={2}>
             {caption}
           </Text>
         )}

diff --git a/packages/ui/src/views/pull-request/compare/components/pull-request-compare-form.tsx b/packages/ui/src/views/pull-request/compare/components/pull-request-compare-form.tsx
@@ -1,15 +1,11 @@
 import { forwardRef } from 'react'
 import { FieldErrors, SubmitHandler, UseFormHandleSubmit, UseFormRegister } from 'react-hook-form'
 
-import { MessageTheme } from '@components/form-field-set'
-import * as FormFieldSet from '@components/form-field-set'
+import { ErrorMessageTheme, Fieldset, Input, Textarea } from '@/components'
 import { Text } from '@components/text'
 import { z } from 'zod'
 
-import { Input, Textarea } from '@harnessio/ui/components'
-
 // Define the form schema
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const formSchemaCompare = z.object({
   title: z.string().min(1, { message: 'Please provide a pull request title' }),
   description: z.string().optional()
@@ -35,26 +31,30 @@ const PullRequestCompareForm = forwardRef<HTMLFormElement, PullRequestFormProps>
     }
     return (
       <form ref={ref} onSubmit={handleSubmit(onSubmit)}>
-        <FormFieldSet.Root>
-          <FormFieldSet.ControlGroup>
-            <FormFieldSet.Label htmlFor="title" required>
-              Title
-            </FormFieldSet.Label>
-            <Input id="title" {...register('title')} placeholder="Enter pull request title" autoFocus />
-            {errors.title && (
-              <FormFieldSet.Message theme={MessageTheme.ERROR}>{errors.title.message?.toString()}</FormFieldSet.Message>
-            )}
-          </FormFieldSet.ControlGroup>
-          <FormFieldSet.ControlGroup>
-            <FormFieldSet.Label htmlFor="description">Description</FormFieldSet.Label>
-            <Textarea id="description" {...register('description')} placeholder="Add Pull Request description here." />
-            {errors.description && (
-              <FormFieldSet.Message theme={MessageTheme.ERROR}>
-                {errors.description.message?.toString()}
-              </FormFieldSet.Message>
-            )}
-          </FormFieldSet.ControlGroup>
-        </FormFieldSet.Root>
+        <Fieldset>
+          <Input
+            id="title"
+            {...register('title')}
+            placeholder="Enter pull request title"
+            label="Title"
+            error={
+              errors.title && {
+                theme: ErrorMessageTheme.ERROR,
+                message: errors.title.message?.toString()
+              }
+            }
+            autoFocus
+          />
+          <Textarea
+            id="description"
+            {...register('description')}
+            placeholder="Add Pull Request description here."
+            label="Description"
+            error={
+              errors.description && { theme: ErrorMessageTheme.ERROR, message: errors.description.message?.toString() }
+            }
+          />
+        </Fieldset>
 
         {apiError && apiError !== "head branch doesn't contain any new commits." && (
           <Text size={1} className="text-destructive">

diff --git a/packages/ui/src/views/repo/components/branch-selector/branch-selector-dropdown.tsx b/packages/ui/src/views/repo/components/branch-selector/branch-selector-dropdown.tsx
@@ -80,7 +80,7 @@ export const BranchSelectorDropdown: FC<BranchSelectorDropdownProps> = ({
   return (
     <DropdownMenuContent className="w-[298px] p-0" align="start">
       <div className="px-3 pt-2">
-        <span className="leading-none text-14 font-medium">Switch branches/tags</span>
+        <span className="text-14 font-medium leading-none">Switch branches/tags</span>
 
         <SearchBox.Root
           className="mt-[18px] w-full"
@@ -137,7 +137,7 @@ export const BranchSelectorDropdown: FC<BranchSelectorDropdownProps> = ({
       <div className="mt-1">
         {filteredItems.length === 0 && (
           <div className="px-5 py-4 text-center">
-            <span className="leading-tight text-foreground-2 text-14">Nothing to show</span>
+            <span className="text-14 leading-tight text-foreground-2">Nothing to show</span>
           </div>
         )}
 
@@ -196,7 +196,7 @@ export const BranchSelectorDropdown: FC<BranchSelectorDropdownProps> = ({
         <DropdownMenuItem className="p-0" asChild>
           <div className="mt-1 border-t border-borders-1 px-3 py-2">
             <Link to={viewAllUrl}>
-              <span className="leading-none transition-colors duration-200 hover:text-foreground-1 text-14 font-medium">
+              <span className="text-14 font-medium leading-none transition-colors duration-200 hover:text-foreground-1">
                 {t('views:repos.viewAll', 'View all {{type}}', {
                   type: activeTab === BranchSelectorTab.BRANCHES ? t('views:repos.branches') : t('views:repos.tags')
                 })}

diff --git a/packages/ui/src/views/repo/repo-create/index.tsx b/packages/ui/src/views/repo/repo-create/index.tsx
@@ -113,7 +113,7 @@ export function RepoCreatePage({
           Create a new repository
         </Text>
         <Spacer size={2.5} />
-        <Text className="text-foreground-2 max-w-[476px]" size={2} as="p">
+        <Text className="max-w-[476px] text-foreground-2" size={2} as="p">
           A repository contains all project files, including the revision history. Already have a project repository
           elsewhere?{' '}
           <StyledLink to="../import" relative="path">
@@ -214,7 +214,7 @@ export function RepoCreatePage({
           {/* ACCESS */}
           <Fieldset>
             <ControlGroup>
-              <Text className="text-foreground-2 leading-none" size={2}>
+              <Text className="leading-none text-foreground-2" size={2}>
                 Who has access
               </Text>
               <RadioGroup className="mt-6" value={accessValue} onValueChange={handleAccessChange} id="access">
@@ -245,7 +245,7 @@ export function RepoCreatePage({
           {/* README */}
           <Fieldset>
             <ControlGroup>
-              <Text className="text-foreground-2 leading-none" size={2}>
+              <Text className="leading-none text-foreground-2" size={2}>
                 Initialize this repository with
               </Text>
               <RadioGroupItem

diff --git a/packages/ui/src/views/repo/repo-summary/components/summary-panel.tsx b/packages/ui/src/views/repo/repo-summary/components/summary-panel.tsx
@@ -46,7 +46,7 @@ const SummaryPanel: FC<SummaryPanelProps> = ({
   return (
     <div className="flex flex-col">
       <div className="flex items-center justify-between">
-        <span className="text-18 font-medium truncate">{title}</span>
+        <span className="truncate text-18 font-medium">{title}</span>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button variant="ghost" size="sm_icon" aria-label="More options">
@@ -63,7 +63,7 @@ const SummaryPanel: FC<SummaryPanelProps> = ({
       </div>
       <Spacer size={3} />
       {description?.length && !isEditingDescription && (
-        <span className="line-clamp-3 py-3 border-y border-borders-4 text-foreground-2 text-14">{description}</span>
+        <span className="line-clamp-3 border-y border-borders-4 py-3 text-14 text-foreground-2">{description}</span>
       )}
       {isEditingDescription && (
         <div>
@@ -95,7 +95,7 @@ const SummaryPanel: FC<SummaryPanelProps> = ({
         </div>
       )}
       <Spacer size={2} />
-      {timestamp && <span className="text-foreground-4 text-13">Created {timestamp}</span>}
+      {timestamp && <span className="text-13 text-foreground-4">Created {timestamp}</span>}
       <Spacer size={5} />
       <div className="flex flex-col gap-3">
         {details &&

diff --git a/packages/views/src/components/form-field-set.tsx b/packages/views/src/components/form-field-set.tsx
@@ -82,6 +82,7 @@ function Root({ children, box, shaded, className }: RootProps) {
   )
 }
 
+/** @deprecated: Use FormLegend from @harnessio/ui/components instead */
 function Legend({ children, className }: CompProps) {
   return (
     <Text size={3} weight={'medium'} className={cn('mb-0', className)} as="p" role="heading">
@@ -90,6 +91,7 @@ function Legend({ children, className }: CompProps) {
   )
 }
 
+/** @deprecated: Use FormLegend from @harnessio/ui/components instead */
 function SubLegend({ children, className }: CompProps) {
   return (
     <Text size={2} weight={'normal'} className={cn('text-primary/70 mb-0', className)} as="p" id="fieldset-description">
@@ -98,6 +100,7 @@ function SubLegend({ children, className }: CompProps) {
   )
 }
 
+/** @deprecated */
 function Item({ children, className }: CompProps) {
   return (
     <div className={cn('item-wrapper', className)} role="presentation">
@@ -173,6 +176,7 @@ function Option({ control, id, label, description, className }: OptionProps) {
   )
 }
 
+/** @deprecated: Use FormSeparator from @harnessio/ui/components instead */
 function Separator({ dashed, dotted, className }: SeparatorProps) {
   return (
     <div