Alert

1import { cva, type VariantProps } from "class-variance-authority";
2import {
3  Children,
4  cloneElement,
5  createContext,
6  isValidElement,
7  useContext,
8  useMemo,
9} from "react";
10import { Text, View } from "react-native";
11import { cn } from "@/lib/utils";
12 
13// Types
14type AlertVariant = VariantProps<typeof alertVariants>["variant"];
15 
16type AlertContextValue = {
17  variant: AlertVariant;
18};
19 
20type AlertProps = React.ComponentProps<typeof View> &
21  VariantProps<typeof alertVariants> & {
22    children?: React.ReactNode;
23  };
24 
25type AlertIconProps = {
26  children: React.ReactNode;
27  className?: string;
28};
29 
30type ClassNameElement = React.ReactElement<{ className?: string }>;
31 
32type AlertSlot = "icon" | "action";
33 
34type AlertSlotComponent = {
35  displayName?: string;
36  slot?: AlertSlot;
37};
38 
39// Context
40const AlertContext = createContext<AlertContextValue | null>(null);
41 
42const useAlertContext = () => {
43  const context = useContext(AlertContext);
44  if (!context) {
45    throw new Error("Alert components must be used within an Alert");
46  }
47  return context;
48};
49 
50const getAlertSlot = (type: string | React.JSXElementConstructor<unknown>) => {
51  if (typeof type === "string") {
52    return;
53  }
54 
55  return (type as AlertSlotComponent).slot;
56};
57 
58// Components
59export const Alert = ({
60  children,
61  className,
62  variant = "default",
63  style,
64  ...props
65}: AlertProps) => {
66  const ctx = useMemo(
67    () => ({
68      variant,
69    }),
70    [variant]
71  );
72 
73  const childArray = Children.toArray(children);
74  const icons: React.ReactNode[] = [];
75  const actions: React.ReactNode[] = [];
76  const content: React.ReactNode[] = [];
77 
78  for (const child of childArray) {
79    if (!isValidElement(child)) {
80      content.push(child);
81      continue;
82    }
83 
84    const slot = getAlertSlot(child.type);
85 
86    if (slot === "icon") {
87      icons.push(child);
88      continue;
89    }
90 
91    if (slot === "action") {
92      actions.push(child);
93      continue;
94    }
95 
96    content.push(child);
97  }
98 
99  const hasAction = actions.length > 0;
100 
101  return (
102    <AlertContext.Provider value={ctx}>
103      <View
104        accessibilityRole="alert"
105        className={cn(
106          alertVariants({ className, variant }),
107          hasAction && "pr-24"
108        )}
109        data-slot="alert"
110        style={[
111          {
112            alignItems: "flex-start",
113            flexDirection: "row",
114            gap: 8,
115          },
116          style,
117        ]}
118        {...props}
119      >
120        {icons}
121        <View
122          className="min-w-0 flex-1 gap-0.5"
123// … truncated