Reapply "feat(ui): add Button, Input, Label, Textarea components and update package dependencies"

tomast1337 · tomast1337 · commit 78222d3c9d6c · 2026-04-21T12:33:08.000-03:00
This reverts commit acbe421.
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
@@ -20,9 +20,11 @@
     "@nbw/config": "workspace:*",
     "@nbw/song": "workspace:*",
     "@nbw/thumbnail": "workspace:*",
+    "@nbw/validation": "workspace:*",
     "@next/mdx": "^16.0.8",
     "@next/third-parties": "^16.0.8",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slider": "^1.3.6",
diff --git a/apps/frontend/src/modules/shared/components/ui/button.tsx b/apps/frontend/src/modules/shared/components/ui/button.tsx
@@ -0,0 +1,58 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '@web/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-oklch(0.705 0.015 286.067) disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:focus-visible:ring-oklch(0.552 0.016 285.938)',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-oklch(0.21 0.006 285.885) text-oklch(0.985 0 0) shadow hover:bg-oklch(0.21 0.006 285.885)/90 dark:bg-oklch(0.92 0.004 286.32) dark:text-oklch(0.21 0.006 285.885) dark:hover:bg-oklch(0.92 0.004 286.32)/90',
+        destructive:
+          'bg-oklch(0.577 0.245 27.325) text-destructive-foreground shadow-sm hover:bg-oklch(0.577 0.245 27.325)/90 dark:bg-oklch(0.704 0.191 22.216) dark:hover:bg-oklch(0.704 0.191 22.216)/90',
+        outline:
+          'border border-oklch(0.92 0.004 286.32) bg-oklch(1 0 0) shadow-sm hover:bg-oklch(0.967 0.001 286.375) hover:text-oklch(0.21 0.006 285.885) dark:border-oklch(1 0 0 / 15%) dark:bg-oklch(0.141 0.005 285.823) dark:hover:bg-oklch(0.274 0.006 286.033) dark:hover:text-oklch(0.985 0 0)',
+        secondary:
+          'bg-oklch(0.967 0.001 286.375) text-oklch(0.21 0.006 285.885) shadow-sm hover:bg-oklch(0.967 0.001 286.375)/80 dark:bg-oklch(0.274 0.006 286.033) dark:text-oklch(0.985 0 0) dark:hover:bg-oklch(0.274 0.006 286.033)/80',
+        ghost:
+          'hover:bg-oklch(0.967 0.001 286.375) hover:text-oklch(0.21 0.006 285.885) dark:hover:bg-oklch(0.274 0.006 286.033) dark:hover:text-oklch(0.985 0 0)',
+        link: 'text-oklch(0.21 0.006 285.885) underline-offset-4 hover:underline dark:text-oklch(0.92 0.004 286.32)',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size }), className)}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
diff --git a/apps/frontend/src/modules/shared/components/ui/input.tsx b/apps/frontend/src/modules/shared/components/ui/input.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { cn } from '@web/lib/utils';
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-9 w-full rounded-md border border-oklch(0.92 0.004 286.32) bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-oklch(0.141 0.005 285.823) placeholder:text-oklch(0.552 0.016 285.938) focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-oklch(0.705 0.015 286.067) disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:border-oklch(1 0 0 / 10%) dark:border-oklch(1 0 0 / 15%) dark:file:text-oklch(0.985 0 0) dark:placeholder:text-oklch(0.705 0.015 286.067) dark:focus-visible:ring-oklch(0.552 0.016 285.938)',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = 'Input';
+
+export { Input };
diff --git a/apps/frontend/src/modules/shared/components/ui/label.tsx b/apps/frontend/src/modules/shared/components/ui/label.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '@web/lib/utils';
+
+const labelVariants = cva(
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
diff --git a/apps/frontend/src/modules/shared/components/ui/textarea.tsx b/apps/frontend/src/modules/shared/components/ui/textarea.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { cn } from '@web/lib/utils';
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<'textarea'>
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        'flex min-h-[60px] w-full rounded-md border border-oklch(0.92 0.004 286.32) bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-oklch(0.552 0.016 285.938) focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-oklch(0.705 0.015 286.067) disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:border-oklch(1 0 0 / 10%) dark:border-oklch(1 0 0 / 15%) dark:placeholder:text-oklch(0.705 0.015 286.067) dark:focus-visible:ring-oklch(0.552 0.016 285.938)',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Textarea.displayName = 'Textarea';
+
+export { Textarea };
diff --git a/apps/frontend/src/modules/song-upload/components/client/context/UploadSong.context.tsx b/apps/frontend/src/modules/song-upload/components/client/context/UploadSong.context.tsx
@@ -13,13 +13,13 @@ import { create } from 'zustand';
 
 import { BG_COLORS, THUMBNAIL_CONSTANTS, UPLOAD_CONSTANTS } from '@nbw/config';
 import { parseSongFromBuffer, type SongFileType } from '@nbw/song';
-import axiosInstance from '@web/lib/axios';
-import { InvalidTokenError, getTokenLocal } from '@web/lib/axios/token.utils';
 import {
   UploadSongFormInput,
   UploadSongFormOutput,
   uploadSongFormSchema,
 } from '@nbw/validation';
+import axiosInstance from '@web/lib/axios';
+import { InvalidTokenError, getTokenLocal } from '@web/lib/axios/token.utils';
 
 import UploadCompleteModal from '../UploadCompleteModal';
 
diff --git a/apps/frontend/src/modules/song/components/client/SongThumbnailInput.tsx b/apps/frontend/src/modules/song/components/client/SongThumbnailInput.tsx
@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 import { UseFormReturn } from 'react-hook-form';
 
 import { BG_COLORS, THUMBNAIL_CONSTANTS } from '@nbw/config';
+import { EditSongFormInput, UploadSongFormInput } from '@nbw/validation';
 import { cn } from '@web/lib/utils';
 import { Slider } from '@web/modules/shared/components/client/FormElements';
 import {
@@ -11,7 +12,6 @@ import {
 } from '@web/modules/shared/components/tooltip';
 
 import { useSongProvider } from './context/Song.context';
-import { EditSongFormInput, UploadSongFormInput } from '@nbw/validation';
 import { ThumbnailRendererCanvas } from './ThumbnailRenderer';
 
 const formatZoomLevel = (zoomLevel: number) => {
diff --git a/apps/frontend/src/modules/song/components/client/ThumbnailRenderer.tsx b/apps/frontend/src/modules/song/components/client/ThumbnailRenderer.tsx
@@ -6,7 +6,6 @@ import { UseFormReturn } from 'react-hook-form';
 import { THUMBNAIL_CONSTANTS } from '@nbw/config';
 import { NoteQuadTree } from '@nbw/song';
 import { drawNotesOffscreen, swap } from '@nbw/thumbnail/browser';
-
 import { UploadSongFormInput } from '@nbw/validation';
 
 type ThumbnailRendererCanvasProps = {
diff --git a/apps/frontend/src/modules/user/components/client/ProfileBioEditor.tsx b/apps/frontend/src/modules/user/components/client/ProfileBioEditor.tsx
@@ -10,6 +10,10 @@ import axiosInstance from '@web/lib/axios';
 import { getTokenLocal } from '@web/lib/axios/token.utils';
 import { type SocialLinks } from '@web/modules/auth/types/User';
 import { ProfileBioMarkdown } from '@web/modules/shared/components/ProfileBioMarkdown';
+import { Button } from '@web/modules/shared/components/ui/button';
+import { Input } from '@web/modules/shared/components/ui/input';
+import { Label } from '@web/modules/shared/components/ui/label';
+import { Textarea } from '@web/modules/shared/components/ui/textarea';
 
 import { socialKeys, SOCIAL_LINK_ICONS } from './socialKeys';
 
@@ -42,6 +46,9 @@ function cleanSocialLinks(links: SocialLinks): SocialLinks {
   return out;
 }
 
+const fieldInputClass =
+  'border-zinc-600 bg-zinc-900 text-zinc-100 placeholder:text-zinc-500';
+
 export function ProfileBioEditor({ profile, isOwner }: ProfileBioEditorProps) {
   const router = useRouter();
   const [isEditing, setIsEditing] = useState(false);
@@ -99,34 +106,40 @@ export function ProfileBioEditor({ profile, isOwner }: ProfileBioEditorProps) {
       <div className='flex items-start justify-between gap-2'>
         <h2 className='text-lg font-semibold text-zinc-200'>About</h2>
         {isOwner && !isEditing && (
-          <button
+          <Button
             type='button'
+            variant='ghost'
+            size='icon'
             onClick={() => setIsEditing(true)}
-            className='text-zinc-500 hover:text-zinc-300 p-1 rounded'
+            className='text-zinc-500 hover:bg-transparent hover:text-zinc-300'
             aria-label='Edit profile'
           >
-            <Pencil className='w-5 h-5' />
-          </button>
+            <Pencil className='h-5 w-5' />
+          </Button>
         )}
         {isOwner && isEditing && (
           <div className='flex gap-1'>
-            <button
+            <Button
               type='button'
+              variant='ghost'
+              size='icon'
               onClick={cancel}
-              className='text-zinc-500 hover:text-zinc-300 p-1 rounded'
+              className='text-zinc-500 hover:bg-transparent hover:text-zinc-300'
               aria-label='Cancel'
             >
-              <X className='w-5 h-5' />
-            </button>
-            <button
+              <X className='h-5 w-5' />
+            </Button>
+            <Button
               type='button'
+              variant='ghost'
+              size='icon'
               onClick={() => void save()}
               disabled={saving}
-              className='text-zinc-500 hover:text-zinc-300 p-1 rounded disabled:opacity-50'
+              className='text-zinc-500 hover:bg-transparent hover:text-zinc-300 disabled:opacity-50'
               aria-label='Save'
             >
-              <Check className='w-5 h-5' />
-            </button>
+              <Check className='h-5 w-5' />
+            </Button>
           </div>
         )}
       </div>
@@ -135,25 +148,30 @@ export function ProfileBioEditor({ profile, isOwner }: ProfileBioEditorProps) {
 
       {isEditing ? (
         <div className='mt-3 flex flex-col gap-4'>
-          <textarea
+          <Textarea
             value={description}
             onChange={(e) => setDescription(e.target.value)}
             rows={12}
-            className='w-full rounded-lg border border-zinc-600 bg-zinc-950 p-3 text-zinc-100 font-mono text-sm'
+            className={`font-mono text-sm min-h-48 ${fieldInputClass}`}
           />
           <div className='grid grid-cols-1 sm:grid-cols-2 gap-3'>
             {socialKeys.map((key) => {
               const Icon = SOCIAL_LINK_ICONS[key];
+              const id = `profile-social-${key}`;
               return (
-                <label key={key} className='flex flex-col gap-1 text-sm'>
-                  <span className='text-zinc-400 flex items-center gap-2 capitalize'>
+                <div key={key} className='flex flex-col gap-1 text-sm'>
+                  <Label
+                    htmlFor={id}
+                    className='text-zinc-400 flex items-center gap-2 capitalize font-normal'
+                  >
                     <Icon
                       className='w-4 h-4 shrink-0 text-zinc-500'
                       aria-hidden
                     />
                     {key}
-                  </span>
-                  <input
+                  </Label>
+                  <Input
+                    id={id}
                     type='url'
                     value={socialLinks[key] ?? ''}
                     onChange={(e) =>
@@ -162,10 +180,10 @@ export function ProfileBioEditor({ profile, isOwner }: ProfileBioEditorProps) {
                         [key]: e.target.value,
                       }))
                     }
-                    className='rounded border border-zinc-600 bg-zinc-900 px-2 py-1 text-zinc-100'
+                    className={`h-8 px-2 py-1 text-sm ${fieldInputClass}`}
                     placeholder='https://'
                   />
-                </label>
+                </div>
               );
             })}
           </div>
diff --git a/apps/frontend/src/modules/user/components/client/ProfilePublicNameEditor.tsx b/apps/frontend/src/modules/user/components/client/ProfilePublicNameEditor.tsx
@@ -7,6 +7,8 @@ import { useCallback, useEffect, useState } from 'react';
 import type { PublicProfileDto } from '@nbw/validation';
 import axiosInstance from '@web/lib/axios';
 import { getTokenLocal } from '@web/lib/axios/token.utils';
+import { Button } from '@web/modules/shared/components/ui/button';
+import { Input } from '@web/modules/shared/components/ui/input';
 
 type ProfilePublicNameEditorProps = {
   profile: PublicProfileDto;
@@ -66,12 +68,12 @@ export function ProfilePublicNameEditor({
     <div className='min-w-0'>
       <div className='flex items-center gap-2'>
         {isEditing ? (
-          <input
+          <Input
             type='text'
             value={publicName}
             onChange={(e) => setPublicName(e.target.value)}
             maxLength={100}
-            className='flex-1 min-w-0 text-2xl font-bold text-zinc-100 bg-zinc-900 border border-zinc-600 rounded-lg px-2 py-1'
+            className='flex-1 min-w-0 text-2xl font-bold text-zinc-100 h-auto py-1 border-zinc-600 bg-zinc-900'
             aria-label='Display name'
           />
         ) : (
@@ -80,34 +82,40 @@ export function ProfilePublicNameEditor({
           </h1>
         )}
         {!isEditing && (
-          <button
+          <Button
             type='button'
+            variant='ghost'
+            size='icon'
             onClick={() => setIsEditing(true)}
-            className='text-zinc-500 hover:text-zinc-300 p-1 rounded shrink-0'
+            className='shrink-0 text-zinc-500 hover:bg-transparent hover:text-zinc-300'
             aria-label='Edit display name'
           >
-            <Pencil className='w-5 h-5' />
-          </button>
+            <Pencil className='h-5 w-5' />
+          </Button>
         )}
         {isEditing && (
           <div className='flex gap-1 shrink-0'>
-            <button
+            <Button
               type='button'
+              variant='ghost'
+              size='icon'
               onClick={cancel}
-              className='text-zinc-500 hover:text-zinc-300 p-1 rounded'
+              className='text-zinc-500 hover:bg-transparent hover:text-zinc-300'
               aria-label='Cancel'
             >
-              <X className='w-5 h-5' />
-            </button>
-            <button
+              <X className='h-5 w-5' />
+            </Button>
+            <Button
               type='button'
+              variant='ghost'
+              size='icon'
               onClick={() => void save()}
               disabled={saving || publicName.trim().length === 0}
-              className='text-zinc-500 hover:text-zinc-300 p-1 rounded disabled:opacity-50'
+              className='text-zinc-500 hover:bg-transparent hover:text-zinc-300 disabled:opacity-50'
               aria-label='Save'
             >
-              <Check className='w-5 h-5' />
-            </button>
+              <Check className='h-5 w-5' />
+            </Button>
           </div>
         )}
       </div>
diff --git a/apps/frontend/src/modules/user/features/profile.util.ts b/apps/frontend/src/modules/user/features/profile.util.ts
@@ -3,7 +3,6 @@ import type {
   PublicProfileDto,
   SongPreviewDto,
 } from '@nbw/validation';
-
 import axiosInstance from '@web/lib/axios';
 
 /** Profile URL uses normalized `username` (same rules as account username). */
diff --git a/bun.lock b/bun.lock
