@cerebruminc/cerebellum 17.3.10 → 17.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # react-component-lib-boilerplate
 
+## [17.4.0](https://github.com/cerebruminc/cerebellum/compare/v17.3.10...v17.4.0) (2026-07-13)
+
+
+### Features
+
+* **node:** update node version to be 22 ([906ccf1](https://github.com/cerebruminc/cerebellum/commit/906ccf105b79cfe286de71f09402e61ea83beefd))
+
+
+### Bug Fixes
+
+* **dialog:** increase the default notificationMaxHeight on notifications ([886779a](https://github.com/cerebruminc/cerebellum/commit/886779a18ae8c812b36be339ecd55986528ab5f5))
+
 ## [17.3.10](https://github.com/cerebruminc/cerebellum/compare/v17.3.9...v17.3.10) (2026-06-26)
 
 

package/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20 as builder
+FROM node:22 as builder
 
 ARG NPM_TOKEN
 
@@ -8,7 +8,7 @@ COPY . .
 
 RUN npm ci --include=dev && NODE_OPTIONS=--max_old_space_size=8192 npm run build-storybook
 
-FROM node:20-alpine
+FROM node:22-alpine
 
 COPY --from=builder ./docs/ ./docs
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerebruminc/cerebellum",
-  "version": "17.3.10",
+  "version": "17.4.0",
   "description": "Cerebrum's React Component Library",
   "type": "module",
   "main": "src/index.ts",

package/src/mantine/mantineTheme.ts

@@ -698,6 +698,11 @@ export const createCustomMantineTheme = (optionsOrBrandColor?: CreateCustomManti
           label: getLabelStyles(theme),
         }),
       },
+      Notifications: {
+        defaultProps: {
+          notificationMaxHeight: 800,
+        },
+      },
       Notification: {
         defaultProps: {
           classNames: {

package/src/mantine/stories/Notifications.stories.tsx

@@ -0,0 +1,290 @@
+import { Button, Group, Stack } from "@mantine/core";
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { showBar, showDialog, showToast } from "../services/notifications";
+
+/**
+ * Mantine notification wrappers: `showToast`, `showBar`, and `showDialog`.
+ *
+ * Switch between Cerebellum and High Contrast themes in the Storybook toolbar
+ * to verify visual parity with the styled-components equivalents.
+ */
+const meta: Meta = {
+	title: "Mantine/Notifications",
+};
+
+export default meta;
+
+// ---------- Toast ----------
+
+export const Toast: StoryObj = {
+	name: "Toast",
+	render: () => (
+		<Stack gap="md">
+			<Group>
+				<Button onClick={() => showToast({ message: "Neutral toast notification" })}>Neutral</Button>
+				<Button color="aqua" onClick={() => showToast({ message: "Positive toast", tone: "positive" })}>
+					Positive
+				</Button>
+				<Button color="red" onClick={() => showToast({ message: "Negative toast", tone: "negative" })}>
+					Negative
+				</Button>
+			</Group>
+		</Stack>
+	),
+};
+
+// ---------- Bar ----------
+
+export const Bar: StoryObj = {
+	name: "Bar",
+	render: () => (
+		<Stack gap="md">
+			<Group>
+				<Button
+					color="aqua"
+					onClick={() =>
+						showBar({
+							message: "Changes saved",
+							tone: "positive",
+						})
+					}
+				>
+					Positive
+				</Button>
+				<Button
+					color="red"
+					onClick={() =>
+						showBar({
+							message: "Connection lost",
+							tone: "negative",
+						})
+					}
+				>
+					Negative
+				</Button>
+				<Button
+					onClick={() =>
+						showBar({
+							message: "Something happened",
+							tone: "neutral",
+						})
+					}
+				>
+					Neutral
+				</Button>
+				<Button
+					color="red"
+					variant="light"
+					onClick={() =>
+						showBar({
+							message: "Connection lost",
+							tone: "negative",
+							buttonText: "Retry",
+							buttonClick: () => console.log("Retry clicked"),
+						})
+					}
+				>
+					Negative with action
+				</Button>
+				<Button
+					color="aqua"
+					variant="light"
+					onClick={() =>
+						showBar({
+							message: "File uploaded successfully",
+							tone: "positive",
+							buttonText: "View",
+							buttonClick: () => console.log("View clicked"),
+						})
+					}
+				>
+					Positive with action
+				</Button>
+			</Group>
+		</Stack>
+	),
+};
+
+// ---------- Dialog ----------
+
+export const Dialog: StoryObj = {
+	name: "Dialog",
+	render: () => (
+		<Stack gap="md">
+			<Group>
+				<Button
+					onClick={() =>
+						showDialog({
+							title: "Update available",
+							message: "A new version is ready to install.",
+							tone: "neutral",
+						})
+					}
+				>
+					Neutral
+				</Button>
+				<Button
+					color="aqua"
+					onClick={() =>
+						showDialog({
+							title: "Success",
+							message: "Your changes have been saved successfully.",
+							tone: "positive",
+						})
+					}
+				>
+					Positive
+				</Button>
+				<Button
+					color="red"
+					onClick={() =>
+						showDialog({
+							title: "Error",
+							message: "Something went wrong. Please try again.",
+							tone: "negative",
+						})
+					}
+				>
+					Negative
+				</Button>
+				<Button
+					variant="light"
+					onClick={() =>
+						showDialog({
+							title: "So that happened",
+							message: "Decide how you feel about it.",
+							tone: "neutral",
+							buttonText: "Do something",
+							buttonClick: () => console.log("Neutral button action"),
+						})
+					}
+				>
+					Neutral with button
+				</Button>
+				<Button
+					color="aqua"
+					variant="light"
+					onClick={() =>
+						showDialog({
+							title: "Nice job!",
+							message: "You deserve a reward. Click the button.",
+							tone: "positive",
+							buttonText: "Claim reward",
+							buttonClick: () => console.log("Reward claimed"),
+						})
+					}
+				>
+					Positive with button
+				</Button>
+				<Button
+					color="red"
+					variant="light"
+					onClick={() =>
+						showDialog({
+							title: "This is unfortunate",
+							message: "That didn't work, and there's only one thing left to do.",
+							tone: "negative",
+							buttonText: "Self Destruct",
+							buttonClick: () => console.log("Self destruct activated"),
+						})
+					}
+				>
+					Negative with button
+				</Button>
+			</Group>
+		</Stack>
+	),
+};
+
+// ---------- Dialog — Long Text ----------
+
+const LONG_PARAGRAPH =
+	"This is a much longer notification message that simulates real-world usage where the system needs to communicate detailed information to the user. It might include technical details, instructions for next steps, or a thorough explanation of what went wrong and why. The user should be able to read all of this text without it being clipped or overflowing the notification container.";
+
+const MULTI_PARAGRAPH = `Your session is about to expire due to inactivity. Any unsaved changes in the current form will be lost if you do not take action.
+
+To continue working, click the button below. If you do not respond within the next 2 minutes, you will be automatically logged out and redirected to the sign-in page.`;
+
+const VERY_LONG_TEXT =
+	"We encountered an unexpected error while processing your recent batch upload of 847 records. The first 612 records were imported successfully, but the remaining 235 records failed validation. Common issues include: missing required fields (company name, email), invalid date formats (expected YYYY-MM-DD), and duplicate entries that conflict with existing records. A detailed error report has been generated and is available for download. You can fix the flagged records in the original file and re-upload only the failed entries using the partial import feature. If you believe this error is incorrect, please contact support with reference ID ERR-2024-8847.";
+
+export const DialogLongText: StoryObj = {
+	name: "Dialog — Long Text",
+	render: () => (
+		<Stack gap="md">
+			<Group>
+				<Button
+					onClick={() =>
+						showDialog({
+							title: "Important Information",
+							message: LONG_PARAGRAPH,
+							tone: "neutral",
+						})
+					}
+				>
+					Long text (no button)
+				</Button>
+				<Button
+					variant="light"
+					onClick={() =>
+						showDialog({
+							title: "Important Information",
+							message: LONG_PARAGRAPH,
+							tone: "neutral",
+							buttonText: "Acknowledge",
+							buttonClick: () => console.log("Acknowledged"),
+						})
+					}
+				>
+					Long text with button
+				</Button>
+				<Button
+					color="red"
+					variant="light"
+					onClick={() =>
+						showDialog({
+							title: "Session Expiring Soon",
+							message: MULTI_PARAGRAPH,
+							tone: "negative",
+							buttonText: "Stay logged in",
+							buttonClick: () => console.log("Session extended"),
+						})
+					}
+				>
+					Multi-paragraph with button
+				</Button>
+				<Button
+					color="red"
+					onClick={() =>
+						showDialog({
+							title: "Batch Import Partially Failed",
+							message: VERY_LONG_TEXT,
+							tone: "negative",
+							buttonText: "Download Report",
+							buttonClick: () => console.log("Report downloaded"),
+						})
+					}
+				>
+					Very long text with button
+				</Button>
+				<Button
+					color="aqua"
+					variant="light"
+					onClick={() =>
+						showDialog({
+							title:
+								"Your organization's subscription renewal has been processed and the new billing cycle begins immediately",
+							message: LONG_PARAGRAPH,
+							tone: "positive",
+							buttonText: "View details",
+							buttonClick: () => console.log("Details viewed"),
+						})
+					}
+				>
+					Long title + long text
+				</Button>
+			</Group>
+		</Stack>
+	),
+};

package/src/mantine/stories/Switch.stories.tsx

@@ -0,0 +1,34 @@
+import { Group, Stack, Switch } from "@mantine/core";
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+
+/**
+ * Mantine Switch component styled via `createCustomMantineTheme`.
+ *
+ * Switch between Cerebellum and High Contrast themes in the Storybook toolbar
+ * to verify visual parity with the styled-components equivalents.
+ */
+const meta: Meta = {
+	title: "Mantine/Switch",
+};
+
+export default meta;
+
+export const SwitchStory: StoryObj = {
+	name: "Switch",
+	render: () => (
+		<Stack gap="lg">
+			<Group>
+				<Switch label="Default off" />
+				<Switch label="Default on" defaultChecked />
+			</Group>
+			<Group>
+				<Switch size="xs" label="Extra small" />
+				<Switch size="sm" label="Small" />
+				<Switch size="md" label="Medium" />
+				<Switch size="lg" label="Large" />
+			</Group>
+			<Switch label="Disabled" disabled />
+		</Stack>
+	),
+};

package/src/mantine/stories/Feedback.stories.tsx

@@ -1,138 +0,0 @@
-import { Button, Group, Stack, Switch } from "@mantine/core";
-import { Meta, StoryObj } from "@storybook/react";
-import React from "react";
-import { showBar, showDialog, showToast } from "../services/notifications";
-
-/**
- * Mantine Switch and Notification components styled via `createCustomMantineTheme`.
- *
- * Switch between Cerebellum and High Contrast themes in the Storybook toolbar
- * to verify visual parity with the styled-components equivalents.
- */
-const meta: Meta = {
-  title: "Mantine/Feedback",
-};
-
-export default meta;
-
-// ---------- Switch ----------
-
-export const SwitchStory: StoryObj = {
-  name: "Switch",
-  render: () => (
-    <Stack gap="lg">
-      <Group>
-        <Switch label="Default off" />
-        <Switch label="Default on" defaultChecked />
-      </Group>
-      <Group>
-        <Switch size="xs" label="Extra small" />
-        <Switch size="sm" label="Small" />
-        <Switch size="md" label="Medium" />
-        <Switch size="lg" label="Large" />
-      </Group>
-      <Switch label="Disabled" disabled />
-    </Stack>
-  ),
-};
-
-// ---------- Notifications ----------
-
-export const ToastNotifications: StoryObj = {
-  name: "Notifications — Toast",
-  render: () => (
-    <Stack gap="md">
-      <Group>
-        <Button onClick={() => showToast({ message: "Neutral toast notification" })}>Neutral Toast</Button>
-        <Button color="aqua" onClick={() => showToast({ message: "Positive toast", tone: "positive" })}>
-          Positive Toast
-        </Button>
-        <Button color="red" onClick={() => showToast({ message: "Negative toast", tone: "negative" })}>
-          Negative Toast
-        </Button>
-      </Group>
-    </Stack>
-  ),
-};
-
-export const BarNotifications: StoryObj = {
-  name: "Notifications — Bar",
-  render: () => (
-    <Stack gap="md">
-      <Group>
-        <Button
-          onClick={() =>
-            showBar({
-              message: "Changes saved",
-              tone: "positive",
-            })
-          }
-        >
-          Bar (positive)
-        </Button>
-        <Button
-          color="red"
-          onClick={() =>
-            showBar({
-              message: "Connection lost",
-              tone: "negative",
-              buttonText: "Retry",
-              buttonClick: () => console.log("Retry clicked"),
-            })
-          }
-        >
-          Bar with action (negative)
-        </Button>
-      </Group>
-    </Stack>
-  ),
-};
-
-export const DialogNotifications: StoryObj = {
-  name: "Notifications — Dialog",
-  render: () => (
-    <Stack gap="md">
-      <Group>
-        <Button
-          onClick={() =>
-            showDialog({
-              title: "Update available",
-              message: "A new version is ready to install.",
-              tone: "neutral",
-              buttonText: "Install",
-              buttonClick: () => console.log("Install clicked"),
-            })
-          }
-        >
-          Dialog (neutral)
-        </Button>
-        <Button
-          color="aqua"
-          onClick={() =>
-            showDialog({
-              title: "Success",
-              message: "Your changes have been saved successfully.",
-              tone: "positive",
-            })
-          }
-        >
-          Dialog (positive)
-        </Button>
-        <Button
-          color="red"
-          onClick={() =>
-            showDialog({
-              title: "Error",
-              message: "Something went wrong. Please try again.",
-              tone: "negative",
-              buttonText: "Retry",
-              buttonClick: () => console.log("Retry clicked"),
-            })
-          }
-        >
-          Dialog (negative)
-        </Button>
-      </Group>
-    </Stack>
-  ),
-};