Merge pull request #3828 from SailingSteve/steveWebAppFeb14-1117am

Added building and access via webapp to the Storybook design inventory

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>
+  );
+}

storybook-static/README.TXT

@@ -0,0 +1,2 @@
+Feb 13, 2024
+This empty file is needed to allow  `npm run prod` to complete if Storybook static compile failed or was not run

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(),