npm - @openstax/ts-utils - Versions diffs - 1.33.1 → 1.34.0 - Mend

@openstax/ts-utils 1.33.1 → 1.34.0

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 (504) hide show

package/packages/frontend/public/maintenance.html ADDED Viewed

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- spell-checker: ignore TFCS -->
+    <meta charset="utf-8" />
+    <title>OpenStax</title>
+    <meta name="robots" content="noindex" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="OpenStax"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      window.dataLayer.push({
+        'os.release_id':'%REACT_APP_CODE_VERSION%',
+        'os.app':'%REACT_APP_NAME%',
+        'os.user':window._OX_USER_DATA,
+      });
+    </script>
+    <style>
+      html {
+        font-family: Helvetica, Arial, sans-serif;
+        font-size: 62.5%;
+        text-size-adjust: 100%;
+      }
+      body {
+        padding: 3rem;
+        font-size: 1.6rem;
+        -webkit-font-smoothing: antialiased;
+      }
+      h3 {
+        font-weight: 400;
+        font-size: 2.2rem;
+        margin-top: 0;
+      }
+    </style>
+    <!-- Google Tag Manager -->
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-W6N7PB');</script>
+    <!-- End Google Tag Manager -->
+  </head>
+  <body></body>
+</html>

package/packages/frontend/public/manifest.json ADDED Viewed

