Vue Storybook - Imported component with mixin does not include 'mixed-in' props.

[LiminalNet]

Version : 6.4.0 -beta.4 I tried asking this question on discord but got no response, I am trying here as my scenario seems like it should have happened before and I cannot find any related resources.

Intro I have my own component library which is already in use in a live product and is functional. vxButton is a component within this component library that uses baseComponent_mixin.js. I wanted to document and represent my component library in storybook.

baseComponent_mixin.js

let validatedComponent = validatedComponentMixin,
    baseComponent = {
        props : {
            compId : {
                default : null,
                type : String,
                validator : function( value )
                {
                    return !_.isUndefined( value ) && !_.isNull( value );
                }
            },
            enabled : {
                type : Boolean,
                default : true
            },
            width : {
                default : "fit-content" 
            },
            eventHandlers : {
                type : Object,
                default : null
            }
        }
    }
....
export {
    baseComponent, dataFieldComponent, themedComponent, labelledComponent, validatedComponent,filterableComponent, itemListComponent, itemListContainer, focusableComponent
};

vxButton.vue

<script>
import vxIcon from "../Icon/vxIcon.vue";
import vxTooltip from "../Tooltip/vxTooltip.vue";
import {
    baseComponent, themedComponent, validatedComponent
} from "../../Mixins/Components/baseComponent_mixin.js";

import validationIconComponent from "../Icon/vxValidationIcon.vue";

export default {
    name : "vx-Button",
    mixins : [baseComponent, themedComponent,validatedComponent],
    components : {
        "vx-icon" : vxIcon,
        "vx-tooltip" : vxTooltip,
        "vx-validationicon" : validationIconComponent
    },
    props : {
        text : {
            type : String,
            default : ""
        },
        layout : {
            default : "text",
            validator : function( value )
            {
                //TEST
                return ["text","icon-text","text-icon","icon"].indexOf( value ) !== -1;
            }
        },
        icon : {
            type : String,
            default : null,
        },
        iconColor : {
            type : String,
            default : "currentColor"
        },
       
        toggleable : {
            default : false
        },
        tabable : {
            default : true
        },
        toggleIcon : {
            default : null,
            validator : function( value )
            {
                return true;
            }
        },
        toggleIconColor : {
            type : String,
            default : "currentColor"
        }
    },
    data()
    {
        return {
            toggled : false,
            clickEventType : "click",
            controlType : "vxButton"
        }
    },
    computed : {
        acceptFocus : function()
        {
            return this.tabable && this.enabled ? 0 : -1;
        },
        activeIcon : function()
        {
            if ( this.toggled )
            {
                return this.toggleIcon;
            }
            else
            {
                return this.icon;
            }
        },
        activeIconColor : function()
        {
            if ( this.toggled )
            {
                return this.toggleIconColor;
            }
            else
            {
                return this.iconColor;
            }
        }
    },
    mounted : function()
    {
        if ( this.toggleable )
        {
            this.clickEventType = "untoggled";
        }
    }
 
}
</script>

Scenario I created a blank storybook vue project. I installed my vix-ui package using npm install. I created the following story importing my button and applying the basic stuff to it.

import vxButton from 'vix-ui/Components/Button/vxButton.vue';

export default {
  title: 'Vix/Button',
  component: vxButton,
  argTypes: {},
};

const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { "vx-button" : vxButton },
  template: '<vx-button v-bind="$props"></vx-button>',
});

export const Primary = Template.bind({});
Primary.args = {};

I then ran storybook. The story for my button did show up, however the props that were included in baseComponent_mixin.js where not exported within the controls tab.

I tried a different example using a mixin that is not installed and imported (but instead created in the same folder as the story), and mixins work correctly. It seems like it has something to do with the fact that I am installing and importing my component.

I have been playing around with a bunch of stuff so my main.js file might be a bit polluted, but the above problem was there from the start. This is my main.js file:

const path = require("path");
module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-controls",
    "@storybook/vue",
    {
      name : "@storybook/addon-docs",
      options : {
        vueDocgenOptions : {
          validExtends : (fullFilePath) =>
          !/[\\/]node_modules\\vix-ui[\\/]/.test(fullFilePath)
        }
      }
    }
  ],
  webpackFinal: async (config, { configType }) => {
    config.resolve = {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        vue: 'vue/dist/vue.js',
        vue$: 'vue/dist/vue.esm.js'
      },
    };
    config.resolve.alias['@'] = path.resolve(__dirname, '../');
    config.resolve.alias['@brand-scss'] = path.resolve(__dirname, '../stories/assets/Scss/brand.scss');
    config.resolve.alias['@base-scss'] = path.resolve(__dirname, '../stories/assets/Scss/base.scss');
    config.resolve.alias['@mixin-scss'] = path.resolve(__dirname, '../stories/assets/Scss/mixin.scss');
    config.resolve.alias['@app-scss'] = path.resolve(__dirname, '../stories/assets/Scss/app.scss');
    
    config.module.rules.push(
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      }
    );
    return config;
  }
}

**Please help! ** I really want to use storybook, this is the only thing in my way and I cannot understand what I am doing wrong!

Thanks a bunch

[Rjourdren]

Hello @LiminalNet Did you found a solution in the end to manage the loading of props from mixin files? I am encountering exactly the same issue. For information, the issue isn't happening in case I load the package as npm link only once I use it after doing npm install. Components are well displayed and can take into account the props from the mixins, it's only the documentation in argsTable which is not getting displayed. Thanks in advance for anyone who could bring any help on this topic.

---

Edit: I finally found my issue, the property validExtends of vueDocgenOptions was wrong for me, by forcing a return as true it worked.

{ name: "@storybook/addon-docs", options: { configureJSX: true, babelOptions: {}, sourceLoaderOptions: null, transcludeMarkdown: true, vueDocgenOptions: { alias: { 'lib-name': path.resolve(__dirname, "../node_modules/lib-name/."), '../../mixins': path.resolve(__dirname, "../node_modules/lib-name/src/mixins/.") }, validExtends: (fullFilePath) => true, modules: [path.resolve(__dirname, "../node_modules/lib-name/.")] } }

[tobiasdiez]

v4 of this module is no longer actively supported. Please try the newest version and open an new issue if the problem persists. Thank you for your understanding.