@corva/create-app 0.0.0-2576df8 → 0.0.0-5fb771a

package/templates/ui/javascript/src/{App.drilling.js → App.drilling.jsx}

@@ -4,7 +4,7 @@ import { useAppCommons } from '@corva/ui/effects';
 import { DEFAULT_SETTINGS } from './constants';
 import logo from './assets/logo.svg';
 
-import styles from './App.scss';
+import styles from './App.module.scss';
 
 const App = () => {
   const { appKey, rig, well, appSettings } = useAppCommons();
@@ -16,7 +16,7 @@ const App = () => {
       <div className={styles.container}>
         <img src={logo} alt="logo" className={styles.logo} />
         <p>
-          Edit <code>src/App.js</code> and save to reload.
+          Edit <code>src/App.jsx</code> and save to reload.
           <br />
           <br />
         </p>
@@ -44,6 +44,6 @@ const App = () => {
   );
 };
 
-// Important: Do not change root component default export (App.js). Use it as container
+// Important: Do not change root component default export (App.jsx). Use it as container
 //  for your App. It's required to make build and zip scripts work as expected;
 export default App;

package/templates/ui/javascript/src/{AppSettings.js → AppSettings.jsx}

@@ -23,6 +23,6 @@ const AppSettings = () => {
   );
 };
 
-// Important: Do not change root component default export (AppSettings.js). Use it as container
+// Important: Do not change root component default export (AppSettings.jsx). Use it as container
 //  for your App Settings. It's required to make build and zip scripts work as expected;
 export default AppSettings;

package/templates/ui/javascript/src/__tests__/{AppSettings.test.js → AppSettings.test.jsx}