@@ -0,0 +1,15 @@
+{
+  "short_name": "OpenStax",
+  "name": "OpenStax",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/packages/frontend/public/robots.txt ADDED Viewed

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow: /

package/packages/frontend/script/make-certificate.bash ADDED Viewed

@@ -0,0 +1,49 @@
+#!/usr/bin/env bash
+# spell-checker: ignore pipefail newkey outform keyout extfile
+set -euo pipefail; if [ -n "${DEBUG-}" ]; then set -x; fi
+project_dir="$( cd "$( dirname "${BASH_SOURCE[0]}" )/.." >/dev/null 2>&1 && pwd )"
+shared_certificate_dir=~/.openstax/certs
+mkdir -p "$project_dir/data"
+mkdir -p "$shared_certificate_dir"
+cd "$project_dir/data"
+host=${HOST:-localhost}
+# links about this logic
+#  - https://stackoverflow.com/questions/43929436/subject-alternative-name-missing-err-ssl-version-or-cipher-mismatch
+#  - https://stackoverflow.com/questions/64597721/neterr-cert-validity-too-long-the-server-certificate-has-a-validity-period-t
+#  - https://devopscube.com/create-self-signed-certificates-openssl/
+if [ ! -f "$shared_certificate_dir/CA.cer" ] || [ ! -f "$shared_certificate_dir/CA.pvk" ]; then
+  echo "creating self signed authority"
+  cat << EOF > "$shared_certificate_dir/cert.cfn"
+[ req ]
+distinguished_name = req_distinguished_name
+x509_extensions = root_ca
+[ req_distinguished_name ]
+commonName = openstax.local
+[ root_ca ]
+basicConstraints = critical, CA:true
+EOF
+  openssl req -x509 -sha256 -days 356 -nodes -newkey rsa:2048 -config "$shared_certificate_dir/cert.cfn" -subj "/CN=Openstax.local" \
+    -keyout "$shared_certificate_dir/CA.pvk" \
+    -out "$shared_certificate_dir/CA.cer"
+fi
+if [ ! -f "$host.pvk" ] || [ ! -f "$host.cer" ]; then
+  cat << EOF > "$project_dir/data/$host.ext"
+subjectAltName = @alt_names
+extendedKeyUsage = serverAuth
+[alt_names]
+DNS.1 = $host
+EOF
+  openssl req -newkey rsa:2048 -keyout "$host.pvk" -out "$host.req" -subj /CN="$host" -sha256 -nodes
+  openssl x509 -req \
+    -CA "$shared_certificate_dir/CA.cer" -CAkey "$shared_certificate_dir/CA.pvk" \
+    -in "$host.req" -out "$host.cer" -days 397 -extfile "$host.ext" -sha256
+fi

package/packages/frontend/script/server/cli.js ADDED Viewed

@@ -0,0 +1,11 @@
+// tslint:disable:no-console
+const { argv } = require('yargs');
+const { startServer } = require('.');
+startServer(argv)
+  .then(({port}) => console.log(`WEBSERVER: running on port: ${port}`))
+  .catch((e) => {
+    console.error(e.message);
+    process.exit(1);
+  })
+;

package/packages/frontend/script/server/index.js ADDED Viewed

@@ -0,0 +1,47 @@
+const express = require('express');
+const http = require('http');
+const path = require('path');
+const serveStatic = require('serve-static');
+const setupProxy = require('../../src/setupProxy');
+const makeFallback = (serve) => (req, res, next) => {
+  req.url = '/index.html';
+  serve(req, res, next);
+};
+const makeServe = (baseDir) => {
+  return serveStatic(baseDir, {redirect: false});
+};
+const makeOptions = (options) => ({
+  port: process.env.PORT,
+  ...options,
+  baseDir: path.join(__dirname, '../../build'),
+  onlyProxy: !!options.onlyProxy,
+});
+const makeMiddleware = (options) => {
+  const app = express();
+  setupProxy(app);
+  if (!options.onlyProxy) {
+    const serve = makeServe(options.baseDir);
+    app.use(serve);
+    app.use(makeFallback(serve));
+  }
+  return app;
+};
+const startServer = (options) => new Promise((resolve) => {
+  const serverConfig = makeOptions(options);
+  const app = makeMiddleware(serverConfig);
+  const server = http.createServer(app);
+  server.listen(serverConfig.port, () => resolve({server, port: serverConfig.port}));
+});
+module.exports = {
+  startServer
+};

package/packages/frontend/script/start.bash ADDED Viewed

@@ -0,0 +1,22 @@
+#!/usr/bin/env bash
+# spell-checker: ignore pipefail
+set -euo pipefail; if [ -n "${DEBUG-}" ]; then set -x; fi
+project_dir="$( cd "$( dirname "${BASH_SOURCE[0]}" )/.." >/dev/null 2>&1 && pwd )"
+shared_certificate_dir=~/.openstax/certs
+mkdir -p "$project_dir/data"
+./script/make-certificate.bash
+cd "$project_dir"
+# nodejs does not use system certs by default
+# - https://github.com/nodejs/node/issues/39657
+export NODE_EXTRA_CA_CERTS="$shared_certificate_dir/CA.cer"
+export SSL_CRT_FILE="$project_dir/data/${HOST:-localhost}.cer"
+export SSL_KEY_FILE="$project_dir/data/${HOST:-localhost}.pvk";
+export HTTPS=true
+export BROWSER=none
+yarn react-scripts start

package/packages/frontend/script/trust-localhost.bash ADDED Viewed

@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+# spell-checker: ignore pipefail Keychains keychain
+set -euo pipefail; if [ -n "${DEBUG-}" ]; then set -x; fi
+shared_certificate_dir=~/.openstax/certs
+sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain "$shared_certificate_dir"/CA.cer

package/packages/frontend/src/auth/authProvider.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { browserAuthProvider } from '@openstax/ts-utils/services/authProvider/browser';
+import { FrontendConfigProvider } from '../configProvider';
+export const createAuthProvider = (
+  ...args: Parameters<typeof browserAuthProvider>
+) => (configProvider: FrontendConfigProvider) => browserAuthProvider(...args)({
+  auth: {
+    accountsBase: () => configProvider.getValue('accountsBase'),
+  }
+});

package/packages/frontend/src/auth/useAuth.ts ADDED Viewed

@@ -0,0 +1,33 @@
+import React from 'react';
+import { User } from "@openstax/ts-utils/services/authProvider";
+import { useServices } from "../core/context/services";
+import { useSetAppError } from '@openstax/ui-components';
+import { FetchState, fetchSuccess, fetchLoading } from "@openstax/ts-utils/fetch";
+import { useFrontendConfigValue } from '../configProvider/use';
+export const useAuth = () => {
+  const authProvider = useServices().authProvider;
+  const setAppError = useSetAppError();
+  const [state, setUser] = React.useState<FetchState<User | undefined, string>>(fetchLoading());
+  React.useEffect(() => {
+    authProvider.getUser()
+      .then(user => setUser(fetchSuccess(user)))
+      .catch(setAppError);
+  }, [authProvider, setAppError]);
+  return state;
+};
+export const useUserRoles = () => {
+  const roleValidator = useServices().roleValidator;
+  const [state, setRoles] = React.useState<FetchState<string[], string>>(fetchLoading());
+  React.useEffect(() => {
+    roleValidator.getUserRoles().then(roles => setRoles(fetchSuccess(roles)));
+  }, [roleValidator]);
+  return state;
+};
+export const useAccountsBase = () => useFrontendConfigValue('accountsBase');

package/packages/frontend/src/components/Pagination.tsx ADDED Viewed

@@ -0,0 +1,26 @@
+import React from 'react';
+import * as UI from '@openstax/ui-components';
+import { useQuery } from 'routing/useQuery';
+import queryString from 'query-string';
+import { useRouteLinkOnClick } from 'routing/components/RouteLink';
+export const Pagination = (props: {
+  currentPage: number;
+  totalPages: number;
+  totalItems?: number;
+  pageSize?: number;
+}) => {
+  const query = useQuery();
+  const navigate = useRouteLinkOnClick();
+  return <UI.Pagination
+    {...props} showFromEnd={1} showFromCurrent={1}
+    Page={({ page, current }) => {
+      return <UI.LinkForPage
+        page={page} current={current}
+        href={"?" + queryString.stringify({ ...query, page })}
+        onClick={navigate}
+      />;
+    }}
+  />;
+};

package/packages/frontend/src/configProvider/index.ts ADDED Viewed

@@ -0,0 +1,53 @@
+/* eslint-disable import/no-webpack-loader-syntax */
+import { TRoutes as ApiRoutes } from '@project/lambdas/build/src/functions/serviceApi/core/routes';
+import type {
+  FrontendConfigProvider as LambdaFrontendConfigProvider
+} from '@project/lambdas/build/src/functions/serviceApi/versions/v0';
+import { once } from '@openstax/ts-utils';
+import { ConfigForConfigProvider } from '@openstax/ts-utils/config';
+import type { createApiGateway } from '@openstax/ts-utils/services/apiGateway';
+// @ts-ignore-next-line
+import routes from '!!val-loader!@project/lambdas/build/script/utils/routeDataLoader';
+export type FrontendConfig = ConfigForConfigProvider<LambdaFrontendConfigProvider>;
+const config = {
+  apiBase: () => '/'
+};
+const getApiGateway = (makeApiGateway: ReturnType<typeof createApiGateway>) => {
+  return makeApiGateway<ApiRoutes>(config, routes);
+};
+declare global {
+  interface Window {
+    _OX_FRONTEND_CONFIG?: FrontendConfig;
+  }
+}
+const loadConfig = (apiGateway: ReturnType<typeof getApiGateway>) => async() => {
+  if (window._OX_FRONTEND_CONFIG) { return window._OX_FRONTEND_CONFIG; }
+  // For backwards compatibility. Remove if the frontend config is removed from this API.
+  const response = await apiGateway.apiV0Info({});
+  const loadedResponse = await (await response.acceptStatus(200)).load();
+  return loadedResponse.config;
+};
+export const frontendConfigProvider = (makeApiGateway: ReturnType<typeof createApiGateway>) => {
+  const apiGateway = getApiGateway(makeApiGateway);
+  const getConfig = once(loadConfig(apiGateway));
+  const getValue = async(name: keyof FrontendConfig) => {
+    const frontendConfig = await getConfig();
+    if (name in frontendConfig) {
+      return frontendConfig[name];
+    }
+    throw new Error(`Frontend Config variable ${name} not found in in /api/v0/info`);
+  };
+  return { getConfig, getValue };
+};
+export type FrontendConfigProvider = ReturnType<typeof frontendConfigProvider>;

package/packages/frontend/src/configProvider/use.ts ADDED Viewed

@@ -0,0 +1,41 @@
+import React from 'react';
+import { fetchError, FetchStateType, fetchSuccess, fetchLoading, FetchState } from '@openstax/ts-utils/fetch';
+import { useSetAppError } from '@openstax/ui-components';
+import { FrontendConfig } from '.';
+import { useServices } from '../core/context/services';
+export const useFrontendConfig = () => {
+  const frontendConfigProvider = useServices().configProvider;
+  const [frontendConfig, setFrontendConfig] = React.useState<FetchState<FrontendConfig, string>>(fetchLoading());
+  const setAppError = useSetAppError();
+  React.useEffect(() => {
+    frontendConfigProvider.getConfig()
+      .then((ee) => setFrontendConfig(fetchSuccess(ee)))
+      .catch(setAppError);
+  }, [frontendConfigProvider, setAppError]);
+  return frontendConfig;
+};
+export const useFrontendConfigValue = (name: keyof FrontendConfig) => {
+  const [frontendConfigValue, setFrontendConfigValue] = React.useState<
+    FetchState<string, string>
+  >(fetchLoading());
+  const frontendConfig = useFrontendConfig();
+  React.useEffect(() => {
+    if (frontendConfig.type === FetchStateType.SUCCESS) {
+      const data = frontendConfig.data[name];
+      setFrontendConfigValue(previous => data
+        ? fetchSuccess(data)
+        : fetchError('configuration missing', previous)
+      );
+    } else if (frontendConfig.type === FetchStateType.ERROR) {
+      setFrontendConfigValue(previous => fetchError('error loading config', previous));
+    }
+  }, [frontendConfig, name]);
+  return frontendConfigValue;
+};

package/packages/frontend/src/core/context/services.spec.tsx ADDED Viewed

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ServiceContext, serviceProviderMiddleware } from "./services";
+import { AppServices } from "../types";
+afterEach(() => {
+  jest.resetAllMocks();
+});
+describe('ServicesContext', () => {
+  it('throws without a provider', () => {
+    jest.spyOn(console, 'error').mockReturnValue(undefined);
+    const Test = () => {
+      React.useContext(ServiceContext)();
+      return <div />;
+    };
+    expect(() => render(<Test />)).toThrow();
+  });
+});
+describe('serviceProviderMiddleware', () => {
+  it('provides services', () => {
+    const services = {text: 'cool text'} as any as AppServices;
+    const InnerTest = () => {
+      const services = React.useContext(ServiceContext)();
+      return <span>{(services as any).text}</span>;
+    };
+    const Test = () => <>{serviceProviderMiddleware(services)(<InnerTest />)}</>;
+    render(<Test />);
+    const textElement = screen.getByText(/cool text/i);
+    expect(textElement).toBeInTheDocument();
+  });
+});

