From dc2729554c57be3843ab69f1c0616d2525456fc3 Mon Sep 17 00:00:00 2001 From: Eric Charles Date: Thu, 5 Dec 2024 10:05:58 +0100 Subject: [PATCH] Update Documentation (#333) * fix: storybook * storybook: favot micropip * storybook: lexical * Automatic application of license header * chore: kernel indicator * example: add indicator to notebook lite * docs: fix * chore: make @jupyterlite/pyodide-kernel-extension a dependency * chore: make @jupyterlite/pyodide-kernel-extension a dependency * examples: config * docs: review * toc: docs * docs: lint * Automatic application of license header --------- Co-authored-by: github-actions[bot] --- docs/docs/about/index.mdx | 70 +++------ docs/docs/components/_category_.yaml | 2 + docs/docs/components/button/_category_.yml | 2 +- docs/docs/components/cell/_category_.yml | 2 +- docs/docs/components/cell/index.mdx | 13 +- docs/docs/components/console/_category_.yml | 2 +- docs/docs/components/context/_category_.yml | 2 +- docs/docs/components/context/index.mdx | 2 +- .../components/file-manager/_category_.yml | 2 +- docs/docs/components/index.mdx | 39 +++++ .../components/jupyterlab-app/_category_.yml | 2 + .../index.mdx | 0 .../components/jupyterlabapp/_category_.yml | 2 - docs/docs/components/kernel/_category_.yml | 2 +- docs/docs/components/lumino/_category_.yml | 2 +- docs/docs/components/native/_category_.yml | 2 +- docs/docs/components/notebook/index.mdx | 18 +-- docs/docs/components/terminal/_category_.yml | 2 +- docs/docs/components/viewer/_category_.yml | 2 +- docs/docs/demos/_category_.yaml | 2 + docs/docs/demos/cell/index.mdx | 10 +- docs/docs/demos/index.mdx | 5 + docs/docs/deployments/_category_.yaml | 2 + docs/docs/deployments/index.mdx | 5 + .../docs/deployments/jupyter-server/index.mdx | 84 +++++++++-- docs/docs/deployments/jupyterhub/index.mdx | 2 +- .../_category_.yml => _category_.yaml} | 0 .../develop/dev-environment/_category_.yml | 2 + .../dev-environment/conda/_category_.yml | 2 + .../conda/index.mdx} | 12 +- .../devcontainers/_category_.yml | 2 + .../devcontainers/index.mdx} | 9 +- docs/docs/develop/dev-environment/index.mdx | 31 ++++ docs/docs/develop/develop/index.mdx | 129 ---------------- docs/docs/develop/index.mdx | 28 ++++ docs/docs/develop/setup/_category_.yml | 2 - docs/docs/develop/setup/index.mdx | 57 ------- docs/docs/develop/usage/_category_.yml | 2 - docs/docs/develop/usage/index.mdx | 19 --- docs/docs/develop/webapp/_category_.yml | 2 + docs/docs/develop/webapp/index.mdx | 61 ++++++++ docs/docs/examples/docusaurus/_category_.yml | 2 - docs/docs/examples/docusaurus/index.mdx | 15 -- docs/docs/integrations/_category_.yaml | 2 + .../cra/_category_.yml | 0 .../{examples => integrations}/cra/index.mdx | 18 +-- .../integrations/docusaurus/_category_.yml | 2 +- docs/docs/integrations/docusaurus/index.mdx | 10 +- docs/docs/integrations/index.mdx | 5 + .../next-js/_category_.yml | 2 +- .../next-js/index.mdx | 18 +-- docs/docs/integrations/pyodide/_category_.yml | 2 + docs/docs/integrations/pyodide/index.mdx | 42 ++++++ docs/docs/integrations/ssr/_category_.yml | 2 + docs/docs/integrations/ssr/index.mdx | 3 + .../webpack/_category_.yml | 0 .../webpack/index.mdx | 2 +- docs/docs/license/_category_.yml | 2 +- docs/docs/resources/_category_.yml | 2 - docs/docs/resources/index.mdx | 13 -- docs/docs/state/_category_.yml | 2 +- docs/docs/state/index.mdx | 10 +- docs/docs/state/zustand.mdx | 8 - docs/docs/state/zustand/_category_.yml | 2 + docs/docs/state/zustand/index.mdx | 3 + docs/docs/support/_category_.yml | 2 +- docs/docs/support/index.mdx | 16 +- docs/docs/themes/_category_.yaml | 2 + docs/docs/themes/index.mdx | 5 + docs/docusaurus.config.js | 26 +--- docs/package.json | 14 +- docs/sidebars.js | 141 +----------------- docs/src/theme/ReactLiveScope/index.tsx | 19 +-- packages/docusaurus-plugin/package.json | 2 +- .../src/theme/JupyterCell.tsx | 25 +++- .../src/theme/ReactLiveScope/index.tsx | 24 +-- packages/lexical/jupyter_lexical/_version.py | 2 +- .../src/components/JupyterCellComponent.tsx | 5 +- packages/lexical/src/examples/App1.tsx | 5 +- packages/lexical/src/examples/App2.tsx | 4 +- .../lexical/src/nodes/JupyterCellNode.tsx | 4 +- ...onent.tsx => JupyterCellNodeComponent.tsx} | 4 +- packages/react/Makefile | 6 +- packages/react/README.md | 2 +- packages/react/package.json | 5 +- packages/react/public/index-noconfig.html | 29 ++++ .../src/components/kernel/Kernelndicator.tsx | 4 +- .../components/notebook/NotebookAdapter.ts | 2 +- packages/react/src/examples/ConsoleLite.tsx | 4 +- packages/react/src/examples/Localhost.tsx | 33 ++++ packages/react/src/examples/NotebookLite.tsx | 50 +++++-- .../src/examples/NotebookMutationsKernel.tsx | 2 +- .../NotebookMutationsServiceManager.tsx | 2 +- .../examples/NotebookOnSessionConnection.tsx | 2 +- .../notebooks/NotebookExample1.ipynb.json | 30 ++-- packages/react/src/state/JupyterReactState.ts | 2 +- packages/react/stories/Cell.stories.tsx | 2 +- packages/react/stories/Notebook.stories.tsx | 89 +++++++++-- packages/react/stories/Notebook.test.ts | 2 +- packages/react/stories/Terminal.stories.tsx | 8 +- packages/react/webpack.config.js | 11 +- storybook/package.json | 1 + storybook/src/stories/Cell.stories.tsx | 7 +- storybook/src/stories/Console.mdx | 3 + storybook/src/stories/Console.stories.tsx | 8 +- storybook/src/stories/FileManager.stories.tsx | 2 +- storybook/src/stories/Heading.stories.tsx | 4 +- storybook/src/stories/Icon.stories.tsx | 8 +- storybook/src/stories/Notebook.stories.tsx | 96 +++++++++--- storybook/src/stories/RichEditor.stories.tsx | 2 +- storybook/src/stories/Terminal.stories.tsx | 14 +- storybook/src/stories/Text.stories.tsx | 4 +- storybook/src/stories/TextInput.stories.tsx | 2 +- storybook/src/stories/Viewer.stories.tsx | 8 +- storybook/src/stories/Welcome.mdx | 5 - .../src/stories/_utils/story-helpers.tsx | 4 +- 116 files changed, 817 insertions(+), 739 deletions(-) create mode 100644 docs/docs/components/_category_.yaml create mode 100644 docs/docs/components/index.mdx create mode 100644 docs/docs/components/jupyterlab-app/_category_.yml rename docs/docs/components/{jupyterlabapp => jupyterlab-app}/index.mdx (100%) delete mode 100644 docs/docs/components/jupyterlabapp/_category_.yml create mode 100644 docs/docs/demos/_category_.yaml create mode 100644 docs/docs/demos/index.mdx create mode 100644 docs/docs/deployments/_category_.yaml create mode 100644 docs/docs/deployments/index.mdx rename docs/docs/develop/{develop/_category_.yml => _category_.yaml} (100%) create mode 100644 docs/docs/develop/dev-environment/_category_.yml create mode 100644 docs/docs/develop/dev-environment/conda/_category_.yml rename docs/docs/develop/{setup/conda.mdx => dev-environment/conda/index.mdx} (68%) create mode 100644 docs/docs/develop/dev-environment/devcontainers/_category_.yml rename docs/docs/develop/{setup/devcontainers.mdx => dev-environment/devcontainers/index.mdx} (86%) create mode 100644 docs/docs/develop/dev-environment/index.mdx delete mode 100644 docs/docs/develop/develop/index.mdx create mode 100644 docs/docs/develop/index.mdx delete mode 100644 docs/docs/develop/setup/_category_.yml delete mode 100644 docs/docs/develop/setup/index.mdx delete mode 100644 docs/docs/develop/usage/_category_.yml delete mode 100644 docs/docs/develop/usage/index.mdx create mode 100644 docs/docs/develop/webapp/_category_.yml create mode 100644 docs/docs/develop/webapp/index.mdx delete mode 100644 docs/docs/examples/docusaurus/_category_.yml delete mode 100644 docs/docs/examples/docusaurus/index.mdx create mode 100644 docs/docs/integrations/_category_.yaml rename docs/docs/{examples => integrations}/cra/_category_.yml (100%) rename docs/docs/{examples => integrations}/cra/index.mdx (83%) create mode 100644 docs/docs/integrations/index.mdx rename docs/docs/{examples => integrations}/next-js/_category_.yml (58%) rename docs/docs/{examples => integrations}/next-js/index.mdx (87%) create mode 100644 docs/docs/integrations/pyodide/_category_.yml create mode 100644 docs/docs/integrations/pyodide/index.mdx create mode 100644 docs/docs/integrations/ssr/_category_.yml create mode 100644 docs/docs/integrations/ssr/index.mdx rename docs/docs/{examples => integrations}/webpack/_category_.yml (100%) rename docs/docs/{examples => integrations}/webpack/index.mdx (91%) delete mode 100644 docs/docs/resources/_category_.yml delete mode 100644 docs/docs/resources/index.mdx delete mode 100644 docs/docs/state/zustand.mdx create mode 100644 docs/docs/state/zustand/_category_.yml create mode 100644 docs/docs/state/zustand/index.mdx create mode 100644 docs/docs/themes/_category_.yaml create mode 100644 docs/docs/themes/index.mdx rename packages/lexical/src/nodes/{CustomComponent.tsx => JupyterCellNodeComponent.tsx} (72%) create mode 100755 packages/react/public/index-noconfig.html create mode 100644 packages/react/src/examples/Localhost.tsx diff --git a/docs/docs/about/index.mdx b/docs/docs/about/index.mdx index 749ed3f6..cc286e93 100644 --- a/docs/docs/about/index.mdx +++ b/docs/docs/about/index.mdx @@ -1,56 +1,48 @@ ---- -description: About Jupyter UI. ---- - import ModalImage from "react-modal-image"; # 🪐 ⚛️ About Jupyter UI -Jupyter UI is a set of [React.js](https://reactjs.org) components that allow a frontend developer to build data products compatible with the [Jupyter](https://jupyter.org) ecosystem. The user interface delivers executable notebooks, cells, terminals, file browsers and allows the developer to manage a full integrated React tree instead of relying on iframes to display the Jupyter noteboks. +Jupyter UI is a set of [React.js](https://reactjs.org) components that allow a Web application developer to build [Data Products and Data Platforms](https://datalayer.tech/docs/glossary) compatible with the [Jupyter](https://jupyter.org) ecosystem. The user interface delivers executable notebooks, cells, terminals, file browsers and allows the developer to manage a full integrated React tree instead of relying on iframes to display the Jupyter Notebooks. -The Jupyter(Lab) Notebook is a tool that allows data scientist to analyse dataset. However, it is not easy to create a custom user interface integrated in an existing application. Jupyter UI, [an open-source library](https://github.com/datalayer/jupyter-ui), fills that gap and provides components that a developer can easily integrate in any React.js application. +Jupyter(Lab) Notebook is a tool that allows Data Scientists to analyse datasets. However, it is not easy to create a custom user interface integrated in an existing application. Jupyter UI, [an open-source library](https://github.com/datalayer/jupyter-ui), fills that gap and provides components that a developer can easily integrate in any React.js application. We ensure React.js as a first-class citizen in the Jupyter: -- [Components](/docs/category/components): JupyterLab visual as React.js components -- [Integrations](/docs/category/integrations): Embed Jupyter in Docusaurus. -- [Themes](/docs/category/themes): Themes for your data analysis. - -You can get kick-started with simple [examples](/docs/category/examples) - -## Problems with JupyterLab for Web developers - -In terms of technical stack, the Jupyter(Lab) user interface is built on top of Lumino, which is an imperative way to build user interface and **can not** be consumed by industry standard declarative frameworks like React.js. As a user interface developer, if you want to create a custom data product on top of Jupyter, you have to stick to Lumino and carry-on the full notebook interface not tailored to your specific needs. This is not what you want. You just want to expose what you need, you want to develop with your favorite toolkit (like React.js) and you also want to integrate on a per-component basis the Jupyter functionality in your application. +- [Components](/docs/components): JupyterLab visual as React.js components +- [Integrations](/docs/integrations): Integrate Jupyter in Docusaurus, Next.js... +- [Themes](/docs/themes): Themes for your data analysis. -[JupyterLab](https://github.com/jupyterlab/jupyterlab) is built on the [Lumino](https://github.com/jupyterlab/lumino) widget toolkit. - -1. Lumino allows to wrap React components and expose them as Lumino Widgets. -2. React.js **can not** use Lumino Widgets. +## Why? -:::caution +:::info Although a developer can embed a React.js component into JupyterLab, the reverse is not possible. -**You can NOT embed JupyterLab into a React.js application**. +**You can NOT embed JupyterLab into a React.js application - This is that issue that Jupyter UI solves.**. ::: -## Jupyter UI at the rescue +JupyterLab is not usagble by Web Developers. Jupyter(Lab) user interfaces are built on top of [Lumino](https://github.com/jupyterlab/lumino) widget toolkit, which is an [imperative way](https://en.wikipedia.org/wiki/Imperative_programming) to build user interface and **can not** be consumed by industry standard declarative frameworks like React.js. As a user interface developer, if you want to create a custom [Data Products and Data Platforms](https://datalayer.tech/docs/glossary) on top of Jupyter, you have to stick to Lumino and carry-on the full notebook interface not tailored to your specific needs. This is not what you want. You just want to expose what you need, you want to develop with your favorite [declarative](https://en.wikipedia.org/wiki/Declarative_programming) toolkit (like React.js) and you also want to integrate on a per-component basis the Jupyter functionality in your application. -Jupyter UI provides the foundations to build a modern and flexible data prodcut user interface. Underneath, it gathers the minimum set of [Lumino](https://github.com/jupyterlab/lumino) and [JupyterLab](https://github.com/jupyterlab/jupyterlab) technologies. We wrap Lumino Widget in a React.js component and expose Redux Observables actions that proxy Lumino Commands. We bind Redux Observables Epics to Lumino Signals. Those bindings convert Lumino Signals to Observable to run the needed actions in the [Observable Epics](https://redux-observable.js.org/docs/basics/Epics.html). +1. Lumino allows to wrap React components and expose them as Lumino Widgets. +2. React.js **can not** use Lumino Widgets. + +## Jupyter UI at the Rescue + +Jupyter UI provides the foundations to build a modern and flexible [Data Products and Data Platforms](https://datalayer.tech/docs/glossary) user interface. Underneath, it gathers the minimum set of [Lumino](https://github.com/jupyterlab/lumino) and [JupyterLab](https://github.com/jupyterlab/jupyterlab) technologies. We wrap Lumino Widget in a React.js component and expose Zustands actions that proxy Lumino Commands. We bind Zustands Epics to Lumino Signals. Those bindings convert Lumino Signals to Observable to run the needed actions in the [Observable Epics](https://redux-observable.js.org/docs/basics/Epics.html). - Services to connect to kernels. - Extension injection system. -- Lumino signals and messages integrated with Redux. +- Lumino signals and messages integrated with Zustand. - Lumino commands. -To solve the above issues, Jupyter UI ships components to easily create a React.js data product compatible with the Jupyter ecosystem. Those components can be used in any React.js application, and also in static websites like Docusaurus, Next.js or Remix. They wrap underneath the JupyterLab code and allow developing React.js applications with code execution capability. State management is based on Redux, and Mobx is to be added. +To solve the above issues, Jupyter UI ships components to easily create a React.js [Data Products and Data Platforms](https://datalayer.tech/docs/glossary) compatible with the Jupyter ecosystem. Those components can be used in any React.js application, and also in static websites like Docusaurus, Next.js or Remix. They wrap underneath the JupyterLab code and allow developing React.js applications with code execution capability. State management is based on Zustand, and Mobx is to be added. -The Jupyter UI components expose JupyterLab visuals as React.js components and offers a bi-directional communication between React.js/Redux and JupyterLab/Lumino. +The Jupyter UI components expose JupyterLab visuals as React.js components and offers a bi-directional communication between React.js/Zustand and JupyterLab/Lumino. ``` -Host application -> Redux Observable Actions -> Jupyter UI -> JupyterLab Commands -Host application <- Redux State <- Redux Observable Epics <- Jupyter UI <- JupyterLab Signals +Host application -> Zustand Actions -> Jupyter UI -> JupyterLab Commands +Host application <- Redux State <- Jupyter UI <- JupyterLab Signals ``` -## Open Source - -The open source components removes the above limitations and supports: - -- Predefined Redux actions, epics and reducers with [Observable Epics](https://redux-observable.js.org/docs/basics/Epics.html) -- Everything is created in a single React tree to ensure Jupyter UI components can use any context created by the host application. -- IPyWidgets and Panel interactive widgets are supported. -- Collaborative RTC is also supported. -- Plays nice with Jupyter Auth, Jupyterpool, Primer React, Material-UI , Storybook, Docusaurus, Emotion.js... and many other standard libraries. -- A React.js context for Authentication, Authorization, Theming and Redux injectable store. -- Benefits from current and new JupyterLab development, eg edit mode navigation, colored-collapser, collaborative cursor. -- Authentication via Jupyter tokens. -- Theming. -- Terminals. - ## Listed -Listed on: +We love when people talk about us. -- [reactjs-example](https://reactjsexample.com/react-components-compatible-with-the-jupyter-ecosystem-to-create-your-own-custom-data-product) +- [Reactjs Example.com](https://reactjsexample.com/react-components-compatible-with-the-jupyter-ecosystem-to-create-your-own-custom-data-product). +- [How We Made Jupyter Notebooks Load 10 Times Faster](https://www.singlestore.com/blog/how-we-made-notebooks-load-10-times-faster). diff --git a/docs/docs/components/_category_.yaml b/docs/docs/components/_category_.yaml new file mode 100644 index 00000000..4b1f5056 --- /dev/null +++ b/docs/docs/components/_category_.yaml @@ -0,0 +1,2 @@ +label: "Components" +position: 3 diff --git a/docs/docs/components/button/_category_.yml b/docs/docs/components/button/_category_.yml index 73011368..e3b0cf73 100644 --- a/docs/docs/components/button/_category_.yml +++ b/docs/docs/components/button/_category_.yml @@ -1,2 +1,2 @@ label: "Button" -position: 3 +position: 5 diff --git a/docs/docs/components/cell/_category_.yml b/docs/docs/components/cell/_category_.yml index ffa639e1..7f536271 100644 --- a/docs/docs/components/cell/_category_.yml +++ b/docs/docs/components/cell/_category_.yml @@ -1,2 +1,2 @@ label: "Cell" -position: 4 +position: 3 diff --git a/docs/docs/components/cell/index.mdx b/docs/docs/components/cell/index.mdx index ae029d6d..66781855 100644 --- a/docs/docs/components/cell/index.mdx +++ b/docs/docs/components/cell/index.mdx @@ -10,9 +10,7 @@ This component displays a Jupyter Cell. ## With a Jupyter server - + ```jsx ``` -## With in-browser kernel +## With in-browser Kernel -You can use an in-browser kernel by setting the `lite` property -of `Jupyter` component: +You can use an in-browser kernel by setting the `lite` property of `Jupyter` component: ```jsx - + + +Jupyter UI can be used in any React.js application with the `@datalayer/jupyter-react` npm package. + + + +:::note + +The Jupyter UI components support: + +- Predefined Zustand actions. +- Everything is created in a single React tree to ensure Jupyter UI components can use any context created by the host application. +- IPyWidgets and Panel interactive widgets are supported. +- Collaborative RTC is also supported. +- Plays nice with Primer React, Material-UI, Storybook, Docusaurus, Styled Components, Emotion.js... and many other standard libraries. +- A React.js context for Authentication, Authorization and Theming. +- Benefits from current and new JupyterLab development, eg edit mode navigation, colored-collapser, collaborative cursor. +- Authentication via Jupyter tokens. +- Theming. +- Terminals. + +::: + + diff --git a/docs/docs/components/jupyterlab-app/_category_.yml b/docs/docs/components/jupyterlab-app/_category_.yml new file mode 100644 index 00000000..3dabe0f6 --- /dev/null +++ b/docs/docs/components/jupyterlab-app/_category_.yml @@ -0,0 +1,2 @@ +label: "JupyterLab App" +position: 13 diff --git a/docs/docs/components/jupyterlabapp/index.mdx b/docs/docs/components/jupyterlab-app/index.mdx similarity index 100% rename from docs/docs/components/jupyterlabapp/index.mdx rename to docs/docs/components/jupyterlab-app/index.mdx diff --git a/docs/docs/components/jupyterlabapp/_category_.yml b/docs/docs/components/jupyterlabapp/_category_.yml deleted file mode 100644 index 8d661bab..00000000 --- a/docs/docs/components/jupyterlabapp/_category_.yml +++ /dev/null @@ -1,2 +0,0 @@ -label: "App" -position: 2 diff --git a/docs/docs/components/kernel/_category_.yml b/docs/docs/components/kernel/_category_.yml index 21957805..a0c39416 100644 --- a/docs/docs/components/kernel/_category_.yml +++ b/docs/docs/components/kernel/_category_.yml @@ -1,2 +1,2 @@ label: "Kernels" -position: 4 +position: 7 diff --git a/docs/docs/components/lumino/_category_.yml b/docs/docs/components/lumino/_category_.yml index 9b36864c..ea2a6dbf 100644 --- a/docs/docs/components/lumino/_category_.yml +++ b/docs/docs/components/lumino/_category_.yml @@ -1,2 +1,2 @@ label: "Lumino" -position: 2 +position: 14 diff --git a/docs/docs/components/native/_category_.yml b/docs/docs/components/native/_category_.yml index 88ade01b..8950a6c8 100644 --- a/docs/docs/components/native/_category_.yml +++ b/docs/docs/components/native/_category_.yml @@ -1,2 +1,2 @@ label: "Native" -position: 8 +position: 9 diff --git a/docs/docs/components/notebook/index.mdx b/docs/docs/components/notebook/index.mdx index 3c1155a2..e5131cf7 100644 --- a/docs/docs/components/notebook/index.mdx +++ b/docs/docs/components/notebook/index.mdx @@ -16,7 +16,7 @@ The below picture is an example of Notebook into a React.js component. alt="Jupyter UI Notebook" /> -This is what it takes to create a Notebook. In this first example, the Jupyter Server will be fetched for the `test.ipynb` notebook "ipynb" file content. +In this first example, the Jupyter Server will be fetched for the `test.ipynb` notebook `ipynb` file content. ```jsx @@ -35,13 +35,7 @@ import nbformat from "./NotebookExample.ipynb.json"; ``` -For IPyWidgets, use the following properties: - -- `bundledIPyWidgets`: List of module name, version and exports. -- `externalIPyWidgets`: List of module name and version to be loaded from public CDNs. -- `ipywidgets`: `lab` or `classic` (deprecated, will be soon removed). Please use `lab` - -The available properties for the Notebook component are available on this [TypeDoc page](https://typedoc.datalayer.tech/datalayer/jupyter-react/0.8.1/types/INotebookProps.html). +The available properties for the Notebook component are listed on the [TypeDoc page](https://typedoc.datalayer.tech/datalayer/jupyter-react/0.9.0/types/INotebookProps.html). ## With a Jupyter server @@ -62,7 +56,11 @@ You can set the following props to connect it to a running Jupyter Server: - `jupyterServerUrl`: The server URL - `jupyterServerToken`: The server authentication token -> Your server will likely need to accept connection from external client. +:::note + +Your server will likely to accept connections from external client. + +::: ## With in-browser kernel @@ -88,7 +86,7 @@ you can simply set `lite` to `true`: cell_type: 'code', outputs: [], source: - "import piplite\nawait piplite.install('ipywidgets')", + "import micropip\nawait micropip.install('ipywidgets')", }, { cell_type: 'code', diff --git a/docs/docs/components/terminal/_category_.yml b/docs/docs/components/terminal/_category_.yml index 63c779e6..c179e710 100644 --- a/docs/docs/components/terminal/_category_.yml +++ b/docs/docs/components/terminal/_category_.yml @@ -1,2 +1,2 @@ label: "Terminal" -position: 5 +position: 4 diff --git a/docs/docs/components/viewer/_category_.yml b/docs/docs/components/viewer/_category_.yml index 2f5c2487..7977d6ed 100644 --- a/docs/docs/components/viewer/_category_.yml +++ b/docs/docs/components/viewer/_category_.yml @@ -1,2 +1,2 @@ label: "Viewer" -position: 3 +position: 6 diff --git a/docs/docs/demos/_category_.yaml b/docs/docs/demos/_category_.yaml new file mode 100644 index 00000000..3967ba5a --- /dev/null +++ b/docs/docs/demos/_category_.yaml @@ -0,0 +1,2 @@ +label: "Demos" +position: 9 diff --git a/docs/docs/demos/cell/index.mdx b/docs/docs/demos/cell/index.mdx index 36a29441..c3d0500f 100644 --- a/docs/docs/demos/cell/index.mdx +++ b/docs/docs/demos/cell/index.mdx @@ -2,21 +2,17 @@ description: A demonstation of the Cell component. --- -# Cell Demo - import JupyterCell from '@theme/JupyterCell'; -:::tip +# Cell Demo -Type your code in the below cell and hit `SHIFT+ENTER` to execute your code. +:::tip -> ✨ This is fast, isn't it? +✨ Type your code in the below cell and hit `SHIFT+ENTER` to execute your code. ::: diff --git a/docs/docs/deployments/_category_.yaml b/docs/docs/deployments/_category_.yaml new file mode 100644 index 00000000..3936de9b --- /dev/null +++ b/docs/docs/deployments/_category_.yaml @@ -0,0 +1,2 @@ +label: "Deployments" +position: 6 diff --git a/docs/docs/deployments/index.mdx b/docs/docs/deployments/index.mdx new file mode 100644 index 00000000..ae33095a --- /dev/null +++ b/docs/docs/deployments/index.mdx @@ -0,0 +1,5 @@ +import DocCardList from '@theme/DocCardList'; + +# Deployments + + diff --git a/docs/docs/deployments/jupyter-server/index.mdx b/docs/docs/deployments/jupyter-server/index.mdx index 8d508fcc..d5dba1b8 100644 --- a/docs/docs/deployments/jupyter-server/index.mdx +++ b/docs/docs/deployments/jupyter-server/index.mdx @@ -1,8 +1,29 @@ # Jupyter Server -To connect to a Jupyter Server, you have to define the URL for HTTP and WebSocket, as the token. +To connect to a Jupyter Server, you have to define the URL for the Jupyter Server as well as a the Jupyter Token. -Those properties can be provided in the [Jupyter Context](/docs/components/context) or by setting them in the host HTML (index.html) a `script` tag in the head section. +Assuming you have Jupyter Server correctly installed on your machine, you can run your local server with the following command. + +```bash +# This will start a Jupyter Server and a Webpack Server. +# open http://localhost:8686/api/jupyter-server?token=60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6 +# open http://localhost:3208 +cd packages/react +yarn start-local +``` + +The Jupyter Server and the Jupyter Token can be provided in the [Jupyter Context](/docs/components/context) + +```ts + + + +``` + +Alternatively, you can to define a `script` tag in the head section your host index HTML page information for your React applicatio with those 2 configurations (see for example the content of this [index-local.html](https://github.com/datalayer/jupyter-ui/blob/main/packages/react/public/index-local.html)). ```html @@ -18,26 +39,37 @@ Those properties can be provided in the [Jupyter Context](/docs/components/conte ``` -The values defined in the host HTML are taking precedence on the values set in the Jupyter context. +:::note -```ts - - - +If you are also using a `jupyter-config-data`, ensure you set the correct values over there. + +```html + ``` +::: + +:::info + +The values defined in the Jupyter context are taking precedence on the values set in the host HTML. + +::: + If you are delivering the React.js web application from a different URL than your Jupyter Server, the Jupyter Server should be configured to accept Cross-origin request with for example in the `jupyter_server_config.py` the following traits. -:::caution +:::info Please tune the following example to fit your security requirements, this is in no way production-ready configuration. -Use the following at your own risk! +
-:::caution + ⚠️ Use the following at your own risk!. ```py ################# @@ -73,3 +105,29 @@ c.IdentityProvider.cookie_options = { "Secure": True, } ``` + +
+ +::: + +:::info + +If you are using the [JupyterLabApp](/docs/components/jupyterlab-app) component, additional information will be needed (see [index-local.html](https://github.com/datalayer/jupyter-ui/blob/main/packages/react/public/index-local.html)) + +```html + +``` + +::: \ No newline at end of file diff --git a/docs/docs/deployments/jupyterhub/index.mdx b/docs/docs/deployments/jupyterhub/index.mdx index 5bce2afd..8133f1e2 100644 --- a/docs/docs/deployments/jupyterhub/index.mdx +++ b/docs/docs/deployments/jupyterhub/index.mdx @@ -1,3 +1,3 @@ # 🚧 JupyterHub -JupyterHub deployment is a Work in Progress (WIP). +Deployment for JupyterHub is a Work in Progress (WIP). diff --git a/docs/docs/develop/develop/_category_.yml b/docs/docs/develop/_category_.yaml similarity index 100% rename from docs/docs/develop/develop/_category_.yml rename to docs/docs/develop/_category_.yaml diff --git a/docs/docs/develop/dev-environment/_category_.yml b/docs/docs/develop/dev-environment/_category_.yml new file mode 100644 index 00000000..b64ba58f --- /dev/null +++ b/docs/docs/develop/dev-environment/_category_.yml @@ -0,0 +1,2 @@ +label: "Development Environment" +position: 1 diff --git a/docs/docs/develop/dev-environment/conda/_category_.yml b/docs/docs/develop/dev-environment/conda/_category_.yml new file mode 100644 index 00000000..ec0d8935 --- /dev/null +++ b/docs/docs/develop/dev-environment/conda/_category_.yml @@ -0,0 +1,2 @@ +label: "Conda" +position: 1 diff --git a/docs/docs/develop/setup/conda.mdx b/docs/docs/develop/dev-environment/conda/index.mdx similarity index 68% rename from docs/docs/develop/setup/conda.mdx rename to docs/docs/develop/dev-environment/conda/index.mdx index 2fba3d26..4f1487ea 100644 --- a/docs/docs/develop/setup/conda.mdx +++ b/docs/docs/develop/dev-environment/conda/index.mdx @@ -1,6 +1,6 @@ --- title: Conda Environment -sidebar_position: 3 +sidebar_position: 2 --- # Setup with a Conda environment @@ -13,15 +13,7 @@ You need [Miniconda](https://docs.conda.io/en/latest/miniconda.html) up-and-runn `macOS` or `Linux` are supported out-of-the-box. -If you run on `Windows`, [Cygwin](https://www.cygwin.com) is needed and your will need to run the commands from a Cygwin shell. - -::: - -:::caution - -Only `yarn` is supported - `npm` or `pnpm` will not work. - -This is due to some dependency on the JupyterLab build system which only supports `yarn`. +[Cygwin](https://www.cygwin.com) is required on `Windows` and your will need to run the commands from the Cygwin shell. ::: diff --git a/docs/docs/develop/dev-environment/devcontainers/_category_.yml b/docs/docs/develop/dev-environment/devcontainers/_category_.yml new file mode 100644 index 00000000..7050b653 --- /dev/null +++ b/docs/docs/develop/dev-environment/devcontainers/_category_.yml @@ -0,0 +1,2 @@ +label: "Devcontainers" +position: 2 diff --git a/docs/docs/develop/setup/devcontainers.mdx b/docs/docs/develop/dev-environment/devcontainers/index.mdx similarity index 86% rename from docs/docs/develop/setup/devcontainers.mdx rename to docs/docs/develop/dev-environment/devcontainers/index.mdx index 4c633d47..9f1747e1 100644 --- a/docs/docs/develop/setup/devcontainers.mdx +++ b/docs/docs/develop/dev-environment/devcontainers/index.mdx @@ -1,6 +1,6 @@ --- title: VS Code Devcontainers -sidebar_position: 2 +sidebar_position: 3 --- # Setup with VS Code Devcontainers @@ -9,14 +9,13 @@ Clone the `jupyter-ui` repository and load it in your VS Code. ```bash git clone https://github.com/datalayer/jupyter-ui.git && \ - cd jupyter-ui + cd jupyter-ui && \ + code ``` The [Jupyter UI](https://github.com/datalayer/jupyter-ui) repository ships the needed `.devcontainer` folder to develop from [VS Code Devcontainers](https://code.visualstudio.com/docs/devcontainers/containers). -Just click on the bottom-left blue icon in your VS Code and select `Reopen in container...` - -Note you may need to up the amount of resources in your dev-container [link](https://github.com/datalayer/jupyter-ui/issues/101) +Just click on the bottom-left blue icon in your VS Code and select `Reopen in container...`. Note you may need to up the amount of resources in your dev-container [link](https://github.com/datalayer/jupyter-ui/issues/101) :::caution diff --git a/docs/docs/develop/dev-environment/index.mdx b/docs/docs/develop/dev-environment/index.mdx new file mode 100644 index 00000000..0f18126b --- /dev/null +++ b/docs/docs/develop/dev-environment/index.mdx @@ -0,0 +1,31 @@ +# Development Environment + +:::caution + +🚨 Only Yarn v3 is supported - npm, pnpm, yarn v1... will not work, this is due to JupyterLab requirements. + +::: + +Choose the way you want to develop Jupyter UI: + +1. [With Conda](/docs/develop/dev-environment/conda) +1. [With VS Code Devcontainers](/docs/develop/dev-environment/devcontainers) + +Once you have applied the steps described in one of the above 2 options, you are ready to develop following the next steps. + +```bash +# Install the dependencies. This will take some time, be patient. 👍 +yarn install +``` + +```bash +# Build the source code. This will also take some time, be also patient. 🙂 +yarn build +``` + +If you just want to develop the core package `@datalayer/jupyter-react` of the repository, go to the sub folder and work there. + +```bash +cd packages/react +yarn build +``` diff --git a/docs/docs/develop/develop/index.mdx b/docs/docs/develop/develop/index.mdx deleted file mode 100644 index 3c1142d1..00000000 --- a/docs/docs/develop/develop/index.mdx +++ /dev/null @@ -1,129 +0,0 @@ -# Develop - -## Packaging - -As Jupyter React ships with the in-browser Python kernel [Pyodide](https://github.com/jupyterlite/pyodide-kernel/), packaging -your code is not trivial. We recommend using [Webpack](https://webpack.js.org/) as bundler for your project. Then you will need to -add the following rules to support in-browser kernels: - -```json5 - "module": { - "rules": [ - /* - ... the rules for the JavaScript and CSS assets - */ - // Rule for the JupyterLite service worker. - // !important this must result in a file named `service-worker.js` - // to be served at the root of your website. - { - resourceQuery: /text/, - type: 'asset/resource', - generator: { - filename: '[name][ext]', - }, - }, - // Rule for pyodide kernel - { - test: /pypi\/.*/, - type: 'asset/resource', - generator: { - filename: 'pypi/[name][ext][query]', - }, - }, - { - test: /pyodide-kernel-extension\/schema\/.*/, - type: 'asset/resource', - generator: { - filename: 'schema/[name][ext][query]', - }, - } - ] - } -``` - -## Simple Example - -Now you can start an example and hack the source code. The changes will build automatically and will be available in your browser. - -```bash -# open http://localhost:3208 -yarn start # start and example defined in the packages/react/webpack.config.js file. -``` - -This will consume kernels from the Datalayer development server in the cloud. You can run your own server with the following command. - -```bash -# open http://localhost:3208 -yarn start-local -``` - -The used Jupyter Server configuration is available [in this jupyter_server_config.py](https://github.com/datalayer/jupyter-ui/blob/main/dev/config/jupyter_server_config.py). The important part of that configuration is the `Security` part where the settings for CORS access are defined. - -Additionally, you can to define in the head section your host index HTML page information for your React application about the location of your Juptyer Server (see for example the content of this [index-local.html](https://github.com/datalayer/jupyter-ui/blob/main/packages/react/public/index-local.html)). - -```html - -``` - -If you are using the [JupyterLabApp](/docs/components/jupyterlabapp) component, additional information will be needed (see [index-local.html](https://github.com/datalayer/jupyter-ui/blob/main/packages/react/public/index-local.html)) - -```html - -``` - -## Other Examples - -We have more examples, pick one of the following commands and enjoy. - -```bash -# Create React App example -# open http://localhost:3000 -yarn jupyter:ui:cra -# -# Lexical example -# open http://localhost:3208 -yarn jupyter:ui:lexical -# -# Docusaurus example -# open http://localhost:3000/docs/intro -yarn jupyter:ui:docusaurus -# -# Next.js example -# open http://localhost:3000 -yarn jupyter:ui:nextjs -``` - -While running those example, hot reload is supported: - -- Changing the source code of the example and your browser should reflect those changes. -- If you need to change the core react package `@datalayer/jupyter-react`, you will need to run `yarn watch` in the `packages/react` folder. - -PS: We also have some uncomplete or deprecated examples... - -```bash -# Slate example (deprecated) -# open http://localhost:3266 -yarn jupyter:ui:slate -# -# Prosemirror example (deprecated) -# open http://localhost:4567 -yarn jupyter:ui:prosemirror -``` - diff --git a/docs/docs/develop/index.mdx b/docs/docs/develop/index.mdx new file mode 100644 index 00000000..0e812e0e --- /dev/null +++ b/docs/docs/develop/index.mdx @@ -0,0 +1,28 @@ +import DocCardList from '@theme/DocCardList'; + +# Develop + +The Jupyter UI source code is available on [GitHub](https://github.com/datalayer/jupyter-ui). Check out the TypeDoc documentation for [@datalayer/jupyter-react 0.9.0](https://typedoc.datalayer.tech/datalayer/jupyter-react/0.9.0). + +:::note + +Many developers are reporting issues with their environment (build failures...). + +This is inherent to the mixed Python and JavaScript build as dependency on Jupyter toolchain. We are putting this issue at the top of our priority to ease your pain. + +1. Pick or `Conda` or `Docker`/`devcontainer` with VS Code based on your pior experience. +1. Only `Yarn v3` and `Lerna` are supported based on JupyterLab 4 requirements. +1. `engines` and `os` are enforced in package.json - We **only support** Yarn v3 on macOS and Linux. +1. We are offering `hosted kernels` so you don't need to run your local Jupyter Server. If you run `yarn start`, you will consume those hosted kernels from the cloud. +1. The default build should be faster and does not build the examples, please give your opinion on https://github.com/datalayer/jupyter-ui/issues/63. +1. `Pyodide` kernels are supported for most of the components. + +::: + +:::success + +👉 Please continue reporting any failure and idea on how to make a better experience. ❤️ + +::: + + diff --git a/docs/docs/develop/setup/_category_.yml b/docs/docs/develop/setup/_category_.yml deleted file mode 100644 index 1d544117..00000000 --- a/docs/docs/develop/setup/_category_.yml +++ /dev/null @@ -1,2 +0,0 @@ -label: "Setup" -position: 1 diff --git a/docs/docs/develop/setup/index.mdx b/docs/docs/develop/setup/index.mdx deleted file mode 100644 index d93477f0..00000000 --- a/docs/docs/develop/setup/index.mdx +++ /dev/null @@ -1,57 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Setup - -:::note - -Many developers are reporting issues with their environment (build failures...). This is inherent to the mixed Python and JavaScript build as dependency on Jupyter toolchain. We are putting this issue at the top of our priority to ease your pain. - -1. `Docker` and `devcontainer` with VS Code are the preferred option. -1. We have migrated to `Yarn v3` and latest `Lerna` to align with JupyterLab 4. -1. `engines` and `os` are enforced in package.json - We **only support** Yarn v3 on macOS and Linux. -1. We are offering `hosted kernels` so you don't need to run your local Jupyter Server. If you run `yarn start`, you will consume those hosted kernels from the cloud. -1. The default build should be faster and `not build the examples`, please give your opinion on https://github.com/datalayer/jupyter-ui/issues/63. -1. We are looking towards `Pyodide` kernels (already supported for the Console component). - -👉 Please continue reporting any failure and idea on how to make a better experience. ❤️ - -:::note - -## Environment - -:::caution - -Only Yarn V3 is supported (Yarn V1 will not work, this is due to JupyterLab requirements). - -::: - -Choose the way you want to develop Jupyter UI: - -1. [With VS Code Devcontainers](/docs/develop/setup/devcontainers) -1. [With Conda](/docs/develop/setup/conda) - -Once you have applied the steps described in one of the above 2 options, you are ready to develop following the next steps. - -## Install and Build - -Install the dependencies. This will take some time, be patient. 👍 - -```bash -yarn install -``` - -Build the source code. This will also take some time, be also patient. 🙂 - -```bash -yarn build -``` - -If you just want to develop the core package of the repository, the `@datalayer/jupyter-react`, just go to the sub folder and work there. - -```bash -cd packages/react -yarn build -``` - diff --git a/docs/docs/develop/usage/_category_.yml b/docs/docs/develop/usage/_category_.yml deleted file mode 100644 index 014bc0b6..00000000 --- a/docs/docs/develop/usage/_category_.yml +++ /dev/null @@ -1,2 +0,0 @@ -label: "Usage" -position: 3 diff --git a/docs/docs/develop/usage/index.mdx b/docs/docs/develop/usage/index.mdx deleted file mode 100644 index 03cf34ef..00000000 --- a/docs/docs/develop/usage/index.mdx +++ /dev/null @@ -1,19 +0,0 @@ -import ModalImage from "react-modal-image"; - -# Usage - -As a React.js developer, you just write a few lines of code get a live notebook or live cell in your application. - - - -Jupyter UI can be used in any React.js application. Install the latest `@datalayer/jupyter-react` npm package and get inspired by the [examples](/docs/category/examples). - - diff --git a/docs/docs/develop/webapp/_category_.yml b/docs/docs/develop/webapp/_category_.yml new file mode 100644 index 00000000..7f599f56 --- /dev/null +++ b/docs/docs/develop/webapp/_category_.yml @@ -0,0 +1,2 @@ +label: "Web App" +position: 2 diff --git a/docs/docs/develop/webapp/index.mdx b/docs/docs/develop/webapp/index.mdx new file mode 100644 index 00000000..1590d069 --- /dev/null +++ b/docs/docs/develop/webapp/index.mdx @@ -0,0 +1,61 @@ +# Web App + +You can start an example and hack the source code. The changes will build automatically and will be available in your browser. + +```bash +# Start and example defined in the packages/react/webpack.config.js file. +# open http://localhost:3208 +yarn start +``` + +This will consume kernels from the Datalayer development free servers in the cloud. If you need your own server (on your local machine or on your cloud), refer to this [Jupyter Server documentation](/docs/deployments/jupyter-server) + +We have a variety of examples, pick one in the following commands and enjoy. + +```bash +# Create React App example +# open http://localhost:3000 +yarn jupyter:ui:cra +``` + +```bash +# Lexical example +# open http://localhost:3208 +yarn jupyter:ui:lexical +``` + +```bash +# Docusaurus example +# open http://localhost:3000/docs/intro +yarn jupyter:ui:docusaurus +``` + +```bash +# Next.js example +# open http://localhost:3000 +yarn jupyter:ui:nextjs +``` + +While running those example, hot reload is supported: + +- Changing the source code of the example and your browser should reflect those changes. +- If you need to change the core react package `@datalayer/jupyter-react`, you will need to run `yarn watch` in the `packages/react` folder. + +:::note + +We also have some uncomplete or deprecated examples... + +::: + +```bash +# Slate example (deprecated) +# open http://localhost:3266 +yarn jupyter:ui:slate +``` + +```bash +# Prosemirror example (deprecated) +# open http://localhost:4567 +yarn jupyter:ui:prosemirror +``` + diff --git a/docs/docs/examples/docusaurus/_category_.yml b/docs/docs/examples/docusaurus/_category_.yml deleted file mode 100644 index d8e2faa3..00000000 --- a/docs/docs/examples/docusaurus/_category_.yml +++ /dev/null @@ -1,2 +0,0 @@ -label: "Docusaurus" -position: 4 diff --git a/docs/docs/examples/docusaurus/index.mdx b/docs/docs/examples/docusaurus/index.mdx deleted file mode 100644 index 44743e97..00000000 --- a/docs/docs/examples/docusaurus/index.mdx +++ /dev/null @@ -1,15 +0,0 @@ ---- -description: Example with Docusaurus. ---- - -import ModalImage from "react-modal-image"; - -# 🪐 🦕 Example with Docusarurus - -An example with [Docusaurus](https://docusaurus.io) is available in this [repository folder](https://github.com/datalayer/jupyter-ui/tree/main/examples/docusaurus). - - diff --git a/docs/docs/integrations/_category_.yaml b/docs/docs/integrations/_category_.yaml new file mode 100644 index 00000000..9f25c17a --- /dev/null +++ b/docs/docs/integrations/_category_.yaml @@ -0,0 +1,2 @@ +label: "Integrations" +position: 7 diff --git a/docs/docs/examples/cra/_category_.yml b/docs/docs/integrations/cra/_category_.yml similarity index 100% rename from docs/docs/examples/cra/_category_.yml rename to docs/docs/integrations/cra/_category_.yml diff --git a/docs/docs/examples/cra/index.mdx b/docs/docs/integrations/cra/index.mdx similarity index 83% rename from docs/docs/examples/cra/index.mdx rename to docs/docs/integrations/cra/index.mdx index 9415c0cb..1cdaa206 100644 --- a/docs/docs/examples/cra/index.mdx +++ b/docs/docs/integrations/cra/index.mdx @@ -2,13 +2,9 @@ description: A Create React Application example. --- -# Create React Application Example +# Create React Application -The source code of this example can be found in the [jupyter-react-cra-example repository](https://github.com/datalayer-examples/jupyter-react-cra-example). - -## Environment - -Setup your [development environment](/docs/develop/setup). +The source code of an example can be found in the [jupyter-react-cra-example repository](https://github.com/datalayer-examples/jupyter-react-cra-example). ## Create a Project @@ -21,9 +17,9 @@ npx create-react-app jupyter-react-cra-example -y --template typescript && \ ## Resolutions -We need coherent React.js versions otherwise you may hit the `Invalid Hook Call Warning` with `mismatching versions of React and React DOM` as documented on [this page](https://reactjs.org/warnings/invalid-hook-call-warning.html). JupyerLab is actively developed and we are tracking the latest (pre-)releases as closely as possible. +We need coherent React.js versions otherwise you may hit the `Invalid Hook Call Warning` with `mismatching versions of React and React DOM` as documented on [this page](https://reactjs.org/warnings/invalid-hook-call-warning.html). -Therefor, we ask to pin the yarn resolutions. Add [this block](https://github.com/datalayer/jupyter-ui/blob/main/package.json#L76-L184) in your package.json. +JupyerLab is actively developed and we are tracking the latest (pre-)releases as closely as possible. Therefor, we ask to pin the yarn resolutions. Add [this block](https://github.com/datalayer/jupyter-ui/blob/main/package.json#L76-L184) in your package.json. ## Startup Scripts @@ -121,16 +117,16 @@ root.render( ## Start -:::info +:::success -Finally we get there! +We get there! ::: Let's get started and enjoy a Notebook in React.js. ```bash -echo open http://localhost:3000 +# echo open http://localhost:3000 yarn start ``` diff --git a/docs/docs/integrations/docusaurus/_category_.yml b/docs/docs/integrations/docusaurus/_category_.yml index 73967a9c..d8e2faa3 100644 --- a/docs/docs/integrations/docusaurus/_category_.yml +++ b/docs/docs/integrations/docusaurus/_category_.yml @@ -1,2 +1,2 @@ label: "Docusaurus" -position: 1 +position: 4 diff --git a/docs/docs/integrations/docusaurus/index.mdx b/docs/docs/integrations/docusaurus/index.mdx index 81060b8f..99053f8b 100644 --- a/docs/docs/integrations/docusaurus/index.mdx +++ b/docs/docs/integrations/docusaurus/index.mdx @@ -4,18 +4,14 @@ description: Integration with Docusaurus. import ModalImage from "react-modal-image"; -# 🪐 🦕 Integration with Docusaurus +# 🪐 🦕 Docusaurus -We maintain a [plugin](https://docusaurus.io/docs/next/using-plugins) for [Docusaurus](https://docusaurus.io) in the [docusaurus](https://github.com/datalayer/jupyter-ui/tree/main/packages/docusaurus-plugin) package folder. +We maintain a [plugin](https://docusaurus.io/docs/next/using-plugins) for [Docusaurus](https://docusaurus.io) in the [docusaurus-plugin](https://github.com/datalayer/jupyter-ui/tree/main/packages/docusaurus-plugin) package folder. This allows you to embed Jupyter into any Docusaurus website. -This allows you to embed Jupyter into any Docusaurus website. - -Have a look at the [Docusaurus example](https://github.com/datalayer/jupyter-ui/tree/main/examples/docusaurus). +An example with [Docusaurus](https://docusaurus.io) is available in this [repository folder](https://github.com/datalayer/jupyter-ui/tree/main/examples/docusaurus) and you can try it [online on this page](/docs/demos/cell). - -[Jupyter Docusaurus example source code](https://github.com/datalayer/jupyter-ui/tree/main/examples/docusaurus) MIT license. diff --git a/docs/docs/integrations/index.mdx b/docs/docs/integrations/index.mdx new file mode 100644 index 00000000..393866c5 --- /dev/null +++ b/docs/docs/integrations/index.mdx @@ -0,0 +1,5 @@ +import DocCardList from '@theme/DocCardList'; + +# Integrations + + diff --git a/docs/docs/examples/next-js/_category_.yml b/docs/docs/integrations/next-js/_category_.yml similarity index 58% rename from docs/docs/examples/next-js/_category_.yml rename to docs/docs/integrations/next-js/_category_.yml index af21c0d8..10b6de0a 100644 --- a/docs/docs/examples/next-js/_category_.yml +++ b/docs/docs/integrations/next-js/_category_.yml @@ -1,2 +1,2 @@ label: "Next.js" -position: 2 +position: 3 diff --git a/docs/docs/examples/next-js/index.mdx b/docs/docs/integrations/next-js/index.mdx similarity index 87% rename from docs/docs/examples/next-js/index.mdx rename to docs/docs/integrations/next-js/index.mdx index b8e31840..513948fc 100644 --- a/docs/docs/examples/next-js/index.mdx +++ b/docs/docs/integrations/next-js/index.mdx @@ -4,21 +4,13 @@ description: Example with Next.js. import ModalImage from "react-modal-image"; -# Example with Next.js +# Next.js An example with [Next.js](https://nextjs.org) is available in this [dedicated repository](https://github.com/datalayer-examples/jupyter-nextjs-example) as in this [repository folder](https://github.com/datalayer/jupyter-ui/tree/main/examples/next-js). There are a couple of configuration and requirement to run Jupyter React in Next.js. -## Yarn V3 - -You have to build with Yarn V3 (Npm or Pnpm do not work for now). - -## Render in client-mode - -You need to render in client-mode the Jupyter part. - -To achieve this, you can e.g. load your page with external components dynamically loaded. +You need to render in client-mode the Jupyter part. To achieve this, you can e.g. load your page with external components dynamically loaded. ```js import dynamic from 'next/dynamic' @@ -49,8 +41,6 @@ import { Jupyter, Notebook, CellSidebar } from '@datalayer/jupyter-react'; // ... ``` -## Add Require.js - For IPyWidgets support, you need `requirejs` on the page, so add a `script` tag to your layout to load the script from a CDN `https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js`. ```js @@ -80,14 +70,10 @@ export default function RootLayout({ } ``` -## CSS - We have seen that Jupyter React components places in the main tag of the default Next.js application are not shown (they have a width of 0). For now, please place you components outside of the main Next.js CSS. -## Enjoy! - support at datalayer.io to know more. + +::: -We also welcome [pull requests](https://github.com/datalayer/jupyter-ui/pulls). +If those options does not fit your requirements or you are not comfortable sharing information in public, see other options on the [Datalayer support page](https://datalayer.tech/docs/services/support) or book a call to discuss, we are here to help! -If those options does not fit your requirements or you are not comfortable sharing information in public, see other options on the [Datalayer support page](https://datalayer.tech/docs/support). + diff --git a/docs/docs/themes/_category_.yaml b/docs/docs/themes/_category_.yaml new file mode 100644 index 00000000..8a2c21f8 --- /dev/null +++ b/docs/docs/themes/_category_.yaml @@ -0,0 +1,2 @@ +label: "Themes" +position: 8 diff --git a/docs/docs/themes/index.mdx b/docs/docs/themes/index.mdx new file mode 100644 index 00000000..58d9f968 --- /dev/null +++ b/docs/docs/themes/index.mdx @@ -0,0 +1,5 @@ +import DocCardList from '@theme/DocCardList'; + +# Themes + + diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 3a0e57f8..868baa0f 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -59,58 +59,46 @@ module.exports = { }, { type: 'doc', - docId: '/category/develop', + docId: 'develop/index', position: 'left', label: 'Develop', }, { type: 'doc', - docId: '/category/components', + docId: 'components/index', position: 'left', label: 'Components', }, { type: 'doc', - docId: '/category/state', + docId: 'state/index', position: 'left', label: 'State', }, { type: 'doc', - docId: '/category/deployments', + docId: 'deployments/index', position: 'left', label: 'Deployments', }, { type: 'doc', - docId: '/category/examples', - position: 'left', - label: 'Examples', - }, - { - type: 'doc', - docId: '/category/integrations', + docId: 'integrations/index', position: 'left', label: 'Integrations', }, { type: 'doc', - docId: '/category/themes', + docId: 'themes/index', position: 'left', label: 'Themes', }, { type: 'doc', - docId: '/category/demos', + docId: 'demos/index', position: 'left', label: 'Demos', }, - { - type: 'doc', - docId: 'resources/index', - position: 'left', - label: 'Resources', - }, { type: 'doc', docId: 'support/index', diff --git a/docs/package.json b/docs/package.json index 490b50a1..299c1b4c 100644 --- a/docs/package.json +++ b/docs/package.json @@ -15,24 +15,24 @@ "write-heading-ids": "docusaurus write-heading-ids" }, "dependencies": { - "@datalayer/jupyter-docusaurus-plugin": "^0.1.1", - "@docusaurus/core": "3.4.0", - "@docusaurus/preset-classic": "3.4.0", - "@docusaurus/theme-live-codeblock": "3.4.0", - "@docusaurus/theme-mermaid": "3.4.0", + "@datalayer/jupyter-docusaurus-plugin": "^0.1.2", + "@docusaurus/core": "3.5.2", + "@docusaurus/preset-classic": "3.5.2", + "@docusaurus/theme-live-codeblock": "3.5.2", + "@docusaurus/theme-mermaid": "3.5.2", "@mdx-js/react": "^3.0.1", "@primer/react-brand": "0.37.0-rc.ab1bfc11", "clsx": "^2.1.1", "docusaurus-lunr-search": "3.5.0", "docusaurus-plugin-typedoc": "~0.17.5", "react": "^18.2.0", + "react-calendly": "4.1.0", "react-dom": "^18.2.0", "react-modal-image": "^2.5.0", - "react-router-dom": "^6.22.3", "typedoc-plugin-markdown": "^3.13.5" }, "devDependencies": { - "@docusaurus/module-type-aliases": "3.4.0", + "@docusaurus/module-type-aliases": "3.5.0", "@tsconfig/docusaurus": "2.0.3", "cross-env": "^7.0.3", "typescript": "~5.0.3" diff --git a/docs/sidebars.js b/docs/sidebars.js index 76dff02e..4b584868 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -19,145 +19,12 @@ /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ const sidebars = { - jupyterReactSidebar: [ + jupyterUISidebar: [ { - type: 'doc', - id: 'about/index', - label: 'About', + type: 'autogenerated', + dirName: '.', }, - { - type: 'category', - label: 'Cases', - link: { - type: 'generated-index', - }, - items: [ - { - type: 'autogenerated', - dirName: 'cases', - }, - ], - }, - { - type: 'category', - label: 'Develop', - link: { - type: 'generated-index', - }, - items: [ - { - type: 'autogenerated', - dirName: 'develop', - }, - ], - }, - { - type: 'category', - label: 'Components', - link: { - type: 'generated-index', - }, - items: [ - { - type: 'autogenerated', - dirName: 'components', - }, - ], - }, - { - type: 'category', - label: 'State', - link: { - type: 'generated-index', - }, - items: [ - { - type: 'autogenerated', - dirName: 'state', - }, - ], - }, - { - type: 'category', - label: 'Deployments', - link: { - type: 'generated-index', - }, - items: [ - { - type: 'autogenerated', - dirName: 'deployments', - }, - ], - }, - { - type: 'category', - label: 'Examples', - link: { - type: 'generated-index', - }, - items: [ - { - type: 'autogenerated', - dirName: 'examples', - }, - ], - }, - { - type: 'category', - label: 'Integrations', - link: { - type: 'generated-index', - }, - items: [ - { - type: 'autogenerated', - dirName: 'integrations', - }, - ], - }, - { - type: 'category', - label: 'Themes', - link: { - type: 'generated-index', - }, - items: [ - { - type: 'autogenerated', - dirName: 'themes', - }, - ], - }, - { - type: 'category', - label: 'Demos', - link: { - type: 'generated-index', - }, - items: [ - { - type: 'autogenerated', - dirName: 'demos', - }, - ], - }, - { - type: 'doc', - id: 'resources/index', - label: 'Resources', - }, - { - type: 'doc', - id: 'support/index', - label: 'Support', - }, - { - type: 'doc', - id: 'license/index', - label: '⚖️ MIT License', - }, - ], + ] }; module.exports = sidebars; diff --git a/docs/src/theme/ReactLiveScope/index.tsx b/docs/src/theme/ReactLiveScope/index.tsx index 27229c4c..e1b1ff13 100644 --- a/docs/src/theme/ReactLiveScope/index.tsx +++ b/docs/src/theme/ReactLiveScope/index.tsx @@ -18,15 +18,16 @@ const Cell = (props: any) => { const { Cell } = require('@datalayer/jupyter-react/lib/components/cell/Cell'); return ( <> - } - > - - - + } + > + + + ) }} diff --git a/packages/docusaurus-plugin/package.json b/packages/docusaurus-plugin/package.json index 9467f672..1d2b8eec 100644 --- a/packages/docusaurus-plugin/package.json +++ b/packages/docusaurus-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@datalayer/jupyter-docusaurus-plugin", - "version": "0.1.1", + "version": "0.1.2", "description": "Docusaurus Plugin for Jupyter", "main": "lib/index.js", "license": "MIT", diff --git a/packages/docusaurus-plugin/src/theme/JupyterCell.tsx b/packages/docusaurus-plugin/src/theme/JupyterCell.tsx index 4589671e..152a64d3 100644 --- a/packages/docusaurus-plugin/src/theme/JupyterCell.tsx +++ b/packages/docusaurus-plugin/src/theme/JupyterCell.tsx @@ -15,26 +15,43 @@ type JupyterCellProps = { } const JupyterCell = (props: JupyterCellProps) => { - const { jupyterServerUrl, jupyterServerToken, source } = props; return ( Jupyter Cell fallback content for prerendering.}> {() => { - // Keep the import via require in the BrowserOnly code block. + + // Keep the import via require and keep it into the BrowserOnly code block.. + // const { JupyterReactTheme } = require('@datalayer/jupyter-react/lib/theme'); + // const { useJupyter } = require('@datalayer/jupyter-react/lib/jupyter/JupyterContext'); const { Jupyter } = require('@datalayer/jupyter-react/lib/jupyter/Jupyter'); const { Cell } = require('@datalayer/jupyter-react/lib/components/cell/Cell'); + + const { + jupyterServerUrl = 'https://oss.datalayer.run/api/jupyter-server', + jupyterServerToken = '60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6', + source = '', + } = props; + /* + useJupyter({ + jupyterServerUrl, + jupyterServerToken, + }); + */ return ( <> } > - + ) + }} ) diff --git a/packages/docusaurus-plugin/src/theme/ReactLiveScope/index.tsx b/packages/docusaurus-plugin/src/theme/ReactLiveScope/index.tsx index f60b0ea8..eb168619 100644 --- a/packages/docusaurus-plugin/src/theme/ReactLiveScope/index.tsx +++ b/packages/docusaurus-plugin/src/theme/ReactLiveScope/index.tsx @@ -13,22 +13,26 @@ const Cell = (props: any) => { Jupyter Cell fallback content for prerendering.}> {() => { + // Keep the import via require in the BrowserOnly code block. const { Jupyter } = require('@datalayer/jupyter-react/lib/jupyter/Jupyter'); const { Cell } = require('@datalayer/jupyter-react/lib/components/cell/Cell'); + return ( <> - } - > - - - + } + > + + + ) - }} + + }} ) } diff --git a/packages/lexical/jupyter_lexical/_version.py b/packages/lexical/jupyter_lexical/_version.py index a692c44c..08e48a88 100644 --- a/packages/lexical/jupyter_lexical/_version.py +++ b/packages/lexical/jupyter_lexical/_version.py @@ -5,4 +5,4 @@ # This file is auto-generated by Hatchling. As such, do not: # - modify # - track in version control e.g. be sure to add to .gitignore -__version__ = VERSION = '0.0.1' +__version__ = VERSION = '0.0.2' diff --git a/packages/lexical/src/components/JupyterCellComponent.tsx b/packages/lexical/src/components/JupyterCellComponent.tsx index d3506422..1624e6bc 100644 --- a/packages/lexical/src/components/JupyterCellComponent.tsx +++ b/packages/lexical/src/components/JupyterCellComponent.tsx @@ -8,8 +8,9 @@ import { Cell } from '@datalayer/jupyter-react'; export const JupyterCellComponent = (props: any) => { return ( - ) diff --git a/packages/lexical/src/examples/App1.tsx b/packages/lexical/src/examples/App1.tsx index 294f18aa..a4d12f66 100644 --- a/packages/lexical/src/examples/App1.tsx +++ b/packages/lexical/src/examples/App1.tsx @@ -41,10 +41,7 @@ export const App1 = () => {

Jupyter UI ❤️ Lexical

- + diff --git a/packages/lexical/src/examples/App2.tsx b/packages/lexical/src/examples/App2.tsx index 818c17e1..22ac8288 100644 --- a/packages/lexical/src/examples/App2.tsx +++ b/packages/lexical/src/examples/App2.tsx @@ -93,7 +93,7 @@ const Tabs = () => { id={NOTEBOOK_UID} nbformat={notebookContent} CellSidebar={CellSidebar} - /> + /> \n };"""\nConfettiWidget()', + `import ipyreact +class ConfettiWidget(ipyreact.ReactWidget): + _esm = """ + import confetti from "canvas-confetti"; + import * as React from "react"; + + export default function({value, set_value, debug}) { + return + };""" +ConfettiWidget()', }, { metadata: {}, cell_type: 'code', outputs: [], source: - 'import plotly.express as px\ndf = px.data.stocks()\nfig = px.line(df, x="date", y=df.columns,\n hover_data={"date": "|%B %d, %Y"},\n title=\'custom tick labels\')\nfig.update_xaxes(\n dtick="M1",\n tickformat="%b %Y",\n range=["2018-01-01", "2018-12-31"])\nfig.show()', + 'import plotly.express as px +df = px.data.stocks() +fig = px.line(df, x="date", y=df.columns, + hover_data={"date": "|%B %d, %Y"}, + title=\'custom tick labels\') +fig.update_xaxes( + dtick="M1", + tickformat="%b %Y", + range=["2018-01-01", "2018-12-31"]) +fig.show()`, }, { metadata: {}, cell_type: 'code', outputs: [], source: - 'from matplotlib import pyplot as plt\nimport numpy as np\n%matplotlib widget\nx = np.linspace(0, 1, 100)\ny = 0.2+0.4*x**2+0.3*x*np.sin(15*x)+0.05*np.cos(50*x)\nplt.figure(figsize=(6, 6))\nplt.plot(x, y)', + `from matplotlib import pyplot as plt +import numpy as np +%matplotlib widget +x = np.linspace(0, 1, 100) +y = 0.2+0.4*x**2+0.3*x*np.sin(15*x)+0.05*np.cos(50*x) +plt.figure(figsize=(6, 6)) +plt.plot(x, y)`, }, ], metadata: { @@ -175,7 +222,14 @@ const INIT_EXAMPLE = { }, outputs: [], source: - "import piplite\nawait piplite.install('ipywidgets')\nawait piplite.install('bqplot')\nawait piplite.install('ipyleaflet')\nawait piplite.install('ipyreact')\nawait piplite.install('plotly')\nawait piplite.install('nbformat')\nawait piplite.install('ipympl')", + `import micropip +await micropip.install('ipywidgets') +await micropip.install('bqplot') +await micropip.install('ipyleaflet') +await micropip.install('ipyreact') +await micropip.install('plotly') +await micropip.install('nbformat') +await micropip.install('ipympl')`, }, ...WIDGETS_EXAMPLE.cells, ], @@ -219,6 +273,13 @@ LitePythonInit.args = { ...Default.args, browser: 'true', initCode: - "import piplite\nawait piplite.install('ipywidgets')\nawait piplite.install('bqplot')\nawait piplite.install('ipyleaflet')\nawait piplite.install('ipyreact')\nawait piplite.install('plotly')\nawait piplite.install('nbformat')\nawait piplite.install('ipympl')", + `import micropip +await micropip.install('ipywidgets') +await micropip.install('bqplot') +await micropip.install('ipyleaflet') +await micropip.install('ipyreact') +await micropip.install('plotly') +await micropip.install('nbformat') +await micropip.install('ipympl')`, nbformat: WIDGETS_EXAMPLE, }; diff --git a/packages/react/stories/Notebook.test.ts b/packages/react/stories/Notebook.test.ts index 52f24b31..544b22ba 100644 --- a/packages/react/stories/Notebook.test.ts +++ b/packages/react/stories/Notebook.test.ts @@ -35,7 +35,7 @@ test('Lite Python', async ({ page }) => { 'http://localhost:6006/iframe.html?id=components-notebook--lite-python' ); - await page.getByText('import piplite').click(); + await page.getByText('import micropip').click(); await page.keyboard.press('Escape'); await page.keyboard.press('Shift+Enter'); await page.getByText('[1]:').waitFor(); diff --git a/packages/react/stories/Terminal.stories.tsx b/packages/react/stories/Terminal.stories.tsx index 5cb5993f..66038579 100644 --- a/packages/react/stories/Terminal.stories.tsx +++ b/packages/react/stories/Terminal.stories.tsx @@ -5,7 +5,7 @@ */ import type { Meta, StoryObj } from '@storybook/react'; -import { Jupyter, JupyterProps, Terminal } from '@datalayer/jupyter-react'; +import { Jupyter, Terminal } from '@datalayer/jupyter-react'; import React from 'react'; const meta: Meta = { @@ -15,7 +15,7 @@ const meta: Meta = { // height: { // type: 'string', // }, - colorMode: { + colormode: { options: ['dark', 'light'], }, }, @@ -41,14 +41,14 @@ const Template = (args, { globals: { labComparison } }) => { export const Default: Story = Template.bind({}); Default.args = { height: '800px', - colorMode: 'light', + colormode: 'light', }; export const Playground: Story = Template.bind({}); Playground.args = { ...Default.args, height: '800px', - colorMode: 'dark', + colormode: 'dark', }; export const WithInitialization: Story = Template.bind({}); diff --git a/packages/react/webpack.config.js b/packages/react/webpack.config.js index c3c0c87f..e79067f5 100644 --- a/packages/react/webpack.config.js +++ b/packages/react/webpack.config.js @@ -41,6 +41,7 @@ const ENTRY = // './src/examples/KernelExecute'; // './src/examples/KernelExecutor'; // './src/examples/Kernels'; + // './src/examples/Localhost'; // './src/examples/Lumino'; // './src/examples/Matplotlib'; // './src/examples/Notebook'; @@ -78,8 +79,14 @@ const ENTRY = // './src/examples/Viewer'; const IS_JUPYTER_SERVER_LOCAL = process.env.LOCAL_JUPYTER_SERVER == 'true'; -// const JUPYTER_HOST = IS_JUPYTER_SERVER_LOCAL ? "http://localhost:8686" : "https://oss.datalayer.run'; -const INDEX_PAGE = IS_JUPYTER_SERVER_LOCAL ? 'index-local.html' : 'index.html'; +const IS_NO_CONFIG = process.env.NO_CONFIG == 'true'; +const INDEX_PAGE = IS_JUPYTER_SERVER_LOCAL ? + 'index-local.html' + : + IS_NO_CONFIG ? + 'index-noconfig.html' + : + 'index.html'; const IS_PRODUCTION = process.argv.indexOf('--mode=production') > -1; const mode = IS_PRODUCTION ? 'production' : 'development'; const devtool = IS_PRODUCTION ? false : 'inline-source-map'; diff --git a/storybook/package.json b/storybook/package.json index c7a7d6c5..cae4adaf 100644 --- a/storybook/package.json +++ b/storybook/package.json @@ -21,6 +21,7 @@ }, "packageManager": "yarn@3.5.0", "scripts": { + "start": "storybook dev -p 6006", "storybook": "storybook dev -p 6006", "storybook:ci": "storybook dev -p 6006 --ci --quiet", "build:storybook": "storybook build" diff --git a/storybook/src/stories/Cell.stories.tsx b/storybook/src/stories/Cell.stories.tsx index ad7b1ac5..c3dbce0c 100644 --- a/storybook/src/stories/Cell.stories.tsx +++ b/storybook/src/stories/Cell.stories.tsx @@ -6,7 +6,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Jupyter, Cell } from '@datalayer/jupyter-react'; -import { colorModeFromScheme } from './_utils/story-helpers'; +import { colormodeFromScheme } from './_utils/story-helpers'; const meta: Meta = { title: 'Components/Cell', @@ -54,9 +54,10 @@ const Template = (args, { globals: { colorScheme } }) => { return ( @@ -34,6 +35,7 @@ To use the [Pyodide](https://pyodide.org/) Python [kernel](https://github.com/ju you can simply set `lite` to `true`: @@ -43,6 +45,7 @@ But you can also load your own JupyterLite kernel. For example here, the console the [JavaScript kernel](https://github.com/jupyterlite/jupyterlite/tree/main/py/jupyterlite-javascript-kernel). diff --git a/storybook/src/stories/Console.stories.tsx b/storybook/src/stories/Console.stories.tsx index 78868e9c..823d9f3e 100644 --- a/storybook/src/stories/Console.stories.tsx +++ b/storybook/src/stories/Console.stories.tsx @@ -4,7 +4,6 @@ * MIT License */ -import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { Jupyter, Console } from '@datalayer/jupyter-react'; @@ -56,6 +55,7 @@ const Template = (args, { globals: { labComparison } }) => { return ( { ); }; -export const Default: Story = Template.bind({}); +export const Default: Story = Template.bind({}) as Story; Default.args = { browser: 'false', @@ -75,13 +75,13 @@ Default.args = { code: "print('👋 Hello Jupyter Console')", }; -export const LitePython: Story = Template.bind({}); +export const LitePython: Story = Template.bind({}) as Story; LitePython.args = { ...Default.args, browser: 'true', }; -export const LiteJavascript: Story = Template.bind({}); +export const LiteJavascript: Story = Template.bind({}) as Story; LiteJavascript.args = { ...Default.args, browser: '@jupyterlite/javascript-kernel-extension', diff --git a/storybook/src/stories/FileManager.stories.tsx b/storybook/src/stories/FileManager.stories.tsx index 3384f0d5..c2c83ba1 100644 --- a/storybook/src/stories/FileManager.stories.tsx +++ b/storybook/src/stories/FileManager.stories.tsx @@ -29,7 +29,7 @@ const Template = (args, { globals: { labComparison } }) => { ); }; -export const Default: Story = Template.bind({}); +export const Default: Story = Template.bind({}) as Story; export const Playground: Story = { render: (args, options) => Template.bind({})({ }, { globals: { labComparison: true } }), diff --git a/storybook/src/stories/Heading.stories.tsx b/storybook/src/stories/Heading.stories.tsx index 4de6f79f..ebdf307e 100644 --- a/storybook/src/stories/Heading.stories.tsx +++ b/storybook/src/stories/Heading.stories.tsx @@ -44,9 +44,9 @@ const Template = (args, { globals: { labComparison } }) => { ); }; -export const Default: Story = Template.bind({}); +export const Default: Story = Template.bind({}) as Story; -export const Playground: Story = Template.bind({}); +export const Playground: Story = Template.bind({}) as Story; Playground.args = { as: 'h2', }; diff --git a/storybook/src/stories/Icon.stories.tsx b/storybook/src/stories/Icon.stories.tsx index d9cc3601..1d05281e 100644 --- a/storybook/src/stories/Icon.stories.tsx +++ b/storybook/src/stories/Icon.stories.tsx @@ -42,22 +42,22 @@ const Template = (args, { globals: { labComparison } }) => { ); }; -export const Default: Story = Template.bind({}); +export const Default: Story = Template.bind({}) as Story; Default.args = { icon: 'undo', }; -export const Playground: Story = Template.bind({}); +export const Playground: Story = Template.bind({}) as Story; Playground.args = { ...Default.args, }; -export const Copyright: Story = Template.bind({}); +export const Copyright: Story = Template.bind({}) as Story; Copyright.args = { icon: 'copyright', }; -export const Undo: Story = Template.bind({}); +export const Undo: Story = Template.bind({}) as Story; Undo.args = { icon: 'undo', }; diff --git a/storybook/src/stories/Notebook.stories.tsx b/storybook/src/stories/Notebook.stories.tsx index bd5212e8..09b051c6 100644 --- a/storybook/src/stories/Notebook.stories.tsx +++ b/storybook/src/stories/Notebook.stories.tsx @@ -46,6 +46,7 @@ const Template = (args, { globals: { labComparison = true }, ...rest }) => { return ( confetti() && set_value(value + 1)}>\n {value || 0} times confetti\n \n };"""\nConfettiWidget()', + source: `import ipyreact +class ConfettiWidget(ipyreact.ReactWidget): + _esm = """ + import confetti from "canvas-confetti"; + import * as React from "react"; + + export default function({value, set_value, debug}) { + return + };""" +ConfettiWidget()`, }, { metadata: {}, cell_type: 'code', outputs: [], - source: - 'import plotly.express as px\ndf = px.data.stocks()\nfig = px.line(df, x="date", y=df.columns,\n hover_data={"date": "|%B %d, %Y"},\n title=\'custom tick labels\')\nfig.update_xaxes(\n dtick="M1",\n tickformat="%b %Y",\n range=["2018-01-01", "2018-12-31"])\nfig.show()', + source: `import plotly.express as px +df = px.data.stocks() +fig = px.line(df, x="date", y=df.columns, + hover_data={"date": "|%B %d, %Y"}, + title=\'custom tick labels\') +fig.update_xaxes( + dtick="M1", + tickformat="%b %Y", + range=["2018-01-01", "2018-12-31"]) +fig.show()`, }, { metadata: {}, cell_type: 'code', outputs: [], - source: - 'from matplotlib import pyplot as plt\nimport numpy as np\n%matplotlib widget\nx = np.linspace(0, 1, 100)\ny = 0.2+0.4*x**2+0.3*x*np.sin(15*x)+0.05*np.cos(50*x)\nplt.figure(figsize=(6, 6))\nplt.plot(x, y)', + source: `from matplotlib import pyplot as plt +import numpy as np +%matplotlib widget +x = np.linspace(0, 1, 100) +y = 0.2+0.4*x**2+0.3*x*np.sin(15*x)+0.05*np.cos(50*x) +plt.figure(figsize=(6, 6)) +plt.plot(x, y)`, }, ], metadata: { @@ -174,8 +216,14 @@ const INIT_EXAMPLE = { trusted: false, }, outputs: [], - source: - "import piplite\nawait piplite.install('ipywidgets')\nawait piplite.install('bqplot')\nawait piplite.install('ipyleaflet')\nawait piplite.install('ipyreact')\nawait piplite.install('plotly')\nawait piplite.install('nbformat')\nawait piplite.install('ipympl')", + source: `import micropip +await micropip.install('ipywidgets') +await micropip.install('bqplot') +await micropip.install('ipyleaflet') +await micropip.install('ipyreact') +await micropip.install('plotly') +await micropip.install('nbformat') +await micropip.install('ipympl')`, }, ...WIDGETS_EXAMPLE.cells, ], @@ -218,7 +266,13 @@ export const LitePythonInit: Story = { LitePythonInit.args = { ...Default.args, browser: 'true', - initCode: - "import piplite\nawait piplite.install('ipywidgets')\nawait piplite.install('bqplot')\nawait piplite.install('ipyleaflet')\nawait piplite.install('ipyreact')\nawait piplite.install('plotly')\nawait piplite.install('nbformat')\nawait piplite.install('ipympl')", + initCode: `import micropip +await micropip.install('ipywidgets') +await micropip.install('bqplot') +await micropip.install('ipyleaflet') +await micropip.install('ipyreact') +await micropip.install('plotly') +await micropip.install('nbformat') +await micropip.install('ipympl')`, nbformat: WIDGETS_EXAMPLE, }; diff --git a/storybook/src/stories/RichEditor.stories.tsx b/storybook/src/stories/RichEditor.stories.tsx index 0d9606a6..33d59c55 100644 --- a/storybook/src/stories/RichEditor.stories.tsx +++ b/storybook/src/stories/RichEditor.stories.tsx @@ -25,6 +25,6 @@ const Template = (args, { globals: { labComparison } }) => { ); }; -export const Default: Story = Template.bind({}); +export const Default: Story = Template.bind({}) as Story; Default.args = { }; diff --git a/storybook/src/stories/Terminal.stories.tsx b/storybook/src/stories/Terminal.stories.tsx index ce001f4a..ca761145 100644 --- a/storybook/src/stories/Terminal.stories.tsx +++ b/storybook/src/stories/Terminal.stories.tsx @@ -15,7 +15,7 @@ const meta: Meta = { // height: { // type: 'string', // }, - colorMode: { + colormode: { options: ['dark', 'light'], }, }, @@ -28,9 +28,9 @@ type Story = StoryObj; const Template = (args, { globals: { labComparison } }) => { return ( @@ -38,20 +38,20 @@ const Template = (args, { globals: { labComparison } }) => { ); }; -export const Default: Story = Template.bind({}); +export const Default: Story = Template.bind({}) as Story; Default.args = { height: '800px', - colorMode: 'light', + colormode: 'light', }; -export const Playground: Story = Template.bind({}); +export const Playground: Story = Template.bind({}) as Story; Playground.args = { ...Default.args, height: '800px', - colorMode: 'dark', + colormode: 'dark', }; -export const WithInitialization: Story = Template.bind({}); +export const WithInitialization: Story = Template.bind({}) as Story; WithInitialization.args = { ...Default.args, initCode: 'echo "Hello from shell $0"', diff --git a/storybook/src/stories/Text.stories.tsx b/storybook/src/stories/Text.stories.tsx index d0d4f830..115764ee 100644 --- a/storybook/src/stories/Text.stories.tsx +++ b/storybook/src/stories/Text.stories.tsx @@ -27,9 +27,9 @@ const Template = (args, { globals: { labComparison } }) => { ); }; -export const Default: Story = Template.bind({}); +export const Default: Story = Template.bind({}) as Story; -export const Playground: Story = Template.bind({}); +export const Playground: Story = Template.bind({}) as Story; Playground.args = { text: 'Playground', diff --git a/storybook/src/stories/TextInput.stories.tsx b/storybook/src/stories/TextInput.stories.tsx index b1ae65d7..d54fef09 100644 --- a/storybook/src/stories/TextInput.stories.tsx +++ b/storybook/src/stories/TextInput.stories.tsx @@ -34,7 +34,7 @@ const Template = (args, { globals: { labComparison } }) => { ); }; -export const Default = Template.bind({}); +export const Default = Template.bind({}) as Story; export const Playground: Story = { render: (args, options) => diff --git a/storybook/src/stories/Viewer.stories.tsx b/storybook/src/stories/Viewer.stories.tsx index a4d8fce5..0057fd1b 100644 --- a/storybook/src/stories/Viewer.stories.tsx +++ b/storybook/src/stories/Viewer.stories.tsx @@ -45,25 +45,25 @@ const Template = (args, { globals: { labComparison } }) => { ); }; -export const Default: Story = Template.bind({}); +export const Default: Story = Template.bind({}) as Story; Default.args = { nbformat: nbformat1, outputs: true, }; -export const ViewerSimple: Story = Template.bind({}); +export const ViewerSimple: Story = Template.bind({}) as Story; ViewerSimple.args = { nbformat: nbformat2, outputs: true, }; /* -export const ViewerPlotly: Story = Template.bind({}); +export const ViewerPlotly: Story = Template.bind({}) as Story; ViewerPlotly.args = { nbformatUrl: "https://raw.githubusercontent.com/datalayer-examples/notebooks/main/daily-stock.ipynb", outputs: true }; */ -export const ViewerMatplotlib: Story = Template.bind({}); +export const ViewerMatplotlib: Story = Template.bind({}) as Story; ViewerMatplotlib.args = { nbformatUrl: 'https://raw.githubusercontent.com/anissa111/matplotlib-tutorial/main/notebooks/01-basic-matplotlib-tutorial.ipynb', diff --git a/storybook/src/stories/Welcome.mdx b/storybook/src/stories/Welcome.mdx index f02f4a9c..fd407774 100644 --- a/storybook/src/stories/Welcome.mdx +++ b/storybook/src/stories/Welcome.mdx @@ -7,7 +7,6 @@ import { Canvas, Meta } from '@storybook/blocks'; import * as NotebookStories from './Notebook.stories'; -import * as CellStories from './Cell.stories'; import * as ButtonStories from './Button.stories'; @@ -20,10 +19,6 @@ React.js components 💯% compatible with 🪐 Jupyter. -## Cell - - - ## Button diff --git a/storybook/src/stories/_utils/story-helpers.tsx b/storybook/src/stories/_utils/story-helpers.tsx index 7ddc4beb..b28b8e9c 100644 --- a/storybook/src/stories/_utils/story-helpers.tsx +++ b/storybook/src/stories/_utils/story-helpers.tsx @@ -28,7 +28,7 @@ const GlobalStyle = createGlobalStyle` } `; -export const colorModeFromScheme = (colorScheme: string) => { +export const colormodeFromScheme = (colorScheme: string) => { return colorScheme.startsWith('light') ? 'light' : 'dark' } @@ -42,7 +42,7 @@ export const withThemeProvider = ( return (