Added Storybook addon for linking to Figma or GitHub in component stories

This commit includes a Storybook addon that allows linking to Figma or GitHub directly from any component's story. This enhancement provides a convenient way to access the design or source code of the component, improving the workflow for developers and designers.

Author: Hector Arce De Las Heras

.storybook/figmaAddon/register.tsx

@@ -0,0 +1,47 @@
+import { addons, types } from '@storybook/addons';
+import { IconButton } from '@storybook/components';
+import { useParameter } from '@storybook/manager-api';
+import { styled } from '@storybook/theming';
+
+import React from 'react';
+
+const ADDON_ID = 'myaddon/figma';
+const PARAM_KEY = 'figmaUrl';
+
+const FigmaIcon = styled.img({
+  width: '20px',
+  height: '20px',
+  marginRight: '10px',
+});
+
+addons.register(ADDON_ID, () => {
+  addons.add(ADDON_ID, {
+    title: 'Figma',
+    type: types.TOOL,
+    match: ({ viewMode }) => viewMode === 'story',
+    render: () => {
+      const figmaLink = useParameter(PARAM_KEY, '#');
+
+      if (figmaLink === '#') {
+        return null;
+      }
+
+      return (
+        <IconButton
+          key="figma"
+          title="Open in Figma"
+          onClick={() => window.open(figmaLink, '_blank')}
+          placeholder={''}
+          onPointerEnterCapture={undefined}
+          onPointerLeaveCapture={undefined}
+        >
+          <FigmaIcon
+            src="data:image/svg+xml;base64,PHN2ZyBpZD0iRmxhdCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjU2IDI1NiI+CiAgPHBhdGggZD0iTTE4My4wMzk1NSw5NC4wMDA0OUEzOS45ODcwNiwzOS45ODcwNiwwLDAsMCwxNjIsMjAuMDAxSDk0QTM5Ljk4NzA2LDM5Ljk4NzA2LDAsMCwwLDcyLjk2MDQ1LDk0LjAwMDQ5LDM5Ljk2Mzc1LDM5Ljk2Mzc1LDAsMCwwLDcyLjk2MTQzLDE2MiwzOS45OTI0LDM5Ljk5MjQsMCwxLDAsMTM0LDE5NS45OTk1MXYtMzkuNDdhMzkuOTgwODQsMzkuOTgwODQsMCwxLDAsNDkuMDM5NTUtNjIuNTI5Wk0xOTAsNjAuMDAxYTI4LjAzMTE0LDI4LjAzMTE0LDAsMCwxLTI3Ljk4MDQ3LDI3Ljk5OTUxTDE2Miw4OGwtLjAzODU3LjAwMUwxMzQsODhWMzIuMDAxaDI4QTI4LjAzMTQ1LDI4LjAzMTQ1LDAsMCwxLDE5MCw2MC4wMDFabS0xMjQsMGEyOC4wMzE0NSwyOC4wMzE0NSwwLDAsMSwyOC0yOGgyOFY4OEg5NGwtLjAxOS4wMDA0OUEyOC4wMzEzMiwyOC4wMzEzMiwwLDAsMSw2Niw2MC4wMDFaTTY2LDEyOGEyOC4wMzEyMywyOC4wMzEyMywwLDAsMSwyNy45ODEtMjcuOTk5NTFMOTQsMTAwLjAwMWwyOC0uMDAwNzRWMTU1Ljk5OUw5NCwxNTZBMjguMDMxNDYsMjguMDMxNDYsMCwwLDEsNjYsMTI4Wm0yOCw5NS45OTlBMjcuOTk5NTEsMjcuOTk5NTEsMCwxLDEsOTQsMTY4bDI4LS4wMDA3M3YyOC4wMDAyNEEyOC4wMzEzNSwyOC4wMzEzNSwwLDAsMSw5NCwyMjMuOTk5Wk0xNjIsMTU2YTI3Ljk5OTUyLDI3Ljk5OTUyLDAsMCwxLS4wMzg1Ny01NS45OTlIMTYybC4wMTktLjAwMDQ5QTI3Ljk5OTc2LDI3Ljk5OTc2LDAsMCwxLDE2MiwxNTZaIi8+Cjwvc3ZnPgo="
+            alt="Figma"
+          />
+          Figma
+        </IconButton>
+      );
+    },
+  });
+});

.storybook/githubAddon/register.tsx

