Fix links, simplify examples

Author: microbit-matt-hillsdon

docs/react.md

@@ -21,7 +21,7 @@ import {
 </MakeCodeRenderBlocksProvider>;
 ```
 
-For more examples, take a look at the [MakeCode blocks rendering demo source code](../src/stories/MakeCodeBlocksRendering.stories.tsx).
+For more examples, take a look at the [MakeCode blocks rendering demo source code](../src/stories/react/MakeCodeBlocksRendering.stories.tsx).
 
 ## Embed MakeCode editor
 
@@ -33,13 +33,14 @@ import { MakeCodeFrame } from '@microbit/makecode-embed/react';
 <MakeCodeFrame
   ref={ref}
   controller={1}
-  controllerId={controllerId}
+  controllerId="YOUR APP NAME HERE"
   initialProjects={[savedProject]}
+  onEditorContentLoaded={(e) => console.log("MakeCode is now ready")},
   onWorkspaceSave={(e) => {
     // Set project as project changes in the editor.
     setSavedProject(e.project);
   }}
 />;
 ```
 
-For more examples, take a look at the [MakeCode frame demo source code](../src/stories/MakeCodeFrame.stories.tsx).
+For more examples, take a look at the [MakeCode frame demo source code](../src/stories/react/MakeCodeFrame.stories.tsx).

docs/vanilla.md

@@ -24,7 +24,7 @@ document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
 `;
 ```
 
-For more examples, take a look at the [MakeCode blocks rendering demo source code](../src/stories/createMakeCodeRenderBlocks.stories.tsx).
+For more examples, take a look at the [MakeCode blocks rendering demo source code](../src/stories/vanilla/makecode-render-blocks.stories.tsx).
 
 ## Embed MakeCode editor
 
@@ -55,20 +55,16 @@ document.querySelector<HTMLDivElement>("#app")!.appendChild(iframe);
 // Create and initialise an instance of MakeCodeFrameDriver.
 const driverRef = new MakeCodeFrameDriver(
   {
+    controllerId: "YOUR APP NAME HERE",
     initialProjects: async () => [makeCodeProject],
-    onEditorContentLoaded: (e) => console.log("editorContentLoaded", e),
-    onWorkspaceLoaded: (e) => console.log("workspaceLoaded", e),
-    onWorkspaceSync: (e) => console.log("workspaceSync", e),
-    onWorkspaceReset: (e) => console.log("workspaceReset", e),
-    onWorkspaceEvent: (e) => console.log("workspaceEvent", e),
+    onEditorContentLoaded: (e) => console.log("MakeCode is now ready"),
     onWorkspaceSave: (e) => {
       console.log(e.project!.header!.id, e.project);
     },
-    onTutorialEvent: (e) => console.log("tutorialEvent", e),
   },
   () => iframe
 );
 driverRef.initialize();
 ```
 
-For more examples, take a look at the [MakeCode frame demo source code](../src/stories/makeCodeFrameDriver.stories.tsx).
+For more examples, take a look at the [MakeCode frame demo source code](../src/stories/vanilla/makecode-frame-driver.stories.tsx).

src/stories/MakeCodeBlocksRendering.stories.tsx renamed to src/stories/react/MakeCodeBlocksRendering.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { ReactNode, useState } from 'react';
-import MakeCodeBlocksRendering from '../react/MakeCodeBlocksRendering.js';
+import MakeCodeBlocksRendering from '../../react/MakeCodeBlocksRendering.js';
 import {
   initialProject,
   project,
@@ -12,10 +12,10 @@ import {
   projectWithTwoExtensions,
   projectWithUserLayout,
   strawbeesExample,
-} from './fixtures.js';
-import { MakeCodeRenderBlocksProvider } from '../react/MakeCodeRenderBlocksProvider.js';
-import { MakeCodeRenderBlocksOptions } from '../vanilla/makecode-render-blocks.js';
-import { BlockLayout, Project } from '../vanilla/pxt.js';
+} from '../fixtures.js';
+import { MakeCodeRenderBlocksProvider } from '../../react/MakeCodeRenderBlocksProvider.js';
+import { MakeCodeRenderBlocksOptions } from '../../vanilla/makecode-render-blocks.js';
+import { BlockLayout, Project } from '../../vanilla/pxt.js';
 
 const meta: Meta<typeof MakeCodeRenderBlocksProvider> = {
   title: 'stories/React/MakeCodeBlocksRendering',

src/stories/MakeCodeFrame.stories.tsx renamed to src/stories/react/MakeCodeFrame.stories.tsx

@@ -1,15 +1,15 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { useCallback, useRef } from 'react';
-import { defaultMakeCodeProject } from '../vanilla/examples.js';
-import { MakeCodeFrameDriver } from '../vanilla/makecode-frame-driver.js';
+import { defaultMakeCodeProject } from '../../vanilla/examples.js';
+import { MakeCodeFrameDriver } from '../../vanilla/makecode-frame-driver.js';
 import {
   default as MakeCodeFrame,
   MakeCodeFrameProps,
-} from '../react/MakeCodeFrame.js';
-import { Project } from '../vanilla/pxt.js';
-import { controllerId } from './config.js';
-import StoryWrapper from './StoryWrapper.js';
-import MakeCodeToolbar from './MakeCodeToolbar.js';
+} from '../../react/MakeCodeFrame.js';
+import { Project } from '../../vanilla/pxt.js';
+import { controllerId } from '../config.js';
+import StoryWrapper from '../StoryWrapper.js';
+import MakeCodeToolbar from '../MakeCodeToolbar.js';
 
 const meta: Meta<typeof MakeCodeFrame> = {
   title: 'stories/React/MakeCodeFrame',

src/stories/makeCodeFrameDriver.stories.tsx renamed to src/stories/vanilla/makecode-frame-driver.stories.tsx

@@ -1,14 +1,14 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { useRef } from 'react';
-import { defaultMakeCodeProject } from '../vanilla/examples.js';
+import { defaultMakeCodeProject } from '../../vanilla/examples.js';
 import {
   createMakeCodeURL,
   MakeCodeFrameDriver,
   Options,
-} from '../vanilla/makecode-frame-driver.js';
-import { Project } from '../vanilla/pxt.js';
-import MakeCodeToolbar from './MakeCodeToolbar.js';
-import StoryWrapper from './StoryWrapper.js';
+} from '../../vanilla/makecode-frame-driver.js';
+import { Project } from '../../vanilla/pxt.js';
+import MakeCodeToolbar from '../MakeCodeToolbar.js';
+import StoryWrapper from '../StoryWrapper.js';
 
 interface StoryArgs {
   options?: {
@@ -29,14 +29,6 @@ export default meta;
 
 type Story = StoryObj<StoryArgs>;
 
-const toolbarStyles = {
-  fontFamily: 'sans-serif',
-  display: 'flex',
-  flexWrap: 'wrap',
-  gap: '5px',
-  margin: '10px 0',
-} as const;
-
 const renderEditor = (args: StoryArgs) => {
   const savedProjects = useRef<Map<string, Project>>(new Map());
   const ref = useRef<MakeCodeFrameDriver | null>(null);

src/stories/createMakeCodeRenderBlocks.stories.tsx renamed to src/stories/vanilla/makecode-render-blocks.stories.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import {
   createMakeCodeRenderBlocks,
   MakeCodeRenderBlocksOptions,
-} from '../vanilla/makecode-render-blocks.js';
+} from '../../vanilla/makecode-render-blocks.js';
 import {
   initialProject,
   project,
@@ -12,9 +12,9 @@ import {
   projectWithLayout,
   projectWithMelody,
   projectWithTwoExtensions,
-} from './fixtures.js';
-import { Project } from '../vanilla/pxt.js';
-import StoryWrapper from './StoryWrapper.js';
+} from '../fixtures.js';
+import { Project } from '../../vanilla/pxt.js';
+import StoryWrapper from '../StoryWrapper.js';
 
 interface StoryArgs {
   options: MakeCodeRenderBlocksOptions | undefined;