Merge branch 'master' into refactor/edit-profile-modal

Author: fehmer

frontend/src/ts/elements/account-settings/ape-key-table.ts

@@ -10,9 +10,10 @@ import {
   ApeKeyNameSchema,
 } from "@monkeytype/schemas/ape-keys";
 import { format } from "date-fns/format";
-import { SimpleModal, TextArea } from "../simple-modal";
+import { SimpleModal } from "../simple-modal";
 import { isAuthenticated } from "../../states/core";
 import { qs, qsr } from "../../utils/dom";
+import { TextArea } from "../../states/simple-modal";
 
 const editApeKey = new SimpleModal({
   id: "editApeKey",

frontend/src/ts/elements/simple-modal.ts

@@ -9,113 +9,31 @@ import { showLoaderBar, hideLoaderBar } from "../states/loader-bar";
 import {
   showNoticeNotification,
   addNotificationWithLevel,
-  AddNotificationOptions,
 } from "../states/notifications";
 import {
   ValidatedHtmlInputElement,
   ValidationOptions,
 } from "./input-validation";
 import { ElementWithUtils, qsr } from "../utils/dom";
+import { ValidationResult } from "../types/validation";
 import {
-  IsValidResponse,
-  Validation,
-  ValidationResult,
-} from "../types/validation";
+  SimpleModalConfig,
+  SimpleModalInput,
+  ExecReturn as BaseExecReturn,
+} from "../states/simple-modal";
 
 const simpleModalEl = qsr<HTMLDialogElement>("#simpleModal");
 
-type CommonInput<TType, TValue> = {
-  type: TType;
-  initVal?: TValue;
-  placeholder?: string;
-  hidden?: boolean;
-  disabled?: boolean;
-  optional?: boolean;
-  label?: string;
-  oninput?: (event: Event) => void;
-  /**
-   * Validate the input value and indicate the validation result next to the input.
-   * If the schema is defined it is always checked first.
-   * Only if the schema validaton is passed or missing the `isValid` method is called.
-   */
-  validation?: Omit<Validation<string>, "isValid"> & {
-    /**
-     * Custom async validation method.
-     * This is intended to be used for validations that cannot be handled with a Zod schema like server-side validations.
-     * @param value current input value
-     * @param thisPopup the current modal
-     * @returns true if the `value` is valid, an errorMessage as string if it is invalid.
-     */
-    isValid?: (
-      value: string,
-      thisPopup: SimpleModal,
-    ) => Promise<IsValidResponse>;
-  };
-};
-
-export type TextInput = CommonInput<"text", string>;
-export type TextArea = CommonInput<"textarea", string>;
-export type PasswordInput = CommonInput<"password", string>;
-type EmailInput = CommonInput<"email", string>;
-
-type RangeInput = {
-  min: number;
-  max: number;
-  step?: number;
-} & CommonInput<"range", number>;
-
-type DateTimeInput = {
-  min?: Date;
-  max?: Date;
-} & CommonInput<"datetime-local", Date>;
-type DateInput = {
-  min?: Date;
-  max?: Date;
-} & CommonInput<"date", Date>;
-
-type CheckboxInput = {
-  label: string;
-  placeholder?: never;
-  description?: string;
-} & CommonInput<"checkbox", boolean>;
-
-type NumberInput = {
-  min?: number;
-  max?: number;
-} & CommonInput<"number", number>;
-
-type CommonInputType =
-  | TextInput
-  | TextArea
-  | PasswordInput
-  | EmailInput
-  | RangeInput
-  | DateTimeInput
-  | DateInput
-  | CheckboxInput
-  | NumberInput;
-
-export type ExecReturn = {
-  status: "success" | "notice" | "error";
-  message: string;
-  showNotification?: false;
-  notificationOptions?: AddNotificationOptions;
+export type ExecReturn = BaseExecReturn & {
   hideOptions?: HideOptions;
-  afterHide?: () => void;
-  alwaysHide?: boolean;
 };
 
-type FormInput = CommonInputType & {
+type FormInput = SimpleModalInput & {
   hasError?: boolean;
   currentValue: () => string;
 };
-type SimpleModalOptions = {
+type SimpleModalOptions = Omit<SimpleModalConfig, "execFn"> & {
   id: string;
-  title: string;
-  inputs?: CommonInputType[];
-  text?: string;
-  textAllowHtml?: boolean;
-  buttonText: string;
   execFn: (thisPopup: SimpleModal, ...params: string[]) => Promise<ExecReturn>;
   beforeInitFn?: (thisPopup: SimpleModal) => void;
   beforeShowFn?: (thisPopup: SimpleModal) => void;
@@ -135,7 +53,7 @@ export class SimpleModal {
   inputs: FormInput[];
   text?: string;
   textAllowHtml: boolean;
-  buttonText: string;
+  buttonText?: string;
   execFn: (thisPopup: SimpleModal, ...params: string[]) => Promise<ExecReturn>;
   beforeInitFn: ((thisPopup: SimpleModal) => void) | undefined;
   beforeShowFn: ((thisPopup: SimpleModal) => void) | undefined;
@@ -183,7 +101,7 @@ export class SimpleModal {
 
     this.initInputs();
 
-    if (this.buttonText === "") {
+    if (this.buttonText === "" || this.buttonText === undefined) {
       this.element.qs(".submitButton")?.remove();
     } else {
       this.element.qs(".submitButton")?.setText(this.buttonText);

frontend/src/ts/modals/simple-modals.ts

@@ -21,12 +21,6 @@ import { createErrorMessage } from "../utils/error";
 import * as ThemeController from "../controllers/theme-controller";
 import * as CustomThemes from "../collections/custom-themes";
 import * as AccountSettings from "../pages/account-settings";
-import {
-  ExecReturn,
-  PasswordInput,
-  SimpleModal,
-  TextInput,
-} from "../elements/simple-modal";
 
 import { GenerateDataRequest } from "@monkeytype/contracts/dev";
 import {
@@ -42,6 +36,8 @@ import { list, PopupKey, showPopup } from "./simple-modals-base";
 import { getTheme } from "../states/theme";
 import { normalizeName } from "../utils/strings";
 import { IsValidResponse } from "../types/validation";
+import { ExecReturn, SimpleModal } from "../elements/simple-modal";
+import { PasswordInput, TextInput } from "../states/simple-modal";
 
 export { list, showPopup };
 export type { PopupKey };
@@ -196,10 +192,6 @@ list.updateEmail = new SimpleModal({
       initVal: "",
       validation: {
         schema: UserEmailSchema,
-        isValid: async (currentValue, thisPopup) =>
-          currentValue === thisPopup.inputs?.[1]?.currentValue() ||
-          "Emails don't match",
-        debounceDelay: 0,
       },
     },
   ],

frontend/src/ts/states/simple-modal.ts

@@ -9,7 +9,7 @@ import {
 import { showLoaderBar, hideLoaderBar } from "./loader-bar";
 import { Validation } from "../types/validation";
 
-type CommonInput<TType, TValue> = {
+export type CommonInput<TType, TValue> = {
   type: TType;
   name?: string;
   initVal?: TValue;
@@ -20,6 +20,11 @@ type CommonInput<TType, TValue> = {
   label?: string;
   class?: string;
   oninput?: (event: Event) => void;
+  /**
+   * Validate the input value and indicate the validation result next to the input.
+   * If the schema is defined it is always checked first.
+   * Only if the schema validaton is passed or missing the `isValid` method is called.
+   */
   validation?: Validation<string>;
 };
 

frontend/storybook/stories/InputField.stories.tsx

@@ -17,6 +17,7 @@ function createFieldMock(options: {
   name?: string;
   value?: string;
   meta?: MetaState;
+  validators?: object;
 }) {
   const stateMeta = {
     isTouched: true,
@@ -27,6 +28,9 @@ function createFieldMock(options: {
   };
   return {
     name: options.name ?? "test",
+    options: {
+      validators: options.validators,
+    },
     get state() {
       return {
         value: options.value ?? "",
@@ -47,7 +51,6 @@ const meta = preview.meta({
   component: InputField as Component<{
     field: Accessor<AnyFieldApi>;
     placeholder?: string;
-    showIndicator?: true;
     autocomplete?: string;
     type?: string;
     disabled?: boolean;
@@ -59,7 +62,6 @@ const meta = preview.meta({
   tags: ["autodocs"],
   argTypes: {
     placeholder: { control: "text" },
-    showIndicator: { control: "boolean" },
     autocomplete: { control: "text" },
     type: { control: "text" },
     disabled: { control: "boolean" },
@@ -74,8 +76,10 @@ export const Default = meta.story({
 
 export const withIndicator = meta.story({
   args: {
-    showIndicator: true,
-    field: () => createFieldMock({}),
+    field: () =>
+      createFieldMock({
+        validators: { onChange: () => undefined },
+      }),
   },
 });