feat: add a category toolbox to the test page (#161)

Author: rachel-fenichel

src/blocks/toolbox.js

@@ -4,53 +4,55 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export const toolbox = {
-  'kind': 'flyoutToolbox',
-  'contents': [
-    {
-      kind: 'block',
-      type: 'p5_background_color',
-      inputs: {
-        COLOR: {
-          shadow: {
-            type: 'colour_picker',
-          },
+export const p5CategoryContents = [
+  {
+    kind: 'block',
+    type: 'p5_background_color',
+    inputs: {
+      COLOR: {
+        shadow: {
+          type: 'colour_picker',
         },
       },
     },
-    {
-      kind: 'block',
-      type: 'colour_random',
-    },
-    {
-      kind: 'block',
-      type: 'draw_emoji',
-    },
-    {
-      kind: 'block',
-      type: 'simple_circle',
-      inputs: {
-        COLOR: {
-          shadow: {
-            type: 'colour_picker',
-          },
+  },
+  {
+    kind: 'block',
+    type: 'colour_random',
+  },
+  {
+    kind: 'block',
+    type: 'draw_emoji',
+  },
+  {
+    kind: 'block',
+    type: 'simple_circle',
+    inputs: {
+      COLOR: {
+        shadow: {
+          type: 'colour_picker',
         },
       },
     },
-    {
-      kind: 'block',
-      type: 'write_text_with_shadow',
-      inputs: {
-        TEXT: {
-          shadow: {
-            type: 'text_only',
-          },
+  },
+  {
+    kind: 'block',
+    type: 'write_text_with_shadow',
+    inputs: {
+      TEXT: {
+        shadow: {
+          type: 'text_only',
         },
       },
     },
-    {
-      kind: 'block',
-      type: 'write_text_without_shadow',
-    },
-  ],
+  },
+  {
+    kind: 'block',
+    type: 'write_text_without_shadow',
+  },
+];
+
+export const toolbox = {
+  'kind': 'flyoutToolbox',
+  'contents': p5CategoryContents,
 };

test/index.ts

@@ -5,6 +5,8 @@
  */
 
 import * as Blockly from 'blockly';
+// Import the default blocks.
+import * as libraryBlocks from 'blockly/blocks';
 import {installAllBlocks as installColourBlocks} from '@blockly/field-colour';
 import {KeyboardNavigation} from '../src/index';
 // @ts-expect-error No types in js file
@@ -13,6 +15,8 @@ import {forBlock} from '../src/blocks/p5_generators';
 import {blocks} from '../src/blocks/p5_blocks';
 // @ts-expect-error No types in js file
 import {toolbox} from '../src/blocks/toolbox.js';
+// @ts-expect-error No types in js file
+import toolboxCategories from './toolboxCategories.js';
 
 import {javascriptGenerator} from 'blockly/javascript';
 // @ts-expect-error No types in js file
@@ -47,11 +51,13 @@ function loadScenario(workspace: Blockly.WorkspaceSvg) {
  */
 function createWorkspace(): Blockly.WorkspaceSvg {
   console.log(location.search);
-  const renderer =
-        location.search.includes('geras') ? 'geras' :
-        location.search.includes('thrasos') ? 'thrasos' : 'zelos';
+  const renderer = location.search.includes('geras')
+    ? 'geras'
+    : location.search.includes('thrasos')
+      ? 'thrasos'
+      : 'zelos';
   const options = {
-    toolbox: toolbox,
+    toolbox: toolboxCategories,
     renderer,
   };
   const blocklyDiv = document.getElementById('blocklyDiv')!;