fix: randomize state

ccontrols · Jul 28, 2020 · 8e74f55 · 8e74f55
1 parent d1543b6
commit 8e74f55
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 22 deletions.
diff --git a/core/store/src/serialization/BroadcastStore.ts b/core/store/src/serialization/BroadcastStore.ts
@@ -17,7 +17,7 @@ export interface MessageType {
 }
 
 export class BroadcastStore implements Store {
-  config: RunConfiguration | undefined;
+  config: RunConfiguration = {};
   docs: Documents = {};
   stories: StoreStories = {};
   components: StoreComponents = {};

diff --git a/core/store/src/state/context/controls.tsx b/core/store/src/state/context/controls.tsx
@@ -1,9 +1,13 @@
 import React, { FC, createContext, useContext } from 'react';
-import { ComponentControls, ComponentControl } from '@component-controls/core';
+import {
+  ComponentControls,
+  ComponentControl,
+  mergeControlValues,
+} from '@component-controls/core';
 
 import { StoryContext, useStoryById } from './story';
 
-export type ControlUpdateFn = (name: string, newValue: any) => void;
+export type ControlUpdateFn = (name: string | undefined, newValue: any) => void;
 
 export interface ControlsContextProps {
   controls?: ComponentControls;
@@ -19,15 +23,12 @@ export const ControlsContextStoryProvider: FC = ({ children }) => {
     <ControlsContext.Provider
       value={{
         controls: story ? story.controls : undefined,
-        updateValue: (name: string, newValue: any) => {
+        updateValue: (name: string | undefined, newValue: any) => {
           if (story) {
             const storyControls = story.controls || {};
             updateStory({
               ...story,
-              controls: {
-                ...storyControls,
-                [name]: { ...storyControls[name], value: newValue },
-              },
+              controls: mergeControlValues(storyControls, name, newValue),
             });
           }
         },
@@ -67,10 +68,10 @@ export const ControlsStateProvider: FC<ControlsStateProviderProps> = ({
 };
 
 export const useControl = <T extends ComponentControl>(
-  name: string,
+  name?: string,
 ): [T, (value: any) => void] => {
   const { controls, updateValue } = useContext(ControlsContext);
-  const control = controls ? controls[name] : undefined;
+  const control = controls ? (name ? controls[name] : controls) : undefined;
   const setValue = (value: any) => {
     updateValue(name, value);
   };

diff --git a/core/store/src/state/recoil/controls.tsx b/core/store/src/state/recoil/controls.tsx
@@ -6,7 +6,11 @@ import {
   useRecoilState,
   RecoilRoot,
 } from 'recoil';
-import { ComponentControls, ComponentControl } from '@component-controls/core';
+import {
+  ComponentControls,
+  ComponentControl,
+  mergeControlValues,
+} from '@component-controls/core';
 
 import { currentStoryState } from './story';
 import { storeState } from './store';
@@ -40,12 +44,12 @@ export const useStoryControls = (
 ): ComponentControls | undefined => useRecoilValue(storyControlsState(storyId));
 
 export const useControl = <T extends ComponentControl>(
-  name: string,
+  name?: string,
 ): [T, (value: any) => void] => {
   const [controls, setControls] = useRecoilState(currentControlsState);
-  const control = controls ? controls[name] : undefined;
-  const setValue = (value: any) => {
-    setControls({ ...controls, [name]: value });
+  const control = controls ? (name ? controls[name] : controls) : undefined;
+  const setValue = (newValue: any) => {
+    setControls(mergeControlValues(controls || {}, name, newValue));
   };
   return [control as T, setValue];
 };

diff --git a/ui/blocks/src/PropsTable/BasePropsTable.tsx b/ui/blocks/src/PropsTable/BasePropsTable.tsx
@@ -12,6 +12,7 @@ import {
   ComponentInfo,
   visibleControls,
 } from '@component-controls/core';
+import { useControl } from '@component-controls/store';
 
 import {
   Table,
@@ -53,6 +54,7 @@ export const BasePropsTable: FC<BasePropsTableProps> = ({
   const [copied, setCopied] = useState(false);
   const story = useCurrentStory();
   const info: Partial<ComponentInfo> = component.info || {};
+  const [, setControlValue] = useControl();
   const controls = useMemo(() => {
     const storyControls = visibility !== 'info' ? story?.controls || {} : {};
     return visibleControls(storyControls, story);
@@ -323,6 +325,14 @@ export const BasePropsTable: FC<BasePropsTableProps> = ({
     useControlsActions({
       controls,
       storyId: story?.id,
+      setControlValue: (
+        storyId: string,
+        propertyName: string | undefined,
+        value: any,
+      ) => {
+        setControlValue(value);
+        console.log(storyId, propertyName, value);
+      },
     }),
   );
   return <ActionContainer actions={actions}>{table}</ActionContainer>;

diff --git a/ui/editors/src/ArrayEditor/ArrayEditor.tsx b/ui/editors/src/ArrayEditor/ArrayEditor.tsx
@@ -31,7 +31,7 @@ interface RowEditorProps {
   control: ComponentControlArray;
   row: any;
   Editor: PropertyEditor;
-  onChange: (name: string, value: any) => void;
+  onChange: (name: string | undefined, value: any) => void;
 }
 const RowEditor: FC<RowEditorProps> = ({
   propName,
@@ -83,11 +83,15 @@ export const ArrayEditor: PropertyEditor<ArrayEditorProps> = ({
   const [control, setProp] = useControl<ComponentControlArray>(name);
   const { editLabel: controlEditLabel } = control;
   const [isOpen, setIsOpen] = React.useState(false);
-  const handleChange = (rowIndex: number, propName: string, value: any) => {
+  const handleChange = (
+    rowIndex: number,
+    propName: string | undefined,
+    value: any,
+  ) => {
     if (Array.isArray(control.value)) {
       setProp(
         control.value.map((row, index) =>
-          rowIndex === index ? { ...row, [propName]: value } : row,
+          rowIndex === index ? { ...row, [propName as string]: value } : row,
         ),
       );
     }
@@ -142,9 +146,10 @@ export const ArrayEditor: PropertyEditor<ArrayEditorProps> = ({
                                   propName={key}
                                   row={row}
                                   Editor={Editor}
-                                  onChange={(propName: string, value: any) =>
-                                    handleChange(idx, propName, value)
-                                  }
+                                  onChange={(
+                                    propName: string | undefined,
+                                    value: any,
+                                  ) => handleChange(idx, propName, value)}
                                 />
                               </Flex>
                             </td>

diff --git a/ui/editors/src/ObjectEditor/ObjectEditor.tsx b/ui/editors/src/ObjectEditor/ObjectEditor.tsx
@@ -42,7 +42,7 @@ export const ObjectEditor: PropertyEditor<ObjectEditorProps> = ({
 
   const { editLabel: controlEditLabel } = control;
   const [isOpen, setIsOpen] = React.useState(false);
-  const handleChange = (childName: string, value: any) => {
+  const handleChange = (childName: string | undefined, value: any) => {
     onChange(mergeControlValues(control.value as any, childName, value));
   };
   let children: ({