@react-md/core 1.0.0-next.14 → 1.0.0-next.16

package/jest.config.ts

@@ -1,68 +0,0 @@
-import type { Config } from "jest";
-import type { Options as SwcOptions } from "@swc/core";
-
-const config: Config = {
-  testEnvironment: "jsdom",
-  transform: {
-    "^.+\\.(t|j)sx?$": [
-      "@swc/jest",
-      {
-        swcrc: false,
-        jsc: {
-          parser: {
-            syntax: "typescript",
-            tsx: true,
-          },
-          transform: {
-            react: {
-              runtime: "automatic",
-            },
-          },
-          target: "esnext",
-        },
-      } satisfies SwcOptions,
-    ],
-  },
-  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
-  moduleNameMapper: {
-    "\\.scss$": "identity-obj-proxy",
-    "^(\\.{1,2}/.*)\\.js$": "$1",
-  },
-
-  watchPlugins: [
-    "jest-watch-typeahead/filename",
-    "jest-watch-typeahead/testname",
-  ],
-
-  // this is required to get the correct line coverage when using swc for some
-  // reason.
-  coverageProvider: "v8",
-
-  // TODO: Determine required threshold once I get further along
-  // coverageThreshold: {
-  //   global: {
-  //     branches: 80,
-  //     functions: 80,
-  //     lines: 80,
-  //     statements: -10,
-  //   },
-  // },
-
-  // ensure that all files are picked up correctly and included in the results.
-  collectCoverageFrom: [
-    "<rootDir>/src/**/*.{ts,tsx}",
-
-    // index.ts files are always `export * from "./fileOrFolder"`. I might be
-    // able to remove this one I start testing the documentation site
-    "!<rootDir>/src/**/index.ts",
-    "!<rootDir>/src/**/types.ts",
-    // it's hard to verify these since they probably only occur when trying to
-    // use react-dom/server in jsdom?
-    "!<rootDir>/src/test-utils/polyfills/TextEncoder.ts",
-    "!<rootDir>/src/test-utils/polyfills/TextDecoder.ts",
-  ],
-
-  extensionsToTreatAsEsm: [".ts", ".tsx"],
-};
-
-export default config;

package/jest.setup.ts

@@ -1,3 +0,0 @@
-import "@testing-library/jest-dom/jest-globals";
-import "./src/test-utils/polyfills/index.js";
-import "./src/test-utils/jest-setup.js";

package/scripts/copySassFiles.ts

@@ -1,70 +0,0 @@
-/* eslint-disable no-console */
-// this is a temp file before I write the "combine everything" stuffs
-import chokidar from "chokidar";
-import { glob } from "glob";
-import { existsSync } from "node:fs";
-import { copyFile, mkdir, rm } from "node:fs/promises";
-import { dirname } from "node:path";
-
-let log = false;
-const pattern = "src/**/*.scss";
-
-const replaceDist = (path: string): string => path.replace("src", "dist");
-const ensureParentDirectories = async (filePath: string): Promise<void> => {
-  const folder = dirname(filePath);
-  if (!existsSync(folder)) {
-    await mkdir(folder, { recursive: true });
-  }
-};
-
-const cp = async (path: string, dest = replaceDist(path)): Promise<void> => {
-  const isColors = path.endsWith("_colors.scss");
-  await ensureParentDirectories(dest);
-  await copyFile(path, dest);
-  if (isColors) {
-    await copyFile(path, "dist/_colors.scss");
-  }
-  if (log) {
-    console.log(`Copied ${path} -> ${dest}`);
-    if (isColors) {
-      console.log(`Copied ${path} -> dist/colors.scss`);
-    }
-  }
-};
-
-if (process.argv.includes("--watch")) {
-  const watcher = chokidar.watch(pattern);
-  watcher.on("all", async (eventName, path) => {
-    const dist = replaceDist(path);
-
-    switch (eventName) {
-      case "add":
-      case "change":
-        cp(path, dist);
-        break;
-      case "unlink": {
-        if (existsSync(dist)) {
-          await rm(dist);
-          console.log(`Removed ${dist}`);
-        }
-        break;
-      }
-    }
-  });
-  watcher.on("ready", () => {
-    log = true;
-    console.log("Watching changes...");
-  });
-} else {
-  if (!existsSync("dist")) {
-    await mkdir("dist");
-  }
-
-  const styles = await glob(pattern);
-  for (const filePath of styles) {
-    const dist = replaceDist(filePath);
-    await ensureParentDirectories(dist);
-    await cp(filePath, dist);
-  }
-  console.log(`Copied ${styles.length} scss files`);
-}

package/scripts/tsconfig.json

