Prettify

Author: fcollonval

.eslintrc.js

@@ -15,11 +15,11 @@ module.exports = {
     '@typescript-eslint/naming-convention': [
       'error',
       {
-        'selector': 'interface',
-        'format': ['PascalCase'],
-        'custom': {
-          'regex': '^I[A-Z]',
-          'match': true
+        selector: 'interface',
+        format: ['PascalCase'],
+        custom: {
+          regex: '^I[A-Z]',
+          match: true
         }
       }
     ],
@@ -36,12 +36,12 @@ module.exports = {
     eqeqeq: 'error',
     'prefer-arrow-callback': 'error'
   },
-	overrides: [
-		{
-			files: ['*.ts'],
-			parserOptions: {
-				project: ['./tsconfig.eslint.json'],
-			},
-		},
-	],
+  overrides: [
+    {
+      files: ['*.ts'],
+      parserOptions: {
+        project: ['./tsconfig.eslint.json']
+      }
+    }
+  ]
 };

CONTRIBUTING.md

@@ -1,5 +1,4 @@
-Contributing to JupyterLab
-==========================
+# Contributing to JupyterLab
 
 If you're reading this section, you're probably interested in
 contributing to JupyterLab. Welcome and thanks for your interest in
@@ -8,52 +7,43 @@ contributing!
 Please take a look at the Contributor documentation, familiarize
 yourself with using JupyterLab, and introduce yourself to the community
 (on the mailing list or discourse) and share what area of the project
-you are interested in working on. Please also see the Jupyter `Community
-Guides <https://jupyter.readthedocs.io/en/latest/community/content-community.html>`__.
+you are interested in working on. Please also see the Jupyter `Community Guides <https://jupyter.readthedocs.io/en/latest/community/content-community.html>`\_\_.
 
-We have labeled some issues as `good first
-issue <https://github.com/jupyterlab/jupyterlab/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22>`__
-or `help
-wanted <https://github.com/jupyterlab/jupyterlab/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22>`__
+We have labeled some issues as `good first issue <https://github.com/jupyterlab/jupyterlab/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22>`**
+or `help wanted <https://github.com/jupyterlab/jupyterlab/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22>`**
 that we believe are good examples of small, self-contained changes. We
 encourage those that are new to the code base to implement and/or ask
 questions about these issues.
 
 If you believe you’ve found a security vulnerability in JupyterLab or
 any Jupyter project, please report it to security@ipython.org. If you
-prefer to encrypt your security reports, you can use `this PGP public
-key <https://raw.githubusercontent.com/jupyter/notebook/master/docs/source/ipython_security.asc>`__.
+prefer to encrypt your security reports, you can use `this PGP public key <https://raw.githubusercontent.com/jupyter/notebook/master/docs/source/ipython_security.asc>`\_\_.
 
 .. contents:: Table of contents
-    :local:
-    :depth: 1
+:local:
+:depth: 1
 
-General Guidelines for Contributing
------------------------------------
+## General Guidelines for Contributing
 
 For general documentation about contributing to Jupyter projects, see
-the `Project Jupyter Contributor
-Documentation <https://jupyter.readthedocs.io/en/latest/contributing/content-contributor.html>`__
-and `Code of
-Conduct <https://github.com/jupyter/governance/blob/master/conduct/code_of_conduct.md>`__.
+the `Project Jupyter Contributor Documentation <https://jupyter.readthedocs.io/en/latest/contributing/content-contributor.html>`**
+and `Code of Conduct <https://github.com/jupyter/governance/blob/master/conduct/code_of_conduct.md>`**.
 
 All source code is written in
-`TypeScript <https://www.typescriptlang.org/Handbook>`__. See the `Style
-Guide <https://github.com/jupyterlab/jupyterlab/wiki/TypeScript-Style-Guide>`__.
+`TypeScript <https://www.typescriptlang.org/Handbook>`**. See the `Style Guide <https://github.com/jupyterlab/jupyterlab/wiki/TypeScript-Style-Guide>`**.
 
-All source code is formatted using `prettier <https://prettier.io>`__. 
+All source code is formatted using `prettier <https://prettier.io>`\_\_.
 The benefit of using a code formatter like prettier is that it removes the topic of
 code style from the conversation when reviewing pull requests, thereby
 speeding up the review process.
 
-You may use the prettier npm script (e.g. ``npm run prettier`` or
-``yarn prettier``) to format the entire code base.
+You may use the prettier npm script (e.g. `npm run prettier` or
+`yarn prettier`) to format the entire code base.
 We recommend installing a prettier extension for your code editor and
 configuring it to format your code with a keyboard shortcut or
 automatically on save.
 
-Submitting a Pull Request Contribution
---------------------------------------
+## Submitting a Pull Request Contribution
 
 Generally, an issue should be opened describing a piece of proposed work
 and the issues it solves before a pull request is opened.

README.md

@@ -2,7 +2,7 @@
 
 **WIP this is very early work in progress and nothing is yet working.** But don't hesitate to open issues and PRs if you want to help.
 
-![Extension status](https://img.shields.io/badge/status-draft-critical "Not yet working")
+![Extension status](https://img.shields.io/badge/status-draft-critical 'Not yet working')
 [![NPM Version](https://img.shields.io/npm/v/@jupyter-notebook/ui-components?color=blue)](https://www.npmjs.com/package/@jupyter-notebook/ui-components)
 ![Toolkit CI Status](https://github.com/jupyterlab-contrib/jupyter-ui-toolkit/actions/workflows/ci.yml/badge.svg)
 ![Deploy Docs Status](https://github.com/jupyterlab-contrib/jupyter-ui-toolkit/actions/workflows/docs-cd.yml/badge.svg)
@@ -16,10 +16,10 @@ The UI Toolkit is a component library for building web interfaces in Jupyter eco
 
 Features of the library include:
 
--   **Implements the Jupyter design language:** All components follow the design language of Jupyter – enabling developers to create extensions that have a consistent look and feel with the rest of the ecosystem.
--   **Automatic support for color themes:** All components are designed with theming in mind and will automatically display the current application theme.
--   **Use any tech stack:** The library ships as a set of web components, meaning developers can use the toolkit no matter what tech stack (React, Vue, Svelte, etc.) their extension is built with.
--   **Accessible out of the box:** All components ship with web standard compliant ARIA labels and keyboard navigation.
+- **Implements the Jupyter design language:** All components follow the design language of Jupyter – enabling developers to create extensions that have a consistent look and feel with the rest of the ecosystem.
+- **Automatic support for color themes:** All components are designed with theming in mind and will automatically display the current application theme.
+- **Use any tech stack:** The library ships as a set of web components, meaning developers can use the toolkit no matter what tech stack (React, Vue, Svelte, etc.) their extension is built with.
+- **Accessible out of the box:** All components ship with web standard compliant ARIA labels and keyboard navigation.
 
 Note this project started as a fork of the [WebView toolkit for Visual Studio Code](https://github.com/microsoft/vscode-webview-ui-toolkit) (licensed under MIT) on which Jupyter design specification. The fundamental technology used is [Fast Design](https://www.fast.design/).
 
@@ -44,9 +44,9 @@ npm install --save @vscode/webview-ui-toolkit
 
 Further documentation can be found in the following places:
 
--   [Component Docs](./packages/components/docs/components.md)
--   [Storybook (Interactive Component Sandbox)](https://microsoft.github.io/vscode-webview-ui-toolkit/)
--   [Toolkit Extension Samples](./packages/lab-example)
+- [Component Docs](./packages/components/docs/components.md)
+- [Storybook (Interactive Component Sandbox)](https://microsoft.github.io/vscode-webview-ui-toolkit/)
+- [Toolkit Extension Samples](./packages/lab-example)
 
 ## Contributing
 

packages/components/.storybook/customTheme.js

@@ -1,7 +1,7 @@
-import {create} from '@storybook/theming/create';
+import { create } from '@storybook/theming/create';
 
 export default create({
-	base: 'light',
-	brandTitle: 'Jupyter UI Toolkit',
-	brandUrl: 'https://github.com/jupyterlab-contrib/jupyter-ui-toolkit',
+  base: 'light',
+  brandTitle: 'Jupyter UI Toolkit',
+  brandUrl: 'https://github.com/jupyterlab-contrib/jupyter-ui-toolkit'
 });

packages/components/.storybook/main.js

@@ -1,18 +1,18 @@
 module.exports = {
-	core: {
-	  builder: 'webpack5',
-	},
-	stories: [
-		'../src/**/*.stories.mdx',
-		'../src/**/*.stories.@(js|jsx|ts|tsx)',
-		'../docs/**/*.stories.mdx',
-	],
-	addons: [
-		'@storybook/addon-links',
-		'@storybook/addon-essentials',
-		'@storybook/addon-a11y',
-	],
-	features: {
-		postcss: false,
-	},
+  core: {
+    builder: 'webpack5'
+  },
+  stories: [
+    '../src/**/*.stories.mdx',
+    '../src/**/*.stories.@(js|jsx|ts|tsx)',
+    '../docs/**/*.stories.mdx'
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-a11y'
+  ],
+  features: {
+    postcss: false
+  }
 };

packages/components/.storybook/manager.js

@@ -1,16 +1,16 @@
-import {addons} from '@storybook/addons';
+import { addons } from '@storybook/addons';
 import customTheme from './customTheme';
 
 addons.setConfig({
-	isFullscreen: false,
-	showNav: true,
-	showPanel: true,
-	panelPosition: 'bottom',
-	sidebarAnimations: true,
-	enableShortcuts: false,
-	isToolshown: true,
-	theme: customTheme,
-	selectedPanel: undefined,
-	initialActive: 'sidebar',
-	showRoots: true,
+  isFullscreen: false,
+  showNav: true,
+  showPanel: true,
+  panelPosition: 'bottom',
+  sidebarAnimations: true,
+  enableShortcuts: false,
+  isToolshown: true,
+  theme: customTheme,
+  selectedPanel: undefined,
+  initialActive: 'sidebar',
+  showRoots: true
 });

packages/components/.storybook/preview.js

@@ -1,35 +1,35 @@
 import * as JupyterComponents from '../src/index-rollup';
-import {themes} from '@storybook/theming';
+import { themes } from '@storybook/theming';
 
 JupyterComponents;
 
 export const parameters = {
-	actions: {argTypesRegex: '^on[A-Z].*'},
-	options: {
-		storySort: {
-			order: ['Docs', 'Library'],
-		},
-		isToolshown: true,
-		enableShortcuts: false,
-	},
-	docs: {
-		theme: themes.light,
-	},
-	backgrounds: {
-		default: 'dark',
-		values: [
-			{
-				name: 'light',
-				value: '#f9f9f9',
-			},
-			{
-				name: 'grey',
-				value: '#929396',
-			},
-			{
-				name: 'dark',
-				value: '#252526',
-			},
-		],
-	},
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  options: {
+    storySort: {
+      order: ['Docs', 'Library']
+    },
+    isToolshown: true,
+    enableShortcuts: false
+  },
+  docs: {
+    theme: themes.light
+  },
+  backgrounds: {
+    default: 'dark',
+    values: [
+      {
+        name: 'light',
+        value: '#f9f9f9'
+      },
+      {
+        name: 'grey',
+        value: '#929396'
+      },
+      {
+        name: 'dark',
+        value: '#252526'
+      }
+    ]
+  }
 };

packages/components/api-extractor.json

@@ -1,16 +1,16 @@
 {
-	"$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
-	"mainEntryPointFilePath": "dist/dts/index.d.ts",
-	"apiReport": {
-		"enabled": true,
-		"reportFolder": "docs",
-		"reportFileName": "api-report.md"
-	},
-	"docModel": {
-		"enabled": false
-	},
-	"dtsRollup": {
-		"enabled": true,
-		"untrimmedFilePath": "dist/toolkit.d.ts"
-	}
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+  "mainEntryPointFilePath": "dist/dts/index.d.ts",
+  "apiReport": {
+    "enabled": true,
+    "reportFolder": "docs",
+    "reportFileName": "api-report.md"
+  },
+  "docModel": {
+    "enabled": false
+  },
+  "dtsRollup": {
+    "enabled": true,
+    "untrimmedFilePath": "dist/toolkit.d.ts"
+  }
 }