Mosaic Next

.eslintrc.js

@@ -1,5 +1,11 @@
 module.exports = {
-  extends: ['airbnb', 'airbnb-typescript', 'plugin:eslint-comments/recommended', 'prettier'],
+  extends: [
+    'airbnb',
+    'airbnb-typescript',
+    'plugin:eslint-comments/recommended',
+    'prettier',
+    'plugin:react-hooks/recommended'
+  ],
   parserOptions: {
     project: ['./tsconfig.json']
   },
@@ -16,11 +22,13 @@ module.exports = {
     'max-classes-per-file': 'off',
     'import/prefer-default-export': 'off',
     'react/function-component-definition': 'off',
-    'react/require-default-props': 'off'
+    'react/require-default-props': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'react/jsx-props-no-spreading': 'off'
   },
   overrides: [
     {
-      files: ['**/*.ts', 'packages/*/src/**/*.tsx', 'packages/site/newsletters/**/*.tsx'],
+      files: ['**/*.ts', 'packages/*/src/**/*.tsx'],
       parser: '@typescript-eslint/parser',
       plugins: ['@typescript-eslint'],
       extends: ['plugin:@typescript-eslint/recommended', 'plugin:import/typescript'],
@@ -32,5 +40,10 @@ module.exports = {
         '@typescript-eslint/lines-between-class-members': 0
       }
     }
-  ]
+  ],
+  settings: {
+    react: {
+      version: 'detect'
+    }
+  }
 };

.gitignore

@@ -17,6 +17,7 @@ tsconfig.tsbuildinfo
 # Deployment
 packages/rig
 packages/site/public/images
+packages/site/out
 
 # Test Results
 coverage

.prettierignore

@@ -11,6 +11,7 @@ LICENSE
 *.png
 *.hbs
 *.jpg
+*.ico
 
 **/build
 **/dist

__mocks__/zustand.ts

@@ -1,23 +1,62 @@
+/**
+ * From: https://docs.pmnd.rs/zustand/guides/testing
+ *
+ * Modified to also export useStore
+ */
+
+import * as zustand from 'zustand';
 import { vi, afterEach } from 'vitest';
 
-const actualZustand = await vi.importActual<typeof import('zustand')>('zustand');
+import { act } from '@testing-library/react';
 
-const actualCreate = actualZustand.create;
+const {
+  create: actualCreate,
+  createStore: actualCreateStore,
+  useStore: actualUseStore
+} = await vi.importActual<typeof zustand>('zustand');
 
-const stores = new Set<() => unknown>();
+// a variable to hold reset functions for all stores declared in the app
+export const storeResetFns = new Set<() => void>();
 
-const create = ((createState: any) => {
-  const store = actualCreate(createState);
+const createUncurried = <T>(stateCreator: zustand.StateCreator<T>) => {
+  const store = actualCreate(stateCreator);
   const initialState = store.getState();
-  stores.add(() => store.setState(initialState, true));
+  storeResetFns.add(() => {
+    store.setState(initialState, true);
+  });
+  return store;
+};
 
+// when creating a store, we get its initial state, create a reset function and add it in the set
+export const create = (<T>(stateCreator: zustand.StateCreator<T>) =>
+  // to support curried version of create
+  typeof stateCreator === 'function'
+    ? createUncurried(stateCreator)
+    : createUncurried) as typeof zustand.create;
+
+const createStoreUncurried = <T>(stateCreator: zustand.StateCreator<T>) => {
+  const store = actualCreateStore(stateCreator);
+  const initialState = store.getState();
+  storeResetFns.add(() => {
+    store.setState(initialState, true);
+  });
   return store;
-}) as typeof actualCreate;
+};
 
-afterEach(() => {
-  stores.forEach(resetFn => resetFn());
-});
+// when creating a store, we get its initial state, create a reset function and add it in the set
+export const createStore = (<T>(stateCreator: zustand.StateCreator<T>) =>
+  // to support curried version of createStore
+  typeof stateCreator === 'function'
+    ? createStoreUncurried(stateCreator)
+    : createStoreUncurried) as typeof zustand.createStore;
 
