@stackshift-ui/toast 1.0.0-beta.1

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@stackshift-ui/toast",
+  "description": "An opinionated toast component for React.",
+  "version": "1.0.0-beta.1",
+  "private": false,
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**",
+    "src"
+  ],
+  "author": "WebriQ <info@webriq.com>",
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^22.7.0",
+    "@types/react": "^18.3.9",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/coverage-v8": "^2.1.1",
+    "esbuild-plugin-rdi": "^0.0.0",
+    "esbuild-plugin-react18": "^0.2.5",
+    "esbuild-plugin-react18-css": "^0.0.4",
+    "jsdom": "^25.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.2",
+    "vite-tsconfig-paths": "^5.0.1",
+    "vitest": "^2.1.1",
+    "@stackshift-ui/eslint-config": "6.0.10",
+    "@stackshift-ui/typescript-config": "6.0.10"
+  },
+  "dependencies": {
+    "classnames": "^2.5.1",
+    "next-themes": "^0.4.6",
+    "sonner": "^2.0.5",
+    "@stackshift-ui/scripts": "6.1.0-beta.0",
+    "@stackshift-ui/system": "6.1.0-beta.0"
+  },
+  "peerDependencies": {
+    "@stackshift-ui/system": ">=6.1.0-beta.0",
+    "@types/react": "16.8 - 19",
+    "next": "10 - 14",
+    "react": "16.8 - 19",
+    "react-dom": "16.8 - 19"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "tsup && tsc -p tsconfig-build.json",
+    "clean": "rm -rf dist",
+    "dev": "tsup --watch && tsc -p tsconfig-build.json -w",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src/",
+    "test": "vitest run --coverage"
+  }
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+"use client";
+
+// component exports
+export * from "./toast";

package/src/setupTests.ts

@@ -0,0 +1,4 @@
+import '@testing-library/jest-dom';
+
+export { };
+

package/src/toast.test.tsx

@@ -0,0 +1,44 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, test, vi } from "vitest";
+import { toast, Toaster } from "./toast";
+
+// Object.defineProperty(window, "matchMedia", {
+//   writable: true,
+//   value: query => ({
+//     matches: false,
+//     media: query,
+//     onchange: null,
+//     addListener: () => {},
+//     removeListener: () => {},
+//     addEventListener: () => {},
+//     removeEventListener: () => {},
+//     dispatchEvent: () => false,
+//   }),
+// });
+
+window.matchMedia = vi.fn().mockImplementation(query => ({
+  matches: false,
+  media: query,
+  onchange: null,
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+  addEventListener: vi.fn(),
+  removeEventListener: vi.fn(),
+  dispatchEvent: vi.fn(),
+}));
+
+// TODO: Proper test for Toaster component
+describe.concurrent("toast", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+    vi.resetAllMocks();
+  });
+
+  test("Dummy test - test if renders without errors", ({ expect }) => {
+    const clx = "my-class";
+    const { unmount } = render(<Toaster data-testid="toast" className={clx} />);
+    expect(screen.getByLabelText("Notifications alt+T")).toBeInTheDocument();
+    unmount();
+  });
+});

package/src/toast.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, ToasterProps, toast } from "sonner";
+
+import { DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
+
+const displayName = "Toaster";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Component
+      as={Sonner}
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  );
+};
+Toaster.displayName = displayName;
+
+export { Toaster, toast, type ToasterProps };