0

I´ve several React components as a library in folder ux (some itens below):

import MessageBar from "./atoms/MessageBar/MessageBar";
import Spinner from "./atoms/Spinner/Spinner";
import Button from "./atoms/Button/Button";
import AccordionHeader from "./molecules/AccordionHeader/AccordionHeader";
import AutocompleteList from "./molecules/AutocompleteList/AutocompleteList";
import ButtonGroup from "./molecules/ButtonGroup/ButtonGroup";
import LoginPanel from "./organisms/LoginPanel/LoginPanel";
import WelcomePanel from "./organisms/WelcomePanel/WelcomePanel";

I wish to export these objects so that it can be imported from its group:

import LoginPanel from "ux.organisms";

Or 

import Button from "ux/atoms";

Or whatever.

The idea is that you are getting the element from an specific group inside ux library.

What is the suggested way to export all of those components, organized into groups (atoms, molecules, organisms, etc.) ?

PS:

a. I don´t wnat to change the component name (ButtomAtom, etc...)

b. The result will be a npm library to be imported by other projects. So, this code will reside on my ux/index.js file.

Mendes
  • 17,489
  • 35
  • 150
  • 263
  • Not specific to your question, but why would you put all the component files in folders with the same name? That seems like an enormous amount of repetition when you could just name them `MessageBar/index.js` for instance. – loganfsmyth Mar 14 '18 at 18:44
  • You should be able to do it by creating an index.js file inside "ux/atoms" folder and import all the required object in this file. Now you can import Button from all of this by single line (import Button from 'ux/atoms') in any other file. – Luke P. Issac Mar 14 '18 at 18:46
  • I´m not sure I got your question, but I see two standards in ReactJs: component/component.js or component/index.js. We choose first as it is clearer when you need to seach or refactor a component inside thousands. – Mendes Mar 14 '18 at 18:46
  • Fair enough, repeating the name twice in the path just seems very weird to me. – loganfsmyth Mar 14 '18 at 18:48
  • So it is clear, `ux/atoms` immediately implies that you have a separate `index` inside the `atoms` directory. You can still have a separate `ux/index` that loads that file though. – loganfsmyth Mar 14 '18 at 18:51

1 Answers1

1

Then make a index.js file at ux/atoms/ and fill it with:

import MessageBar from "./MessageBar/MessageBar";
import Spinner from "./Spinner/Spinner";
import Button from "./Button/Button";
//...

export { MessageBar, Spinner, Button };

So now one can do:

import { MessageBar } from "ux/atoms";

Or if you need every submodule:

import * as Atoms from "ux/atoms";
Jonas Wilms
  • 132,000
  • 20
  • 149
  • 151
  • 1
    I feel like the `/` after `atoms` implies that it is necessary. Better to leave it off in my view. – loganfsmyth Mar 14 '18 at 18:47
  • I´m not sure if I´m clear, but I want to have a single `index.js` for whole project where I can import everything from it.... – Mendes Mar 14 '18 at 18:47
  • @mendes yes, thats what this answer is all about. – Jonas Wilms Mar 14 '18 at 18:49
  • Hummm... Will npm understand this when publishing and installing on a new project? – Mendes Mar 14 '18 at 18:52
  • 2
    You can also [use `export … from` syntax for this](https://stackoverflow.com/q/34072598/1048572) – Bergi Mar 14 '18 at 18:54
  • @mendes well actually npm is just copying files. But yes, V8 will understand it. – Jonas Wilms Mar 14 '18 at 18:57
  • I´m suffering here: `cd ux`; `npm link`; `cd ..\project`; `npm link ux`, error: `Can't resolve 'ux/atoms' in 'D:\project\src\components\pages\MainPage'` at `import { Button } from "ux/atoms";` – Mendes Mar 14 '18 at 19:21
  • The problem is that my atoms are located inside `src/` foler on ux (`ux/src/atoms`), and I´m importing from (`ux/atoms`). I´m back at the original post, where I need a top level file to call and choose atoms, organisms, etc. Don´t seen reasonable to use `import { Button } from 'ux/src/atom'`, as `src` is from internal organization of ux project... – Mendes Mar 14 '18 at 19:28