@servicetitan/anvil2-ext-common 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @servicetitan/anvil2-ext-common
 
+## 0.1.1
+
+### Patch Changes
+
+- [`d97ef4d`](https://github.com/servicetitan/hammer/commit/d97ef4d33c6240831a48b38e70305a6b5eb33d6d) Thanks [@rgdelato](https://github.com/rgdelato)! - [ext-common] Fix `package.json` `files` property
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/hooks/index.d.ts

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

package/dist/hooks/useConfirmDialog/ConfirmDialog.d.ts

@@ -0,0 +1,74 @@
+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 declare const ConfirmDialog: FC<ConfirmDialogProps>;

package/dist/hooks/useConfirmDialog/index.d.ts

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

package/{src/hooks/useConfirmDialog/useConfirmDialog.tsx → dist/hooks/useConfirmDialog/useConfirmDialog.d.ts}

@@ -1,11 +1,6 @@
-import { useState } from "react";
-import { ConfirmDialog, ConfirmDialogProps } from "./ConfirmDialog";
-import { Optional, Prettify } from "../../types";
-
-export type UseConfirmDialogProps = Prettify<
-  Omit<Optional<ConfirmDialogProps, "open">, "onClose" | "onConfirm">
->;
-
+import { 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>
@@ -56,34 +51,4 @@ export type UseConfirmDialogProps = Prettify<
  *   - 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;
-};
+export declare const useConfirmDialog: (onConfirm: () => void, onCancel?: () => void) => readonly [(props: UseConfirmDialogProps) => import("react/jsx-runtime").JSX.Element, () => void, () => void];

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './hooks';
+export * from './types';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { u as useConfirmDialog } from './useConfirmDialog-DaQ5Golt.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/types/index.d.ts

@@ -0,0 +1,4 @@
+export type Optional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+export type Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/useConfirmDialog-DaQ5Golt.js

@@ -0,0 +1,61 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Dialog, Button } from '@servicetitan/anvil2';
+
+const ConfirmDialog = ({
+  appearance = "primary",
+  header = "Confirm",
+  children = "Are you sure?",
+  primaryButton = "OK",
+  cancelButton = "Cancel",
+  onConfirm,
+  cancelButtonProps,
+  primaryButtonProps,
+  headerProps,
+  contentProps,
+  footerProps,
+  ...dialogProps
+}) => {
+  const primaryButtonInternalProps = {
+    appearance,
+    onClick: onConfirm,
+    children: primaryButton
+  };
+  return /* @__PURE__ */ jsxs(Dialog, { ...dialogProps, children: [
+    /* @__PURE__ */ jsx(Dialog.Header, { ...headerProps, children: header }),
+    /* @__PURE__ */ jsx(Dialog.Content, { ...contentProps, children }),
+    /* @__PURE__ */ jsxs(Dialog.Footer, { ...footerProps, children: [
+      /* @__PURE__ */ jsx(Dialog.CancelButton, { ...cancelButtonProps, children: cancelButton }),
+      /* @__PURE__ */ jsx(Button, { ...primaryButtonInternalProps, ...primaryButtonProps })
+    ] })
+  ] });
+};
+
+const useConfirmDialog = (onConfirm, onCancel) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const onConfirmInner = () => {
+    onConfirm();
+    setIsOpen(false);
+  };
+  const closeDialogInner = () => {
+    onCancel?.();
+    setIsOpen(false);
+  };
+  const UseConfirmDialogInner = (props) => /* @__PURE__ */ jsx(
+    ConfirmDialog,
+    {
+      open: isOpen,
+      ...props,
+      onConfirm: onConfirmInner,
+      onClose: closeDialogInner
+    }
+  );
+  return [
+    UseConfirmDialogInner,
+    () => setIsOpen(true),
+    () => setIsOpen(false)
+  ];
+};
+
+export { useConfirmDialog as u };
+//# sourceMappingURL=useConfirmDialog-DaQ5Golt.js.map

