fix: sync store state

core/store/src/state/context/controls.tsx

@@ -21,7 +21,6 @@ export const ControlsContextStoryProvider: FC = ({ children }) => {
         controls: story ? story.controls : undefined,
         updateValue: (name: string, newValue: any) => {
           if (story) {
-            console.log(newValue);
             const storyControls = story.controls || {};
             updateStory({
               ...story,

core/store/src/state/context/store.tsx

@@ -1,15 +1,8 @@
-import React, {
-  FC,
-  createContext,
-  useState,
-  useContext,
-  useEffect,
-} from 'react';
-import { Store, PackageInfo, Story } from '@component-controls/core';
+import React, { FC, createContext, useContext } from 'react';
+import { Store, PackageInfo } from '@component-controls/core';
 
 interface StoreContextProps {
   store: Store;
-  updateStory: (newValue: Story) => void;
 }
 
 export const StoreContext = createContext<StoreContextProps>({
@@ -19,26 +12,16 @@ export const StoreContext = createContext<StoreContextProps>({
     packages: {},
     components: {},
   },
-  updateStory: () => {},
 });
 
 export const StoreContextProvider: FC<{ store: Store }> = ({
-  store: propsStore,
+  store,
   children,
 }) => {
-  const [store, setStore] = useState<Store>(propsStore);
-  useEffect(() => {
-    setStore(propsStore);
-  }, [propsStore]);
   return (
     <StoreContext.Provider
       value={{
         store,
-        updateStory: newStory =>
-          setStore({
-            ...store,
-            stories: { ...store.stories, [newStory.id as string]: newStory },
-          }),
       }}
     >
       {children}

core/store/src/state/context/story.tsx

@@ -1,4 +1,10 @@
-import React, { FC, createContext, useContext } from 'react';
+import React, {
+  FC,
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+} from 'react';
 import {
   Story,
   getStoryPath,
@@ -22,12 +28,23 @@ export const StoryContextProvider: FC<{ storyId: string | undefined }> = ({
   storyId,
   children,
 }) => {
-  const { store, updateStory } = useContext(StoreContext);
+  const { store } = useContext(StoreContext);
+  const [story, setStory] = useState<Story | undefined>(
+    storyId ? store.stories[storyId] : undefined,
+  );
+  useEffect(() => {
+    setStory(storyId ? store.stories[storyId] : undefined);
+  }, [storyId, store]);
   return (
     <StoryContext.Provider
       value={{
-        story: storyId ? store.stories[storyId] : undefined,
-        updateStory: newValue => updateStory(newValue),
+        story,
+        updateStory: newValue => {
+          if (storyId) {
+            store.stories = { ...store.stories, [storyId]: newValue };
+            setStory(newValue);
+          }
+        },
       }}
     >
       {children}

core/store/src/state/recoil/controls.tsx

@@ -1,10 +1,9 @@
-import React, { FC, Fragment } from 'react';
+import React, { FC } from 'react';
 import {
   selector,
   selectorFamily,
   useRecoilValue,
   useRecoilState,
-  RecoilState,
   RecoilRoot,
 } from 'recoil';
 import { ComponentControls, ComponentControl } from '@component-controls/core';
@@ -13,7 +12,7 @@ import { currentStoryState } from './story';
 import { storeState } from './store';
 
 const currentControlsState = selector<ComponentControls | undefined>({
-  key: 'story_prop',
+  key: 'current_controls',
   get: ({ get }) => {
     const story = get(currentStoryState);
     return story?.controls;
@@ -25,22 +24,6 @@ const currentControlsState = selector<ComponentControls | undefined>({
   },
 });
 
-export const currentControlsPropState: ControlState = selectorFamily<
-  ComponentControl | undefined,
-  string
->({
-  key: 'controls_prop',
-  get: name => ({ get }) => {
-    const controls = get(currentControlsState);
-    return controls ? controls[name] : undefined;
-  },
-  set: name => ({ get, set }, newValue) => {
-    const controls = get(currentControlsState);
-    const updated: ComponentControls = { ...controls, [name]: newValue as any };
-    set(currentControlsState, updated);
-  },
-});
-
 const storyControlsState = selectorFamily<
   ComponentControls | undefined,
   string
@@ -58,47 +41,29 @@ export const useStoryControls = (
 
 export const useControl = <T extends ComponentControl>(
   name: string,
-  recoilSelector: ControlState,
 ): [T, (value: any) => void] => {
-  const [control, setControl] = useRecoilState(recoilSelector(name));
+  const [controls, setControls] = useRecoilState(currentControlsState);
+  const control = controls ? controls[name] : undefined;
   const setValue = (value: any) => {
-    if (control) {
-      setControl({ ...control, value });
-    }
+    setControls({ ...controls, [name]: value });
   };
   return [control as T, setValue];
 };
 
 /**
  * editors state update interface
  */
-export type ControlState = (
-  propName: string,
-) => RecoilState<ComponentControl | undefined>;
+export type ControlUpdateFn = (name: string, newValue: any) => void;
 
-export const ControlsState: FC = ({ children }) => {
-  return <RecoilRoot>{children}</RecoilRoot>;
-};
-export const useControlSelector = (
-  controls: ComponentControls,
-  onChange: (name: string, value: any) => void,
-): ControlState => {
-  const selector = selectorFamily<ComponentControl | undefined, string>({
-    key: 'controls_selector',
-    get: name => () => {
-      return controls[name];
-    },
-    set: name => (_, newValue) => {
-      onChange(name, newValue);
-    },
-  });
-  return selector;
-};
-
-export interface ControlsContextProviderProps {
-  name: string;
+export interface ControlsStateProviderProps {
+  onChange: ControlUpdateFn;
   controls?: ComponentControls;
 }
-export const ControlsContextProvider: FC<ControlsContextProviderProps> = ({
+export const ControlsStateProvider: FC<ControlsStateProviderProps> = ({
+  controls,
+  onChange,
   children,
-}) => <Fragment>{children}</Fragment>;
+}) => {
+  console.log(controls, onChange);
+  return <RecoilRoot>{children}</RecoilRoot>;
+};