Reorder stories for interest

Author: microbit-matt-hillsdon

src/stories/MakeCodeBlocksRendering.stories.tsx

@@ -56,238 +56,238 @@ const getOptionsFromVersion = (
   return options;
 };
 
-export const InitialBlankProject: Story = {
-  name: 'Initial blank project',
+export const Simple: Story = {
   render: (args) => {
     const { options: version } = args;
     const options = getOptionsFromVersion(version as string);
     return (
       <StoryWrapper key={options.version}>
         <MakeCodeRenderBlocksProvider options={options}>
-          <MakeCodeBlocksRendering code={initialProject} />
+          <MakeCodeBlocksRendering code={project.text!['main.ts']} />
         </MakeCodeRenderBlocksProvider>
       </StoryWrapper>
     );
   },
 };
 
-export const EmptyString: Story = {
-  name: 'Empty string',
+export const XML: Story = {
   render: (args) => {
     const { options: version } = args;
     const options = getOptionsFromVersion(version as string);
     return (
       <StoryWrapper key={options.version}>
         <MakeCodeRenderBlocksProvider options={options}>
-          <MakeCodeBlocksRendering code="" />
+          <MakeCodeBlocksRendering code={projectWithLayout} />
         </MakeCodeRenderBlocksProvider>
       </StoryWrapper>
     );
   },
 };
 
-export const EmptyToBlocksTransition: Story = {
-  name: 'Empty to blocks transition',
+export const Published: Story = {
   render: (args) => {
     const { options: version } = args;
     const options = getOptionsFromVersion(version as string);
-    const [project, setProject] = useState<Project>(initialProject);
+    console.log(options);
     return (
       <StoryWrapper key={options.version}>
-        <div style={{ display: 'grid', gridTemplateColumns: '50% 50%' }}>
-          <MakeCodeRenderBlocksProvider options={options}>
-            <MakeCodeBlocksRendering code={project} />
-          </MakeCodeRenderBlocksProvider>
-          <div>
-            <button
-              onClick={() =>
-                setProject(
-                  project === projectWithLayout
-                    ? initialProject
-                    : projectWithLayout
-                )
-              }
-            >
-              Update
-            </button>
-          </div>
-        </div>
+        <MakeCodeRenderBlocksProvider options={options}>
+          <MakeCodeBlocksRendering packageId="_iHY3J9371HLf" />
+        </MakeCodeRenderBlocksProvider>
       </StoryWrapper>
     );
   },
 };
 
-export const RespectUserLayout: Story = {
-  name: 'Respect user layout',
+export const Melody: Story = {
   render: (args) => {
     const { options: version } = args;
     const options = getOptionsFromVersion(version as string);
     return (
       <StoryWrapper key={options.version}>
         <MakeCodeRenderBlocksProvider options={options}>
-          <MakeCodeBlocksRendering
-            code={projectWithUserLayout}
-            layout={BlockLayout.Clean}
-          />
+          <MakeCodeBlocksRendering code={projectWithMelody} />
         </MakeCodeRenderBlocksProvider>
       </StoryWrapper>
     );
   },
 };
 
-export const Simple: Story = {
+export const ExtensionBlockSingle: Story = {
+  name: 'Extension block (single)',
   render: (args) => {
     const { options: version } = args;
     const options = getOptionsFromVersion(version as string);
     return (
       <StoryWrapper key={options.version}>
         <MakeCodeRenderBlocksProvider options={options}>
-          <MakeCodeBlocksRendering code={project.text!['main.ts']} />
+          <MakeCodeBlocksRendering code={projectWithExtensionBlock} />
         </MakeCodeRenderBlocksProvider>
       </StoryWrapper>
     );
   },
 };
 
-export const XML: Story = {
+export const ExtensionBlockTwo: Story = {
+  name: 'Extension block (two different)',
   render: (args) => {
     const { options: version } = args;
     const options = getOptionsFromVersion(version as string);
     return (
       <StoryWrapper key={options.version}>
         <MakeCodeRenderBlocksProvider options={options}>
-          <MakeCodeBlocksRendering code={projectWithLayout} />
+          <MakeCodeBlocksRendering code={projectWithTwoExtensions} />
         </MakeCodeRenderBlocksProvider>
       </StoryWrapper>
     );
   },
 };
 
-export const Published: Story = {
+export const ExtensionBlockStrawbees: Story = {
+  name: 'Extension block (Strawbees - spaces in name)',
   render: (args) => {
     const { options: version } = args;
     const options = getOptionsFromVersion(version as string);
-    console.log(options);
     return (
       <StoryWrapper key={options.version}>
         <MakeCodeRenderBlocksProvider options={options}>
-          <MakeCodeBlocksRendering packageId="_iHY3J9371HLf" />
+          <MakeCodeBlocksRendering code={strawbeesExample} />
         </MakeCodeRenderBlocksProvider>
       </StoryWrapper>
     );
   },
 };
 
-export const Melody: Story = {
+export const ExtensionBlockDatalogging: Story = {
+  name: 'Extension block (Datalogging)',
   render: (args) => {
     const { options: version } = args;
     const options = getOptionsFromVersion(version as string);
     return (
       <StoryWrapper key={options.version}>
         <MakeCodeRenderBlocksProvider options={options}>
-          <MakeCodeBlocksRendering code={projectWithMelody} />
+          <MakeCodeBlocksRendering code={projectWithDatalogging} />
         </MakeCodeRenderBlocksProvider>
       </StoryWrapper>
     );
   },
 };
 
-export const ExtensionBlockSingle: Story = {
-  name: 'Extension block (single)',
+export const CustomBlock: Story = {
+  name: 'Custom block',
   render: (args) => {
     const { options: version } = args;
     const options = getOptionsFromVersion(version as string);
     return (
       <StoryWrapper key={options.version}>
         <MakeCodeRenderBlocksProvider options={options}>
-          <MakeCodeBlocksRendering code={projectWithExtensionBlock} />
+          <MakeCodeBlocksRendering code={projectWithCustomBlock} />
         </MakeCodeRenderBlocksProvider>
       </StoryWrapper>
     );
   },
 };
 
-export const ExtensionBlockTwo: Story = {
-  name: 'Extension block (two different)',
-  render: (args) => {
-    const { options: version } = args;
-    const options = getOptionsFromVersion(version as string);
+export const Error: Story = {
+  render: () => {
     return (
-      <StoryWrapper key={options.version}>
-        <MakeCodeRenderBlocksProvider options={options}>
-          <MakeCodeBlocksRendering code={projectWithTwoExtensions} />
+      <StoryWrapper>
+        <MakeCodeRenderBlocksProvider options={{ version: 'intentional-404' }}>
+          <MakeCodeBlocksRendering code={project.text!['main.ts']} />
         </MakeCodeRenderBlocksProvider>
       </StoryWrapper>
     );
   },
 };
 
-export const ExtensionBlockStrawbees: Story = {
-  name: 'Extension block (Strawbees - spaces in name)',
+export const Robust: Story = {
+  name: 'Robust against invalid/empty project',
   render: (args) => {
     const { options: version } = args;
     const options = getOptionsFromVersion(version as string);
     return (
       <StoryWrapper key={options.version}>
         <MakeCodeRenderBlocksProvider options={options}>
-          <MakeCodeBlocksRendering code={strawbeesExample} />
+          <MakeCodeBlocksRendering code={{} as Project} />
         </MakeCodeRenderBlocksProvider>
       </StoryWrapper>
     );
   },
 };
 
-export const ExtensionBlockDatalogging: Story = {
-  name: 'Extension block (Datalogging)',
+export const InitialBlankProject: Story = {
+  name: 'Initial blank project',
   render: (args) => {
     const { options: version } = args;
     const options = getOptionsFromVersion(version as string);
     return (
       <StoryWrapper key={options.version}>
         <MakeCodeRenderBlocksProvider options={options}>
-          <MakeCodeBlocksRendering code={projectWithDatalogging} />
+          <MakeCodeBlocksRendering code={initialProject} />
         </MakeCodeRenderBlocksProvider>
       </StoryWrapper>
     );
   },
 };
 
-export const CustomBlock: Story = {
-  name: 'Custom block',
+export const EmptyString: Story = {
+  name: 'Empty string',
   render: (args) => {
     const { options: version } = args;
     const options = getOptionsFromVersion(version as string);
     return (
       <StoryWrapper key={options.version}>
         <MakeCodeRenderBlocksProvider options={options}>
-          <MakeCodeBlocksRendering code={projectWithCustomBlock} />
+          <MakeCodeBlocksRendering code="" />
         </MakeCodeRenderBlocksProvider>
       </StoryWrapper>
     );
   },
 };
 
-export const Error: Story = {
-  render: () => {
+export const EmptyToBlocksTransition: Story = {
+  name: 'Empty to blocks transition',
+  render: (args) => {
+    const { options: version } = args;
+    const options = getOptionsFromVersion(version as string);
+    const [project, setProject] = useState<Project>(initialProject);
     return (
-      <StoryWrapper>
-        <MakeCodeRenderBlocksProvider options={{ version: 'intentional-404' }}>
-          <MakeCodeBlocksRendering code={project.text!['main.ts']} />
-        </MakeCodeRenderBlocksProvider>
+      <StoryWrapper key={options.version}>
+        <div style={{ display: 'grid', gridTemplateColumns: '50% 50%' }}>
+          <MakeCodeRenderBlocksProvider options={options}>
+            <MakeCodeBlocksRendering code={project} />
+          </MakeCodeRenderBlocksProvider>
+          <div>
+            <button
+              onClick={() =>
+                setProject(
+                  project === projectWithLayout
+                    ? initialProject
+                    : projectWithLayout
+                )
+              }
+            >
+              Update
+            </button>
+          </div>
+        </div>
       </StoryWrapper>
     );
   },
 };
 
-export const Robust: Story = {
-  name: 'Robust against invalid/empty project',
+export const RespectUserLayout: Story = {
+  name: 'Respect user layout',
   render: (args) => {
     const { options: version } = args;
     const options = getOptionsFromVersion(version as string);
     return (
       <StoryWrapper key={options.version}>
         <MakeCodeRenderBlocksProvider options={options}>
-          <MakeCodeBlocksRendering code={{} as Project} />
+          <MakeCodeBlocksRendering
+            code={projectWithUserLayout}
+            layout={BlockLayout.Clean}
+          />
         </MakeCodeRenderBlocksProvider>
       </StoryWrapper>
     );