-const { createStore, useStore } = actualZustand;
+export { actualUseStore as useStore };
 
-export { create, createStore, useStore };
+// reset all stores after each test run
+afterEach(() => {
+  act(() => {
+    storeResetFns.forEach(resetFn => {
+      resetFn();
+    });
+  });
+});

docs/author/refs.mdx

@@ -157,6 +157,7 @@ You can use Mosaic components with referenced data as well. Below we are using t
 <Tiles>
   {meta.data.modes.map(mode => (
     <TileContent
+      key={mode}
       title={mode}
       description={`Documentation about ${mode} of Mosaic`}
       eyebrow="Mosaic"

docs/index.mdx

@@ -5,7 +5,7 @@ sharedConfig:
   header:
     homeLink: /mosaic/index
     title: Mosaic (BETA)
-    logo: /img/favicon.png
+    logo: /img/logo.png
     searchNamespace: mosaic
     menu:
       - title: Getting Started

docs/test/layouts/detail-highlight.mdx

@@ -5,7 +5,7 @@ frameOverrides:
   header:
     homeLink: /mosaic/index
     title: Mosaic (BETA)
-    logo: /img/favicon.png
+    logo: /img/logo.png
     searchNamespace: mosaic
     menu:
       - title: Docs

docs/test/layouts/detail-overview.mdx

@@ -5,7 +5,7 @@ frameOverrides:
   header:
     homeLink: /mosaic/index
     title: Mosaic (BETA)
-    logo: /img/favicon.png
+    logo: /img/logo.png
     searchNamespace: mosaic
     menu:
       - title: Docs

docs/test/layouts/detail-technical.mdx

@@ -5,7 +5,7 @@ frameOverrides:
   header:
     homeLink: /mosaic/index
     title: Mosaic (BETA)
-    logo: /img/favicon.png
+    logo: /img/logo.png
     searchNamespace: mosaic
     menu:
       - title: Docs

docs/test/layouts/edit.mdx

@@ -5,7 +5,7 @@ frameOverrides:
   header:
     homeLink: /mosaic/index
     title: Mosaic (BETA)
-    logo: /img/favicon.png
+    logo: /img/logo.png
     searchNamespace: mosaic
     menu:
       - title: Docs

docs/test/layouts/full-width.mdx

@@ -5,7 +5,7 @@ frameOverrides:
   header:
     homeLink: /mosaic/index
     title: Mosaic (BETA)
-    logo: /img/favicon.png
+    logo: /img/logo.png
     searchNamespace: mosaic
     menu:
       - title: Docs

docs/test/layouts/landing.mdx

@@ -5,7 +5,7 @@ frameOverrides:
   header:
     homeLink: /mosaic/index
     title: Mosaic (BETA)
-    logo: /img/favicon.png
+    logo: /img/logo.png
     searchNamespace: mosaic
     menu:
       - title: Docs

docs/test/layouts/newsletter.mdx

@@ -5,7 +5,7 @@ frameOverrides:
   header:
     homeLink: /mosaic/index
     title: Mosaic (BETA)
-    logo: /img/favicon.png
+    logo: /img/logo.png
     searchNamespace: mosaic
     menu:
       - title: Docs

docs/test/layouts/product-discover.mdx

@@ -5,7 +5,7 @@ frameOverrides:
   header:
     homeLink: /mosaic/index
     title: Mosaic (BETA)
-    logo: /img/favicon.png
+    logo: /img/logo.png
     searchNamespace: mosaic
     menu:
       - title: Docs

docs/test/layouts/product-preview.mdx

@@ -5,7 +5,7 @@ frameOverrides:
   header:
     homeLink: /mosaic/index
     title: Mosaic (BETA)
-    logo: /img/favicon.png
+    logo: /img/logo.png
     searchNamespace: mosaic
     menu:
       - title: Docs

package.json

@@ -11,9 +11,6 @@
   "engines": {
     "node": ">=18.0.0 || >=20.0.0"
   },
-  "bin": {
-    "mosaic": "yarn workspace @jpmorganchase/mosaic-cli"
-  },
   "scripts": {
     "build:site": "turbo run build --filter=@jpmorganchase/mosaic-site",
     "build": "turbo run build",
@@ -27,20 +24,19 @@
     "e2e:codegen": "turbo run e2e:codegen --filter=@jpmorganchase/mosaic-site",
     "e2e:setup": "npx playwright install",
     "e2e": "turbo run e2e --filter=@jpmorganchase/mosaic-site",
+    "export:static": "turbo run export:static --filter=@jpmorganchase/mosaic-site",
     "gen:rig": "turbo run create:rig copy:rig:images --filter=//",
     "gen:site": "turbo run create:site copy:site:images --filter=//",
-    "gen:snapshot": "turbo run gen:snapshot --filter=@jpmorganchase/mosaic-site",
-    "gen": "turbo run gen:site gen:snapshot --filter=//",
+    "gen": "turbo run gen:site export:static --filter=//",
     "lint": "turbo run lint",
     "mosaic": "node ./packages/cli/dist/index.js",
     "postinstall": "patch-package",
     "prepare": "husky install",
     "prettier:ci": "prettier --check .",
     "prettier": "prettier --write .",
     "serve:rig": "turbo run serve --filter=@jpmorganchase/mosaic-rig",
-    "serve:snapshot:file": "turbo run serve:snapshot:file --filter=@jpmorganchase/mosaic-site",
-    "serve:snapshot:s3": "turbo run serve:snapshot:s3 --filter=@jpmorganchase/mosaic-site",
     "serve": "turbo run serve --filter=@jpmorganchase/mosaic-site",
+    "serve:static": "turbo run serve:static --filter=@jpmorganchase/mosaic-site",
     "start": "turbo run start --filter=@jpmorganchase/mosaic-site",
     "test:client": "vitest --project=client",
     "test:server": "vitest --project=server",
@@ -59,16 +55,18 @@
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.0.0",
     "@types/lodash-es": "^4.17.6",
-    "@types/node": "^17.0.24",
+    "@types/node": "^18.0.0",
+    "@types/react": "^18.2.46",
+    "@types/react-dom": "^18.2.18",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
     "@vanilla-extract/esbuild-plugin": "^2.3.11",
     "@vitest/coverage-istanbul": "^2.1.4",
     "concurrently": "^7.1.0",
     "del-cli": "^4.0.1",
     "esbuild": "0.23.1",
-    "esbuild-node-externals": "^1.7.0",
-    "eslint": "^7.23.0",
+    "esbuild-node-externals": "^1.12.0",
+    "eslint": "^8.51.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-prettier": "^8.5.0",
@@ -77,7 +75,7 @@
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-promise": "^6.0.1",
-    "eslint-plugin-react": "7.31.8",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.3.0",
     "fast-glob": "^3.2.7",
     "husky": "^8.0.0",
@@ -90,7 +88,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "resize-observer-polyfill": "1.5.1",
-    "typescript": "^4.8.3",
+    "typescript": "^5.2.2",
     "vitest": "^2.0.0"
   },
   "dependencies": {
@@ -100,7 +98,8 @@
   },
   "resolutions": {
     "@braintree/sanitize-url": "^6.0.0",
-    "@types/react": "^18.0.26",
+    "@types/react": "^18.2.46",
+    "@types/react-dom": "^18.2.18",
     "commander": "^9.4.0",
     "esbuild": "0.23.1",
     "json5": "^1.0.2"

packages/cli/package.json

@@ -40,7 +40,7 @@
   "devDependencies": {
     "@jpmorganchase/mosaic-types": "^0.1.0-beta.89",
     "esbuild": "0.23.1",
-    "esbuild-node-externals": "^1.0.2",
+    "esbuild-node-externals": "^1.12.0",
     "fast-glob": "^3.2.7",
     "@types/ws": "^8.5.7"
   },
@@ -52,6 +52,7 @@
     "@aws-sdk/client-s3": "^3.645.0",
     "@fastify/middie": "^8.3.0",
     "@fastify/websocket": "^8.2.0",
+    "@fastify/static": "^6.11.2",
     "commander": "^9.4.1",
     "cors": "^2.8.5",
     "deepmerge": "^4.2.2",