Added building and access via webapp to the Storybook design inventory

There is no detail in this issue, on how this is going to be used, so I'm shooting in the dark a bit.

npm start is for development, but I added the capability there anyways
npm build and npm prod, are (I think) what the production servers use, so I also added the capability to those scripts.

It looks like anyone who navigates to https://wevote.us/storybook will be able to modify the statically built copy of the inventory, but those changes do not seem to effect the master copy (wherever that is stored), since when you regenerate the static files, those local changes are overwritten.  The downside is that those local changes seem to persist between sessions (between different users), so accidental changes could be confusing, and purposeful changes would be lost.

I think there is no harm in making this live, but it will probably need more analysis re: what we are using it for, and how it will be used.  And do we need to restrict access?

Implements https://wevoteusa.atlassian.net/browse/WV-206

package.json

@@ -15,14 +15,14 @@
     "wdio:setup": "node tests/browserstack_automation/buildMobileCapabilities.js",
     "wdio": "wdio ./tests/browserstack_automation/config/wdio.config.js",
     "wdio:upgrade": "ncu -u *wdio* webdriver*",
-    "build": "node node/buildDateFile.js && MINIMIZED=1 webpack --mode production",
+    "build": "node node/buildDateFile.js && npm run build-storybook && MINIMIZED=1 webpack --mode production",
     "buildCordova": "node node/buildDateFile.js && node node/buildSrcCordova && CORDOVA=1 && webpack --mode development && node node/logCompileDate.js",
     "buildCordovaAndLinks": "node node/buildDateFile.js && node node/buildSrcCordova && CORDOVA=1 && webpack --mode development && node node/buildSymLinksRemote.js && bash ./node/unSymLinkIOS.sh && node node/logCompileDate.js",
     "lint": "eslint --format stylish --ext .jsx --ext .js src/js",
     "lintCordova": "eslint --format stylish --ext .jsx --ext .js srcCordova/js",
-    "prod": "node node/buildDateFile.js && MINIMIZED=1 webpack --mode production",
+    "prod": "npm run build",
     "run-prod-local": "node server-prod-local.js",
-    "start": "node node/buildDateFile.js && PROTOCOL=HTTP webpack serve --mode development",
+    "start": "node node/buildDateFile.js && npm run build-storybook && PROTOCOL=HTTP webpack serve --mode development",
     "start-win": "node node/buildDateFile.js && webpack serve --mode development",
     "start-https": "node node/buildDateFile.js && PROTOCOL=HTTPS webpack serve --mode development",
     "start-https-real-certs": "node node/buildDateFile.js && USE_REAL_CERTS=1 && PROTOCOL=HTTPS webpack serve --mode development",
@@ -55,7 +55,6 @@
     "@storybook/addon-essentials": "^7.6.7",
     "@storybook/addon-interactions": "^7.6.7",
     "@storybook/addon-links": "^7.6.7",
-    "@storybook/addon-onboarding": "^1.0.10",
     "@storybook/blocks": "^7.6.7",
     "@storybook/react": "^7.6.7",
     "@storybook/react-webpack5": "^7.6.7",

src/App.jsx

@@ -20,6 +20,7 @@ import { isCordova, isWebApp } from './js/common/utils/isCordovaOrWebApp';
 import { renderLog } from './js/common/utils/logging';
 import Header from './js/components/Navigation/Header';
 import HeaderBarSuspense from './js/components/Navigation/HeaderBarSuspense';
+import StorybookRedirect from './js/components/Widgets/StorybookRedirect';
 import webAppConfig from './js/config';
 import VoterStore from './js/stores/VoterStore';
 import initializeFacebookSDK from './js/utils/initializeFacebookSDK';
@@ -550,6 +551,7 @@ class App extends Component {
                   <Route path="/sign_in_email/:email_secret_key" component={SignInEmailProcess} />
                   <Route path="/setupaccount/:set_up_page" exact component={SetUpAccountRoot} />
                   <Route path="/setupaccount" exact><SetUpAccountRoot /></Route>
+                  <Route path="/storybook"><StorybookRedirect /></Route>
                   <Route path="/squads" exact><Squads /></Route>
                   <Route exact path="/start-a-campaign"><CampaignStartIntro /></Route>
                   <Route path="/terms" component={TermsOfService} />

src/js/components/Widgets/StorybookRedirect.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { renderLog } from '../../common/utils/logging';
+
+
+// React functional component example
+export default function StorybookRedirect () {
+  renderLog('StorybookRedirect functional component');
+
+  return (
+    <a href="/storybook?path=/docs/design-system--docs">Redirect to Html page</a>
+  );
+}

webpack.config.js

@@ -135,6 +135,7 @@ module.exports = (env, argv) => ({
           to: 'img/',
           globOptions: { ignore: ['**/DO-NOT-BUNDLE/**']},
         },
+        { from: 'storybook-static', to: './storybook' },
       ],
     }),
     new MomentLocalesPlugin(),