@corva/create-app 0.102.0-0 → 0.102.0-3

package/lib/helpers/cli-version.js

@@ -36,11 +36,23 @@ Please check your internet connection and that the above request is not blocked
   }
 };
 
+// Utility function to check if a version is a regular semver without prerelease identifiers
+const isRegularVersion = (version) => {
+  return semver.prerelease(version) === null;
+};
+
 // NOTE: Stop process and show error if version is outdated
 export async function ensureLatestVersion() {
   const currentVersion = await getCurrentVersion();
   const latestVersion = await getLatestVersion();
 
+  // Skip version check if current version is a prerelease (dev or next)
+  if (!isRegularVersion(currentVersion)) {
+    logger.write('Skipping version check for prerelease version.\n');
+
+    return;
+  }
+
   const isCurrentVersionOutdated = semver.gt(latestVersion, currentVersion);
 
   if (isCurrentVersionOutdated) {
@@ -65,6 +77,13 @@ export async function warnIfOutdated() {
   const currentVersion = await getCurrentVersion();
   const latestVersion = await getLatestVersion();
 
+  // Skip version check if current version is a prerelease (dev or next)
+  if (!isRegularVersion(currentVersion)) {
+    logger.write('  ⚠️  Skipping version check for prerelease version.\n');
+
+    return;
+  }
+
   const isCurrentVersionOutdated = semver.gt(latestVersion, currentVersion);
 
   if (isCurrentVersionOutdated) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@corva/create-app",
-  "version": "0.102.0-0",
+  "version": "0.102.0-3",
   "private": false,
   "description": "Create an app to use it in CORVA.AI",
   "keywords": [

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

@@ -9,3 +9,22 @@ 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/src/App.completion.js

@@ -1,4 +1,5 @@
-import { AppHeader } from '@corva/ui/components';
+import { AppContainer, AppHeader } from '@corva/ui/componentsV2';
+import { useAppCommons } from '@corva/ui/effects';
 
 import { DEFAULT_SETTINGS } from './constants';
 import logo from './assets/logo.svg';
@@ -8,54 +9,52 @@ import styles from './App.css';
 /**
  * @param {Object} props
  * @param {boolean} props.isExampleCheckboxChecked
- * @param {Object} props.appHeaderProps
  * @param {Object} props.fracFleet
  * @param {Object} props.well
  * @param {Object[]} props.wells
  * @returns
  */
 function App({
-  appHeaderProps,
   isExampleCheckboxChecked = DEFAULT_SETTINGS.isExampleCheckboxChecked,
   fracFleet,
   well,
   wells,
 }) {
+  const { appKey } = useAppCommons();
   // NOTE: On general type dashboard app receives wells array
   // on asset type dashboard app receives well object
   const wellsList = wells || [well];
 
   return (
-    <div className={styles.container}>
-      <AppHeader {...appHeaderProps} />
-      <div className={styles.content}>
-        <div>
-          <img src={logo} alt="logo" className={styles.logo} />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-            <br />
-            <br />
-          </p>
-          <p>
-            Frac Fleet: {fracFleet?.name || 'No Frac Fleet'}
-            <br />
-            Wells: {wellsList.map(well => well.name).join(', ')}
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </div>
-        <div>
-          Settings &quot;Example&quot; checkbox is{' '}
+    <AppContainer header={<AppHeader />} testId={appKey}>
+      <div>
+        <img src={logo} alt="logo" className={styles.logo} />
+        <p>
+          Edit <code>src/App.js</code> and save to reload.
+          <br />
+          <br />
+        </p>
+        <p>
+          Frac Fleet: <span data-testid="fracFleet">{fracFleet?.name || 'No Frac Fleet'}</span>
+          <br />
+          Wells: <span data-testid="wellsList">{wellsList.map(well => well.name).join(', ')}</span>
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </div>
+      <div>
+        Settings &quot;Example&quot; checkbox is{' '}
+        <span data-testid="exampleCheckboxChecked">
           {isExampleCheckboxChecked ? 'checked' : 'unchecked'}
-        </div>
+        </span>
       </div>
-    </div>
+    </AppContainer>
   );
 }
 

package/templates/ui/javascript/src/App.css

@@ -1,20 +1,3 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  padding: 12px 12px 30px 12px;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-  align-items: center;
-  justify-content: center;
-  flex-grow: 1;
-  overflow: auto;
-}
-
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

package/templates/ui/javascript/src/App.drilling.js

@@ -1,4 +1,5 @@
-import { AppHeader } from '@corva/ui/components';
+import { AppContainer, AppHeader } from '@corva/ui/componentsV2';
+import { useAppCommons } from '@corva/ui/effects';
 
 import { DEFAULT_SETTINGS } from './constants';
 import logo from './assets/logo.svg';
@@ -7,49 +8,43 @@ import styles from './App.css';
 
 /**
  * @param {Object} props
- * @param {Object} props.appHeaderProps
  * @param {boolean} props.isExampleCheckboxChecked
  * @param {Object} props.rig
  * @param {Object} props.well
  * @returns
  */
-function App({
-  appHeaderProps,
-  isExampleCheckboxChecked = DEFAULT_SETTINGS.isExampleCheckboxChecked,
-  rig,
-  well,
-}) {
+function App({ isExampleCheckboxChecked = DEFAULT_SETTINGS.isExampleCheckboxChecked, rig, well }) {
+  const { appKey } = useAppCommons();
   return (
-    <div className={styles.container}>
-      <AppHeader {...appHeaderProps} />
-      <div className={styles.content}>
-        <div>
-          <img src={logo} alt="logo" className={styles.logo} />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-            <br />
-            <br />
-          </p>
-          <p>
-            Rig: {rig.name}
-            <br />
-            Well: {well.name}
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </div>
-        <div>
-          Settings &quot;Example&quot; checkbox is{' '}
+    <AppContainer header={<AppHeader />} testId={appKey}>
+      <div>
+        <img src={logo} alt="logo" className={styles.logo} />
+        <p>
+          Edit <code>src/App.js</code> and save to reload.
+          <br />
+          <br />
+        </p>
+        <p>
+          Rig: <span data-testid="rig">{rig.name}</span>
+          <br />
+          Well: <span data-testid="well">{well.name}</span>
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </div>
+      <div>
+        Settings &quot;Example&quot; checkbox is{' '}
+        <span data-testid="exampleCheckboxState">
           {isExampleCheckboxChecked ? 'checked' : 'unchecked'}
-        </div>
+        </span>
       </div>
-    </div>
+    </AppContainer>
   );
 }
 

package/templates/ui/javascript/src/__tests__/App.test.js

@@ -1,11 +1,24 @@
 import { render, screen } from '@testing-library/react';
+import { AppTestWrapper } from '@corva/ui/testing';
 
 import App from '../App';
 import { mockAppProps } from '../__mocks__/mockAppProps';
 
 describe('<App />', () => {
   it('should show correct layout', () => {
-    render(<App {...mockAppProps} />);
+    render(
+      <AppTestWrapper
+        app={mockAppProps.app}
+        appId={123}
+        maximized={false}
+        appSettings={mockAppProps.app.settings}
+        onSettingChange={() => {
+          /* noop */
+        }}
+      >
+        <App {...mockAppProps} />
+      </AppTestWrapper>
+    );
 
     screen.getByText(/checked/i);
   });
@@ -14,7 +27,19 @@ describe('<App />', () => {
     const propsWithoutSettings = mockAppProps;
     delete propsWithoutSettings.isExampleCheckboxChecked;
 
-    render(<App {...propsWithoutSettings} />);
+    render(
+      <AppTestWrapper
+        app={mockAppProps.app}
+        appId={123}
+        maximized={false}
+        appSettings={mockAppProps.app.settings}
+        onSettingChange={() => {
+          /* noop */
+        }}
+      >
+        <App {...propsWithoutSettings} />
+      </AppTestWrapper>
+    );
 
     screen.getByText(/unchecked/i);
   });

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

@@ -9,3 +9,22 @@ 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/src/App.completion.tsx

@@ -1,4 +1,5 @@
-import { AppHeader } from '@corva/ui/components';
+import { AppContainer, AppHeader } from '@corva/ui/componentsV2';
+import { useAppCommons } from '@corva/ui/effects';
 
 import { DEFAULT_SETTINGS } from './constants';
 import logo from './assets/logo.svg';
@@ -6,10 +7,6 @@ import logo from './assets/logo.svg';
 import styles from './App.css';
 
 type AppProps = {
-  appHeaderProps: {
-    [key: string]: any;
-    app: any;
-  };
   isExampleCheckboxChecked?: boolean;
   fracFleet?: { name: string };
   well?: { name: string };
@@ -17,47 +14,46 @@ type AppProps = {
 };
 
 function App({
-  appHeaderProps,
   isExampleCheckboxChecked = DEFAULT_SETTINGS.isExampleCheckboxChecked,
   fracFleet,
   well,
   wells,
 }: AppProps): JSX.Element {
+  const { appKey } = useAppCommons();
   // NOTE: On general type dashboard app receives wells array
   // on asset type dashboard app receives well object
   const wellsList = wells || [well];
 
   return (
-    <div className={styles.container}>
-      <AppHeader {...appHeaderProps} />
-      <div className={styles.content}>
-        <div>
-          <img src={logo} alt="logo" className={styles.logo} />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-            <br />
-            <br />
-          </p>
-          <p>
-            Frac Fleet: {fracFleet?.name || 'No Frac Fleet'}
-            <br />
-            Wells: {wellsList.map(well => well.name).join(', ')}
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </div>
-        <div>
-          Settings &quot;Example&quot; checkbox is{' '}
+    <AppContainer header={<AppHeader />} testId={appKey}>
+      <div>
+        <img src={logo} alt="logo" className={styles.logo} />
+        <p>
+          Edit <code>src/App.js</code> and save to reload.
+          <br />
+          <br />
+        </p>
+        <p>
+          Frac Fleet: <span data-testid="fracFleet">{fracFleet?.name || 'No Frac Fleet'}</span>
+          <br />
+          Wells: <span data-testid="wellsList">{wellsList.map(well => well.name).join(', ')}</span>
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </div>
+      <div>
+        Settings &quot;Example&quot; checkbox is{' '}
+        <span data-testid="exampleCheckboxState">
           {isExampleCheckboxChecked ? 'checked' : 'unchecked'}
-        </div>
+        </span>
       </div>
-    </div>
+    </AppContainer>
   );
 }
 

package/templates/ui/typescript/src/App.css

@@ -1,20 +1,3 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  padding: 12px 12px 30px 12px;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-  align-items: center;
-  justify-content: center;
-  flex-grow: 1;
-  overflow: auto;
-}
-
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

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

@@ -1,4 +1,5 @@
-import { AppHeader } from '@corva/ui/components';
+import { AppContainer, AppHeader } from '@corva/ui/componentsV2';
+import { useAppCommons } from '@corva/ui/effects';
 
 import { DEFAULT_SETTINGS } from './constants';
 import logo from './assets/logo.svg';
@@ -6,52 +7,47 @@ import logo from './assets/logo.svg';
 import styles from './App.css';
 
 type AppProps = {
-  appHeaderProps: {
-    [key: string]: any;
-    app: any;
-  };
   isExampleCheckboxChecked?: boolean;
   rig: { name: string };
   well: { name: string };
 };
 
 function App({
-  appHeaderProps,
   isExampleCheckboxChecked = DEFAULT_SETTINGS.isExampleCheckboxChecked,
   rig,
   well,
 }: AppProps): JSX.Element {
+  const { appKey } = useAppCommons();
   return (
-    <div className={styles.container}>
-      <AppHeader {...appHeaderProps} />
-      <div className={styles.content}>
-        <div>
-          <img src={logo} alt="logo" className={styles.logo} />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-            <br />
-            <br />
-          </p>
-          <p>
-            Rig: {rig.name}
-            <br />
-            Well: {well.name}
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </div>
-        <div>
-          Settings &quot;Example&quot; checkbox is{' '}
+    <AppContainer header={<AppHeader />} testId={appKey}>
+      <div>
+        <img src={logo} alt="logo" className={styles.logo} />
+        <p>
+          Edit <code>src/App.js</code> and save to reload.
+          <br />
+          <br />
+        </p>
+        <p>
+          Rig: <span data-testid="rig">{rig.name}</span>
+          <br />
+          Well: <span data-testid="well">{well.name}</span>
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </div>
+      <div>
+        Settings &quot;Example&quot; checkbox is{' '}
+        <span data-testid="exampleCheckboxState">
           {isExampleCheckboxChecked ? 'checked' : 'unchecked'}
-        </div>
+        </span>
       </div>
-    </div>
+    </AppContainer>
   );
 }
 

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

@@ -1,11 +1,24 @@
 import { render, screen } from '@testing-library/react';
+import { AppTestWrapper } from '@corva/ui/testing';
 
 import App from '../App';
 import { mockAppProps } from '../__mocks__/mockAppProps';
 
 describe('<App />', () => {
   it('should show correct layout', () => {
-    render(<App {...mockAppProps} />);
+    render(
+      <AppTestWrapper
+        app={mockAppProps.app}
+        appId={123}
+        maximized={false}
+        appSettings={mockAppProps.app.settings}
+        onSettingChange={() => {
+          /* noop */
+        }}
+      >
+        <App {...mockAppProps} />
+      </AppTestWrapper>
+    );
 
     screen.getByText(/checked/i);
   });
@@ -14,7 +27,19 @@ describe('<App />', () => {
     const propsWithoutSettings = mockAppProps;
     delete propsWithoutSettings.isExampleCheckboxChecked;
 
-    render(<App {...propsWithoutSettings} />);
+    render(
+      <AppTestWrapper
+        app={mockAppProps.app}
+        appId={123}
+        maximized={false}
+        appSettings={mockAppProps.app.settings}
+        onSettingChange={() => {
+          /* noop */
+        }}
+      >
+        <App {...propsWithoutSettings} />
+      </AppTestWrapper>
+    );
 
     screen.getByText(/unchecked/i);
   });