docs: context and state (#303)

* docs: context and state * Handling uncaught runtime error in promise when executing code in output (#302) * Added notifyOnComplete paramater for code execution enabling to send model notifications only when all code execution completed * Fixed missing metadata parameter for OutputExecutor * Fixed JSONObject initialization * Fixed uncaught runtime exception in promise when code execution error occurs in Output --------- Co-authored-by: Sergey Kadnikov <skadnikov@seeneco.ru> * bump: version --------- Co-authored-by: Sok82 Developer <developer.d20@gmail.com> Co-authored-by: Sergey Kadnikov <skadnikov@seeneco.ru>
datalayer · Sep 9, 2024 · 64c873f · 64c873f
1 parent edb0265
commit 64c873f
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 15 deletions.
diff --git a/docs/docs/components/context/index.mdx b/docs/docs/components/context/index.mdx
@@ -2,9 +2,30 @@
 description: The Context component.
 ---
 
-# 🪐 Jupyter Context
+# 🪐 Context
 
-Every component must be wrapped inside a Jupyter Context.
+Every component should be wrapped inside a Context to get the needed CSS.
+
+```tsx
+root.render(
+  <JupyterLabTheme>
+    <Cell />
+  </Jupyter>
+);
+```
+
+If you prefer to not wrap in a Context, you can just use the JupyterLabCss component.
+
+```tsx
+root.render(
+  <>
+    <JupyterLabCss colorMode='dark' />
+    <Cell />
+  </>
+);
+```
+
+We also have a more evolved Context that allows you to specify behaviour for the kernels.
 
 ```tsx
 root.render(
@@ -30,10 +51,11 @@ The Jupyter Context has the following properties.
 
 - `collaborative`
 - `defaultKernelName`
-- `injectableStore`: Read more about the [State](/docs/state)
+- `injectableStore` - Read more about the [State](/docs/state)
 - `jupyterServerUrl` - Read also [Deployment](/docs/deployments/jupyter-server)
 - `jupyterServerToken` - Read also [Deployment](/docs/deployments/jupyter-server)
-- `lite`
+- `initCode` - The code to run on the Kernel when it is ready.
+- `lite` - Use a pyodide (in browser) Kernel.
 - `loadJupyterCss`
 - `startDefaultKernel`
 - `terminals`

diff --git a/docs/docs/state/index.mdx b/docs/docs/state/index.mdx
@@ -7,6 +7,10 @@ sidebar_position: 1
 
 As an application developer, you may already have a Redux store. You can simply inject the Jupyter UI store in your own store.
 
-For now, we support [Redux](/docs/state/redux) to manage the application state.
+For now, we support [Zustand](/docs/state/zustand) to manage the application state.
 
-We are considering other stores like `Mobx` or `Zustand`, please share thoughts and requirements on [this issue](https://github.com/datalayer/jupyter-ui/issues/50).
+## Deprecated Redux
+
+We have been considering other stores like `Mobx`, please share thoughts and requirements on [this issue](https://github.com/datalayer/jupyter-ui/issues/50).
+
+Redux was harder to play with, see e.g. the [Notebook Injectable Redux Store example](https://github.com/datalayer/jupyter-ui/tree/14e45c0928f724d2899d0f031e1d9451886df624/packages/react/src/examples/NotebookInjectableReduxStore.tsx) to inject your own Redux state, reducers and epics in the Jupyter React Redux store.
diff --git a/docs/docs/state/redux.mdx b/docs/docs/state/redux.mdx
diff --git a/docs/docs/state/zustand.mdx b/docs/docs/state/zustand.mdx
@@ -0,0 +1,8 @@
+---
+title: Zustand State
+sidebar_position: 1
+---
+
+## Zustand State
+
+Zustand State.
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/jupyter-react",
-  "version": "0.18.4",
+  "version": "0.18.5",
   "description": "Jupyter React - React.js components 100% compatible with Jupyter.",
   "license": "MIT",
   "main": "lib/index.js",