Configure Twig Namespaces to work for nested components and Drupal template system

Problem/Motivation

Embedded or included twig components with Nested components are not loading in organisms or pages

Proposed resolution

Add the following namespaces with paths for Drupal in the vartheme_bs5.info.yml file

components:
  namespaces:
    vartheme_bs5: src/components
    atoms: src/components/atoms
    molecules: src/components/molecules
    organisms: src/components/organisms
    templates: src/components/templates
    pages: src/components/pages

Add the following namespaces with paths for Storybook, Webpack, and Mix in the webpack.config.js file

  // Twig
  config.module.rules.push({
    test: /\.(html.twig|twig)$/,
    use: [
      {
        loader: 'twig-loader',
        options: {
          twigOptions: {
            namespaces: {
              vartheme_bs5: path.resolve(__dirname, '../', 'src/components'),
              atoms: path.resolve(__dirname, '../', 'src/components/atoms'),
              molecules: path.resolve(__dirname, '../', 'src/components/molecules'),
              organisms: path.resolve(__dirname, '../', 'src/components/organisms'),
              templates: path.resolve(__dirname, '../', 'src/components/templates'),
              pages: path.resolve(__dirname, '../', 'src/components/pages'),
            },
          },
        },
      },
    ],
  });

Update all Components Twig files and Drupal template files

Remaining tasks

• ✅ File an issue about this project
• ✅ Addition/Change/Update/Fix to this project
• ✅ Testing to ensure no regression
• ➖ Automated unit/functional testing coverage
• ➖ Developer Documentation support on feature change/addition
• ➖ User Guide Documentation support on feature change/addition
• ✅ Accessibility and Readability
• ✅ Code review from 1 Varbase core team member
• ✅ Full testing and approval
• ✅ Credit contributors
• ✅ Review with the product owner
• ✅ Update Release Notes and Update Helper on new feature change/addition
• ✅ Release varbase-10.0.0-alpha1 → , vartheme_bs5-2.0.0-alpha1 →

Varbase update type

• ✅ No Update
• ➖ Optional Update
• ➖ Forced Update
• ➖ Forced Update if Unchanged

User interface changes

• N/A

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• Issue #3299786 → by Rajab Natshah → : Configured Twig Namespaces to work for nested components and Drupal template system