11 | {children}
12 |
13 | );
14 | };
15 |
--------------------------------------------------------------------------------
/examples/authentication/src/components/counter.tsx:
--------------------------------------------------------------------------------
1 | import { FC, PropsWithChildren } from 'react';
2 |
3 | export const Counter: FC<
4 | PropsWithChildren
11 |
13 | );
14 | };
15 |
--------------------------------------------------------------------------------
/examples/authentication/src/cortex/_core.ts:
--------------------------------------------------------------------------------
1 | import { createCortexFactory } from "@azot-dev/cortex";
2 | import { services } from "./services/_services";
3 | import { Dependencies } from "./dependencies/_dependencies";
4 |
5 | export const Core = createCortexFactory{children}
12 |
11 | {children}
12 |
13 | );
14 | };
15 |
--------------------------------------------------------------------------------
/examples/counter/src/components/counter.tsx:
--------------------------------------------------------------------------------
1 | import { FC, PropsWithChildren } from 'react';
2 |
3 | export const Counter: FC<
4 | PropsWithChildren
11 |
13 | );
14 | };
15 |
--------------------------------------------------------------------------------
/examples/counter/src/cortex/_core.ts:
--------------------------------------------------------------------------------
1 | import { createCortexFactory } from "@azot-dev/cortex";
2 | import { services } from "./services/_services";
3 | import { Dependencies } from "./dependencies/_dependencies";
4 |
5 | export const Core = createCortexFactory{children}
12 |
19 |
26 |
27 |
28 | 
29 |
30 |
31 |
32 | );
33 | }
34 |
35 | export default App;
36 |
--------------------------------------------------------------------------------
/examples/dog-api/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/dog-api/src/cortex/_core.ts:
--------------------------------------------------------------------------------
1 | import { createCortexFactory } from "@azot-dev/cortex";
2 | import { services } from "./services/_services";
3 | import { Dependencies } from "./dependencies/_dependencies";
4 |
5 | export const Core = createCortexFactory
7 |
9 | );
10 | }
11 |
12 | export default App;
13 |
--------------------------------------------------------------------------------
/examples/todo/src/Components/EditTodoForm.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, useState } from 'react';
2 | import { Todo } from '../cortex/services/todo/todo.service';
3 | import { useService } from '../cortex/utils/hooks';
4 |
5 | export const EditTodoForm: FC<{ todo: Todo }> = ({ todo }) => {
6 | const [value, setValue] = useState(todo.title);
7 | const { modify } = useService('todo');
8 |
9 | const handleSubmit = (e) => {
10 | e.preventDefault();
11 | modify(todo.id, value);
12 | };
13 | return (
14 |
20 | );
21 | };
22 |
--------------------------------------------------------------------------------
/examples/todo/src/Components/Todo.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from 'react';
2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3 | import { faPenToSquare } from '@fortawesome/free-solid-svg-icons';
4 | import { faTrash } from '@fortawesome/free-solid-svg-icons';
5 | import type { Todo as TodoType } from '../cortex/services/todo/todo.service';
6 | import { useService } from '../cortex/utils/hooks';
7 |
8 | export const Todo: FC<{ todo: TodoType }> = ({ todo }) => {
9 | const { remove, toggleDone, edit } = useService('todo');
10 |
11 | return (
12 |
13 |
21 | );
22 | };
23 |
--------------------------------------------------------------------------------
/examples/todo/src/Components/TodoForm.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import { useService } from '../cortex/utils/hooks';
3 |
4 | export const TodoForm = () => {
5 | const [value, setValue] = useState('');
6 | const { add } = useService('todo');
7 |
8 | const handleSubmit = (e) => {
9 | e.preventDefault();
10 | if (value) {
11 | add(value);
12 | setValue('');
13 | }
14 | };
15 | return (
16 |
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/examples/todo/src/Components/TodoWrapper.tsx:
--------------------------------------------------------------------------------
1 | import { Todo } from './Todo';
2 | import { TodoForm } from './TodoForm';
3 | import { EditTodoForm } from './EditTodoForm';
4 | import { useAppSelector, useService } from '../cortex/utils/hooks';
5 |
6 | export const TodoWrapper = () => {
7 | const { get } = useService('todo');
8 | const todos = useAppSelector(get);
9 |
10 | return (
11 | toggleDone(todo.id)}> 14 | {todo.title} 15 |
16 |
17 | edit(todo.id)} />
18 | remove(todo.id)} />
19 |
20 |
12 |
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/examples/todo/src/cortex/_core.ts:
--------------------------------------------------------------------------------
1 | import { createCortexFactory } from "@azot-dev/cortex";
2 | import { services } from "./services/_services";
3 | import { Dependencies } from "./dependencies/_dependencies";
4 |
5 | export const Core = createCortexFactoryGet Things Done !
13 |
111 | {/* highlight-next-line */}
112 |
113 |
114 | );
115 | };
116 | ```
117 |
118 | ### Access the state in the app
119 |
120 | You can access to any value thanks to the useAppSelector, anytime the value `store.counter.count` changes, the value will be re-rendered in the JSX
121 |
122 | ```tsx
123 | const InnerApp: FC = () => {
124 | const { increment } = useService('counter');
125 | {/* highlight-next-line */}
126 | const count = useAppSelector((store) => store.counter.count.get());
127 |
128 | return (
129 |
130 |
131 | {/* highlight-next-line */}
132 | {count}
133 |
134 | );
135 | };
136 | ```
137 |
138 | ### Test the behavior
139 |
140 | Since all the logic is completely decoupled from React, we can test the behavior of our app with Jest
141 |
142 | ```typescript
143 | describe('counter', () => {
144 | it('should be incremented', () => {
145 | const core = new Core()
146 |
147 | expect(core.store.counter.get()).toBe(0)
148 |
149 | core.getService("counter").increment()
150 | expect(core.store.counter.get()).toBe(1)
151 | })
152 | })
153 | ```
154 |
--------------------------------------------------------------------------------
/packages/doc/docs/debugger.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 7
3 | ---
4 |
5 | # Cortex devtools
6 |
7 | Cortex is compatible with [Redux Devtools](https://chromewebstore.google.com/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=fr,)
8 |
9 | To activate it:
10 |
11 | ```ts
12 | export const Core = createCortexFactory()(services, { debugger: createDebuggerService() });
13 | ```
14 |
15 | To use remotely, so it can be used with React Native Debugger:
16 |
17 | ```ts
18 | export const Core = createCortexFactory()(services, { debugger: createDebuggerService({ host: "192.168.1.1", port: 8081 }) });
19 | ```
20 |
--------------------------------------------------------------------------------
/packages/doc/docs/intro.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 1
3 | ---
4 |
5 | # Overview
6 |
7 |
8 | .default})
9 |
10 |
11 | React is a library not a framework, it has been created to reflect the changes of some variables (the states) to the UI, nothing else.
12 | Cortex comes as the missing brick of React, and will give all the keys to create the perfect architecture of your app, keeping your code readable and your app scalable.
13 |
14 | With this you could:
15 |
16 | - share your code between React and React Native (and any other JS framework)
17 | - test your logic directly with Jest (no more react-testing-library to test your data over the UI)
18 | - code in test driven development (TDD)
19 | - create a clean architecture with the port/adapter pattern
20 | - keep each part of your logic well separated thanks to services
21 |
22 | All of that using oriented object programming!
23 |
24 | ## Technical choices
25 |
26 | It is built over [the legend app state lib](https://legendapp.com/open-source/state/), and add a strongly typed system of services and dependency injections
27 |
28 |
29 |
--------------------------------------------------------------------------------
/packages/doc/docs/next.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 10
3 | ---
4 |
5 | # Usage with NextJS
6 |
7 | Next is a server side rendering framework.
8 | It means that the same instance of the core must be used over the different client pages. Each client page makes loose the context of the app when it is reloaded or changed.
9 |
10 | You must create another provider:
11 |
12 | ```tsx
13 | "use client";
14 | import { useRef, FC, PropsWithChildren } from "react";
15 | import { CortexProvider } from "@azot-dev/react-cortex";
16 | import { Core } from "../_core";
17 |
18 | const core = new Core();
19 |
20 | export const SSRCortexProvider: FC
9 |
49 |
57 | );
58 | }
59 |
60 | export default function HomepageFeatures(): JSX.Element {
61 | return (
62 |
50 |
51 |
52 |
53 |
56 | {title}
54 |{description}
55 |
64 |
70 |
65 | {FeatureList.map((props, idx) => (
66 |
69 |
15 | ![logo]({require("@site/static/img/logo_512.png").default})
16 |
24 |
16 | {siteConfig.title}
17 |{siteConfig.tagline}
18 |
19 |
20 | Get Started
21 |
22 |
23 |
12 |
13 | 
14 |
15 |
16 |
23 |
24 | );
25 | }
26 |
27 | const AppWrapper = () => {
28 | return (
29 |
17 | Edit src/App.tsx and save to reload.
18 |