Merge branch 'dev' into id-367-get-user-registration-from-sam

.circleci/config.yml

@@ -234,6 +234,7 @@ jobs:
           command: |
             if [[ $(git ls-files .yarn/cache --exclude-standard --others) ]]; then
               echo "Changes to Yarn cache need to be committed" 1>&2
+              echo "To resolve this, checkout this branch, run yarn, and commit any untracked files in .yarn/cache" 1>&2
               exit 1
             fi
       - run: yarn run build

.github/pull_request_template.md

@@ -7,13 +7,17 @@
 <!--Please give an abridged version of the ticket description here and/or fill out the following fields.-->
 
 ### What
-- 
+-
 
 ### Why
-- 
+-
 
 ### Testing strategy
+<!-- Note that changes impacting components in Storybook stories can be viewed at
+https://www.chromatic.com/library?appId=65fc89c9335768720ff8605a&branch=<branch>
+The branch corresponding to this PR is selected, and changes can be reviewed by commit. --->
+
 - [ ] <!-- Test case 1 -->
 
 <!-- ### Visual Aids -->
-<!-- https://support.apple.com/guide/quicktime-player/record-your-screen-qtp97b08e666/mac --> 
+<!-- https://support.apple.com/guide/quicktime-player/record-your-screen-qtp97b08e666/mac -->

.github/workflows/appengine-cleanup.yml

@@ -25,5 +25,4 @@ jobs:
         uses: 'google-github-actions/setup-gcloud@v1'
       # Delete old AppEngine versions in each environment
       - run: ./scripts/delete-old-app-engine-versions.sh dev
-      - run: ./scripts/delete-old-app-engine-versions.sh alpha
       - run: ./scripts/delete-old-app-engine-versions.sh staging

.github/workflows/publish-storybook.yml

@@ -0,0 +1,26 @@
+name: Publish Storybook to Chromatic
+
+on:
+  push:
+    tags-ignore:
+      - v0.*
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Build packages
+        run: yarn build-packages
+
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PUBLISH_TOKEN }}

.gitignore

@@ -26,6 +26,8 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+build-storybook.log
+
 #
 # Additions beyond the default react-create-app .gitignore file.
 #

.storybook/preview.tsx

@@ -1,3 +1,5 @@
+import 'src/style.css';
+
 import type { Preview } from '@storybook/react';
 import React from 'react';
 

lint-staged.config.mjs

