refactor: move pages out of components; configure baseUrl

package.json

@@ -4,7 +4,6 @@
   "version": "3.0.0",
   "private": true,
   "author": "[email protected]",
-  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -38,7 +37,8 @@
     "cross-env": "^7.0.2",
     "npm-run-all": "^4.1.5",
     "typescript": "^5.0.2",
-    "vite": "^4.4.5"
+    "vite": "^4.4.5",
+    "vite-tsconfig-paths": "^4.0.7"
   },
   "engines": {
     "node": ">=18.17.0",

src/components/App.tsx → src/App.tsx

@@ -1,8 +1,6 @@
 import styled from 'styled-components';
-import { useNotificationsContext } from '../contexts';
-import { Routes, Route, Url } from '../router';
-import { GlobalStyles } from '../styles';
-import { Header, Footer } from './layout';
+import { Header, Footer, ToastNotification } from 'components';
+import { useNotificationsContext } from 'contexts';
 import {
   Accessibility,
   Biography,
@@ -18,8 +16,9 @@ import {
   Timeline,
   Videos,
   NotFound,
-} from './pages';
-import { ToastNotification } from './styled';
+} from 'pages';
+import { GlobalStyles } from 'styles';
+import { Routes, Route, Url } from 'router';
 
 const App = () => {
   const { notifications, dismissNotification } = useNotificationsContext();

src/components/Root.tsx → src/Root.tsx

@@ -1,7 +1,7 @@
 import { HelmetProvider } from 'react-helmet-async';
 import { QueryParamProvider } from 'use-query-params';
-import { NotificationsProvider, CollectionProvider } from '../contexts';
-import { Router, RouteAdapter } from '../router';
+import { NotificationsProvider, CollectionProvider } from 'contexts';
+import { Router, RouteAdapter } from 'router';
 import App from './App';
 
 const Root = () => (

src/components/index.ts

@@ -0,0 +1,3 @@
+export * from './layout';
+export * from './styled';
+export * from './svg';

src/main.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
 import 'focus-visible';
 import 'bootstrap/dist/css/bootstrap.min.css';
-
+import React from 'react';
 import ReactDOM from 'react-dom/client';
-import Root from './components/Root';
-import { initGoogleTagManager } from './utils';
+import Root from './Root';
+import { initGoogleTagManager } from 'utils';
 
 initGoogleTagManager();
 

src/components/pages/Accessibility.tsx → src/pages/Accessibility.tsx

@@ -1,4 +1,4 @@
-import { Link, Url, ExternalLink } from '../../router';
+import { Link, Url, ExternalLink } from 'router';
 import { Page, H1, Paragraph, Small } from './shared';
 
 export const Accessibility = () => (

src/components/pages/Biography.tsx → src/pages/Biography.tsx

@@ -1,5 +1,5 @@
-import { selfPortraitImg } from '../../assets/artwork';
-import { Link, Url } from '../../router';
+import { selfPortraitImg } from 'assets/artwork';
+import { Link, Url } from 'router';
 import { Page, H1, Paragraph, Artwork } from './shared';
 
 export const Biography = () => (

src/components/pages/Collection/FilterToggleIntroTooltip.tsx → src/pages/Collection/FilterToggleIntroTooltip.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
-import styled from 'styled-components';
 import { Popover as ReactstrapPopper, PopoverBody } from 'reactstrap';
-import { media, typography } from '../../../styles';
-import { useLocalStorage, useTimeout } from '../../../hooks';
+import { useLocalStorage, useTimeout } from 'hooks';
+import { media, typography } from 'styles';
+import { styled } from '../shared';
 
 const FilterToggleIntroTooltip = () => {
   const [isOpen, setIsOpen] = useState(false);

src/components/pages/Collection/List.tsx → src/pages/Collection/List.tsx

@@ -4,24 +4,24 @@ import {
   useWindowSize,
   useIntersectionObserver,
   usePrevious,
-} from '../../../hooks';
+} from 'hooks';
 import {
   media,
   getCurrentMedia,
   unstyledButtonCSS,
   focusOutlineCSS,
   HEADER_HEIGHT_PX,
   MAIN_PADDING_TOP_PX,
-} from '../../../styles';
-import { CollectionItem } from '../../../types';
+} from 'styles';
+import { CollectionItem } from 'types';
 import { styled, Row, Col } from '../shared';
 import {
   listItemHeightConfig,
   listColConfig,
   HEADING_WRAPPER_HEIGHT_PX,
   HEADING_WRAPPER_MARGIN_BOTTOM_PX,
   LIST_ITEM_MARGIN_BOTTOM_PX,
-} from './constants';
+} from './consts';
 
 /*
  *  methods

src/components/pages/Collection/Loader.tsx → src/pages/Collection/Loader.tsx

@@ -1,5 +1,5 @@
-import { SpinnerSvg } from '../../svg';
-import { colors } from '../../../styles';
+import { SpinnerSvg } from 'components';
+import { colors } from 'styles';
 import { styled } from '../shared';
 
 const Loader = () => (

src/components/pages/Collection/Modal.tsx → src/pages/Collection/Modal.tsx

@@ -1,20 +1,17 @@
 import { useEffect, useRef, useState } from 'react';
 import { Modal as ReactstrapModal } from 'reactstrap';
-import {
-  useCollectionContext,
-  useNotificationsContext,
-} from '../../../contexts';
-import { useKeyPress } from '../../../hooks';
+import { TimesSvg, ChevronLeftSvg, ChevronRightSvg } from 'components';
+import { useCollectionContext, useNotificationsContext } from 'contexts';
+import { useKeyPress } from 'hooks';
 import {
   media,
   focusOutlineCSS,
   unstyledButtonCSS,
   getRems,
   colors,
   typography,
-} from '../../../styles';
-import { CollectionItem, Status } from '../../../types';
-import { TimesSvg, ChevronLeftSvg, ChevronRightSvg } from '../../svg';
+} from 'styles';
+import { CollectionItem, Status } from 'types';
 import { styled, css, Span, Small } from '../shared';
 
 type QueryId = number | null | undefined;

src/components/pages/Collection/ScrollToTop.tsx → src/pages/Collection/ScrollToTop.tsx

@@ -1,15 +1,15 @@
 import { useEffect, useState } from 'react';
-import styled, { css } from 'styled-components';
-import { useWindowScrollPosition } from '../../../hooks';
+import { ChevronUpSvg } from 'components';
+import { useWindowScrollPosition } from 'hooks';
 import {
   colors,
   getRems,
   media,
   unstyledButtonCSS,
   HEADER_HEIGHT_PX,
   FOOTER_MIN_HEIGHT_PX,
-} from '../../../styles';
-import { ChevronUpSvg } from '../../svg';
+} from 'styles';
+import { styled, css } from '../shared';
 
 const ScrollToTop = () => {
   const windowScrollPosition = useWindowScrollPosition();

src/components/pages/Collection/filter.tsx → src/pages/Collection/filter.tsx

@@ -1,21 +1,10 @@
 import React, { useMemo, useRef } from 'react';
-import styled from 'styled-components';
 import {
   useQueryParam,
   StringParam,
   ArrayParam,
   BooleanParam,
 } from 'use-query-params';
-import { media, MIN_SCREEN_WIDTH_PX } from '../../../styles';
-import {
-  Decade,
-  MediumGroup,
-  SizeGroup,
-  Status,
-  Tag,
-  CollectionItem,
-} from '../../../types';
-import { unique } from '../../../utils';
 import {
   FormGroup,
   Label,
@@ -26,7 +15,18 @@ import {
   Button,
   OutlineButton,
   Checkbox,
-} from '../../styled';
+} from 'components';
+import { media, MIN_SCREEN_WIDTH_PX } from 'styles';
+import {
+  Decade,
+  MediumGroup,
+  SizeGroup,
+  Status,
+  Tag,
+  CollectionItem,
+} from 'types';
+import { styled } from '../shared';
+import { unique } from 'utils';
 import { useSlideContext } from './slide';
 
 /*

src/components/pages/Collection/index.tsx → src/pages/Collection/index.tsx

@@ -1,13 +1,8 @@
 import { useEffect } from 'react';
 import { useQueryParam, NumberParam } from 'use-query-params';
-import { useCollectionContext } from '../../../contexts';
-import {
-  getRems,
-  HEADER_HEIGHT_PX,
-  MAIN_PADDING_TOP_PX,
-  media,
-} from '../../../styles';
-import { FilterSvg } from '../../svg';
+import { FilterSvg } from 'components';
+import { useCollectionContext } from 'contexts';
+import { getRems, HEADER_HEIGHT_PX, MAIN_PADDING_TOP_PX, media } from 'styles';
 import {
   styled,
   Page,
@@ -16,7 +11,7 @@ import {
   Small,
   OutlineButton,
 } from '../shared';
-import { HEADING_WRAPPER_MARGIN_BOTTOM_PX } from './constants';
+import { HEADING_WRAPPER_MARGIN_BOTTOM_PX } from './consts';
 import Loader from './Loader';
 import { SlideProvider, SlideToggle, Slide } from './slide';
 import { useFilterState, Filters } from './filter';

src/components/pages/Collection/slide.tsx → src/pages/Collection/slide.tsx

@@ -6,7 +6,8 @@ import React, {
   useState,
 } from 'react';
 import FocusTrap from 'focus-trap-react';
-import { useTimeout, useOutsideClick, useWindowSize } from '../../../hooks';
+import { TimesSvg } from 'components';
+import { useTimeout, useOutsideClick, useWindowSize } from 'hooks';
 import {
   breakpoints,
   colors,
@@ -15,8 +16,7 @@ import {
   HEADER_HEIGHT_PX,
   media,
   unstyledButtonCSS,
-} from '../../../styles';
-import { TimesSvg } from '../../svg';
+} from 'styles';
 import { styled, css, keyframes } from '../shared';
 
 const SLIDE_ANIMATION_MS = 300;

src/components/pages/Contact.tsx → src/pages/Contact.tsx

@@ -1,11 +1,6 @@
-import { EMAIL_ADDRESS } from '../../constants';
-import { ExternalLink, ExternalUrl, Link, Url } from '../../router';
-import {
-  colors,
-  media,
-  HEADER_HEIGHT_PX,
-  MAIN_PADDING_TOP_PX,
-} from '../../styles';
+import { EMAIL_ADDRESS } from 'consts';
+import { ExternalLink, ExternalUrl, Link, Url } from 'router';
+import { colors, media, HEADER_HEIGHT_PX, MAIN_PADDING_TOP_PX } from 'styles';
 import {
   styled,
   Page,

src/components/pages/Copyright.tsx → src/pages/Copyright.tsx

@@ -1,4 +1,4 @@
-import { Link, Url } from '../../router';
+import { Link, Url } from 'router';
 import { Page, H1, Paragraph } from './shared';
 
 export const Copyright = () => (

src/components/pages/Exhibitions.tsx → src/pages/Exhibitions.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ExternalLink, Link, Url } from '../../router';
+import { ExternalLink, Link, Url } from '../router';
 import { Page, H1, H2, Heading, Paragraph, Small, Divider } from './shared';
 
 export const Exhibitions = () => (

src/components/pages/Home.tsx → src/pages/Home.tsx

@@ -1,8 +1,7 @@
-import { artistImg, artworkImg, backgroundImg } from '../../assets/pages/home';
-import { Url } from '../../router';
-import { HEADER_HEIGHT_PX, colors, media } from '../../styles';
-import { Page } from '../layout';
-import { RocksSeaAndSkySvg } from '../svg';
+import { artistImg, artworkImg, backgroundImg } from 'assets/pages/home';
+import { Page, RocksSeaAndSkySvg } from 'components';
+import { Url } from 'router';
+import { HEADER_HEIGHT_PX, colors, media } from 'styles';
 import {
   styled,
   keyframes,

src/components/pages/NotFound.tsx → src/pages/NotFound.tsx

@@ -1,4 +1,4 @@
-import { Link, Url } from '../../router';
+import { Link, Url } from 'router';
 import { Page, H1, Paragraph } from './shared';
 
 export const NotFound = () => (

src/components/pages/Publications.tsx → src/pages/Publications.tsx

@@ -6,7 +6,7 @@ import {
   generations2024Img,
   wami2024Img,
   theMonheganWildlands2024Img,
-} from '../../assets/pages/publications';
+} from 'assets/pages/publications';
 import {
   Page,
   Row,