eventrix examples

.prettierrc

@@ -3,5 +3,6 @@
   "printWidth": 140,
   "tabWidth": 4,
   "singleQuote": true,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "endOfLine": "lf"
 }

README.md

@@ -1,23 +1,23 @@
 ![Eventrix](assets/logo_br.svg)
 
-STATE MANAGMENT FOR **REACT** AND **REACT NATIVE** APPS
+State Management for **React** and **React Native** Applications
 
 [![Build Status](https://travis-ci.org/rstgroup/eventrix.svg?branch=master)](https://travis-ci.org/rstgroup/eventrix)
 [![npm](https://img.shields.io/npm/l/eventrix.svg)](https://npmjs.org/package/eventrix)
 [![npm](https://img.shields.io/npm/v/eventrix.svg)](https://npmjs.org/package/eventrix)
 
-### Support
+# Support
 - React
 - React Native
 - SSR (Next.js)
 
-### Installation
+# Installation
 
 ```bash
 $ npm install eventrix --save
 ```
 
-### Documentation
+# Documentation
 
 [**Get started**](https://eventrix.gitbook.io/eventrix/getting-started)
 |
@@ -27,14 +27,15 @@ $ npm install eventrix --save
 |
 [**Demo**](https://eventrix.gitbook.io/eventrix/demo)
 
-### Home page
+# Home page
 
 We have website dedicated to eventrix. Go to [**eventrix.io**](https://eventrix.io) and see what eventrix has to offer.
 
-### Quickstart
+# Quickstart
 
-eventrixStore.js
 ```js
+// eventrixStore.js
+
 import { Eventrix } from 'eventrix';
 import receiversList from './receivers';
 
@@ -46,8 +47,9 @@ const eventrixStore = new Eventrix(initialState, receiversList);
 export default eventrixStore;
 ```
 
-App.jsx
 ```jsx harmony
+// App.tsx
+
 import { StrictMode } from "react";
 import ReactDOM from "react-dom";
 import { EventrixProvider } from 'eventrix';
@@ -64,8 +66,9 @@ ReactDOM.render(
 );
 ```
 
-UsersList.jsx
 ```jsx harmony
+// UsersList.jsx
+
 import React, { useCallback } from 'react';
 import { useEventrixState, useEmit } from 'eventrix';
 
@@ -88,8 +91,9 @@ const UsersList = () => {
 }
 ```
 
-receivers.js
 ```js
+// receivers.js
+
 import axios from 'axios';
 import { EventsReceiver } from 'eventrix';
 
@@ -105,7 +109,9 @@ const receiversList = [fetchUsersReceiver];
 export default receiversList;
 ```
 
-### About
+For more usage examples see the `examples` directory.
+
+# About
 
 [Eventrix](https://eventrix.io/) is a scaling and predictable JS library for state managing and centralizing application global state.
 
@@ -131,17 +137,32 @@ Greater control of data flow thanks to additional tools (devtools) and a small t
 [Eventrix DevTools](https://github.com/rstgroup/eventrix-devtools)
 
 
-### Contribute
+# Contribute
 
 - use eslint rules
 - write clean code
 - unit tests (min 85% of your code should be tested)
-- [code of conduct](https://github.com/rstgroup/eventrix/blob/master/docs/code_of_conduct.md)
 
-### License
+## Development
+
+To start development, clone the repository and install the dependencies. Then you can develop the library using the example application.
+
+```bash
+$ git clone https://github.com/rstgroup/eventrix.git
+$ npm install
+
+# Run the example application
+cd examples/todo-list
+npm install
+npm run dev
+```
+
+For more example applications see the `examples` directory.
+
+# License
 
 eventrix package are [MIT licensed](https://github.com/rstgroup/eventrix/blob/master/LICENSE)
 
-### Powered by
+# Powered by
 
-[RST Software Masters](https://rst.software) look on RST [Github](https://github.com/rstgroup)
+[RST Software](https://rst.software), see our [Github](https://github.com/rstgroup)

eslint.config.mjs

@@ -0,0 +1,48 @@
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import jsdoc from 'eslint-plugin-jsdoc';
+import reactPlugin from 'eslint-plugin-react';
+
+export default tseslint.config(eslint.configs.recommended, tseslint.configs.recommended, {
+    settings: {
+        react: {
+            version: 'detect',
+        },
+        'import/ignore': ['react-native'],
+        'import/resolver': {
+            node: {
+                extensions: ['.js', '.ts', '.tsx'],
+            },
+        },
+    },
+    files: ['src/**/*.{js,jsx,mjs,cjs,ts,tsx}'],
+    ignores: ['node_modules', 'dist', 'devtools'],
+    plugins: {
+        jsdoc: jsdoc,
+        react: reactPlugin,
+    },
+    languageOptions: {
+        parser: tseslint.parser,
+        parserOptions: {
+            ecmaVersion: 6,
+            sourceType: 'module',
+            ecmaFeatures: {
+                jsx: true,
+                experimentalObjectRestSpread: true,
+            },
+        },
+    },
+    rules: {
+        'linebreak-style': ['error', 'unix'],
+        'react/jsx-uses-react': 1,
+        'react/jsx-no-undef': 2,
+        'react/jsx-wrap-multilines': 2,
+        'react/no-string-refs': 0,
+        'jsdoc/no-unused-vars': 'off',
+        '@typescript-eslint/no-unused-vars': 'off',
+        'jsdoc/no-redeclare': 'off',
+        '@typescript-eslint/no-redeclare': ['error'],
+        '@typescript-eslint/no-explicit-any': 'warn',
+        '@typescript-eslint/ban-ts-comment': 'off',
+    },
+});

examples/README.md

@@ -0,0 +1,10 @@
+# Eventrix usage examples
+
+This directory contains examples of how to use Eventrix in different scenarios.
+
+To run the example simply run the following commands in each example directory:
+
+```bash
+npm install
+npm run dev
+```

examples/alert-manager/.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?

examples/alert-manager/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Eventrix - alert manager</title>
+</head>
+<body>
+<div id="root"></div>
+<script type="module" src="src/main.tsx"></script>
+</body>
+</html>

examples/alert-manager/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "eexample-alert-manager",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint --ext .ts,.tsx src --fix",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "11.10.5",
+    "@emotion/styled": "11.10.5",
+    "@mui/material": "5.10.16",
+    "@mui/types": "7.2.2",
+    "axios": "^1.7.7",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "globals": "^15.11.0",
+    "typescript": "~5.6.2",
+    "vite": "^6.0.1"
+  }
+}

examples/alert-manager/src/App.tsx

@@ -0,0 +1,16 @@
+import Alerts from './components/Alerts';
+import Logo from './components/Logo';
+import Buttons from './components/Buttons';
+import './index.css';
+import React from 'react';
+
+export default function App() {
+    return (
+        <div className="App">
+            <Logo />
+            <h1>Alerts manager</h1>
+            <Buttons />
+            <Alerts />
+        </div>
+    );
+}

examples/alert-manager/src/appEvents/alerts.ts

@@ -0,0 +1,5 @@
+export const ALERTS_SHOW_SUCCESS = 'Alerts:show.success';
+export const ALERTS_SHOW_ERROR = 'Alerts:show.error';
+export const ALERTS_SHOW_WARNING = 'Alerts:show.warning';
+export const ALERTS_SHOW_INFO = 'Alerts:show.info';
+export const ALERTS_REMOVE = 'Alerts:remove';

examples/alert-manager/src/components/Alerts/Alerts.tsx

@@ -0,0 +1,42 @@
+import { useEvent } from 'eventrix';
+import React, { useState } from 'react';
+import { Stack } from '@mui/material';
+import { ALERTS_REMOVE, ALERTS_SHOW_ERROR, ALERTS_SHOW_INFO, ALERTS_SHOW_SUCCESS, ALERTS_SHOW_WARNING } from '../../appEvents/alerts';
+import { Alert, AlertEventPayload, AlertTypes } from '../../types/alerts';
+import AlertMessage from './AlertsMessage';
+
+const createId = (): string => {
+    return String(new Date().getTime());
+};
+
+const Alerts = () => {
+    const [alerts, setAlerts] = useState<Alert[]>([]);
+    useEvent(ALERTS_SHOW_SUCCESS, (message: AlertEventPayload) => {
+        const id = createId();
+        setAlerts([{ message, type: AlertTypes.success, id }, ...alerts]);
+    });
+    useEvent(ALERTS_SHOW_WARNING, (message: AlertEventPayload) => {
+        const id = createId();
+        setAlerts([{ message, type: AlertTypes.warning, id }, ...alerts]);
+    });
+    useEvent(ALERTS_SHOW_ERROR, (message: AlertEventPayload) => {
+        const id = createId();
+        setAlerts([{ message, type: AlertTypes.error, id }, ...alerts]);
+    });
+    useEvent(ALERTS_SHOW_INFO, (message: AlertEventPayload) => {
+        const id = createId();
+        setAlerts([{ message, type: AlertTypes.info, id }, ...alerts]);
+    });
+    useEvent(ALERTS_REMOVE, (id: string) => {
+        setAlerts(alerts.filter((alert) => alert.id !== id));
+    });
+    return (
+        <Stack sx={{ width: '50%', marginTop: 2 }} spacing={2}>
+            {alerts.map(({ message, type, id }) => (
+                <AlertMessage key={id} message={message} type={type} id={id} />
+            ))}
+        </Stack>
+    );
+};
+
+export default Alerts;