Browse Source

Add a theme creator and test

Steven Silvester 7 years ago
parent
commit
a9bd71a1b5

+ 104 - 0
buildutils/src/create-theme.ts

@@ -0,0 +1,104 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+import * as fs from 'fs-extra';
+import * as inquirer from 'inquirer';
+import * as path from 'path';
+import * as utils from './utils';
+
+let questions = [
+  {
+    type: 'input',
+    name: 'name',
+    message: 'name: '
+  },
+  {
+    type: 'input',
+    name: 'title',
+    message: 'title: '
+  },
+  {
+    type: 'input',
+    name: 'description',
+    message: 'description: '
+  }
+];
+
+
+const template = `
+import {
+  JupyterLab, JupyterLabPlugin
+} from '@jupyterlab/application';
+
+import {
+  IThemeManager
+} from '@jupyterlab/apputils';
+
+
+/**
+ * A plugin for the {{title}}
+ */
+const plugin: JupyterLabPlugin<void> = {
+  id: '{{name}}:plugin',
+  requires: [IThemeManager],
+  activate: function(app: JupyterLab, manager: IThemeManager) {
+    manager.register({
+      name: '{{title}}',
+      load: function() {
+        // Load the optional monospace font for the input/output prompt.
+        manager.loadCSS('https://fonts.googleapis.com/css?family=Roboto+Mono');
+        return manager.loadCSS('{{name}}/index.css');
+      },
+      unload: function() {
+        return Promise.resolve(void 0);
+      }
+    });
+  },
+  autoStart: true
+};
+
+
+export default plugin;
+`;
+
+
+inquirer.prompt(questions).then(answers => {
+  let { name, title, description } = answers;
+  let dest = path.resolve(path.join('.', name));
+  if (fs.existsSync(dest)) {
+    console.error('Package already exists: ', name);
+    process.exit(1);
+  }
+  fs.copySync(path.resolve('.', 'packages', 'theme-light-extension'), dest);
+  let jsonPath = path.join(dest, 'package.json');
+  let data = utils.readJSONFile(jsonPath);
+  data.name = name;
+  data.description = description;
+  utils.writePackageData(jsonPath, data);
+
+  // update the urls in urls.css
+  let filePath = path.resolve('.', name, 'style', 'urls.css');
+  let text = fs.readFileSync(filePath, 'utf8');
+  text = text.split('@jupyterlab/theme-light-extension').join(name);
+  fs.writeFileSync(filePath, text, 'utf8');
+
+  // remove lib and node_modules.
+  ['lib', 'node_modules'].forEach(folder => {
+    let folderPath = path.join('.', name, folder);
+    if (fs.existsSync(folderPath)) {
+      fs.remove(folderPath);
+    }
+  });
+
+  let readme = `${name}\n${description}\n`;
+  fs.writeFileSync(path.join('.', name, 'README.md'), readme, 'utf8');
+
+  let src = template.split('{{name}}').join(name);
+  src = src.split('{{title}}').join(title);
+  fs.writeFileSync(path.join('.', name, 'src', 'index.ts'), src, 'utf8');
+
+  // Signify successful complation.
+  console.log(`Created new theme ${name}`);
+});

+ 7 - 1
docs/extensions_dev.md

@@ -184,7 +184,13 @@ The path to the theme  assets is specified `package.json` under the
 for an example.  Ensure that the theme files are included in the
 `"files"` metadata in package.json.  A theme can optionally specify
 an `embed.css` file that can be consumed outside of a JupyterLab application.
-See the JupyterLab Light Theme for an example.
+
+To quickly create a theme based on the JupyterLab Light Theme, follow the 
+instructions in the [contributing guide](https://github.com/jupyterlab/jupyterlab/blob/master/CONTRIBUTING.md#setting-up-a-development-environment) 
+and then run `jlpm run create:theme` from the repository root directory.  
+Once you select a name, title and a description, a new theme folder will be 
+created  in the current directory.  You can move that new folder to a location 
+of your choice, and start making desired changes.
 
 ## Standard (General-Purpose) Extensions
 See the example,

+ 2 - 0
package.json

@@ -22,6 +22,7 @@
     "clean:utils": "cd buildutils && jlpm run clean",
     "coverage": "lerna run coverage --stream",
     "create:package": "node buildutils/lib/create-package.js",
+    "create:theme": "node buildutils/lib/create-theme.js",
     "docs": "lerna run docs",
     "get:dependency": "node buildutils/lib/get-dependency.js",
     "postinstall": "node scripts/ensure-buildutils.js",
@@ -43,6 +44,7 @@
   "dependencies": {},
   "devDependencies": {
     "lerna": "^2.4.0",
+    "mock-stdin": "^0.3.1",
     "npm-run-all": "~4.1.1",
     "tslint": "^5.8.0"
   },

+ 1 - 1
packages/theme-dark-extension/src/index.ts

@@ -14,7 +14,7 @@ import {
  * A plugin for the Jupyter Dark Theme.
  */
 const plugin: JupyterLabPlugin<void> = {
-  id: 'jupyter.themes.dark',
+  id: '@jupyterlab/theme-dark-extension:plugin',
   requires: [IThemeManager],
   activate: function(app: JupyterLab, manager: IThemeManager) {
     manager.register({

+ 1 - 1
packages/theme-light-extension/src/index.ts

@@ -14,7 +14,7 @@ import {
  * A plugin for the Jupyter Light Theme.
  */
 const plugin: JupyterLabPlugin<void> = {
-  id: 'jupyter.themes.light',
+  id: '@jupyterlab/theme-light-extension:plugin',
   requires: [IThemeManager],
   activate: function(app: JupyterLab, manager: IThemeManager) {
     manager.register({

+ 11 - 0
scripts/create_theme.py

@@ -0,0 +1,11 @@
+
+
+import pexpect
+child = pexpect.spawn('node buildutils/lib/create-theme.js')
+child.expect('name:')
+child.sendline('foo')
+child.expect('title:')
+child.sendline('Foo')
+child.expect('description:')
+child.sendline('foo theme')
+child.expect('Created new theme')

+ 9 - 1
scripts/travis_script.sh

@@ -162,5 +162,13 @@ if [[ $GROUP == cli ]]; then
     jlpm run remove:dependency mocha
     jlpm run get:dependency @jupyterlab/buildutils
     jlpm run get:dependency typescript
-    jlpm run get:dependency react-native 
+    jlpm run get:dependency react-native
+
+    # Test theme creation - make sure we can add it as a package, build,
+    # and run selenium
+    pip install pexpect
+    python scripts/create-theme.py
+    mv foo packages
+    jlpm run build
+    python -m jupyterlab.selenium_check --dev-mode
 fi

+ 4 - 0
yarn.lock

@@ -4037,6 +4037,10 @@ mocha@~3.5.3:
     mkdirp "0.5.1"
     supports-color "3.1.2"
 
+mock-stdin@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.npmjs.org/mock-stdin/-/mock-stdin-0.3.1.tgz#c657d9642d90786435c64ca5e99bbd4d09bd7dd3"
+
 modify-values@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/modify-values/-/modify-values-1.0.0.tgz#e2b6cdeb9ce19f99317a53722f3dbf5df5eaaab2"