refactor(share): change naming

.storybook/preview.ts

@@ -16,7 +16,7 @@ const preview: Preview = {
         jsx: `<VibeNext.Heading>Online Playground</VibeNext.Heading>`,
         css: ""
       },
-      disableShare: false,
+      share: true,
     },
   },
 };

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:
 

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"}

src/consts/parameter-consts.ts

@@ -6,4 +6,5 @@ export const DEFAULT_ADDON_PARAMETERS: PlaygroundParameters = {
   autocompletions: {},
   editorTheme: null,
   introCode: null,
+  share: false,
 };

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) {

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 () => {

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>;