Added jupyterlab-toparea-text widget example.

[ericsnekbytes]

This adds the example toparea-text-widget from @jtpio's YouTube video. This example extension is a part of the JupyterLab Dual Compatibility Guide, and should be merged first before that document (as it depends on this example):

• Lab/NB7 extension compatibility docs jupyterlab#14838

[welcome]

Thanks for submitting your first pull request! You are awesome! 🤗

If you haven't done so already, check out Jupyter's Code of Conduct. Also, please make sure you followed the pull request template, as this will help us review your contribution more quickly.

You can meet the other Jovyans by joining our Discourse forum. There is also a intro thread there where you can stop by and say Hi! 👋

Welcome to the Jupyter community! 🎉

[fcollonval]

Thanks @ericsnekbytes

Could you add the new folder name in the following lists so it get taken into account:

• extension-examples/.github/workflows/main.yml

  Line 17 in eba1de1

  - codemirror-extension

• extension-examples/package.json

  Line 21 in eba1de1

  "codemirror-extension",

Could you also clear a bit the files to align with the other examples:

• .github folder
• binder folder
• CHANGELOG.md
• LICENSE
• RELEASE.md

I let you replace the README by some prose describing the purpose of the example (see other examples like commands or main-menu).

[ericsnekbytes]

Thanks @ericsnekbytes

Could you add the new folder name in the following lists so it get taken into account:

• extension-examples/.github/workflows/main.yml

  Line 17 in eba1de1

  - codemirror-extension

• extension-examples/package.json

  Line 21 in eba1de1

  "codemirror-extension",

Could you also clear a bit the files to align with the other examples:

• .github folder
• binder folder
• CHANGELOG.md
• LICENSE
• RELEASE.md

I let you replace the README by some prose describing the purpose of the example (see other examples like commands or main-menu).

This should be done.

[ericsnekbytes]

@fcollonval Can you re-review/approve this?

[fcollonval]

Thanks @ericsnekbytes

We want every examples to have integration tests to ease maintenance. Would you mind adding one?

It could be as simple as :

import { test, expect } from '@jupyterlab/galata';

test('should add a top area text', async ({ page }) => {
  await expect(page.locator('.jp-TopAreaText')).toHaveText('Hello World');
});

You can execute copier update . to rerun the extension template to generate the skeleton files for integration tests.

[ericsnekbytes]

Thanks @ericsnekbytes

We want every examples to have integration tests to ease maintenance. Would you mind adding one?

It could be as simple as :

import { test, expect } from '@jupyterlab/galata';

test('should add a top area text', async ({ page }) => {
  await expect(page.locator('.jp-TopAreaText')).toHaveText('Hello World');
});

You can execute copier update . to rerun the extension template to generate the skeleton files for integration tests.

I'll add this.

[ericsnekbytes]

@fcollonval If you have time to review I'd like to get this approved, the Dual Compatibility document (see top post description) depends on this example so this should be merged first. My plan now is to try to get the document and examples merged first, then do a follow-up PR for the unit tests and repo-referencing for the code snippets.

[krassowski]

We need to change this rule in config (in package JSON) here and in the template as it goes against our style conventions: https://jupyterlab.readthedocs.io/en/stable/developer/css.html#css-class-naming-conventions.

[fcollonval]

I opened jupyterlab/extension-template#52

[ericsnekbytes]

We had a conversation in JupyterLab gitter and I believe Mike was okay with this, for the sake of preserving the original video tutorial's code verbatim (to reduce differences and help beginners).

[krassowski]

Suggested change

/* stylelint-disable selector-class-pattern */

This can be removed given jupyterlab/extension-template#52, right?

[fcollonval]

Thanks @ericsnekbytes

Merging... the remaining issue is due to the JupyterLab documentation not yet available

[welcome]

Congrats on your first merged pull request in this project! 🎉

Thank you for contributing, we are very proud of you! ❤️