Skip to content

Commit 323e38b

Browse files
mahendrapaipurimahendrapaipuri
authored
Migrate to jupyter-ui-toolkit for Switch component (#127)
* chore: Migrate to jupyter-ui-toolkit for Switch component * Blueprintjs that is used until now is overriding the default body font of lab. This commit fixes it by replace Switch component from blueprintjs to jupyter-ui-toolkit Signed-off-by: Mahendra Paipuri <[email protected]> * build: Pin jupyter/react-components version * To ensure dependencies are satisfied with JupyterLab Signed-off-by: Mahendra Paipuri <[email protected]> * ci: Fix MacOS jobs * setup-python action does not support Python < 3.11 for MacOS runners based on Arm Signed-off-by: Mahendra Paipuri <[email protected]> * chore: Update yarn lock file * Use venv for all steps in packaging workflow Signed-off-by: Mahendra Paipuri <[email protected]> * fix: Check current theme and instantiate switch component correctly Signed-off-by: Mahendra Paipuri <[email protected]> * ci: Bump actions versions Signed-off-by: Mahendra Paipuri <[email protected]> * ci: Use unique artifact name for each extension Signed-off-by: Mahendra Paipuri <[email protected]> --------- Signed-off-by: Mahendra Paipuri <[email protected]>
1 parent 6a66ae7 commit 323e38b

File tree

8 files changed

+224
-504
lines changed

8 files changed

+224
-504
lines changed

‎.github/workflows/build.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ jobs:
2525

2626
steps:
2727
- name: Checkout
28-
uses: actions/checkout@v3
28+
uses: actions/checkout@v4
2929

3030
- name: Base Setup
3131
uses: jupyterlab/maintainer-tools/.github/actions/base-setup@v1

‎.github/workflows/check-release.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ jobs:
1111

1212
steps:
1313
- name: Checkout
14-
uses: actions/checkout@v3
14+
uses: actions/checkout@v4
1515

1616
- name: Base Setup
1717
uses: jupyterlab/maintainer-tools/.github/actions/base-setup@v1
@@ -22,7 +22,7 @@ jobs:
2222
token: ${{ secrets.GITHUB_TOKEN }}
2323

2424
- name: Upload Distributions
25-
uses: actions/upload-artifact@v3
25+
uses: actions/upload-artifact@v4
2626
with:
2727
name: jupyterlab-topbar-releaser-dist-${{ github.run_number }}
2828
path: .jupyter_releaser_checkout/dist

‎.github/workflows/packaging.yml‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ jobs:
2929

3030
steps:
3131
- name: Checkout
32-
uses: actions/checkout@v3
32+
uses: actions/checkout@v4
3333

3434
- name: Base Setup
3535
uses: jupyterlab/maintainer-tools/.github/actions/base-setup@v1
@@ -46,9 +46,9 @@ jobs:
4646
pip uninstall -y "jupyterlab_${{ matrix.name }}" jupyterlab
4747
4848
- name: Upload extension packages
49-
uses: actions/upload-artifact@v3
49+
uses: actions/upload-artifact@v4
5050
with:
51-
name: extension-artifacts
51+
name: ${{ matrix.extension }}-extension-artifacts
5252
path: packages/${{ matrix.extension }}-extension/dist/jupyterlab_${{ matrix.name }}*
5353
if-no-files-found: error
5454

@@ -85,25 +85,39 @@ jobs:
8585
py_cmd: python3
8686
- os: ubuntu
8787
py_cmd: python
88+
# actions/setup-python do not support MacOS runners based on ARM for Python < 3.11
89+
# https://github.com/actions/setup-python/issues/906
90+
exclude:
91+
- os: macos
92+
python: 3.8
8893

8994
steps:
9095
- name: Install Python
91-
uses: actions/setup-python@v4
96+
uses: actions/setup-python@v5
9297
with:
9398
python-version: ${{ matrix.python }}
9499
architecture: 'x64'
95100

96-
- uses: actions/download-artifact@v3
101+
- uses: actions/download-artifact@v4
97102
with:
98-
name: extension-artifacts
103+
name: ${{ matrix.extension }}-extension-artifacts
99104
path: packages/${{ matrix.extension }}-extension/dist
100105

106+
# Seems like we need to create a virtual env for MacOS runners as they are
107+
# based on ARM now. To avoid conditional logic, we create vritual envs for all
108+
# OS types
109+
- name: Create venv
110+
run: |
111+
${{ matrix.py_cmd }} -m venv venv
112+
101113
- name: Install prerequisites
102114
run: |
115+
source ./venv/bin/activate
103116
${{ matrix.py_cmd }} -m pip install pip wheel
104117
105118
- name: Install package
106119
run: |
120+
source ./venv/bin/activate
107121
cd packages/${{ matrix.extension }}-extension/dist
108122
${{ matrix.py_cmd }} -m pip install -vv ${{ matrix.dist }}
109123
@@ -114,5 +128,6 @@ jobs:
114128
115129
- name: Validate install
116130
run: |
131+
source ./venv/bin/activate
117132
jupyter labextension list
118133
jupyter labextension list 2>&1 | grep -ie "jupyterlab-${{ matrix.extension }}.*OK"

‎packages/theme-toggler-extension/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ Starting from JupyterLab 4.0, extension can be distributed as a Python package.
1919
Use version `1.0.0` as other versions are incompatible with JupyterLab 4
2020

2121
```bash
22-
pip install jupyterlab-theme-toggle==1.0.0
22+
pip install jupyterlab-theme-toggler==1.0.0
2323
```
2424

2525
### JupyterLab 2.x and 3.x

‎packages/theme-toggler-extension/package.json‎

Lines changed: 88 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,90 @@
11
{
2-
"name": "jupyterlab-theme-toggler",
3-
"version": "1.0.0",
4-
"description": "JupyterLab Toolbar Theme Toggler",
5-
"keywords": [
6-
"jupyter",
7-
"jupyterlab",
8-
"jupyterlab4",
9-
"jupyterlab-extension",
10-
"theme-toggler"
11-
],
12-
"homepage": "https://github.com/jupyterlab-contrib/jupyterlab-topbar",
13-
"bugs": {
14-
"url": "https://github.com/jupyterlab-contrib/jupyterlab-topbar/issues"
15-
},
16-
"license": "BSD-3-Clause",
17-
"author": {
18-
"name": "jupyterlab-topbar contributors"
19-
},
20-
"files": [
21-
"lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
22-
"style/**/*.{css,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
23-
"style/index.js"
24-
],
25-
"main": "lib/index.js",
26-
"types": "lib/index.d.ts",
27-
"repository": {
28-
"type": "git",
29-
"url": "https://github.com/jupyterlab-contrib/jupyterlab-topbar.git"
30-
},
31-
"scripts": {
32-
"build": "jlpm build:lib && jlpm build:labextension:dev",
33-
"build:labextension": "jupyter labextension build .",
34-
"build:labextension:dev": "jupyter labextension build --development True .",
35-
"build:lib": "tsc --sourceMap",
36-
"build:lib:prod": "tsc",
37-
"build:prod": "jlpm clean && jlpm build:lib:prod && jlpm build:labextension",
38-
"clean": "jlpm clean:lib",
39-
"clean:all": "jlpm clean:lib && jlpm clean:labextension && jlpm clean:lintcache",
40-
"clean:labextension": "rimraf jupyterlab_theme_toggler/labextension jupyterlab_theme_toggler/_version.py",
41-
"clean:lib": "rimraf lib tsconfig.tsbuildinfo",
42-
"clean:lintcache": "rimraf .eslintcache .stylelintcache",
43-
"eslint": "jlpm eslint:check --fix",
44-
"eslint:check": "eslint . --cache --ext .ts,.tsx",
45-
"install:extension": "jlpm build",
46-
"lint": "jlpm stylelint && jlpm prettier && jlpm eslint",
47-
"lint:check": "jlpm stylelint:check && jlpm prettier:check && jlpm eslint:check",
48-
"prettier": "jlpm prettier:base --write --list-different",
49-
"prettier:base": "prettier \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
50-
"prettier:check": "jlpm prettier:base --check",
51-
"stylelint": "jlpm stylelint:check --fix",
52-
"stylelint:check": "stylelint --cache \"style/**/*.css\"",
53-
"watch": "run-p watch:src watch:labextension",
54-
"watch:labextension": "jupyter labextension watch .",
55-
"watch:src": "tsc -w --sourceMap"
56-
},
57-
"dependencies": {
58-
"@blueprintjs/core": "^4.20.1",
59-
"@jupyterlab/application": "^4.0.0",
60-
"@jupyterlab/apputils": "^4.0.0",
61-
"react": "^18.2.0"
62-
},
63-
"devDependencies": {
64-
"@jupyterlab/builder": "^4.0.0",
65-
"@typescript-eslint/eslint-plugin": "^5.55.0",
66-
"@typescript-eslint/parser": "^5.55.0",
67-
"eslint": "^8.36.0",
68-
"eslint-config-prettier": "^8.7.0",
69-
"eslint-plugin-prettier": "^4.2.1",
70-
"npm-run-all": "^4.1.5",
71-
"prettier": "^2.8.4",
72-
"rimraf": "^4.4.0",
73-
"source-map-loader": "^1.0.2",
74-
"style-loader": "^3.3.1",
75-
"stylelint": "^14.9.1",
76-
"stylelint-config-prettier": "^9.0.4",
77-
"stylelint-config-recommended": "^8.0.0",
78-
"stylelint-config-standard": "^26.0.0",
79-
"stylelint-prettier": "^2.0.0",
80-
"typescript": "^5.0.1"
81-
},
82-
"jupyterlab": {
83-
"extension": true,
84-
"schemaDir": "schema",
85-
"outputDir": "jupyterlab_theme_toggler/labextension"
86-
},
87-
"publishConfig": {
88-
"access": "public"
89-
}
2+
"name": "jupyterlab-theme-toggler",
3+
"version": "1.0.0",
4+
"description": "JupyterLab Toolbar Theme Toggler",
5+
"keywords": [
6+
"jupyter",
7+
"jupyterlab",
8+
"jupyterlab4",
9+
"jupyterlab-extension",
10+
"theme-toggler"
11+
],
12+
"homepage": "https://github.com/jupyterlab-contrib/jupyterlab-topbar",
13+
"bugs": {
14+
"url": "https://github.com/jupyterlab-contrib/jupyterlab-topbar/issues"
15+
},
16+
"license": "BSD-3-Clause",
17+
"author": {
18+
"name": "jupyterlab-topbar contributors"
19+
},
20+
"files": [
21+
"lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
22+
"style/**/*.{css,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
23+
"style/index.js"
24+
],
25+
"main": "lib/index.js",
26+
"types": "lib/index.d.ts",
27+
"repository": {
28+
"type": "git",
29+
"url": "https://github.com/jupyterlab-contrib/jupyterlab-topbar.git"
30+
},
31+
"scripts": {
32+
"build": "jlpm build:lib && jlpm build:labextension:dev",
33+
"build:labextension": "jupyter labextension build .",
34+
"build:labextension:dev": "jupyter labextension build --development True .",
35+
"build:lib": "tsc --sourceMap",
36+
"build:lib:prod": "tsc",
37+
"build:prod": "jlpm clean && jlpm build:lib:prod && jlpm build:labextension",
38+
"clean": "jlpm clean:lib",
39+
"clean:all": "jlpm clean:lib && jlpm clean:labextension && jlpm clean:lintcache",
40+
"clean:labextension": "rimraf jupyterlab_theme_toggler/labextension jupyterlab_theme_toggler/_version.py",
41+
"clean:lib": "rimraf lib tsconfig.tsbuildinfo",
42+
"clean:lintcache": "rimraf .eslintcache .stylelintcache",
43+
"eslint": "jlpm eslint:check --fix",
44+
"eslint:check": "eslint . --cache --ext .ts,.tsx",
45+
"install:extension": "jlpm build",
46+
"lint": "jlpm stylelint && jlpm prettier && jlpm eslint",
47+
"lint:check": "jlpm stylelint:check && jlpm prettier:check && jlpm eslint:check",
48+
"prettier": "jlpm prettier:base --write --list-different",
49+
"prettier:base": "prettier \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
50+
"prettier:check": "jlpm prettier:base --check",
51+
"stylelint": "jlpm stylelint:check --fix",
52+
"stylelint:check": "stylelint --cache \"style/**/*.css\"",
53+
"watch": "run-p watch:src watch:labextension",
54+
"watch:labextension": "jupyter labextension watch .",
55+
"watch:src": "tsc -w --sourceMap"
56+
},
57+
"dependencies": {
58+
"@jupyter/react-components": "^0.15.3",
59+
"@jupyterlab/application": "^4.0.0",
60+
"@jupyterlab/apputils": "^4.0.0",
61+
"react": "^18.2.0"
62+
},
63+
"devDependencies": {
64+
"@jupyterlab/builder": "^4.0.0",
65+
"@typescript-eslint/eslint-plugin": "^5.55.0",
66+
"@typescript-eslint/parser": "^5.55.0",
67+
"eslint": "^8.36.0",
68+
"eslint-config-prettier": "^8.7.0",
69+
"eslint-plugin-prettier": "^4.2.1",
70+
"npm-run-all": "^4.1.5",
71+
"prettier": "^2.8.4",
72+
"rimraf": "^4.4.0",
73+
"source-map-loader": "^1.0.2",
74+
"style-loader": "^3.3.1",
75+
"stylelint": "^14.9.1",
76+
"stylelint-config-prettier": "^9.0.4",
77+
"stylelint-config-recommended": "^8.0.0",
78+
"stylelint-config-standard": "^26.0.0",
79+
"stylelint-prettier": "^2.0.0",
80+
"typescript": "^5.0.1"
81+
},
82+
"jupyterlab": {
83+
"extension": true,
84+
"schemaDir": "schema",
85+
"outputDir": "jupyterlab_theme_toggler/labextension"
86+
},
87+
"publishConfig": {
88+
"access": "public"
89+
}
9090
}

‎packages/theme-toggler-extension/src/index.tsx‎

Lines changed: 8 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,4 @@
1-
import {
2-
FocusStyleManager,
3-
Switch,
4-
SwitchProps as ISwitchProps,
5-
} from '@blueprintjs/core';
6-
7-
import '@blueprintjs/core/lib/css/blueprint.css';
1+
import { Switch } from '@jupyter/react-components';
82

93
import {
104
JupyterFrontEnd,
@@ -23,23 +17,16 @@ import '../style/index.css';
2317

2418
const themeTogglerPluginId = 'jupyterlab-theme-toggler:plugin';
2519

26-
FocusStyleManager.onlyShowFocusOnTabs();
27-
28-
interface IThemeSwitchProps extends ISwitchProps {
29-
title?: string;
20+
interface IThemeSwitchProps
21+
extends React.InputHTMLAttributes<HTMLInputElement> {
3022
themeManager: IThemeManager;
31-
dark?: boolean;
3223
}
3324

3425
const ThemeSwitch = (props: IThemeSwitchProps) => {
3526
const { themeManager, ...others } = props;
3627

3728
const [dark, setDark] = useState(false);
3829

39-
useEffect(() => {
40-
setDark(!!props.dark);
41-
}, [props.dark]);
42-
4330
const updateChecked = () => {
4431
const isDark = !themeManager.isLight(themeManager.theme);
4532
setDark(!!isDark);
@@ -56,20 +43,13 @@ const ThemeSwitch = (props: IThemeSwitchProps) => {
5643
updateChecked();
5744
}
5845
themeManager.themeChanged.connect(updateChecked);
59-
6046
return () => {
6147
clearTimeout(timeout);
6248
themeManager.themeChanged.disconnect(updateChecked);
6349
};
6450
});
6551

66-
return (
67-
<Switch
68-
{...others}
69-
checked={dark}
70-
className={props.className + ' jp-Switch'}
71-
/>
72-
);
52+
return <Switch {...others} aria-checked={dark} />;
7353
};
7454

7555
const extension: JupyterFrontEndPlugin<void> = {
@@ -102,12 +82,10 @@ const extension: JupyterFrontEndPlugin<void> = {
10282
if (toolbarRegistry) {
10383
toolbarRegistry.addFactory('TopBar', 'theme-toggler', () => {
10484
const widget = ReactWidget.create(
105-
<ThemeSwitch
106-
themeManager={themeManager}
107-
onChange={onChange}
108-
innerLabel="light"
109-
innerLabelChecked="dark"
110-
/>
85+
<ThemeSwitch themeManager={themeManager} onChange={onChange}>
86+
<span slot="unchecked-message">Light</span>
87+
<span slot="checked-message">Dark</span>
88+
</ThemeSwitch>
11189
);
11290
return widget;
11391
});

‎packages/theme-toggler-extension/style/base.css‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
.jp-Switch {
2-
margin-bottom: 0;
3-
}
4-
5-
.jp-Switch.bp3-control .bp3-control-indicator {
6-
margin-right: 0;
1+
/* To increase the slider size */
2+
.jp-Toolbar .jp-Toolbar-item {
3+
--density: 0;
74
}

0 commit comments

Comments
 (0)