@catalystsoftware/ui 1.0.0

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

@@ -0,0 +1,413 @@
+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>
+  )
+}