@igamingcareer/igaming-components 1.0.99 → 1.0.100

package/Readme.md

@@ -69,6 +69,94 @@ export function Example() {
 }
 ```
 
+## Notifications (global notification system)
+
+The notification system provides a provider, hook, and global helpers to trigger messages from anywhere in your app.
+
+### Setup
+
+Wrap your application with the provider once (typically in your app/layout/root component):
+
+```tsx
+import {
+  NotificationProvider,
+} from "@igamingcareer/igaming-components";
+import "@igamingcareer/igaming-components/styles/globals.css";
+
+export function AppRoot({ children }: { children: React.ReactNode }) {
+  return (
+    <NotificationProvider placement="top-right">
+      {children}
+    </NotificationProvider>
+  );
+}
+```
+
+### Trigger notifications with the hook
+
+```tsx
+import { useNotification } from "@igamingcareer/igaming-components";
+
+export function ProfileSaveButton() {
+  const { notify } = useNotification();
+
+  return (
+    <button
+      onClick={() =>
+        notify({
+          type: "success",
+          title: "Profile updated",
+          message: "Your changes were saved successfully.",
+        })
+      }
+    >
+      Save
+    </button>
+  );
+}
+```
+
+### Trigger notifications globally
+
+```tsx
+import { notify } from "@igamingcareer/igaming-components";
+
+export function handleLoginError() {
+  notify({
+    type: "error",
+    title: "Login failed",
+    message: "We couldn't sign you in. Please try again.",
+    actions: [
+      {
+        label: "Retry",
+        variant: "primary",
+        onClick: () => console.log("retry login"),
+      },
+    ],
+  });
+}
+```
+
+### Configuration options
+
+| Option | Type | Description |
+| --- | --- | --- |
+| `placement` | `NotificationPlacement` | Controls where the stack renders (`top-right`, `bottom-left`, `center`, etc.). |
+| `duration` | `number` | Auto-dismiss time in ms (`0` or `Infinity` disables). |
+| `persistent` | `boolean` | Keeps the message open until dismissed. |
+| `actions` | `NotificationAction[]` | Buttons/links with callbacks (e.g., Retry). |
+| `content` | `ReactNode` | Custom body content for advanced layouts. |
+| `containerClassName` | `string` | Customize the stack container styling. |
+
+### Recommended follow-up tasks
+
+Create sub-issues for the notification epic so teams can track separate scopes:
+
+1. Design exploration (visual styles and variants).
+2. Implementation checklists (API ergonomics, accessibility, animation polish).
+3. Documentation expansion (Storybook examples + README).
+4. Next.js usage examples (app router and pages router snippets).
+
 ## Follow company callbacks (CompanyCard + CompanyDetail)
 
 The company list/detail components are stateless and emit follow actions so your app can handle API calls. Use the follow props to control state and provide callbacks for follow/unfollow actions.