From 0c9bb4f084790f1e06631dfc28dff97d0bcda016 Mon Sep 17 00:00:00 2001 From: Carla Goncalves Date: Thu, 19 Feb 2026 13:07:22 +0000 Subject: [PATCH] Add alert --- apps/docs/source.config.ts | 53 ++- apps/docs/src/mdx-components.tsx | 34 +- .../content/design-system/molecules/alert.mdx | 369 ++++++++++++++++++ .../content/design-system/molecules/meta.json | 1 + packages/eclipse/src/components/alert.tsx | 54 +++ packages/eclipse/src/components/index.ts | 2 + 6 files changed, 488 insertions(+), 25 deletions(-) create mode 100644 apps/eclipse/content/design-system/molecules/alert.mdx create mode 100644 packages/eclipse/src/components/alert.tsx diff --git a/apps/docs/source.config.ts b/apps/docs/source.config.ts index e36d365353..dc6a9c14ae 100644 --- a/apps/docs/source.config.ts +++ b/apps/docs/source.config.ts @@ -1,27 +1,27 @@ -import remarkDirective from 'remark-directive'; +import remarkDirective from "remark-directive"; import { remarkDirectiveAdmonition, remarkMdxFiles, -} from 'fumadocs-core/mdx-plugins'; -import { remarkImage } from 'fumadocs-core/mdx-plugins'; +} from "fumadocs-core/mdx-plugins"; +import { remarkImage } from "fumadocs-core/mdx-plugins"; import { defineConfig, defineDocs, frontmatterSchema, metaSchema, -} from 'fumadocs-mdx/config'; -import lastModified from 'fumadocs-mdx/plugins/last-modified'; -import { z } from 'zod'; -import convert from 'npm-to-yarn'; +} from "fumadocs-mdx/config"; +import lastModified from "fumadocs-mdx/plugins/last-modified"; +import { z } from "zod"; +import convert from "npm-to-yarn"; // You can customise Zod schemas for frontmatter and `meta.json` here // see https://fumadocs.dev/docs/mdx/collections export const docs = defineDocs({ - dir: 'content/docs', + dir: "content/docs", docs: { schema: frontmatterSchema.extend({ image: z.string().optional(), - badge: z.enum(['early-access', 'deprecated', 'preview']).optional(), + badge: z.enum(["early-access", "deprecated", "preview"]).optional(), url: z.string(), metaTitle: z.string(), metaDescription: z.string(), @@ -37,11 +37,11 @@ export const docs = defineDocs({ // v6 docs collection export const docsV6 = defineDocs({ - dir: 'content/docs.v6', + dir: "content/docs.v6", docs: { schema: frontmatterSchema.extend({ image: z.string().optional(), - badge: z.enum(['early-access', 'deprecated', 'preview']).optional(), + badge: z.enum(["early-access", "deprecated", "preview"]).optional(), url: z.string(), metaTitle: z.string().optional(), metaDescription: z.string().optional(), @@ -60,7 +60,22 @@ export default defineConfig({ mdxOptions: { remarkPlugins: [ remarkDirective, - remarkDirectiveAdmonition, + [ + remarkDirectiveAdmonition, + { + types: { + note: "info", + tip: "info", + info: "info", + warn: "warning", + warning: "warning", + danger: "error", + success: "success", + ppg: "ppg", + error: "error", + }, + }, + ], [remarkImage, { useImport: false }], remarkMdxFiles, ], @@ -69,19 +84,19 @@ export default defineConfig({ }, remarkNpmOptions: { persist: { - id: 'package-manager', + id: "package-manager", }, packageManagers: [ - { command: (cmd: string) => convert(cmd, 'npm'), name: 'npm' }, - { command: (cmd: string) => convert(cmd, 'pnpm'), name: 'pnpm' }, - { command: (cmd: string) => convert(cmd, 'yarn'), name: 'yarn' }, + { command: (cmd: string) => convert(cmd, "npm"), name: "npm" }, + { command: (cmd: string) => convert(cmd, "pnpm"), name: "pnpm" }, + { command: (cmd: string) => convert(cmd, "yarn"), name: "yarn" }, { command: (cmd: string) => { - const converted = convert(cmd, 'bun'); + const converted = convert(cmd, "bun"); if (!converted) return undefined; - return converted.replace(/^bun x /, 'bunx --bun '); + return converted.replace(/^bun x /, "bunx --bun "); }, - name: 'bun', + name: "bun", }, ], }, diff --git a/apps/docs/src/mdx-components.tsx b/apps/docs/src/mdx-components.tsx index 3c8c3b1e5d..03c7f6cf39 100644 --- a/apps/docs/src/mdx-components.tsx +++ b/apps/docs/src/mdx-components.tsx @@ -27,10 +27,13 @@ import { TableCell, TableCaption, Input, + Alert, } from "@prisma-docs/eclipse"; export function getMDXComponents(components?: MDXComponents): MDXComponents { - const mdxComponents = { + const pageContext = (components as any)?._pageContext; + + return { ...(icons as unknown as MDXComponents), ...defaultMdxComponents, // Fumadocs tabs for manual usage (with items prop) @@ -50,11 +53,6 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents { APIPage, img: (props: any) => , input: (props: any) => , - }; - - const pageContext = (components as any)?._pageContext; - - return { ...mdxComponents, pre: ({ ref: _ref, ...props }) => ( @@ -69,5 +67,29 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents { th: ({ ref: _ref, ...props }) => , td: ({ ref: _ref, ...props }) => , caption: ({ ref: _ref, ...props }) => , + // Override Fumadocs Callout components with Eclipse Alert for admonitions (:::ppg, :::error, :::success, :::warning) + CalloutTitle: ({ children }: any) => <>{children}, + CalloutDescription: ({ children }: any) => <>{children}, + CalloutContainer: ({ type, children, icon, ...props }: any) => { + const variantMap: Record< + string, + "ppg" | "error" | "success" | "warning" + > = { + ppg: "ppg", + error: "error", + success: "success", + warning: "warning", + info: "ppg", + note: "ppg", + tip: "success", + danger: "error", + }; + + return ( + + {children} + + ); + }, }; } diff --git a/apps/eclipse/content/design-system/molecules/alert.mdx b/apps/eclipse/content/design-system/molecules/alert.mdx new file mode 100644 index 0000000000..ff9757893f --- /dev/null +++ b/apps/eclipse/content/design-system/molecules/alert.mdx @@ -0,0 +1,369 @@ +--- +title: Alert +description: A versatile alert component for displaying important messages and contextual information with support for different severity levels and custom icons. +--- + +import { Alert } from "@prisma-docs/eclipse"; +import { Terminal, AlertCircle, CheckCircle2, AlertTriangle } from "lucide-react"; + +### Usage + +**Basic Alert** + +The Alert component displays important information with a default info icon and the PPG variant. + +```tsx +import { Alert } from "@prisma-docs/eclipse"; + +export function BasicAlert() { + return ( + + This is a basic alert message with regular content. + + ); +} +``` + +
+

