@esitorsunil/new-folder 1.0.0 → 1.0.2

package/README.md

@@ -0,0 +1,69 @@
+# React Notifications with Redux Toolkit
+
+This project demonstrates how to integrate a notification panel using Redux Toolkit and a custom package `@esitorsunil/new-folder`.
+
+## Setup
+
+### 1. Install dependencies
+
+```bash
+npm install
+Make sure to have your custom package installed:
+
+bash
+
+npm install @esitorsunil/new-folder
+
+
+2. Store Configuration (store/appStore.js)
+Configure your Redux store to include the notifications reducer from the custom package:
+
+
+import { configureStore } from '@reduxjs/toolkit';
+import { notificationsReducer } from '@esitorsunil/new-folder';
+
+export const store = configureStore({
+  reducer: {
+    notifications: notificationsReducer,
+  },
+});
+
+
+3. Usage in React App (App.jsx)
+Wrap your app with Redux Provider and import the NotificationsPanel and pushNotification action from the package:
+
+
+import React from 'react';
+import { Provider, useDispatch } from 'react-redux';
+import { store } from './store/appStore';
+import { NotificationsPanel, pushNotification } from '@esitorsunil/new-folder';
+
+function SomeComponent() {
+  const dispatch = useDispatch();
+
+  const handleAddNotification = () => {
+    dispatch(pushNotification({
+      id: Date.now(),
+      type: 'success',
+      message: 'Hello from SomeComponent!',
+    }));
+  };
+
+  return (
+    <div>
+      <button onClick={handleAddNotification}>Show Notification</button>
+    </div>
+  );
+}
+
+export default function App() {
+  return (
+    <Provider store={store}>
+      <div>
+        <h1>My React App</h1>
+        <SomeComponent />
+        <NotificationsPanel />
+      </div>
+    </Provider>
+  );
+}

package/dist/index.js

@@ -1 +1,27 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  NotificationsPanel: true
+};
+Object.defineProperty(exports, "NotificationsPanel", {
+  enumerable: true,
+  get: function get() {
+    return _NotificationsPanel.NotificationsPanel;
+  }
+});
+var _NotificationsPanel = require("./notification/NotificationsPanel");
+var _notificationsSlice = require("./notification/notificationsSlice");
+Object.keys(_notificationsSlice).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _notificationsSlice[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _notificationsSlice[key];
+    }
+  });
+});

package/dist/notification/NotificationsPanel.js

@@ -1 +1,50 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NotificationsPanel = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactRedux = require("react-redux");
+var _notificationsSlice = require("./notificationsSlice");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+// NotificationsPanel.jsx
+
+var NotificationsPanel = exports.NotificationsPanel = function NotificationsPanel() {
+  var notifications = (0, _reactRedux.useSelector)(function (state) {
+    return state.notifications.items;
+  });
+  var dispatch = (0, _reactRedux.useDispatch)();
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      position: 'fixed',
+      top: 10,
+      right: 10,
+      zIndex: 1000
+    }
+  }, notifications.map(function (n) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: n.id,
+      style: {
+        background: n.type === 'error' ? '#f44336' : n.type === 'success' ? '#4caf50' : '#2196f3',
+        color: '#fff',
+        padding: '10px 15px',
+        marginBottom: 8,
+        borderRadius: 4,
+        minWidth: 200,
+        boxShadow: '0 2px 4px rgba(0,0,0,0.3)'
+      }
+    }, n.message, /*#__PURE__*/_react["default"].createElement("button", {
+      onClick: function onClick() {
+        return dispatch((0, _notificationsSlice.removeNotification)(n.id));
+      },
+      style: {
+        marginLeft: 10,
+        background: 'transparent',
+        border: 'none',
+        color: '#fff',
+        cursor: 'pointer'
+      }
+    }, "\xD7"));
+  }));
+};

package/dist/notification/notificationsSlice.js

@@ -1 +1,32 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.removeNotification = exports.pushNotification = exports.notificationsReducer = exports.clearNotifications = void 0;
+var _toolkit = require("@reduxjs/toolkit");
+var initialState = {
+  items: []
+};
+var notificationsSlice = (0, _toolkit.createSlice)({
+  name: 'notifications',
+  initialState: initialState,
+  reducers: {
+    pushNotification: function pushNotification(state, action) {
+      state.items.push(action.payload);
+    },
+    removeNotification: function removeNotification(state, action) {
+      state.items = state.items.filter(function (n) {
+        return n.id !== action.payload;
+      });
+    },
+    clearNotifications: function clearNotifications(state) {
+      state.items = [];
+    }
+  }
+});
+var _notificationsSlice$a = notificationsSlice.actions,
+  pushNotification = exports.pushNotification = _notificationsSlice$a.pushNotification,
+  removeNotification = exports.removeNotification = _notificationsSlice$a.removeNotification,
+  clearNotifications = exports.clearNotifications = _notificationsSlice$a.clearNotifications;
+var notificationsReducer = exports.notificationsReducer = notificationsSlice.reducer;

package/package.json

@@ -1,21 +1,26 @@
 {
   "name": "@esitorsunil/new-folder",
-  "version": "1.0.0",
-  "main": "index.js",
+  "version": "1.0.2",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-     "build": "babel src --out-dir dist --copy-files"
+    "build": "babel src --out-dir dist --copy-files"
   },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "description": "",
   "dependencies": {
     "@reduxjs/toolkit": "^1.9.0",
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0",
     "react-redux": "^8.0.0"
   },
+  "peerDependencies": {
+    "@reduxjs/toolkit": "^1.9.0",
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0",
+    "react-redux": "^8.0.0"
+  },
   "devDependencies": {
     "@babel/cli": "^7.27.2",
     "@babel/core": "^7.27.1",
@@ -24,10 +29,10 @@
     "@babel/preset-react": "^7.27.1",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24"
   },
-  "peerDependencies": {
-    "@reduxjs/toolkit": "^1.9.0",
-    "react": ">=17.0.0",
-    "react-dom": ">=17.0.0",
-    "react-redux": "^8.0.0"
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    }
   }
 }

package/.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["@babel/preset-env", "@babel/preset-react"]
-}

package/src/index.js

@@ -1,2 +0,0 @@
-export * from './notification/NotificationsPanel';
-export * from './notification/notificationsSlice';

package/src/notification/NotificationsPanel.jsx

@@ -1,47 +0,0 @@
-// NotificationsPanel.jsx
-import React from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import { removeNotification } from './notificationsSlice';
-
-export const NotificationsPanel = () => {
-  const notifications = useSelector((state) => state.notifications.items);
-  const dispatch = useDispatch();
-
-  return (
-    <div style={{ position: 'fixed', top: 10, right: 10, zIndex: 1000 }}>
-      {notifications.map(n => (
-        <div
-          key={n.id}
-          style={{
-            background:
-              n.type === 'error'
-                ? '#f44336'
-                : n.type === 'success'
-                ? '#4caf50'
-                : '#2196f3',
-            color: '#fff',
-            padding: '10px 15px',
-            marginBottom: 8,
-            borderRadius: 4,
-            minWidth: 200,
-            boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
-          }}
-        >
-          {n.message}
-          <button
-            onClick={() => dispatch(removeNotification(n.id))}
-            style={{
-              marginLeft: 10,
-              background: 'transparent',
-              border: 'none',
-              color: '#fff',
-              cursor: 'pointer',
-            }}
-          >
-            ×
-          </button>
-        </div>
-      ))}
-    </div>
-  );
-};

package/src/notification/notificationsSlice.js

@@ -1,24 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit';
-
-const initialState = {
-  items: [],
-};
-
-const notificationsSlice = createSlice({
-  name: 'notifications',
-  initialState,
-  reducers: {
-    pushNotification: (state, action) => {
-      state.items.push(action.payload);
-    },
-    removeNotification: (state, action) => {
-      state.items = state.items.filter(n => n.id !== action.payload);
-    },
-    clearNotifications: (state) => {
-      state.items = [];
-    },
-  },
-});
-
-export const { pushNotification, removeNotification, clearNotifications } = notificationsSlice.actions;
-export const notificationsReducer = notificationsSlice.reducer;