@@ -1,18 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "noEmit": true,
-    "jsx": "preserve",
-    "strict": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "downlevelIteration": true,
-    "resolveJsonModule": true,
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
-    "forceConsistentCasingInFileNames": true,
-    "lib": ["esnext"]
-  },
-  "include": ["**/*.ts"],
-  "exclude": ["node_modules"]
-}

package/src/__tests__/NoSsr.node.tsx

@@ -1,26 +0,0 @@
-/** @jest-environment node */
-
-import { describe, expect, it } from "@jest/globals";
-import { renderToString } from "react-dom/server";
-
-import { NoSsr } from "../NoSsr.js";
-import { SsrProvider } from "../SsrProvider.js";
-
-describe("NoSsr", () => {
-  it("should not render anything initially in ssr mode", () => {
-    expect(
-      renderToString(
-        <SsrProvider ssr>
-          <NoSsr>Hidden Content</NoSsr>
-        </SsrProvider>
-      )
-    ).toBe("");
-    expect(
-      renderToString(
-        <SsrProvider>
-          <NoSsr>Hidden Content</NoSsr>
-        </SsrProvider>
-      )
-    ).toBe("Hidden Content");
-  });
-});

package/src/__tests__/NoSsr.tsx

@@ -1,89 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { type ReactElement } from "react";
-import { render, screen } from "../test-utils/index.js";
-
-import { NoSsr } from "../NoSsr.js";
-import { SsrProvider, useSsr } from "../SsrProvider.js";
-
-function Content(): ReactElement {
-  return <p>Some Text</p>;
-}
-
-describe("NoSsr", () => {
-  it("should always render the children if the SsrProvider has not been initialized", () => {
-    function Content(): ReactElement {
-      return <p>Some Text</p>;
-    }
-
-    render(
-      <NoSsr>
-        <Content />
-      </NoSsr>
-    );
-
-    expect(() => screen.getByText("Some Text")).not.toThrow();
-  });
-
-  it("should always render the children if ssr mode has not been initialized", () => {
-    render(
-      <SsrProvider>
-        <NoSsr>
-          <Content />
-        </NoSsr>
-      </SsrProvider>
-    );
-
-    expect(() => screen.getByText("Some Text")).not.toThrow();
-  });
-
-  // I don't really know how to test this part
-  it("should not render anything initially if ssr mode is enabled", () => {
-    const parentRenderCount = { current: 0 };
-    const childRenderCount = { current: 0 };
-    const nestedChildRenderCount = { current: 0 };
-
-    // TODO: FIgure out how to actually test this part. I want to show that nested `NoSsr` do nothing
-    function NestedChild(): ReactElement {
-      return (
-        <p>{`Nested child rendered: ${nestedChildRenderCount.current++}`}</p>
-      );
-    }
-
-    function Child(): ReactElement {
-      return (
-        <>
-          <p>{`Child rendered: ${childRenderCount.current++}`}</p>
-          <NoSsr>
-            <NestedChild />
-          </NoSsr>
-        </>
-      );
-    }
-
-    function Test(): ReactElement {
-      const ssr = useSsr();
-
-      // I'm surprised this works
-      expect(ssr).toBe(parentRenderCount.current === 0);
-
-      return (
-        <>
-          <p>{`Parent rendered: ${parentRenderCount.current++}`}</p>
-          <NoSsr>
-            <Child />
-          </NoSsr>
-        </>
-      );
-    }
-
-    render(
-      <SsrProvider ssr>
-        <Test />
-      </SsrProvider>
-    );
-
-    expect(parentRenderCount.current).toBe(2);
-    expect(childRenderCount.current).toBe(1);
-    expect(nestedChildRenderCount.current).toBe(1);
-  });
-});

package/src/__tests__/RootHtml.node.tsx

@@ -1,46 +0,0 @@
-/** @jest-environment node */
-/* eslint-disable testing-library/render-result-naming-convention */
-
-import { describe, expect, it } from "@jest/globals";
-import { renderToString } from "react-dom/server";
-import { RootHtml } from "../RootHtml.js";
-
-describe("RootHtml", () => {
-  it("should render the html and body elements with the default props", () => {
-    expect(renderToString(<RootHtml />)).toMatchSnapshot();
-  });
-
-  it("should allow a custom bodyClassName", () => {
-    expect(<RootHtml bodyClassName="body-class-name" />).toMatchSnapshot();
-  });
-
-  it("should allow the body className to be set through bodyProps when the bodyClassName prop is not provided", () => {
-    const html1 = renderToString(
-      <RootHtml bodyProps={{ className: "custom-body-class" }} />
-    );
-    const html2 = renderToString(
-      <RootHtml
-        bodyProps={{ className: "custom-body-name" }}
-        bodyClassName="body-class"
-      />
-    );
-
-    expect(html1).toContain("custom-body-class");
-    expect(html1).toMatchSnapshot();
-
-    expect(html2).not.toContain("custom-body-class");
-    expect(html2).toMatchSnapshot();
-  });
-
-  it("should allow the lang to be overwritten", () => {
-    expect(renderToString(<RootHtml lang="da" />)).toMatchSnapshot();
-  });
-
-  it("should allow the dir to be overwritten", () => {
-    expect(renderToString(<RootHtml dir="rtl" />)).toMatchSnapshot();
-  });
-
-  it("should allow the dir and lang to be overwritten", () => {
-    expect(renderToString(<RootHtml lang="ar" dir="rtl" />)).toMatchSnapshot();
-  });
-});

