squash

Drew-Daniels · Aug 4, 2024 · ed386dd · ed386dd
1 parent e777273
commit ed386dd
Show file tree

Hide file tree

Showing 134 changed files with 2,649 additions and 1,027 deletions.
diff --git a/.eslintignore b/.eslintignore
diff --git a/.eslintrc.json b/.eslintrc.json
diff --git a/.mise.toml b/.mise.toml
@@ -0,0 +1,2 @@
+[tools]
+node = "22.5.1"
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/apps/iframe-react-app-e2e/eslint.config.js b/apps/iframe-react-app-e2e/eslint.config.js
@@ -0,0 +1,29 @@
+const { FlatCompat } = require('@eslint/eslintrc');
+const baseConfig = require('../../eslint.config.js');
+const js = require('@eslint/js');
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+});
+
+module.exports = [
+  ...baseConfig,
+  ...compat.extends('plugin:playwright/recommended'),
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    rules: {},
+  },
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    rules: {},
+  },
+  {
+    files: ['**/*.js', '**/*.jsx'],
+    rules: {},
+  },
+  {
+    files: ['src/**/*.{ts,js,tsx,jsx}'],
+    rules: {},
+  },
+];
diff --git a/apps/iframe-react-app-e2e/playwright.config.ts b/apps/iframe-react-app-e2e/playwright.config.ts
@@ -0,0 +1,69 @@
+import { defineConfig, devices } from '@playwright/test';
+import { nxE2EPreset } from '@nx/playwright/preset';
+
+import { workspaceRoot } from '@nx/devkit';
+
+// For CI, you may want to set BASE_URL to the deployed application.
+const baseURL = process.env['BASE_URL'] || 'http://localhost:4200';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  ...nxE2EPreset(__filename, { testDir: './src' }),
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    baseURL,
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'yarn nx serve iframe-react-app',
+    url: 'http://localhost:4200',
+    reuseExistingServer: !process.env.CI,
+    cwd: workspaceRoot,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    // Uncomment for mobile browsers support
+    /* {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+    {
+      name: 'Mobile Safari',
+      use: { ...devices['iPhone 12'] },
+    }, */
+
+    // Uncomment for branded browsers
+    /* {
+      name: 'Microsoft Edge',
+      use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    },
+    {
+      name: 'Google Chrome',
+      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    } */
+  ],
+});
diff --git a/apps/iframe-react-app-e2e/project.json b/apps/iframe-react-app-e2e/project.json
@@ -0,0 +1,9 @@
+{
+  "name": "iframe-react-app-e2e",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "apps/iframe-react-app-e2e/src",
+  "implicitDependencies": ["iframe-react-app"],
+  "// targets": "to see all targets run: nx show project iframe-react-app-e2e --web",
+  "targets": {}
+}
diff --git a/apps/liaison-e2e/src/example.spec.ts → .../iframe-react-app-e2e/src/example.spec.ts b/apps/liaison-e2e/src/example.spec.ts → .../iframe-react-app-e2e/src/example.spec.ts
diff --git a/apps/liaison-e2e/tsconfig.json → apps/iframe-react-app-e2e/tsconfig.json b/apps/liaison-e2e/tsconfig.json → apps/iframe-react-app-e2e/tsconfig.json
diff --git a/apps/iframe-react-app/.env b/apps/iframe-react-app/.env
@@ -0,0 +1 @@
+VITE_PARENT_WINDOW_URL="http://localhost:4200"
diff --git a/apps/iframe-react-app/eslint.config.js b/apps/iframe-react-app/eslint.config.js
@@ -0,0 +1,25 @@
+const { FlatCompat } = require('@eslint/eslintrc');
+const baseConfig = require('../../eslint.config.js');
+const js = require('@eslint/js');
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+});
+
+module.exports = [
+  ...baseConfig,
+  ...compat.extends('plugin:@nx/react'),
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    rules: {},
+  },
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    rules: {},
+  },
+  {
+    files: ['**/*.js', '**/*.jsx'],
+    rules: {},
+  },
+];
diff --git a/apps/liaison/index.html → apps/iframe-react-app/index.html b/apps/liaison/index.html → apps/iframe-react-app/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Liaison</title>
+    <title>IframeReactApp</title>
     <base href="/" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />

