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) => (

packages/core/src/data-grid/data-grid-render.tsx

@@ -1149,6 +1149,11 @@ function drawCells(
                         lastToken = undefined;
                     }
 
+                    if (theme.textDark !== outerTheme.textDark) {
+                        if (typeof lastToken === "function") lastToken({ ctx });
+                        lastToken = undefined;
+                    }
+
                     if (highlighted || rowDisabled) {
                         if (rowDisabled) {
                             fill = blend(theme.bgHeader, fill);

packages/core/src/docs/00-faq.stories.tsx

@@ -0,0 +1,68 @@
+import * as React from "react";
+
+import { SimpleThemeWrapper } from "../stories/story-utils";
+import { DocWrapper, Marked } from "./doc-wrapper";
+
+export default {
+    title: "Glide-Data-Grid/Docs",
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <Story />
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const FAQ: React.VFC = () => {
+    return (
+        <DocWrapper>
+            <Marked>
+                {`
+# FAQ
+
+### Nothing shows up? It crashes when I edit a cell?
+
+Please read the [Prerequisites section in the docs](https://github.com/glideapps/glide-data-grid/blob/main/packages/core/API.md).
+
+### Does it work with screen readers and other a11y tools?
+
+Yes. Unfortunately none of the primary developers are accessibility users so there are likely flaws in the implementation we are not aware of. Bug reports welcome!
+
+### Does it support my data source?
+
+Yes.
+
+Data Grid is agnostic about the way you load/store/generate/mutate your data. What it requires is that you tell it which columns you have, how many rows, and to give it a function it can call to get the data for a cell in a specific row and column.
+
+### Does it do sorting?
+
+Yes through the [glide-data-grid-source](https://www.npmjs.com/package/@glideapps/glide-data-grid-source) package.
+
+### Does it do search?
+
+Yes, built in! There are examples in the storybook.
+
+### Can it filter?
+
+Nothing built in yet. It is planned for the \`glide-data-grid-source\`.
+
+### Can it do frozen columns?
+
+Yes
+
+### Can I render my own cells?
+
+Yes
+
+`}
+            </Marked>
+        </DocWrapper>
+    );
+};
+(FAQ as any).storyName = "00. FAQ";
+(FAQ as any).parameters = {
+    options: {
+        showPanel: false,
+    },
+};

packages/core/src/docs/getting-started.stories.tsx renamed to packages/core/src/docs/01-getting-started.stories.tsx

@@ -7,7 +7,7 @@ import { SimpleThemeWrapper } from "../stories/story-utils";
 import { DocWrapper, Highlight, Marked, Wrapper } from "./doc-wrapper";
 
 export default {
-    title: "Docs",
+    title: "Glide-Data-Grid/Docs",
     decorators: [
         (Story: React.ComponentType) => (
             <SimpleThemeWrapper>
@@ -174,9 +174,7 @@ export const GettingStarted: React.VFC = () => {
                 {`
 # Getting Started
 
-> You can do this!
-
-Let's build a very simply data grid, first we need some data. Let's start with something hard coded.`}
+Glide data grid is a powerful but flexible library requiring very few concepts required to get started. The grid will need data, columns, and a \`getCellContent\` callback to convert our data into cells on demand. Because the callback is used, there is no need to pre-format the data in any particular way, so long as it can be transformed into a cell. This example uses a flat array of objects.`}
             </Marked>
             <Highlight>
                 {`
@@ -193,7 +191,7 @@ const data = [
             </Highlight>
             <Marked>
                 {`
-We will also need some columns`}
+The columns of the data grid may contain many options, including icons, menus, theme overrides, however at their most basic they only require a \`title\` and an \`id\`. The id is technically optional but it is best not to omit it.`}
             </Marked>
             <Highlight>
                 {`
@@ -219,9 +217,9 @@ const columns: GridColumn[] = [
             </Highlight>
             <Marked>
                 {`
-Each of our columns will automatically size based on its contents. If we want to we can fix the size of some columns by setting the width parameter.
+Each column will automatically size based on its contents. If desired the sise of each column can be overridden by setting the width parameter.
 
-Lastly we need a data fetch callback. This callback should be memoized using \`React.useCallback\` or be a static function.`}
+Finally the data grid requires a cell fetch callback. This callback should be memoized using \`React.useCallback\` or be a static function.`}
             </Marked>
             <Highlight>
                 {`
@@ -242,7 +240,9 @@ const getContent = React.useCallback((cell: readonly [number, number]): GridCell
             </Highlight>
             <Marked>
                 {`
-Ok let's put it all together!`}
+> Avoid excessive changes to the identity of the \`getCellContent\` callback as the grid will re-render from scratch every time it changes.
+
+That is all the basic requirements put together. Because the grid is a self-contained scrollable region a container is provided for simple hard coded sizing. Reactive sizing is also possible but requires a bit of css ignored here.`}
             </Marked>
             <Highlight>
                 {`
@@ -256,11 +256,9 @@ return <DataEditorContainer width={900} height={200}>
             </Wrapper>
             <Marked>
                 {`
-Great job!
-
 # Going further
 
-There is so much more we can do. Just to list a few
+There is so much more that can be done:
 
 - Header icons
 - Smooth scrolling
@@ -273,7 +271,7 @@ There is so much more we can do. Just to list a few
 - Search
 - Copy/paste support
 
-Let's play with a few`}
+Here are a few to play with.`}
             </Marked>
             <label style={{ display: "block" }}>
                 <input type="checkbox" checked={rowMarkers} onChange={e => setRowMarkers(e.target.checked)} /> Row
@@ -301,6 +299,7 @@ Let's play with a few`}
         </DocWrapper>
     );
 };
+(GettingStarted as any).storyName = "01. Getting Started";
 (GettingStarted as any).parameters = {
     options: {
         showPanel: false,