Атомный дизайн с решением иерархии React: Что может быть включено в атомные компоненты?

Question

Мы успешно следим за Atomic Design, чтобы организовать наши компоненты ReactJS в нашей библиотеке. После создания нескольких десятков компонентов у нас начинают возникать фундаментальные сомнения в том, как организовать организмы.

Наша цель состоит в том, чтобы создать практическое правило, чтобы мы могли создавать инструменты управления кодом для правильной обработки компонентов и предоставить стандарт для нашей команды, чтобы выбрать, куда поместить вновь созданный компонент.

Вот правила, которые мы принимаем:

Атомы: это компоненты, которые не включают в себя какой-либо другой компонент в библиотеке. Таким образом, он не должен иметь каких-либо import от другого атомного компонента.

Молекулы: это компоненты, которые могут импортировать только атомы. Итак, если компонент имеет import NNN from '../atoms/...' это будет считаться молекулой. Молекулы не могут импортировать компоненты из себя (библиотеки молекул), но только атомы.

У организма у нас есть первое фундаментальное сомнение. Я опишу это на 3 варианта:

Вариант А:

Организмы: это компоненты, которые могут импортировать только молекулы. Так только import NNN from '../molecules/...' будет разрешено на организмах. Если вам нужно импортировать молекулу и атом в одном и том же компоненте, это будет считаться организмом.

Вариант Б:

Организмы: это компоненты, которые могут импортировать только молекулы или молекулы и атомы. Так только import NNN from '../molecules/...' или же import NNN from '../molecules/...' вместе с import NNN from '../../atoms/...' будет разрешено на организмах.

Вариант С:

Организмы: это компоненты, которые могут импортировать только молекулы или молекулы И атомы или молекулы И атомы И организмы. Так только import NNN from '../molecules/...' или же import NNN from '../molecules/...' вместе с import NNN from '../../atoms/...' или же import NNN from '../molecules/...' вместе с import NNN from '../../atoms/...' вместе с import NNN from '../../molecules/...' будет разрешено на организмах.

Шаблоны: это компоненты, которые могут импортировать все компоненты из более низкой иерархии вместе (атомы, молекулы и организмы). Если он импортирует один организм, это шаблон. Естественно, что может быть импортировано сюда, зависит от вышеизложенного решения.

Страницы: можно импортировать все, так как целью является размещение контента в элементах нижней иерархии.

Решение организмов будет влиять на глубину иерархии, а также использование библиотеки.

Кажется, что методология атомного дизайна смещает свои концепции над организмами (с помощью шаблонов и страниц), и поэтому организм должен быть более высоким агрегатором компонентов более низкого уровня (вариант C), но мы можем сделать новый уровень, сохраняя всю агрегацию на уровне шаблонов. Таким образом, шаблоны будут не только структурами страниц, но фактически структурами компонентов.

Имеет ли это смысл с точки зрения разработки библиотеки ReactJS и какой вариант лучше всего подходит для стратегии развития?

Answer 1

Эта статья прекрасно объясняет методологию атомного дизайна:

http://atomicdesign.bradfrost.com/chapter-2/

Чтобы процитировать то, что вам нужно:

Организмы представляют собой относительно сложные компоненты пользовательского интерфейса, состоящие из групп молекул и / или атомов и / или других организмов. Эти организмы образуют отдельные участки интерфейса.