Update cookiecutter templates

strudel-cookiecutter/base/{@cookiecutter.name@}/cypress.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:5175/strudel-kit/demo/',
+    specPattern: ['cypress/e2e/**/*.cy.{js,jsx,ts,tsx}', 'src/**/*.cy.{js,jsx,ts,tsx}']
+  },
+});

strudel-cookiecutter/base/{@cookiecutter.name@}/cypress/e2e/home.cy.ts

@@ -0,0 +1,6 @@
+describe('The Home Page', () => {
+  it('successfully loads', () => {
+    cy.visit('/');
+    cy.contains('Registered Pages');
+  });
+});

strudel-cookiecutter/base/{@cookiecutter.name@}/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

strudel-cookiecutter/base/{@cookiecutter.name@}/cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

strudel-cookiecutter/base/{@cookiecutter.name@}/cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

strudel-cookiecutter/base/{@cookiecutter.name@}/package.json

@@ -39,6 +39,7 @@
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "cypress": "^13.15.0",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",

strudel-cookiecutter/base/{@cookiecutter.name@}/src/components/FilterGroup.tsx

@@ -15,7 +15,7 @@ export const FilterGroup: React.FC<FilterGroupProps> = ({
   groupId,
   children
 }) => {
-  const { state, dispatch } = useFilters();
+  const { activeFilters, expandedGroup, dispatch } = useFilters();
 
   /**
    * Count the number of active filters in this group by using
@@ -27,7 +27,7 @@ export const FilterGroup: React.FC<FilterGroupProps> = ({
     if (
       React.isValidElement(child) &&
       child.props.field &&
-      hasValue(state.activeFilters.find((f: any) => f.field === child.props.field))
+      hasValue(activeFilters.find((f: any) => f.field === child.props.field))
     ) {
       return activeChildren++
     }
@@ -41,7 +41,7 @@ export const FilterGroup: React.FC<FilterGroupProps> = ({
     <Accordion 
       disableGutters
       elevation={0}
-      expanded={state.expandedGroup === groupId} 
+      expanded={expandedGroup === groupId} 
       onChange={handleChange(groupId)}
       sx={{
         borderTop: '1px solid',

strudel-cookiecutter/base/{@cookiecutter.name@}/src/components/Footer.tsx

@@ -38,7 +38,7 @@ export const Footer: React.FC = () => {
               {config.footer.image && (
                 <AppLink to="/">
                   <ImageWrapper height={60}>
-                    <img src={config.footer.image} />
+                    <img src={`${import.meta.env.BASE_URL}/${config.footer.image}`} />
                   </ImageWrapper>
                 </AppLink>
               )}

strudel-cookiecutter/base/{@cookiecutter.name@}/src/components/TopBar.tsx

@@ -33,7 +33,7 @@ export const TopBar: React.FC = () => {
             )}
             {config.navbar.logo && (
               <ImageWrapper height={30}>
-                <img src={config.navbar.logo} />
+                <img src={`${import.meta.env.BASE_URL}/${config.navbar.logo}`} />
               </ImageWrapper>
             )}
           </AppLink>

strudel-cookiecutter/base/{@cookiecutter.name@}/src/theme.tsx

@@ -1,31 +1,32 @@
-import { PaletteMode, createTheme } from "@mui/material";
+import { createTheme } from "@mui/material";
 import type {} from '@mui/x-data-grid/themeAugmentation';
-import { config } from "../strudel.config";
 
 /**
  * MUI Theme object for setting app-wide and component-wide styles.
  * Specify colors, spacing, fonts, and more.
  * Learn more about theme options: https://mui.com/material-ui/customization/theming/
  */
 export const theme = createTheme({
-  /** Color palette to use throughout the app */
+  // Color palette to use throughout the app
   palette: {
-    mode: config.theme.mode as PaletteMode || 'light',
+    mode: 'light',
     background: {
-      default: config.theme.backgroundColor || '#F5F5F6',
-      paper: config.theme.paperBackgroundColor || '#fff',
+      default: '#F5F5F6',
+      paper: '#fff',
     },
     primary: {
-      main: config.theme.primaryColor || '#1976d2',
-      // light: '#42a5f5',
-      // dark: '#1565c0',
-      // contrastText: '#fff',
+      main: '#1976d2',
+      // Exclude light, dark, or contrastText to have them 
+      // calculated automatically based on the main color.
+      light: '#42a5f5',
+      dark: '#1565c0',
+      contrastText: '#fff',
     },
     secondary: {
-      main: config.theme.secondaryColor || '#9c27b0',
-      // light: '#ba68c8',
-      // dark: '#7b1fa2',
-      // contrastText: '#fff',
+      main: '#9c27b0',
+      light: '#ba68c8',
+      dark: '#7b1fa2',
+      contrastText: '#fff',
     },
     info: {
       main: '#0288d1',
@@ -66,21 +67,21 @@ export const theme = createTheme({
       900: '#444'
     }
   },
-  /** Control the default border radius */
+  // Control the default border radius
   shape: {
     borderRadius: 4,
   },
-  /** Control the font, size, and font weights */
+  // Control the font, size, and font weights
   typography: {
     htmlFontSize: 16,
-    fontFamily: `${config.theme.fontFamily}, "Helvetica", "Verdana", "Arial", sans-serif`,
+    fontFamily: `"Helvetica", "Verdana", "Arial", sans-serif`,
     fontSize: 14,
     fontWeightLight: 300,
     fontWeightRegular: 400,
     fontWeightMedium: 500,
     fontWeightBold: 700,
   },
-  /** Default options for MUI components used throughout the app */
+  // Default options for MUI components used throughout the app
   components: {
     /**
      * Example component customization.

strudel-cookiecutter/base/{@cookiecutter.name@}/src/utils/filters.utils.ts

@@ -1,5 +1,5 @@
 import dayjs from "dayjs";
-import { DataFilter, FilterConfig, FilterOperator } from "../types/filters.types";
+import { DataFilter, FilterConfig } from "../types/filters.types";
 
 export const filterBySearchText = (allData: any[], searchText?: string) => {
   let filteredData = allData;
@@ -106,7 +106,6 @@ export const filterByDataFilters = (allData: any[], filters: DataFilter[], filte
 };
 
 export const filterData = (allData: any[], filters: DataFilter[], filterConfigs: FilterConfig[], searchText?: string) => {
-  console.log(searchText);
   const filteredByText = filterBySearchText(allData, searchText);
   const filteredByTextAndDataFilters = filterByDataFilters(filteredByText, filters, filterConfigs);
   return filteredByTextAndDataFilters;

strudel-cookiecutter/base/{@cookiecutter.name@}/src/utils/queryParams.utils.ts

@@ -1,4 +1,5 @@
 import { DataFilter, FilterConfig } from "../types/filters.types";
+import * as d3 from 'd3-fetch';
 
 /**
  * Convert an array of values to a URL param by
@@ -52,7 +53,6 @@ export const buildParamsString = (filters: DataFilter[], filterConfigs: FilterCo
   let paramsString = '';
   filters.forEach((filter, i) => {
     const filterConfig = filterConfigs.find((c) => c.field === filter.field); 
-    console.log(filterConfig);
     switch(filterConfig?.paramType) {
       case 'array-string':
         paramsString = paramsString.concat(toParamArrayString(filter.field, filter.value, filterConfig.paramTypeOptions.separator));
@@ -74,29 +74,64 @@ export const buildParamsString = (filters: DataFilter[], filterConfigs: FilterCo
 }
 
 export const createFilterParams = (filters: DataFilter[], filterConfigs: FilterConfig[]) => {
-  const params: Record<string, string | number | string[] | number[]> = {};
+  const params = new URLSearchParams();
   filters.forEach((filter, i) => {
     const filterConfig = filterConfigs.find((c) => c.field === filter.field); 
     const options = filterConfig?.paramTypeOptions;
     switch(filterConfig?.paramType) {
       case 'array-string':
         if (Array.isArray(filter.value)) {
           const separator = options?.separator || ',';
-          params[filter.field] = filter.value.join(separator);
-          console.log(params[filter.field])
+          params.append(filter.field, filter.value.join(separator));
         }
         break;
       case 'minmax':
         if (Array.isArray(filter.value) && options.minParam && options.maxParam) {
-          params[options.minParam] = filter.value[0];
-          params[options.maxParam] = filter.value[1];
+          params.append(options.minParam, filter.value[0].toString());
+          params.append(options.maxParam, filter.value[1].toString());
+        }
+        break;
+      case 'repeated':
+        if (Array.isArray(filter.value)) {
+          filter.value.forEach((value) => {
+            params.append(filter.field, value.toString());
+          });
         }
         break;
       default:
         if (filter.value) {
-          params[filter.field] = filter.value
+          params.append(filter.field, filter.value.toString())
         }
     }
   });
   return params;
+}
+
+export const cleanUrl = (url: string) => {
+  return url.replace(/([^:]\/)\/+/g, "$1");
+}
+
+/**
+ * Fetch data from a local CSV, TSV, or JSON, or an external API
+ * that returns JSON.
+ */
+export const fetchData = async (dataSource: string) => {
+  // Get the base portion of the URL. Will be blank when running locally.
+  const base = document.querySelector('base')?.getAttribute('href') ?? '';
+  // Use the VITE_BASE_URL env variable to specify a path prefix that 
+  // should be added to routes and local requests
+  const basename = base + import.meta.env.VITE_BASE_URL;
+  const fileExtension = dataSource.split('.').pop();
+  const isExternal = dataSource.startsWith('http');
+  const dataSourcePath = isExternal ? cleanUrl(dataSource) : cleanUrl(`${basename}/${dataSource}`);
+  let data: any = [];
+  if (fileExtension === 'csv') {
+    data = await d3.csv(dataSourcePath);
+  } else if (fileExtension === 'tsv') {
+    data = await d3.tsv(dataSourcePath);
+  } else if (fileExtension === 'json' || isExternal) {
+    const response = await fetch(dataSourcePath);
+    data = await response.json();
+  }
+  return data;
 }

strudel-cookiecutter/base/{@cookiecutter.name@}/src/utils/useDataFromSource.tsx

@@ -22,7 +22,7 @@ export const useDataFromSource = (dataSource: string): any => {
     const fetchData = async () => {
       const fileExtension = dataSource.split('.').pop();
       const isExternal = dataSource.startsWith('http');
-      const dataSourcePath = isExternal ? dataSource : `${basename}/data/${dataSource}`;
+      const dataSourcePath = isExternal ? dataSource : `${basename}/${dataSource}`;
       let data: any = [];
       if (fileExtension === 'csv') {
         data = await d3.csv(dataSourcePath);

strudel-cookiecutter/base/{@cookiecutter.name@}/strudel.config.ts

@@ -22,13 +22,5 @@ export const config = {
         path: '/playground'
       },
     ]
-  },
-  theme: {
-    mode: 'light',
-    primaryColor: '#1976d2',
-    secondaryColor: '#9c27b0',
-    backgroundColor: '#F5F5F6',
-    paperBackgroundColor: '#FFFFFF',
-    fontFamily: '"Helvetica", "Verdana", "Arial", sans-serif'
   }
 }

strudel-cookiecutter/base/{@cookiecutter.name@}/tsconfig.json

@@ -5,7 +5,7 @@
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
-    "types": ["node"],
+    "types": ["node", "cypress"],
 
     /* Bundler mode */
     "moduleResolution": "bundler",

strudel-cookiecutter/base/{@cookiecutter.name@}/vite.config.ts

@@ -9,6 +9,10 @@ export default defineConfig(({ command, mode }) => {
   const env = loadEnv(mode, process.cwd());
   return {
     plugins: [react(), generouted()],
-    base: env.VITE_BASE_URL
+    base: env.VITE_BASE_URL,
+    server: {
+      port: 5175,
+      strictPort: true,
+    },
   }
 })

strudel-cookiecutter/compare-data/{@cookiecutter.name@}/_context/ContextProvider.tsx

@@ -1,14 +1,15 @@
 import React, { useEffect, useReducer, useContext } from 'react';
 import { CompareDataAction, CompareDataActionType, setComparisonData, setData } from './actions';
 import { CompareDataConfigColDef } from '../_config/taskflow.types';
+import { GridRowSelectionModel } from '@mui/x-data-grid';
 
 interface ComparisonRow {
   [key: string]: number | string | null | undefined;
 }
 
 export interface CompareDataState {
   data: any[];
-  selectedRows: any[];
+  selectedRows: GridRowSelectionModel;
   columns: CompareDataConfigColDef[];
   comparisonColumns: CompareDataConfigColDef[];
   dataIdField: string;

strudel-cookiecutter/contribute-data/{@cookiecutter.name@}/_context/utils.ts

@@ -71,12 +71,8 @@ export const filterByDataFilters = (allData: any[], filters: DataFilter[]) => {
                 && f.value[0]
                 && f.value[1]
               ) {
-                console.log(d[f.field]);
-                console.log(f.value);
-                console.log(dayjs(d[f.field]));
                 const dateValue = dayjs(d[f.field]);
                 if (dateValue.isAfter(f.value[0]) && dateValue.isBefore(f.value[1])) {
-                  console.log('match');
                   match = true;
                 }
               } else {