Vite for DTUI

.storybook/main.js

@@ -1,76 +1,38 @@
+// This file has been automatically migrated to valid ESM format by Storybook.
 
-const path = require('path');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+import path, { dirname } from 'path';
+import htmlPurge from 'vite-plugin-html-purgecss';
+import {fileURLToPath} from 'url';
+import react, { reactCompilerPreset } from '@vitejs/plugin-react';
+import { mergeConfig } from 'vite';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 export default {
-    // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
-    framework: '@storybook/react-webpack5',
-    stories: ['./stories/*.mdx', './stories/*.stories.@(js|jsx|mjs|ts|tsx)'],
-    staticDirs: ['../public', '../static','../assets','../assets/fonts', '../assets/img']
-};
-module.exports = {
-    stories: ['./**/stories/*.@(stories.@(js))','./**/stories/*.@(mdx)'],
+    framework: '@storybook/react-vite',
+    stories: ['./**/stories/*.@(stories.@(jsx))','./**/stories/*.@(mdx)'],
+    core: {
+        builder: '@storybook/builder-vite',
+    },
+    build: {
+        outDir: path.resolve(__dirname, "./docs"),
+        emptyOutDir: true
+    },
+    staticDirs: ['../assets','../assets/fonts', '../assets/img', '../styles'],
     addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-webpack5-compiler-babel",
-    "@chromatic-com/storybook",
-    "@storybook/addon-docs",
-    "@storybook/addon-styling-webpack",
+      "@storybook/addon-links",
+      "@chromatic-com/storybook",
+      "@storybook/addon-docs",
+      '@storybook/addon-vitest',
+      '@storybook/addon-a11y',
     ],
