feat(tooltips): new emcn component emerged

Author: emir-karabeg

apps/sim/app/workspace/[workspaceId]/providers/providers.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import React from 'react'
-import { TooltipProvider } from '@/components/ui/tooltip'
+import { TooltipProvider } from '@/components/emcn'
 import { WorkspacePermissionsProvider } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { SettingsLoader } from './settings-loader'
 
@@ -13,7 +13,7 @@ const Providers = React.memo<ProvidersProps>(({ children }) => {
   return (
     <>
       <SettingsLoader />
-      <TooltipProvider delayDuration={100} skipDelayDuration={0}>
+      <TooltipProvider delayDuration={1000} skipDelayDuration={0}>
         <WorkspacePermissionsProvider>{children}</WorkspacePermissionsProvider>
       </TooltipProvider>
     </>

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar-new.tsx

@@ -3,7 +3,14 @@
 import { useCallback, useRef, useState } from 'react'
 import { ArrowDown, Plus, Search } from 'lucide-react'
 import { useParams } from 'next/navigation'
-import { Badge, ChevronDown, PanelLeft } from '@/components/emcn'
+import {
+  Badge,
+  ChevronDown,
+  PanelLeft,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/emcn'
 import { Button } from '@/components/emcn/components/button'
 import { FolderPlus } from '@/components/emcn/icons'
 import { useSession } from '@/lib/auth-client'
@@ -139,33 +146,51 @@ export function SidebarNew() {
                   Workflows
                 </div>
                 <div className='flex items-center justify-center gap-[10px]'>
-                  <Button
-                    variant='default'
-                    className='translate-y-[-0.25px] p-[1px]'
-                    onClick={handleImportWorkflow}
-                    disabled={isImporting}
-                    title={isImporting ? 'Importing workflow...' : 'Import workflow from JSON'}
-                  >
-                    <ArrowDown className='h-[14px] w-[14px]' />
-                  </Button>
-                  <Button
-                    variant='default'
-                    className='mr-[1px] translate-y-[-0.25px] p-[1px]'
-                    onClick={handleCreateFolder}
-                    disabled={isCreatingFolder}
-                    title={isCreatingFolder ? 'Creating folder...' : 'Create new folder'}
-                  >
-                    <FolderPlus className='h-[14px] w-[14px]' />
-                  </Button>
-                  <Button
-                    variant='outline'
-                    className='translate-y-[-0.25px] p-[1px]'
-                    onClick={handleCreateWorkflow}
-                    disabled={isCreatingWorkflow}
-                    title={isCreatingWorkflow ? 'Creating workflow...' : 'Create new workflow'}
-                  >
-                    <Plus className='h-[14px] w-[14px]' />
-                  </Button>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant='default'
+                        className='translate-y-[-0.25px] p-[1px]'
+                        onClick={handleImportWorkflow}
+                        disabled={isImporting}
+                      >
+                        <ArrowDown className='h-[14px] w-[14px]' />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>{isImporting ? 'Importing workflow...' : 'Import from JSON'}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant='default'
+                        className='mr-[1px] translate-y-[-0.25px] p-[1px]'
+                        onClick={handleCreateFolder}
+                        disabled={isCreatingFolder}
+                      >
+                        <FolderPlus className='h-[14px] w-[14px]' />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>{isCreatingFolder ? 'Creating folder...' : 'Create folder'}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant='outline'
+                        className='translate-y-[-0.25px] p-[1px]'
+                        onClick={handleCreateWorkflow}
+                        disabled={isCreatingWorkflow}
+                      >
+                        <Plus className='h-[14px] w-[14px]' />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>{isCreatingWorkflow ? 'Creating workflow...' : 'Create workflow'}</p>
+                    </TooltipContent>
+                  </Tooltip>
                 </div>
               </div>
             </div>

apps/sim/components/emcn/components/index.ts

@@ -1,2 +1,3 @@
 export { Badge } from './badge'
 export { Button } from './button'
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip'

apps/sim/components/emcn/components/tooltip.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { cn } from '@/lib/utils'
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 6, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      'z-[60] rounded-[3px] bg-black px-[7.5px] py-[2.5px] font-base text-white text-xs shadow-md dark:bg-white dark:text-black',
+      className
+    )}
+    {...props}
+  >
+    {props.children}
+    <TooltipPrimitive.Arrow className='fill-black dark:fill-white' />
+  </TooltipPrimitive.Content>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

apps/sim/tailwind.config.ts

@@ -15,6 +15,7 @@ export default {
         season: ['var(--font-season)'],
       },
       fontSize: {
+        xs: '11px',
         small: '13px', // Override default 14px to 13px
         base: '15px', // Override default 16px to 15px
       },
@@ -65,6 +66,7 @@ export default {
         },
       },
       fontWeight: {
+        base: '430',
         medium: '450',
         semibold: '550',
       },