Merge pull request #19897 from mozilla/FXA-12878

fix(storybook): dedup locale files in build output

Author: MagentaManifold

libs/accounts/email-renderer/.storybook/main.ts

@@ -10,8 +10,7 @@ export default {
     options: {},
   },
   stories: ['../src/**/*.stories.ts'],
-  staticDirs:
-    process.env.STORYBOOK_BUILD !== 'true' ? ['../public'] : undefined,
+  staticDirs: process.env.STORYBOOK_BUILD === 'true' ? undefined : ['..'],
   addons: [
     '@storybook/addon-webpack5-compiler-babel',
     '@storybook/addon-docs',

libs/accounts/email-renderer/project.json

@@ -62,7 +62,7 @@
       "dependsOn": ["l10n-merge", "build-css", "build-ts"],
       "options": {
         "commands": [
-          "nx run accounts-email-renderer:build-storybook-only",
+          "STORYBOOK_BUILD=true nx run accounts-email-renderer:build-storybook-only",
           "nx run accounts-email-renderer:build-storybook-copy-locales",
           "nx run accounts-email-renderer:build-storybook-copy-templates"
         ],
@@ -97,7 +97,7 @@
     },
     "storybook": {
       "executor": "@nx/storybook:storybook",
-      "dependsOn": ["build-css", "build-ts"],
+      "dependsOn": ["l10n-merge", "build-css", "build-ts"],
       "options": {
         "port": 4400,
         "configDir": "libs/accounts/email-renderer/.storybook",
@@ -116,7 +116,10 @@
         "cwd": "."
       },
       "inputs": ["{projectRoot}/gruntfile.js", "{projectRoot}/src/**/en.ftl"],
-      "outputs": ["{projectRoot}/public/locales/en/branding.ftl", "{projectRoot}/public/locales/en/emails.ftl"]
+      "outputs": [
+        "{projectRoot}/public/locales/en/branding.ftl",
+        "{projectRoot}/public/locales/en/emails.ftl"
+      ]
     },
     "l10n-merge": {
       "dependsOn": ["l10n-prime"],

nx.json

@@ -21,7 +21,7 @@
       "cache": true
     },
     "build-storybook": {
-      "dependsOn": ["build"],
+      "dependsOn": ["prebuild", "^build"],
       "inputs": ["production", "^production"],
       "outputs": ["{projectRoot}/storybook-static"],
       "cache": true
@@ -141,9 +141,7 @@
     },
     "l10n-prime": {
       "inputs": ["{workspaceRoot}/external/l10n/**/*.@(ftl)"],
-      "outputs": [
-        "{projectRoot}/public"
-      ],
+      "outputs": ["{projectRoot}/public"],
       "cache": true
     },
     "@nx/jest:jest": {
@@ -257,9 +255,7 @@
         "buildDepsTargetName": "build-deps",
         "watchDepsTargetName": "watch-deps"
       },
-      "exclude": [
-        "packages/**/*"
-      ]
+      "exclude": ["packages/**/*"]
     }
   ],
   "tui": {

packages/fxa-react/.storybook/main.js

@@ -4,6 +4,7 @@
 
 module.exports = {
   stories: ['../**/*.stories.tsx'],
+  staticDirs: ['../public'],
   core: {
     builder: 'webpack5',
   },

packages/fxa-react/package.json

@@ -16,10 +16,11 @@
     "build": "nx build-l10n && nx build-css && nx build-ts",
     "build-css": "npx tailwindcss -i ./styles/tailwind.css -o ./styles/tailwind.out.css",
     "build-ts": "tsc --build && tsc-alias",
-    "build-storybook": "NODE_ENV=production yarn build-css && NODE_OPTIONS=--openssl-legacy-provider storybook build && cp -r public/locales ./storybook-static/locales",
-    "build-l10n": "nx l10n-merge && nx l10n-merge-test",
+    "build-storybook": "nx build-l10n && NODE_ENV=production yarn build-css && NODE_OPTIONS=--openssl-legacy-provider storybook build",
+    "build-l10n": "nx l10n-merge && nx l10n-bundle && nx l10n-merge-test",
     "compile": "nx build-ts",
     "clean": "rimraf dist",
+    "l10n-bundle": "yarn l10n:bundle packages/fxa-react branding,react",
     "l10n-prime": "yarn l10n:prime packages/fxa-react",
     "l10n-merge": "yarn grunt merge-ftl",
     "l10n-merge-test": "yarn grunt merge-ftl:test",

packages/fxa-settings/package.json

@@ -9,7 +9,7 @@
     "build-static": "yarn grunt hash-static",
     "build-ts": "tsc --build",
     "build-css": "NODE_ENV=production tailwindcss -i ./src/styles/tailwind.css -o ./src/styles/tailwind.out.css --postcss",
-    "build-storybook": "NODE_ENV=production STORYBOOK_BUILD=1 yarn build-css && NODE_OPTIONS=--openssl-legacy-provider sb build && cp -r public/locales ./storybook-static/locales",
+    "build-storybook": "nx build-l10n && NODE_ENV=production STORYBOOK_BUILD=1 yarn build-css && NODE_OPTIONS=--openssl-legacy-provider sb build",
     "build-l10n": "nx l10n-merge && nx l10n-bundle && nx l10n-merge-test",
     "build-react": "nx build-react-dev && nx build-react-stage && nx build-react-prod",
     "build-react-dev": "SKIP_PREFLIGHT_CHECK=true INLINE_RUNTIME_CHUNK=false NODE_OPTIONS=--openssl-legacy-provider BUILD_PATH=build/dev node scripts/build.js",