add initial app state for development with redux/theming set up

.gitignore

@@ -180,4 +180,4 @@ cython_debug/
 *.yaml
 
 # Turn off UI related ignores, defer to ui/.gitignore
-!ui/**/*.json
+!ui/**

ui/.eslintrc.json

@@ -39,8 +39,25 @@
     "import/order": [
       "error",
       {
-        "groups": [["builtin", "external", "internal"]],
-        "newlines-between": "always"
+        "groups": [
+          ["builtin", "external"],
+          ["internal", "parent", "sibling", "index"]
+        ],
+        "newlines-between": "always-and-inside-groups",
+        "pathGroups": [
+          {
+            "pattern": "{@,assets,classes,components,hooks,pages,store,tests,types,utils}/**",
+            "group": "internal",
+            "position": "before"
+          },
+          {
+            "pattern": "{.,..}/**",
+            "group": "internal",
+            "position": "after"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": ["builtin"],
+        "alphabetize": { "order": "asc", "caseInsensitive": true }
       }
     ],
     "import/no-extraneous-dependencies": [

ui/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

ui/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

ui/__mocks__/svg.js

@@ -0,0 +1,3 @@
+export default 'svg';
+export const ReactComponent = 'div';
+//This was from svgr docs: https://react-svgr.com/docs/jest/

ui/jest.config.js

@@ -11,7 +11,11 @@ const customJestConfig = {
   coverageReporters: ['json-summary'],
   moduleFileExtensions: ['ts', 'tsx', 'js'],
   moduleNameMapper: {
+    '^.+\\.(svg)$': '<rootDir>/__mocks__/svg.js',
     '^@/(.*)$': '<rootDir>/src/$1',
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/__mocks__/fileMock.js',
+    '\\.(css|less|scss|sass)$': '<rootDir>/__mocks__/styleMock.js',
   },
   setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
   testEnvironment: 'jest-environment-jsdom',

ui/next.config.mjs

@@ -1,6 +1,38 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: 'export',
+  webpack(config) {
+    // Grab the existing rule that handles SVG imports
+    const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'));
+
+    config.module.rules.push(
+      // Reapply the existing rule, but only for svg imports ending in ?url
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/, // *.svg?url
+      },
+      // Convert all other *.svg imports to React components
+      {
+        test: /\.svg$/i,
+        issuer: fileLoaderRule.issuer,
+        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
+        use: ['@svgr/webpack'],
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/,
+        type: 'asset/resource',
+        generator: {
+          filename: 'static/fonts/[name][ext]',
+        },
+      }
+    );
+
+    // Modify the file loader rule to ignore *.svg, since we have it handled now.
+    fileLoaderRule.exclude = /\.svg$/i;
+
+    return config;
+  },
 };
 
 export default nextConfig;