@@ -0,0 +1,47 @@
+import { addons, types } from '@storybook/addons';
+import { IconButton } from '@storybook/components';
+import { useParameter } from '@storybook/manager-api';
+import { styled } from '@storybook/theming';
+
+import React from 'react';
+
+const ADDON_ID = 'myaddon/github';
+const PARAM_KEY = 'githubUrl';
+
+const GithubIcon = styled.img({
+  width: '20px',
+  height: '20px',
+  marginRight: '10px',
+});
+
+addons.register(ADDON_ID, () => {
+  addons.add(ADDON_ID, {
+    title: 'Github',
+    type: types.TOOL,
+    match: ({ viewMode }) => viewMode === 'story',
+    render: () => {
+      const githubLink = useParameter(PARAM_KEY, '#');
+
+      if (githubLink === '#') {
+        return null;
+      }
+
+      return (
+        <IconButton
+          key="github"
+          title="Open in Github"
+          onClick={() => window.open(githubLink, '_blank')}
+          placeholder={''}
+          onPointerEnterCapture={undefined}
+          onPointerLeaveCapture={undefined}
+        >
+          <GithubIcon
+            src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Imljb25fZ2l0aHViIj4KPHBhdGggaWQ9IlZlY3RvciIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMiAxQzUuOTIyNSAxIDEgNS45MjI1IDEgMTJDMSAxNi44Njc1IDQuMTQ4NzUgMjAuOTc4OCA4LjUyMTI1IDIyLjQzNjNDOS4wNzEyNSAyMi41MzI1IDkuMjc3NSAyMi4yMDI1IDkuMjc3NSAyMS45MTM3QzkuMjc3NSAyMS42NTI1IDkuMjYzNzUgMjAuNzg2MyA5LjI2Mzc1IDE5Ljg2NUM2LjUgMjAuMzczOCA1Ljc4NSAxOS4xOTEyIDUuNTY1IDE4LjU3MjVDNS40NDEyNSAxOC4yNTYzIDQuOTA1IDE3LjI4IDQuNDM3NSAxNy4wMTg3QzQuMDUyNSAxNi44MTI1IDMuNTAyNSAxNi4zMDM4IDQuNDIzNzUgMTYuMjlDNS4yOSAxNi4yNzYyIDUuOTA4NzUgMTcuMDg3NSA2LjExNSAxNy40MTc1QzcuMTA1IDE5LjA4MTIgOC42ODYyNSAxOC42MTM4IDkuMzE4NzUgMTguMzI1QzkuNDE1IDE3LjYxIDkuNzAzNzUgMTcuMTI4NyAxMC4wMiAxNi44NTM3QzcuNTcyNSAxNi41Nzg3IDUuMDE1IDE1LjYzIDUuMDE1IDExLjQyMjVDNS4wMTUgMTAuMjI2MiA1LjQ0MTI1IDkuMjM2MjUgNi4xNDI1IDguNDY2MjVDNi4wMzI1IDguMTkxMjUgNS42NDc1IDcuMDYzNzUgNi4yNTI1IDUuNTUxMjVDNi4yNTI1IDUuNTUxMjUgNy4xNzM3NSA1LjI2MjUgOS4yNzc1IDYuNjc4NzVDMTAuMTU3NSA2LjQzMTI1IDExLjA5MjUgNi4zMDc1IDEyLjAyNzUgNi4zMDc1QzEyLjk2MjUgNi4zMDc1IDEzLjg5NzUgNi40MzEyNSAxNC43Nzc1IDYuNjc4NzVDMTYuODgxMyA1LjI0ODc1IDE3LjgwMjUgNS41NTEyNSAxNy44MDI1IDUuNTUxMjVDMTguNDA3NSA3LjA2Mzc1IDE4LjAyMjUgOC4xOTEyNSAxNy45MTI1IDguNDY2MjVDMTguNjEzOCA5LjIzNjI1IDE5LjA0IDEwLjIxMjUgMTkuMDQgMTEuNDIyNUMxOS4wNCAxNS42NDM4IDE2LjQ2ODggMTYuNTc4NyAxNC4wMjEzIDE2Ljg1MzdDMTQuNDIgMTcuMTk3NSAxNC43NjM4IDE3Ljg1NzUgMTQuNzYzOCAxOC44ODg4QzE0Ljc2MzggMjAuMzYgMTQuNzUgMjEuNTQyNSAxNC43NSAyMS45MTM3QzE0Ljc1IDIyLjIwMjUgMTQuOTU2MyAyMi41NDYyIDE1LjUwNjMgMjIuNDM2M0MxOS44NTEyIDIwLjk3ODggMjMgMTYuODUzOCAyMyAxMkMyMyA1LjkyMjUgMTguMDc3NSAxIDEyIDFaIiBmaWxsPSIjMUIxRjIzIi8+CjwvZz4KPC9zdmc+Cg=="
+            alt="github"
+          />
+          Github
+        </IconButton>
+      );
+    },
+  });
+});

.storybook/main.ts

@@ -14,6 +14,8 @@ const config: StorybookConfig = {
     '@storybook/addon-a11y',
     '@storybook/addon-coverage',
     './tokensAddons/register.tsx',
+    './figmaAddon/register.tsx',
+    './githubAddon/register.tsx',
   ],
   framework: {
     name: '@storybook/react-vite',