package/src/__tests__/__snapshots__/RootHtml.node.tsx.snap

@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`RootHtml should allow a custom bodyClassName 1`] = `
-<RootHtml
-  bodyClassName="body-class-name"
-/>
-`;
-
-exports[`RootHtml should allow the body className to be set through bodyProps when the bodyClassName prop is not provided 1`] = `"<html dir="ltr" lang="en"><body class="custom-body-class"></body></html>"`;
-
-exports[`RootHtml should allow the body className to be set through bodyProps when the bodyClassName prop is not provided 2`] = `"<html dir="ltr" lang="en"><body class="body-class"></body></html>"`;
-
-exports[`RootHtml should allow the dir and lang to be overwritten 1`] = `"<html dir="rtl" lang="ar"><body></body></html>"`;
-
-exports[`RootHtml should allow the dir to be overwritten 1`] = `"<html dir="rtl" lang="en"><body></body></html>"`;
-
-exports[`RootHtml should allow the lang to be overwritten 1`] = `"<html dir="ltr" lang="da"><body></body></html>"`;
-
-exports[`RootHtml should render the html and body elements with the default props 1`] = `"<html dir="ltr" lang="en"><body></body></html>"`;

package/src/__tests__/useAsyncFunction.tsx

@@ -1,124 +0,0 @@
-import { describe, expect, it, jest } from "@jest/globals";
-import { type MouseEvent, type ReactElement } from "react";
-import {
-  act,
-  rmdRender,
-  screen,
-  userEvent,
-  waitFor,
-} from "../test-utils/index.js";
-
-import { box } from "../box/styles.js";
-import { Button, type ButtonProps } from "../button/Button.js";
-import { CircularProgress } from "../progress/CircularProgress.js";
-import { useAsyncFunction } from "../useAsyncFunction.js";
-
-interface TestProps extends ButtonProps {
-  onClick(event: MouseEvent<HTMLButtonElement>): Promise<void>;
-  hookDisabled?: boolean;
-}
-
-function Test(props: TestProps): ReactElement {
-  const {
-    onClick,
-    children = "Button",
-    theme,
-    disabled,
-    hookDisabled,
-    ...remaining
-  } = props;
-  const { handleAsync, pending } = useAsyncFunction({
-    disabled: disabled || hookDisabled,
-  });
-
-  return (
-    <Button
-      {...remaining}
-      aria-disabled={pending || undefined}
-      disabled={disabled}
-      theme={pending ? "disabled" : theme}
-      onClick={handleAsync(onClick)}
-    >
-      {children}
-      {pending && (
-        <span
-          className={box({
-            align: "center",
-            disablePadding: true,
-          })}
-        >
-          <CircularProgress aria-label="Loading" />
-        </span>
-      )}
-    </Button>
-  );
-}
-
-describe("useAsyncFunction", () => {
-  it("should start the async flow once clicked, prevent additional actions from being fired while pending, and not trigger the action if unmounted", async () => {
-    const user = userEvent.setup();
-
-    // this is how you can manually resolve a promise using events
-    const instance = new EventTarget();
-    const onClick = jest.fn(() => {
-      return new Promise<void>((resolve) => {
-        instance.addEventListener("resolve-promise", () => resolve());
-      });
-    });
-    const { unmount } = rmdRender(<Test onClick={onClick} />);
-    const button = screen.getByRole("button", { name: "Button" });
-
-    expect(button).not.toHaveAttribute("aria-disabled");
-    await user.click(button);
-    expect(button).toHaveAttribute("aria-disabled", "true");
-    expect(button).not.toHaveAttribute("disabled");
-    expect(onClick).toHaveBeenCalledTimes(1);
-
-    act(() => {
-      // resolve the promise
-      instance.dispatchEvent(new Event("resolve-promise"));
-    });
-    await waitFor(() => {
-      expect(button).not.toHaveAttribute("aria-disabled");
-    });
-    await waitFor(() => {
-      expect(button).not.toHaveAttribute("disabled");
-    });
-
-    await user.click(button);
-    expect(button).toHaveAttribute("aria-disabled", "true");
-    expect(button).not.toHaveAttribute("disabled");
-    expect(onClick).toHaveBeenCalledTimes(2);
-
-    await user.click(button);
-    await user.click(button);
-    expect(onClick).toHaveBeenCalledTimes(2);
-
-    unmount();
-
-    act(() => {
-      instance.dispatchEvent(new Event("resolve-promise"));
-    });
-    expect(onClick).toHaveBeenCalledTimes(2);
-  });
-
-  it("should do nothing if the disabled option was provided", async () => {
-    const user = userEvent.setup();
-    const onClick = jest.fn(async () => {});
-    const props: TestProps = {
-      onClick,
-    };
-
-    const { rerender } = rmdRender(<Test {...props} disabled />);
-    const button = screen.getByRole("button", { name: "Button" });
-    expect(button).toBeDisabled();
-
-    await user.click(button);
-    expect(onClick).not.toHaveBeenCalled();
-
-    rerender(<Test {...props} hookDisabled />);
-    expect(button).not.toBeDisabled();
-    await user.click(button);
-    expect(onClick).not.toHaveBeenCalled();
-  });
-});

