Merge pull request #1807 from GSA/1799-asset-path-alias

1799 asset path alias

benefit-finder/.storybook/main.js

@@ -1,3 +1,5 @@
+import { mergeConfig } from 'vite'
+
 const config = {
   staticDirs: ['../themes'],
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx)'],
@@ -15,5 +17,18 @@ const config = {
   core: {
     builder: '@storybook/builder-vite',
   },
-}
+  viteFinal(config) {
+    return mergeConfig(config, {
+      build: {
+      chunkSizeWarningLimit: '1000',
+      rollupOptions: {
+          output: {
+            manualChunks: (id) => id.includes('src/App/index.jsx') ? 'app-chunk' : false,
+          },
+        },
+      },
+    });
+  },
+};
+
 export default config

benefit-finder/src/App/index.jsx

@@ -1,21 +1,21 @@
 import { useState, createContext, useEffect } from 'react'
 import { version } from '../../package.json'
-import { useResetElement } from '../shared/hooks'
-import * as apiCalls from '../shared/api/apiCalls'
+import { useResetElement } from '@hooks'
+import * as apiCalls from '@api/apiCalls'
 import {
   Intro,
   LifeEventSection,
   ResultsView,
   VerifySelectionsView,
   Form,
   Alert,
-} from '../shared/components'
+} from '@components'
 
 import './_index.scss'
 
 // data and ui content