@@ -5,7 +5,7 @@ import process from 'process';
 import ignore from 'ignore';
 
 export default {
-  '*.{js,ts}': (files) => {
+  '*.{js,ts,jsx,tsx}': (files) => {
     const cwd = process.cwd();
     const relativePaths = files.map((p) => path.relative(cwd, p));
 

package.json

@@ -8,8 +8,10 @@
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
     "@microlink/react-json-view": "^1.22.2",
+    "@terra-ui-packages/analysis": "*",
     "@terra-ui-packages/components": "*",
     "@terra-ui-packages/core-utils": "*",
+    "@terra-ui-packages/notifications": "*",
     "animate.css": "^4.1.1",
     "array-move": "^4.0.0",
     "clipboard-polyfill": "^3.0.3",
@@ -80,6 +82,7 @@
   "devDependencies": {
     "@axe-core/react": "^4.6.1",
     "@pact-foundation/pact": "12.1.1",
+    "@storybook/addon-actions": "^8.0.0",
     "@storybook/addon-essentials": "^7.6.17",
     "@storybook/addon-interactions": "^7.6.17",
     "@storybook/addon-links": "^7.6.17",
@@ -104,6 +107,7 @@
     "@vitejs/plugin-react": "^4.0.0",
     "browserslist": "^4.18.1",
     "check-dts": "^0.7.2",
+    "chromatic": "^11.2.0",
     "eslint": "^8.3.0",
     "eslint-config-airbnb-typescript-prettier": "^5.0.0",
     "eslint-import-resolver-typescript": "^3.6.0",

packages/analysis/jest.config.mjs

@@ -0,0 +1,6 @@
+// ESLint thinks @terra-ui-packages/test-utils should be listed in dependencies instead of devDependencies.
+// TODO: Fix this in ESLint configuration.
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { getJestConfig } from '@terra-ui-packages/test-utils';
+
+export default getJestConfig();

packages/analysis/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@terra-ui-packages/analysis",
+  "version": "0.0.1",
+  "scripts": {
+    "build": "vite build --emptyOutDir",
+    "dev": "vite build --mode=development --watch",
+    "test": "jest"
+  },
+  "type": "module",
+  "module": "./lib/es/index.js",
+  "main": "./lib/cjs/index.cjs",
+  "types": "./lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/es/index.js",
+      "require": "./lib/cjs/index.cjs",
+      "types": "./lib/types/index.d.ts"
+    }
+  },
+  "files": [
+    "lib/cjs/**",
+    "lib/es/**",
+    "lib/types/**/*.d.ts"
+  ],
+  "dependencies": {
+    "@terra-ui-packages/components": "^0.0.6",
+    "lodash": "^4.17.21"
+  },
+  "devDependencies": {
+    "@terra-ui-packages/build-utils": "^1.0.0",
+    "@terra-ui-packages/test-utils": "*",
+    "@testing-library/dom": "^9.3.1",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^28.1.8",
+    "@types/lodash": "^4.14.184",
+    "@types/react": "^18.2.15",
+    "@types/testing-library__jest-dom": "^5.14.9",
+    "jest": "^27.4.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "typescript": "~5.1.6",
+    "vite": "^4.5.2"
+  },
+  "peerDependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  }
+}

packages/analysis/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "noImplicitAny": true,
+    "outDir": "lib/types",
+    "rootDir": "src"
+  },
+  "include": ["src"]
+}

packages/analysis/vite.config.js

@@ -0,0 +1,3 @@
+import { viteConfig as defineBaseConfig } from '@terra-ui-packages/build-utils';
+
+export default defineBaseConfig;

packages/components/src/theme.ts

@@ -1,6 +1,6 @@
 import Color from 'color';
 import { mapValues } from 'lodash/fp';
-import { createContext, createElement, PropsWithChildren, useContext } from 'react';
+import { createContext, createElement, PropsWithChildren, ReactNode, useContext } from 'react';
 
 type ColorPalette = {
   /** Used as accent on header, loading spinner, background of beta version tag and some buttons */
@@ -53,7 +53,7 @@ export type ThemeProviderProps = PropsWithChildren<{
 }>;
 
 /** Provides a theme to descendents via React Context. */
-export const ThemeProvider = (props: ThemeProviderProps) => {
+export const ThemeProvider = (props: ThemeProviderProps): ReactNode => {
   const { children, theme } = props;
   return createElement(EnrichedThemeContext.Provider, { value: enrichTheme(theme) }, children);
 };

packages/notifications/jest.config.mjs

@@ -0,0 +1,6 @@
+// ESLint thinks @terra-ui-packages/test-utils should be listed in dependencies instead of devDependencies.
+// TODO: Fix this in ESLint configuration.
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { getJestConfig } from '@terra-ui-packages/test-utils';
+
+export default getJestConfig();

packages/notifications/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@terra-ui-packages/notifications",
+  "version": "1.0.1",
+  "scripts": {
+    "build": "vite build --emptyOutDir",
+    "dev": "vite build --mode=development --watch",
+    "test": "jest"
+  },
+  "type": "module",
+  "module": "./lib/es/index.js",
+  "main": "./lib/cjs/index.cjs",
+  "types": "./lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/es/index.js",
+      "require": "./lib/cjs/index.cjs",
+      "types": "./lib/types/index.d.ts"
+    }
+  },
+  "files": [
+    "lib/cjs/**",
+    "lib/es/**",
+    "lib/types/**/*.d.ts"
+  ],
+  "dependencies": {
+    "@terra-ui-packages/components": "^0.0.6",
+    "lodash": "^4.17.21"
+  },
+  "devDependencies": {
+    "@terra-ui-packages/build-utils": "^1.0.0",
+    "@terra-ui-packages/test-utils": "*",
+    "@testing-library/dom": "^9.3.1",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^28.1.8",
+    "@types/lodash": "^4.14.184",
+    "@types/react": "^18.2.15",
+    "@types/testing-library__jest-dom": "^5.14.9",
+    "jest": "^27.4.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "typescript": "~5.1.6",
+    "vite": "^4.5.2"
+  },
+  "peerDependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  }
+}

