fix up storybook (#214)

* Fix storybook up a bit

* Fix build

Author: jassmith

.storybook/addons/expand-all/register.js

@@ -0,0 +1,15 @@
+import { STORY_RENDERED } from "@storybook/core-events";
+import { addons } from "@storybook/addons";
+
+let hasExpanded = false;
+
+addons.register("expand-all", api => {
+    const emitter = addons.getChannel();
+
+    emitter.on(STORY_RENDERED, () => {
+        if (!hasExpanded) {
+            setTimeout(api.expandAll); // Calling on the next tick after storyRendered seems to work reliably.
+            hasExpanded = true;
+        }
+    });
+});

.storybook/main.js

@@ -2,7 +2,7 @@ const path = require("path");
 
 module.exports = {
     stories: ["../**/*.stories.tsx"],
-    addons: ["@storybook/addon-links", "@storybook/addon-controls"],
+    addons: ["@storybook/addon-links", "@storybook/addon-controls", "./addons/expand-all/register.js"],
     devtool: "source-map",
     webpackFinal: async (config, { configType }) => {
         config.module.rules.push({

.storybook/manager.js

@@ -20,7 +20,7 @@ addons.setConfig({
     initialActive: "sidebar",
     sidebar: {
         showRoots: true,
-        collapsedRoots: ["Subcomponents"],
+        collapsedRoots: ["Subcomponents", "TestCases"],
     },
     toolbar: {
         title: { hidden: false },

.storybook/preview.js

@@ -3,10 +3,12 @@ import { addParameters } from "@storybook/react";
 addParameters({
     options: {
         showRoots: true,
-        storySort: (a, b) => a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
+        storySort: (a, b) => {
+            return a[1].name.localeCompare(b[1].name, undefined, { numeric: true });
+        },
     },
 });
 
 export const parameters = {
-    layout: 'fullscreen',
-  };
+    layout: "fullscreen",
+};

README.md

@@ -115,7 +115,7 @@ Data Grid is agnostic about the way you load/store/generate/mutate your data. Wh
 
 **Does it do sorting, searching, and filtering?**
 
-Search is included. You provide the trigger, we do the search. [Example](https://glideapps.github.io/glide-data-grid/?path=/story/dataeditor--built-in-search) in our storybook.
+Search is included. You provide the trigger, we do the search. [Example](https://glideapps.github.io/glide-data-grid/?path=/story/glide-data-grid-docs--search) in our storybook.
 
 Filtering and sorting are something you would have to implement with your data source. There are hooks for adding column header menus if you want that.
 
@@ -127,7 +127,7 @@ Yes!
 
 **Can I render my own cells?**
 
-Yes, but the renderer has to use HTML Canvas. [Simple example](https://glideapps.github.io/glide-data-grid/?path=/story/dataeditor--draw-custom-cells) in our Storybook.
+Yes, but the renderer has to use HTML Canvas. [Simple example](https://glideapps.github.io/glide-data-grid/?path=/story/glide-data-grid-dataeditor-demos--draw-custom-cells) in our Storybook.
 
 **Why does Data Grid use HTML Canvas?**
 

packages/cells/src/cell.stories.tsx

@@ -34,7 +34,7 @@ const SimpleThemeWrapper: React.FC = p => {
 };
 
 export default {
-    title: "Extra Cells",
+    title: "Extra Packages/Cells",
 
     decorators: [
         (Story: React.ComponentType) => (

packages/core/README.md

@@ -115,7 +115,7 @@ Data Grid is agnostic about the way you load/store/generate/mutate your data. Wh
 
 **Does it do sorting, searching, and filtering?**
 
-Search is included. You provide the trigger, we do the search. [Example](https://glideapps.github.io/glide-data-grid/?path=/story/dataeditor--built-in-search) in our storybook.
+Search is included. You provide the trigger, we do the search. [Example](https://glideapps.github.io/glide-data-grid/?path=/story/glide-data-grid-docs--search) in our storybook.
 
 Filtering and sorting are something you would have to implement with your data source. There are hooks for adding column header menus if you want that.
 
@@ -127,7 +127,7 @@ Yes!
 
 **Can I render my own cells?**
 
-Yes, but the renderer has to use HTML Canvas. [Simple example](https://glideapps.github.io/glide-data-grid/?path=/story/dataeditor--draw-custom-cells) in our Storybook.
+Yes, but the renderer has to use HTML Canvas. [Simple example](https://glideapps.github.io/glide-data-grid/?path=/story/glide-data-grid-dataeditor-demos--draw-custom-cells) in our Storybook.
 
 **Why does Data Grid use HTML Canvas?**
 

packages/core/src/data-editor/data-editor-beautiful.stories.tsx

@@ -101,7 +101,7 @@ function lossyCopyData<T extends EditableGridCell>(source: EditableGridCell, tar
 }
 
 export default {
-    title: "DataEditor",
+    title: "Glide-Data-Grid/DataEditor Demos",
 
     decorators: [
         (Story: React.ComponentType) => (

packages/core/src/data-editor/data-editor-repros.stories.tsx

@@ -10,7 +10,7 @@ import DataEditorContainer from "../data-editor-container/data-grid-container";
 import styled from "styled-components";
 
 export default {
-    title: "DataEditor/TestCases/Bugs",
+    title: "Tests/TestCases/Bugs",
 
     decorators: [
         (fn: StoryFn<React.ReactElement | null>, context: StoryContext) => (

packages/core/src/data-editor/data-editor.stories.tsx

@@ -17,7 +17,7 @@ import { DataEditor } from "./data-editor";
 import DataEditorContainer from "../data-editor-container/data-grid-container";
 
 export default {
-    title: "DataEditor/TestCases",
+    title: "Tests/TestCases",
 
     decorators: [
         (fn: StoryFn<React.ReactElement | null>, context: StoryContext) => (