Merge pull request #13 from codesandbox/draft/frosty-dust

feat(api): introduce privacy param
codesandbox · May 8, 2024 · d99b7aa · d99b7aa
2 parents e17919a + 498dc9a
commit d99b7aa
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 21 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -10,6 +10,8 @@ const preview: Preview = {
 
       fallbackImport: "@radix-ui/themes",
 
+      privacy: "public",
+
       dependencies: {
         "@radix-ui/themes": "latest",
       },

diff --git a/README.md b/README.md
@@ -20,9 +20,8 @@ Once configured, you can use the "Open in CodeSandbox" button within your Storyb
 
 module.exports = {
   // ...
-  addons: ['@codesandbox/storybook-addon'],
+  addons: ["@codesandbox/storybook-addon"],
 };
-
 ```
 
 <details>
@@ -44,12 +43,12 @@ const preview: Preview = {
        * This sandbox is created inside the given workspace
        * and can be shared with team members.
        */
-      apiToken: <api-token>,
+      apiToken: "<api-token>",
 
       /**
        * @required
-       * Dependencies list to be installed in the sandbox. 
-       * 
+       * Dependencies list to be installed in the sandbox.
+       *
        * @note You cannot use local modules or packages since
        * this story runs in an isolated environment (sandbox)
        * inside CodeSandbox. As such, the sandbox doesn't have
@@ -66,19 +65,28 @@ const preview: Preview = {
        * @required
        * CodeSandbox will try to import all components by default from
        * the given package, in case `mapComponent` property is not provided.
-       * 
-       * This property is useful when your components imports are predictable 
-       * and come from a single package and entry point. 
+       *
+       * This property is useful when your components imports are predictable
+       * and come from a single package and entry point.
        */
       fallbackImport: "@radix-ui/themes",
 
       /**
        * @optional
-       * All required providers to run the sandbox properly, 
+       * The default visibility of the new sandboxes inside the workspace.
+       *
+       * @note Use `private` if there is a private registry or private NPM
+       * configured in your workspace.
+       */
+      privacy: "private" | "public",
+
+      /**
+       * @optional
+       * All required providers to run the sandbox properly,
        * such as themes, i18n, store, and so on.
-       * 
-       * @note Remember to use only the dependencies listed above. 
-       * 
+       *
+       * @note Remember to use only the dependencies listed above.
+       *
        * Example:
        */
       provider: `import { Theme } from "@radix-ui/themes";
@@ -89,38 +97,39 @@ const preview: Preview = {
             <Theme>
               {children}
             </Theme>
-          ) 
+          )
         }`,
     },
   },
 };
 
 export default preview;
 ```
+
 </details>
 
 <details>
   <summary>Story configuration (recommended)</summary>
 
-```ts
+````ts
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof Button> = {
   title: "Example/Button",
   component: Button,
   parameters: {
     codesandbox: {
-     /**
-       * To import all components used within each story in 
+      /**
+       * To import all components used within each story in
        * CodeSandbox, provide all necessary packages and modules.
-       * 
+       *
        * Given the following story:
        * ```js
        * import Provider from "@myscope/mypackage";
        * import { Button } from "@radix-ui/themes";
        * import "@radix-ui/themes/styles.css";
        * ```
-       * 
+       *
        * You need to map all imports to the following:
        */
       mapComponent: {
@@ -143,7 +152,7 @@ const meta: Meta<typeof Button> = {
     },
   },
 };
-```
+````
 
 </details>
 
@@ -154,10 +163,11 @@ Make sure to provide the necessary values for [`apiToken`](https://codesandbox.i
 For now, this addon only support [Component Story Format (CSF)](Component Story Format (CSF)) stories format.
 
 ## Additional Notes
+
 - Ensure that you have proper permissions and access rights to the CodeSandbox workspace specified in the configuration.
 - Verify the correctness of the dependencies and providers listed in the configuration to ensure the sandbox runs smoothly.
 
 ## Roadmap
 
 - [ ] Suppport TypeScript
-- [ ] Introduce more templates support (static, vue, angular...)
+- [ ] Introduce more templates support (static, vue, angular...)
diff --git a/src/Tool.tsx b/src/Tool.tsx
@@ -13,6 +13,7 @@ import { parseFileTree, parseImports } from "./utils";
 export type CSBParameters =
   | {
       apiToken: string;
+      privacy?: "private" | "public";
       fallbackImport?: string;
       mapComponent?: Record<string, string[] | string | true>;
       dependencies?: Record<string, string>;
@@ -175,6 +176,7 @@ export const CodeSandboxTool = memo(function MyAddonSelector({
         body: JSON.stringify({
           title: `${storyData.title} - Storybook`,
           files: prettifiedFiles,
+          privacy: codesandboxParameters.privacy === "public" ? 0 : 2,
         }),
         headers: {
           Authorization: `Bearer ${codesandboxParameters.apiToken}`,
@@ -186,7 +188,7 @@ export const CodeSandboxTool = memo(function MyAddonSelector({
       const data: { data: { alias: string } } = await response.json();
 
       window.open(
-        `https://codesandbox.io/p/sandbox/${data.data.alias}?file=/src/App.js`,
+        `https://codesandbox.io/p/sandbox/${data.data.alias}?file=/src/App.js&utm-source=storybook-addon`,
         "_blank",
       );
 

diff --git a/src/stories/Button.stories.ts b/src/stories/Button.stories.ts
@@ -18,6 +18,7 @@ const meta: Meta<typeof Button> = {
   },
   parameters: {
     codesandbox: {
+      privacy: "private",
       mapComponent: {
         "@myscope/mypackage": "Provider",
         "@radix-ui/themes": ["Button"],