Add no-relative-parent-imports rule in ui

[ghost]

UI is getting fairly complex. We've encountered a couple dependency / import issues, and have also had several discussions about what goes where. There's an eslint rule that could help us automate the structuring of the library: no-relative-parent-imports

import/no-relative-parent-imports

Use this rule to prevent imports to folders in relative parent paths.

This rule is useful for enforcing tree-like folder structures instead of complex graph-like folder structures. While this restriction might be a departure from Node's default resolution style, it can lead large, complex codebases to be easier to maintain. If you've ever had debates over "where to put files" this rule is for you.

This rule is also something that could maybe help us out: no-internal-modules

import/no-internal-modules

Use this rule to prevent importing the submodules of other modules.

I thought I'd open a discussion here first, see what everyone thinks of the above. I think it would be useful to automate things like this. For a large lib like ui I think it'd simplify organization if we could have eslint report violations of the preferred organization.

[Mohammer5]

import/no-relative-parent-imports

Wondering how this would work with shared files, let's say in this scenario:

// core/src/SingleSelect/SingleSelect.js
import { Select } from '../Select/Select.js'

// core/src/MultiSelect/MultiSelect.js
import { Select } from '../Select/Select.js'

[Mohammer5]

The two rules seem to conflict, if I'm not mistaken?

[ghost]

Hmm yeah that could be. The first rule is the most important to me. The second is just something I added because I'd used it for similar purposes in the past. I don't really have practical experience with the first rule yet.