package/dist/useConfirmDialog-DaQ5Golt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConfirmDialog-DaQ5Golt.js","sources":["../src/hooks/useConfirmDialog/ConfirmDialog.tsx","../src/hooks/useConfirmDialog/useConfirmDialog.tsx"],"sourcesContent":["import { ComponentProps, ComponentPropsWithRef, FC, ReactNode } from \"react\";\nimport { Button, Dialog } from \"@servicetitan/anvil2\";\nimport { Prettify } from \"../../types\";\n\nexport interface PrimaryButtonInternalProps {\n  appearance?: ComponentProps<typeof Button>[\"appearance\"];\n  onClick?: () => void;\n  children: ReactNode;\n}\n\nexport interface ConfirmDialogInternalProps {\n  /**\n   * Callback function when the confirm button is clicked\n   */\n  onConfirm: () => void;\n\n  /**\n   * Content to be displayed in the dialog\n   * @defaultValue 'Are you sure?'\n   */\n  children?: ReactNode;\n\n  /**\n   * Appearance of the primary button\n   * @defaultValue 'primary'\n   */\n  appearance?: PrimaryButtonInternalProps[\"appearance\"];\n\n  /**\n   * Header content of the dialog\n   * @defaultValue 'Confirm'\n   */\n  header?: ReactNode;\n\n  /**\n   * Content of the primary button\n   * @defaultValue 'OK'\n   */\n  primaryButton?: ReactNode;\n\n  /**\n   * Content of the cancel button\n   * @defaultValue 'Cancel'\n   */\n  cancelButton?: ReactNode;\n\n  /**\n   * Props to be passed to the internal <Dialog.Header>\n   */\n  headerProps?: Omit<ComponentPropsWithRef<typeof Dialog.Header>, \"children\">;\n\n  /**\n   * Props to be passed to the internal <Dialog.Content>\n   */\n  contentProps?: Omit<ComponentPropsWithRef<typeof Dialog.Content>, \"children\">;\n\n  /**\n   * Props to be passed to the internal <Dialog.Footer>\n   */\n  footerProps?: Omit<ComponentPropsWithRef<typeof Dialog.Footer>, \"children\">;\n\n  /**\n   * Props to be passed to the internal <Dialog.CancelButton>\n   */\n  cancelButtonProps?: Omit<\n    ComponentPropsWithRef<typeof Dialog.CancelButton>,\n    \"children\"\n  >;\n\n  /**\n   * Props to be passed to the internal primary <Button>\n   */\n  primaryButtonProps?: Omit<\n    ComponentPropsWithRef<typeof Button>,\n    keyof PrimaryButtonInternalProps\n  >;\n}\n\nexport type ConfirmDialogProps = Prettify<\n  ConfirmDialogInternalProps &\n    Omit<ComponentPropsWithRef<typeof Dialog>, keyof ConfirmDialogInternalProps>\n>;\n\n/**\n * ConfirmDialog component for displaying a simple confirmation dialog.\n *\n * @remarks\n * - Any property of Anvil's <Dialog> can be passed directly to <ConfirmDialog>\n *\n * - header, primaryButton, and cancelButton are typed as ReactNode,\n *   so arbitrary React markup can be passed in addition to strings.\n *\n * - headerProps, contentProps, footerProps, cancelButtonProps, and primaryButtonProps\n *   can be used to customize the internal components. They will be forwarded directly\n *   to <Dialog.Header>, <Dialog.Content>, <Dialog.Footer>, etc.\n */\nexport const ConfirmDialog: FC<ConfirmDialogProps> = ({\n  appearance = \"primary\",\n  header = \"Confirm\",\n  children = \"Are you sure?\",\n  primaryButton = \"OK\",\n  cancelButton = \"Cancel\",\n  onConfirm,\n  cancelButtonProps,\n  primaryButtonProps,\n  headerProps,\n  contentProps,\n  footerProps,\n  ...dialogProps\n}: ConfirmDialogProps) => {\n  const primaryButtonInternalProps: PrimaryButtonInternalProps = {\n    appearance,\n    onClick: onConfirm,\n    children: primaryButton,\n  };\n\n  return (\n    <Dialog {...dialogProps}>\n      <Dialog.Header {...headerProps}>{header}</Dialog.Header>\n      <Dialog.Content {...contentProps}>{children}</Dialog.Content>\n      <Dialog.Footer {...footerProps}>\n        <Dialog.CancelButton {...cancelButtonProps}>\n          {cancelButton}\n        </Dialog.CancelButton>\n\n        {/* allow primaryButtonProps object to override the explicit top-level props - primaryButton, appearance, onClick */}\n        <Button {...primaryButtonInternalProps} {...primaryButtonProps} />\n      </Dialog.Footer>\n    </Dialog>\n  );\n};\n","import { useState } from \"react\";\nimport { ConfirmDialog, ConfirmDialogProps } from \"./ConfirmDialog\";\nimport { Optional, Prettify } from \"../../types\";\n\nexport type UseConfirmDialogProps = Prettify<\n  Omit<Optional<ConfirmDialogProps, \"open\">, \"onClose\" | \"onConfirm\">\n>;\n\n/**\n * useConfirmDialog hook for displaying a confirmation dialog.\n * - simpler markup than building a whole <Dialog>\n * - no need to explicitly manage its `open` state\n *\n * @param onConfirm (required) - Function to call when the confirmation action is taken.\n * @param onClose (optional) - Function to call when the dialog is closed.\n *\n * @example\n * ```ts\n * const [ConfirmDelete, onDelete] = useConfirmDialog(store.onDelete);\n *\n * // Then in markup below:\n * <ConfirmDelete header=\"Confirm Deletion\" primaryButton=\"Delete\" appearance=\"danger\">\n *     Are you sure you want to delete this item?\n * </ConfirmDelete>\n *\n * // If no children are supplied, the default message 'Are you sure?' will be used.\n * <ConfirmDelete />\n * ```\n *\n * @example\n * If you want to manually control the `open` state of the ConfirmDialog:\n * ```ts\n * const [ConfirmDelete] = useConfirmDialog(store.onDelete);\n *\n * // Then in markup below:\n * <ConfirmDelete open={showConfirmDelete} header=\"Confirm Deletion\" primaryButton=\"Delete\" appearance=\"danger\">\n *     Are you sure you want to delete this item?\n * </ConfirmDelete>\n * ```\n *\n * @remarks\n * - The returned `ConfirmDialog` component will handle its own open/close state,\n *   or you can override it by passing the `open` prop to it.\n *\n * - The `onConfirm` function will be called when the user confirms the action.\n *\n * - If provided, the `onCancel` function will be called when the dialog is cancelled\n *   (either by clicking the cancel button, the close button, or outside the dialog).\n *\n * - If you need to customize the dialog further:\n *   - Any property of Anvil2's <Dialog> can be passed to <ConfirmDialog> except `open` and `onClose`\n *\n *   - The `header`, `primaryButton`, and `cancelButton` properties are typed as ReactNode,\n *     so arbitrary React markup can be passed in addition to strings.\n *\n *   - The following properties are passed to the internal components:\n *     `headerProps`, `contentProps`, `footerProps`, `cancelButtonProps`, `primaryButtonProps`\n */\nexport const useConfirmDialog = (\n  onConfirm: () => void,\n  onCancel?: () => void,\n) => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const onConfirmInner = () => {\n    onConfirm();\n    setIsOpen(false);\n  };\n\n  const closeDialogInner = () => {\n    onCancel?.();\n    setIsOpen(false);\n  };\n\n  const UseConfirmDialogInner = (props: UseConfirmDialogProps) => (\n    <ConfirmDialog\n      open={isOpen}\n      {...props} // allow `open` passed to <ConfirmDialog> to override internal `isOpen`\n      onConfirm={onConfirmInner}\n      onClose={closeDialogInner}\n    />\n  );\n\n  return [\n    UseConfirmDialogInner,\n    () => setIsOpen(true),\n    () => setIsOpen(false),\n  ] as const;\n};\n"],"names":[],"mappings":";;;;AAgGO,MAAM,gBAAwC,CAAC;AAAA,EACpD,UAAA,GAAa,SAAA;AAAA,EACb,MAAA,GAAS,SAAA;AAAA,EACT,QAAA,GAAW,eAAA;AAAA,EACX,aAAA,GAAgB,IAAA;AAAA,EAChB,YAAA,GAAe,QAAA;AAAA,EACf,SAAA;AAAA,EACA,iBAAA;AAAA,EACA,kBAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG;AACL,CAAA,KAA0B;AACxB,EAAA,MAAM,0BAAA,GAAyD;AAAA,IAC7D,UAAA;AAAA,IACA,OAAA,EAAS,SAAA;AAAA,IACT,QAAA,EAAU;AAAA,GACZ;AAEA,EAAA,uBACE,IAAA,CAAC,MAAA,EAAA,EAAQ,GAAG,WAAA,EACV,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,CAAO,MAAA,EAAP,EAAe,GAAG,aAAc,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,wBACvC,MAAA,CAAO,OAAA,EAAP,EAAgB,GAAG,cAAe,QAAA,EAAS,CAAA;AAAA,oBAC5C,IAAA,CAAC,MAAA,CAAO,MAAA,EAAP,EAAe,GAAG,WAAA,EACjB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,MAAA,CAAO,YAAA,EAAP,EAAqB,GAAG,mBACtB,QAAA,EAAA,YAAA,EACH,CAAA;AAAA,sBAGA,GAAA,CAAC,MAAA,EAAA,EAAQ,GAAG,0BAAA,EAA6B,GAAG,kBAAA,EAAoB;AAAA,KAAA,EAClE;AAAA,GAAA,EACF,CAAA;AAEJ,CAAA;;ACxEO,MAAM,gBAAA,GAAmB,CAC9B,SAAA,EACA,QAAA,KACG;AACH,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAS,KAAK,CAAA;AAE1C,EAAA,MAAM,iBAAiB,MAAM;AAC3B,IAAA,SAAA,EAAU;AACV,IAAA,SAAA,CAAU,KAAK,CAAA;AAAA,EACjB,CAAA;AAEA,EAAA,MAAM,mBAAmB,MAAM;AAC7B,IAAA,QAAA,IAAW;AACX,IAAA,SAAA,CAAU,KAAK,CAAA;AAAA,EACjB,CAAA;AAEA,EAAA,MAAM,qBAAA,GAAwB,CAAC,KAAA,qBAC7B,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,MAAA;AAAA,MACL,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,cAAA;AAAA,MACX,OAAA,EAAS;AAAA;AAAA,GACX;AAGF,EAAA,OAAO;AAAA,IACL,qBAAA;AAAA,IACA,MAAM,UAAU,IAAI,CAAA;AAAA,IACpB,MAAM,UAAU,KAAK;AAAA,GACvB;AACF;;;;"}

