chore: merge with clean-starter

Author: C5H8NNaO4

README.md

@@ -57,10 +57,55 @@ Empower Your Lists App with a Robust Backend 🚀
 
 The @state-less/clean-starter repository is designed to provide a starting point for developers exploring React Server. It includes essential backend components, utilities, and examples that illustrate the fundamental concepts and capabilities of React Server.
 
+# React Server
 React Server allows the creation of server-side React components using TSX, promoting a component-driven architecture for building robust and maintainable backend solutions. By using @state-less/clean-starter, developers can quickly get started with this innovative approach to full-stack development.
 
+```tsx
+import { Scopes, useState, clientKey } from '@state-less/react-server';
+import { ServerSideProps } from './ServerSideProps';
+
+export const HelloWorldExample2 = (props, { key, context })  => {
+  // The useState hook looks familiar?
+  const [count, setState] = useState(0, {
+    key: "count",
+    scope: Scopes.Global,
+  });
+
+  // A simple function that can be executed from the client side.
+  const increase = () => {
+    setState(count + 1);
+  };
+
+  return (
+    // Simply pass down props to the client side.
+    <ServerSideProps
+      key={clientKey(`${key}-props`, context)}
+      count={count}
+      increase={increase}
+    />
+  );
+};
+```
+
+Use the familiar approach of React to build serverside applications in a declarative way. React has proven to be a successful framework for building large scale applications while keeping a clean state-management solution to provide reactive realtime enabled modern UIs. React favors a clean codebase due to its inherently modular structure and component driven approach. React allows you to cleanly abstract the complexity of modern applications using *states*, *hooks* and *components*. 
+
+React Server brings the same flexibility to the server side by giving you a Framework that handles TSX compilation, a small React engine that powers *hooks*, *states* and the lifecycle of *components*. It also abstracts data storage and data transportation into a common concept of *states*. Data is stored in *Stores* which can be accessed by components using *hooks* (`useState`). The `useState` hook provides reactivity and automatically re-renders the component when its value is updated using the setter. Data is transported by consuming server-side states / components on the clientside using the `useComponent` hook. We are using *GraphQL* as transportation layer to provide a robust foundation. 
+
+Developers familiar with **React** and JSX components `<Component hello="world" />` are able to jump right into developing full-stack applications. It really works well and provides a seamless reactive experience on both the backend and the frontend. States are synchronized to all connected clients using PUB / SUB. 
+
 For detailed documentation and in-depth guides, please visit the official website at [state-less.cloud](https://state-less.cloud).
 
+## Explore Examples
+Dive into real-world examples, like the [Lists App](https://lists.state-less.cloud), showcasing the potential of React Server.
+
+## Key Features
+
+- **Server-Side React**: Create server-side React components using TSX for efficient, component-driven backend development.
+- **@state-less/clean-starter**: Jumpstart your project with essential backend components, utilities, and examples.
+- **Explore the Future**: Harness the power of server-side real-time TSX components.
+
+For comprehensive documentation and detailed guides, visit the official [state-less.cloud](https://state-less.cloud) website.
+
 ## Getting Started
 
 ### Backend
@@ -175,4 +220,6 @@ _Note: You can still override the provided client if you pass one in the options
 
 That's it, your App is now powered by the same backend as the documentation under [state-less.cloud](https://state-less.cloud).
 
-Happy Hacking!
+---------
+
+**License**: This project is under the **MIT License** - see the [LICENSE.md](/LICENSE.txt) file for details.

dist/components/Lists.js

@@ -81,6 +81,7 @@ var Todo = function Todo(_ref3, _ref4) {
     dueDate = _ref3$dueDate === void 0 ? null : _ref3$dueDate,
     _ref3$dueTime = _ref3.dueTime,
     dueTime = _ref3$dueTime === void 0 ? null : _ref3$dueTime,
+    note = _ref3.note,
     _changeType = _ref3.changeType,
     createdAt = _ref3.createdAt,
     color = _ref3.color;
@@ -108,6 +109,7 @@ var Todo = function Todo(_ref3, _ref4) {
       valuePoints: valuePoints,
       creditedValuePoints: creditedValuePoints,
       negativePoints: negativePoints,
+      note: note,
       dueDate: dueDate,
       dueTime: dueTime,
       type: 'Todo',
@@ -180,6 +182,14 @@ var Todo = function Todo(_ref3, _ref4) {
       reset: 1000 * 60 * 60 * reset
     }));
   };
+  var setNote = function setNote(note) {
+    if (typeof note !== 'string' || note.length > 32000) {
+      throw new Error('Invalid note');
+    }
+    setTodo(_objectSpread(_objectSpread({}, todo), {}, {
+      note: note
+    }));
+  };
   var setValuePoints = function setValuePoints(valuePoints) {
     if (typeof valuePoints !== 'number' && valuePoints < 0 || valuePoints > 100) {
       throw new Error('Invalid value points');
@@ -226,6 +236,7 @@ var Todo = function Todo(_ref3, _ref4) {
     setTitle: setTitle,
     setDueDate: setDueDate,
     setDueTime: setDueTime,
+    setNote: setNote,
     type: "Todo",
     createdAt: createdAt,
     lastModified: todo.lastModified,
@@ -549,7 +560,7 @@ var List = function List(_ref9, _ref10) {
     var _user16, _todo$value, _todo$value2;
     var store = _reactServer.Dispatcher.getCurrent().getStore();
     var todo = store.getState(null, {
-      key: "todo-".concat(todoId),
+      key: "todo",
       scope: "".concat(todoId, ".").concat(((_user16 = user) === null || _user16 === void 0 ? void 0 : _user16.id) || _reactServer.Scopes.Client)
     });
     setOrder(order.filter(function (id) {
@@ -559,6 +570,7 @@ var List = function List(_ref9, _ref10) {
       return todo.id !== todoId;
     }));
     points.value = points.value - 1 - (todo !== null && todo !== void 0 && (_todo$value = todo.value) !== null && _todo$value !== void 0 && _todo$value.archived ? 1 : 0) - ((todo === null || todo === void 0 ? void 0 : (_todo$value2 = todo.value) === null || _todo$value2 === void 0 ? void 0 : _todo$value2.valuePoints) || 0);
+    return todo.value;
   };
   var addLabel = function addLabel(label) {
     var labelId = (0, _uuid.v4)();
@@ -725,6 +737,10 @@ var exportData = function exportData(_ref11) {
       key: 'color',
       scope: "".concat("list-".concat(list.id), ".", (user === null || user === void 0 ? void 0 : user.id) || clientId)
     });
+    var title = store.getState(null, {
+      key: 'title',
+      scope: "".concat("list-".concat(list.id), ".", (user === null || user === void 0 ? void 0 : user.id) || clientId)
+    });
     var settings = store.getState(null, {
       key: 'settings',
       scope: "".concat("list-".concat(list.id), ".", (user === null || user === void 0 ? void 0 : user.id) || clientId)
@@ -737,6 +753,7 @@ var exportData = function exportData(_ref11) {
       Object.assign(todo, stored.value);
     });
     data[list.id] = _objectSpread(_objectSpread({}, list), {}, {
+      title: title.value,
       color: color.value,
       order: order.value,
       todos: todos.value,
@@ -786,9 +803,10 @@ var MyLists = function MyLists(_, _ref12) {
     order = state.order;
   var addEntry = function addEntry(list) {
     var id = (0, _uuid.v4)();
-    var newList = _objectSpread(_objectSpread({}, list), {}, {
+    var newList = _objectSpread(_objectSpread({
+      id: id
+    }, list), {}, {
       order: [],
-      id: id,
       settings: {
         defaultValuePoints: DEFAULT_VALUE_POINTS,
         defaultType: 'Todo',
@@ -798,11 +816,14 @@ var MyLists = function MyLists(_, _ref12) {
     });
     var newLists = [newList].concat((0, _toConsumableArray2["default"])(state.lists));
     setState({
-      order: [id].concat((0, _toConsumableArray2["default"])(state.order)),
+      order: [newList.id].concat((0, _toConsumableArray2["default"])(state.order)),
       lists: newLists
     });
   };
   var removeEntry = function removeEntry(id) {
+    var removed = state.lists.find(function (list) {
+      return list.id === id;
+    });
     setState({
       lists: state.lists.filter(function (list) {
         return list.id !== id;
@@ -811,6 +832,7 @@ var MyLists = function MyLists(_, _ref12) {
         return listId !== id;
       })
     });
+    return removed;
   };
   var exportUserData = function exportUserData() {
     return exportData({

src/components/Lists.tsx

@@ -24,6 +24,7 @@ type TodoObject = {
     key?: string;
     id: string | null;
     title: string;
+    note?: string;
     completed: boolean;
     archived: boolean;
     lastModified?: number;
@@ -124,6 +125,7 @@ export const Todo = (
         lastNotified,
         dueDate = null,
         dueTime = null,
+        note,
         changeType,
         createdAt,
         color,
@@ -156,6 +158,7 @@ export const Todo = (
             valuePoints,
             creditedValuePoints,
             negativePoints,
+            note,
             dueDate,
             dueTime,
             type: 'Todo',
@@ -258,7 +261,15 @@ export const Todo = (
             reset: 1000 * 60 * 60 * reset,
         });
     };
-
+    const setNote = (note) => {
+        if (typeof note !== 'string' || note.length > 32000) {
+            throw new Error('Invalid note');
+        }
+        setTodo({
+            ...todo,
+            note,
+        });
+    };
     const setValuePoints = (valuePoints) => {
         if (
             (typeof valuePoints !== 'number' && valuePoints < 0) ||
@@ -317,6 +328,7 @@ export const Todo = (
             setTitle={setTitle}
             setDueDate={setDueDate}
             setDueTime={setDueTime}
+            setNote={setNote}
             type="Todo"
             createdAt={createdAt}
             lastModified={todo.lastModified}
@@ -675,7 +687,7 @@ export const List = (
     const removeEntry = (todoId: string) => {
         const store = Dispatcher.getCurrent().getStore();
         const todo = store.getState<TodoObject>(null, {
-            key: `todo-${todoId}`,
+            key: `todo`,
             scope: `${todoId}.${user?.id || Scopes.Client}`,
         });
         setOrder(order.filter((id) => id !== todoId));
@@ -685,6 +697,7 @@ export const List = (
             1 -
             (todo?.value?.archived ? 1 : 0) -
             (todo?.value?.valuePoints || 0);
+        return todo.value;
     };
 
     const addLabel = (label: TodoObject) => {
@@ -876,6 +889,10 @@ const exportData = ({ key, user }) => {
             key: 'color',
             scope: `${`list-${list.id}`}.${user?.id || clientId}`,
         });
+        const title = store.getState(null, {
+            key: 'title',
+            scope: `${`list-${list.id}`}.${user?.id || clientId}`,
+        });
         const settings = store.getState(null, {
             key: 'settings',
             scope: `${`list-${list.id}`}.${user?.id || clientId}`,
@@ -890,6 +907,7 @@ const exportData = ({ key, user }) => {
 
         data[list.id] = {
             ...list,
+            title: title.value,
             color: color.value,
             order: order.value,
             todos: todos.value,
@@ -939,9 +957,9 @@ export const MyLists = (_: { key?: string }, { context, key }) => {
     const addEntry = (list: ListObject) => {
         const id = v4();
         const newList = {
+            id,
             ...list,
             order: [],
-            id,
             settings: {
                 defaultValuePoints: DEFAULT_VALUE_POINTS,
                 defaultType: 'Todo',
@@ -950,14 +968,16 @@ export const MyLists = (_: { key?: string }, { context, key }) => {
             createdAt: Date.now(),
         };
         const newLists = [newList, ...state.lists];
-        setState({ order: [id, ...state.order], lists: newLists });
+        setState({ order: [newList.id, ...state.order], lists: newLists });
     };
 
     const removeEntry = (id: string) => {
+        const removed = state.lists.find((list) => list.id === id);
         setState({
             lists: state.lists.filter((list) => list.id !== id),
             order: state.order.filter((listId) => listId !== id),
         });
+        return removed;
     };
 
     const exportUserData = () => {