@servicetitan/anvil2-ext-common 0.1.0

package/.storybook/main.ts

@@ -0,0 +1,35 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+import { join, dirname } from "path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): string {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+const config: StorybookConfig = {
+  stories: [
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+    "../src/**/*.stories.mdx",
+  ],
+  features: {
+    backgrounds: true,
+    viewport: true,
+  },
+  addons: [
+    getAbsolutePath("@storybook/addon-a11y"),
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/addon-vitest"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/react-vite"),
+    options: {},
+  },
+  refs: {
+    "@servicetitan/anvil2": { disable: true },
+    "@servicetitan/design-system": { disable: true },
+  },
+};
+export default config;

package/.storybook/manager-head.html

@@ -0,0 +1 @@
+<link rel="icon" type="image/x-icon" href="/favicon.ico" />

package/.storybook/preview.tsx

@@ -0,0 +1,203 @@
+import type { Preview } from "@storybook/react-vite";
+import * as anvil2 from "@servicetitan/anvil2";
+import { core } from "@servicetitan/anvil2/token";
+
+const { AnvilProvider, Flex } = anvil2;
+
+const layoutProps = [
+  "flex",
+  "flexGrow",
+  "flexShrink",
+  "flexBasis",
+  "alignSelf",
+  "justifySelf",
+  "order",
+  "gridArea",
+  "gridColumn",
+  "gridRow",
+  "gridTemplate",
+  "gridColumnStart",
+  "gridColumnEnd",
+  "gridRowStart",
+  "gridRowEnd",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "xxl",
+];
+
+// we /could/ detect the actual scrollbar width here, but this is good enough
+function addScrollbarWidth(s?: string) {
+  return s ? parseInt(s) + 16 + "px" : s;
+}
+
+const viewports = {
+  breakpointSmall: {
+    name: "Breakpoint Small",
+    styles: {
+      width: addScrollbarWidth(core.primitive?.BreakpointSm?.value),
+      height: "100%",
+    },
+  },
+  breakpointMedium: {
+    name: "Breakpoint Medium",
+    styles: {
+      width: addScrollbarWidth(core.primitive?.BreakpointMd?.value),
+      height: "100%",
+    },
+  },
+  breakpointLarge: {
+    name: "Breakpoint Large",
+    styles: {
+      width: addScrollbarWidth(core.primitive?.BreakpointLg?.value),
+      height: "100%",
+    },
+  },
+  breakpointXLarge: {
+    name: "Breakpoint X-Large",
+    styles: {
+      width: addScrollbarWidth(core.primitive?.BreakpointXl?.value),
+      height: "100%",
+    },
+  },
+  breakpointXXLarge: {
+    name: "Breakpoint XX-Large",
+    styles: {
+      width: addScrollbarWidth(core.primitive?.BreakpointXxl?.value),
+      height: "100%",
+    },
+  },
+};
+
+const preview: Preview = {
+  globalTypes: {
+    shadow: {
+      description: "Whether or not to use a shadow DOM",
+      toolbar: {
+        title: "Shadow",
+        icon: "mirror",
+        items: [
+          {
+            value: "fragment",
+            icon: "switchalt",
+            title: "Fragment",
+          },
+          {
+            value: "shadow",
+            icon: "contrast",
+            title: "Shadow",
+          },
+        ],
+        dynamicTitle: true,
+      },
+    },
+    dir: {
+      description: "Indicates the directionality of the element's text",
+      toolbar: {
+        title: "dir",
+        items: [
+          {
+            value: "ltr",
+            title: "LTR",
+          },
+          {
+            value: "rtl",
+            title: "RTL",
+          },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+  parameters: {
+    actions: { argTypesRegex: "^on.*" },
+
+    backgrounds: {
+      options: {
+        dark: { name: "Dark", value: "#141414" },
+        light: { name: "Light", value: "#FFFFFF" },
+        system: { name: "System", value: undefined },
+      },
+    },
+
+    chromatic: {
+      prefersReducedMotion: "reduce",
+      pauseAnimationAtEnd: true,
+    },
+
+    docs: {
+      argTypes: {
+        sort: "requiredFirst",
+      },
+      codePanel: true,
+    },
+
+    controls: {
+      sort: "requiredFirst",
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+      expanded: true,
+      exclude: layoutProps,
+    },
+
+    layout: "fullscreen",
+    viewport: { options: viewports },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: "todo",
+    },
+  },
+  initialGlobals: {
+    shadow: "shadow",
+    dir: "ltr",
+    backgrounds: { value: "system" },
+  },
+  decorators: [
+    (Story, context) => {
+      const { minHeight, noPadding } = context.parameters;
+      const mode =
+        context.globals.backgrounds.value === "system"
+          ? undefined
+          : context.globals.backgrounds.value;
+
+      if (context.title.startsWith("Anvil2")) {
+        return (
+          <AnvilProvider themeData={{ mode }} dir={context.globals.dir}>
+            <Flex
+              className="bootstrap"
+              alignItems="flex-start"
+              style={{
+                backgroundColor: `var(--background-color)`,
+                padding: noPadding ? undefined : "1rem",
+                minHeight,
+              }}
+            >
+              <Story />
+            </Flex>
+          </AnvilProvider>
+        );
+      }
+      return (
+        <Flex
+          dir={context.globals.dir}
+          alignItems="flex-start"
+          style={{
+            backgroundColor: `var(--background-color)`,
+            padding: "1rem",
+            minHeight,
+          }}
+        >
+          <Story />
+        </Flex>
+      );
+    },
+  ],
+};
+
+export default preview;

package/.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from "@storybook/react-vite";
+import * as projectAnnotations from "./preview";
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @servicetitan/anvil2-ext-common
+
+## 0.1.0
+
+### Minor Changes
+
+- [#1566](https://github.com/servicetitan/hammer/pull/1566) [`5822b65`](https://github.com/servicetitan/hammer/commit/5822b65debe42dce860a2174f91bef2b42da0370) Thanks [@rgdelato](https://github.com/rgdelato)! - [useConfirmDialog] Add `useConfirmDialog` to new `@servicetitan/anvil2-ext-common` package
+
+### Patch Changes
+
+- Updated dependencies [[`fc8b30c`](https://github.com/servicetitan/hammer/commit/fc8b30cc6a8cb7ec99f9630e9ba9d9a4e5af5e4b), [`3daa6f6`](https://github.com/servicetitan/hammer/commit/3daa6f67670bcdb5e978ad083056db4d29892b16), [`3df1040`](https://github.com/servicetitan/hammer/commit/3df1040566f627a937f2f7f7e889c3c2bcfb230a)]:
+  - @servicetitan/anvil2@1.46.8

package/eslint.config.js

@@ -0,0 +1,5 @@
+import baseConfig from "../../eslint.base.config.mjs";
+import reactConfig from "../../eslint.react.config.mjs";
+import eslintConfigPrettier from "eslint-config-prettier/flat";
+
+export default [...baseConfig, ...reactConfig, eslintConfigPrettier];

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@servicetitan/anvil2-ext-common",
+  "version": "0.1.0",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "@react-hook/merged-ref": "^1.3.2",
+    "@react-hook/resize-observer": "^2.0.1",
+    "classnames": "^2.5.1",
+    "tabbable": "^6.2.0",
+    "tinycolor2": "^1.6.0",
+    "uuid": "^10.0.0",
+    "@servicetitan/anvil2": "1.46.8"
+  },
+  "peerDependencies": {
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.1",
+    "@storybook/addon-a11y": "9.1.5",
+    "@storybook/addon-docs": "9.1.5",
+    "@storybook/addon-links": "9.1.5",
+    "@storybook/addon-vitest": "9.1.5",
+    "@storybook/react-vite": "9.1.5",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/crypto-js": "^4.2.2",
+    "@types/luxon": "^3.4.2",
+    "@types/react": "18.3.18",
+    "@types/react-dom": "18.3.5",
+    "@types/react-window": "^1.8.8",
+    "@types/testing-library__jest-dom": "^5.14.9",
+    "@types/tinycolor2": "^1.4.6",
+    "@types/uuid": "^10.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.0.8",
+    "chromatic": "^11.20.2",
+    "commander": "^12.1.0",
+    "globals": "^15.15.0",
+    "happy-dom": "^17.4.4",
+    "mdast-util-to-string": "^4.0.0",
+    "playwright": "^1.52.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "remark-gfm": "^4.0.0",
+    "remark-parse": "^11.0.0",
+    "remark-stringify": "^11.0.0",
+    "sass": "1.87.0",
+    "storybook": "9.1.5",
+    "svgo": "^3.3.2",
+    "typescript": "~5.7.2",
+    "unified": "^11.0.5",
+    "vite": "6.1.6",
+    "vitest": "^3.2.4",
+    "vitest-axe": "^0.1.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 8008",
+    "build-storybook": "storybook build --stats-json",
+    "test-storybook": "vitest --project=storybook"
+  }
+}

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useConfirmDialog";

package/src/hooks/useConfirmDialog/ConfirmDialog.tsx

@@ -0,0 +1,131 @@
+import { ComponentProps, ComponentPropsWithRef, FC, ReactNode } from "react";
+import { Button, Dialog } from "@servicetitan/anvil2";
+import { Prettify } from "../../types";
+
+export interface PrimaryButtonInternalProps {
+  appearance?: ComponentProps<typeof Button>["appearance"];
+  onClick?: () => void;
+  children: ReactNode;
+}
+
+export interface ConfirmDialogInternalProps {
+  /**
+   * Callback function when the confirm button is clicked
+   */
+  onConfirm: () => void;
+
+  /**
+   * Content to be displayed in the dialog
+   * @defaultValue 'Are you sure?'
+   */
+  children?: ReactNode;
+
+  /**
+   * Appearance of the primary button
+   * @defaultValue 'primary'
+   */
+  appearance?: PrimaryButtonInternalProps["appearance"];
+
+  /**
+   * Header content of the dialog
+   * @defaultValue 'Confirm'
+   */
+  header?: ReactNode;
+
+  /**
+   * Content of the primary button
+   * @defaultValue 'OK'
+   */
+  primaryButton?: ReactNode;
+
+  /**
+   * Content of the cancel button
+   * @defaultValue 'Cancel'
+   */
+  cancelButton?: ReactNode;
+
+  /**
+   * Props to be passed to the internal <Dialog.Header>
+   */
+  headerProps?: Omit<ComponentPropsWithRef<typeof Dialog.Header>, "children">;
+
+  /**
+   * Props to be passed to the internal <Dialog.Content>
+   */
+  contentProps?: Omit<ComponentPropsWithRef<typeof Dialog.Content>, "children">;
+
+  /**
+   * Props to be passed to the internal <Dialog.Footer>
+   */
+  footerProps?: Omit<ComponentPropsWithRef<typeof Dialog.Footer>, "children">;
+
+  /**
+   * Props to be passed to the internal <Dialog.CancelButton>
+   */
+  cancelButtonProps?: Omit<
+    ComponentPropsWithRef<typeof Dialog.CancelButton>,
+    "children"
+  >;
+
+  /**
+   * Props to be passed to the internal primary <Button>
+   */
+  primaryButtonProps?: Omit<
+    ComponentPropsWithRef<typeof Button>,
+    keyof PrimaryButtonInternalProps
+  >;
+}
+
+export type ConfirmDialogProps = Prettify<
+  ConfirmDialogInternalProps &
+    Omit<ComponentPropsWithRef<typeof Dialog>, keyof ConfirmDialogInternalProps>
+>;
+
+/**
+ * ConfirmDialog component for displaying a simple confirmation dialog.
+ *
+ * @remarks
+ * - Any property of Anvil's <Dialog> can be passed directly to <ConfirmDialog>
+ *
+ * - header, primaryButton, and cancelButton are typed as ReactNode,
+ *   so arbitrary React markup can be passed in addition to strings.
+ *
+ * - headerProps, contentProps, footerProps, cancelButtonProps, and primaryButtonProps
+ *   can be used to customize the internal components. They will be forwarded directly
+ *   to <Dialog.Header>, <Dialog.Content>, <Dialog.Footer>, etc.
+ */
+export const ConfirmDialog: FC<ConfirmDialogProps> = ({
+  appearance = "primary",
+  header = "Confirm",
+  children = "Are you sure?",
+  primaryButton = "OK",
+  cancelButton = "Cancel",
+  onConfirm,
+  cancelButtonProps,
+  primaryButtonProps,
+  headerProps,
+  contentProps,
+  footerProps,
+  ...dialogProps
+}: ConfirmDialogProps) => {
+  const primaryButtonInternalProps: PrimaryButtonInternalProps = {
+    appearance,
+    onClick: onConfirm,
+    children: primaryButton,
+  };
+
+  return (
+    <Dialog {...dialogProps}>
+      <Dialog.Header {...headerProps}>{header}</Dialog.Header>
+      <Dialog.Content {...contentProps}>{children}</Dialog.Content>
+      <Dialog.Footer {...footerProps}>
+        <Dialog.CancelButton {...cancelButtonProps}>
+          {cancelButton}
+        </Dialog.CancelButton>
+
+        {/* allow primaryButtonProps object to override the explicit top-level props - primaryButton, appearance, onClick */}
+        <Button {...primaryButtonInternalProps} {...primaryButtonProps} />
+      </Dialog.Footer>
+    </Dialog>
+  );
+};

package/src/hooks/useConfirmDialog/index.ts

@@ -0,0 +1,4 @@
+export {
+  useConfirmDialog,
+  useConfirmDialog as default,
+} from "./useConfirmDialog";

package/src/hooks/useConfirmDialog/useConfirmDialog.stories.tsx

@@ -0,0 +1,177 @@
+import type { Meta, StoryObj, StoryFn } from "@storybook/react-vite";
+
+import { action } from "storybook/actions";
+import { ComponentProps } from "react";
+import { Button, Flex } from "@servicetitan/anvil2";
+import { ConfirmDialog } from "./ConfirmDialog";
+import { useConfirmDialog } from "./useConfirmDialog";
+
+type UseConfirmDialogWrapperProps = Omit<
+  ComponentProps<typeof ConfirmDialog>,
+  "onCancel" | "onConfirm"
+> & {
+  onConfirm: () => void;
+  onCancel?: () => void;
+};
+
+const UseConfirmDialogWrapper = ({
+  children,
+  onConfirm,
+  onCancel,
+  ...rest
+}: UseConfirmDialogWrapperProps) => {
+  const [ConfirmDialog, openConfirm] = useConfirmDialog(onConfirm, onCancel);
+
+  return (
+    <Flex justifyContent="center" alignItems="center" style={{ height: 400 }}>
+      <Button onClick={() => openConfirm()}>Do Something</Button>
+      <ConfirmDialog {...rest}>{children}</ConfirmDialog>
+    </Flex>
+  );
+};
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "Hooks/UseConfirmDialog",
+  component: UseConfirmDialogWrapper,
+  parameters: {
+    layout: "fullscreen",
+    minHeight: "100dvh",
+  },
+  args: {
+    header: undefined,
+    children: undefined,
+    primaryButton: undefined,
+    primaryButtonProps: {},
+    appearance: undefined,
+    cancelButton: undefined,
+    cancelButtonProps: {},
+    headerProps: {},
+    contentProps: {},
+    footerProps: {},
+    onConfirm: action("onConfirm"),
+    onCancel: action("onCancel"),
+  },
+  argTypes: {
+    header: {
+      control: "text",
+      type: "string",
+      description: "The header content of the confirmation dialog",
+    },
+    children: {
+      control: "text",
+      type: "string",
+      description: "The content of the confirmation dialog",
+    },
+    primaryButton: {
+      control: "text",
+      type: "string",
+      description: "The content of the primary button",
+    },
+    primaryButtonProps: {
+      control: "object",
+      description:
+        "Props to be passed to the primary button. See Button for details.",
+    },
+    appearance: {
+      control: "select",
+      options: ["primary", "secondary", "ghost", "danger", "danger-secondary"],
+      description: "The appearance of the primary button",
+      type: "string",
+    },
+    cancelButton: {
+      control: "text",
+      description: "The content of the cancel button",
+      type: "string",
+    },
+    cancelButtonProps: {
+      control: "object",
+      description:
+        "Props to be passed to the cancel button. See Button for details.",
+    },
+    headerProps: {
+      control: "object",
+      description:
+        "Props to be passed to the header. See Dialog.Header for details.",
+    },
+    contentProps: {
+      control: "object",
+      description:
+        "Props to be passed to the content. See Dialog.Content for details.",
+    },
+    footerProps: {
+      control: "object",
+      description:
+        "Props to be passed to the footer. See Dialog.Footer for details.",
+    },
+    onConfirm: {
+      action: "onConfirm",
+      type: "function",
+      description: "Callback fired when the primary button is clicked",
+    },
+    onCancel: {
+      action: "onCancel",
+      type: "function",
+      description: "Callback fired when the cancel button is clicked",
+    },
+  },
+
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+} satisfies Meta<typeof UseConfirmDialogWrapper>;
+
+export default meta;
+
+const renderUseConfirmDialog: StoryFn<typeof UseConfirmDialogWrapper> = ({
+  header,
+  children,
+  primaryButton,
+  primaryButtonProps,
+  appearance,
+  cancelButton,
+  cancelButtonProps,
+  headerProps,
+  contentProps,
+  footerProps,
+  onConfirm,
+  onCancel,
+}) => {
+  return (
+    <UseConfirmDialogWrapper
+      header={header}
+      primaryButton={primaryButton}
+      primaryButtonProps={primaryButtonProps}
+      appearance={appearance}
+      cancelButton={cancelButton}
+      cancelButtonProps={cancelButtonProps}
+      headerProps={headerProps}
+      contentProps={contentProps}
+      footerProps={footerProps}
+      onConfirm={onConfirm}
+      onCancel={onCancel}
+    >
+      {children}
+    </UseConfirmDialogWrapper>
+  );
+};
+
+export const UseConfirmDefaults: StoryFn<typeof UseConfirmDialogWrapper> =
+  renderUseConfirmDialog;
+
+export const UseConfirmDanger: StoryObj<typeof UseConfirmDialogWrapper> = {
+  args: {
+    header: "Please Confirm",
+    children: "Are you sure you want to do this?",
+    primaryButton: "Yes, do it",
+    primaryButtonProps: {},
+    appearance: "danger",
+    cancelButton: undefined,
+    cancelButtonProps: {},
+    headerProps: {},
+    contentProps: {},
+    footerProps: {},
+    onConfirm: action("onConfirm"),
+    onCancel: action("onCancel"),
+  },
+
+  render: renderUseConfirmDialog,
+};

package/src/hooks/useConfirmDialog/useConfirmDialog.tsx

@@ -0,0 +1,89 @@
+import { useState } from "react";
+import { ConfirmDialog, ConfirmDialogProps } from "./ConfirmDialog";
+import { Optional, Prettify } from "../../types";
+
+export type UseConfirmDialogProps = Prettify<
+  Omit<Optional<ConfirmDialogProps, "open">, "onClose" | "onConfirm">
+>;
+
+/**
+ * useConfirmDialog hook for displaying a confirmation dialog.
+ * - simpler markup than building a whole <Dialog>
+ * - no need to explicitly manage its `open` state
+ *
+ * @param onConfirm (required) - Function to call when the confirmation action is taken.
+ * @param onClose (optional) - Function to call when the dialog is closed.
+ *
+ * @example
+ * ```ts
+ * const [ConfirmDelete, onDelete] = useConfirmDialog(store.onDelete);
+ *
+ * // Then in markup below:
+ * <ConfirmDelete header="Confirm Deletion" primaryButton="Delete" appearance="danger">
+ *     Are you sure you want to delete this item?
+ * </ConfirmDelete>
+ *
+ * // If no children are supplied, the default message 'Are you sure?' will be used.
+ * <ConfirmDelete />
+ * ```
+ *
+ * @example
+ * If you want to manually control the `open` state of the ConfirmDialog:
+ * ```ts
+ * const [ConfirmDelete] = useConfirmDialog(store.onDelete);
+ *
+ * // Then in markup below:
+ * <ConfirmDelete open={showConfirmDelete} header="Confirm Deletion" primaryButton="Delete" appearance="danger">
+ *     Are you sure you want to delete this item?
+ * </ConfirmDelete>
+ * ```
+ *
+ * @remarks
+ * - The returned `ConfirmDialog` component will handle its own open/close state,
+ *   or you can override it by passing the `open` prop to it.
+ *
+ * - The `onConfirm` function will be called when the user confirms the action.
+ *
+ * - If provided, the `onCancel` function will be called when the dialog is cancelled
+ *   (either by clicking the cancel button, the close button, or outside the dialog).
+ *
+ * - If you need to customize the dialog further:
+ *   - Any property of Anvil2's <Dialog> can be passed to <ConfirmDialog> except `open` and `onClose`
+ *
+ *   - The `header`, `primaryButton`, and `cancelButton` properties are typed as ReactNode,
+ *     so arbitrary React markup can be passed in addition to strings.
+ *
+ *   - The following properties are passed to the internal components:
+ *     `headerProps`, `contentProps`, `footerProps`, `cancelButtonProps`, `primaryButtonProps`
+ */
+export const useConfirmDialog = (
+  onConfirm: () => void,
+  onCancel?: () => void,
+) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onConfirmInner = () => {
+    onConfirm();
+    setIsOpen(false);
+  };
+
+  const closeDialogInner = () => {
+    onCancel?.();
+    setIsOpen(false);
+  };
+
+  const UseConfirmDialogInner = (props: UseConfirmDialogProps) => (
+    <ConfirmDialog
+      open={isOpen}
+      {...props} // allow `open` passed to <ConfirmDialog> to override internal `isOpen`
+      onConfirm={onConfirmInner}
+      onClose={closeDialogInner}
+    />
+  );
+
+  return [
+    UseConfirmDialogInner,
+    () => setIsOpen(true),
+    () => setIsOpen(false),
+  ] as const;
+};

package/src/index.ts

@@ -0,0 +1,4 @@
+/// <reference types="react/canary" />
+
+export * from "./hooks";
+export * from "./types";

package/src/types/index.ts

@@ -0,0 +1,7 @@
+// Make a select list of properties optional
+export type Optional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+
+// Improves display of complex types in Intellisense (VS Code and Visual Studio)
+export type Prettify<T> = {
+  [K in keyof T]: T[K];
+} & {};

package/tsconfig.build.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["**/*.stories.*", "**/internal/**"]
+}

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "useDefineForClassFields": true,
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,126 @@
+/// <reference types="vitest/config" />
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import dts from "vite-plugin-dts";
+import { libInjectCss } from "vite-plugin-lib-inject-css";
+import svgr from "vite-plugin-svgr";
+import { readdirSync } from "node:fs";
+import packageJson from "./package.json";
+
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
+
+const dirname =
+  typeof __dirname !== "undefined"
+    ? __dirname
+    : path.dirname(fileURLToPath(import.meta.url));
+
+const entries = ["hooks", "types"]
+  .map((folderName) =>
+    readdirSync(path.resolve(__dirname, `src/${folderName}`), {
+      withFileTypes: true,
+    })
+      .filter((dirent) => dirent.isDirectory())
+      .reduce(
+        (acc, dirent) => ({
+          ...acc,
+          [`${dirent.name}`]: `src/${folderName}/${dirent.name}/index.ts`,
+        }),
+        {},
+      ),
+  )
+  .reduce((acc, folderEntries) => ({ ...acc, ...folderEntries }), {});
+
+export default defineConfig({
+  plugins: [
+    react(),
+    libInjectCss(),
+    svgr({
+      include: "**/*.svg",
+      svgrOptions: {
+        icon: true,
+      },
+    }),
+    dts({
+      entryRoot: "src",
+      tsconfigPath: path.join(__dirname, "tsconfig.json"),
+      exclude: ["**/*.test.tsx", "**/*.test.ts", "**/*.stories.tsx"],
+      insertTypesEntry: true,
+    }),
+  ],
+  build: {
+    target: "esnext",
+    minify: false,
+    cssMinify: false,
+    outDir: "./dist",
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    sourcemap: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      entry: {
+        ...entries,
+        index: "src/index.ts",
+      },
+      formats: ["es"],
+    },
+    rollupOptions: {
+      external: [
+        ...Object.keys(packageJson.peerDependencies),
+        "@servicetitan/anvil2",
+        /react\/jsx-runtime/,
+      ],
+    },
+  },
+  css: {
+    postcss: "../../",
+  },
+  test: {
+    environment: "happy-dom",
+    exclude: ["**/node_modules/**"],
+    css: {
+      modules: {
+        classNameStrategy: "non-scoped",
+      },
+    },
+    projects: [
+      {
+        extends: true,
+        test: {
+          name: "unit",
+          setupFiles: ["vitest-setup.ts"],
+          include: ["**/*.test.ts", "**/*.test.tsx"],
+          // coverage: {
+          //   provider: "istanbul",
+          //   include: ["src/**"],
+          //   exclude: ["**/*.stories.tsx", "**/*.test.ts", "**/*.test.tsx"],
+          //   reporter: ["text", "json", "html"],
+          // },
+        },
+      },
+      {
+        extends: true,
+        plugins: [
+          // The plugin will run tests for the stories defined in your Storybook config
+          // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+          storybookTest({
+            configDir: path.join(dirname, ".storybook"),
+          }),
+        ],
+        test: {
+          name: "storybook",
+          browser: {
+            enabled: true,
+            headless: true,
+            provider: "playwright",
+            instances: [{ browser: "chromium" }],
+          },
+          setupFiles: [".storybook/vitest.setup.ts"],
+        },
+      },
+    ],
+  },
+});

