= props => {
19 | const i18n = useTranslator();
20 |
21 | if (!props.children && !props.options) {
22 | throw new Error("Select must have options or children");
23 | }
24 |
25 | const menuItems =
26 | props.children ||
27 | props.options!.map(({ label, value }) => (
28 |
31 | ));
32 |
33 | return (
34 |
35 | {i18n(props.translation)}
36 |
37 | {menuItems}
38 |
39 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/modules/client/components/form/show-form-data.tsx:
--------------------------------------------------------------------------------
1 | import { useFormikContext } from "formik";
2 | import * as React from "react";
3 | import { pick } from "lodash-es";
4 |
5 | export const ShowFormData = () => {
6 | const ctx = useFormikContext();
7 | const values = pick(
8 | ctx,
9 | "dirty",
10 | "isSubmitting",
11 | "isValid",
12 | "isValidating",
13 | "status",
14 | "submitCount"
15 | );
16 | return (
17 |
18 | {JSON.stringify(ctx.values, null, 2)}
19 |
20 | {JSON.stringify(values, null, 2)}
21 |
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/modules/client/components/form/text-field.tsx:
--------------------------------------------------------------------------------
1 | import { I18nProps, useTranslator } from "client/translations";
2 | import { Field, FieldAttributes, useField } from "formik";
3 | import * as FMUI from "formik-material-ui";
4 |
5 | import * as React from "react";
6 | import { makeStyles } from "client/styles";
7 |
8 | export type TextFieldProps = {
9 | name: string;
10 | translation?: I18nProps;
11 | } & FieldAttributes<{}>;
12 | /** A thin wrapper around Material UI TextField supporting Formik and translations. */
13 | export const TextField: React.SFC = props => {
14 | const i18n = useTranslator();
15 | const classes = useStyles();
16 |
17 | return (
18 |
24 | );
25 | };
26 |
27 | const useStyles = makeStyles(theme => ({
28 | alignCenter: {
29 | justifyContent: "center",
30 | },
31 | }));
32 |
--------------------------------------------------------------------------------
/modules/client/components/form/time-select.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | FormControl,
3 | InputLabel,
4 | MenuItem,
5 | Select,
6 | Grid,
7 | FormHelperText,
8 | } from "@material-ui/core";
9 | import { I18nProps, useTranslator } from "client/translations";
10 | import * as TimeIso from "core/time-iso";
11 | import { range } from "lodash-es";
12 | import * as React from "react";
13 | import { Field } from "formik";
14 | import { SelectProps } from "@material-ui/core/Select";
15 | import { makeStyles } from "client/styles";
16 |
17 | export type TimeSelectProps = {
18 | translation: I18nProps;
19 | field: {
20 | name: string;
21 | value: TimeIso.Type;
22 | onChange: (e: React.ChangeEvent) => void;
23 | };
24 | form: any;
25 | } & SelectProps;
26 |
27 | /** A select box wrapper with an hour field and a minute field */
28 | const TimeSelectUI: React.SFC = props => {
29 | const i18n = useTranslator();
30 | const classes = useStyles();
31 |
32 | const nullTimes = !props.field.value;
33 |
34 | const date = TimeIso.parse(props.field.value);
35 | const minute = date.getMinutes();
36 | const hour = date.getHours();
37 |
38 | const handleHoursChange = React.useCallback(
39 | (event: any) => {
40 | const updatedTime = TimeIso.from(event.target.value, minute);
41 | props.form.setFieldValue(props.field.name, updatedTime);
42 | },
43 | [props.field.name, minute]
44 | );
45 |
46 | const handleMinutesChange = React.useCallback(
47 | (event: any) => {
48 | const updatedTime = TimeIso.from(hour, event.target.value);
49 | props.form.setFieldValue(props.field.name, updatedTime);
50 | },
51 | [props.field.name, hour]
52 | );
53 |
54 | const hours1 = range(1, 10);
55 | const hours2 = range(10, 25);
56 | const minutes1 = range(0, 10);
57 | const minutes2 = range(10, 60);
58 |
59 | return React.useMemo(() => {
60 | return (
61 |
62 |
63 |
64 |
68 | {i18n(props.translation)}
69 |
70 |
90 |
106 |
107 |
108 | {props.form.errors[props.field.name]}
109 |
110 | );
111 | }, [minute, hour, props.form.errors[props.field.name]]);
112 | };
113 |
114 | export const TimeSelect: React.SFC<
115 | {
116 | name: string;
117 | translation: I18nProps;
118 | } & SelectProps
119 | > = props => {
120 | return ;
121 | };
122 |
123 | const useStyles = makeStyles(theme => ({
124 | readOnly: {
125 | pointerEvents: "none" as "none",
126 | },
127 | }));
128 |
--------------------------------------------------------------------------------
/modules/client/components/loading-dialog/index.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | CircularProgress,
3 | Dialog,
4 | DialogContent,
5 | DialogTitle,
6 | Grid,
7 | } from "@material-ui/core";
8 | import * as React from "react";
9 | import { Copy } from "../copy";
10 | import { makeStyles } from "client/styles";
11 | import { DialogProps } from "@material-ui/core/Dialog";
12 |
13 | export interface Props extends DialogProps {
14 | header?: JSX.Element;
15 | }
16 |
17 | export const LoadingDialog = React.memo(function LoadingDialog(
18 | props: Props
19 | ) {
20 | const classes = useStyles();
21 | return (
22 |
45 | );
46 | });
47 |
48 | const useStyles = makeStyles(theme => ({
49 | header: {
50 | fontSize: theme.typography.pxToRem(20),
51 | },
52 | }));
53 |
--------------------------------------------------------------------------------
/modules/client/components/loading-dialog/loading-dialog.stories.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { storiesOf } from "@storybook/react";
3 | import { LoadingDialog } from ".";
4 |
5 | storiesOf("Components/Loading Dialog", module).add(
6 | "Default loading",
7 | () => {
8 | return ;
9 | }
10 | ).add(
11 | "Loading with custom header",
12 | () => {
13 | return This is a custom header} />;
14 | }
15 | );
16 |
--------------------------------------------------------------------------------
/modules/client/components/section-provider/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { Section } from "client/core";
3 |
4 | export const SectionContext = React.createContext({
5 | selected: null as Section,
6 | setSelected: (url: Section) => {},
7 | });
8 |
9 | export const SectionProvider = SectionContext.Provider;
10 |
11 | export interface Props {
12 | selected: Section;
13 | }
14 |
15 | export function ActivatedSection(props: Props) {
16 | const context = React.useContext(SectionContext);
17 | React.useEffect(() => {
18 | context.setSelected(props.selected);
19 | return () => {};
20 | }, []);
21 | return null;
22 | }
23 |
--------------------------------------------------------------------------------
/modules/client/core/index.tsx:
--------------------------------------------------------------------------------
1 | export type Section = null; // | Section1 | Section2...
2 |
--------------------------------------------------------------------------------
/modules/client/en-US.json:
--------------------------------------------------------------------------------
1 | {
2 | "core": {
3 | "loading": "Loading...",
4 | "cancel": "Cancel",
5 | "accept": "Accept",
6 | "getMeOutOfHere": "Get me out of here!",
7 | "somethingWentWrong": "Something went wrong.",
8 | "takeMeBack": "Take me back!",
9 | "404NotFound": "404 Not Found",
10 | "contactUsAt": "Contact us at {email}",
11 | "unknownUser": "Unknown User"
12 | },
13 | "header": {
14 | "productTitle": "My App"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/modules/client/express.d.ts:
--------------------------------------------------------------------------------
1 | export declare global {
2 | namespace Express {
3 | interface Request {
4 | context?: Context;
5 | }
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/modules/client/ga.d.ts:
--------------------------------------------------------------------------------
1 | export declare global {
2 | interface Window {
3 | ga: any;
4 | }
5 | }
--------------------------------------------------------------------------------
/modules/client/graphql-types.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable */
2 | // This file was automatically generated and should not be edited.
3 |
4 | // ====================================================
5 | // GraphQL query operation: Foo
6 | // ====================================================
7 |
8 | /* tslint:disable */
9 | // This file was automatically generated and should not be edited.
10 |
11 | //==============================================================
12 | // START Enums and Input Objects
13 | //==============================================================
14 |
15 | //==============================================================
16 | // END Enums and Input Objects
17 | //==============================================================
18 |
--------------------------------------------------------------------------------
/modules/client/graphql/__tests__/local-date.test.ts:
--------------------------------------------------------------------------------
1 | import { withContext } from "__tests__/db-helpers";
2 | import { LocalDate } from "../types.gen";
3 | import * as DateIso from "core/date-iso";
4 | import { dateIso } from "core/date-iso";
5 |
6 | describe("LocalDate", () => {
7 | it(
8 | "gets the local date when run LocalDate query",
9 | withContext({
10 | initialState: { localDate: dateIso`1970-01-01` },
11 |
12 | async run(ctx) {
13 | let queryResult = await ctx.apolloClient.query({
14 | query: LocalDate.Document,
15 | fetchPolicy: "no-cache",
16 | });
17 |
18 | const todayDate = DateIso.toIsoDate(new Date());
19 |
20 | expect(queryResult.data!.localDate).toBe(todayDate);
21 | },
22 | })
23 | );
24 | });
25 |
--------------------------------------------------------------------------------
/modules/client/graphql/__tests__/local-name.test.ts:
--------------------------------------------------------------------------------
1 | import { withContext } from "__tests__/db-helpers";
2 | import { GetLocalName, ChangeLocalName } from "../types.gen";
3 |
4 | describe("GetLocalName and ChangeLocalName", () => {
5 | it(
6 | "updates the local name when we run the ChangeLocalName mutation",
7 | withContext({
8 | initialState: { localName: "foo" },
9 |
10 | async run(ctx) {
11 | let queryResult = await ctx.apolloClient.query({
12 | query: GetLocalName.Document,
13 | });
14 |
15 | expect(queryResult.data!.client).toEqual("foo");
16 |
17 | const mutationResult = await ctx.apolloClient.mutate<
18 | ChangeLocalName.Mutation,
19 | ChangeLocalName.Variables
20 | >({
21 | mutation: ChangeLocalName.Document,
22 | });
23 |
24 | expect(mutationResult.data!.setLocalName).toEqual("Foo");
25 |
26 | queryResult = await ctx.apolloClient.query({
27 | query: GetLocalName.Document,
28 | });
29 |
30 | expect(queryResult.data!.client).toEqual("Foo");
31 | },
32 | })
33 | );
34 | });
35 |
--------------------------------------------------------------------------------
/modules/client/graphql/client-context.ts:
--------------------------------------------------------------------------------
1 | import { ApolloCache } from "apollo-cache";
2 | export interface ClientContext {
3 | cache: ApolloCache;
4 | }
5 |
--------------------------------------------------------------------------------
/modules/client/graphql/client.ts:
--------------------------------------------------------------------------------
1 | import { InMemoryCache, NormalizedCacheObject } from "apollo-cache-inmemory";
2 | import ApolloClient from "apollo-client";
3 | import { ApolloLink } from "apollo-link";
4 | import { BatchHttpLink } from "apollo-link-batch-http";
5 | import { History } from "history";
6 | import { buildErrorLink } from "./error-link";
7 | import { buildClientLink } from "./state-link";
8 |
9 | const cache = new InMemoryCache();
10 |
11 | const stateLink = buildClientLink(cache);
12 |
13 | export function buildGraphqlClient(
14 | history: History
15 | ): ApolloClient {
16 | const errorLink = buildErrorLink(history);
17 | return new ApolloClient({
18 | cache: cache,
19 | link: ApolloLink.from([
20 | errorLink,
21 | stateLink,
22 | new BatchHttpLink({
23 | uri: "/graphql",
24 | batchInterval: 10,
25 | credentials: "same-origin",
26 | }),
27 | ]),
28 | defaultOptions: {
29 | watchQuery: {
30 | // this governs the default fetch policy for react-apollo-hooks' useQuery():
31 | fetchPolicy: "cache-and-network",
32 | },
33 | },
34 | });
35 | }
36 |
--------------------------------------------------------------------------------
/modules/client/graphql/core.ts:
--------------------------------------------------------------------------------
1 | import { DocumentNode } from "graphql";
2 |
3 | export type GraphqlBundle = {
4 | _variables: TVars;
5 | _result: TResult;
6 | Document: DocumentNode;
7 | };
8 |
--------------------------------------------------------------------------------
/modules/client/graphql/error-link.ts:
--------------------------------------------------------------------------------
1 | import { ApolloLink } from "apollo-link";
2 | import { onError } from "apollo-link-error";
3 | import { History } from "history";
4 |
5 | export function buildErrorLink(history: History): ApolloLink {
6 | return onError(({ graphQLErrors, networkError }) => {
7 | console.log("graphql error", graphQLErrors);
8 | console.log("network error", networkError);
9 | if (networkError) {
10 | if ((networkError as any).statusCode === 403) {
11 | window.location.assign("/auth/login");
12 | } else {
13 | history.push("/error");
14 | }
15 | return;
16 | }
17 |
18 | if (graphQLErrors) {
19 | graphQLErrors.forEach(({ message, locations, path }) => {
20 | console.log(
21 | `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
22 | );
23 | });
24 | history.push("/error");
25 | }
26 | });
27 | }
28 |
--------------------------------------------------------------------------------
/modules/client/graphql/fragments/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atomicobject/ts-react-graphql-starter-kit/802d1a25533858085a8f95d8eff5c05826f65a9a/modules/client/graphql/fragments/.gitkeep
--------------------------------------------------------------------------------
/modules/client/graphql/fragments/UserInfo.graphql:
--------------------------------------------------------------------------------
1 | fragment UserInfo on User {
2 | firstName
3 | lastName
4 | }
5 |
--------------------------------------------------------------------------------
/modules/client/graphql/hooks.ts:
--------------------------------------------------------------------------------
1 | import * as ApolloHooks from "react-apollo-hooks";
2 | import { GraphqlBundle } from "./core";
3 | import {
4 | ApolloQueryResult,
5 | ObservableQuery,
6 | FetchMoreQueryOptions,
7 | FetchMoreOptions,
8 | } from "apollo-client";
9 | import { useMemo } from "react";
10 | import { MutationFn } from "react-apollo";
11 | import { Omit } from "helpers";
12 |
13 | type NonOptional = O extends null | undefined | (infer T) ? T : O;
14 |
15 | /** Extra query stuff we get from apollo hooks. */
16 | type QueryExtras = Pick<
17 | ObservableQuery,
18 | "refetch" | "startPolling" | "stopPolling" | "updateQuery"
19 | > & {
20 | fetchMore(
21 | fetchMoreOptions: FetchMoreQueryOptions &
22 | FetchMoreOptions
23 | ): Promise>;
24 | };
25 |
26 | type QueryBaseResult = Omit<
27 | ApolloHooks.QueryHookResult,
28 | "data"
29 | > & {
30 | data: TData;
31 | } & QueryExtras;
32 |
33 | export type PlacementQueryHookResult =
34 | // Initial loading state. No data to show
35 | | { state: "LOADING" } & QueryExtras
36 | // Updating, but we have data to show. Usually render this.
37 | | { state: "UPDATING" } & QueryBaseResult
38 | // Loaded. We have data to show
39 | | { state: "DONE" } & QueryBaseResult;
40 |
41 | export function useQueryBundle(
42 | query: GraphqlBundle,
43 | options?: ApolloHooks.QueryHookOptions
44 | ): PlacementQueryHookResult {
45 | const rawResult = ApolloHooks.useQuery(query.Document, {
46 | suspend: false,
47 | ...options,
48 | });
49 |
50 | const ourResult = useMemo>((): any => {
51 | if (!rawResult.data || Object.keys(rawResult.data).length == 0) {
52 | return { state: "LOADING", ...rawResult };
53 | } else if (rawResult.loading) {
54 | return { state: "UPDATING", ...rawResult };
55 | } else {
56 | return { state: "DONE", ...rawResult };
57 | }
58 | }, [rawResult]);
59 |
60 | return ourResult;
61 | }
62 |
63 | export function useMutationBundle(
64 | mutation: GraphqlBundle,
65 | options?: ApolloHooks.MutationHookOptions
66 | ): MutationFn {
67 | const func = ApolloHooks.useMutation(
68 | mutation.Document,
69 | options
70 | ) as MutationFn; // using the type from react-apollo instead of react-apollo-hooks for better compatibility with remaining non-hook apollo use. (change this later?)
71 | return func;
72 | }
73 |
--------------------------------------------------------------------------------
/modules/client/graphql/mutations/ChangeLocalName.graphql:
--------------------------------------------------------------------------------
1 | mutation ChangeLocalName {
2 | setLocalName(newName: "Foo") @client
3 | }
4 |
--------------------------------------------------------------------------------
/modules/client/graphql/queries/GetLocalName.graphql:
--------------------------------------------------------------------------------
1 | query GetLocalName {
2 | client: localName @client
3 | }
4 |
--------------------------------------------------------------------------------
/modules/client/graphql/queries/GetLoggedInUser.graphql:
--------------------------------------------------------------------------------
1 | query GetLoggedInUser {
2 | loggedInUser {
3 | id
4 | firstName
5 | lastName
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/modules/client/graphql/queries/LocalDate.graphql:
--------------------------------------------------------------------------------
1 | query LocalDate {
2 | localDate: localDate @client
3 | }
4 |
--------------------------------------------------------------------------------
/modules/client/graphql/resolvers/index.ts:
--------------------------------------------------------------------------------
1 | import Mutation from "./mutation";
2 | import Query from "./query";
3 |
4 | export const ClientSideResolvers = {
5 | Mutation,
6 | Query,
7 | };
8 |
--------------------------------------------------------------------------------
/modules/client/graphql/resolvers/mutation.ts:
--------------------------------------------------------------------------------
1 | import { MutationResolvers } from "../client-types.gen";
2 |
3 | const setLocalName: MutationResolvers.SetLocalNameResolver = async function(
4 | parent,
5 | args,
6 | context,
7 | info
8 | ) {
9 | context.cache.writeData({ data: { localName: args.newName } });
10 | return args.newName;
11 | };
12 |
13 | export default {
14 | setLocalName,
15 | };
16 |
--------------------------------------------------------------------------------
/modules/client/graphql/resolvers/query.ts:
--------------------------------------------------------------------------------
1 | import { QueryResolvers } from "../client-types.gen";
2 | import { ApolloCache } from "apollo-cache";
3 | import * as DateIso from "core/date-iso";
4 |
5 | const localDate: QueryResolvers.LocalDateResolver<
6 | DateIso.Type
7 | > = async function(parent, args, context, info) {
8 | return DateIso.toIsoDate(new Date());
9 | };
10 |
11 | export default {
12 | localDate,
13 | };
14 |
--------------------------------------------------------------------------------
/modules/client/graphql/schema.graphql:
--------------------------------------------------------------------------------
1 | scalar IsoDate
2 | scalar IsoTime
3 |
4 | type Query {
5 | localName: String!
6 | localDate: IsoDate!
7 | }
8 |
9 | type Mutation {
10 | # TODO: delete me:
11 | setLocalName(newName: String!): String!
12 | }
13 |
--------------------------------------------------------------------------------
/modules/client/graphql/state-link.ts:
--------------------------------------------------------------------------------
1 | import { ApolloCache } from "apollo-cache";
2 | import { withClientState } from "apollo-link-state";
3 | import { ClientSideResolvers } from "./resolvers";
4 | import { ApolloLink } from "apollo-link";
5 |
6 | import { Query as ClientSideQuery } from "./types.gen";
7 | import { Query as ServerSideQuery } from "graphql-api/server-types.gen";
8 | import * as DateIso from "core/date-iso";
9 | type ClientSideProps = Exclude;
10 |
11 | export type ClientState = Pick;
12 |
13 | export const DEFAULTS: ClientState = {
14 | localName: "friend",
15 | localDate: DateIso.toIsoDate(new Date()),
16 | };
17 |
18 | export function buildClientLink(
19 | cache: ApolloCache,
20 | defaults: ClientState = DEFAULTS
21 | ): ApolloLink {
22 | const link = withClientState({
23 | cache,
24 | resolvers: ClientSideResolvers,
25 | defaults: defaults,
26 | });
27 | return link;
28 | }
29 |
--------------------------------------------------------------------------------
/modules/client/index.tsx:
--------------------------------------------------------------------------------
1 | import { AppShell } from "client/components/app";
2 | import * as React from "react";
3 | import { asyncComponent } from "react-async-component";
4 | import { Route, Switch } from "react-router-dom";
5 | import { AppHeader } from "./components/app-header";
6 | import { ErrorBoundary } from "./components/error-boundary";
7 | import {
8 | NotFoundErrorPageRouteLoader,
9 | ServerErrorPageRouteLoader,
10 | UnknownUserErrorPageRouteLoader,
11 | } from "./pages/error/error-loaders";
12 | import * as AuthRoutes from "./routes/authentication-routes";
13 | /** Build the core app store with middlewares and reducer. Used to bootstrap the app to run and to test. */
14 |
15 | export function App(props: {}) {
16 | return (
17 |
18 |
19 |
20 |
25 |
26 |
27 |
28 |
29 | );
30 | }
31 |
32 | /*
33 | Most routes in the app should live here.
34 | Currently, the only routes without a header are the routes that need to be rendered without making graphql requests.
35 | RoutesWithHeader will either match with one of the routes in our app or return an 404 not found page.
36 | */
37 | function RoutesWithHeader() {
38 | return (
39 | <>
40 |
41 |
42 | (await import("client/pages/home")).HomePage,
47 | name: "Home Page",
48 | })}
49 | />
50 |
51 |
52 |
53 |
54 | );
55 | }
56 |
--------------------------------------------------------------------------------
/modules/client/material-ui-core-styles-create-mui-theme.d.ts:
--------------------------------------------------------------------------------
1 | import { Theme } from "@material-ui/core/styles/createMuiTheme";
2 |
3 | declare module "@material-ui/core/styles/createMuiTheme" {
4 | export interface Theme {
5 | customColors: {
6 | white: string;
7 | grayWhite: string;
8 | black: string;
9 | blue: string;
10 | darkBlue: string;
11 | gray: string;
12 | darkGray: string;
13 | medLightGray: string;
14 | lightGray: string;
15 |
16 | raspberry: string;
17 | pumpkin: string;
18 | mustard: string;
19 | ocean: string;
20 | grape: string;
21 | twilight: string;
22 | sky: string;
23 | slate: string;
24 | tomato: string;
25 | grass: string;
26 |
27 | lightTomato: string;
28 | lightRaspberry: string;
29 | lightPumpkin: string;
30 | lightMustard: string;
31 | lightOcean: string;
32 | lightGrape: string;
33 | lightTwilight: string;
34 | lightSlate: string;
35 | };
36 | }
37 | // allow configuration using `createMuiTheme`
38 | export interface ThemeOptions {
39 | customColors?: {
40 | white?: string;
41 | grayWhite?: string;
42 | black?: string;
43 | blue?: string;
44 | darkBlue?: string;
45 | gray?: string;
46 | darkGray?: string;
47 | medLightGray?: string;
48 | lightGray?: string;
49 | raspberry?: string;
50 | pumpkin?: string;
51 | mustard?: string;
52 | ocean?: string;
53 | grape?: string;
54 | twilight?: string;
55 | sky?: string;
56 | slate?: string;
57 | tomato?: string;
58 | grass?: string;
59 |
60 | lightTomato?: string;
61 | lightRaspberry?: string;
62 | lightMustard?: string;
63 | lightOcean?: string;
64 | lightGrape?: string;
65 | lightTwilight?: string;
66 | lightSlate?: string;
67 | };
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/modules/client/material-ui-styles.d.ts:
--------------------------------------------------------------------------------
1 | declare module "@material-ui/styles" {
2 | function install();
3 | declare const ThemeProvider: React.ComponentType<{ theme: Theme }>;
4 | }
5 |
6 | declare module "@material-ui/core/useMediaQuery" {
7 | export interface Options {
8 | defaultMatches?: boolean;
9 | matchMedia?: (query: string) => MuiMediaQueryList;
10 | }
11 | declare function unstable_useMediaQuery(
12 | query: string,
13 | options?: Options
14 | ): boolean;
15 | }
16 |
--------------------------------------------------------------------------------
/modules/client/pages/error/error-loaders.tsx:
--------------------------------------------------------------------------------
1 | import { asyncComponent } from "react-async-component";
2 | import * as React from "react";
3 | import { ErrorComponent } from "client/components/error";
4 |
5 | export const NotFoundErrorPageRouteLoader = asyncComponent({
6 | resolve: async () => {
7 | return () => ;
8 | },
9 | name: "NotFoundErrorPage",
10 | });
11 | export const ServerErrorPageRouteLoader = asyncComponent({
12 | resolve: async () => {
13 | return () => ;
14 | },
15 | name: "ServerErrorPage",
16 | });
17 | export const UnknownUserErrorPageRouteLoader = asyncComponent({
18 | resolve: async () => {
19 | return () => ;
20 | },
21 | name: "UnknownUserErrorPage",
22 | });
23 |
--------------------------------------------------------------------------------
/modules/client/pages/home/__tests__/home-page.test.tsx:
--------------------------------------------------------------------------------
1 | import { HomePage } from "client/pages/home";
2 | import { mockProvider } from "client/test-helpers/mock-provider";
3 | import { mount } from "enzyme";
4 | import { sleep } from "helpers";
5 | import * as React from "react";
6 |
7 | describe("Home page", () => {
8 | it("Begins in a loading state", async () => {
9 | const Provider = mockProvider({
10 | mocks: {
11 | Query: () => ({
12 | localName: () => "Liz",
13 | testFirstEmployee: () => ({ id: 1 }),
14 | testFirstSubstitute: () => ({ id: 1 }),
15 | }),
16 | },
17 | });
18 |
19 | const page = mount(
20 |
21 |
22 |
23 | );
24 |
25 | await sleep(0);
26 | page.update();
27 |
28 | expect(page.text()).toContain("This page will eventually be replaced");
29 | });
30 | });
31 |
--------------------------------------------------------------------------------
/modules/client/pages/home/home-page-ui.stories.tsx:
--------------------------------------------------------------------------------
1 | import { storiesOf } from "@storybook/react";
2 | import * as React from "react";
3 | import { HomePageUI } from "./home-page-ui";
4 | import { mockProvider } from "client/test-helpers/mock-provider";
5 |
6 | storiesOf("Page – Home", module).add("Example", () => {
7 | const Provider = mockProvider({});
8 | return (
9 |
10 |
11 |
12 | );
13 | });
14 |
--------------------------------------------------------------------------------
/modules/client/pages/home/home-page-ui.tsx:
--------------------------------------------------------------------------------
1 | import { Grid, Paper, Typography } from "@material-ui/core";
2 | import { ButtonLink } from "client/components/button-link";
3 | import { makeStyles } from "client/styles";
4 | import * as React from "react";
5 |
6 | export interface HomePageUIProps {
7 | name: string;
8 | currentCount: number;
9 | onClick?: () => void;
10 | }
11 |
12 | export function HomePageUI(props: HomePageUIProps) {
13 | const [resetting, setResetting] = React.useState(false);
14 | const classes = useStyles();
15 |
16 | return (
17 | <>
18 |
19 |
20 |
21 | This page will eventually be replaced.
22 | See these links:
23 |
24 | -
25 | Error Page
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | );
34 | }
35 |
36 | const useStyles = makeStyles(theme => ({
37 | paper: {
38 | padding: theme.spacing.unit * 2,
39 | margin: theme.spacing.unit * 2,
40 | },
41 | }));
42 |
--------------------------------------------------------------------------------
/modules/client/pages/home/index.tsx:
--------------------------------------------------------------------------------
1 | import { HomePageUI } from "client/pages/home/home-page-ui";
2 | import * as React from "react";
3 |
4 | const HomePageWithClick: React.SFC<{
5 | name: string;
6 | }> = props => {
7 | const [count, setCount] = React.useState(0);
8 |
9 | const { name } = props;
10 |
11 | const handleButtonClick = () => {
12 | setCount(count + 1);
13 | };
14 |
15 | return (
16 |
17 | );
18 | };
19 |
20 | /** TODO: Wrap with higher-order-components */
21 | export const HomePage: React.SFC<{}> = () => {
22 | return ;
23 | };
24 |
--------------------------------------------------------------------------------
/modules/client/react.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | declare module "react" {
4 | // React 16.6
5 |
6 | function memo(
7 | component: React.StatelessComponent
8 | ): React.StatelessComponent;
9 |
10 | function lazy>(
11 | importFn: () => Promise
12 | ): Component;
13 |
14 | const Suspense: React.ComponentType<{ fallback?: React.ReactNode }>;
15 |
16 | function useDebugValue(debugValue: any): void;
17 |
18 | // React 16.7
19 |
20 | type StateUpdateFunction = (
21 | newState: State | ((oldState: State) => State)
22 | ) => void;
23 |
24 | function useState(
25 | initialState: State | (() => State)
26 | ): [State, StateUpdateFunction];
27 |
28 | function useEffect(
29 | f: () => void | Promise | (() => void | Promise),
30 | keys?: any[]
31 | ): void;
32 | function useMutationEffect(
33 | f: () => void | Promise | (() => void | Promise),
34 | keys?: any[]
35 | ): void;
36 | function useLayoutEffect(
37 | f: () => void | Promise | (() => void | Promise),
38 | keys?: any[]
39 | ): void;
40 |
41 | function useContext(context: React.Context): Context;
42 |
43 | type Reducer = (state: State, action: Action) => State;
44 | function useReducer(
45 | reducer: Reducer,
46 | initialState: State,
47 | initialAction?: Action
48 | ): [State, (action: Action) => void];
49 |
50 | function useCallback(
51 | f: Callback,
52 | keys?: any[]
53 | ): Callback;
54 | function useMemo(f: () => Value, keys?: any[]): Value;
55 |
56 | function useRef(): { current: T | null };
57 | function useRef(initial: T): { current: T };
58 |
59 | function useImperativeMethods(
60 | ref: React.Ref[ | undefined,
61 | f: () => ImperativeMethods,
62 | keys?: any[]
63 | ): void;
64 | }
65 |
--------------------------------------------------------------------------------
/modules/client/routes/authentication-routes.tsx:
--------------------------------------------------------------------------------
1 | export const LOGIN = "/auth/login";
2 | export const LOGOUT = "/auth/logout";
3 | export const DEVELOPMENT_LOGIN = "/auth/development-login";
4 | export const DEVELOPMENT_LOGOUT = "/auth/development-logout";
5 | export const SAML_CALLBACK = "/auth/saml-callback";
6 | export const SAML_LOGOUT_CALLBACK = "/auth/saml-logout-callback";
7 | export const USER_NOT_FOUND = "/auth/user-not-found";
8 |
--------------------------------------------------------------------------------
/modules/client/stories.ts:
--------------------------------------------------------------------------------
1 | import { addDecorator } from "@storybook/react";
2 | import "./components/button-link/button-link-stories";
3 | import "./components/error/error.stories";
4 | import "./components/error-boundary/error-boundary.stories";
5 | import "./components/loading-dialog/loading-dialog.stories.tsx";
6 | import "./pages/home/home-page-ui.stories";
7 | import { withI18n } from "./storybook-decorators";
8 |
9 | // Fill in type definition for info addon
10 | declare module "@storybook/react" {
11 | interface Story {
12 | addWithInfo(
13 | storyName: string,
14 | storyDesc: string,
15 | story: RenderFunction
16 | ): Story;
17 | }
18 | }
19 |
20 | addDecorator(withI18n);
21 |
--------------------------------------------------------------------------------
/modules/client/storybook-addon-viewport.d.ts:
--------------------------------------------------------------------------------
1 | declare module "@storybook/addon-viewport" {
2 | const viewPortTypes =
3 | string |
4 | {
5 | onViewportChange({}) {},
6 | };
7 | function withViewport(param?: viewPortTypes): StorybookDecorator;
8 |
9 | type ViewportKeys =
10 | | "responsive"
11 | | "iphone5"
12 | | "iphone6"
13 | | "iphone6p"
14 | | "iphone8p"
15 | | "iphonex"
16 | | "iphonexr"
17 | | "iphonexsmax"
18 | | "ipad"
19 | | "ipad10p"
20 | | "ipad12p"
21 | | "galaxys5"
22 | | "galaxys9"
23 | | "nexus5x"
24 | | "nexus6p"
25 | | "pixel"
26 | | "pixelxl";
27 |
28 | const INITIAL_VIEWPORTS: {
29 | [k in ViewportKeys]: {
30 | name: string;
31 | styles: any;
32 | type: "desktop" | "mobile";
33 | }
34 | };
35 | }
36 |
--------------------------------------------------------------------------------
/modules/client/storybook-decorators.tsx:
--------------------------------------------------------------------------------
1 | import { MuiThemeProvider } from "@material-ui/core";
2 | import { ThemeProvider } from "@material-ui/styles";
3 | import { StoryDecorator } from "@storybook/react";
4 | import { ENGLISH, TranslationProvider } from "client/translations";
5 | import * as React from "react";
6 | import { BrowserRouter } from "react-router-dom";
7 | import { PlacementTheme } from "./styles/mui-theme";
8 |
9 | export const withTheme: StoryDecorator = s => (
10 |
11 | {s()}
12 |
13 | );
14 |
15 | export const withI18n: StoryDecorator = s => (
16 | {s()}
17 | );
18 |
--------------------------------------------------------------------------------
/modules/client/styles/index.tsx:
--------------------------------------------------------------------------------
1 | import { Theme } from "@material-ui/core";
2 | import * as MUIStyles from "@material-ui/styles";
3 | import { CSSProperties } from "jss/css";
4 | import { WithStylesOptions } from "@material-ui/styles/withStyles";
5 |
6 | /*
7 |
8 | I have some problems with material-ui's types for their styles library.
9 |
10 | 1. I want to patch it to force use of our custom theme type
11 | 2. Their type definitions force your code to provide an empty object to
12 | useStyles in cases where you have no props. E.g., useStyles({});
13 | 3. Their types let too many anys through, so TypeScript can't check your
14 | CSS properties as thoroughly.
15 |
16 | To address these issues, I've defined our own makeStyles() hook here.
17 |
18 | */
19 |
20 | export type StyleRules<
21 | Props extends object | void,
22 | ClassKey extends string = string
23 | > = Record CSSProperties)>;
24 |
25 | export type StyleRulesCallback<
26 | Props extends object | void,
27 | ClassKey extends string = string
28 | > = (theme: Theme) => StyleRules;
29 |
30 | export type StyleSheet =
31 | | StyleRules
32 | | StyleRulesCallback;
33 |
34 | export type StyleRulesWithProps = Record<
35 | ClassNames,
36 | ((p: Props) => CSSProperties) | CSSProperties
37 | >;
38 |
39 | export type StyleRulesCallbackWithProps = (
40 | theme: Theme
41 | ) => StyleRulesWithProps;
42 |
43 | export type StyleSheetWithProps =
44 | | StyleRulesWithProps
45 | | StyleRulesCallbackWithProps;
46 |
47 | export function makeStyles(
48 | styles: StyleSheet,
49 | options?: WithStylesOptions
50 | ): () => { [k in ClassKeys]: string };
51 |
52 | export function makeStyles(
53 | styles: StyleSheetWithProps,
54 | options?: WithStylesOptions
55 | ): (props: Props) => { [k in ClassKeys]: string };
56 |
57 | export function makeStyles(s: any, t: any): any {
58 | /*
59 | Jest tests use jsdom internally, which has a weak CSS parser that can choke
60 | on modern CSS features. In particular we ran into this with media queries:
61 |
62 | > Error: Could not parse CSS stylesheet
63 |
64 | https://github.com/jsdom/jsdom/issues/2177
65 |
66 | So, for now, we're withholding component styles when under test.
67 | */
68 | let maybeStyles = __TEST__ ? {} : s;
69 | return MUIStyles.makeStyles(maybeStyles, t) as any;
70 | }
71 |
--------------------------------------------------------------------------------
/modules/client/styles/mui-theme.tsx:
--------------------------------------------------------------------------------
1 | import createBreakpoints, {
2 | BreakpointsOptions,
3 | } from "@material-ui/core/styles/createBreakpoints";
4 | import createMuiTheme, { Theme } from "@material-ui/core/styles/createMuiTheme";
5 |
6 | /*
7 | Material-UI's interface for defining the theme is imperfect.
8 | Specifically, it makes it difficult for a theme definition to reference itself
9 | to avoid repetition.
10 |
11 | I've worked around this for now by breaking definitions out into constants and
12 | copying some of the internals of createMuiTheme out into this file.
13 | (Such as pxToRem)
14 |
15 | Nothing from this file should be exported except PlacementTheme.
16 | */
17 |
18 | /** do not export this */
19 | const pxToRem = (size: number) => {
20 | const coeff = baseFontSize / 14;
21 | return `${(size / htmlFontSize) * coeff}rem`;
22 | };
23 |
24 | const smallFontSize = 12;
25 | const baseFontSize = 14;
26 | const htmlFontSize = 16;
27 | const fontWeightMedium = 500;
28 |
29 | const themeColors: Theme["customColors"] = {
30 | white: "#ffffff",
31 | grayWhite: "f7f7f7",
32 | black: "#262c36",
33 | blue: "#378ff6",
34 | darkBlue: "#031F3C",
35 | gray: "#b4b6b9",
36 | darkGray: "#6f6f6f",
37 | medLightGray: "#d8d8d8",
38 | lightGray: "#f4f4f4",
39 |
40 | raspberry: "#CC0079",
41 | pumpkin: "#E96B1C",
42 | mustard: "#CFAA2A",
43 | ocean: "#03A8A4",
44 | grape: "#B80FD5",
45 | twilight: "#37068F",
46 | sky: "#03a9f4",
47 | slate: "#6d6d6d",
48 | tomato: "#eb2626",
49 | grass: "#4caf50",
50 |
51 | lightTomato: "#FDE9E9",
52 | lightRaspberry: "#F9E5F1",
53 | lightPumpkin: "#FCF0E8",
54 | lightMustard: "#FAF6E9",
55 | lightOcean: "#E5F6F5",
56 | lightGrape: "#F7E7FA",
57 | lightTwilight: "#EAE6F3",
58 | lightSlate: "#F0F0F0",
59 | };
60 | const breakpointCustomization: BreakpointsOptions = {};
61 | const breakpoints = createBreakpoints(breakpointCustomization);
62 |
63 | export const PlacementTheme = createMuiTheme({
64 | breakpoints: breakpointCustomization,
65 | overrides: {
66 | MuiButton: {
67 | contained: {
68 | color: themeColors.white,
69 | backgroundColor: themeColors.sky,
70 | },
71 | outlined: {
72 | borderColor: themeColors.sky,
73 | borderWidth: pxToRem(2),
74 | },
75 | },
76 | MuiDialog: {
77 | paper: {
78 | [breakpoints.down("xs")]: {
79 | margin: pxToRem(20),
80 | },
81 | },
82 | },
83 | MuiDialogTitle: {
84 | root: {
85 | [breakpoints.down("xs")]: {
86 | paddingTop: pxToRem(13),
87 | paddingBottom: pxToRem(10),
88 | },
89 | },
90 | },
91 | MuiDialogActions: {
92 | root: {
93 | paddingRight: pxToRem(4),
94 | },
95 | action: {
96 | // Style the typography inside of the MuiDialogAction component
97 | "& p": {
98 | fontWeight: fontWeightMedium,
99 | textTransform: "uppercase" as "uppercase",
100 | [breakpoints.down("xs")]: {
101 | fontSize: pxToRem(smallFontSize),
102 | },
103 | },
104 | },
105 | },
106 | MuiTableCell: {
107 | root: {
108 | borderBottom: `${pxToRem(2)} solid ${themeColors.black}`,
109 | },
110 | },
111 | MuiTooltip: {
112 | popper: {
113 | opacity: 1,
114 | },
115 | tooltip: {
116 | backgroundColor: themeColors.white,
117 | color: themeColors.black,
118 | },
119 | },
120 | },
121 | palette: {
122 | primary: {
123 | main: "#123f6e",
124 | },
125 | },
126 | customColors: {
127 | ...themeColors,
128 | },
129 | typography: palette => ({
130 | color: themeColors.black,
131 | useNextVariants: true,
132 | fontSize: baseFontSize,
133 | htmlFontSize: htmlFontSize,
134 | button: {
135 | fontSize: pxToRem(16),
136 | fontWeight: fontWeightMedium,
137 | color: palette.common.white,
138 | textTransform: "none",
139 | [breakpoints.down("xs") as any]: {
140 | fontSize: pxToRem(12),
141 | },
142 | },
143 | }),
144 | });
145 |
--------------------------------------------------------------------------------
/modules/client/translations.ts:
--------------------------------------------------------------------------------
1 | import { I18nProfile, MapOf, PropsOf } from "atomic-object/i18n";
2 | import { buildComponents } from "atomic-object/i18n/component";
3 |
4 | export const I18n = I18nProfile.with("header.productTitle")
5 | .with("core.cancel")
6 | .with("core.accept")
7 | .with("core.loading")
8 | .with("core.getMeOutOfHere")
9 | .with("core.somethingWentWrong")
10 | .with("core.takeMeBack")
11 | .with("core.404NotFound")
12 | .with("core.contactUsAt", "email")
13 | .with("core.unknownUser");
14 |
15 | export type I18nProps = PropsOf;
16 | export type I18nMap = MapOf;
17 |
18 | export const ENGLISH = I18n.verifyI18nMap(require("./en-US.json"));
19 |
20 | export const {
21 | Translation,
22 | TranslationProvider,
23 | useTranslator,
24 | } = buildComponents(ENGLISH);
25 |
26 | export type Translator = ReturnType]