refactor(ui): update InputGroup and related components to use InputGroupAddon

Author: Marfuen

apps/storybook/stories/InputGroup.stories.tsx

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import {
   InputGroup,
+  InputGroupAddon,
   InputGroupButton,
   InputGroupInput,
-  InputGroupText,
   Label,
   Stack,
 } from '@trycompai/ui-shadcn';
@@ -25,9 +25,9 @@ export const WithIconLeft: Story = {
   render: () => (
     <div className="w-[300px]">
       <InputGroup>
-        <InputGroupText>
-          <Search className="h-4 w-4" />
-        </InputGroupText>
+        <InputGroupAddon align="inline-start">
+          <Search />
+        </InputGroupAddon>
         <InputGroupInput placeholder="Search..." />
       </InputGroup>
     </div>
@@ -39,9 +39,9 @@ export const WithIconRight: Story = {
     <div className="w-[300px]">
       <InputGroup>
         <InputGroupInput placeholder="Enter email" />
-        <InputGroupText>
-          <Mail className="h-4 w-4" />
-        </InputGroupText>
+        <InputGroupAddon align="inline-end">
+          <Mail />
+        </InputGroupAddon>
       </InputGroup>
     </div>
   ),
@@ -51,7 +51,7 @@ export const WithPrefix: Story = {
   render: () => (
     <div className="w-[300px]">
       <InputGroup>
-        <InputGroupText>https://</InputGroupText>
+        <InputGroupAddon align="inline-start">https://</InputGroupAddon>
         <InputGroupInput placeholder="example.com" />
       </InputGroup>
     </div>
@@ -63,7 +63,7 @@ export const WithSuffix: Story = {
     <div className="w-[300px]">
       <InputGroup>
         <InputGroupInput placeholder="Username" />
-        <InputGroupText>@company.com</InputGroupText>
+        <InputGroupAddon align="inline-end">@company.com</InputGroupAddon>
       </InputGroup>
     </div>
   ),
@@ -73,11 +73,11 @@ export const Currency: Story = {
   render: () => (
     <div className="w-[200px]">
       <InputGroup>
-        <InputGroupText>
-          <DollarSign className="h-4 w-4" />
-        </InputGroupText>
+        <InputGroupAddon align="inline-start">
+          <DollarSign />
+        </InputGroupAddon>
         <InputGroupInput type="number" placeholder="0.00" />
-        <InputGroupText>USD</InputGroupText>
+        <InputGroupAddon align="inline-end">USD</InputGroupAddon>
       </InputGroup>
     </div>
   ),
@@ -89,7 +89,7 @@ export const WithButton: Story = {
       <InputGroup>
         <InputGroupInput defaultValue="https://example.com/share/abc123" readOnly />
         <InputGroupButton>
-          <Copy className="h-4 w-4 mr-2" />
+          <Copy />
           Copy
         </InputGroupButton>
       </InputGroup>
@@ -104,27 +104,27 @@ export const AllExamples: Story = {
         <Stack gap="2">
           <Label>Search</Label>
           <InputGroup>
-            <InputGroupText>
-              <Search className="h-4 w-4" />
-            </InputGroupText>
+            <InputGroupAddon align="inline-start">
+              <Search />
+            </InputGroupAddon>
             <InputGroupInput placeholder="Search..." />
           </InputGroup>
         </Stack>
 
         <Stack gap="2">
           <Label>Website</Label>
           <InputGroup>
-            <InputGroupText>https://</InputGroupText>
+            <InputGroupAddon align="inline-start">https://</InputGroupAddon>
             <InputGroupInput placeholder="example.com" />
           </InputGroup>
         </Stack>
 
         <Stack gap="2">
           <Label>Price</Label>
           <InputGroup>
-            <InputGroupText>$</InputGroupText>
+            <InputGroupAddon align="inline-start">$</InputGroupAddon>
             <InputGroupInput type="number" placeholder="0.00" />
-            <InputGroupText>USD</InputGroupText>
+            <InputGroupAddon align="inline-end">USD</InputGroupAddon>
           </InputGroup>
         </Stack>
       </Stack>

package.json

@@ -76,7 +76,7 @@
     "docker:down": "bun run -F @comp/db docker:down",
     "docker:up": "bun run -F @comp/db docker:up",
     "format": "prettier --write .",
-    "lint": "turbo lint --filter=@comp/portal --filter=@trycompai/ui-v2",
+    "lint": "turbo lint --filter=@comp/portal --filter=@comp/storybook --filter=@trycompai/ui-shadcn",
     "prepare": "husky",
     "test": "turbo test --parallel",
     "test:release": "node scripts/test-release.js",

packages/ui-shadcn/src/components/ui/alert.tsx

@@ -34,7 +34,8 @@ const variantIcons = {
 type AlertVariant = NonNullable<VariantProps<typeof alertVariants>['variant']>;
 
 interface AlertProps
-  extends Omit<React.ComponentProps<'div'>, 'className' | 'title'>,
+  extends
+    Omit<React.ComponentProps<'div'>, 'className' | 'title'>,
     VariantProps<typeof alertVariants> {
   /** Alert title - renders AlertTitle component */
   title?: React.ReactNode;

packages/ui-shadcn/src/components/ui/command.tsx

@@ -4,8 +4,8 @@ import { Command as CommandPrimitive } from 'cmdk';
 import * as React from 'react';
 
 import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
-import { CheckIcon, SearchIcon } from 'lucide-react';
 import { cva, type VariantProps } from 'class-variance-authority';
+import { CheckIcon, SearchIcon } from 'lucide-react';
 
 const commandVariants = cva(
   'bg-popover text-popover-foreground rounded-xl p-1 flex size-full flex-col overflow-hidden',
@@ -25,17 +25,12 @@ const commandVariants = cva(
 );
 
 interface CommandProps
-  extends Omit<React.ComponentProps<typeof CommandPrimitive>, 'className'>,
+  extends
+    Omit<React.ComponentProps<typeof CommandPrimitive>, 'className'>,
     VariantProps<typeof commandVariants> {}
 
 function Command({ width, ...props }: CommandProps) {
-  return (
-    <CommandPrimitive
-      data-slot="command"
-      className={commandVariants({ width })}
-      {...props}
-    />
-  );
+  return <CommandPrimitive data-slot="command" className={commandVariants({ width })} {...props} />;
 }
 
 function CommandDialog({

packages/ui-shadcn/src/components/ui/grid.tsx

@@ -5,15 +5,6 @@ import { cn } from '../../../lib/utils';
 
 const gridVariants = cva('grid', {
   variants: {
-    cols: {
-      '1': 'grid-cols-1',
-      '2': 'grid-cols-2',
-      '3': 'grid-cols-3',
-      '4': 'grid-cols-4',
-      '5': 'grid-cols-5',
-      '6': 'grid-cols-6',
-      '12': 'grid-cols-12',
-    },
     gap: {
       '0': 'gap-0',
       '1': 'gap-1',
@@ -34,12 +25,28 @@ const gridVariants = cva('grid', {
     },
   },
   defaultVariants: {
-    cols: '1',
     gap: '4',
     align: 'stretch',
   },
 });
 
+const gridColsVariants = cva('', {
+  variants: {
+    cols: {
+      '1': 'grid-cols-1',
+      '2': 'grid-cols-2',
+      '3': 'grid-cols-3',
+      '4': 'grid-cols-4',
+      '5': 'grid-cols-5',
+      '6': 'grid-cols-6',
+      '12': 'grid-cols-12',
+    },
+  },
+  defaultVariants: {
+    cols: '1',
+  },
+});
+
 type ResponsiveCols = {
   base?: '1' | '2' | '3' | '4' | '5' | '6' | '12';
   sm?: '1' | '2' | '3' | '4' | '5' | '6' | '12';
@@ -98,8 +105,9 @@ const responsiveColsMap: Record<string, Record<string, string>> = {
 
 const getResponsiveClasses = (cols: ResponsiveCols): string => {
   const classes: string[] = [];
+  const withBase: ResponsiveCols = cols.base ? cols : { base: '1', ...cols };
 
-  for (const [breakpoint, value] of Object.entries(cols)) {
+  for (const [breakpoint, value] of Object.entries(withBase)) {
     if (value && responsiveColsMap[breakpoint]?.[value]) {
       classes.push(responsiveColsMap[breakpoint][value]);
     }
@@ -111,20 +119,16 @@ const getResponsiveClasses = (cols: ResponsiveCols): string => {
 interface GridProps
   extends
     Omit<React.ComponentProps<'div'>, 'cols' | 'className'>,
-    Omit<VariantProps<typeof gridVariants>, 'cols'> {
+    VariantProps<typeof gridVariants> {
   cols?: '1' | '2' | '3' | '4' | '5' | '6' | '12' | ResponsiveCols;
 }
 
 function Grid({ cols = '1', gap, align, ...props }: GridProps) {
   const colsClasses =
-    typeof cols === 'object' ? getResponsiveClasses(cols) : gridVariants({ cols });
+    typeof cols === 'object' ? getResponsiveClasses(cols) : gridColsVariants({ cols });
 
   return (
-    <div
-      data-slot="grid"
-      className={cn('grid', colsClasses, gridVariants({ gap, align, cols: undefined }))}
-      {...props}
-    />
+    <div data-slot="grid" className={cn(gridVariants({ gap, align }), colsClasses)} {...props} />
   );
 }
 

packages/ui-shadcn/src/components/ui/input-group.tsx

@@ -6,15 +6,12 @@ import * as React from 'react';
 import { cn } from '../../../lib/utils';
 import { buttonVariants } from './button';
 
-function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
+function InputGroup({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
   return (
     <div
       data-slot="input-group"
       role="group"
-      className={cn(
-        'border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-9 rounded-md border shadow-xs transition-[color,box-shadow] has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto',
-        className,
-      )}
+      className="border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-9 rounded-md border shadow-xs transition-[color,box-shadow] has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto"
       {...props}
     />
   );
@@ -40,16 +37,15 @@ const inputGroupAddonVariants = cva(
 );
 
 function InputGroupAddon({
-  className,
   align = 'inline-start',
   ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {
+}: Omit<React.ComponentProps<'div'>, 'className'> & VariantProps<typeof inputGroupAddonVariants>) {
   return (
     <div
       role="group"
       data-slot="input-group-addon"
       data-align={align}
-      className={cn(inputGroupAddonVariants({ align }), className)}
+      className={inputGroupAddonVariants({ align })}
       onClick={(e) => {
         if ((e.target as HTMLElement).closest('button')) {
           return;
@@ -95,16 +91,11 @@ function InputGroupButton({
   );
 }
 
-function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
-  return (
-    <span
-      className={cn(
-        "text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
-        className,
-      )}
-      {...props}
-    />
-  );
+function InputGroupText({
+  align = 'inline-start',
+  ...props
+}: Omit<React.ComponentProps<'div'>, 'className'> & VariantProps<typeof inputGroupAddonVariants>) {
+  return <InputGroupAddon align={align} {...props} />;
 }
 
 function InputGroupInput({ ...props }: Omit<React.ComponentProps<'input'>, 'className'>) {

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

@@ -93,10 +93,7 @@ function SelectLabel({ ...props }: Omit<SelectPrimitive.GroupLabel.Props, 'class
   );
 }
 
-function SelectItem({
-  children,
-  ...props
-}: Omit<SelectPrimitive.Item.Props, 'className'>) {
+function SelectItem({ children, ...props }: Omit<SelectPrimitive.Item.Props, 'className'>) {
   return (
     <SelectPrimitive.Item
       data-slot="select-item"

packages/ui-shadcn/src/components/ui/table.tsx

@@ -57,7 +57,9 @@ function TableCell({ ...props }: Omit<React.ComponentProps<'td'>, 'className'>)
 }
 
 function TableCaption({ ...props }: Omit<React.ComponentProps<'caption'>, 'className'>) {
-  return <caption data-slot="table-caption" className="text-muted-foreground mt-4 text-sm" {...props} />;
+  return (
+    <caption data-slot="table-caption" className="text-muted-foreground mt-4 text-sm" {...props} />
+  );
 }
 
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

packages/ui-shadcn/src/components/ui/text.tsx

@@ -42,8 +42,7 @@ const textVariants = cva('', {
 });
 
 interface TextProps
-  extends Omit<React.HTMLAttributes<HTMLElement>, 'className'>,
-    VariantProps<typeof textVariants> {
+  extends Omit<React.HTMLAttributes<HTMLElement>, 'className'>, VariantProps<typeof textVariants> {
   as?: 'p' | 'span' | 'div';
 }
 

packages/ui-shadcn/src/components/ui/toggle-group.tsx

@@ -84,4 +84,4 @@ function ToggleGroupItem({
 }
 
 export { ToggleGroup, ToggleGroupItem };
-export type { ToggleGroupProps, ToggleGroupItemProps };
+export type { ToggleGroupItemProps, ToggleGroupProps };