feat: alert component

.changeset/poor-sheep-repair.md

@@ -0,0 +1,6 @@
+---
+"@nextui-org/alert": minor
+"@nextui-org/theme": minor
+---
+
+introduced Alert component (#2250)

apps/docs/config/routes.json

@@ -144,6 +144,12 @@
           "keywords": "autocomplete, auto suggest, search, typeahead",
           "path": "/docs/components/autocomplete.mdx"
         },
+        {
+          "key": "alert",
+          "title": "Alert",
+          "keywords": "alert, notification, message",
+          "path": "/docs/components/alert.mdx"
+        },
         {
           "key": "avatar",
           "title": "Avatar",

apps/docs/content/components/alert/colors.ts

@@ -0,0 +1,27 @@
+const App = `import {Alert} from "@nextui-org/react";
+
+export default function App() {
+  const title = "Email Sent!!";
+  const description = "You will get a reply soon";
+
+  return (
+    <div className="flex items-center justify-center w-screen">
+        <div className="flex flex-col w-full">
+            {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
+                <div key={color} className="w-full flex items-center my-3">
+                    <span className="mx-4 text-md">{color}</span>
+                    <Alert title={title} description={description} color={color} />
+                </div>
+            ))}
+        </div>
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/alert/custom-impl.ts

@@ -0,0 +1,142 @@
+const InfoCircleIcon = `export const InfoCircleIcon = (props) => (
+  <svg
+    fill="none"
+    height="24"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22ZM12.75 16C12.75 16.41 12.41 16.75 12 16.75C11.59 16.75 11.25 16.41 11.25 16L11.25 11C11.25 10.59 11.59 10.25 12 10.25C12.41 10.25 12.75 10.59 12.75 11L12.75 16ZM11.08 7.62C11.13 7.49 11.2 7.39 11.29 7.29C11.39 7.2 11.5 7.13 11.62 7.08C11.74 7.03 11.87 7 12 7C12.13 7 12.26 7.03 12.38 7.08C12.5 7.13 12.61 7.2 12.71 7.29C12.8 7.39 12.87 7.49 12.92 7.62C12.97 7.74 13 7.87 13 8C13 8.13 12.97 8.26 12.92 8.38C12.87 8.5 12.8 8.61 12.71 8.71C12.61 8.8 12.5 8.87 12.38 8.92C12.14 9.02 11.86 9.02 11.62 8.92C11.5 8.87 11.39 8.8 11.29 8.71C11.2 8.61 11.13 8.5 11.08 8.38C11.03 8.26 11 8.13 11 8C11 7.87 11.03 7.74 11.08 7.62Z"
+    />
+  </svg>
+);`;
+
+const CloseIcon = `export const CloseIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={2}
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path d="M18 6L6 18M6 6l12 12" />
+  </svg>
+);`;
+
+const App = `import React, {forwardRef, useMemo} from "react";
+import {useAlert} from "@nextui-org/react";
+import {InfoCircleIcon} from "./InfoCircleIcon";
+import {CloseIcon} from "./CloseIcon"
+
+const styles = {
+  base: [
+    "bg-slate-100",
+    "border",
+    "shadow",
+    "hover:bg-slate-200",
+    "focus-within:!bg-slate-100",
+    "dark:bg-slate-900",
+    "dark:hover:bg-slate-800",
+    "dark:border-slate-800",
+    "dark:focus-within:!bg-slate-900",
+    "cursor-pointer"
+  ],
+  title: [
+    "text-base",
+    "text-slate-500",
+    "font-bold"
+  ],
+  description: [
+    "text-base",
+    "text-slate-500",
+  ],
+}
+
+const MyAlert = forwardRef((props, ref) => {
+  const {
+    title,
+    description,
+    isClosable,
+    domRef,
+    handleClose,
+    getBaseProps,
+    getMainWrapperProps,
+    getDescriptionProps,
+    getTitleProps,
+    getCloseButtonProps,
+    color,
+    isVisible,
+    onClose,
+    getCloseIconProps,
+    getAlertIconProps,
+  } = useAlert({
+      ...props,
+      ref,
+      // this is just for the example, the props bellow should be passed by the parent component
+      title: "Email Sent!!",
+      description: "You will get a reply soon",
+      // custom styles
+      classNames: {
+        ...styles,
+      },
+    });
+
+  const mainWrapper = useMemo(() => {
+    return (
+      <div {...getMainWrapperProps()}>
+        {title && <div {...getTitleProps()}>{title}</div>}
+        <div {...getDescriptionProps()}>{description}</div>
+      </div>
+    );
+  }, [title, description, getMainWrapperProps, getTitleProps, getDescriptionProps]);
+
+  const baseWrapper = useMemo(() => {
+    return isVisible ? (
+      <div ref={domRef} {...getBaseProps()}>
+        <InfoCircleIcon {...getAlertIconProps()} />
+        {mainWrapper}
+        {(isClosable || onClose) && (
+          <button onClick={handleClose} {...getCloseButtonProps()}>
+            <CloseIcon />
+          </button>
+        )}
+      </div>
+    ) : null;
+  }, [
+    mainWrapper,
+    isClosable,
+    getCloseButtonProps,
+    isVisible,
+    domRef,
+    getBaseProps,
+    handleClose,
+    color,
+    onClose,
+    getAlertIconProps,
+  ]);
+
+  return <>{baseWrapper}</>;
+});
+
+MyAlert.displayName = "MyAlert";
+
+export default MyAlert;`;
+
+const react = {
+  "/App.jsx": App,
+  "/InfoCircleIcon": InfoCircleIcon,
+  "/CloseIcon": CloseIcon,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/alert/custom-styles.ts

@@ -0,0 +1,46 @@
+const App = `import {Alert} from "@nextui-org/react";
+
+export default function App() {
+  const title = "Email Sent!!";
+  const description = "You will get a reply soon";
+
+  return (
+    <div className="flex items-center justify-center w-screen">
+      <Alert
+        title={title}
+        description={description}
+        classNames={{
+          base: [
+            "bg-slate-100",
+            "border",
+            "shadow",
+            "hover:bg-slate-200",
+            "focus-within:!bg-slate-100",
+            "dark:bg-slate-900",
+            "dark:hover:bg-slate-800",
+            "dark:border-slate-800",
+            "dark:focus-within:!bg-slate-900",
+            "cursor-pointer"
+          ],
+          title: [
+            "text-base",
+            "text-slate-500",
+            "font-bold"
+          ],
+          description: [
+            "text-base",
+            "text-slate-500",
+          ],
+        }}
+      />
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/alert/index.ts

@@ -0,0 +1,15 @@
+import colors from "./colors";
+import usage from "./usage";
+import isClosable from "./is-closable";
+import radius from "./radius";
+import customImpl from "./custom-impl";
+import customStyles from "./custom-styles";
+
+export const alertContent = {
+  colors,
+  usage,
+  isClosable,
+  radius,
+  customImpl,
+  customStyles,
+};

apps/docs/content/components/alert/is-closable.ts

@@ -0,0 +1,20 @@
+const App = `import {Alert} from "@nextui-org/react";
+
+export default function App() {
+  const title = "Email Sent!!";
+  const description = "You will get a reply soon";
+
+  return (
+    <div className="flex items-center justify-center w-screen">
+      <Alert isClosable={true} title={title} description={description} />
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/alert/radius.ts

@@ -0,0 +1,27 @@
+const App = `import {Alert} from "@nextui-org/react";
+
+export default function App() {
+  const title = "Email Sent!!";
+  const description = "You will get a reply soon";
+
+  return (
+    <div className="flex items-center justify-center w-screen">
+        <div className="flex flex-col w-full">
+            {["none", "sm", "md", "lg", "full"].map((radius) => (
+                <div key={radius} className="w-full flex items-center my-3">
+                  <span className="mx-4 text-md">{radius}</span>
+                  <Alert title={title} description={description} radius={radius} />
+                </div>
+            ))}
+        </div>
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/alert/usage.ts

@@ -0,0 +1,20 @@
+const App = `import {Alert} from "@nextui-org/react";
+
+export default function App() {
+  const title = "Email Sent!!";
+  const description = "You will get a reply soon";
+
+  return (
+    <div className="flex items-center justify-center w-screen">
+          <Alert title={title} description={description} />
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/index.ts

@@ -31,3 +31,4 @@ export * from "./dropdown";
 export * from "./navbar";
 export * from "./table";
 export * from "./autocomplete";
+export * from "./alert";