Live Example:

+
+ + + This is a basic alert message with regular content. + + +**Alert Variants** + +The Alert component supports four variants: `ppg`, `error`, `success`, and `warning`. + +```tsx +import { Alert } from "@prisma-docs/eclipse"; + +export function AlertVariants() { + return ( + <> + + PPG variant - for general information and tips. + + + + Success variant - for positive confirmations. + + + + Warning variant - for important notices. + + + + Error variant - for errors and critical information. + + + ); +} +``` + +
+

Live Examples:

+ + + PPG variant - for general information and tips. + + + + Success variant - for positive confirmations. + + + + Warning variant - for important notices. + + + + Error variant - for errors and critical information. + +
+ +**Custom Icons** + +You can customize the icon by passing a custom icon component or pass `null` to hide the icon. + +```tsx +import { Alert } from "@prisma-docs/eclipse"; +import { Terminal, AlertCircle, CheckCircle2, AlertTriangle } from "lucide-react"; + +export function CustomIconAlerts() { + return ( + <> + }> + Alert with a custom terminal icon. + + + }> + Alert with a custom error icon. + + + }> + Alert with a custom success icon. + + + }> + Alert with a custom warning icon. + + + + Alert without an icon. + + + ); +} +``` + +
+

Live Examples:

+ + }> + Alert with a custom terminal icon. + + + }> + Alert with a custom error icon. + + + }> + Alert with a custom success icon. + + + }> + Alert with a custom warning icon. + + + + Alert without an icon. + +
+ +**Rich MDX Content** + +The Alert component accepts and renders any MDX content including headings, paragraphs, lists, links, and code. + +```tsx +import { Alert } from "@prisma-docs/eclipse"; + +export function RichContentAlert() { + return ( + + **Getting Started** + + Follow these steps to get started: + + 1. Install the package: `npm install @prisma/client` + 2. Initialize Prisma: `npx prisma init` + 3. Define your schema and run migrations + + For more information, visit the [documentation](https://prisma.io/docs). + + ); +} +``` + +:::ppg +**Getting Started** + +Follow these steps to get started: + + 1. Install the package: `npm install @prisma/client` + 2. Initialize Prisma: `npx prisma init` + 3. Define your schema and run migrations + +For more information, visit the [documentation](https://prisma.io/docs). +::: + +**Complex Content Examples** + +```tsx +import { Alert } from "@prisma-docs/eclipse"; + +export function ComplexAlerts() { + return ( + <> + + ### Important Update + + This feature will be deprecated in version 6.0. Please migrate to the new API: + + - Old: `prisma.user.findMany()` + - New: `prisma.user.findMany({ where: {} })` + + + + **Connection Error** + + Unable to connect to the database. Please check: + + - Database credentials in `.env` + - Database server is running + - Network connectivity + + + + Your migration was successful! The following changes were applied: + + - Created table `User` + - Added index on `email` column + - Updated foreign key constraints + + + ); +} +``` + +
+

Live Examples:

+ + +
+

Important Update

+

This feature will be deprecated in version 6.0. Please migrate to the new API:

+
    +
  • Old: prisma.user.findMany()
    • +
  • New: prisma.user.findMany({`{ where: {} }`})
    • +
+
+ + + +
+

Connection Error

+

Unable to connect to the database. Please check:

+
    +
  • Database credentials in .env
    • +
  • Database server is running
    • +
  • Network connectivity
    • +
+
+ + + +
+

Your migration was successful! The following changes were applied:

+
    +
  • Created table User
    • +
  • Added index on email column
    • +
  • Updated foreign key constraints
    • +
+
+ +
+ +### Alert Props + +- `variant` - Visual style: `"ppg"`, `"error"`, `"success"`, or `"warning"` (optional, default: "ppg") +- `icon` - Custom icon component or `null` to hide icon (ReactNode | null, optional, default: InfoIcon) +- `className` - Additional CSS classes (optional) +- `children` - Alert content (any valid MDX/React content) (ReactNode, required) +- Standard HTML div attributes + +### Features + +- ✅ Four semantic variants: ppg, error, success, warning +- ✅ Default info icon with customization support +- ✅ Accepts any MDX content (headings, paragraphs, lists, code, etc.) +- ✅ Supports rich formatting and links +- ✅ Accessible with proper ARIA roles +- ✅ Dark mode support for all variants +- ✅ Fully customizable with className prop +- ✅ Built with class-variance-authority for type-safe variants + +### Best Practices + +- Use `variant="ppg"` for general information, tips, and product-specific notes +- Use `variant="success"` for positive confirmations and successful operations +- Use `variant="warning"` for important notices that require attention +- Use `variant="error"` for errors, failures, and critical information +- Choose icons that match the message type and variant +- Pass `icon={null}` if the message is self-explanatory without an icon +- Use headings (`##`, `###`) to structure complex alert content +- Include actionable information or next steps when appropriate +- Keep alerts concise but informative +- Don't overuse alerts - reserve them for important information + +### Common Use Cases + +The Alert component is perfect for: + +- **Documentation callouts** - Highlight important information in docs +- **Feature announcements** - Announce new or beta features +- **Deprecation notices** - Warn about deprecated features +- **Prerequisites** - List requirements before proceeding +- **Success confirmations** - Confirm successful actions or operations +- **Error messages** - Display error details and troubleshooting steps +- **Warning messages** - Alert users to important considerations +- **Tips and notes** - Provide helpful tips and additional context + +### MDX Admonition Syntax + +This Alert component is automatically used for MDX admonition blocks when configured in your MDX components. The following syntaxes are supported: + +```mdx +:::ppg +This is a PPG alert using MDX admonition syntax. + +## You can use any MDX content + +Including lists, code, and more! +::: + +:::error +This is an error alert. +::: + +:::success +This is a success alert. +::: + +:::warning +This is a warning alert. +::: + +:::info +Maps to PPG variant. +::: + +:::note +Maps to PPG variant. +::: + +:::tip +Maps to success variant. +::: + +:::danger +Maps to error variant. +::: +``` + + + +
+

Live Example:

+
+ +:::ppg + +This demonstrates how the `:::ppg` syntax renders as an Alert component. + +You can include: + +- Lists +- **Bold text** +- `inline code` +- And more! + +::: + +### Accessibility + +- The Alert component includes `role="alert"` for screen readers +- Icons are decorative and don't convey meaning alone - always include descriptive text +- Color is not the only indicator of alert type (icons and context provide additional cues) +- All variants maintain appropriate color contrast ratios +- Alert content is keyboard accessible and screen reader friendly diff --git a/apps/eclipse/content/design-system/molecules/meta.json b/apps/eclipse/content/design-system/molecules/meta.json index 68e73f73a9..af3ef580f4 100644 --- a/apps/eclipse/content/design-system/molecules/meta.json +++ b/apps/eclipse/content/design-system/molecules/meta.json @@ -4,6 +4,7 @@ "icon": "Component", "pages": [ "accordion", + "alert", "banner", "breadcrumb", "card", diff --git a/packages/eclipse/src/components/alert.tsx b/packages/eclipse/src/components/alert.tsx new file mode 100644 index 0000000000..92e002cc9d --- /dev/null +++ b/packages/eclipse/src/components/alert.tsx @@ -0,0 +1,54 @@ +import * as React from "react"; +import { cva, type VariantProps } from "class-variance-authority"; +import { CircleAlert } from "lucide-react"; + +import { cn } from "../lib/cn"; + +const alertVariants = cva( + "relative w-full rounded-md border px-4 py-4 text-sm [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg]:w-5 [&>svg]:h-5 [&>*:not(svg)]:pl-7 alert-admonition", + { + variants: { + variant: { + ppg: "bg-background-ppg text-foreground-ppg border-none [&>svg]:text-foreground-ppg", + error: + "bg-background-error border-none text-foreground-error [&>svg]:text-foreground-error", + success: + "bg-background-success border-none text-foreground-success [&>svg]:text-foreground-success", + warning: + "bg-background-warning border-none text-foreground-warning [&>svg]:text-foreground-warning", + }, + }, + defaultVariants: { + variant: "ppg", + }, + }, +); + +type AlertProps = React.HTMLAttributes & + VariantProps & { + icon?: React.ReactNode; + }; + +const Alert = React.forwardRef( + ({ className, variant, icon, children, ...props }, ref) => { + const IconComponent = + icon !== undefined ? icon : ; + + return ( +
+ {IconComponent} +
+ {children} +
+
+ ); + }, +); +Alert.displayName = "Alert"; + +export { Alert }; diff --git a/packages/eclipse/src/components/index.ts b/packages/eclipse/src/components/index.ts index 5b2d1350d8..c67ad4b8f6 100644 --- a/packages/eclipse/src/components/index.ts +++ b/packages/eclipse/src/components/index.ts @@ -137,3 +137,5 @@ export { PaginationEllipsis, PaginationInput, } from "./pagination"; + +export { Alert } from "./alert";