package/packages/frontend/src/core/context/services.tsx ADDED Viewed

@@ -0,0 +1,16 @@
+import React from 'react';
+import { AppServices } from "../types";
+export const ServiceContext = React.createContext<() => AppServices>(
+  () => { throw new Error('context not provided'); }
+);
+export const serviceProviderMiddleware = (services: AppServices) => (route: React.ReactNode) =>
+  <ServiceContext.Provider value={() => services}>
+    {route}
+  </ServiceContext.Provider>
+;
+export const useServices = () => {
+  return React.useContext(ServiceContext)();
+};

package/packages/frontend/src/core/index.spec.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { routes } from ".";
+describe('gets routes', () => {
+  it('doesn\'t error', () => {
+    expect(routes).not.toThrow();
+  });
+});

package/packages/frontend/src/core/index.ts ADDED Viewed

@@ -0,0 +1,20 @@
+import {ReactNode} from 'react';
+import { makeRenderRouteUrl } from '@openstax/ts-utils/routing';
+import { getKeyValue } from '@openstax/ts-utils';
+import { exampleRoutes } from "../example/screens";
+import { makeGetRequestResponder } from '@openstax/ts-utils/routing';
+import { AppServices } from './types';
+import { Location } from "history";
+export const routes = () => ([
+  ...exampleRoutes(),
+]);
+export type TRoutes = (ReturnType<typeof routes>)[number];
+export const renderRouteUrl = makeRenderRouteUrl<TRoutes>();
+export const getRequestResponder = makeGetRequestResponder<AppServices, TRoutes, Location, ReactNode>()({
+  routes,
+  pathExtractor: getKeyValue('pathname'),
+});

