How to use a global importer for my macro files

[raduchiriac]

I have split my code-base into three main folders "atoms", "molecules" and "organisms". Inside there are individual .njk files with one macro per file. Imagine: "atoms/button.njk", "atoms/checkbox.njk", "organisms/carousel.njk", "molecules/dateselector.njk" etc.
In total there are 50+ files, each containing one macro.
I use macros so I can pass parameters when I import then.

My content comes from a headless CMS, so I fetch and parse a giant JSON when building.

My problem is that my post.njk pages need to load dynamically any of these 50 macros at any time. I do not know in advance, I only call a macro if that component is present in the JSON (ie: the editors chose to use it in the CMS)

How can I use a global import file where all these 50 files are referenced?
Then inside my post.njk I can simply import my "components.njk" and say {{ Button() }}?

I have tried this so far

{# components.njk #}

{%- from "../components/atoms/button.njk" import Button -%}
{%- from "../components/atoms/checkbox.njk" import Checkbox -%}
{%- from "../components/atoms/link.njk" import Link -%}

---
layout: layouts/default
title: Home
breadcrumb: undefined
---

{%- include "../components/components.njk" -%}
<section id="content" class="container vstack py-5">
  <h1>Hello from the index {{ Link({ label: "hi" }) }}</h1>
</section>

I know all the paths are correct but I get: Unable to call Link, which is undefined or falsey