@corva/create-app 0.0.0-73c49372-test → 0.0.0-8bf627d

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

@@ -1,63 +1,51 @@
-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';
 
-import styles from './App.css';
+import styles from './App.scss';
 
-/**
- * @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 App = () => {
+  const { appKey, fracFleet, well, wells, appSettings } = useAppCommons();
+  const { isExampleCheckboxChecked = DEFAULT_SETTINGS.isExampleCheckboxChecked } =
+    appSettings || {};
   // 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 className={styles.container}>
+        <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>
   );
-}
+};
 
 // Important: Do not change root component default export (App.js). Use it as container
 //  for your App. It's required to make build and zip scripts work as expected;

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

@@ -1,57 +1,48 @@
-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';
 
-import styles from './App.css';
+import styles from './App.scss';
+
+const App = () => {
+  const { appKey, rig, well, appSettings } = useAppCommons();
+  const { isExampleCheckboxChecked = DEFAULT_SETTINGS.isExampleCheckboxChecked } =
+    appSettings || {};
 
-/**
- * @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,
-}) {
   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 className={styles.container}>
+        <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>
   );
-}
+};
 
 // Important: Do not change root component default export (App.js). Use it as container
 //  for your App. It's required to make build and zip scripts work as expected;

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

@@ -0,0 +1,17 @@
+.container {
+  text-align: center;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(-360deg);
+  }
+}
+
+.logo {
+  animation: App-logo-spin infinite 20s linear;
+  height: 50px;
+}

package/templates/ui/javascript/src/AppSettings.js

@@ -1,26 +1,12 @@
 import { Checkbox, FormControlLabel } from '@material-ui/core';
+import { useAppCommons } from '@corva/ui/effects';
 
 import { DEFAULT_SETTINGS } from './constants';
 
-/**
- * @param {Object} props
- * @param {Object} props.app
- * @param {Object} props.appData
- * @param {Object} props.company
- * @param {(key: string, value: any) => void} props.onSettingChange
- * @param {{isExampleCheckboxChecked: boolean}} props.settings
- * @param {Object} props.user
- * @returns
- */
-function AppSettings({
-  settings: apiSettings,
-  onSettingChange,
-  // appData,
-  // app,
-  // user = {},
-  // company = {},
-}) {
-  const settings = { ...DEFAULT_SETTINGS, ...apiSettings };
+const AppSettings = () => {
+  const { appSettings, onSettingChange } = useAppCommons();
+  const settings = { ...DEFAULT_SETTINGS, ...appSettings };
+
   return (
     <div>
       <FormControlLabel
@@ -35,7 +21,7 @@ function AppSettings({
       />
     </div>
   );
-}
+};
 
 // Important: Do not change root component default export (AppSettings.js). Use it as container
 //  for your App Settings. It's required to make build and zip scripts work as expected;

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

@@ -1,20 +1,25 @@
 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 appSettings={{ isExampleCheckboxChecked: true }}>
+        <App />
+      </AppTestWrapper>
+    );
 
     screen.getByText(/checked/i);
   });
 
   it('should show correct layout when settings are not provided', () => {
-    const propsWithoutSettings = mockAppProps;
-    delete propsWithoutSettings.isExampleCheckboxChecked;
-
-    render(<App {...propsWithoutSettings} />);
+    render(
+      <AppTestWrapper appSettings={{}}>
+        <App />
+      </AppTestWrapper>
+    );
 
     screen.getByText(/unchecked/i);
   });

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

@@ -1,21 +1,28 @@
 import { render, screen, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { AppTestWrapper } from '@corva/ui/testing';
 
 import AppSettings from '../AppSettings';
-import { mockAppSettingsProps } from '../__mocks__/mockAppSettingsProps';
 
 describe('<AppSettings />', () => {
   it('should call onChange with a changed setting on settings change', async () => {
-    const handleSettingsChange = jest.fn();
+    const handleSettingChange = jest.fn();
 
-    render(<AppSettings {...mockAppSettingsProps} onSettingChange={handleSettingsChange} />);
+    render(
+      <AppTestWrapper
+        appSettings={{ isExampleCheckboxChecked: true }}
+        onSettingChange={handleSettingChange}
+      >
+        <AppSettings />
+      </AppTestWrapper>
+    );
 
-    const exampleCheckbox = screen.getByTestId('exampleCheckbox').querySelector('input');
+    const exampleCheckbox = screen.getByRole('checkbox', { name: /example/i });
 
     await act(async () => {
       await userEvent.click(exampleCheckbox);
     });
 
-    expect(handleSettingsChange).toBeCalledWith('isExampleCheckboxChecked', false);
+    expect(handleSettingChange).toBeCalledWith('isExampleCheckboxChecked', false);
   });
 });

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

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
-import { components } from '@corva/ui';
+import { Button } from '@corva/ui/componentsV2';
 import userEvent from '@testing-library/user-event';
 
 const Toggle = () => {
@@ -9,7 +9,7 @@ const Toggle = () => {
   return (
     <>
       {isOn ? 'ON' : 'OFF'}
-      <components.Button onClick={() => setIsOn(value => !value)}>toggle</components.Button>
+      <Button onClick={() => setIsOn(value => !value)}>toggle</Button>
     </>
   );
 };

package/templates/ui/javascript/src/index.js

@@ -1,3 +1,4 @@
+// DO NOT modify this structure
 import App from './App';
 import AppSettings from './AppSettings';
 

package/templates/ui/typescript/.codex/config.toml

@@ -0,0 +1,3 @@
+[mcp_servers.corva-ui]
+command = "npx"
+args = ["-p", "@corva/ui", "corva-ui-mcp"]

package/templates/ui/typescript/.cursor/mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "corva-ui": {
+      "command": "npx",
+      "args": ["-p", "@corva/ui", "corva-ui-mcp"]
+    }
+  }
+}

package/templates/ui/typescript/.mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "corva-ui": {
+      "command": "npx",
+      "args": ["-p", "@corva/ui", "corva-ui-mcp"]
+    }
+  }
+}