+ 
+
+);
+
+export default Logo;
diff --git a/examples/alert-manager/src/eventrixStore.ts b/examples/alert-manager/src/eventrixStore.ts
new file mode 100644
index 0000000..7e18b07
--- /dev/null
+++ b/examples/alert-manager/src/eventrixStore.ts
@@ -0,0 +1,5 @@
+import Eventrix from 'eventrix';
+
+const eventrixStore = new Eventrix();
+
+export default eventrixStore;
diff --git a/examples/alert-manager/src/index.css b/examples/alert-manager/src/index.css
new file mode 100644
index 0000000..c9ed2d8
--- /dev/null
+++ b/examples/alert-manager/src/index.css
@@ -0,0 +1,4 @@
+.App {
+ font-family: sans-serif;
+ text-align: center;
+}
diff --git a/examples/alert-manager/src/main.tsx b/examples/alert-manager/src/main.tsx
new file mode 100644
index 0000000..55de41e
--- /dev/null
+++ b/examples/alert-manager/src/main.tsx
@@ -0,0 +1,14 @@
+import React, { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './index.css';
+import App from './App';
+import { EventrixProvider } from 'eventrix';
+import eventrixStore from './eventrixStore';
+
+createRoot(document.getElementById('root')!).render(
+
+
+
+
+
+
+);
+
+export default Logo;
diff --git a/examples/forms/src/index.css b/examples/forms/src/index.css
new file mode 100644
index 0000000..65e7708
--- /dev/null
+++ b/examples/forms/src/index.css
@@ -0,0 +1,82 @@
+.App {
+ font-family: sans-serif;
+ text-align: center;
+}
+
+.logo {
+ text-align: left;
+ margin-bottom: 15px;
+}
+
+.logo img {
+ height: 80px;
+}
+
+.usersList {
+ display: block;
+ margin-top: 15px;
+}
+
+.usersItem {
+ display: flex;
+ border-top: 1px solid #ddd;
+}
+
+.userItemColl {
+ padding: 15px;
+ width: 120px;
+}
+
+.usersListHeader {
+ display: flex;
+}
+
+.usersListHeaderColl {
+ padding: 15px;
+ background: #333;
+ color: #fff;
+ width: 120px;
+}
+
+.usersListPlaceholder {
+ padding: 50px;
+}
+
+.inputWrapper {
+ text-align: left;
+ margin-top: 10px;
+}
+
+.inputWrapper label {
+ display: inline-block;
+ margin-right: 10px;
+ text-align: left;
+ padding-left: 5px;
+ width: 100px;
+}
+
+.inputWrapper input {
+ padding: 6px 10px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+}
+
+.formContainer {
+ display: flex;
+}
+
+.formContainer button {
+ margin-top: 15px;
+}
+
+.formContainer > div {
+ width: 45%;
+}
+
+.userPreview {
+ padding: 20px;
+ background: #ddd;
+ width: 100%;
+ height: 90%;
+ text-align: left;
+}
diff --git a/examples/forms/src/main.tsx b/examples/forms/src/main.tsx
new file mode 100644
index 0000000..1fdb340
--- /dev/null
+++ b/examples/forms/src/main.tsx
@@ -0,0 +1,10 @@
+import React, { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+createRoot(document.getElementById('root')!).render(
+
+
+
+ );
+};
+
+export default UserForm;
diff --git a/examples/forms/src/modules/Users/Form/Input.tsx b/examples/forms/src/modules/Users/Form/Input.tsx
new file mode 100644
index 0000000..1560402
--- /dev/null
+++ b/examples/forms/src/modules/Users/Form/Input.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { useEventrixState } from 'eventrix';
+
+interface InputProps {
+ name: string;
+ label?: string;
+ placeholder: string;
+}
+
+const Input: React.FC
+
+
+
+
+
+
+
+
+ setValue(e.target.value)} placeholder={placeholder} />
+
+ );
+};
+
+export default Input;
diff --git a/examples/forms/src/modules/Users/Form/UserPreview.tsx b/examples/forms/src/modules/Users/Form/UserPreview.tsx
new file mode 100644
index 0000000..59a176f
--- /dev/null
+++ b/examples/forms/src/modules/Users/Form/UserPreview.tsx
@@ -0,0 +1,22 @@
+import React, { useState } from 'react';
+import { useEventrixState, useEvent } from 'eventrix';
+import { CHANGE_PREVIEW_COLOR } from './Form';
+
+const UserPreview = () => {
+ const [color, setColor] = useState('black');
+ const [user] = useEventrixState('user');
+ useEvent(CHANGE_PREVIEW_COLOR, (data) => {
+ setColor(data.color);
+ });
+ return (
+
+
+ "user"
+ {' '}
+ state in eventrix store:
+
+ );
+};
+
+export default UserPreview;
diff --git a/examples/forms/src/modules/Users/List/Item.tsx b/examples/forms/src/modules/Users/List/Item.tsx
new file mode 100644
index 0000000..55cc615
--- /dev/null
+++ b/examples/forms/src/modules/Users/List/Item.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+interface UsersItemProps {
+ id: number;
+ username: string;
+ name: string;
+ surname: string;
+ country: string;
+ city: string;
+ street: string;
+ phone: string;
+}
+
+const UsersItem: React.FC{JSON.stringify(user, null, 2)}
+
+
+ );
+};
+
+export default UsersItem;
diff --git a/examples/forms/src/modules/Users/List/List.tsx b/examples/forms/src/modules/Users/List/List.tsx
new file mode 100644
index 0000000..d6c12b1
--- /dev/null
+++ b/examples/forms/src/modules/Users/List/List.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { useEventrixState } from 'eventrix';
+import UserItem from './Item';
+
+const UsersList = () => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const [users] = useEventrixState{username}
+ {name}
+ {surname}
+ {country}
+ {city}
+ {street}
+ {phone}
+
+
+ );
+};
+
+export default UsersList;
diff --git a/examples/forms/src/modules/Users/Users.tsx b/examples/forms/src/modules/Users/Users.tsx
new file mode 100644
index 0000000..3592091
--- /dev/null
+++ b/examples/forms/src/modules/Users/Users.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import UsersList from './List/List';
+import UserForm from './Form/Form';
+
+const UsersModule = () => {
+ return (
+
+
+ {users.length === 0 && username
+ name
+ surname
+ country
+ city
+ street
+ phone
+ Users list is empty
}
+ {users.map((user) => (
+
+
+ );
+};
+
+export default UsersModule;
diff --git a/examples/forms/src/services/Eventrix/index.ts b/examples/forms/src/services/Eventrix/index.ts
new file mode 100644
index 0000000..4c03b0e
--- /dev/null
+++ b/examples/forms/src/services/Eventrix/index.ts
@@ -0,0 +1,11 @@
+import { Eventrix } from 'eventrix';
+import usersEventsReceiver from './users';
+
+const initialState = {
+ user: {},
+ users: [],
+};
+
+const eventsReceivers = [usersEventsReceiver];
+
+export default new Eventrix(initialState, eventsReceivers);
diff --git a/examples/forms/src/services/Eventrix/users.ts b/examples/forms/src/services/Eventrix/users.ts
new file mode 100644
index 0000000..fd8c98d
--- /dev/null
+++ b/examples/forms/src/services/Eventrix/users.ts
@@ -0,0 +1,12 @@
+import { EventsReceiver } from 'eventrix';
+
+const CREATE_USER_EVENT_NAME = 'users:createUser';
+
+const usersEventsReceiver = new EventsReceiver(CREATE_USER_EVENT_NAME, (eventName, eventData, storeManager) => {
+ const user = storeManager.getState('user');
+ const users = storeManager.getState('users');
+ storeManager.setState('users', [user, ...users]);
+ storeManager.setState('user', {});
+});
+
+export default usersEventsReceiver;
diff --git a/examples/forms/tsconfig.json b/examples/forms/tsconfig.json
new file mode 100644
index 0000000..45a7d45
--- /dev/null
+++ b/examples/forms/tsconfig.json
@@ -0,0 +1,30 @@
+{
+ "compilerOptions": {
+ "paths": {
+ "eventrix": ["../../src/index.ts"]
+ },
+ "baseUrl": "./",
+ "rootDir": "../../",
+ "target": "ESNext",
+ "module": "ESNext",
+ "moduleResolution": "Node",
+ "jsx": "react-jsx",
+ "types": ["vite/client", "node", "react"],
+ "lib": ["ESNext", "DOM", "DOM.Iterable"],
+ "allowJs": true,
+ "allowSyntheticDefaultImports": true,
+ "useDefineForClassFields": true,
+ "strict": true,
+ "skipLibCheck": false,
+ "sourceMap": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "esModuleInterop": true,
+ "noEmit": true,
+ "noUnusedLocals": false,
+ "noUnusedParameters": false,
+ "noImplicitReturns": false,
+ "forceConsistentCasingInFileNames": true
+
+ },
+}
diff --git a/examples/forms/vite.config.ts b/examples/forms/vite.config.ts
new file mode 100644
index 0000000..c7f2182
--- /dev/null
+++ b/examples/forms/vite.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [react()],
+ resolve: {
+ alias: {
+ eventrix: path.join(__dirname, '../../src/index.ts'),
+ },
+ },
+});
diff --git a/examples/todo-list/.gitignore b/examples/todo-list/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/examples/todo-list/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/todo-list/index.html b/examples/todo-list/index.html
new file mode 100644
index 0000000..88d775a
--- /dev/null
+++ b/examples/todo-list/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+ TO DO LIST
+
+
+
+
+
+ );
+};
+
+export default CreateTaskForm;
diff --git a/examples/todo-list/src/components/Logo.tsx b/examples/todo-list/src/components/Logo.tsx
new file mode 100644
index 0000000..84de0d4
--- /dev/null
+++ b/examples/todo-list/src/components/Logo.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Logo = () => (
+
+
+
+);
+
+export default Logo;
diff --git a/examples/todo-list/src/components/Task.tsx b/examples/todo-list/src/components/Task.tsx
new file mode 100644
index 0000000..4ee93a8
--- /dev/null
+++ b/examples/todo-list/src/components/Task.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { MARK_TASK_AS_DONE_EVENT_NAME, MARK_TASK_AS_TODO_EVENT_NAME, REMOVE_TASK_EVENT_NAME } from '../eventrix/tasks';
+import { useEmit } from 'eventrix';
+
+interface TaskProps {
+ task: {
+ id: string;
+ title: string;
+ status: string;
+ };
+}
+
+const Task: React.FC
+
+ emit(task.status === 'todo' ? MARK_TASK_AS_DONE_EVENT_NAME : MARK_TASK_AS_TODO_EVENT_NAME, { id: task.id })}
+ />
+
+ );
+};
+
+export default Task;
diff --git a/examples/todo-list/src/components/TodoFooter.tsx b/examples/todo-list/src/components/TodoFooter.tsx
new file mode 100644
index 0000000..bdbb30b
--- /dev/null
+++ b/examples/todo-list/src/components/TodoFooter.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import './TodoList/TodoList.css';
+import { useEventrixState } from 'eventrix';
+
+const TodoFooter: React.FC = () => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const [tasks] = useEventrixState{task.title}
+ {task.status}
+
+ Tasks count: {tasksList.length}
;
+};
+
+export default TodoFooter;
diff --git a/examples/todo-list/src/components/TodoList/TodoList.css b/examples/todo-list/src/components/TodoList/TodoList.css
new file mode 100644
index 0000000..ef7bd68
--- /dev/null
+++ b/examples/todo-list/src/components/TodoList/TodoList.css
@@ -0,0 +1,102 @@
+.list {
+ width: 350px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.list-item {
+ text-align: left;
+ display: flex;
+ align-items: center;
+ padding: 10px;
+ background: #ddd;
+ width: 100%;
+ border-top: 1px solid #c1c1c1;
+}
+
+.task-title {
+ width: 100%;
+ display: inline-block;
+}
+
+.list-item input {
+ display: inline-block;
+ width: 40px;
+ height: 25px;
+ margin-right: 10px;
+}
+
+.list-item button {
+ width: 120px;
+ margin-right: 15px;
+}
+
+.status {
+ background: #333;
+ color: #fff;
+ display: inline-block;
+ padding: 5px 8px;
+ border-radius: 4px;
+ margin-left: 10px;
+ width: 100px;
+ text-align: center;
+}
+
+.todo {
+ background: #333;
+ color: #fff;
+}
+
+.done {
+ background: green;
+ color: #fff;
+}
+
+.removeButton {
+ width: 25px !important;
+ height: 25px;
+ display: inline-block;
+ text-align: center;
+ background: red;
+ color: #fff;
+ border: 1px solid #333;
+ border-radius: 100%;
+ margin-left: 10px;
+ cursor: pointer;
+ opacity: 0.7;
+}
+
+.removeButton:hover {
+ opacity: 1;
+}
+
+.filters {
+ display: flex;
+ flex-wrap: nowrap;
+ background: #efefef;
+ width: 100%;
+ padding: 0 10px;
+}
+
+.status-button {
+ display: inline-block;
+ width: 100%;
+ padding: 8px 0;
+ cursor: pointer;
+}
+
+.status-button.active {
+ border-bottom: 3px solid #4796ff;
+}
+
+.status-button:hover {
+ background: #ddd;
+}
+
+.list-placeholder {
+ border-top: 1px solid #c1c1c1;
+ padding: 20px 10px;
+ width: 100%;
+ background: #ddd;
+ color: #8a8a8a;
+}
diff --git a/examples/todo-list/src/components/TodoList/TodoList.tsx b/examples/todo-list/src/components/TodoList/TodoList.tsx
new file mode 100644
index 0000000..765533a
--- /dev/null
+++ b/examples/todo-list/src/components/TodoList/TodoList.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import Task from '../Task';
+import './TodoList.css';
+import { useEventrixState } from 'eventrix';
+
+const TodoList: React.FC = () => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const [tasks] = useEventrixState
+
+ );
+};
+
+export default TodoList;
diff --git a/examples/todo-list/src/eventrix/index.ts b/examples/todo-list/src/eventrix/index.ts
new file mode 100644
index 0000000..d37c800
--- /dev/null
+++ b/examples/todo-list/src/eventrix/index.ts
@@ -0,0 +1,8 @@
+import { Eventrix } from 'eventrix';
+import taskEventsReceivers from './tasks';
+
+const initialState = {
+ tasks: [],
+};
+
+export default new Eventrix(initialState, taskEventsReceivers);
diff --git a/examples/todo-list/src/eventrix/tasks.ts b/examples/todo-list/src/eventrix/tasks.ts
new file mode 100644
index 0000000..8a4d945
--- /dev/null
+++ b/examples/todo-list/src/eventrix/tasks.ts
@@ -0,0 +1,34 @@
+import findIndex from 'lodash/findIndex';
+import { EventsReceiver } from 'eventrix';
+
+export const CREATE_TASK_EVENT_NAME = 'tasks:create';
+export const REMOVE_TASK_EVENT_NAME = 'tasks:remove';
+export const MARK_TASK_AS_DONE_EVENT_NAME = 'tasks:markAsDone';
+export const MARK_TASK_AS_TODO_EVENT_NAME = 'tasks:markAsTodo';
+
+const createTaskReceiver = new EventsReceiver(CREATE_TASK_EVENT_NAME, (eventName, { task }, stateManager) => {
+ const tasks = stateManager.getState('tasks');
+ stateManager.setState('tasks', [task, ...tasks]);
+});
+
+const removeTaskReceiver = new EventsReceiver(REMOVE_TASK_EVENT_NAME, (eventName, { id }, stateManager) => {
+ const tasks = stateManager.getState('tasks');
+ const newTasks = tasks.filter((task) => task.id !== id);
+ stateManager.setState('tasks', newTasks);
+});
+
+const markAsDoneReceiver = new EventsReceiver(MARK_TASK_AS_DONE_EVENT_NAME, (eventName, { id }, stateManager) => {
+ const tasks = stateManager.getState('tasks');
+ const taskIndex = findIndex(tasks, (task) => task.id === id);
+ const task = { ...tasks[taskIndex], status: 'done' };
+ stateManager.setState(`tasks.${taskIndex}`, task);
+});
+
+const markAsTodoReceiver = new EventsReceiver(MARK_TASK_AS_TODO_EVENT_NAME, (eventName, { id }, stateManager) => {
+ const tasks = stateManager.getState('tasks');
+ const taskIndex = findIndex(tasks, (task) => task.id === id);
+ const task = { ...tasks[taskIndex], status: 'todo' };
+ stateManager.setState(`tasks.${taskIndex}`, task);
+});
+
+export default [markAsDoneReceiver, markAsTodoReceiver, createTaskReceiver, removeTaskReceiver];
diff --git a/examples/todo-list/src/index.css b/examples/todo-list/src/index.css
new file mode 100644
index 0000000..3c5c70b
--- /dev/null
+++ b/examples/todo-list/src/index.css
@@ -0,0 +1,27 @@
+.App {
+ font-family: sans-serif;
+ text-align: center;
+}
+
+.logo {
+ text-align: left;
+ margin-bottom: 15px;
+}
+
+.logo img {
+ height: 80px;
+}
+
+.todo-app {
+ width: 350px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.todo-footer {
+ width: 100%;
+ background: #efefef;
+ border-radius: 0 0 4px 4px;
+ border-top: 1px solid #c1c1c1;
+ padding: 10px;
+}
diff --git a/examples/todo-list/src/main.tsx b/examples/todo-list/src/main.tsx
new file mode 100644
index 0000000..1fdb340
--- /dev/null
+++ b/examples/todo-list/src/main.tsx
@@ -0,0 +1,10 @@
+import React, { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+createRoot(document.getElementById('root')!).render(
+
+
+ setStatusFilter('')}>
+ All
+
+ setStatusFilter('todo')}>
+ To do
+
+ setStatusFilter('done')}>
+ Done
+
+
+ {tasksList.length === 0 &&
+ Tasks list empty
}
+ {tasksList.map((task) => (
+