docs(): improve page layout

packages/components/.storybook/addons/source/index.js

@@ -0,0 +1,5 @@
+function managerEntries(entry = []) {
+  return [...entry, require.resolve('./register')] //👈 Addon implementation
+}
+
+module.exports = { managerEntries }

packages/components/.storybook/addons/source/register.js

@@ -0,0 +1,44 @@
+import React from 'react'
+
+import { addons, types } from '@storybook/addons'
+import { useParameter } from '@storybook/api'
+import { AddonPanel } from '@storybook/components'
+
+const PARAM_KEY = 'mySource'
+const ADDON_ID = 'mysource'
+const PANEL_ID = `${ADDON_ID}/panel`
+
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
+
+// give a unique name for the panel
+const MyPanel = () => {
+  const value = useParameter(PARAM_KEY, null)
+  if (!value) {
+    return (
+      <div style={{ margin: '16px' }}>
+        <p>No source code available</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="my-source-code">
+      <SyntaxHighlighter language="html" style={atomDark}>
+        {value}
+      </SyntaxHighlighter>
+    </div>
+  )
+}
+
+addons.register(ADDON_ID, api => {
+  addons.add(PANEL_ID, {
+    type: types.PANEL,
+    title: 'Source',
+    render: ({ active, key }) => (
+      <AddonPanel active={active} key={key}>
+        <MyPanel />
+      </AddonPanel>
+    ),
+  })
+})

packages/components/.storybook/main.js

@@ -2,7 +2,7 @@ const isDevelopment = process.env.STORYBOOK_MODE === 'dev'
 
 module.exports = {
   stories: ['../src/**/intro.stories.mdx', '../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-a11y'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-a11y', './addons/source/index.js'],
   features: {
     postcss: false,
   },

packages/components/.storybook/manager-head.html

@@ -1,3 +1,5 @@
 <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicon/apple-touch-icon.png" />
 <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon/favicon-16x16.png" />
 <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon/favicon-32x32.png" />
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atelier-cave-dark.min.css" />
+<link rel="stylesheet" type="text/css" href="assets/css/main.css" />

packages/components/.storybook/preview.js

@@ -5,7 +5,7 @@ app.config.compilerOptions.isCustomElement = tag => tag.startsWith('bal-doc-')
 export const decorators = [
   story => ({
     components: { story },
-    template: '<bal-doc-app><story /></bal-doc-app>',
+    template: '<bal-doc-app id="custom-wrapper"><story /></bal-doc-app>',
   }),
 ]