Need to include components from another project

[Nosherwan]

we maintain our common components in another project, normally that is included via npm link in main projects.
I have created a project for react-styleguidist, now How can I include the common components in it.

[sapegin]

Could you elaborate what exactly you want to achieve? Do you want to use these component or do you want to show them in the style guide?

[Nosherwan]

I want to show them in the style guide that has its own project.
I suppose instead of giving a static location via config like so:

module.exports = {
	components: '../sws-ui-common/react/shared/components/**/*.js'
    }

I would like to provide the path via require or something along those lines:

module.exports = {
//this wont work but just to explain
	components: require('sws-ui-common/react/shared/components/**/*.js')
}

[sapegin]

That’s what I would try to do.

[Nosherwan]

so you are suggesting only the static location would work for components, and not dynamic?

[sapegin]

I don‘t know what you mean by static and dynamic location. Something like this should work:

module.exports = {
	components: require.resolve('sws-ui-common').replace('index.js', '') + '/react/shared/components/**/*.js'
}

[Nosherwan]

Tried that but I get the following error:
Error: Cannot find module 'sws-ui-common'
Seems like require.resolve && require are unable to find the npm linked module.

[sapegin]

I don’t really understand why you use npm links, for your use case installing an npm package from Git seems more appropriate. If nothing works you’d probably have to hardcode a path.

[Nosherwan]

No worries seems like hardcoding the path is the only solution for us at the moment. We do not publish our packages to npm, hence we use npm link to include them in other projects.

[sapegin]

You can install an npm package from Git, that’s what we do ;-) npm link is supposed to be used for testing only.

[tuchk4]

I am working with lerna and one of the packages is styleguidist with its configs.
I need to include components from dependencies. Like this

{
  name: 'Inputs',
  components: [
    '@company/ui/src/components/TextInput/index.tsx',
    '@company/ui/src/components/NumberInput/index.tsx',
    '@company/ui/src/components/TextArea/index.tsx',
  ],
}

But this does not work. There are two solution to fix it

1. Use require resolve

{
  name: 'Inputs',
  components: [
      require.resolve('@company/ui/src/components/TextInput/index.tsx'),
      require.resolve('@company/ui/src/components/NumberInput/index.tsx'),
      require.resolve('@company/ui/src/components/NumberInput/index.tsx'),
  ],
}

2 Update via PR src/loaders/utils/getComponentFiles.js

+ function getResolvedFiles(components) {
+   const rest = [];
+   const resolved = [];
+   components.forEach(component => {
+     const path = require.resolve(component);
+     if (path) {
+       resolved.push(path);
+     } else {
+       rest.push(component);
+     }
+   });
+ 
+   return  [resolved, rest];
+ }

module.exports = function getComponentFiles(components, rootDir, ignore) {
  if (!components) {
    return [];
  }

+ const [resolved, rest] = getResolvedFiles(components);

  // Normalize components option into an Array
-  const componentGlobs = getComponentGlobs(components);
+  const componentGlobs = getComponentGlobs(rest);

  // Resolve list of components from globs
  const componentFiles = getFilesMatchingGlobs(componentGlobs, rootDir, ignore);

+  return [...resolved, ...componentFiles];
-  return componentFiles;
};

First solution is more simple but not so expected as the second.

Anyway developing with monorepo is very popular way now and thats why I suggest to add something like Using with monorepo section to the docs.

cc @sapegin