Move story images inside repo (#766)

* feat: move story and editor images inside repo

---------

Co-authored-by: Vladislav Kharitonov <[email protected]>

Author: gorgeousvlad

.github/workflows/main-preview.yml

@@ -4,6 +4,9 @@ on:
   push:
     branches: [main]
 
+env:
+  PREVIEW_DEST_PATH: /page-constructor/main/
+
 jobs:
   main:
     name: Build and Deploy
@@ -27,6 +30,6 @@ jobs:
         uses: gravity-ui/preview-upload-to-s3-action@v1
         with:
           src-path: storybook-static
-          dest-path: /page-constructor/main/
+          dest-path: ${{ env.PREVIEW_DEST_PATH }}
           s3-key-id: ${{ secrets.STORYBOOK_S3_KEY_ID }}
           s3-secret-key: ${{ secrets.STORYBOOK_S3_SECRET_KEY }}

.github/workflows/pr-preview-build.yml

@@ -3,6 +3,9 @@ name: PR Preview Build
 on:
   pull_request:
 
+env:
+  PREVIEW_DEST_PATH: /page-constructor/${{ github.event.pull_request.number }}
+
 jobs:
   build:
     name: Build

.storybook/main.ts

@@ -2,6 +2,9 @@ import {resolve} from 'path';
 import WebpackShellPluginNext from 'webpack-shell-plugin-next';
 import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
 
+const ASSET_PATH = 'story-assets';
+const PREVIEW_DEST_PATH = process.env.PREVIEW_DEST_PATH;
+
 const customAlias = {
     widget: resolve(__dirname, '../widget'),
 };
@@ -14,6 +17,7 @@ const config = {
         autodocs: true,
     },
     stories: ['./stories/**/*.mdx', '../src/**/__stories__/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
+    staticDirs: ['./public'],
     addons: [
         '@storybook/preset-scss',
         {
@@ -32,14 +36,30 @@ const config = {
             new WebpackShellPluginNext({
                 onBuildStart: {
                     scripts: ['npm run build:widget'],
-                    blocking: true,
+                    blocking: false,
                 },
             }),
         );
+
         storybookBaseConfig.resolve.alias = {
             ...(storybookBaseConfig.resolve?.alias || {}),
             ...customAlias,
         };
+
+        // main and branch storybook previews are deployed in subfolders
+        // so we need to add subfolder prefix to stories asset static path:
+        if (PREVIEW_DEST_PATH) {
+            storybookBaseConfig.module.rules.push({
+                test: /data\.json$/,
+                loader: 'string-replace-loader',
+                options: {
+                    search: `/${ASSET_PATH}/`,
+                    replace: `${PREVIEW_DEST_PATH}/${ASSET_PATH}/`,
+                    flags: 'g',
+                },
+            });
+        }
+
         return storybookBaseConfig;
     },
 };

.storybook/manager-head.html

@@ -1 +1 @@
-<link rel="icon" href="https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/favicon.png" />
+<link rel="icon" href="/story-assets/favicon.png" />