fix: make linter happy

Author: wu-vincent

components/ui/shadcn-io/code-tabs/index.tsx

@@ -12,8 +12,8 @@ import {
   TabsContents,
   useTabs,
   type TabsProps,
-} from '@repo/tabs';
-import { CopyButton } from '@repo/copy-button';
+} from '@/components/ui/shadcn-io/tabs';
+import { CopyButton } from '@/components/ui/shadcn-io/copy-button';
 
 type CodeTabsProps = {
   codes: Record<string, string>;

components/ui/shadcn-io/tabs/index.tsx

@@ -1,13 +1,13 @@
 'use client';
 
 import * as React from 'react';
-import { motion, type Transition, type HTMLMotionProps } from 'motion/react';
+import {motion, type Transition, type HTMLMotionProps} from 'motion/react';
 
-import { cn } from '@/lib/utils';
+import {cn} from '@/lib/utils';
 import {
   MotionHighlight,
   MotionHighlightItem,
-} from '@repo/motion-highlight';
+} from '@/components/ui/shadcn-io/motion-highlight';
 
 // Tabs Component
 type TabsContextType<T extends string> = {
@@ -50,13 +50,13 @@ type TabsProps<T extends string = string> =
   | ControlledTabsProps<T>;
 
 function Tabs<T extends string = string>({
-  defaultValue,
-  value,
-  onValueChange,
-  children,
-  className,
-  ...props
-}: TabsProps<T>) {
+                                           defaultValue,
+                                           value,
+                                           onValueChange,
+                                           children,
+                                           className,
+                                           ...props
+                                         }: TabsProps<T>) {
   const [activeValue, setActiveValue] = React.useState<T | undefined>(
     defaultValue ?? undefined,
   );
@@ -120,17 +120,17 @@ type TabsListProps = React.ComponentProps<'div'> & {
 };
 
 function TabsList({
-  children,
-  className,
-  activeClassName,
-  transition = {
-    type: 'spring',
-    stiffness: 200,
-    damping: 25,
-  },
-  ...props
-}: TabsListProps) {
-  const { activeValue } = useTabs();
+                    children,
+                    className,
+                    activeClassName,
+                    transition = {
+                      type: 'spring',
+                      stiffness: 200,
+                      damping: 25,
+                    },
+                    ...props
+                  }: TabsListProps) {
+  const {activeValue} = useTabs();
 
   return (
     <MotionHighlight
@@ -160,13 +160,13 @@ type TabsTriggerProps = HTMLMotionProps<'button'> & {
 };
 
 function TabsTrigger({
-  ref,
-  value,
-  children,
-  className,
-  ...props
-}: TabsTriggerProps) {
-  const { activeValue, handleValueChange, registerTrigger } = useTabs();
+                       ref,
+                       value,
+                       children,
+                       className,
+                       ...props
+                     }: TabsTriggerProps) {
+  const {activeValue, handleValueChange, registerTrigger} = useTabs();
 
   const localRef = React.useRef<HTMLButtonElement | null>(null);
   React.useImperativeHandle(ref, () => localRef.current as HTMLButtonElement);
@@ -182,7 +182,7 @@ function TabsTrigger({
         ref={localRef}
         data-slot="tabs-trigger"
         role="tab"
-        whileTap={{ scale: 0.95 }}
+        whileTap={{scale: 0.95}}
         onClick={() => handleValueChange(value)}
         data-state={activeValue === value ? 'active' : 'inactive'}
         className={cn(
@@ -203,18 +203,18 @@ type TabsContentsProps = React.ComponentProps<'div'> & {
 };
 
 function TabsContents({
-  children,
-  className,
-  transition = {
-    type: 'spring',
-    stiffness: 300,
-    damping: 30,
-    bounce: 0,
-    restDelta: 0.01,
-  },
-  ...props
-}: TabsContentsProps) {
-  const { activeValue } = useTabs();
+                        children,
+                        className,
+                        transition = {
+                          type: 'spring',
+                          stiffness: 300,
+                          damping: 30,
+                          bounce: 0,
+                          restDelta: 0.01,
+                        },
+                        ...props
+                      }: TabsContentsProps) {
+  const {activeValue} = useTabs();
   const childrenArray = React.Children.toArray(children);
   const activeIndex = childrenArray.findIndex(
     (child): child is React.ReactElement<{ value: string }> =>
@@ -233,7 +233,7 @@ function TabsContents({
     >
       <motion.div
         className="flex -mx-2"
-        animate={{ x: activeIndex * -100 + '%' }}
+        animate={{x: activeIndex * -100 + '%'}}
         transition={transition}
       >
         {childrenArray.map((child, index) => (
@@ -252,22 +252,22 @@ type TabsContentProps = HTMLMotionProps<'div'> & {
 };
 
 function TabsContent({
-  children,
-  value,
-  className,
-  ...props
-}: TabsContentProps) {
-  const { activeValue } = useTabs();
+                       children,
+                       value,
+                       className,
+                       ...props
+                     }: TabsContentProps) {
+  const {activeValue} = useTabs();
   const isActive = activeValue === value;
   return (
     <motion.div
       role="tabpanel"
       data-slot="tabs-content"
       className={cn('overflow-hidden', className)}
-      initial={{ filter: 'blur(0px)' }}
-      animate={{ filter: isActive ? 'blur(0px)' : 'blur(4px)' }}
-      exit={{ filter: 'blur(0px)' }}
-      transition={{ type: 'spring', stiffness: 200, damping: 25 }}
+      initial={{filter: 'blur(0px)'}}
+      animate={{filter: isActive ? 'blur(0px)' : 'blur(4px)'}}
+      exit={{filter: 'blur(0px)'}}
+      transition={{type: 'spring', stiffness: 200, damping: 25}}
       {...props}
     >
       {children}

package.json

@@ -18,6 +18,7 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-use-controllable-state": "^1.2.2",
+    "@shikijs/transformers": "^3.13.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "geist": "^1.5.1",