Slimmed down stories to improve performance

.storybook/preview.js

@@ -27,8 +27,8 @@ export const decorators = [
 ]
 
 const sortPriority = {
-  'Slate/Interfaces/Editor': 1,
-  'Slate/Concepts/Decorations': 2,
+  'Slate/Interfaces': 1,
+  'Slate/Concepts': 2,
 }
 
 /** Sort stories in sidebar */

src/components/ApiView/ApiView.tsx

@@ -106,11 +106,11 @@ const ApiView: React.FC<ApiViewProps> = ({
 
   return (
     <div css={componentCss}>
-      <h1>Editor Interface</h1>
+      <h1>{title} Interface</h1>
       <select value={apiFunction.name} onChange={onApiFunctionChange}>
         {apiFunctionList.map((fn) => (
           <option key={fn.name} value={fn.name}>
-            Editor.{fn.name}
+            {title}.{fn.name}
           </option>
         ))}
       </select>

src/stories/Interfaces/Interface.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Story } from '@storybook/react'
+import { ApiView, ApiViewProps } from '../../components'
+import {
+  editorApiFunctions,
+  nodeApiFunctions,
+  pathApiFunctions,
+} from '../util/api'
+import { createStoryFactory, createStoryMeta } from './util'
+
+const meta = createStoryMeta()
+export default meta
+
+const InterfaceTemplate: Story<ApiViewProps> = (args) => <ApiView {...args} />
+
+const createEditorStory = createStoryFactory(
+  () => InterfaceTemplate.bind({}),
+  'Editor',
+  editorApiFunctions
+)
+
+const createPathStory = createStoryFactory(
+  () => InterfaceTemplate.bind({}),
+  'Path',
+  pathApiFunctions
+)
+
+const createNodeStory = createStoryFactory(
+  () => InterfaceTemplate.bind({}),
+  'Node',
+  nodeApiFunctions
+)
+
+export const editor = createEditorStory()
+export const node = createNodeStory()
+export const path = createPathStory()

src/stories/Interfaces/util.tsx

@@ -7,22 +7,21 @@ import { ApiViewProps } from '../../components'
 import { NodeSpecContextDecorator } from '../util'
 
 export function createStoryMeta(interfaceName?: string) {
-  let persistentValue: Node[] | undefined = undefined
-
   return {
     title: interfaceName
       ? `Slate/Interfaces/${interfaceName}`
       : 'Slate/Interfaces',
     decorators: [
       (Story, context) => {
+        const [value, setValue] = React.useState<Node[]>(
+          context.parameters.initialSlateValue
+        )
         return (
           <NodeSpecContextDecorator
             story={Story}
-            initialSlateValue={
-              persistentValue ?? context.parameters.initialSlateValue
-            }
+            initialSlateValue={value}
             onChange={(value) => {
-              persistentValue = value
+              setValue(value)
             }}
           />
         )
@@ -38,12 +37,13 @@ export function createStoryFactory<
   return function createStory(fnName?: K) {
     const story = storyFn()
     story.storyName = (fnName as string) ?? label
+    const title = fnName ? `${label}.${fnName}` : label
     if (!fnName) {
       fnName = Object.keys(apiFunctions)[0] as K
     }
     const initialApiFunction = apiFunctions[fnName]!
     story.args = {
-      title: `${label}.${fnName}`,
+      title,
       renderElement,
       renderLeaf,
       initialApiFunction,