package/vitest-setup.ts

@@ -0,0 +1,46 @@
+import * as axeMatchers from "vitest-axe/matchers";
+import matchers from "@testing-library/jest-dom/matchers";
+import { vi, afterEach, beforeAll, expect } from "vitest";
+import "vitest-axe/extend-expect";
+import { cleanup } from "@testing-library/react";
+
+expect.extend(matchers);
+expect.extend(axeMatchers);
+
+afterEach(() => {
+  cleanup();
+});
+
+beforeAll(() => {
+  HTMLDialogElement.prototype.showModal = vi.fn();
+  HTMLDialogElement.prototype.close = vi.fn();
+  HTMLElement.prototype.showPopover = vi.fn();
+  HTMLElement.prototype.hidePopover = vi.fn();
+});
+
+/**
+ * mocking window.matchMedia in JSDOM
+ * https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+ *
+ */
+Object.defineProperty(window, "matchMedia", {
+  writable: true,
+  value: vi.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+/**
+ * Fixes a testing throw from axe-core
+ * https://github.com/NickColley/jest-axe/issues/147
+ *
+ */
+const { getComputedStyle } = window;
+window.getComputedStyle = (elt) => getComputedStyle(elt);

package/vitest.shims.d.ts

@@ -0,0 +1 @@
+/// <reference types="@vitest/browser/providers/playwright" />