chore: add typescript-plugin-css-modules, cleanup tsconfig

.gitignore

@@ -18,6 +18,7 @@
 # misc
 .DS_Store
 *.pem
+*.code-workspace
 
 # debug
 npm-debug.log*

app/[locale]/_styles.scss

@@ -1,5 +1,3 @@
-@use "abstracts/functions";
-
 // Pages
 @forward "tours/styles";
 @forward "tours/[tour]/styles";

app/[locale]/layout.tsx

@@ -1,6 +1,6 @@
+import "@/styles/styles.scss";
 import { FunctionComponent, PropsWithChildren } from "react";
 import { Metadata } from "next";
-import "@/styles/styles.scss";
 import StyledComponentsRegistry from "@/lib/registry";
 import { SourceSansPro } from "@/lib/fonts";
 import { fallbackLng, languages } from "@/lib/i18n/settings";

components/ShareButtons/CopyUrlButton.jsx

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import copy from "copy-to-clipboard";
-import IconComposer from "@/svg/IconComposer";
+import IconComposer from "@/components/svg/IconComposer";
 import ShareButton from "@/components/ShareButtons/ShareButton";
 
 export default function CopyUrlButton({ showLabel }) {

components/ShareButtons/EmailShareButton.jsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 import { EmailShareButton } from "react-share";
-import IconComposer from "@/svg/IconComposer";
+import IconComposer from "@/components/svg/IconComposer";
 
 export default function ShareButton({
   subject,

components/ShareButtons/FacebookShareButton.jsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 import { FacebookShareButton } from "react-share";
-import IconComposer from "@/svg/IconComposer";
+import IconComposer from "@/components/svg/IconComposer";
 
 export default function ShareButton({ quote, hashtag, showLabel }) {
   return (

components/ShareButtons/GetImageButton.jsx

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import { useAladin } from "@/contexts/Aladin";
-import IconComposer from "@/svg/IconComposer";
+import IconComposer from "@/components/svg/IconComposer";
 import ShareButton from "@/components/ShareButtons/ShareButton";
 import { getDownloadLink } from "@/helpers";
 

components/ShareButtons/TwitterShareButton.jsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 import { TwitterShareButton } from "react-share";
-import IconComposer from "@/svg/IconComposer";
+import IconComposer from "@/components/svg/IconComposer";
 
 export default function ShareButton({
   title,

components/explorer/SourceDetails/index.js

@@ -2,11 +2,11 @@ import { useEffect, useState, useRef } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 import { useAladin } from "@/contexts/Aladin";
-import Accordion from "@/primitives/Accordion";
-import AccordionGroup from "@/primitives/AccordionGroup";
-import Button from "@/primitives/Button";
+import Accordion from "@/components/primitives/Accordion";
+import AccordionGroup from "@/components/primitives/AccordionGroup";
+import Button from "@/components/primitives/Button";
 import Buttonish from "@rubin-epo/epo-react-lib/Buttonish";
-import IconComposer from "@/svg/IconComposer";
+import IconComposer from "@/components/svg/IconComposer";
 import SourceFilters from "./SourceFilters";
 import DetailsSection from "./DetailsSection";
 import DetailsSectionValue from "./DetailsSectionValue";

components/global/FiltersMenu/index.js

@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import Menu from "@/primitives/Menu";
+import Menu from "@/components/primitives/Menu";
 
 export default function Filters({
   menuLabelId,

components/global/HtmlHead/index.js

@@ -1,7 +1,7 @@
 import PropTypes from "prop-types";
 import Head from "next/head";
-import siteInfoShape from "@/shapes/siteInfo";
-import imageShape from "@/shapes/image";
+import siteInfoShape from "@/components/shapes/siteInfo";
+import imageShape from "@/components/shapes/image";
 
 export default function HtmlHead({
   title,

components/global/MainMenu/AboutMenu.js

@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import Menu from "@/primitives/Menu";
+import Menu from "@/components/primitives/Menu";
 
 export default function AboutMenu({ toggleMenuCallback, isOpen }) {
   return (

components/global/MainMenu/LocaleMenu.js

@@ -1,8 +1,8 @@
 import { useState } from "react";
 import PropTypes from "prop-types";
 import Button from "@rubin-epo/epo-react-lib/Button";
-import Menu from "@/primitives/Menu";
-import Radio from "@/primitives/Radio";
+import Menu from "@/components/primitives/Menu";
+import Radio from "@/components/primitives/Radio";
 
 const DEFAULT = "en";
 

components/global/MainMenu/QuickAccess.js

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
-import IconComposer from "@/svg/IconComposer";
-import Buttonish from "@/primitives/Buttonish";
+import IconComposer from "@/components/svg/IconComposer";
+import Buttonish from "@/components/primitives/Buttonish";
 
 export default function QuickAccess({ route }) {
   return (

components/global/MainMenu/ShareMenu.js

@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import Menu from "@/primitives/Menu";
+import Menu from "@/components/primitives/Menu";
 import ShareButtons from "@/components/ShareButtons";
 
 export default function ShareMenu({ toggleMenuCallback, isOpen }) {

components/global/MainMenu/index.js

@@ -1,10 +1,10 @@
 "use client";
 import { useState } from "react";
 import PropTypes from "prop-types";
-import IconComposer from "@/svg/IconComposer";
+import IconComposer from "@/components/svg/IconComposer";
 import Button from "@rubin-epo/epo-react-lib/Button";
 import Buttonish from "@rubin-epo/epo-react-lib/Buttonish";
-import Menu from "@/primitives/Menu";
+import Menu from "@/components/primitives/Menu";
 import AboutMenu from "./AboutMenu.js";
 import LocaleMenu from "./LocaleMenu.js";
 import ShareMenu from "./ShareMenu.js";

components/global/Navigation/index.js

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import Link from "next/link";
-import internalLinkShape from "@/shapes/link";
+import internalLinkShape from "@/components/shapes/link";
 
 export default function Navigation({ items }) {
   return (

components/global/PrimaryHeader/index.jsx

@@ -4,9 +4,9 @@ import MenuContext from "@/contexts/Menu";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 import useResizeObserver from "use-resize-observer";
-import Buttonish from "@/primitives/Buttonish";
-import MainMenu from "@/global/MainMenu";
-import IconComposer from "@/svg/IconComposer";
+import Buttonish from "@/components/primitives/Buttonish";
+import MainMenu from "@/components/global/MainMenu";
+import IconComposer from "@/components/svg/IconComposer";
 
 export default function Header({ closeUrl = "/", backgroundColor, route }) {
   const { ref } = useResizeObserver({

components/global/SecondaryHeader/Filters.js

@@ -1,9 +1,9 @@
 import { useState, useContext } from "react";
 import PropTypes from "prop-types";
-import Checkbox from "@/primitives/Checkbox";
+import Checkbox from "@/components/primitives/Checkbox";
 import Slider from "@rubin-epo/epo-react-lib/HorizontalSlider";
-import IconComposer from "@/svg/IconComposer";
-import FiltersMenu from "@/global/FiltersMenu";
+import IconComposer from "@/components/svg/IconComposer";
+import FiltersMenu from "@/components/global/FiltersMenu";
 
 export default function Filters({ context, defaultFilters }) {
   const menuLabelId = "guided-experience-filters-menu-label";

components/global/SecondaryHeader/Search.js

@@ -1,8 +1,8 @@
 import { useState, useContext } from "react";
 import PropTypes from "prop-types";
-import Modal from "@/primitives/Modal";
-import TextInput from "@/primitives/TextInput";
-import IconComposer from "@/svg/IconComposer";
+import Modal from "@/components/primitives/Modal";
+import TextInput from "@/components/primitives/TextInput";
+import IconComposer from "@/components/svg/IconComposer";
 import useDebounce from "@/hooks/useDebounce";
 
 export default function Search({ context }) {

components/global/SecondaryHeader/Sort.js

@@ -1,8 +1,8 @@
 import { useState, useContext } from "react";
 import PropTypes from "prop-types";
-import Menu from "@/primitives/Menu";
-import Radio from "@/primitives/Radio";
-import IconComposer from "@/svg/IconComposer";
+import Menu from "@/components/primitives/Menu";
+import Radio from "@/components/primitives/Radio";
+import IconComposer from "@/components/svg/IconComposer";
 
 export default function Sort({ context }) {
   const menuLabelId = "filters-menu-label";

components/guidedExperiences/GuidedExperienceLanding.js

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import Link from "next/link";
-import IconComposer from "@/svg/IconComposer";
+import IconComposer from "@/components/svg/IconComposer";
 import Bubbles from "@/components/Bubbles";
 
 export default function GuidedExperienceLanding({

components/molecules/ExplorerControls/Filters/index.tsx

@@ -1,8 +1,8 @@
 import { FunctionComponent, useState } from "react";
-import Checkbox from "@/primitives/Checkbox";
+import Checkbox from "@/components/primitives/Checkbox";
 import Slider from "@rubin-epo/epo-react-lib/HorizontalSlider";
-import IconComposer from "@/svg/IconComposer";
-import FiltersMenu from "@/global/FiltersMenu";
+import IconComposer from "@/components/svg/IconComposer";
+import FiltersMenu from "@/components/global/FiltersMenu";
 import defaultFilters, {
   CharacteristicParams,
 } from "@/fixtures/defaultExplorerFilters";

components/molecules/ExplorerControls/Orientation/index.jsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
-import Button from "@/primitives/Button";
-import IconComposer from "@/svg/IconComposer";
+import Button from "@/components/primitives/Button";
+import IconComposer from "@/components/svg/IconComposer";
 
 export default function Orientation() {
   const [isOpen, setIsOpen] = useState(false);

components/molecules/ExplorerControls/Pan/index.js

@@ -1,7 +1,7 @@
 import { useAladin } from "@/contexts/Aladin";
 import { useKeyDownEvent } from "@/hooks/listeners";
 import { getKeyByValue } from "@/helpers";
-import Button from "@/primitives/Button";
+import Button from "@/components/primitives/Button";
 
 const KEY_MAP = {
   left: "ArrowLeft",

components/molecules/ExplorerControls/Search/index.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
-import Button from "@/primitives/Button";
-import IconComposer from "@/svg/IconComposer";
+import Button from "@/components/primitives/Button";
+import IconComposer from "@/components/svg/IconComposer";
 
 export default function Search() {
   const [isOpen, setIsOpen] = useState(false);

components/molecules/ExplorerControls/Share/index.jsx

@@ -1,5 +1,5 @@
-import IconComposer from "@/svg/IconComposer";
-import Modal from "@/primitives/Modal";
+import IconComposer from "@/components/svg/IconComposer";
+import Modal from "@/components/primitives/Modal";
 import ShareButtons from "@/components/ShareButtons";
 
 export default function Share() {

components/molecules/ExplorerControls/Zoom/index.jsx

@@ -1,7 +1,7 @@
 import { useAladin } from "@/contexts/Aladin";
 import { useKeyDownEvent } from "@/hooks/listeners";
-import Button from "@/primitives/Button";
-import IconComposer from "@/svg/IconComposer";
+import Button from "@/components/primitives/Button";
+import IconComposer from "@/components/svg/IconComposer";
 
 export default function Zoom() {
   const { aladin, hasFocus } = useAladin();

components/organisms/GuidedExperiences/index.js

@@ -1,8 +1,8 @@
 import { useState } from "react";
 import PropTypes from "prop-types";
 import Buttonish from "@rubin-epo/epo-react-lib/Buttonish";
-import Header from "@/global/GuidedExperienceHeader";
-import SecondaryHeader from "@/global/SecondaryHeader";
+import Header from "@/components/global/GuidedExperienceHeader";
+import SecondaryHeader from "@/components/global/SecondaryHeader";
 import useResizeObserver from "use-resize-observer";
 
 export default function GuidedExperiencesLayout({

components/organisms/Primary/index.tsx

@@ -1,6 +1,6 @@
 import { FunctionComponent, PropsWithChildren } from "react";
 import { MenuProvider } from "@/contexts/Menu";
-import Header from "@/global/PrimaryHeader";
+import Header from "@/components/global/PrimaryHeader";
 
 interface PrimaryLayoutProps {
   closeUrl?: string;

components/primitives/Accordion/index.js

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import classnames from "classnames";
-import IconComposer from "@/svg/IconComposer";
+import IconComposer from "@/components/svg/IconComposer";
 
 export default function Accordion({
   id,

components/primitives/Menu/index.js

@@ -2,9 +2,9 @@ import { useEffect, useContext, useState, useRef } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 import MenuContext from "@/contexts/Menu";
-import Button from "@/primitives/Button";
-import ConditionalWrapper from "@/primitives/ConditionalWrapper";
-import IconComposer from "@/svg/IconComposer";
+import Button from "@/components/primitives/Button";
+import ConditionalWrapper from "@/components/primitives/ConditionalWrapper";
+import IconComposer from "@/components/svg/IconComposer";
 import useFocusTrap from "@/hooks/useFocusTrap";
 import { useKeyDownEvent, useOnClickOutside } from "@/hooks/listeners";
 

components/primitives/Modal/index.js

@@ -1,8 +1,8 @@
 import { useEffect, useState, useRef } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
-import Button from "@/primitives/Button";
-import IconComposer from "@/svg/IconComposer";
+import Button from "@/components/primitives/Button";
+import IconComposer from "@/components/svg/IconComposer";
 import useFocusTrap from "@/hooks/useFocusTrap";
 import { useKeyDownEvent, useOnClickOutside } from "@/hooks/listeners";
 

components/shapes/footerContent.js

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
-import { linksShape } from "@/shapes/link";
-import imageShape from "@/shapes/image";
+import { linksShape } from "@/components/shapes/link";
+import imageShape from "@/components/shapes/image";
 
 const footerContentShape = PropTypes.shape({
   links: linksShape,

components/shapes/news.js

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
-import { localizedShape } from "@/shapes/locale";
-import imageShape from "@/shapes/image";
+import { localizedShape } from "@/components/shapes/locale";
+import imageShape from "@/components/shapes/image";
 
 const newsShape = PropTypes.shape({
   contentBlocks: PropTypes.arrayOf(PropTypes.object),

components/shapes/page.js

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
-import { localizedShape } from "@/shapes/locale";
-import imageShape from "@/shapes/image";
+import { localizedShape } from "@/components/shapes/locale";
+import imageShape from "@/components/shapes/image";
 
 const pageShape = PropTypes.shape({
   id: PropTypes.string,

components/shapes/siteInfo.js

@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import imageShape from "@/shapes/image";
+import imageShape from "@/components/shapes/image";
 
 export const socialInfoInternalShape = {
   facebook: PropTypes.string,

components/shapes/staff.js

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
-import imageShape from "@/shapes/image";
-import { localizedShape } from "@/shapes/locale";
+import imageShape from "@/components/shapes/image";
+import { localizedShape } from "@/components/shapes/locale";
 
 const staffShape = PropTypes.shape({
   id: PropTypes.string,

components/svg/IconComposer/index.js

@@ -1,5 +1,5 @@
 import BaseIconComposer from "@rubin-epo/epo-react-lib/IconComposer";
-import customIcons from "@/svg/icons";
+import customIcons from "@/components/svg/icons";
 
 const IconComposer = (props) => {
   return <BaseIconComposer {...{ ...props, customIcons }} />;

components/svg/icons/Compass.jsx

@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import { svgInternalShape } from "@/shapes/svg";
+import { svgInternalShape } from "@/components/shapes/svg";
 import defaultProps from "./defaultProps";
 
 export default function Compass({

components/svg/icons/Filters.jsx

@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import { svgInternalShape } from "@/shapes/svg";
+import { svgInternalShape } from "@/components/shapes/svg";
 import defaultProps from "./defaultProps";
 
 export default function Filters({ className, fill = "currentColor" }) {

components/svg/icons/Galaxy.jsx

@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import { svgInternalShape } from "@/shapes/svg";
+import { svgInternalShape } from "@/components/shapes/svg";
 import defaultProps from "./defaultProps";
 
 export default function Galaxy({ className, fill = "currentColor" }) {

components/svg/icons/Grid.jsx

@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import { svgInternalShape } from "@/shapes/svg";
+import { svgInternalShape } from "@/components/shapes/svg";
 import defaultProps from "./defaultProps";
 
 export default function Grid({ className, size = 22, fill = "currentColor" }) {