@catalystsoftware/ui 1.0.5 → 1.0.6

package/components/catalyst-ui/x/alert-x.tsx

@@ -1,413 +0,0 @@
-import React, { useId } from 'react'
-import { cn } from "~/components/catalyst-ui"
-import { Alert, AlertTitle, AlertDescription, useAlertContext, alertVariants } from "~/components/catalyst-ui"
-import { Avatar, AvatarImage, AvatarFallback } from "~/components/catalyst-ui"
-import { Button } from "~/components/catalyst-ui"
-import { Progress,TsxSection,  } from "~/components/catalyst-ui"
-import { X } from "lucide-react"
-import type { LucideIcon } from "lucide-react"
-
-/**
-* ★ ━━━━ ☆ ━━━━ AlertX ━━━━ ☆ ━━━━ ★
-* type AlertType = 'default' | 'withAvatar' | 'closable' | 'withLink' | 'attachedIcon' | 'focusedIcon' | 'fileUpload' | 'multipleAction' | 'task' | 'withAction'
-* 
-* ★ ━━━━ ☆ ━━━━ USAGE ━━━━ ☆ ━━━━ ★
-* ★ ━━━━━━━━━ withAvatar ━━━━━━━━━ ★
-* ```jsx
-* <AlertX alert="withAvatar">
-*     <AlertXTitle avatar='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' name='Hallie Richards'>
-*       Sara has replied on the uploaded image.
-*     </AlertXTitle>
-*     <AlertXDescription>12 unread messages. Tap to see.</AlertXDescription>
-* </AlertX>
-* ```
-* ★ ━━━━━━━━━ closable ━━━━━━━━━ ★
-* ```jsx
-* {isClosableActive && (
-*   <AlertX alert="closable">
-*     <AlertXTitle onClose={() => setIsClosableActive(false)}>New message!</AlertXTitle>
-*     <AlertXDescription>12 unread messages. Tap to see.</AlertXDescription>
-*   </AlertX>
-* )}
-* ```
-* ★ ━━━━━━━━━ withAction ━━━━━━━━━ ★
-* ```jsx
-* <AlertX alert="withAction">
-*   <AlertXTitle actionLabel="Open" onAction={() => console.log('opened')}>
-*     New message!
-*   </AlertXTitle>
-* </AlertX>
-* ```
-* ★ ━━━━━━━━━ attachedIcon ━━━━━━━━━ ★
-* ```jsx
-* <AlertX alert="attachedIcon" variant="destructive">
-*   <AlertXTitle>This file contains virus!</AlertXTitle>
-* </AlertX>
-* ```
-* ★ ━━━━━━━━━ focusedIcon ━━━━━━━━━ ★
-* ```jsx
-* <AlertX alert="focusedIcon">
-*   <AlertXTitle>This file contains virus!</AlertXTitle>
-* </AlertX>
-* ```
-* ★ ━━━━━━━━━ multipleAction ━━━━━━━━━ ★
-* ```jsx
-* {isMultipleActionActive && (
-*   <AlertX alert="multipleAction" variant="primary">
-*     <AlertXTitle onClose={() => setIsMultipleActionActive(false)}>
-*       A new update is available
-*     </AlertXTitle>
-*     <AlertXDescription
-*       skipLabel="Skip this update"
-*       installLabel="Install now"
-*       onSkip={() => console.log('skipped')}
-*       onInstall={() => console.log('installed')}
-*     >
-*       Includes the at new dashboard View. Pages end exports will now load faster
-*     </AlertXDescription>
-*   </AlertX>
-* )} 
-* ```
-* 
- */
-
-type AlertType = 'default' | 'withAvatar' | 'closable' | 'withLink' | 'attachedIcon' | 'focusedIcon' | 'fileUpload' | 'multipleAction' | 'task' | 'withAction'
-
-const AlertXContext = React.createContext<AlertType>('default')
-
-interface AlertContextValue {
-  variant?: string
-  alert?: string
-}
-
-export function AlertX({ alert = 'default', variant, children, ...props }: any) {
-  const contextValue: AlertContextValue = { variant, alert }
-
-  switch (alert) {
-    case 'attachedIcon':
-      return (
-        <AlertXContext.Provider value={contextValue}>
-          <Alert className={cn(alertVariants({ variant }), 'flex items-stretch p-0', props.className)} {...props}>
-            <div className='bg-destructive/10 text-destructive flex items-center rounded-l-lg border-r p-2'>
-              <svg className="size-4" />
-            </div>
-            {children}
-          </Alert>
-        </AlertXContext.Provider>
-      )
-
-    case 'spotlight':
-      return (
-        <AlertXContext.Provider value={contextValue}>
-          <Alert className={cn(alertVariants({ variant }), 'before:bg-primary/70 relative before:absolute before:size-full before:rounded-lg', props.className)} {...props}>
-            {children}
-          </Alert>
-        </AlertXContext.Provider>
-      )
-
-    default:
-      return (
-        <AlertXContext.Provider value={contextValue}>
-          <Alert className={cn(alertVariants({ variant }), props.className)} {...props}>
-            {children}
-          </Alert>
-        </AlertXContext.Provider>
-      )
-  }
-}
-
-export function AlertXTitle({ children, ...props }: any) {
-  const alertType = React.useContext(AlertXContext)
-
-  switch (alertType) {
-    case 'withAvatar':
-      return (
-        <div className={cn('col-start-2 flex items-center justify-between gap-3', props.className)}>
-          <Avatar className='rounded-sm'>
-            <AvatarImage src={props.avatar} alt={props.name} className='rounded-sm' />
-            <AvatarFallback className='text-xs'>{props.name?.[0]}</AvatarFallback>
-          </Avatar>
-          <div className='flex-1'>
-            <div className='min-h-4 font-medium tracking-tight'>{children}</div>
-          </div>
-        </div>
-      )
-
-    case 'closable':
-      return (
-        <div className={cn('flex items-start justify-between gap-3', props.className)}>
-          <svg className="size-4 shrink-0 mt-0.5" />
-          <div className='flex-1 min-h-4 font-medium tracking-tight'>{children}</div>
-          <button className='shrink-0 cursor-pointer opacity-70 hover:opacity-100 transition-opacity' onClick={props.onClose}>
-            <X className='size-5' />
-            <span className='sr-only'>Close</span>
-          </button>
-        </div>
-      )
-
-    case 'withAction':
-      return (
-        <div className={cn('flex items-center justify-between gap-3 [&>svg]:translate-y-0', props.className)}>
-          <svg className="size-4 shrink-0" />
-          <div className='flex-1 font-medium tracking-tight'>{children}</div>
-          <Button variant='outline' className='h-7 cursor-pointer rounded-md px-2' onClick={props.onAction}>
-            {props.actionLabel || 'Open'}
-          </Button>
-        </div>
-      )
-
-    case 'attachedIcon':
-      return (
-        <div className={cn('p-3 min-h-4 font-medium tracking-tight', props.className)}>
-          {children}
-        </div>
-      )
-
-    case 'focusedIcon':
-      return (
-        <div className={cn('flex items-center gap-3', props.className)}>
-          <Avatar className='rounded-md'>
-            <AvatarFallback className='bg-destructive dark:bg-destructive/60 rounded-md text-white'>
-              <svg className="size-4" />
-            </AvatarFallback>
-          </Avatar>
-          <div className='min-h-4 font-medium tracking-tight'>{children}</div>
-        </div>
-      )
-
-    case 'task':
-      return (
-        <div className={cn('flex gap-3', props.className)}>
-          <Avatar className='rounded-sm'>
-            <AvatarImage src={props.avatar} alt={props.name} className='rounded-sm' />
-            <AvatarFallback className='text-xs'>{props.name?.[0]}</AvatarFallback>
-          </Avatar>
-          <div className='flex-1'>
-            <div className='min-h-4 font-medium tracking-tight'>{children}</div>
-          </div>
-        </div>
-      )
-
-    case 'multipleAction':
-      return (
-        <div className={cn('flex justify-between gap-3', props.className)}>
-          <svg className="size-4 shrink-0 mt-0.5" />
-          <div className='flex-1 min-h-4 font-medium tracking-tight'>{children}</div>
-          <button className='shrink-0 cursor-pointer' onClick={props.onClose}>
-            <X className='size-5' />
-            <span className='sr-only'>Close</span>
-          </button>
-        </div>
-      )
-
-    default:
-      return (
-        <AlertTitle className={cn(props.className)} {...props}>
-          {children}
-        </AlertTitle>
-      )
-  }
-}
-
-export function AlertXDescription({ children, ...props }: any) {
-  const alertType = React.useContext(AlertXContext)
-
-  switch (alertType) {
-    case 'withAvatar':
-      return (
-        <div className={cn('text-muted-foreground text-sm [&_p]:leading-relaxed col-start-2', props.className)}>
-          {children}
-        </div>
-      )
-
-    case 'closable':
-      return (
-        <div className={cn('text-muted-foreground text-sm [&_p]:leading-relaxed ml-7', props.className)}>
-          {children}
-        </div>
-      )
-
-    case 'task':
-      return (
-        <div className={cn('flex flex-col gap-2', props.className)}>
-          <div className='text-muted-foreground text-sm [&_p]:leading-relaxed'>{children}</div>
-          <Progress
-            value={props.progress || 0}
-            className='bg-amber-600/20 *:bg-amber-600 dark:bg-amber-400/20 dark:*:bg-amber-400'
-            aria-label='Task progress'
-          />
-        </div>
-      )
-
-    case 'multipleAction':
-      return (
-        <div className={cn('flex flex-col gap-4 ml-7', props.className)}>
-          <div className='text-primary-foreground/80 text-sm [&_p]:leading-relaxed'>{children}</div>
-          <div className='flex items-center gap-4'>
-            <Button className='bg-secondary/10 focus-visible:bg-secondary/20 hover:bg-secondary/20 h-7 cursor-pointer rounded-md px-2' onClick={props.onSkip}>
-              {props.skipLabel || 'Skip this update'}
-            </Button>
-            <Button variant='secondary' className='h-7 cursor-pointer rounded-md px-2' onClick={props.onInstall}>
-              {props.installLabel || 'Install now'}
-            </Button>
-          </div>
-        </div>
-      )
-
-    default:
-      return (
-        <AlertDescription className={cn(props.className)} {...props}>
-          {children}
-        </AlertDescription>
-      )
-  }
-}
-
-export function AlertXDemo() {
-  const [isClosableActive, setIsClosableActive] = React.useState(true)
-  const [isMultipleActionActive, setIsMultipleActionActive] = React.useState(true)
-  const [progress, setProgress] = React.useState(0)
-
-  React.useEffect(() => {
-    const timer = setTimeout(() => setProgress(50), 100)
-    return () => clearTimeout(timer)
-  }, [])
-
-  return (
-    <div className="space-y-8 p-6 max-w-3xl mx-auto">
-      <div>
-        <h3 className="text-lg font-semibold mb-4">With Avatar</h3>
-        <AlertX alert="withAvatar">
-          <AlertXTitle avatar='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' name='Hallie Richards'>
-            Sara has replied on the uploaded image.
-          </AlertXTitle>
-          <AlertXDescription>12 unread messages. Tap to see.</AlertXDescription>
-        </AlertX>
-        <TsxSection
-          title="AlertX"
-          code={`<AlertX alert="withAvatar">
-          <AlertXTitle avatar='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' name='Hallie Richards'>
-            Sara has replied on the uploaded image.
-          </AlertXTitle>
-          <AlertXDescription>12 unread messages. Tap to see.</AlertXDescription>
-        </AlertX>`}
-        />
-      </div>
-
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Closable</h3>
-        {isClosableActive && (
-          <AlertX alert="closable">
-            <AlertXTitle onClose={() => setIsClosableActive(false)}>New message!</AlertXTitle>
-            <AlertXDescription>12 unread messages. Tap to see.</AlertXDescription>
-          </AlertX>
-        )}
-           <TsxSection
-          title="AlertX"
-          code={` {isClosableActive && (
-          <AlertX alert="closable">
-            <AlertXTitle onClose={() => setIsClosableActive(false)}>New message!</AlertXTitle>
-            <AlertXDescription>12 unread messages. Tap to see.</AlertXDescription>
-          </AlertX>
-        )}`}
-        />
-      </div>
-
-      <div>
-        <h3 className="text-lg font-semibold mb-4">With Action</h3>
-        <AlertX alert="withAction">
-          <AlertXTitle actionLabel="Open" onAction={() => console.log('opened')}>
-            New message!
-          </AlertXTitle>
-        </AlertX>
-           <TsxSection
-          title="AlertX"
-          code={`<AlertX alert="withAction">
-          <AlertXTitle actionLabel="Open" onAction={() => console.log('opened')}>
-            New message!
-          </AlertXTitle>
-        </AlertX>`}
-        />
-      </div>
-
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Attached Icon</h3>
-        <AlertX alert="attachedIcon" variant="destructive">
-          <AlertXTitle>This file contains virus!</AlertXTitle>
-        </AlertX>
-           <TsxSection
-          title="AlertX"
-          code={`<AlertX alert="attachedIcon" variant="destructive">
-          <AlertXTitle>This file contains virus!</AlertXTitle>
-        </AlertX>`}
-        />
-      </div>
-
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Focused Icon</h3>
-        <AlertX alert="focusedIcon">
-          <AlertXTitle>This file contains virus!</AlertXTitle>
-        </AlertX>
-           <TsxSection
-          title="AlertX"
-          code={`<AlertX alert="focusedIcon">
-          <AlertXTitle>This file contains virus!</AlertXTitle>
-        </AlertX>`}
-        />
-      </div>
-
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Task</h3>
-        <AlertX alert="task">
-          <AlertXTitle avatar='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' name='Rocky'>
-            @Rocky
-          </AlertXTitle>
-          <AlertXDescription progress={progress}>
-            this projects task is remaining, deadline is near.
-          </AlertXDescription>
-        </AlertX>
-           <TsxSection
-          title="AlertX"
-          code={``}
-        />
-      </div>
-
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Multiple Actions</h3>
-        {isMultipleActionActive && (
-          <AlertX alert="multipleAction" variant="primary">
-            <AlertXTitle onClose={() => setIsMultipleActionActive(false)}>
-              A new update is available
-            </AlertXTitle>
-            <AlertXDescription
-              skipLabel="Skip this update"
-              installLabel="Install now"
-              onSkip={() => console.log('skipped')}
-              onInstall={() => console.log('installed')}
-            >
-              Includes the at new dashboard View. Pages end exports will now load faster
-            </AlertXDescription>
-          </AlertX>
-        )}
-           <TsxSection
-          title="AlertX"
-          code={`{isMultipleActionActive && (
-          <AlertX alert="multipleAction" variant="primary">
-            <AlertXTitle onClose={() => setIsMultipleActionActive(false)}>
-              A new update is available
-            </AlertXTitle>
-            <AlertXDescription
-              skipLabel="Skip this update"
-              installLabel="Install now"
-              onSkip={() => console.log('skipped')}
-              onInstall={() => console.log('installed')}
-            >
-              Includes the at new dashboard View. Pages end exports will now load faster
-            </AlertXDescription>
-          </AlertX>
-        )}`}
-        />
-      </div>
-    </div>
-  )
-}