packages/notifications/src/index.ts

@@ -0,0 +1 @@
+export * from './useNotifications';

packages/notifications/src/useNotifications.test.tsx

@@ -0,0 +1,55 @@
+import { ErrorBoundary } from '@terra-ui-packages/components';
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { NotificationsContract, NotificationsProvider, text, useNotificationsFromContext } from './useNotifications';
+
+describe('useNotificationsFromContext', () => {
+  it('gets notifications provider from context', () => {
+    // Arrange
+    const onRenderWithReporter = jest.fn();
+
+    const TestComponent = () => {
+      const reporter = useNotificationsFromContext();
+      onRenderWithReporter(reporter);
+      return null;
+    };
+
+    const reporter: NotificationsContract = {
+      notify: jest.fn(),
+    };
+
+    // Act
+    render(
+      <NotificationsProvider notifications={reporter}>
+        <TestComponent />
+      </NotificationsProvider>
+    );
+
+    // Assert
+    expect(onRenderWithReporter).toHaveBeenCalledWith(expect.objectContaining(reporter));
+  });
+
+  it('throw an error if no notifications provider is provided', () => {
+    // Arrange
+    const onRenderError = jest.fn();
+
+    const TestComponent = () => {
+      useNotificationsFromContext();
+      return null;
+    };
+
+    // Prevent React from logging the error.
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    // Act
+    render(
+      <ErrorBoundary onError={onRenderError}>
+        <TestComponent />
+      </ErrorBoundary>
+    );
+
+    // Assert
+    expect(onRenderError).toHaveBeenCalledWith(new Error(text.error.noProvider));
+  });
+});

packages/notifications/src/useNotifications.ts

@@ -0,0 +1,39 @@
+import { createContext, createElement, PropsWithChildren, ReactNode, useContext } from 'react';
+
+export type NotificationType = 'error' | 'warn' | 'info' | 'success' | 'welcome';
+export interface NotificationOptions {
+  /**
+   * string, Error(unknown), or json object to be displayed in detail section
+   */
+  detail?: unknown;
+}
+
+export interface NotificationsContract {
+  notify: (type: NotificationType, title: string, options?: NotificationOptions) => void;
+}
+const NotificationsContext = createContext<NotificationsContract | null>(null);
+
+export type NotificationsProviderProps = PropsWithChildren<{
+  notifications: NotificationsContract;
+}>;
+
+export const text = {
+  error: {
+    noProvider:
+      'No NotificationsProvider provided. Components (or hooks within them) using useNotificationsFromContext must be descendants of NotificationsProvider.',
+  },
+};
+
+/** Provides notifications to descendents via React Context. */
+export const NotificationsProvider = (props: NotificationsProviderProps): ReactNode => {
+  const { children, notifications } = props;
+  return createElement(NotificationsContext.Provider, { value: notifications }, children);
+};
+/** Gets the current NotificationsProvider from React context. */
+export const useNotificationsFromContext = (): NotificationsContract => {
+  const notifier = useContext(NotificationsContext);
+  if (!notifier) {
+    throw new Error(text.error.noProvider);
+  }
+  return notifier;
+};