From d52b865c0147e07c4db564ad45027eaa0e83c255 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Tue, 26 Mar 2024 16:22:24 +0200
Subject: [PATCH] refactor(share): change naming

---
 .storybook/preview.ts                   | 2 +-
 README.md                               | 1 +
 src/components/Editor/EditorToolbar.tsx | 4 ++--
 src/consts/parameter-consts.ts          | 1 +
 src/hooks/useInitialCode.ts             | 6 +++---
 src/hooks/useShare.ts                   | 6 +++---
 src/types.ts                            | 2 +-
 7 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 0d58556..dc1a2a7 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -16,7 +16,7 @@ const preview: Preview = {
         jsx: `<VibeNext.Heading>Online Playground</VibeNext.Heading>`,
         css: ""
       },
-      disableShare: false,
+      share: true,
     },
   },
 };
diff --git a/README.md b/README.md
index 992a008..87ce7ca 100644
--- a/README.md
+++ b/README.md
@@ -56,6 +56,7 @@ The addon configuration is done through Storybook's `preview`. Few of the parame
 - `autocompletions`: Optional. An array of autocompletions that should be used on the playground. Default is an empty array. We recommend on using `react-docgen` to generate a documentation output and run our util function on the output. You can use whatever tool you'd like as long as it matches the expected format in the addon. _Default is no autocompletions._
 - `editorTheme`: Optional. The theme that should be used on the playground. _Default is your Storybook theme._
 - `initialCode`: Optional. The initial code ("welcome") that should be rendered on the playground. _Default is empty editor._
+- `share`: Optional. A boolean that allow users to share the code. _Default is false._
 
 On your `.storybook/preview.ts` file, you should add something similar to the following:
 
diff --git a/src/components/Editor/EditorToolbar.tsx b/src/components/Editor/EditorToolbar.tsx
index f974a5e..f1f3819 100644
--- a/src/components/Editor/EditorToolbar.tsx
+++ b/src/components/Editor/EditorToolbar.tsx
@@ -31,7 +31,7 @@ const EditorToolbar: React.FC = () => {
     PANEL_ID,
     DEFAULT_ADDON_STATE
   );
-  const { disableShare } = useParameter<PlaygroundParameters>(
+  const { share: enableShare } = useParameter<PlaygroundParameters>(
     ADDON_ID_FOR_PARAMETERS,
     DEFAULT_ADDON_PARAMETERS
   );
@@ -76,7 +76,7 @@ const EditorToolbar: React.FC = () => {
         disabled={isCopied || !shouldAllowCopy}
         onClick={onCopy}
       />
-      {!disableShare && (
+      {enableShare && (
         <EditorToolbarButton
           tooltip={shouldAllowShare ? "" : "Editor is empty"}
           text={isShareCopied ? "Copied!" : "Share"}
diff --git a/src/consts/parameter-consts.ts b/src/consts/parameter-consts.ts
index 501fe63..2a0b6da 100644
--- a/src/consts/parameter-consts.ts
+++ b/src/consts/parameter-consts.ts
@@ -6,4 +6,5 @@ export const DEFAULT_ADDON_PARAMETERS: PlaygroundParameters = {
   autocompletions: {},
   editorTheme: null,
   introCode: null,
+  share: false,
 };
diff --git a/src/hooks/useInitialCode.ts b/src/hooks/useInitialCode.ts
index 9fa1b84..866576f 100644
--- a/src/hooks/useInitialCode.ts
+++ b/src/hooks/useInitialCode.ts
@@ -21,7 +21,7 @@ const useInitialCode = () => {
     DEFAULT_ADDON_STATE
   );
   const { hasInitialCodeLoaded } = state;
-  const { introCode, disableShare } = useParameter<PlaygroundParameters>(
+  const { introCode, share: enableShare } = useParameter<PlaygroundParameters>(
     ADDON_ID_FOR_PARAMETERS,
     DEFAULT_ADDON_PARAMETERS
   );
@@ -35,14 +35,14 @@ const useInitialCode = () => {
   }, [getQueryParam]);
 
   const initialCodeToSet = useMemo(() => {
-    if (!disableShare && hasValidCode(sharedCode)) {
+    if (enableShare && hasValidCode(sharedCode)) {
       return sharedCode;
     }
     if (hasValidCode(introCode)) {
       return introCode;
     }
     return DEFAULT_ADDON_STATE.code;
-  }, [disableShare, sharedCode, introCode]);
+  }, [enableShare, sharedCode, introCode]);
 
   useEffect(() => {
     if (hasInitialCodeLoaded || introCode === null) {
diff --git a/src/hooks/useShare.ts b/src/hooks/useShare.ts
index 7381c90..0f74c66 100644
--- a/src/hooks/useShare.ts
+++ b/src/hooks/useShare.ts
@@ -17,15 +17,15 @@ interface UseShareReturnType {
 
 const useShare = (code: Code): UseShareReturnType => {
   const { playgroundStoryBaseUrl } = usePlaygroundState();
-  const { disableShare } = useParameter<PlaygroundParameters>(
+  const { share: enableShare } = useParameter<PlaygroundParameters>(
     ADDON_ID_FOR_PARAMETERS,
     DEFAULT_ADDON_PARAMETERS
   );
   const [isShareCopied, setShareCopied] = useState(false);
 
   const shouldAllowShare = useMemo(
-    () => Boolean(code?.jsx || code?.css) && !disableShare,
-    [code?.css, code?.jsx, disableShare]
+    () => Boolean(code?.jsx || code?.css) && enableShare,
+    [code?.css, code?.jsx, enableShare]
   );
 
   const onShare = useCallback(async () => {
diff --git a/src/types.ts b/src/types.ts
index c81a8c3..d379de9 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -6,7 +6,7 @@ export interface PlaygroundParameters {
   autocompletions?: AutocompletionsMetadata;
   editorTheme?: EditorTheme;
   introCode?: Code;
-  disableShare?: boolean;
+  share?: boolean;
 }
 
 type Components = Record<string, React.ComponentType | React.ExoticComponent>;