-import * as en from '../shared/locales/en/en.json'
-import * as es from '../shared/locales/es/es.json'
+import * as en from '@locales/en/en.json'
+import * as es from '@locales/es/es.json'
 
 /**
  * a functional component that renders our application.

benefit-finder/src/App/index.stories.jsx

@@ -1,5 +1,5 @@
 import App from './index.jsx'
-import content from '../shared/api/mock-data/current.js'
+import content from '@api/mock-data/current.js'
 
 const { data } = JSON.parse(content)
 

benefit-finder/src/shared/components/Accordion/index.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import accordion from '@uswds/uswds/js/usa-accordion'
-import { Icon } from '../index'
-import { dataLayerUtils } from '../../utils'
+import { Icon } from '@components'
+import { dataLayerUtils } from '@utils'
 import PropTypes from 'prop-types'
 import './_index.scss'
 

benefit-finder/src/shared/components/Alert/index.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
-import { Heading } from '../index'
-import { useHandleClassName } from '../../hooks'
-import { dataLayerUtils } from '../../utils'
+import { Heading } from '@components'
+import { useHandleClassName } from '@hooks'
+import { dataLayerUtils } from '@utils'
 import './_index.scss'
 import { useEffect } from 'react'
 

benefit-finder/src/shared/components/BenefitAccordionGroup/__tests__/index.spec.jsx

@@ -1,8 +1,8 @@
 import { render, screen } from '@testing-library/react'
 import BenefitAccordionGroup from '../index.jsx'
-import content from '../../../api/mock-data/current.js'
-import * as en from '../../../locales/en/en.json'
-import * as es from '../../../locales/es/es.json'
+import content from '@api/mock-data/current.js'
+import * as en from '@locales/en/en.json'
+import * as es from '@locales/es/es.json'
 
 const { data } = JSON.parse(content)
 const { benefits } = data

benefit-finder/src/shared/components/BenefitAccordionGroup/index.jsx

@@ -1,13 +1,13 @@
 // import { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
-import { createMarkup, dataLayerUtils } from '../../utils'
+import { createMarkup, dataLayerUtils } from '@utils'
 import {
   Accordion,
   Button,
   Heading,
   KeyElegibilityCrieriaList,
   ObfuscatedLink,
-} from '../index'
+} from '@components'
 import './_index.scss'
 
 /**

benefit-finder/src/shared/components/BenefitAccordionGroup/index.stories.jsx

@@ -1,8 +1,8 @@
 // import { useState } from 'react'
 import BenefitAccordionGroup from './index.jsx'
-import content from '../../api/mock-data/current.js'
-import * as en from '../../locales/en/en.json'
-import * as es from '../../locales/es/es.json'
+import content from '@api/mock-data/current.js'
+import * as en from '@locales/en/en.json'
+import * as es from '@locales/es/es.json'
 
 const { data } = JSON.parse(content)
 const { benefits } = data

benefit-finder/src/shared/components/Button/index.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
-import { useHandleClassName } from '../../hooks'
-import { Icon } from '../index'
-import Colors from '../../styles/colors/_index.js'
+import { useHandleClassName } from '@hooks'
+import { Icon } from '@components'
+import Colors from '@styles/colors/_index.js'
 import PropTypes from 'prop-types'
 import './_index.scss'
 

benefit-finder/src/shared/components/ButtonGroup/index.jsx

@@ -1,4 +1,4 @@
-import { Button } from '../index'
+import { Button } from '@components'
 import PropTypes from 'prop-types'
 
 /**

benefit-finder/src/shared/components/Card/index.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
-import { Heading, Icon } from '../index'
-import { useHandleClassName } from '../../hooks'
-import { createMarkup } from '../../utils'
+import { Heading, Icon } from '@components'
+import { useHandleClassName } from '@hooks'
+import { createMarkup } from '@utils'
 import './_index.scss'
 
 /**

benefit-finder/src/shared/components/Chevron/index.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
-import { Heading } from '../index'
-import { createMarkup } from '../../utils'
+import { Heading } from '@components'
+import { createMarkup } from '@utils'
 import './_index.scss'
 
 /**

benefit-finder/src/shared/components/Date/__tests__/index.spec.jsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react'
 import Date from '../index.jsx'
-import * as en from '../../../locales/en/en.json'
+import * as en from '@locales/en/en.json'
 
 const fieldSetId = 'applicant_date_of_birth_0'
 

benefit-finder/src/shared/components/Date/index.stories.jsx

@@ -1,5 +1,5 @@
 import Date from './index.jsx'
-import * as en from '../../locales/en/en.json'
+import * as en from '@locales/en/en.json'
 
 export default {
   component: Date,

benefit-finder/src/shared/components/EmailTrigger/index.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { buildURIParameter } from '../../utils'
+import { buildURIParameter } from '@utils'
 
 /**
  * a functional component that renders a anchor with mailto email context

benefit-finder/src/shared/components/Fieldset/__tests__/index.spec.jsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react'
 import Fieldset from '../index.jsx'
-import * as en from '../../../locales/en/en.json'
+import * as en from '@locales/en/en.json'
 
 const fieldSetId = 'applicant_date_of_birth_0'
 

benefit-finder/src/shared/components/Fieldset/index.jsx

@@ -1,6 +1,6 @@
-import { Hint, Legend } from '../index'
+import { Hint, Legend } from '@components'
 import PropTypes from 'prop-types'
-import { useHandleClassName } from '../../hooks'
+import { useHandleClassName } from '@hooks'
 
 import './_index.scss'
 

benefit-finder/src/shared/components/Fieldset/index.stories.jsx

@@ -1,6 +1,6 @@
 import Fieldset from './index.jsx'
-import { TextInput } from '../index'
-import * as en from '../../locales/en/en.json'
+import TextInput from '@components/TextInput'
+import * as en from '@locales/en/en.json'
 
 const ui = en.errorText
 

benefit-finder/src/shared/components/Heading/index.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import { useHandleClassName } from '../../hooks'
+import { useHandleClassName } from '@hooks'
 import './_index.scss'
 
 /**

benefit-finder/src/shared/components/Icon/index_icons.jsx

@@ -1,4 +1,4 @@
-import Colors from '../../styles/colors/_index.js'
+import Colors from '@styles/colors/_index.js'
 
 // export svg components in alpha order
 

benefit-finder/src/shared/components/Intro/__tests__/index.spec.jsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react'
 import Intro from '../index.jsx'
-import * as en from '../../../locales/en/en.json'
-import content from '../../../api/mock-data/current.js'
+import * as en from '@locales/en/en.json'
+import content from '@api/mock-data/current.js'
 
 const t = en
 const { data } = JSON.parse(content)

benefit-finder/src/shared/components/Intro/index.jsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
-import { dataLayerUtils } from '../../utils'
-import { useResetElement, useCrazyEggUpdate } from '../../hooks'
+import { dataLayerUtils } from '@utils'
+import { useResetElement, useCrazyEggUpdate } from '@hooks'
 import PropTypes from 'prop-types'
 import {
   Button,
@@ -9,7 +9,7 @@ import {
   NoticesList,
   ProcessList,
   TimeIndicator,
-} from '../index'
+} from '@components'
 
 import './_index.scss'
 

benefit-finder/src/shared/components/Intro/index.stories.jsx

@@ -1,6 +1,6 @@
 import Intro from './index.jsx'
-import content from '../../api/mock-data/current.js'
-import * as en from '../../locales/en/en.json'
+import content from '@api/mock-data/current.js'
+import * as en from '@locales/en/en.json'
 
 const { data } = JSON.parse(content)
 const { lifeEventForm } = data

benefit-finder/src/shared/components/KeyElegibilityCrieriaList/__tests__/index.spec.jsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react'
 import KeyElegibilityCrieriaList from '../index.jsx'
-import * as en from '../../../locales/en/en.json'
+import * as en from '@locales/en/en.json'
 
 describe('KeyElegibilityCrieriaList', () => {
   it('renders a match to the previous snapshot', () => {

benefit-finder/src/shared/components/KeyElegibilityCrieriaList/index.jsx

@@ -1,6 +1,6 @@
-import { Heading, Icon } from '../index'
+import { Heading, Icon } from '@components'
 import PropTypes from 'prop-types'
-import { useHandleClassName } from '../../hooks'
+import { useHandleClassName } from '@hooks'
 import './_index.scss'
 
 /**

benefit-finder/src/shared/components/KeyElegibilityCrieriaList/index.stories.jsx

@@ -1,6 +1,6 @@
 import KeyElegibilityCrieriaList from './index.jsx'
-import content from '../../api/mock-data/current.js'
-import * as en from '../../locales/en/en.json'
+import content from '@api/mock-data/current.js'
+import * as en from '@locales/en/en.json'
 
 const { resultsView } = en
 

benefit-finder/src/shared/components/Label/index.jsx

@@ -1,4 +1,4 @@
-import { useHandleClassName } from '../../hooks'
+import { useHandleClassName } from '@hooks'
 import PropTypes from 'prop-types'
 
 import './_index.scss'

benefit-finder/src/shared/components/LifeEventSection/__tests__/index.spec.jsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react'
 import LifeEventSection from '../index.jsx'
-import content from '../../../api/mock-data/current.js'
-import * as en from '../../../locales/en/en.json'
+import content from '@api/mock-data/current.js'
+import * as en from '@locales/en/en.json'
 
 const { data } = JSON.parse(content)
 const { lifeEventForm } = data

benefit-finder/src/shared/components/LifeEventSection/index.jsx

@@ -6,13 +6,9 @@ import {
   dataLayerUtils,
   errorHandling,
   handleSurvey,
-} from '../../utils'
-import {
-  useHandleUnload,
-  useResetElement,
-  useCrazyEggUpdate,
-} from '../../hooks'
-import * as apiCalls from '../../api/apiCalls'
+} from '@utils'
+import { useHandleUnload, useResetElement, useCrazyEggUpdate } from '@hooks'
+import * as apiCalls from '@api/apiCalls'
 import {
   Alert,
   Button,
@@ -23,7 +19,7 @@ import {
   Select,
   StepIndicator,
   Modal,
-} from '../index'
+} from '@components'
 import './_index.scss'
 
 /**

benefit-finder/src/shared/components/LifeEventSection/index.stories.jsx

@@ -1,6 +1,6 @@
 import LifeEventSection from './index.jsx'
-import content from '../../api/mock-data/current.js'
-import * as en from '../../locales/en/en.json'
+import content from '@api/mock-data/current.js'
+import * as en from '@locales/en/en.json'
 
 const { data } = JSON.parse(content)
 const { lifeEventForm } = data

benefit-finder/src/shared/components/Modal/index.jsx

@@ -1,9 +1,9 @@
 import { useEffect, useRef } from 'react'
 import NavModal from 'react-modal'
 import PropTypes from 'prop-types'
-import { Button, ObfuscatedLink, Icon, Heading } from '../index'
-import { scrollLock, dataLayerUtils } from '../../utils'
-import { useCrazyEggUpdate } from '../../hooks'
+import { Button, ObfuscatedLink, Icon, Heading } from '@components'
+import { scrollLock, dataLayerUtils } from '@utils'
+import { useCrazyEggUpdate } from '@hooks'
 
 import './_index.scss'
 

benefit-finder/src/shared/components/NoticesList/__tests__/index.spec.jsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react'
 import NoticesList from '../index.jsx'
-import * as en from '../../../locales/en/en.json'
+import * as en from '@locales/en/en.json'
 
 describe('NoticesList', () => {
   const t = en

benefit-finder/src/shared/components/NoticesList/index.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
-import { createMarkup } from '../../utils'
-import { Icon } from '../index'
+import { createMarkup } from '@utils'
+import { Icon } from '@components'
 
 import './_index.scss'
 

benefit-finder/src/shared/components/NoticesList/index.stories.jsx

@@ -1,5 +1,5 @@
 import NoticesList from './index.jsx'
-import * as en from '../../locales/en/en.json'
+import * as en from '@locales/en/en.json'
 
 const { intro } = en
 

benefit-finder/src/shared/components/ObfuscatedLink/index.jsx

@@ -1,5 +1,5 @@
-import { useHandleClassName } from '../../hooks'
-import { Icon } from '../index'
+import { useHandleClassName } from '@hooks'
+import { Icon } from '@components'
 import PropTypes from 'prop-types'
 import './_index.scss'
 

benefit-finder/src/shared/components/Paragraph/index.jsx

@@ -1,4 +1,4 @@
-import { useHandleClassName } from '../../hooks'
+import { useHandleClassName } from '@hooks'
 import PropTypes from 'prop-types'
 import './_index.scss'
 

benefit-finder/src/shared/components/PrintButton/index.jsx

@@ -1,4 +1,4 @@
-import { Button } from '../index'
+import { Button } from '@components'
 
 /**
  * a functional component that renders a button with window print functionality

benefit-finder/src/shared/components/Radio/index.jsx

@@ -1,5 +1,5 @@
-import { useHandleClassName } from '../../hooks'
-import { Label } from '../index'
+import { useHandleClassName } from '@hooks'
+import { Label } from '@components'
 import PropTypes from 'prop-types'
 
 import './_index.scss'