Merge pull request #1369 from GSA/source-code-addon

Source code addon

.storybook/main.cjs

@@ -6,7 +6,7 @@ module.exports = {
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-
+    './source-code-addon/manager.js',
   ],
 
   staticDirs: [

.storybook/source-code-addon/manager.js

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { AddonPanel, Placeholder } from '@storybook/components';
+import { useParameter, addons, types } from '@storybook/api';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { themes } from '@storybook/theming';
+import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import './source-code.css';
+
+const customOneLight = { ...oneLight };
+customOneLight['pre[class*="language-"]'].background = 'transparent';
+customOneLight['code[class*="language-"]'].background = 'transparent';
+
+addons.register('my/panel', () => {
+  addons.add('my-panel-addon/panel', {
+    title: 'View Code',
+    type: types.PANEL,
+    render: ({ active, key }) => {
+      const preview = useParameter('preview', null);
+      const [selectedTab, setSelectedTab] = useState(null);
+
+      const handleTabClick = (tab) => {
+        setSelectedTab(tab);
+      };
+
+      return (
+        <AddonPanel key={key} active={active}>
+          {preview && preview.length > 0 ? (
+            <div>
+              {preview.map((item, index) => (
+                <button
+                  key={index}
+                  onClick={() => handleTabClick(item.tab)}
+                  className={item.tab === selectedTab ? "activeTabButton" : "tabButton"}
+                >
+                  {item.tab}
+                </button>
+              ))}
+              {preview.map((item, index) => {
+                if (item.tab === selectedTab && item.template) {
+                  return (
+                    <div key={index} className="codeContainer">
+                      <CopyToClipboard text={item.template.default}>
+                        <button className="tabButton copyButton">Copy Code</button>
+                      </CopyToClipboard>
+                      <SyntaxHighlighter language="typescript" style={customOneLight}>
+                        {item.template.default}
+                      </SyntaxHighlighter>
+                    </div>
+                  );
+                }
+                return null;
+              })}
+            </div>
+          ) : (
+            <Placeholder>No preview data available for this story.</Placeholder>
+          )}
+        </AddonPanel>
+      );
+    },
+  });
+});
+
+addons.setConfig({
+  theme: themes.light,
+});

.storybook/source-code-addon/source-code.css

@@ -0,0 +1,29 @@
+.tabButton {
+    padding: 10px 15px;
+    margin: 5px;
+    border: none;
+    cursor: pointer;
+    background-color: #e0e0e0;
+  }
+
+  .activeTabButton {
+    padding: 10px 15px;
+    margin: 5px;
+    border: none;
+    cursor: pointer;
+    background-color: #c0c0c0;
+  }
+
+  .codeContainer {
+    position: relative;
+  }
+
+  .copyButton {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin-right: 2rem;
+  }
+  .tabButton:active {
+    background-color: #c0c0c0;
+  }

package.json

@@ -120,7 +120,9 @@
     "postcss": "^8.3.5",
     "prettier": "2.0.4",
     "react": "^16.4.2",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^16.4.2",
+    "react-syntax-highlighter": "^15.5.0",
     "storybook": "^7.5.0",
     "storybook-addon-preview": "^2.3.0",
     "ts-node": "~7.0.0",