Merge pull request #158 from emulsify-ds/develop

Release: Fix non-src based project from duplication components direction

Author: callinmullaney

.github/workflows/semantic-release.yml

@@ -8,13 +8,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           fetch-depth: 0
       - name: Install Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
-          node-version: 24
+          node-version: "24.x"
       - name: Install
         run: npm install
       - name: Release

.storybook/main.js

@@ -93,13 +93,15 @@ const config = {
   },
 
   /**
-   * Custom styles injected into the Storybook manager (sidebar) head.
+   * Custom styles injected into the Storybook manager (sidebar) head,
+   * plus any external manager-head.html snippet.
    * @param {string} head - Existing head HTML.
-   * @returns {string} Modified head HTML with custom styles.
+   * @returns {string} Modified head HTML.
    */
-  managerHead: (head) =>
-    `${head}
-    <style>
+  managerHead: (head) => {
+    // inline theme styles
+    const inlineStyles = `
+      <style>
       :root {
         --colors-emulsify-blue-100: #e6f5fc;
         --colors-emulsify-blue-200: #CCECFA;
@@ -198,15 +200,29 @@ const config = {
         color: var(--colors-emulsify-blue-1000) !important;
       }
     </style>
-  `,
+    `;
+
+    // load external manager-head.html if present
+    const externalManagerHeadPath = resolve(
+      __dirname,
+      '../../../../config/emulsify-core/storybook/manager-head.html'
+    );
+    let externalManagerHtml = '';
+    if (fs.existsSync(externalManagerHeadPath)) {
+      externalManagerHtml = fs.readFileSync(externalManagerHeadPath, 'utf8');
+    }
+
+    return `${head}
+${inlineStyles}
+${externalManagerHtml}`;
+  },
 
   /**
    * Function to load and append an external preview-head.html into the preview iframe.
    * @param {string} head - Existing preview head HTML.
    * @returns {string} Combined head HTML including external snippet if present.
    */
   previewHead: (head) => {
-    // Resolve the external preview-head.html path
     const externalHeadPath = resolve(
       __dirname,
       '../../../../config/emulsify-core/storybook/preview-head.html'

config/webpack/webpack.common.js

@@ -36,6 +36,7 @@ const projectDir = resolve(_dirname, '../../../../..');
 const srcPath = resolve(projectDir, 'src');
 const isSrcExists = fs.pathExistsSync(srcPath);
 const srcDir = isSrcExists ? srcPath : resolve(projectDir, 'components');
+const isDrupal = emulsifyConfig.project.platform === 'drupal';
 
 // Glob pattern for SCSS files that ignore file names prefixed with underscore.
 const BaseScssPattern = fs.pathExistsSync(resolve(projectDir, 'src'))
@@ -131,18 +132,11 @@ function getEntries(
   // Component JS entries.
   globSync(jsMatcher).forEach((file) => {
     if (!file.includes('dist/')) {
-      const filePath = file.split('components/')[1];
-      const filePathDist = replaceLastSlash(filePath, '/js/');
-      const distStructure = fs.pathExistsSync(resolve(projectDir, 'src'))
-        ? 'components'
-        : 'js';
-      const newFilePath =
-        emulsifyConfig.project.platform === 'drupal' &&
-        fs.pathExistsSync(resolve(projectDir, 'src'))
-          ? `components/${filePathDist.replace('.js', '')}`
-          : `dist/${distStructure}/${
-              distStructure === 'components' ? 'components' : 'js'
-            }/${filePathDist.replace('.js', '')}`;
+      const filePath = file.split(`${srcDir}/components/`)[1];
+      const filePathDistRaw = replaceLastSlash(filePath, '/js/');
+      const filePathDist = filePathDistRaw.replace(/\.js$/, '');
+      const prefix = isDrupal && isSrcExists ? 'components' : 'dist/components';
+      const newFilePath = `${prefix}/${filePathDist}`;
       addEntry(newFilePath, file);
     }
   });
@@ -162,18 +156,11 @@ function getEntries(
 
   // Component SCSS entries.
   globSync(ComponentScssMatcher).forEach((file) => {
-    const filePath = file.split('components/')[1];
-    const filePathDist = replaceLastSlash(filePath, '/css/');
-    const distStructure = fs.pathExistsSync(resolve(projectDir, 'src'))
-      ? 'components'
-      : 'css';
-    const newFilePath =
-      emulsifyConfig.project.platform === 'drupal' &&
-      fs.pathExistsSync(resolve(projectDir, 'src'))
-        ? `components/${filePathDist.replace('.scss', '')}`
-        : `dist/${distStructure}/${
-            distStructure === 'components' ? 'components' : 'css'
-          }/${filePathDist.replace('.scss', '')}`;
+    const filePath = file.split(`${srcDir}/components/`)[1];
+    const filePathDistRaw = replaceLastSlash(filePath, '/css/');
+    const filePathDist = filePathDistRaw.replace(/\.scss$/, '');
+    const prefix = isDrupal && isSrcExists ? 'components' : 'dist/components';
+    const newFilePath = `${prefix}/${filePathDist}`;
     addEntry(newFilePath, file);
   });