package/dist/useConfirmDialog.d.ts

@@ -0,0 +1,6 @@
+export * from './hooks/useConfirmDialog/index'
+export {}
+import _default from './hooks/useConfirmDialog/index'
+export default _default
+export * from './hooks/useConfirmDialog/index'
+export {}

package/dist/useConfirmDialog.js

@@ -0,0 +1,2 @@
+export { u as default, u as useConfirmDialog } from './useConfirmDialog-DaQ5Golt.js';
+//# sourceMappingURL=useConfirmDialog.js.map

package/dist/useConfirmDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConfirmDialog.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/package.json

@@ -1,9 +1,22 @@
 {
   "name": "@servicetitan/anvil2-ext-common",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
+  "module": ".",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "files": [
+    "dist",
+    "CHANGELOG.md"
+  ],
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
+  },
   "keywords": [],
   "author": "",
   "license": "ISC",

package/.storybook/main.ts

@@ -1,35 +0,0 @@
-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

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

package/.storybook/preview.tsx

@@ -1,203 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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/eslint.config.js

@@ -1,5 +0,0 @@
-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/src/hooks/index.ts

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

package/src/hooks/useConfirmDialog/ConfirmDialog.tsx

@@ -1,131 +0,0 @@
-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

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

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

@@ -1,177 +0,0 @@
-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/index.ts

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

package/src/types/index.ts

@@ -1,7 +0,0 @@
-// 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

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

package/tsconfig.json

@@ -1,25 +0,0 @@
-{
-  "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

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

package/vite.config.ts

@@ -1,126 +0,0 @@
-/// <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

@@ -1,46 +0,0 @@
-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

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