diff --git a/apps/liaison/jest.config.ts → apps/iframe-react-app/jest.config.ts b/apps/liaison/jest.config.ts → apps/iframe-react-app/jest.config.ts
@@ -1,11 +1,11 @@
 /* eslint-disable */
 export default {
-  displayName: 'liaison',
+  displayName: 'iframe-react-app',
   preset: '../../jest.preset.js',
   transform: {
     '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
     '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  coverageDirectory: '../../coverage/apps/liaison',
+  coverageDirectory: '../../coverage/apps/iframe-react-app',
 };
diff --git a/apps/liaison/postcss.config.js → apps/iframe-react-app/postcss.config.js b/apps/liaison/postcss.config.js → apps/iframe-react-app/postcss.config.js
diff --git a/apps/iframe-react-app/project.json b/apps/iframe-react-app/project.json
@@ -0,0 +1,9 @@
+{
+  "name": "iframe-react-app",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/iframe-react-app/src",
+  "projectType": "application",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project iframe-react-app --web",
+  "targets": {}
+}
diff --git a/apps/liaison/public/favicon.ico → apps/iframe-react-app/public/favicon.ico b/apps/liaison/public/favicon.ico → apps/iframe-react-app/public/favicon.ico
diff --git a/apps/iframe-react-app/src/app/app.spec.tsx b/apps/iframe-react-app/src/app/app.spec.tsx
@@ -0,0 +1,25 @@
+import { render } from '@testing-library/react';
+
+import { BrowserRouter } from 'react-router-dom';
+
+import App from './app';
+
+describe('App', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    );
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should have a greeting as the title', () => {
+    const { getByText } = render(
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    );
+    expect(getByText(/Welcome iframe-react-app/gi)).toBeTruthy();
+  });
+});
diff --git a/apps/iframe-react-app/src/app/app.tsx b/apps/iframe-react-app/src/app/app.tsx
@@ -0,0 +1,48 @@
+import { useState } from 'react';
+
+import { useIFrame } from '@liaison/react';
+import { Button } from '@liaison/ui';
+
+function App() {
+  const [email, setEmail] = useState('');
+
+  const { cb: callParentEffect } = useIFrame({
+    parentOrigin: import.meta.env.VITE_PARENT_WINDOW_URL,
+    // define the effects that the parent window can call on the iframe
+    effects: {
+      onParentWindowLogin: ({ args: { email } }) => {
+        if (email && typeof email === 'string') {
+          setEmail(email);
+        } else {
+          // callParentEffect({ name: 'onLoginFailed' });
+        }
+      },
+      onParentWindowLogout: () => {
+        setEmail('');
+      },
+    },
+  });
+
+  return (
+    <div className="flex flex-col items-center justify-center h-screen bg-gray-100">
+      {!email && <p>Logged out</p>}
+      {email && (
+        <div className="flex flex-col items-center justify-center gap-4">
+          <p>Logged in as: {email}</p>
+          <Button
+            onClick={() => {
+              setEmail('');
+              callParentEffect({
+                name: 'onIFrameLogout',
+              });
+            }}
+          >
+            Logout User (from iframe)
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default App;
diff --git a/apps/liaison/src/assets/.gitkeep → apps/iframe-react-app/src/assets/.gitkeep b/apps/liaison/src/assets/.gitkeep → apps/iframe-react-app/src/assets/.gitkeep
diff --git a/apps/iframe-react-app/src/main.tsx b/apps/iframe-react-app/src/main.tsx
@@ -0,0 +1,16 @@
+import { StrictMode } from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+
+import App from './app/app';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>
+);
diff --git a/apps/liaison/src/styles.css → apps/iframe-react-app/src/styles.css b/apps/liaison/src/styles.css → apps/iframe-react-app/src/styles.css
diff --git a/apps/liaison/tailwind.config.js → apps/iframe-react-app/tailwind.config.js b/apps/liaison/tailwind.config.js → apps/iframe-react-app/tailwind.config.js
diff --git a/apps/liaison/tsconfig.app.json → apps/iframe-react-app/tsconfig.app.json b/apps/liaison/tsconfig.app.json → apps/iframe-react-app/tsconfig.app.json
diff --git a/apps/liaison/tsconfig.json → apps/iframe-react-app/tsconfig.json b/apps/liaison/tsconfig.json → apps/iframe-react-app/tsconfig.json
diff --git a/apps/liaison/tsconfig.spec.json → apps/iframe-react-app/tsconfig.spec.json b/apps/liaison/tsconfig.spec.json → apps/iframe-react-app/tsconfig.spec.json
diff --git a/apps/iframe-react-app/vite.config.ts b/apps/iframe-react-app/vite.config.ts
@@ -0,0 +1,35 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/apps/iframe-react-app',
+
+  server: {
+    port: 4200,
+    host: 'localhost',
+  },
+
+  preview: {
+    port: 4300,
+    host: 'localhost',
+  },
+
+  plugins: [react(), nxViteTsPaths()],
+
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+
+  build: {
+    outDir: '../../dist/apps/iframe-react-app',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+  },
+});
diff --git a/apps/liaison-e2e/.eslintrc.json b/apps/liaison-e2e/.eslintrc.json
diff --git a/apps/liaison-e2e/project.json b/apps/liaison-e2e/project.json
diff --git a/apps/liaison/.eslintrc.json b/apps/liaison/.eslintrc.json