|
| 1 | +# UI Toolkit for Jupyter |
| 2 | + |
| 3 | +**WIP this is early work in progress.** But don't hesitate to open issues and PRs if you want to |
| 4 | +help. |
| 5 | + |
| 6 | +[](https://jupyterlab-contrib.github.io/) |
| 7 | +[](https://www.npmjs.com/package/@jupyter-notebook/web-components) |
| 8 | +[](https://github.com/jupyterlab-contrib/jupyter-ui-toolkit/actions/workflows/ci.yml) |
| 9 | +[](https://jupyterlab-contrib.github.io/jupyter-ui-toolkit/) |
| 10 | +[](https://mybinder.org/v2/gh/jupyterlab-contrib/jupyter-ui-toolkit/main) |
| 11 | + |
| 12 | + |
| 13 | + |
| 14 | +## Introduction |
| 15 | + |
| 16 | +The UI Toolkit is a component library for building web interfaces in Jupyter ecosystem (JupyterHub, |
| 17 | +Jupyter Widgets, JupyterLab,...). |
| 18 | + |
| 19 | +Features of the library include: |
| 20 | + |
| 21 | +- **Implements the Jupyter design language:** All components follow the design language of Jupyter |
| 22 | + – enabling developers to create extensions that have a consistent look and feel with the rest of |
| 23 | + the ecosystem. |
| 24 | +- **Automatic support for color themes:** All components are designed with theming in mind and will |
| 25 | + automatically display the current application theme. |
| 26 | +- **Use any tech stack:** The library ships as a set of web components, meaning developers can use |
| 27 | + the toolkit no matter what tech stack (React, Vue, Svelte, etc.) their extension is built with. |
| 28 | +- **Accessible out of the box:** All components ship with web standard compliant ARIA labels and |
| 29 | + keyboard navigation. |
| 30 | + |
| 31 | +This repository contains three packages: |
| 32 | + |
| 33 | +- [`@jupyter-notebook/web-components`](https://github.com/jupyterlab-contrib/jupyter-ui-toolkit/tree/main/packages/components/): |
| 34 | + The main package defining the web components. |
| 35 | +- [`@jupyter-notebook/react-components`](https://github.com/jupyterlab-contrib/jupyter-ui-toolkit/tree/main/packages/react-components): |
| 36 | + Wrapped the web components to use them with [React](https://reactjs.org). |
| 37 | +- [`jupyter-ui-demo`](https://github.com/jupyterlab-contrib/jupyter-ui-toolkit/tree/main/packages/lab-example): |
| 38 | + Unpublished JupyterLab extension to demonstrate the integration of the toolkit. |
| 39 | + |
| 40 | +Those features are brought through the [Fast Design](https://www.fast.design/). And it is inspired |
| 41 | +by the [WebView toolkit for Visual Studio Code](https://github.com/microsoft/vscode-webview-ui-toolkit) |
| 42 | +as example for creating a customized toolkit. |
| 43 | + |
| 44 | +## Release |
| 45 | + |
| 46 | +The UI Toolkit is currently in a proof of concept. Track progress towards 1.0 [here](https://github.com/jupyterlab-contrib/jupyter-ui-toolkit/issues?q=is%3Aopen+is%3Aissue+milestone%3Av1.0). |
| 47 | +Styles and API are not guarantee between minor versions prior to v1.0.0. |
| 48 | + |
| 49 | +## Getting started |
| 50 | + |
| 51 | +You will need to install `yarn` (for example with `npm install --global yarn`). |
| 52 | + |
| 53 | +To build the components packages, execute: |
| 54 | + |
| 55 | +```sh |
| 56 | +yarn install |
| 57 | +yarn build |
| 58 | +``` |
| 59 | + |
| 60 | +Then to interactively test or develop web components: |
| 61 | + |
| 62 | +```sh |
| 63 | +cd packages/components |
| 64 | +yarn start |
| 65 | +``` |
| 66 | + |
| 67 | +### JupyterLab demo extension |
| 68 | + |
| 69 | +To test locally the JupyterLab demo extension, using `conda` package manager: |
| 70 | + |
| 71 | +```sh |
| 72 | +conda create -n jupyter-toolkit -c conda-forge -y nodejs yarn jupyterlab=3 |
| 73 | +conda activate jupyter-toolkit |
| 74 | +yarn install |
| 75 | +yarn build |
| 76 | +pip install -e . |
| 77 | +jupyter labextension develop --overwrite . |
| 78 | +``` |
| 79 | + |
| 80 | +## Documentation |
| 81 | + |
| 82 | +Further documentation can be found in the following places: |
| 83 | + |
| 84 | +- [Component Docs](https://github.com/jupyterlab-contrib/jupyter-ui-toolkit/tree/main/packages/components/docs/components.md) |
| 85 | +- [Storybook (Interactive Component Sandbox)](https://jupyterlab-contrib.github.io/jupyter-ui-toolkit/) |
| 86 | +- [Toolkit Extension Samples](https://github.com/jupyterlab-contrib/jupyter-ui-toolkit/tree/main/packages/lab-example): |
| 87 | + [Try online](https://mybinder.org/v2/gh/jupyterlab-contrib/jupyter-ui-toolkit/main) |
| 88 | + |
| 89 | +## Contributing |
| 90 | + |
| 91 | +See the [contributing](https://github.com/jupyterlab-contrib/jupyter-ui-toolkit/tree/main/CONTRIBUTING.md) documentation. |
0 commit comments