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: `Online Playground`,
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(
+ const { share: enableShare } = useParameter(
ADDON_ID_FOR_PARAMETERS,
DEFAULT_ADDON_PARAMETERS
);
@@ -76,7 +76,7 @@ const EditorToolbar: React.FC = () => {
disabled={isCopied || !shouldAllowCopy}
onClick={onCopy}
/>
- {!disableShare && (
+ {enableShare && (
{
DEFAULT_ADDON_STATE
);
const { hasInitialCodeLoaded } = state;
- const { introCode, disableShare } = useParameter(
+ const { introCode, share: enableShare } = useParameter(
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(
+ const { share: enableShare } = useParameter(
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;