package/packages/frontend/src/core/services.tsx ADDED Viewed

@@ -0,0 +1,14 @@
+import React, {ReactNode} from 'react';
+import { makeCreateRoute } from '@openstax/ts-utils/routing';
+import { makeComposeMiddleware } from '@openstax/ts-utils/middleware';
+import { AppServices } from './types';
+import { Location } from "history";
+export const composeRequestServiceMiddleware = makeComposeMiddleware<AppServices, {request: Location}>();
+export const composeResponseServiceMiddleware = makeComposeMiddleware<AppServices, ReactNode>();
+export const createRoute = makeCreateRoute<AppServices, Location>();
+export const makeScreen = <P,>(Screen: React.ComponentType<P>) => (params: {} extends P ? undefined : P) => {
+  return <Screen {...params as any} />;
+};

package/packages/frontend/src/core/types.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { BrowserServices } from "..";
+export type AppServices = BrowserServices;

package/packages/frontend/src/example/api.ts ADDED Viewed

@@ -0,0 +1,28 @@
+/* eslint-disable import/no-webpack-loader-syntax */
+import {TRoutes as ApiRoutes} from '@project/lambdas/build/src/functions/serviceApi/core/routes';
+// @ts-ignore-next-line
+import routes from '!!val-loader!@project/lambdas/build/script/utils/routeDataLoader';
+import { AppServices } from "../core/types";
+import { useServices } from "../core/context/services";
+import {assertDefined} from "@openstax/ts-utils/assertions";
+import React from 'react';
+// TODO - figure out how to wire the envConfig into the CRA build
+const config = {
+  apiBase: () => process.env.NODE_ENV === 'production'
+    ? assertDefined(process.env.REACT_APP_API_BASE_URL, 'REACT_APP_API_BASE_URL must be provided in production')
+    : '/'
+};
+export const createApiClient = (app: AppServices) => {
+  return app.createApiGateway<ApiRoutes>(config, routes, app);
+};
+export const useApiClient = () => {
+  const services = useServices();
+  const apiClientRef = React.useRef(createApiClient(services));
+  return apiClientRef.current;
+};
+export type ApiClient = ReturnType<typeof createApiClient>;