package/src/__tests__/useDebouncedFunction.tsx

@@ -1,108 +0,0 @@
-import { describe, expect, it, jest } from "@jest/globals";
-import { useState } from "react";
-import {
-  act,
-  fireEvent,
-  render,
-  screen,
-  userEvent,
-  waitFor,
-} from "../test-utils/index.js";
-
-import { Button } from "../button/Button.js";
-import { TextField } from "../form/TextField.js";
-import { useDebouncedFunction } from "../useDebouncedFunction.js";
-
-function setup(delay?: number | null) {
-  const fired = jest.fn();
-  const user = userEvent.setup({ delay });
-  function Test() {
-    const [value, setValue] = useState("");
-    // can't use event here because of react not persisting events by default
-    const handleChange = useDebouncedFunction((value: string) => {
-      fired(value);
-      setValue(value);
-    }, 500);
-
-    return (
-      <>
-        <div data-testid="output">{value}</div>
-        <TextField
-          label="Field"
-          onChange={(event) => handleChange(event.currentTarget.value)}
-        />
-        <Button
-          onClick={() => {
-            handleChange.cancel();
-          }}
-        >
-          Cancel
-        </Button>
-      </>
-    );
-  }
-
-  const { unmount } = render(<Test />);
-  const output = screen.getByTestId("output");
-  const field = screen.getByRole("textbox", { name: "Field" });
-  const cancel = screen.getByRole("button", { name: "Cancel" });
-
-  return { fired, user, output, cancel, field, unmount };
-}
-
-describe("useDebouncedFunction", () => {
-  it("should trigger a function once every X seconds and cleanup any pending timeouts on unmount", async () => {
-    const { fired, user, output, field, unmount } = setup();
-
-    expect(output).toHaveTextContent("");
-    expect(field).toHaveValue("");
-
-    await user.type(field, "Hello, world!");
-    expect(output).toHaveTextContent("");
-    expect(field).toHaveValue("Hello, world!");
-
-    await waitFor(() => {
-      expect(output).toHaveTextContent("Hello, world!");
-    });
-    await waitFor(() => {
-      expect(field).toHaveValue("Hello, world!");
-    });
-    expect(fired).toHaveBeenCalledTimes(1);
-    expect(fired).toHaveBeenCalledWith("Hello, world!");
-
-    jest.useFakeTimers();
-
-    fireEvent.change(field, { target: { value: "Hello, w" } });
-    unmount();
-    act(() => {
-      jest.runAllTimers();
-    });
-    expect(fired).toHaveBeenCalledTimes(1);
-  });
-
-  it("should allow the timeout to be cancelled manually", async () => {
-    jest.useFakeTimers();
-    const { user, fired, cancel, output, field } = setup(null);
-
-    expect(output).toHaveTextContent("");
-    expect(field).toHaveValue("");
-
-    await user.type(field, "Hello, world!");
-    expect(output).toHaveTextContent("");
-    expect(field).toHaveValue("Hello, world!");
-
-    act(() => {
-      jest.advanceTimersByTime(300);
-    });
-
-    expect(fired).not.toHaveBeenCalled();
-    await user.click(cancel);
-    act(() => {
-      jest.runAllTimers();
-    });
-
-    expect(fired).not.toHaveBeenCalled();
-    expect(output).toHaveTextContent("");
-    expect(field).toHaveValue("Hello, world!");
-  });
-});