@@ -6,7 +6,7 @@ import AppSettings from '../AppSettings';
 
 describe('<AppSettings />', () => {
   it('should call onChange with a changed setting on settings change', async () => {
-    const handleSettingChange = jest.fn();
+    const handleSettingChange = vi.fn();
 
     render(
       <AppTestWrapper

package/templates/ui/typescript/AGENTS.md

@@ -22,12 +22,14 @@ src/
   constants.ts         — Default settings values
   types.ts             — Custom app settings interface
   custom.d.ts          — Module declarations for CSS/SVG imports
-  App.scss             — Component styles (SCSS modules)
-  __tests__/           — Jest test files
+  App.module.scss             — Component styles (SCSS modules)
+  __tests__/           — Vitest test files
   __mocks__/mockData.ts — Mock data for tests
   assets/              — Static assets (SVGs, images)
-config/jest/           — Jest setup (setupTests, transforms)
-config-overrides.js    — Webpack 5 customization
+config/vite/           — Shared Corva Vite config
+vite.config.mjs        — Vite entry config
+vitest.setup.js        — Test environment setup
+index.html             — Dev server host page
 tsconfig.json          — TypeScript configuration
 manifest.json          — Corva platform app metadata (generated at scaffold time)
 ```
@@ -117,7 +119,7 @@ transition: transition(color, background-color);
 **Import in component:**
 
 ```typescript
-import styles from './App.scss';
+import styles from './App.module.scss';
 // Use: <div className={styles.container}>
 ```
 
@@ -295,12 +297,12 @@ General rules:
 
 ## Testing
 
-- **Framework:** Jest + React Testing Library
+- **Framework:** Vitest + React Testing Library
 - **Wrapper:** Use `AppTestWrapper` from `@corva/ui/testing` to wrap components — it provides `useAppCommons()` context
 - **Pattern:** Pass data via `AppTestWrapper` props, render components with no props
-- **Mocking:** Mock network requests (jest mocks or msw), never call real APIs
+- **Mocking:** Mock network requests (`vi.mock`/`vi.fn` or msw), never call real APIs
 - **Timezone:** UTC is enforced (`process.env.TZ = 'UTC'`)
-- **Mocked globals:** `ResizeObserver`, `MutationObserver` (in `setupTests.js`)
+- **Mocked globals:** `ResizeObserver`, `MutationObserver` (in `vitest.setup.js`)
 
 ```tsx
 // Test pattern — data flows through AppTestWrapper context

package/templates/ui/typescript/src/App.completion.tsx

@@ -4,7 +4,7 @@ import { useAppCommons } from '@corva/ui/effects';
 import { DEFAULT_SETTINGS } from './constants';
 import logo from './assets/logo.svg';
 
-import styles from './App.scss';
+import styles from './App.module.scss';
 
 const App = () => {
   const { appKey, fracFleet, well, wells, appSettings } = useAppCommons();

package/templates/ui/typescript/src/App.drilling.tsx

@@ -4,7 +4,7 @@ import { useAppCommons } from '@corva/ui/effects';
 import { DEFAULT_SETTINGS } from './constants';
 import logo from './assets/logo.svg';
 
-import styles from './App.scss';
+import styles from './App.module.scss';
 
 const App = () => {
   const { appKey, rig, well, appSettings } = useAppCommons();

package/templates/ui/typescript/src/__tests__/AppSettings.test.tsx

@@ -6,7 +6,7 @@ import AppSettings from '../AppSettings';
 
 describe('<AppSettings />', () => {
   it('should call onChange with a changed setting on settings change', async () => {
-    const handleSettingChange = jest.fn();
+    const handleSettingChange = vi.fn();
 
     render(
       <AppTestWrapper

package/templates/ui/typescript/tsconfig.json

@@ -1,7 +1,20 @@
 {
-  "extends": "@tsconfig/create-react-app/tsconfig.json",
   "compilerOptions": {
-    "noEmit": false,
-    "sourceMap": true
-  }
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "types": ["vite/client", "vitest/globals", "@testing-library/jest-dom/vitest"],
+    "allowJs": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "paths": { "~/*": ["./src/*"] }
+  },
+  "include": ["src"]
 }

package/common/python/requirements.txt

@@ -1,2 +0,0 @@
-corva-sdk==1.14.0
-pytest==7.1.1

package/templates/ui/javascript/config/jest/babelTransform.js

@@ -1,16 +0,0 @@
-/* eslint-disable */
-
-const babelJest = require('babel-jest').default;
-
-module.exports = babelJest.createTransformer({
-  presets: [
-    [
-      require.resolve('babel-preset-react-app'),
-      {
-        runtime: 'automatic',
-      },
-    ],
-  ],
-  babelrc: false,
-  configFile: false,
-});

package/templates/ui/javascript/config/jest/cssTransform.js

@@ -1,16 +0,0 @@
-/* eslint-disable */
-
-// This is a custom Jest transformer turning style imports into empty objects.
-// http://facebook.github.io/jest/docs/en/webpack.html
-
-module.exports = {
-  process() {
-    return {
-      code: 'module.exports = {};',
-    };
-  },
-  getCacheKey() {
-    // The output is always the same.
-    return 'cssTransform';
-  },
-};

package/templates/ui/javascript/config/jest/fileTransform.js

@@ -1,48 +0,0 @@
-/* eslint-disable */
-
-const path = require('path');
-
-// This is a custom Jest transformer turning file imports into filenames.
-// http://facebook.github.io/jest/docs/en/webpack.html
-
-const toPascalCase = str => {
-  const allWordsIterator = str.matchAll(/\w+/g);
-
-  return Array.from(allWordsIterator).reduce((acc, matchResult) => {
-    const word = matchResult[0];
-    return acc + word[0].toUpperCase() + word.slice(1).toLowerCase();
-  }, '');
-};
-
-module.exports = {
-  process(src, filename) {
-    const assetFilename = JSON.stringify(path.basename(filename));
-
-    if (filename.match(/\.svg$/)) {
-      // Based on how SVGR generates a component name:
-      // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
-      const pascalCaseFilename = toPascalCase(path.parse(filename).name);
-      const componentName = `Svg${pascalCaseFilename}`;
-      return {
-        code: `const React = require('react');
-        module.exports = {
-          __esModule: true,
-          default: ${assetFilename},
-          ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
-            return {
-              $$typeof: Symbol.for('react.element'),
-              type: 'svg',
-              ref: ref,
-              key: null,
-              props: Object.assign({}, props, {
-                children: ${assetFilename}
-              })
-            };
-          }),
-        };`,
-      };
-    }
-
-    return { code: `module.exports = ${assetFilename};` };
-  },
-};

package/templates/ui/javascript/config/jest/globalSetup.js

@@ -1,5 +0,0 @@
-module.exports = async () => {
-  // use UTC timezone to not break tests when you run them on
-  // an environemnt with a different timezone
-  process.env.TZ = 'UTC';
-};

package/templates/ui/javascript/config/jest/setupTests.js

@@ -1,30 +0,0 @@
-/* eslint-disable */
-
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-// eslint-disable-next-line
-import '@testing-library/jest-dom/extend-expect';
-
-// Set UTC timezone for tests to not use the environment timezone
-process.env.TZ = 'UTC';
-
-// Mock ResizeObserver & MutationObserver
-class FakeObserver {
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-}
-
-global.ResizeObserver = FakeObserver;
-global.MutationObserver = FakeObserver;
-
-// Suppressing "Could not parse CSS stylesheet" from JSDOM
-const originalConsoleError = global.console.error;
-global.console.error = (message, ...optionalParams) => {
-  if (message.includes('Could not parse CSS stylesheet')) {
-    return;
-  }
-  originalConsoleError(message, ...optionalParams);
-};

package/templates/ui/javascript/config-overrides.js

@@ -1,10 +0,0 @@
-const { getWebpackConfig } = require('@corva/dc-platform-shared/cjs');
-const { merge } = require('webpack-merge');
-
-module.exports = (env, argv) => {
-  return merge(
-    getWebpackConfig(env, argv),
-    // NOTE: Custom webpack 5 plugins and module rules can be provided here
-    {}
-  );
-};

package/templates/ui/typescript/config/jest/babelTransform.js

@@ -1,16 +0,0 @@
-/* eslint-disable */
-
-const babelJest = require('babel-jest').default;
-
-module.exports = babelJest.createTransformer({
-  presets: [
-    [
-      require.resolve('babel-preset-react-app'),
-      {
-        runtime: 'automatic',
-      },
-    ],
-  ],
-  babelrc: false,
-  configFile: false,
-});

package/templates/ui/typescript/config/jest/cssTransform.js

@@ -1,16 +0,0 @@
-/* eslint-disable */
-
-// This is a custom Jest transformer turning style imports into empty objects.
-// http://facebook.github.io/jest/docs/en/webpack.html
-
-module.exports = {
-  process() {
-    return {
-      code: 'module.exports = {};',
-    };
-  },
-  getCacheKey() {
-    // The output is always the same.
-    return 'cssTransform';
-  },
-};

package/templates/ui/typescript/config/jest/fileTransform.js

@@ -1,48 +0,0 @@
-/* eslint-disable */
-
-const path = require('path');
-
-// This is a custom Jest transformer turning file imports into filenames.
-// http://facebook.github.io/jest/docs/en/webpack.html
-
-const toPascalCase = str => {
-  const allWordsIterator = str.matchAll(/\w+/g);
-
-  return Array.from(allWordsIterator).reduce((acc, matchResult) => {
-    const word = matchResult[0];
-    return acc + word[0].toUpperCase() + word.slice(1).toLowerCase();
-  }, '');
-};
-
-module.exports = {
-  process(src, filename) {
-    const assetFilename = JSON.stringify(path.basename(filename));
-
-    if (filename.match(/\.svg$/)) {
-      // Based on how SVGR generates a component name:
-      // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
-      const pascalCaseFilename = toPascalCase(path.parse(filename).name);
-      const componentName = `Svg${pascalCaseFilename}`;
-      return {
-        code: `const React = require('react');
-        module.exports = {
-          __esModule: true,
-          default: ${assetFilename},
-          ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
-            return {
-              $$typeof: Symbol.for('react.element'),
-              type: 'svg',
-              ref: ref,
-              key: null,
-              props: Object.assign({}, props, {
-                children: ${assetFilename}
-              })
-            };
-          }),
-        };`,
-      };
-    }
-
-    return { code: `module.exports = ${assetFilename};` };
-  },
-};

package/templates/ui/typescript/config/jest/globalSetup.js

@@ -1,5 +0,0 @@
-module.exports = async () => {
-  // use UTC timezone to not break tests when you run them on
-  // an environemnt with a different timezone
-  process.env.TZ = 'UTC';
-};

package/templates/ui/typescript/config/jest/setupTests.js

@@ -1,30 +0,0 @@
-/* eslint-disable */
-
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-// eslint-disable-next-line
-import '@testing-library/jest-dom/extend-expect';
-
-// Set UTC timezone for tests to not use the environment timezone
-process.env.TZ = 'UTC';
-
-// Mock ResizeObserver & MutationObserver
-class FakeObserver {
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-}
-
-global.ResizeObserver = FakeObserver;
-global.MutationObserver = FakeObserver;
-
-// Suppressing "Could not parse CSS stylesheet" from JSDOM
-const originalConsoleError = global.console.error;
-global.console.error = (message, ...optionalParams) => {
-  if (message.includes('Could not parse CSS stylesheet')) {
-    return;
-  }
-  originalConsoleError(message, ...optionalParams);
-};

package/templates/ui/typescript/config-overrides.js

@@ -1,10 +0,0 @@
-const { getWebpackConfig } = require('@corva/dc-platform-shared/cjs');
-const { merge } = require('webpack-merge');
-
-module.exports = (env, argv) => {
-  return merge(
-    getWebpackConfig(env, argv),
-    // NOTE: Custom webpack 5 plugins and module rules can be provided here
-    {}
-  );
-};