feat(dashboard): Log in, reset password, and accept invite pages (#6310)

packages/design-system/ui/src/components/alert/alert.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import * as React from "react"
+
+import { Alert } from "./alert"
+
+const meta: Meta<typeof Alert> = {
+  title: "Components/Alert",
+  component: Alert,
+  argTypes: {
+    variant: {
+      control: {
+        type: "select",
+        options: ["info", "error", "success", "warning"],
+      },
+    },
+    dismissible: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+  parameters: {
+    layout: "centered",
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Alert>
+
+const Text =
+  "We have sent you an email with instructions on how to reset your password. If you don't receive an email, please check your spam folder or try again."
+
+export const Info: Story = {
+  args: {
+    variant: "info",
+    children: Text,
+  },
+  render: (args) => (
+    <div className="max-w-[300px]">
+      <Alert {...args} />
+    </div>
+  ),
+}
+
+export const Error: Story = {
+  args: {
+    variant: "error",
+    children: Text,
+  },
+  render: (args) => (
+    <div className="max-w-[300px]">
+      <Alert {...args} />
+    </div>
+  ),
+}
+
+export const Success: Story = {
+  args: {
+    variant: "success",
+    children: Text,
+  },
+  render: (args) => (
+    <div className="max-w-[300px]">
+      <Alert {...args} />
+    </div>
+  ),
+}
+
+export const Warning: Story = {
+  args: {
+    variant: "warning",
+    children: Text,
+  },
+  render: (args) => (
+    <div className="max-w-[300px]">
+      <Alert {...args} />
+    </div>
+  ),
+}
+
+export const Dismissible: Story = {
+  args: {
+    dismissible: true,
+    children: Text,
+  },
+  render: (args) => (
+    <div className="max-w-[300px]">
+      <Alert {...args} />
+    </div>
+  ),
+}

packages/design-system/ui/src/components/alert/alert.tsx

@@ -0,0 +1,92 @@
+import { clx } from "@/utils/clx"
+import {
+  CheckCircleSolid,
+  ExclamationCircleSolid,
+  InformationCircleSolid,
+  XCircleSolid,
+  XMarkMini,
+} from "@medusajs/icons"
+import * as React from "react"
+
+import { IconButton } from "@/components/icon-button"
+
+interface AlertProps extends React.ComponentPropsWithoutRef<"div"> {
+  variant?: "error" | "success" | "warning" | "info"
+  dismissible?: boolean
+}
+
+/**
+ * This component is based on the div element and supports all of its props
+ *
+ * @excludeExternal
+ */
+export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  (
+    {
+      /**
+       * The variant of the alert
+       */
+      variant = "info",
+      /**
+       * Whether the alert is dismissible
+       */
+      dismissible = false,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [dismissed, setDismissed] = React.useState(false)
+
+    const Icon = {
+      info: InformationCircleSolid,
+      error: XCircleSolid,
+      success: CheckCircleSolid,
+      warning: ExclamationCircleSolid,
+    }[variant]
+
+    const handleDismiss = () => {
+      setDismissed(true)
+    }
+
+    if (dismissed) {
+      return null
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={clx(
+          "bg-ui-bg-subtle text-pretty txt-compact-small grid items-start gap-x-3 rounded-lg border p-3",
+          {
+            "grid-cols-[20px_1fr]": !dismissible,
+            "grid-cols-[20px_1fr_20px]": dismissible,
+          },
+          className
+        )}
+        {...props}
+      >
+        <Icon
+          className={clx({
+            "text-ui-tag-red-icon": variant === "error",
+            "text-ui-tag-green-icon": variant === "success",
+            "text-ui-tag-orange-icon": variant === "warning",
+            "text-ui-tag-neutral-icon": variant === "info",
+          })}
+        />
+        <div>{children}</div>
+        {dismissible && (
+          <IconButton
+            size="2xsmall"
+            variant="transparent"
+            type="button"
+            onClick={handleDismiss}
+          >
+            <XMarkMini className="text-ui-fg-muted" />
+          </IconButton>
+        )}
+      </div>
+    )
+  }
+)

packages/design-system/ui/src/components/alert/index.ts

@@ -0,0 +1 @@
+export * from "./alert"

packages/design-system/ui/src/components/hint/hint.tsx

@@ -5,7 +5,7 @@ import * as React from "react"
 import { clx } from "../../utils/clx"
 
 const hintVariants = cva({
-  base: "txt-small inline-flex items-center gap-x-2",
+  base: "txt-small inline-flex items-start gap-x-2",
   variants: {
     variant: {
       info: "text-ui-fg-subtle",

packages/design-system/ui/src/components/icon-button/icon-button.tsx

@@ -28,6 +28,8 @@ const iconButtonVariants = cva({
       ),
     },
     size: {
+      "2xsmall": "h-5 w-5",
+      xsmall: "h-6 w-6 p-1",
       small: "h-7 w-7 p-1",
       base: "h-8 w-8 p-1.5",
       large: "h-10 w-10 p-2.5",