Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/apply code formatting updates #379

Merged
merged 3 commits into from
Jan 29, 2024
Merged

Feature/apply code formatting updates #379

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
06f78d2
Update importing of types to include type keyword inside named import…
courtneymyers Jan 29, 2024
4679352
Add clsx
courtneymyers Jan 29, 2024
07ce01d
Wrap use of tailwindscss classes and other conditionally assigned cla…
courtneymyers Jan 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions app/client/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions app/client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
"@typescript-eslint/parser": "6.7.4",
"@vitejs/plugin-react-swc": "3.4.0",
"autoprefixer": "10.4.16",
"clsx": "2.1.0",
"eslint": "8.50.0",
"eslint-plugin-react-hooks": "4.6.0",
"eslint-plugin-react-refresh": "0.4.3",
Expand Down
77 changes: 53 additions & 24 deletions app/client/src/components/confirmationDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Fragment, useRef } from "react";
import { Dialog, Transition } from "@headlessui/react";
import { XMarkIcon } from "@heroicons/react/24/outline";
import clsx from "clsx";
// ---
import { useDialogState, useDialogActions } from "@/contexts/dialog";

Expand All @@ -23,7 +24,7 @@ export function ConfirmationDialog() {
<Transition.Root show={dialogShown} as={Fragment}>
<Dialog
as="div"
className="tw-relative tw-z-10"
className={clsx("tw-relative tw-z-10")}
initialFocus={cancelRef}
open={dialogShown}
onClose={(_ev) => {
Expand All @@ -33,55 +34,83 @@ export function ConfirmationDialog() {
>
<Transition.Child
as={Fragment}
enter="tw-duration-300 tw-ease-out"
enterFrom="tw-opacity-0"
enterTo="tw-opacity-100"
leave="tw-duration-200 tw-ease-in"
leaveFrom="tw-opacity-100"
leaveTo="tw-opacity-0"
enter={clsx("tw-duration-300 tw-ease-out")}
enterFrom={clsx("tw-opacity-0")}
enterTo={clsx("tw-opacity-100")}
leave={clsx("tw-duration-200 tw-ease-in")}
leaveFrom={clsx("tw-opacity-100")}
leaveTo={clsx("tw-opacity-0")}
>
<div className="tw-fixed tw-inset-0 tw-bg-black/70 tw-transition-colors" />
<div
className={clsx(
"tw-fixed tw-inset-0 tw-bg-black/70 tw-transition-colors",
)}
/>
</Transition.Child>

<div className="tw-fixed tw-inset-0 tw-z-10 tw-overflow-y-auto">
<div className="tw-flex tw-min-h-full tw-items-end tw-justify-center tw-p-4 sm:tw-items-center">
<div className={clsx("tw-fixed tw-inset-0 tw-z-10 tw-overflow-y-auto")}>
<div
className={clsx(
"tw-flex tw-min-h-full tw-items-end tw-justify-center tw-p-4",
"sm:tw-items-center",
)}
>
<Transition.Child
as={Fragment}
enter="tw-duration-300 tw-ease-out"
enterFrom="tw-translate-y-4 tw-opacity-0 sm:tw-translate-y-0"
enterTo="tw-translate-y-0 tw-opacity-100"
leave="tw-duration-200 tw-ease-in"
leaveFrom="tw-translate-y-0 tw-opacity-100"
leaveTo="tw-translate-y-4 tw-opacity-0 sm:tw-translate-y-0"
enter={clsx("tw-duration-300 tw-ease-out")}
enterFrom={clsx(
"tw-translate-y-4 tw-opacity-0",
"sm:tw-translate-y-0",
)}
enterTo={clsx("tw-translate-y-0 tw-opacity-100")}
leave={clsx("tw-duration-200 tw-ease-in")}
leaveFrom={clsx("tw-translate-y-0 tw-opacity-100")}
leaveTo={clsx(
"tw-translate-y-4 tw-opacity-0",
"sm:tw-translate-y-0",
)}
>
<Dialog.Panel className="tw-relative tw-transform tw-overflow-hidden tw-rounded-lg tw-bg-white tw-p-4 tw-shadow-xl tw-transition-all sm:tw-w-full sm:tw-max-w-md sm:tw-p-6">
<Dialog.Panel
className={clsx(
"tw-relative tw-transform tw-overflow-hidden tw-rounded-lg tw-bg-white tw-p-4 tw-shadow-xl tw-transition-all",
"sm:tw-w-full sm:tw-max-w-md sm:tw-p-6",
)}
>
{dismissable && dismissText && (
<div className="twpf">
<div className="tw-absolute tw-right-0 tw-top-0 tw-pr-4 tw-pt-4">
<div
className={clsx(
"tw-absolute tw-right-0 tw-top-0 tw-pr-4 tw-pt-4",
)}
>
<button
type="button"
className="tw-rounded-md tw-bg-white tw-text-gray-400 tw-transition-none hover:tw-text-gray-700 focus:tw-text-gray-700"
className={clsx(
"tw-rounded-md tw-bg-white tw-text-gray-400 tw-transition-none",
"hover:tw-text-gray-700",
"focus:tw-text-gray-700",
)}
onClick={(_ev) => {
dismissedAction && dismissedAction();
resetDialog();
}}
>
<span className="tw-sr-only">Close</span>
<span className={clsx("tw-sr-only")}>Close</span>
<XMarkIcon
className="tw-h-6 tw-w-6 tw-transition-none"
className={clsx("tw-h-6 tw-w-6 tw-transition-none")}
aria-hidden="true"
/>
</button>
</div>
</div>
)}

<div className="tw-m-4">
<h2 className="tw-text-xl">{heading}</h2>
<div className={clsx("tw-m-4")}>
<h2 className={clsx("tw-text-xl")}>{heading}</h2>

<div className="usa-prose">{description}</div>

<div className="tw-mt-4">
<div className={clsx("tw-mt-4")}>
<ul className="usa-button-group">
<li className="usa-button-group__item">
<button
Expand Down
3 changes: 1 addition & 2 deletions app/client/src/components/errorBoundary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import type { ReactNode } from "react";
import { Component, ErrorInfo } from "react";
import { type ReactNode, Component, ErrorInfo } from "react";
// ---
import { messages } from "@/config";
import { Message } from "@/components/message";
Expand Down
69 changes: 47 additions & 22 deletions app/client/src/components/notifications.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { CheckCircleIcon } from "@heroicons/react/24/outline";
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
import { XCircleIcon } from "@heroicons/react/24/outline";
import { XMarkIcon } from "@heroicons/react/20/solid";
import clsx from "clsx";
// ---
import {
useNotificationsState,
Expand All @@ -19,59 +20,83 @@ export function Notifications() {
<div className="twpf">
<div
aria-live="assertive"
className="tw-pointer-events-none tw-fixed tw-inset-0 tw-z-20 tw-flex tw-items-end tw-p-4 sm:tw-items-start"
className={clsx(
"tw-pointer-events-none tw-fixed tw-inset-0 tw-z-20 tw-flex tw-items-end tw-p-4",
"sm:tw-items-start",
)}
>
<div className="tw-flex tw-w-full tw-flex-col tw-items-center tw-space-y-4 sm:tw-items-end">
<div
className={clsx(
"tw-flex tw-w-full tw-flex-col tw-items-center tw-space-y-4",
"sm:tw-items-end",
)}
>
<Transition
show={displayed}
as={Fragment}
enter="tw-transform tw-transition tw-duration-300 tw-ease-out"
enterFrom="tw-translate-y-2 tw-opacity-0 sm:tw-translate-y-0 sm:tw-translate-x-2"
enterTo="tw-translate-y-0 tw-opacity-100 sm:tw-translate-x-0"
leave="tw-transition tw-duration-100 tw-ease-in"
leaveFrom="tw-opacity-100"
leaveTo="tw-opacity-0"
enter={clsx(
"tw-transform tw-transition tw-duration-300 tw-ease-out",
)}
enterFrom={clsx(
"tw-translate-y-2 tw-opacity-0",
"sm:tw-translate-y-0 sm:tw-translate-x-2",
)}
enterTo={clsx(
"tw-translate-y-0 tw-opacity-100",
"sm:tw-translate-x-0",
)}
leave={clsx("tw-transition tw-duration-100 tw-ease-in")}
leaveFrom={clsx("tw-opacity-100")}
leaveTo={clsx("tw-opacity-0")}
>
<div className="tw-pointer-events-auto tw-w-full tw-max-w-sm tw-overflow-hidden tw-rounded-lg tw-bg-white tw-shadow-xl tw-ring-1 tw-ring-black/10">
<div className="tw-p-4">
<div className="tw-flex tw-items-start">
<div className="tw-flex-shrink-0">
<div
className={clsx(
"tw-pointer-events-auto tw-w-full tw-max-w-sm tw-overflow-hidden tw-rounded-lg tw-bg-white tw-shadow-xl tw-ring-1 tw-ring-black/10",
)}
>
<div className={clsx("tw-p-4")}>
<div className={clsx("tw-flex tw-items-start")}>
<div className={clsx("tw-flex-shrink-0")}>
{type === "info" ? (
<InformationCircleIcon
className="tw-h-6 tw-w-6 tw-text-blue-400"
className={clsx("tw-h-6 tw-w-6 tw-text-blue-400")}
aria-hidden="true"
/>
) : type === "success" ? (
<CheckCircleIcon
className="tw-h-6 tw-w-6 tw-text-green-400"
className={clsx("tw-h-6 tw-w-6 tw-text-green-400")}
aria-hidden="true"
/>
) : type === "warning" ? (
<ExclamationTriangleIcon
className="tw-h-6 tw-w-6 tw-text-yellow-400"
className={clsx("tw-h-6 tw-w-6 tw-text-yellow-400")}
aria-hidden="true"
/>
) : type === "error" ? (
<XCircleIcon
className="tw-h-6 tw-w-6 tw-text-red-400"
className={clsx("tw-h-6 tw-w-6 tw-text-red-400")}
aria-hidden="true"
/>
) : null}
</div>

<div className="tw-mx-3 tw-w-0 tw-flex-1 tw-pt-0.5">
<div className={clsx("tw-mx-3 tw-w-0 tw-flex-1 tw-pt-0.5")}>
{body}
</div>

<div className="tw-flex-shrink-0">
<div className={clsx("tw-flex-shrink-0")}>
<button
className={clsx(
"tw-inline-flex tw-rounded-md tw-bg-white tw-text-gray-400 tw-transition-none",
"hover:tw-text-gray-700",
"focus:tw-text-gray-700",
)}
type="button"
className="tw-inline-flex tw-rounded-md tw-bg-white tw-text-gray-400 tw-transition-none hover:tw-text-gray-700 focus:tw-text-gray-700"
onClick={() => dismissNotification({ id: 0 })}
onClick={(_ev) => dismissNotification({ id: 0 })}
>
<span className="tw-sr-only">Close</span>
<span className={clsx("tw-sr-only")}>Close</span>
<XMarkIcon
className="tw-h-5 tw-w-5 tw-transition-none"
className={clsx("tw-h-5 tw-w-5 tw-transition-none")}
aria-hidden="true"
/>
</button>
Expand Down
3 changes: 1 addition & 2 deletions app/client/src/components/providers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import type { ReactNode } from "react";
import { Suspense, lazy, useState, useEffect } from "react";
import { type ReactNode, Suspense, lazy, useState, useEffect } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
// ---
import { DialogProvider } from "@/contexts/dialog";
Expand Down
13 changes: 7 additions & 6 deletions app/client/src/components/tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Root, Trigger, Portal, Content, Arrow } from "@radix-ui/react-tooltip";
import clsx from "clsx";
import icons from "uswds/img/sprite.svg";

export function TextWithTooltip(props: {
Expand All @@ -9,17 +10,17 @@ export function TextWithTooltip(props: {
}) {
const { text, tooltip, iconName, iconClassNames } = props;

const svgClassNames = iconClassNames
? `usa-icon text-base ${iconClassNames}`
: `usa-icon text-base`;

return (
<span className="display-inline-flex flex-align-center text-no-wrap">
<Root delayDuration={0}>
<Trigger asChild>
<button className="tw-m-0 tw-flex tw-rounded-full tw-border-0 tw-bg-transparent tw-p-0">
<button
className={clsx(
"tw-m-0 tw-flex tw-rounded-full tw-border-0 tw-bg-transparent tw-p-0",
)}
>
<svg
className={svgClassNames}
className={clsx("usa-icon text-base", iconClassNames)}
aria-hidden="true"
focusable="false"
role="img"
Expand Down
9 changes: 7 additions & 2 deletions app/client/src/contexts/dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
/* eslint-disable react-refresh/only-export-components */

import type { Dispatch, ReactNode } from "react";
import { createContext, useContext, useReducer } from "react";
import {
type Dispatch,
type ReactNode,
createContext,
useContext,
useReducer,
} from "react";

type Props = {
children: ReactNode;
Expand Down
9 changes: 7 additions & 2 deletions app/client/src/contexts/notifications.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
/* eslint-disable react-refresh/only-export-components */

import type { Dispatch, ReactNode } from "react";
import { createContext, useContext, useReducer } from "react";
import {
type Dispatch,
type ReactNode,
createContext,
useContext,
useReducer,
} from "react";

type Props = {
children: ReactNode;
Expand Down
9 changes: 7 additions & 2 deletions app/client/src/contexts/rebateYear.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
/* eslint-disable react-refresh/only-export-components */

import type { Dispatch, ReactNode } from "react";
import { createContext, useContext, useReducer } from "react";
import {
type Dispatch,
type ReactNode,
createContext,
useContext,
useReducer,
} from "react";

type Props = {
children: ReactNode;
Expand Down
Loading
Loading