Merge pull request #240 from storybookjs/feature/updated-figma-share-url

Support for the new Figma share URL

.github/workflows/check-pushes.yml

@@ -17,7 +17,7 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Check files are formatted with Prettier
-        run: npx prettier --check README.md CHANGELOG.md CONTRIBUTING.md package.json "packages/**/*.{js,jsx,ts,tsx,md,mdx,json}"
+        run: npx prettier --check README.md CONTRIBUTING.md package.json "packages/**/*.{js,jsx,ts,tsx,md,mdx,json}"
       - name: Check TypeScript typings
         run: |
           cd packages/storybook-addon-designs

.prettierignore

@@ -1,6 +1,4 @@
 storybook-static
 cjs
 esm
-
-# Auto generated file
-/packages/storybook-addon-designs/CHANGELOG.md
+CHANGELOG.md

packages/examples/stories/tests/issues/239.stories.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+import { Button } from "../../Button";
+
+export default {
+  title: "Tests/Issues/#239",
+  render() {
+    return <Button>Button</Button>;
+  },
+};
+
+export const NewURL = {
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample?node-id=0%3A1&t=QfPVIRalrysutNxH-1",
+    },
+  },
+};

packages/storybook-addon-designs/src/manager/components/Figma.tsx

@@ -7,7 +7,7 @@ import { IFrame } from "./IFrame";
 import { FigmaConfig, IFrameConfigBase } from "../../config";
 
 export const figmaURLPattern =
-  /https:\/\/([w.-]+.)?figma.com\/(file|proto)\/([0-9a-zA-Z]{22,128})(?:\/.*)?$/;
+  /https:\/\/[\w.-]+\.?figma.com\/([\w-]+)\/([0-9a-zA-Z]{22,128})(?:\/.*)?$/;
 
 export const isFigmaURL = (url: string) => figmaURLPattern.test(url);
 

packages/storybook-addon-designs/src/manager/components/Figspec.tsx

@@ -95,7 +95,7 @@ export const Figspec: FC<Props> = ({ config }) => {
         throw new Error(config.url + " is not a valid Figma URL.");
       }
 
-      const [, , , fileKey] = match;
+      const [, , fileKey] = match;
 
       const url = new URL(config.url);