React major upgrade

.gitignore

@@ -1,6 +1,7 @@
 node_modules
 dist
 coverage
+cosmos-export
 *.tgz
 .DS_Store
 

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "js/ts.tsdk.path": "./node_modules/typescript/lib",
+  "js/ts.tsdk.promptToUseWorkspaceVersion": true,
+}

Readme.md

@@ -2,38 +2,47 @@
 
 ## Getting started
 
-Install `yarn` (`>v1.7.0`)
+Install `pnpm` through Corepack or your preferred package manager.
 
-1. `npm i -g yarn`
-1. `yarn install`
-1. `yarn cosmos`
+1. `pnpm install`
+1. `pnpm cosmos`
 
 ## Regular tasks
 
 ### Installing workspace dependencies
 
 To install a specific package to all workspaces
 
-`yarn add -DW ${package}`
+`pnpm add -D ${package}`
 
 ### Installing dependencies to a specific package
 
 To install a specific package to a specific workspace
 
-`yarn workspace @newfrontdoor/${workspace} add ${package} {--dev}`
+`pnpm --filter @newfrontdoor/${workspace} add ${package} {--save-dev}`
 
 ### Bundling
 
-When importing other packages within the ui library, make sure they have been bundled.
-Either run `yarn install`, (or `yarn prepare`, which runs after install)
+When importing published package outputs within the ui library, make sure they have been bundled.
+Run `pnpm run build` when package `dist` output is needed.
 
 If you make a change to a package you depend on,
-make sure you run `yarn prepare` to ensure the changes have been bundled
+run `pnpm run build` to ensure the changes have been bundled.
+
+### Component fixtures
+
+Cosmos is the component fixture browser.
+
+1. `pnpm install`
+1. `pnpm run build` if you need package `dist` output
+1. `pnpm cosmos`
+
+Use `pnpm cosmos:export` to produce a static fixture export in `cosmos-export`.
 
 ### Publishing a package
 
 1. Create a branch with your changes
-1. From the root of the monorepo, run `yarn changeset` and follow the prompts
+1. From the root of the monorepo, run `pnpm changeset` and follow the prompts
 1. Create a Pull Request with the generated changeset, and your changes
 1. Merge your Pull Request once the tests pass
 1. Once merged, the release workflow will start

cosmos.decorator.jsx

