@corva/create-app 0.101.0-rc.0 → 0.102.0-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/package.json +1 -1
  2. package/templates/ui/javascript/config/jest/setupTests.js +19 -0
  3. package/templates/ui/javascript/src/App.completion.js +27 -32
  4. package/templates/ui/javascript/src/App.css +0 -17
  5. package/templates/ui/javascript/src/App.drilling.js +28 -37
  6. package/templates/ui/javascript/src/__tests__/App.test.js +27 -2
  7. package/templates/ui/typescript/config/jest/setupTests.js +19 -0
  8. package/templates/ui/typescript/src/App.completion.tsx +27 -35
  9. package/templates/ui/typescript/src/App.css +0 -17
  10. package/templates/ui/typescript/src/App.drilling.tsx +27 -35
  11. package/templates/ui/typescript/src/__tests__/App.test.tsx +27 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@corva/create-app",
3
- "version": "0.101.0-rc.0",
3
+ "version": "0.102.0-1",
4
4
  "private": false,
5
5
  "description": "Create an app to use it in CORVA.AI",
6
6
  "keywords": [
package/templates/ui/javascript/config/jest/setupTests.js CHANGED
@@ -9,3 +9,22 @@ import '@testing-library/jest-dom/extend-expect';
9
9
 
10
10
  // Set UTC timezone for tests to not use the environment timezone
11
11
  process.env.TZ = 'UTC';
12
+
13
+ // Mock ResizeObserver & MutationObserver
14
+ class FakeObserver {
15
+ observe() {}
16
+ unobserve() {}
17
+ disconnect() {}
18
+ }
19
+
20
+ global.ResizeObserver = FakeObserver;
21
+ global.MutationObserver = FakeObserver;
22
+
23
+ // Suppressing "Could not parse CSS stylesheet" from JSDOM
24
+ const originalConsoleError = global.console.error;
25
+ global.console.error = (message, ...optionalParams) => {
26
+ if (message.includes('Could not parse CSS stylesheet')) {
27
+ return;
28
+ }
29
+ originalConsoleError(message, ...optionalParams);
30
+ };
package/templates/ui/javascript/src/App.completion.js CHANGED
@@ -1,4 +1,4 @@
1
- import { AppHeader } from '@corva/ui/components';
1
+ import { AppContainer, AppHeader } from '@corva/ui/componentsV2';
2
2
 
3
3
  import { DEFAULT_SETTINGS } from './constants';
4
4
  import logo from './assets/logo.svg';
@@ -8,14 +8,12 @@ import styles from './App.css';
8
8
  /**
9
9
  * @param {Object} props
10
10
  * @param {boolean} props.isExampleCheckboxChecked
11
- * @param {Object} props.appHeaderProps
12
11
  * @param {Object} props.fracFleet
13
12
  * @param {Object} props.well
14
13
  * @param {Object[]} props.wells
15
14
  * @returns
16
15
  */
17
16
  function App({
18
- appHeaderProps,
19
17
  isExampleCheckboxChecked = DEFAULT_SETTINGS.isExampleCheckboxChecked,
20
18
  fracFleet,
21
19
  well,
@@ -26,36 +24,33 @@ function App({
26
24
  const wellsList = wells || [well];
27
25
 
28
26
  return (
29
- <div className={styles.container}>
30
- <AppHeader {...appHeaderProps} />
31
- <div className={styles.content}>
32
- <div>
33
- <img src={logo} alt="logo" className={styles.logo} />
34
- <p>
35
- Edit <code>src/App.js</code> and save to reload.
36
- <br />
37
- <br />
38
- </p>
39
- <p>
40
- Frac Fleet: {fracFleet?.name || 'No Frac Fleet'}
41
- <br />
42
- Wells: {wellsList.map(well => well.name).join(', ')}
43
- </p>
44
- <a
45
- className="App-link"
46
- href="https://reactjs.org"
47
- target="_blank"
48
- rel="noopener noreferrer"
49
- >
50
- Learn React
51
- </a>
52
- </div>
53
- <div>
54
- Settings &quot;Example&quot; checkbox is{' '}
55
- {isExampleCheckboxChecked ? 'checked' : 'unchecked'}
56
- </div>
27
+ <AppContainer header={<AppHeader />}>
28
+ <div>
29
+ <img src={logo} alt="logo" className={styles.logo} />
30
+ <p>
31
+ Edit <code>src/App.js</code> and save to reload.
32
+ <br />
33
+ <br />
34
+ </p>
35
+ <p>
36
+ Frac Fleet: {fracFleet?.name || 'No Frac Fleet'}
37
+ <br />
38
+ Wells: {wellsList.map(well => well.name).join(', ')}
39
+ </p>
40
+ <a
41
+ className="App-link"
42
+ href="https://reactjs.org"
43
+ target="_blank"
44
+ rel="noopener noreferrer"
45
+ >
46
+ Learn React
47
+ </a>
57
48
  </div>
58
- </div>
49
+ <div>
50
+ Settings &quot;Example&quot; checkbox is{' '}
51
+ {isExampleCheckboxChecked ? 'checked' : 'unchecked'}
52
+ </div>
53
+ </AppContainer>
59
54
  );
60
55
  }
61
56
 
package/templates/ui/javascript/src/App.css CHANGED
@@ -1,20 +1,3 @@
1
- .container {
2
- display: flex;
3
- flex-direction: column;
4
- height: 100%;
5
- padding: 12px 12px 30px 12px;
6
- }
7
-
8
- .content {
9
- display: flex;
10
- flex-direction: column;
11
- text-align: center;
12
- align-items: center;
13
- justify-content: center;
14
- flex-grow: 1;
15
- overflow: auto;
16
- }
17
-
18
1
  @keyframes App-logo-spin {
19
2
  from {
20
3
  transform: rotate(0deg);
package/templates/ui/javascript/src/App.drilling.js CHANGED
@@ -1,4 +1,4 @@
1
- import { AppHeader } from '@corva/ui/components';
1
+ import { AppContainer, AppHeader } from '@corva/ui/componentsV2';
2
2
 
3
3
  import { DEFAULT_SETTINGS } from './constants';
4
4
  import logo from './assets/logo.svg';
@@ -7,49 +7,40 @@ import styles from './App.css';
7
7
 
8
8
  /**
9
9
  * @param {Object} props
10
- * @param {Object} props.appHeaderProps
11
10
  * @param {boolean} props.isExampleCheckboxChecked
12
11
  * @param {Object} props.rig
13
12
  * @param {Object} props.well
14
13
  * @returns
15
14
  */
16
- function App({
17
- appHeaderProps,
18
- isExampleCheckboxChecked = DEFAULT_SETTINGS.isExampleCheckboxChecked,
19
- rig,
20
- well,
21
- }) {
15
+ function App({ isExampleCheckboxChecked = DEFAULT_SETTINGS.isExampleCheckboxChecked, rig, well }) {
22
16
  return (
23
- <div className={styles.container}>
24
- <AppHeader {...appHeaderProps} />
25
- <div className={styles.content}>
26
- <div>
27
- <img src={logo} alt="logo" className={styles.logo} />
28
- <p>
29
- Edit <code>src/App.js</code> and save to reload.
30
- <br />
31
- <br />
32
- </p>
33
- <p>
34
- Rig: {rig.name}
35
- <br />
36
- Well: {well.name}
37
- </p>
38
- <a
39
- className="App-link"
40
- href="https://reactjs.org"
41
- target="_blank"
42
- rel="noopener noreferrer"
43
- >
44
- Learn React
45
- </a>
46
- </div>
47
- <div>
48
- Settings &quot;Example&quot; checkbox is{' '}
49
- {isExampleCheckboxChecked ? 'checked' : 'unchecked'}
50
- </div>
17
+ <AppContainer header={<AppHeader />}>
18
+ <div>
19
+ <img src={logo} alt="logo" className={styles.logo} />
20
+ <p>
21
+ Edit <code>src/App.js</code> and save to reload.
22
+ <br />
23
+ <br />
24
+ </p>
25
+ <p>
26
+ Rig: {rig.name}
27
+ <br />
28
+ Well: {well.name}
29
+ </p>
30
+ <a
31
+ className="App-link"
32
+ href="https://reactjs.org"
33
+ target="_blank"
34
+ rel="noopener noreferrer"
35
+ >
36
+ Learn React
37
+ </a>
51
38
  </div>
52
- </div>
39
+ <div>
40
+ Settings &quot;Example&quot; checkbox is{' '}
41
+ {isExampleCheckboxChecked ? 'checked' : 'unchecked'}
42
+ </div>
43
+ </AppContainer>
53
44
  );
54
45
  }
55
46
 
package/templates/ui/javascript/src/__tests__/App.test.js CHANGED
@@ -1,11 +1,24 @@
1
1
  import { render, screen } from '@testing-library/react';
2
+ import { AppTestWrapper } from '@corva/ui/testing';
2
3
 
3
4
  import App from '../App';
4
5
  import { mockAppProps } from '../__mocks__/mockAppProps';
5
6
 
6
7
  describe('<App />', () => {
7
8
  it('should show correct layout', () => {
8
- render(<App {...mockAppProps} />);
9
+ render(
10
+ <AppTestWrapper
11
+ app={mockAppProps.app}
12
+ appId={123}
13
+ maximized={false}
14
+ appSettings={mockAppProps.app.settings}
15
+ onSettingChange={() => {
16
+ /* noop */
17
+ }}
18
+ >
19
+ <App {...mockAppProps} />
20
+ </AppTestWrapper>
21
+ );
9
22
 
10
23
  screen.getByText(/checked/i);
11
24
  });
@@ -14,7 +27,19 @@ describe('<App />', () => {
14
27
  const propsWithoutSettings = mockAppProps;
15
28
  delete propsWithoutSettings.isExampleCheckboxChecked;
16
29
 
17
- render(<App {...propsWithoutSettings} />);
30
+ render(
31
+ <AppTestWrapper
32
+ app={mockAppProps.app}
33
+ appId={123}
34
+ maximized={false}
35
+ appSettings={mockAppProps.app.settings}
36
+ onSettingChange={() => {
37
+ /* noop */
38
+ }}
39
+ >
40
+ <App {...propsWithoutSettings} />
41
+ </AppTestWrapper>
42
+ );
18
43
 
19
44
  screen.getByText(/unchecked/i);
20
45
  });
package/templates/ui/typescript/config/jest/setupTests.js CHANGED
@@ -9,3 +9,22 @@ import '@testing-library/jest-dom/extend-expect';
9
9
 
10
10
  // Set UTC timezone for tests to not use the environment timezone
11
11
  process.env.TZ = 'UTC';
12
+
13
+ // Mock ResizeObserver & MutationObserver
14
+ class FakeObserver {
15
+ observe() {}
16
+ unobserve() {}
17
+ disconnect() {}
18
+ }
19
+
20
+ global.ResizeObserver = FakeObserver;
21
+ global.MutationObserver = FakeObserver;
22
+
23
+ // Suppressing "Could not parse CSS stylesheet" from JSDOM
24
+ const originalConsoleError = global.console.error;
25
+ global.console.error = (message, ...optionalParams) => {
26
+ if (message.includes('Could not parse CSS stylesheet')) {
27
+ return;
28
+ }
29
+ originalConsoleError(message, ...optionalParams);
30
+ };
package/templates/ui/typescript/src/App.completion.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { AppHeader } from '@corva/ui/components';
1
+ import { AppContainer, AppHeader } from '@corva/ui/componentsV2';
2
2
 
3
3
  import { DEFAULT_SETTINGS } from './constants';
4
4
  import logo from './assets/logo.svg';
@@ -6,10 +6,6 @@ import logo from './assets/logo.svg';
6
6
  import styles from './App.css';
7
7
 
8
8
  type AppProps = {
9
- appHeaderProps: {
10
- [key: string]: any;
11
- app: any;
12
- };
13
9
  isExampleCheckboxChecked?: boolean;
14
10
  fracFleet?: { name: string };
15
11
  well?: { name: string };
@@ -17,7 +13,6 @@ type AppProps = {
17
13
  };
18
14
 
19
15
  function App({
20
- appHeaderProps,
21
16
  isExampleCheckboxChecked = DEFAULT_SETTINGS.isExampleCheckboxChecked,
22
17
  fracFleet,
23
18
  well,
@@ -28,36 +23,33 @@ function App({
28
23
  const wellsList = wells || [well];
29
24
 
30
25
  return (
31
- <div className={styles.container}>
32
- <AppHeader {...appHeaderProps} />
33
- <div className={styles.content}>
34
- <div>
35
- <img src={logo} alt="logo" className={styles.logo} />
36
- <p>
37
- Edit <code>src/App.js</code> and save to reload.
38
- <br />
39
- <br />
40
- </p>
41
- <p>
42
- Frac Fleet: {fracFleet?.name || 'No Frac Fleet'}
43
- <br />
44
- Wells: {wellsList.map(well => well.name).join(', ')}
45
- </p>
46
- <a
47
- className="App-link"
48
- href="https://reactjs.org"
49
- target="_blank"
50
- rel="noopener noreferrer"
51
- >
52
- Learn React
53
- </a>
54
- </div>
55
- <div>
56
- Settings &quot;Example&quot; checkbox is{' '}
57
- {isExampleCheckboxChecked ? 'checked' : 'unchecked'}
58
- </div>
26
+ <AppContainer header={<AppHeader />}>
27
+ <div>
28
+ <img src={logo} alt="logo" className={styles.logo} />
29
+ <p>
30
+ Edit <code>src/App.js</code> and save to reload.
31
+ <br />
32
+ <br />
33
+ </p>
34
+ <p>
35
+ Frac Fleet: {fracFleet?.name || 'No Frac Fleet'}
36
+ <br />
37
+ Wells: {wellsList.map(well => well.name).join(', ')}
38
+ </p>
39
+ <a
40
+ className="App-link"
41
+ href="https://reactjs.org"
42
+ target="_blank"
43
+ rel="noopener noreferrer"
44
+ >
45
+ Learn React
46
+ </a>
59
47
  </div>
60
- </div>
48
+ <div>
49
+ Settings &quot;Example&quot; checkbox is{' '}
50
+ {isExampleCheckboxChecked ? 'checked' : 'unchecked'}
51
+ </div>
52
+ </AppContainer>
61
53
  );
62
54
  }
63
55
 
package/templates/ui/typescript/src/App.css CHANGED
@@ -1,20 +1,3 @@
1
- .container {
2
- display: flex;
3
- flex-direction: column;
4
- height: 100%;
5
- padding: 12px 12px 30px 12px;
6
- }
7
-
8
- .content {
9
- display: flex;
10
- flex-direction: column;
11
- text-align: center;
12
- align-items: center;
13
- justify-content: center;
14
- flex-grow: 1;
15
- overflow: auto;
16
- }
17
-
18
1
  @keyframes App-logo-spin {
19
2
  from {
20
3
  transform: rotate(0deg);
package/templates/ui/typescript/src/App.drilling.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { AppHeader } from '@corva/ui/components';
1
+ import { AppContainer, AppHeader } from '@corva/ui/componentsV2';
2
2
 
3
3
  import { DEFAULT_SETTINGS } from './constants';
4
4
  import logo from './assets/logo.svg';
@@ -6,52 +6,44 @@ import logo from './assets/logo.svg';
6
6
  import styles from './App.css';
7
7
 
8
8
  type AppProps = {
9
- appHeaderProps: {
10
- [key: string]: any;
11
- app: any;
12
- };
13
9
  isExampleCheckboxChecked?: boolean;
14
10
  rig: { name: string };
15
11
  well: { name: string };
16
12
  };
17
13
 
18
14
  function App({
19
- appHeaderProps,
20
15
  isExampleCheckboxChecked = DEFAULT_SETTINGS.isExampleCheckboxChecked,
21
16
  rig,
22
17
  well,
23
18
  }: AppProps): JSX.Element {
24
19
  return (
25
- <div className={styles.container}>
26
- <AppHeader {...appHeaderProps} />
27
- <div className={styles.content}>
28
- <div>
29
- <img src={logo} alt="logo" className={styles.logo} />
30
- <p>
31
- Edit <code>src/App.js</code> and save to reload.
32
- <br />
33
- <br />
34
- </p>
35
- <p>
36
- Rig: {rig.name}
37
- <br />
38
- Well: {well.name}
39
- </p>
40
- <a
41
- className="App-link"
42
- href="https://reactjs.org"
43
- target="_blank"
44
- rel="noopener noreferrer"
45
- >
46
- Learn React
47
- </a>
48
- </div>
49
- <div>
50
- Settings &quot;Example&quot; checkbox is{' '}
51
- {isExampleCheckboxChecked ? 'checked' : 'unchecked'}
52
- </div>
20
+ <AppContainer header={<AppHeader />}>
21
+ <div>
22
+ <img src={logo} alt="logo" className={styles.logo} />
23
+ <p>
24
+ Edit <code>src/App.js</code> and save to reload.
25
+ <br />
26
+ <br />
27
+ </p>
28
+ <p>
29
+ Rig: {rig.name}
30
+ <br />
31
+ Well: {well.name}
32
+ </p>
33
+ <a
34
+ className="App-link"
35
+ href="https://reactjs.org"
36
+ target="_blank"
37
+ rel="noopener noreferrer"
38
+ >
39
+ Learn React
40
+ </a>
53
41
  </div>
54
- </div>
42
+ <div>
43
+ Settings &quot;Example&quot; checkbox is{' '}
44
+ {isExampleCheckboxChecked ? 'checked' : 'unchecked'}
45
+ </div>
46
+ </AppContainer>
55
47
  );
56
48
  }
57
49
 
package/templates/ui/typescript/src/__tests__/App.test.tsx CHANGED
@@ -1,11 +1,24 @@
1
1
  import { render, screen } from '@testing-library/react';
2
+ import { AppTestWrapper } from '@corva/ui/testing';
2
3
 
3
4
  import App from '../App';
4
5
  import { mockAppProps } from '../__mocks__/mockAppProps';
5
6
 
6
7
  describe('<App />', () => {
7
8
  it('should show correct layout', () => {
8
- render(<App {...mockAppProps} />);
9
+ render(
10
+ <AppTestWrapper
11
+ app={mockAppProps.app}
12
+ appId={123}
13
+ maximized={false}
14
+ appSettings={mockAppProps.app.settings}
15
+ onSettingChange={() => {
16
+ /* noop */
17
+ }}
18
+ >
19
+ <App {...mockAppProps} />
20
+ </AppTestWrapper>
21
+ );
9
22
 
10
23
  screen.getByText(/checked/i);
11
24
  });
@@ -14,7 +27,19 @@ describe('<App />', () => {
14
27
  const propsWithoutSettings = mockAppProps;
15
28
  delete propsWithoutSettings.isExampleCheckboxChecked;
16
29
 
17
- render(<App {...propsWithoutSettings} />);
30
+ render(
31
+ <AppTestWrapper
32
+ app={mockAppProps.app}
33
+ appId={123}
34
+ maximized={false}
35
+ appSettings={mockAppProps.app.settings}
36
+ onSettingChange={() => {
37
+ /* noop */
38
+ }}
39
+ >
40
+ <App {...propsWithoutSettings} />
41
+ </AppTestWrapper>
42
+ );
18
43
 
19
44
  screen.getByText(/unchecked/i);
20
45
  });