fix: cleanup dynamic stories ssr

ccontrols · Nov 14, 2020 · f828a34 · f828a34
1 parent 7dff541
commit f828a34
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 22 deletions.
diff --git a/core/core/src/document.ts b/core/core/src/document.ts
@@ -168,11 +168,7 @@ export type Story = {
   dynamicId?: string;
 } & StoryProps;
 
-export type DynamicExamples = {
-  name: string;
-  source?: string;
-  renderFn: () => JSX.Element;
-}[];
+export type DynamicExamples = Story[];
 /**
  * es named export function, excapsulates a contained example code.
  */

diff --git a/core/store/src/state/context/story.tsx b/core/store/src/state/context/story.tsx
@@ -34,13 +34,22 @@ export const StoryContextProvider: FC<{
   const [, setStory] = useState<Story | undefined>(
     storyId ? store.stories[storyId] : undefined,
   );
+  //workaround gatsby ssr not updating classnames on active item
+  const [client, setClient] = useState('ssr');
+
   useEffect(() => {
     const onObserver = (updatedStory?: Story) => {
       if (updatedStory?.id === storyId) {
         setStory(updatedStory);
       }
     };
     store.addObserver(onObserver);
+    const story: Story | undefined = storyId
+      ? store.stories[storyId]
+      : undefined;
+    if (story?.dynamicId) {
+      setClient('client');
+    }
     return () => store.removeObserver(onObserver);
   }, [store, storyId]);
   useEffect(() => {
@@ -57,6 +66,7 @@ export const StoryContextProvider: FC<{
   }, [values, storyId, store]);
   return (
     <StoryContext.Provider
+      key={client}
       value={{
         story: storyId ? store.stories[storyId] : undefined,
         updateStory: newValue => {

diff --git a/core/store/src/state/recoil/StateRoot.tsx b/core/store/src/state/recoil/StateRoot.tsx
@@ -4,7 +4,7 @@ import { Store } from '@component-controls/core';
 import { storeState, activeTabState, optionsState } from './store';
 import { documentIdState } from './document';
 import { storyIdState } from './story';
-import { controlsValuesState } from './controls';
+import { currentControlsState } from './controls';
 
 export interface StateRootProps {
   /**
@@ -52,7 +52,7 @@ export const StateRoot: FC<StateRootProps> = ({
         set(storyIdState, storyId);
         set(activeTabState, activeTab);
         set(optionsState, options || {});
-        set(controlsValuesState, values);
+        set(currentControlsState, values);
       }}
     >
       {children}

diff --git a/core/store/src/state/recoil/controls.tsx b/core/store/src/state/recoil/controls.tsx
@@ -15,7 +15,7 @@ import {
 import { currentStoryState } from './story';
 import { storeState } from './store';
 
-const currentControlsState = selector<ComponentControls | undefined>({
+export const currentControlsState = selector<ComponentControls | undefined>({
   key: 'current_controls',
   get: ({ get }) => {
     const story = get(currentStoryState);

diff --git a/examples/stories/src/stories_native/dynamic-stories.stories.tsx b/examples/stories/src/stories_native/dynamic-stories.stories.tsx
@@ -8,7 +8,7 @@ export default {
   title: 'Introduction/Dynamic stories',
   author: 'atanasster',
   description:
-    "ESM story file to demostrate creating 'dynamic' stories at run-time. Creates a story iterating through each theme color",
+    "You can create 'dynamic' stories - below are created separate stories for each theme color.",
 };
 
 export const buttonColors = (): Example => {
@@ -17,14 +17,14 @@ export const buttonColors = (): Example => {
     .map(color => {
       return {
         name: color,
-        source: `<Button sx={{ bg: '${color}'}}>Color ${color}: ${theme.colors[color]}</Button>`,
+        description: `theme.colors.${color}: **${theme.colors[color]}**`,
+        source: `<Button sx={{ bg: '${color}'}}>Color ${theme.colors[color]}</Button>`,
         renderFn: () => (
-          <Button
-            sx={{ bg: color }}
-          >{`Color ${color}: ${theme.colors[color]}`}</Button>
+          <Button sx={{ bg: color }}>{`Color ${theme.colors[color]}`}</Button>
         ),
       };
-    });
+    })
+    .slice(0, 1);
 };
 
 buttonColors.dynamic = true;
diff --git a/ui/components/src/Navmenu/Navmenu.tsx b/ui/components/src/Navmenu/Navmenu.tsx
@@ -224,13 +224,6 @@ export const Navmenu: FC<NavMenuProps> = ({
       }),
     );
   }, [items, expandAll, activeItem, search]);
-  //workaround gatsby ssr not updating classnames on active item
-  const [isClient, setClient] = useState(false);
-
-  useEffect(() => {
-    setClient(true);
-  }, []);
-
   const onMenuChange = (item: MenuItem, expanded: boolean) => {
     const { expandedItems, filteredItems } = state;
 
@@ -352,7 +345,7 @@ export const Navmenu: FC<NavMenuProps> = ({
   const { filteredItems } = state;
 
   return (
-    <Box as="nav" key={isClient ? 'client' : 'ssr'}>
+    <Box as="nav">
       {filteredItems && filteredItems.map(item => renderItem(item, 1))}
     </Box>
   );