@@ -0,0 +1,58 @@
+import {ThemeUIProvider} from 'theme-ui';
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+import {ApiContext} from '@newfrontdoor/api-config';
+import theme from './cosmos/theme';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      refetchOnWindowFocus: false
+    }
+  }
+});
+
+const apiConfig = {
+  baseUrl: 'https://cornerstoneapi.newfrontdoor.org/api/views/'
+};
+
+function pageLookup(href) {
+  if (/^https?:\/\//.test(href)) {
+    return href;
+  }
+
+  // This depends on the fact that no sub-subdirectory of pages contains an index file
+  if (href.includes('/')) {
+    const parts = href.split('/').filter(Boolean);
+    const root = parts[parts.length - 1];
+    return root ? `/${root}/[slug]` : '/[slug]';
+  }
+
+  switch (href) {
+    case '':
+    case 'sermons':
+    case 'search':
+    case 'all-sermons':
+      return `/${href}`;
+    default:
+      return '/[slug]';
+  }
+}
+
+const Link = ({href, ...rest}) => {
+  return <a href={pageLookup(href)} {...rest} />;
+};
+
+const components = {a: Link};
+
+const decorator = (props) => {
+  return (
+    <ApiContext.Provider value={apiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <ThemeUIProvider theme={theme} components={components} {...props} />
+      </QueryClientProvider>
+    </ApiContext.Provider>
+  );
+};
+
+export default decorator;

cosmos.imports.ts

@@ -0,0 +1,108 @@
+// NOTE: This file is auto-generated by React Cosmos.
+// It imports all fixture and decorator modules, making them available to the
+// React Cosmos renderer along with the renderer config.
+
+import type { RendererConfig, UserModuleWrappers } from 'react-cosmos-core';
+
+import './cosmos/msw/browser.js';
+
+import * as fixture0 from './packages/about/__fixtures__/about.jsx';
+import * as fixture1 from './packages/audio-player/__fixtures__/audio-manager';
+import * as fixture2 from './packages/audio-player/__fixtures__/audio-player';
+import * as fixture3 from './packages/audio-player/__fixtures__/native-player';
+import * as fixture4 from './packages/bible/__fixtures__/bible-input';
+import * as fixture5 from './packages/bible/__fixtures__/bible';
+import * as fixture6 from './packages/blog/__fixtures__/blog.jsx';
+import * as fixture7 from './packages/blog/__fixtures__/post-page.jsx';
+import * as fixture8 from './packages/calendar/__fixtures__/calendar';
+import * as fixture9 from './packages/calendar/__fixtures__/drupal-calendar';
+import * as fixture10 from './packages/calendar/__fixtures__/elvanto-calendar';
+import * as fixture11 from './packages/calendar/__fixtures__/random-events';
+import * as fixture12 from './packages/carousel/__fixtures__/autoplay-off-hide-nav-dots';
+import * as fixture13 from './packages/carousel/__fixtures__/autoplay-off';
+import * as fixture14 from './packages/carousel/__fixtures__/autoplay-on';
+import * as fixture15 from './packages/carousel/__fixtures__/custom-dots';
+import * as fixture16 from './packages/collapse/__fixtures__/collapse';
+import * as fixture17 from './packages/collapse/__fixtures__/use-collapse';
+import * as fixture18 from './packages/content-editor/__fixtures__/editor.jsx';
+import * as fixture19 from './packages/footer/__fixtures__/footer';
+import * as fixture20 from './packages/footer/__fixtures__/slimline-footer';
+import * as fixture21 from './packages/form/__fixtures__/gridform.jsx';
+import * as fixture22 from './packages/grid-wrapper/__fixtures__/gridblock.jsx';
+import * as fixture23 from './packages/link/__fixtures__/link.jsx';
+import * as fixture24 from './packages/link/__fixtures__/navlink.jsx';
+import * as fixture25 from './packages/location-map/__fixtures__/location-map.jsx';
+import * as fixture26 from './packages/people/__fixtures__/allpeople.jsx';
+import * as fixture27 from './packages/ppt-generator/__fixtures__/ppt-generator.jsx';
+import * as fixture28 from './packages/s3-file-upload/__fixtures__/s3-dropzone';
+import * as fixture29 from './packages/search/__fixtures__/search-component.jsx';
+import * as fixture30 from './packages/sermon/__fixtures__/current-series.jsx';
+import * as fixture31 from './packages/sermon/__fixtures__/drupal.jsx';
+import * as fixture32 from './packages/sermon/__fixtures__/featured-series.jsx';
+import * as fixture33 from './packages/sermon/__fixtures__/latest-sermon-container.jsx';
+import * as fixture34 from './packages/sermon/__fixtures__/recent-series.jsx';
+import * as fixture35 from './packages/sermon/__fixtures__/series-sermon-list.jsx';
+import * as fixture36 from './packages/sermon/__fixtures__/sermon-table.jsx';
+import * as fixture37 from './packages/sermon/__fixtures__/sermons.jsx';
+import * as fixture38 from './packages/toggleselector/__fixtures__/toggleselector.jsx';
+import * as fixture39 from './packages/vanilla-form/__fixtures__/gridform.jsx';
+
+import * as decorator0 from './cosmos.decorator.jsx';
+
+export const rendererConfig: RendererConfig = {
+  "webSocketUrl": "ws://172.20.10.3:5001",
+  "rendererUrl": "http://localhost:5050"
+};
+
+const fixtures = {
+  'packages/about/__fixtures__/about.jsx': { module: fixture0 },
+  'packages/audio-player/__fixtures__/audio-manager.tsx': { module: fixture1 },
+  'packages/audio-player/__fixtures__/audio-player.tsx': { module: fixture2 },
+  'packages/audio-player/__fixtures__/native-player.tsx': { module: fixture3 },
+  'packages/bible/__fixtures__/bible-input.ts': { module: fixture4 },
+  'packages/bible/__fixtures__/bible.tsx': { module: fixture5 },
+  'packages/blog/__fixtures__/blog.jsx': { module: fixture6 },
+  'packages/blog/__fixtures__/post-page.jsx': { module: fixture7 },
+  'packages/calendar/__fixtures__/calendar.tsx': { module: fixture8 },
+  'packages/calendar/__fixtures__/drupal-calendar.tsx': { module: fixture9 },
+  'packages/calendar/__fixtures__/elvanto-calendar.tsx': { module: fixture10 },
+  'packages/calendar/__fixtures__/random-events.tsx': { module: fixture11 },
+  'packages/carousel/__fixtures__/autoplay-off-hide-nav-dots.tsx': { module: fixture12 },
+  'packages/carousel/__fixtures__/autoplay-off.tsx': { module: fixture13 },
+  'packages/carousel/__fixtures__/autoplay-on.tsx': { module: fixture14 },
+  'packages/carousel/__fixtures__/custom-dots.tsx': { module: fixture15 },
+  'packages/collapse/__fixtures__/collapse.tsx': { module: fixture16 },
+  'packages/collapse/__fixtures__/use-collapse.tsx': { module: fixture17 },
+  'packages/content-editor/__fixtures__/editor.jsx': { module: fixture18 },
+  'packages/footer/__fixtures__/footer.tsx': { module: fixture19 },
+  'packages/footer/__fixtures__/slimline-footer.tsx': { module: fixture20 },
+  'packages/form/__fixtures__/gridform.jsx': { module: fixture21 },
+  'packages/grid-wrapper/__fixtures__/gridblock.jsx': { module: fixture22 },
+  'packages/link/__fixtures__/link.jsx': { module: fixture23 },
+  'packages/link/__fixtures__/navlink.jsx': { module: fixture24 },
+  'packages/location-map/__fixtures__/location-map.jsx': { module: fixture25 },
+  'packages/people/__fixtures__/allpeople.jsx': { module: fixture26 },
+  'packages/ppt-generator/__fixtures__/ppt-generator.jsx': { module: fixture27 },
+  'packages/s3-file-upload/__fixtures__/s3-dropzone.tsx': { module: fixture28 },
+  'packages/search/__fixtures__/search-component.jsx': { module: fixture29 },
+  'packages/sermon/__fixtures__/current-series.jsx': { module: fixture30 },
+  'packages/sermon/__fixtures__/drupal.jsx': { module: fixture31 },
+  'packages/sermon/__fixtures__/featured-series.jsx': { module: fixture32 },
+  'packages/sermon/__fixtures__/latest-sermon-container.jsx': { module: fixture33 },
+  'packages/sermon/__fixtures__/recent-series.jsx': { module: fixture34 },
+  'packages/sermon/__fixtures__/series-sermon-list.jsx': { module: fixture35 },
+  'packages/sermon/__fixtures__/sermon-table.jsx': { module: fixture36 },
+  'packages/sermon/__fixtures__/sermons.jsx': { module: fixture37 },
+  'packages/toggleselector/__fixtures__/toggleselector.jsx': { module: fixture38 },
+  'packages/vanilla-form/__fixtures__/gridform.jsx': { module: fixture39 }
+};
+
+const decorators = {
+  'cosmos.decorator.jsx': { module: decorator0 }
+};
+
+export const moduleWrappers: UserModuleWrappers = {
+  lazy: false,
+  fixtures,
+  decorators
+};

cosmos/cosmos.config.json

@@ -1,7 +1,21 @@
 {
-  "staticPath": "static",
-  "publicUrl": "/static/",
+  "$schema": "../node_modules/react-cosmos/config.schema.json",
   "rootDir": "..",
+  "plugins": ["react-cosmos-plugin-vite"],
+  "globalImports": ["./cosmos/msw/browser.js"],
+  "watchDirs": ["packages", "cosmos"],
+  "ignore": [
+    "**/dist/**",
+    "**/coverage/**",
+    "**/cosmos-export/**",
+    "**/cosmos.imports.ts",
+    "**/public/**"
+  ],
+  "lazy": true,
+  "vite": {
+    "configPath": "./cosmos/vite.config.ts",
+    "mainScriptUrl": "/cosmos/main.tsx"
+  },
   "ui": {
     "responsivePreview": {
       "devices": [
@@ -13,8 +27,5 @@
         { "label": "1080p", "width": 1920, "height": 1080 }
       ]
     }
-  },
-  "webpack": {
-    "overridePath": "./cosmos/webpack.override.js"
   }
 }

cosmos/index.html

@@ -0,0 +1,12 @@
+<!-- cosmos/index.html -->
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React Cosmos Renderer</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/cosmos/main.tsx"></script>
+  </body>
+</html>

cosmos/main.tsx

@@ -0,0 +1,10 @@
+import { createRoot } from "react-dom/client";
+import { mountDomRenderer } from "react-cosmos/dom";
+
+import { moduleWrappers, rendererConfig } from "../cosmos.imports";
+
+mountDomRenderer({
+  rendererConfig,
+  moduleWrappers,
+  createRoot
+});

cosmos/msw/browser.js

@@ -0,0 +1,15 @@
+import {setupWorker} from 'msw/browser';
+import {handlers} from './handlers';
+
+const worker = setupWorker(...handlers);
+
+if (typeof window !== 'undefined' && !window.__COSMOS_MSW_STARTED__) {
+  window.__COSMOS_MSW_STARTED__ = true;
+
+  worker.start({
+    onUnhandledRequest: 'bypass',
+    serviceWorker: {
+      url: '/mockServiceWorker.js'
+    }
+  });
+}