vyrn 1.0.0

package/.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  extends: [
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+    'plugin:react-hooks/recommended',
+  ],
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  rules: {
+    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+};
+

package/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 100,
+  "tabWidth": 2
+}
+

package/README.md

@@ -0,0 +1,20 @@
+# Vyrn Toast
+
+Vyrn is a modern, customizable toast library for React and Next.js applications. It provides an easy-to-use API for displaying toast notifications with various styles and animations.
+
+## Features
+
+- 🚀 Easy to use
+- 🎨 Customizable styles
+- ♿ Accessible
+- 🔧 TypeScript support
+- ⚡ Lightweight
+- 🔄 Smooth animations
+
+## Installation
+
+```bash
+npm install vyrn
+# or
+yarn add vyrn
+

package/dist/components/Toast.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ToastProps } from '../types';
+export declare const Toast: React.FC<ToastProps>;

package/dist/components/ToastContainer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ToastProps } from '../types';
+interface ToastContainerProps {
+    toasts: ToastProps[];
+}
+export declare const ToastContainer: React.FC<ToastContainerProps>;
+export {};

package/dist/components/ToastProvider.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ToastProvider: React.FC<React.PropsWithChildren<{}>>;

package/dist/context/ToastContext.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ToastContextValue } from '../types';
+export declare const ToastContext: React.Context<ToastContextValue | undefined>;
+export declare const useToastContext: () => ToastContextValue;

package/dist/hooks/useToast.d.ts

@@ -0,0 +1,8 @@
+import { ToastType } from '../types';
+export declare const useToast: () => {
+    toast: (message: string, type?: ToastType, duration?: number) => void;
+    info: (message: string, duration?: number) => void;
+    success: (message: string, duration?: number) => void;
+    warning: (message: string, duration?: number) => void;
+    error: (message: string, duration?: number) => void;
+};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { ToastProvider } from './components/ToastProvider';
+export { useToast } from './hooks/useToast';
+export type { ToastProps, ToastType } from './types';

package/dist/index.esm.js

@@ -0,0 +1,2 @@
+import t,{createContext as r,useContext as e,useEffect as n,useState as o,useCallback as a}from"react";var i=function(){return i=Object.assign||function(t){for(var r,e=1,n=arguments.length;e<n;e++)for(var o in r=arguments[e])Object.prototype.hasOwnProperty.call(r,o)&&(t[o]=r[o]);return t},i.apply(this,arguments)};function u(t,r,e){if(e||2===arguments.length)for(var n,o=0,a=r.length;o<a;o++)!n&&o in r||(n||(n=Array.prototype.slice.call(r,0,o)),n[o]=r[o]);return t.concat(n||Array.prototype.slice.call(r))}"function"==typeof SuppressedError&&SuppressedError;var c=r(void 0),s=function(){var t=e(c);if(!t)throw new Error("useToastContext must be used within a ToastProvider");return t},l=function(r){var e=r.id,o=r.message,a=r.type,i=r.duration,u=void 0===i?3e3:i,c=s().removeToast;return n((function(){var t=setTimeout((function(){c(e)}),u);return function(){return clearTimeout(t)}}),[e,u,c]),t.createElement("div",{className:"vyrn-toast vyrn-toast-".concat(a),role:"alert"},t.createElement("div",{className:"vyrn-toast-message"},o),t.createElement("button",{className:"vyrn-toast-close",onClick:function(){return c(e)},"aria-label":"Close"},"×"))},f=function(r){var e=r.toasts;return t.createElement("div",{className:"vyrn-toast-container","aria-live":"polite","aria-atomic":"true"},e.map((function(r){return t.createElement(l,i({key:r.id},r))})))},v=function(r){var e=r.children,s=o([]),l=s[0],v=s[1],m=o([]),d=m[0],p=m[1],y=a((function(t){var r=Math.random().toString(36).substr(2,9);l.length<5?v((function(e){return u(u([],e,!0),[i(i({},t),{id:r})],!1)})):p((function(r){return u(u([],r,!0),[t],!1)}))}),[l]),g=a((function(t){v((function(r){return r.filter((function(r){return r.id!==t}))}))}),[]);return n((function(){if(l.length<5&&d.length>0){var t=d[0],r=d.slice(1);y(t),p(r)}}),[l,d,y]),t.createElement(c.Provider,{value:{addToast:y,removeToast:g}},e,t.createElement(f,{toasts:l}))},m=function(){var t=s().addToast,r=a((function(r,e,n){void 0===e&&(e="info"),t({message:r,type:e,duration:n})}),[t]);return{toast:r,info:function(t,e){return r(t,"info",e)},success:function(t,e){return r(t,"success",e)},warning:function(t,e){return r(t,"warning",e)},error:function(t,e){return r(t,"error",e)}}};export{v as ToastProvider,m as useToast};
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react");function e(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var r=e(t),n=function(){return n=Object.assign||function(t){for(var e,r=1,n=arguments.length;r<n;r++)for(var a in e=arguments[r])Object.prototype.hasOwnProperty.call(e,a)&&(t[a]=e[a]);return t},n.apply(this,arguments)};function a(t,e,r){if(r||2===arguments.length)for(var n,a=0,o=e.length;a<o;a++)!n&&a in e||(n||(n=Array.prototype.slice.call(e,0,a)),n[a]=e[a]);return t.concat(n||Array.prototype.slice.call(e))}"function"==typeof SuppressedError&&SuppressedError;var o=t.createContext(void 0),u=function(){var e=t.useContext(o);if(!e)throw new Error("useToastContext must be used within a ToastProvider");return e},i=function(e){var n=e.id,a=e.message,o=e.type,i=e.duration,s=void 0===i?3e3:i,c=u().removeToast;return t.useEffect((function(){var t=setTimeout((function(){c(n)}),s);return function(){return clearTimeout(t)}}),[n,s,c]),r.default.createElement("div",{className:"vyrn-toast vyrn-toast-".concat(o),role:"alert"},r.default.createElement("div",{className:"vyrn-toast-message"},a),r.default.createElement("button",{className:"vyrn-toast-close",onClick:function(){return c(n)},"aria-label":"Close"},"×"))},s=function(t){var e=t.toasts;return r.default.createElement("div",{className:"vyrn-toast-container","aria-live":"polite","aria-atomic":"true"},e.map((function(t){return r.default.createElement(i,n({key:t.id},t))})))};exports.ToastProvider=function(e){var u=e.children,i=t.useState([]),c=i[0],l=i[1],f=t.useState([]),d=f[0],v=f[1],p=t.useCallback((function(t){var e=Math.random().toString(36).substr(2,9);c.length<5?l((function(r){return a(a([],r,!0),[n(n({},t),{id:e})],!1)})):v((function(e){return a(a([],e,!0),[t],!1)}))}),[c]),m=t.useCallback((function(t){l((function(e){return e.filter((function(e){return e.id!==t}))}))}),[]);return t.useEffect((function(){if(c.length<5&&d.length>0){var t=d[0],e=d.slice(1);p(t),v(e)}}),[c,d,p]),r.default.createElement(o.Provider,{value:{addToast:p,removeToast:m}},u,r.default.createElement(s,{toasts:c}))},exports.useToast=function(){var e=u().addToast,r=t.useCallback((function(t,r,n){void 0===r&&(r="info"),e({message:t,type:r,duration:n})}),[e]);return{toast:r,info:function(t,e){return r(t,"info",e)},success:function(t,e){return r(t,"success",e)},warning:function(t,e){return r(t,"warning",e)},error:function(t,e){return r(t,"error",e)}}};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/types/index.d.ts

@@ -0,0 +1,11 @@
+export type ToastType = 'info' | 'success' | 'warning' | 'error';
+export interface ToastProps {
+    id: string;
+    message: string;
+    type: ToastType;
+    duration?: number;
+}
+export interface ToastContextValue {
+    addToast: (toast: Omit<ToastProps, 'id'>) => void;
+    removeToast: (id: string) => void;
+}

package/dist/utils/animations.d.ts

@@ -0,0 +1,2 @@
+export declare const fadeIn = "\n  @keyframes vyrnFadeIn {\n    from { opacity: 0; transform: translateY(20px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n";
+export declare const fadeOut = "\n  @keyframes vyrnFadeOut {\n    from { opacity: 1; transform: translateY(0); }\n    to { opacity: 0; transform: translateY(-20px); }\n  }\n";

package/dist/utils/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const TOAST_TYPES: readonly ["info", "success", "warning", "error"];
+export declare const DEFAULT_DURATION = 3000;
+export declare const MAX_TOASTS = 5;

package/jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
+  moduleNameMapper: {
+    '\\.(css|less|sass|scss)$': '<rootDir>/tests/__mocks__/styleMock.js',
+  },
+};
+

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "vyrn",
+  "version": "1.0.0",
+  "description": "A modern, customizable toast library for React and Next.js",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "rollup -c",
+    "test": "jest",
+    "lint": "eslint 'src/**/*.{js,ts,tsx}'",
+    "lint:fix": "eslint 'src/**/*.{js,ts,tsx}' --fix",
+    "format": "prettier --write 'src/**/*.{js,ts,tsx}'",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "nextjs",
+    "toast",
+    "notification"
+  ],
+  "author": "Your Name",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/react-hooks": "^7.0.2",
+    "@types/jest": "^27.4.1",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.13.0",
+    "@typescript-eslint/parser": "^5.13.0",
+    "eslint": "^8.10.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-react": "^7.29.3",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "jest": "^27.5.1",
+    "postcss": "^8.4.49",
+    "prettier": "^2.5.1",
+    "rollup": "^2.70.0",
+    "rollup-plugin-postcss": "^4.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.31.0",
+    "ts-jest": "^27.1.3",
+    "typescript": "^4.5.0"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,38 @@
+import typescript from 'rollup-plugin-typescript2';
+import postcss from 'rollup-plugin-postcss';
+import { terser } from 'rollup-plugin-terser';
+import pkg from './package.json';
+
+export default {
+  input: 'src/index.ts',
+  output: [
+    {
+      file: pkg.main,
+      format: 'cjs',
+      exports: 'named',
+      sourcemap: true,
+    },
+    {
+      file: pkg.module,
+      format: 'es',
+      exports: 'named',
+      sourcemap: true,
+    },
+  ],
+  plugins: [
+    typescript({
+      tsconfig: 'tsconfig.json',
+      clean: true,
+    }),
+    postcss({
+      extensions: ['.css'],
+      minimize: true,
+      inject: {
+        insertAt: 'top',
+      },
+    }),
+    terser(),
+  ],
+  external: [...Object.keys(pkg.peerDependencies || {})],
+};
+

package/src/components/Toast.tsx

@@ -0,0 +1,26 @@
+import React, { useEffect } from 'react';
+import { ToastProps } from '../types';
+import { useToastContext } from '../context/ToastContext';
+import { DEFAULT_DURATION } from '../utils/constants';
+
+export const Toast: React.FC<ToastProps> = ({ id, message, type, duration = DEFAULT_DURATION }) => {
+  const { removeToast } = useToastContext();
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      removeToast(id);
+    }, duration);
+
+    return () => clearTimeout(timer);
+  }, [id, duration, removeToast]);
+
+  return (
+    <div className={`vyrn-toast vyrn-toast-${type}`} role="alert">
+      <div className="vyrn-toast-message">{message}</div>
+      <button className="vyrn-toast-close" onClick={() => removeToast(id)} aria-label="Close">
+        &times;
+      </button>
+    </div>
+  );
+};
+

package/src/components/ToastContainer.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Toast } from './Toast';
+import { ToastProps } from '../types';
+
+interface ToastContainerProps {
+  toasts: ToastProps[];
+}
+
+export const ToastContainer: React.FC<ToastContainerProps> = ({ toasts }) => {
+  return (
+    <div className="vyrn-toast-container" aria-live="polite" aria-atomic="true">
+      {toasts.map((toast) => (
+        <Toast key={toast.id} {...toast} />
+      ))}
+    </div>
+  );
+};
+

package/src/components/ToastProvider.tsx

@@ -0,0 +1,39 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { ToastContext } from '../context/ToastContext';
+import { ToastContainer } from './ToastContainer';
+import { ToastProps } from '../types';
+import { MAX_TOASTS } from '../utils/constants';
+
+export const ToastProvider: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
+  const [toasts, setToasts] = useState<ToastProps[]>([]);
+  const [queue, setQueue] = useState<Omit<ToastProps, 'id'>[]>([]);
+
+  const addToast = useCallback((toast: Omit<ToastProps, 'id'>) => {
+    const id = Math.random().toString(36).substr(2, 9);
+    if (toasts.length < MAX_TOASTS) {
+      setToasts((prevToasts) => [...prevToasts, { ...toast, id }]);
+    } else {
+      setQueue((prevQueue) => [...prevQueue, toast]);
+    }
+  }, [toasts]);
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id));
+  }, []);
+
+  useEffect(() => {
+    if (toasts.length < MAX_TOASTS && queue.length > 0) {
+      const [nextToast, ...restQueue] = queue;
+      addToast(nextToast);
+      setQueue(restQueue);
+    }
+  }, [toasts, queue, addToast]);
+
+  return (
+    <ToastContext.Provider value={{ addToast, removeToast }}>
+      {children}
+      <ToastContainer toasts={toasts} />
+    </ToastContext.Provider>
+  );
+};
+

package/src/context/ToastContext.tsx

@@ -0,0 +1,13 @@
+import React, { createContext, useContext } from 'react';
+import { ToastContextValue } from '../types';
+
+export const ToastContext = createContext<ToastContextValue | undefined>(undefined);
+
+export const useToastContext = () => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToastContext must be used within a ToastProvider');
+  }
+  return context;
+};
+

package/src/hooks/useToast.ts

@@ -0,0 +1,23 @@
+import { useCallback } from 'react';
+import { useToastContext } from '../context/ToastContext';
+import { ToastType } from '../types';
+
+export const useToast = () => {
+  const { addToast } = useToastContext();
+
+  const toast = useCallback(
+    (message: string, type: ToastType = 'info', duration?: number) => {
+      addToast({ message, type, duration });
+    },
+    [addToast]
+  );
+
+  return {
+    toast,
+    info: (message: string, duration?: number) => toast(message, 'info', duration),
+    success: (message: string, duration?: number) => toast(message, 'success', duration),
+    warning: (message: string, duration?: number) => toast(message, 'warning', duration),
+    error: (message: string, duration?: number) => toast(message, 'error', duration),
+  };
+};
+

package/src/index.ts

@@ -0,0 +1,4 @@
+export { ToastProvider } from './components/ToastProvider';
+export { useToast } from './hooks/useToast';
+export type { ToastProps, ToastType } from './types';
+

package/src/styles/toast.css

@@ -0,0 +1,71 @@
+.vyrn-toast-container {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  z-index: 9999;
+}
+
+.vyrn-toast {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-radius: 4px;
+  margin-bottom: 0.5rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  animation: vyrnFadeIn 0.3s ease-out;
+}
+
+.vyrn-toast-info {
+  background-color: #3498db;
+  color: #fff;
+}
+
+.vyrn-toast-success {
+  background-color: #2ecc71;
+  color: #fff;
+}
+
+.vyrn-toast-warning {
+  background-color: #f39c12;
+  color: #fff;
+}
+
+.vyrn-toast-error {
+  background-color: #e74c3c;
+  color: #fff;
+}
+
+.vyrn-toast-message {
+  flex-grow: 1;
+  margin-right: 1rem;
+}
+
+.vyrn-toast-close {
+  background: none;
+  border: none;
+  color: inherit;
+  font-size: 1.2rem;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+}
+
+.vyrn-toast-close:hover {
+  opacity: 1;
+}
+
+@keyframes vyrnFadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes vyrnFadeOut {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(-20px); }
+}
+
+.vyrn-toast-exit {
+  animation: vyrnFadeOut 0.3s ease-in forwards;
+}
+

package/src/types/index.ts

@@ -0,0 +1,14 @@
+export type ToastType = 'info' | 'success' | 'warning' | 'error';
+
+export interface ToastProps {
+  id: string;
+  message: string;
+  type: ToastType;
+  duration?: number;
+}
+
+export interface ToastContextValue {
+  addToast: (toast: Omit<ToastProps, 'id'>) => void;
+  removeToast: (id: string) => void;
+}
+

package/src/utils/animations.ts

@@ -0,0 +1,14 @@
+export const fadeIn = `
+  @keyframes vyrnFadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+`;
+
+export const fadeOut = `
+  @keyframes vyrnFadeOut {
+    from { opacity: 1; transform: translateY(0); }
+    to { opacity: 0; transform: translateY(-20px); }
+  }
+`;
+

package/src/utils/constants.ts

@@ -0,0 +1,4 @@
+export const TOAST_TYPES = ['info', 'success', 'warning', 'error'] as const;
+export const DEFAULT_DURATION = 3000;
+export const MAX_TOASTS = 5;
+

package/tests/Toast.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Toast } from '../src/components/Toast';
+import { ToastContext } from '../src/context/ToastContext';
+
+const mockRemoveToast = jest.fn();
+
+const renderToast = (props: any) =>
+  render(
+    <ToastContext.Provider value={{ removeToast: mockRemoveToast } as any}>
+      <Toast {...props} />
+    </ToastContext.Provider>
+  );
+
+describe('Toast', () => {
+  it('renders the message', () => {
+    renderToast({ id: '1', message: 'Test message', type: 'info' });
+    expect(screen.getByText('Test message')).toBeInTheDocument();
+  });
+
+  it('applies the correct CSS class based on type', () => {
+    renderToast({ id: '1', message: 'Test message', type: 'success' });
+    expect(screen.getByRole('alert')).toHaveClass('vyrn-toast-success');
+  });
+
+  it('calls removeToast when close button is clicked', () => {
+    renderToast({ id: '1', message: 'Test message', type: 'info' });
+    screen.getByRole('button').click();
+    expect(mockRemoveToast).toHaveBeenCalledWith('1');
+  });
+});
+

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "lib": ["dom", "esnext"],
+    "jsx": "react",
+    "declaration": true,
+    "declarationDir": "dist",
+    "strict": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist", "tests"]
+}
+