-  webpack: (config, options) => {
-      options.cache.set = () => Promise.resolve();
-      return config;
-  },
-  webpackFinal: async (config) => {
-    config.plugins.push(new MiniCssExtractPlugin());
-    config.module.rules.push({
-            test: /\.js$|jsx$/,
-            exclude: /node_modules\.*/,
-            loader: "babel-loader"
-        },
-        {
-            test: /\.css$/,
-            use: [
-                {
-                    loader: MiniCssExtractPlugin.loader
-                },
-                {
-                    loader: "css-loader"
-                }
-            ]
-        },
-        {
-            include: /\.(eot|ttf|woff|woff2|png|svg|ico|gif|jpg|pdf|webp)$/,
-            loader: 'file-loader',
-            type: 'javascript/auto',
-            options: {
-                name: '[path][name].[ext]'
-            }
-        },
-        {
-            test: /\.scss$/,
-            use: [
-                { loader: MiniCssExtractPlugin.loader },
-                { loader: "css-loader", options: { url: false, sourceMap: true } },
-                {
-                    loader: "sass-loader",
-                    options: {
-                        sourceMap: true,
-                        sassOptions: {
-                            includePaths: ["./src/_scss", "./node_modules"]
-                        }
-                    }
-                }
-            ]
+  async viteFinal(config) {
+    return mergeConfig(config, {
     });
-    return config;
-  },
-  framework: {
-        name: '@storybook/react-webpack5',
-        options: {}
   },
-    docs: {},
-    typescript: {
-        reactDocgen: 'react-docgen-typescript'
-    }
+  docs: {},
+  typescript: {
+    reactDocgen: 'react-docgen-typescript'
+  }
 };

.storybook/preview-head.html

@@ -128,5 +128,7 @@
         /* $file-formats: eot woff2 woff ttf */
     }
 </style>
-
+<script>
+  window.global = window;
+</script>
 <title>Data Transparency UI</title>

.storybook/preview.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
 import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 import { library } from "@fortawesome/fontawesome-svg-core";
 
@@ -91,10 +90,6 @@ import dataTransparencyUiTheme from './theme';
 // where global scss styles get applied
 import '../styles/storybook.scss';
 export const parameters = {
-  docs: {
-    container: DocsContainer,
-    page: DocsPage,
-  },
   options: {
     name: 'Data Transparency UI',
     storySort: (a, b) => {
@@ -109,7 +104,7 @@ export const parameters = {
     tags: ['autodocs']
   },
   viewport: {
-    viewports: INITIAL_VIEWPORTS,
+    options: INITIAL_VIEWPORTS,
   },
   a11y: {
     element: 'body',
@@ -124,8 +119,4 @@ export const parameters = {
     },
   },
 };
-
-export const decorators = [
-  (storyFn) => <div style={{ width: "100%" }}>{storyFn()}</div>,
-];
 export const tags = ['autodocs'];

.storybook/stories/card.mdx

@@ -1,5 +1,5 @@
 import {Meta, Canvas, Controls} from '@storybook/addon-docs/blocks';
-import * as CardStories from "./card.stories";
+import * as CardStories from "./card.stories.jsx";
 import CardBody from "../../components/cards/CardBody";
 import CardButton from "../../components/cards/CardButton";
 import CardHero from "../../components/cards/CardHero";

.storybook/stories/informationBoxes.stories.js → .storybook/stories/informationBoxes.stories.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { TabsWrapper, TabsTooltip, InformationBoxesWrapper } from '../misc';
 import InformationBoxes from '../../components/InformationBoxes';
 
 export default {

.storybook/stories/table.stories.js → .storybook/stories/table.stories.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Table from '../../components/table/Table';
 import TooltipWrapper from '../../components/infoTooltip/TooltipWrapper';
 import TooltipComponent from '../../components/infoTooltip/TooltipComponent';
-import { TableWrapper, BasicTableWrapper, CustomColumnExample } from '../misc';
+import { TableWrapper, BasicTableWrapper } from '../misc';
 
 export default {
   title: 'Tables/Table',

.storybook/stories/tabs.stories.js → .storybook/stories/tabs.stories.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TabsWrapper, TabsTooltip, TabsWrapperShowTooltip } from '../misc';
+import { TabsWrapper } from '../misc';
 import Tabs from '../../components/tabs/Tabs';
 
 export default {

.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

babel.config.js

@@ -1,19 +1,12 @@
 const presets = [
+    "@babel/preset-react",
     [
         "@babel/preset-env",
-        {
-            targets: {
-                ie: "10",
-                node: "10"
-            },
-            useBuiltIns: "entry",
-            corejs: { version: 3, proposals: true }
-        }
-    ],
-    "@babel/preset-react"
+    ]
 ];
 
 const plugins = [
+    "@babel/plugin-syntax-jsx",
     [
         "module-resolver",
         {
@@ -29,7 +22,7 @@ const plugins = [
     }]
 ];
 
-module.exports = {
+export default {
     presets,
     plugins
 };

components/Button.jsx

@@ -6,7 +6,7 @@
 import React from 'react';
 import PropTypes from "prop-types";
 
-require('../styles/components/_buttons.scss');
+import '../styles/components/_buttons.scss';
 
 const propTypes = {
     buttonSize: PropTypes.oneOf(['large', 'medium', 'small', 'lg', 'md', 'sm']).isRequired,

components/Carousel.jsx

@@ -7,7 +7,7 @@ import React, { cloneElement, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { uniqueId } from 'lodash-es';
 
-require('../styles/components/_carousel.scss');
+import '../styles/components/_carousel.scss';
 
 const propTypes = {
     items: PropTypes.arrayOf(PropTypes.element)

components/DownloadIconButton.jsx

@@ -11,7 +11,7 @@ import { faSpinner, faFileDownload } from '@fortawesome/free-solid-svg-icons';
 
 import TooltipWrapper from './infoTooltip/TooltipWrapper';
 
-require('../styles/components/_downloadIconButton.scss');
+import '../styles/components/_downloadIconButton.scss';
 
 const propTypes = {
     onClick: PropTypes.func.isRequired,

components/FiscalYearPicker.jsx

@@ -5,7 +5,7 @@ import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons';
 import Picker from './Picker';
 import { allFiscalYears } from '../helpers/fiscalYearHelper';
 
-require('../styles/components/_fiscalYearPicker.scss');
+import '../styles/components/_fiscalYearPicker.scss';
 
 const defaultSort = (a, b) => {
     if (Number.isInteger(a)) return b - a;

components/InPageNav.jsx

@@ -12,7 +12,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { mediumScreen, largeScreen, xLargeScreen } from '../dataMapping/mobileBreakpoints';
 import { checkIsOverflow, getElementData, reset } from '../helpers/inPageNavHelper';
 
-require('../styles/components/_inPageNav.scss');
+import '../styles/components/_inPageNav.scss';
 
 const propTypes = {
     sections: PropTypes.array,

components/InformationBoxes.jsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { throttle } from 'lodash-es';
-import { formattedValue, numberToText } from '../helpers/informationBoxesHelper';
+import { formattedValue, numberToText } from '../helpers/informationBoxesHelper.js';
 
-require('../styles/components/_informationBoxes.scss');
+import '../styles/components/_informationBoxes.scss';
 
 const propTypes = {
     boxes: PropTypes.arrayOf(PropTypes.shape({

components/NewPicker.jsx

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { uniqueId } from 'lodash-es';
 
-require('../styles/components/_newPicker.scss');
+import '../styles/components/_newPicker.scss';
 
 const propTypes = {
     size: PropTypes.oneOf(['sm', 'md', 'lg', 'small', 'medium', 'large']),

components/PageHeader.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import InPageNav from './InPageNav';
 
-require('../styles/components/_pageHeader.scss');
+import '../styles/components/_pageHeader.scss';
 
 const PageHeader = ({
     title,

components/Picker.jsx

@@ -7,8 +7,7 @@ import React, { useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { uniqueId } from 'lodash-es';
-
-require('../styles/components/_picker.scss');
+import '../styles/components/_picker.scss';
 
 const fontAwesomeIconId = "usa-dt-picker__button-icon--svg";
 

components/SearchBar.jsx

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { resetOrSubmitSearch, shouldResetSearchTerm } from '../helpers/searchBarHelper';
 
-require('../styles/components/_searchBar.scss');
+import '../styles/components/_searchBar.scss';
 
 const propTypes = {
     onSearch: PropTypes.func,

components/SearchResultsTableWrapper.jsx

@@ -6,7 +6,7 @@
 import React from 'react';
 import PropTypes from "prop-types";
 
-require('../styles/components/_searchResultsTableWrapper.scss');
+import '../styles/components/_searchResultsTableWrapper.scss';
 
 const propTypes = {
     tableComponent: PropTypes.func.isRequired

components/SectionHeader.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import TooltipWrapper from './infoTooltip/TooltipWrapper';
 
-require('../styles/components/_sectionHeader.scss');
+import '../styles/components/_sectionHeader.scss';
 
 function SectionHeader({
     icon, title, overLine, description, titleTooltip, descTooltip

components/SectionWrapper.jsx

@@ -5,7 +5,7 @@ import SectionHeader from './SectionHeader';
 import ComingSoon from './messages/ComingSoon';
 import { createOnKeyDownHandler } from '../helpers/keyboardEventsHelper';
 
-require('../styles/components/_sectionWrapper.scss');
+import '../styles/components/_sectionWrapper.scss';
 
 const defaultControlledProps = {
     isControlled: false,

components/ShareIcon.jsx

@@ -6,7 +6,7 @@ import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
 import Picker from "./Picker";
 import { socialShareOptions } from '../helpers/socialShare';
 
-require('../styles/components/_shareIcon.scss');
+import '../styles/components/_shareIcon.scss';
 
 const propTypes = {
     url: PropTypes.string.isRequired,

components/cards/CardContainer.jsx

@@ -6,7 +6,7 @@
 import React from 'react';
 import PropTypes from "prop-types";
 
-require('../../styles/components/cards/_cards.scss');
+import '../../styles/components/cards/_cards.scss';
 
 const propTypes = {
     variant: PropTypes.string, // elevated, outline, or none

components/flexGrid/FlexGridCol.jsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { createClassString } from '../../helpers/flexGridHelper';
-
-require('../../styles/components/_flexGrid.scss');
+import '../../styles/components/_flexGrid.scss';
 
 export default function GridCol({
   children,

components/flexGrid/FlexGridContainer.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { createClassString } from '../../helpers/flexGridHelper';
 
-require('../../styles/components/_flexGrid.scss');
+import '../../styles/components/_flexGrid.scss';
 
 export default function GridContainer({ children, className, ...props }) {
   return (

components/flexGrid/FlexGridRow.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { createClassString } from '../../helpers/flexGridHelper';
 
-require('../../styles/components/_flexGrid.scss');
+import '../../styles/components/_flexGrid.scss';
 
 const GridRow = ({
     children,

components/infoTooltip/TooltipWrapper.jsx

@@ -10,7 +10,7 @@ import { throttle, uniqueId } from "lodash-es";
 import cx from 'classnames';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-require('../../styles/components/infoTooltip/_tooltipWrapper.scss');
+import '../../styles/components/infoTooltip/_tooltipWrapper.scss';
 
 const propTypes = {
     className: PropTypes.string,