package/packages/frontend/src/example/components/Layout.tsx ADDED Viewed

@@ -0,0 +1,23 @@
+import React from 'react';
+import { BodyPortal, BodyPortalSlotsContext } from '@openstax/ui-components';
+import { thingListScreen } from '../screens/ThingList';
+import { homeScreen } from '../screens/Home';
+import { RouteLink } from '../../routing/components/RouteLink';
+interface Props {
+  title: string;
+}
+export const Layout = (props: React.PropsWithChildren<Props>) => {
+  return <BodyPortalSlotsContext.Provider value={['nav', 'root']}>
+    <BodyPortal slot='nav' tagName='nav'>
+      <ol>
+        <li><RouteLink route={homeScreen}>Home</RouteLink></li>
+        <li><RouteLink route={thingListScreen}>Thing List</RouteLink></li>
+      </ol>
+    </BodyPortal>
+    <h1>{props.title}</h1>
+    {props.children}
+  </BodyPortalSlotsContext.Provider>;
+};

package/packages/frontend/src/example/screens/Home.spec.tsx ADDED Viewed

@@ -0,0 +1,68 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { homeScreen } from "./Home";
+import { TestServiceProvider, testApiGateway } from "../../tests/testServices";
+import { ApiUser, stubAuthProvider } from "@openstax/ts-utils/services/authProvider";
+import { UpdatableUserFields } from "@openstax/ts-utils/services/authProvider/browser";
+beforeEach(() => {
+  testApiGateway.apiV0Info = jest.fn().mockReturnValue(Promise.resolve({
+    acceptStatus: (...num: number[]) => Promise.resolve({load: () => ({message: 'message'})}),
+  }));
+});
+afterEach(() => {
+  delete testApiGateway.apiV0Info;
+  jest.clearAllMocks();
+});
+describe('Home', () => {
+  it('renders logged out', async() => {
+    const services = {
+      configProvider: {
+        getConfig: async() => ({
+          roleApplication: 'test',
+          exampleMessage: 'hello from /api/v0/info',
+        }),
+      } as any,
+    };
+    render(<TestServiceProvider {...services}>{homeScreen.handler(undefined, {} as any)}</TestServiceProvider>);
+    await waitFor(() => {
+      const linkElement = screen.getByText(/login/i);
+      expect(linkElement).toBeInTheDocument();
+    });
+  });
+  it('renders logged in', async() => {
+    const token = '';
+    const user = {} as ApiUser;
+    const services = {
+      authProvider: {
+        ...stubAuthProvider(user),
+        getAuthToken: () => Promise.resolve(token),
+        getAuthorizedUrl: (url: string) => url,
+        getAuthorizedLinkUrl: (url: string) => url,
+        getAuthorizedEmbedUrl: (url: string) => url,
+        updateUser: (_updates: UpdatableUserFields) => Promise.resolve({user, token}),
+      },
+      configProvider: {
+        getConfig: async() => ({
+          roleApplication: 'test',
+          exampleMessage: 'hello from /api/v0/info',
+        }),
+      } as any,
+    };
+    render(<TestServiceProvider {...services}>{homeScreen.handler(undefined, {} as any)}</TestServiceProvider>);
+    await waitFor(() => {
+      const messageElement = screen.getByText('hello from /api/v0/info');
+      expect(messageElement).toBeInTheDocument();
+    });
+    await waitFor(() => {
+      const linkElement = screen.getByText(/logout/i);
+      expect(linkElement).toBeInTheDocument();
+    });
+  });
+});