atanasster / storybook-addon-deps

A storybook addon to add a dependencies tree exporer tab.
https://atanasster.github.io/storybook-addon-deps/?path=/docs/design-system-avatarlist--short
MIT License
59 stars 3 forks source link

Support multiple components with the same name (fix for #13) #14

Closed kkckkc closed 3 years ago

kkckkc commented 3 years ago

This PR attempts to fix issue https://github.com/atanasster/storybook-addon-deps/issues/13

The idea is to make it possible for the user to configure a callback function that determines which component is to be considered a match in case multiple components match by name. By default, a function that chooses the first in the list is provided - this should ensure full backwards compatibility.

As an example, I use a match function that tries to choose the right component based on the contextPath of the component and the story filename, assuming that the closer the story and the component is in the file structure the more likely it is they are related. I use a function like

addParameters({
  docs: { page: DocsPage },
  dependencies: {
    match: (matchingComponents, storyFilename) => { 
      if (matchingComponents.length < 2) return matchingComponents?.[0][0];

      return matchingComponents.sort(([,e], [,f]) => {
        const l1 = findLongestCommonSubstring(e.contextPath, storyFilename).length;
        const l2 = findLongestCommonSubstring(f.contextPath, storyFilename).length;
        if (l1 > l2) return -1;
        if (l1 < l2) return 1;
        return 0;
      })[0][0];
    }
  }
})
atanasster commented 3 years ago

Thank you very much and sorry for the delay