add configurable branch and file path

Author: sulco

src/Tool.tsx

@@ -5,7 +5,10 @@ import { PARAM_KEY, TOOL_ID } from "./constants";
 import CodeflowLogo from "./components/CodeflowLogo";
 
 export const Tool = function MyAddonSelector() {
-  const githubUrl = useParameter(PARAM_KEY);
+  const repositoryUrl = useParameter<string>(PARAM_KEY.REPO, null);
+  const branch = useParameter<string>(PARAM_KEY.BRANCH, 'main');
+  const filePath = useParameter<string>(PARAM_KEY.FILE_PATH, null);
+
   const api = useStorybookApi();
   const [disabled, setDisabled] = useState(false)
 
@@ -15,14 +18,22 @@ export const Tool = function MyAddonSelector() {
     return null;
   }
 
-  if (!githubUrl && !disabled) {
+  if (!repositoryUrl && !disabled) {
     console.warn(`"${PARAM_KEY}" parameter not defined. Make sure to configure it in your story.`);
     setDisabled(true);
-  } else if (githubUrl && disabled) {
+  } else if (repositoryUrl && disabled) {
     setDisabled(false);
   }
 
-  const stackblitzUrl = `https://pr.new/${githubUrl}`;
+  let stackblitzUrl = `https://pr.new/${repositoryUrl}`;
+  if (filePath) {
+    stackblitzUrl = `${stackblitzUrl}/blob/${branch}/${filePath}`;
+    /* 
+     * We've just addded `/` between all segments not caring if user already appended or prepanded them,
+     * so let's remove any possible double `//` (not preceded by `:` so we don't mess up the `https://`)
+     */
+    stackblitzUrl = stackblitzUrl.replaceAll(/(?<!:)\/\//g, '/')
+  }
 
   return (
     <IconButton

src/constants.ts

@@ -1,3 +1,7 @@
 export const ADDON_ID = "storybook/stackblitz";
 export const TOOL_ID = `${ADDON_ID}/tool`;
-export const PARAM_KEY = `repositoryUrl`;
+export const PARAM_KEY = {
+    FILE_PATH: `filePath`,
+    REPO: `repositoryUrl`,
+    BRANCH: `branch`,
+};

src/preview.ts

@@ -18,7 +18,7 @@ import { PARAM_KEY } from "./constants";
 
 const preview: ProjectAnnotations<Renderer> = {
   parameters: {
-    [PARAM_KEY]: `https://github.com/stackblitz/docs`,
+    [PARAM_KEY.REPO]: `https://github.com/stackblitz/docs`,
   }
 };
 

src/stories/Button.stories.ts

@@ -28,6 +28,7 @@ export const Primary: Story = {
   },
   parameters: {
     // repositoryUrl: `https://github.com/stackblitz/docs`
+    filePath: 'docs/links.ts'
   }
 };
 

tsconfig.json

@@ -7,7 +7,7 @@
     "incremental": false,
     "isolatedModules": true,
     "jsx": "react",
-    "lib": ["es2020", "dom"],
+    "lib": ["es2021", "dom"],
     "module": "commonjs",
     "noImplicitAny": true,
     "rootDir": "./src",