@7shifts/sous-chef 4.8.0 → 4.10.0

package/dist/media/ShortcutKey/ShortcutKey.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+type Props = {
+    /**
+     * 1, 2, or 3 key values. Use a named special key ('command', 'shift', 'escape', etc.)
+     * or a single character string for alphanumeric keys ('Z', '1', '/').
+     * Maximum of 3 keys.
+     */
+    keys: [string] | [string, string] | [string, string, string];
+    /** Override the default data-testid */
+    testId?: string;
+};
+/**
+ * ShortcutKey is a display-only component that communicates a keyboard shortcut
+ * associated with an action, tool, or command. It supports 1–3 key combinations.
+ *
+ * Use named special keys (e.g. 'command', 'shift', 'escape', 'arrow-left') or
+ * a single character for alphanumeric keys ('Z', '1', '/').
+ *
+ * Should always appear in context alongside the action it triggers — never standalone.
+ */
+declare const ShortcutKey: ({ keys, testId }: Props) => React.JSX.Element;
+export default ShortcutKey;

package/dist/media/ShortcutKey/index.d.ts

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

package/dist/media/index.d.ts

@@ -2,4 +2,5 @@ import Badge from './Badge';
 import Avatar from './Avatar';
 import Chip from './Chip';
 import Pill from './Pill';
-export { Badge, Avatar, Chip, Pill };
+import ShortcutKey from './ShortcutKey';
+export { Badge, Avatar, Chip, Pill, ShortcutKey };

package/dist/overlay/DropdownListDivider/DropdownListDivider.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 type Props = {
     testId?: string;
+    children?: React.ReactNode;
+    line?: 'top' | 'bottom' | 'both';
 };
-declare const DropdownListDivider: ({ testId }: Props) => React.JSX.Element;
+declare const DropdownListDivider: ({ testId, children, line }: Props) => React.JSX.Element;
 export default DropdownListDivider;

package/dist/overlay/DropdownListDividerLine/DropdownListDividerLine.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type Props = {
+    testId?: string;
+};
+declare const DropdownListDividerLine: ({ testId }: Props) => React.JSX.Element;
+export default DropdownListDividerLine;

package/dist/overlay/DropdownListDividerLine/index.d.ts

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

package/dist/overlay/HintModal/HintModal.d.ts

@@ -10,9 +10,10 @@ export type Props = {
     secondaryButton?: React.ReactElement;
     testId?: string;
     onSetDoNotShowAgainStatus?: (doNotShowAgain: boolean) => void;
+    hideDoNotShowAgainCheckbox?: boolean;
 } & PositionStyles;
 /**
  * Hint Modal is a lightweight modal used to surface tips, guidance, or onboarding callouts to users the first time they encounter a feature or page. Unlike a regular Modal, it is not triggered by a user action — it appears automatically when the user navigates somewhere that warrants a guided introduction. It includes a "Don't show this again" option so users can dismiss it permanently once they've absorbed the information.
  */
-declare const HintModal: ({ header, children, mediaUrl, onClose, modalId, primaryButton, secondaryButton, testId, onSetDoNotShowAgainStatus, ...positionProps }: Props) => React.JSX.Element;
+declare const HintModal: ({ header, children, mediaUrl, onClose, modalId, primaryButton, secondaryButton, testId, onSetDoNotShowAgainStatus, hideDoNotShowAgainCheckbox, ...positionProps }: Props) => React.JSX.Element;
 export default HintModal;

package/dist/overlay/Modal/Modal.d.ts

@@ -17,12 +17,19 @@ type Props = {
     maxWidth?: number | string;
     shouldReturnFocusAfterClose?: boolean;
     testId?: string;
+    /** Enables drag-to-reposition. The overlay becomes transparent and the modal can be moved by dragging its header. */
+    draggable?: boolean;
+    /** Initial screen position when draggable is true. Defaults to centered horizontally at 25% from top. */
+    initialPosition?: {
+        top: number;
+        left: number;
+    };
 } & DataProps;
 /**
  * Modal is a focused overlay that interrupts the current experience and demands the user's attention. It blocks all interaction with the rest of the page until the user responds — making it best suited for decisions, confirmations, and self-contained flows where that level of focus is warranted.
  */
 declare const Modal: {
-    ({ children, header, subHeader, onClose, loading, zIndex, rootElementId, width, height, maxWidth, shouldReturnFocusAfterClose, testId, ...otherProps }: Props): React.JSX.Element;
+    ({ children, header, subHeader, onClose, loading, zIndex, rootElementId, width, height, maxWidth, shouldReturnFocusAfterClose, testId, draggable, initialPosition, ...otherProps }: Props): React.JSX.Element;
     setAppElement(rootElement: string | HTMLElement): void;
 };
 export default Modal;

package/dist/overlay/Modal/ModalContext.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export type ModalContextType = {
     isModalMounted: boolean;
+    draggable: boolean;
 };
 declare const ModalContext: React.Context<ModalContextType>;
 export declare const useModalContext: () => ModalContextType;

package/dist/overlay/Modal/useDraggableModal.d.ts

@@ -0,0 +1,38 @@
+export type Options = {
+    width: number | string;
+    height?: number | string;
+    initialPosition?: {
+        top: number;
+        left: number;
+    };
+};
+export type DraggableModalState = {
+    nodeRef: React.RefObject<HTMLElement | null>;
+    /** Attach to the draggable inner div's `ref` prop. Keeps nodeRef in sync and drives measurement. */
+    callbackRef: React.RefCallback<HTMLElement>;
+    contentPosition: {
+        top: number;
+        left: number;
+    };
+    bounds: {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+    };
+};
+/**
+ * Encapsulates the ref, initial positioning, and viewport-aware bounds for a
+ * draggable modal. Pass the returned values to <Draggable> and the ReactModal
+ * style.content object.
+ *
+ * Bounds are expressed as pixel offsets from the element's rendered position
+ * (react-draggable v4.7+ no longer accepts "window" as a string shorthand).
+ *
+ * Initial bounds are estimated from the numeric width/height props (falling
+ * back to the CSS min-width/min-height defaults). After mount, the element is
+ * measured and bounds are corrected to the actual rendered dimensions so the
+ * modal cannot be dragged outside the viewport even when width/height are CSS
+ * strings or the content exceeds the fallback height.
+ */
+export declare function useDraggableModal({ width, height, initialPosition, }: Options): DraggableModalState;

package/dist/overlay/Modal/useModalPosition.d.ts

@@ -0,0 +1,10 @@
+export type ModalPosition = {
+    top: number;
+    left: number;
+};
+/**
+ * Returns the current modal position and an updater that centers the modal on
+ * the provided mouse event's coordinates, clamped to a 20px viewport margin.
+ * Useful when opening a draggable Modal relative to a user click.
+ */
+export declare const useModalPosition: (modalWidth?: number, modalHeight?: number) => [ModalPosition | undefined, (event: MouseEvent) => void];

package/dist/overlay/index.d.ts

@@ -10,4 +10,6 @@ import DropdownListItem from './DropdownListItem';
 import DropdownListItemSelectable from './DropdownListItemSelectable';
 import HintModal from './HintModal';
 import Popover from './Popover';
+export { useModalPosition } from './Modal/useModalPosition';
+export type { ModalPosition } from './Modal/useModalPosition';
 export { Tooltip, Modal, ModalBody, ModalFooter, Calendar, Dropdown, DropdownList, DropdownListDivider, DropdownListItem, DropdownListItemSelectable, HintModal, Popover };

package/dist/tests/visual.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Use the `visualTest` story parameter to control snapshot behaviour.
+ *
+ * @example — click a trigger before snapshotting (e.g. open a modal):
+ * export const OpenModal: Story = {
+ *   parameters: {
+ *     visualTest: {
+ *       clickToOpen: 'button',   // Playwright locator string; first match is clicked
+ *     },
+ *   },
+ * };
+ *
+ * @example — other supported options:
+ * parameters: {
+ *   visualTest: {
+ *     delay: 500,           // ms to wait before snapshotting (e.g. after an animation)
+ *     diffThreshold: 0.005, // override the default 0.1% pixel-diff tolerance
+ *     modes: true,          // also snapshot at mobile viewport (320px wide)
+ *   },
+ * },
+ */
+export type VisualTestParameters = {
+    clickToOpen?: string;
+    delay?: number;
+    diffThreshold?: number;
+    modes?: boolean;
+};

package/dist/typography/Text/constants.d.ts

@@ -8,6 +8,8 @@ export declare const TEXT_TYPES: {
     H5: "h5";
     INSIGHT: "insight";
     SPAN: "span";
+    PARAGRAPH: "paragraph";
+    TAGLINE: "tagline";
 };
 export declare const FONT_EMPHASIS: {
     BOLD: "bold";

package/dist/typography/Text/types.d.ts

@@ -1,3 +1,3 @@
-export type TextType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'body' | 'insight' | 'caption' | 'span';
+export type TextType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'body' | 'insight' | 'caption' | 'span' | 'paragraph' | 'tagline';
 export type Emphasis = 'bold' | 'italic' | 'underline' | 'dotted-underline' | 'monospace' | 'strikethrough';
 export type Alignment = 'left' | 'right' | 'center' | 'justify';

package/llms-instructions/guidelines/HintModal.guidelines.md

@@ -45,3 +45,4 @@ A `primaryButton` is required — typically a "Got it" button that closes the mo
 -   `primaryButton` is required. Pass a `Button` element — the component does not render default actions on its own.
 -   Visibility is partially managed internally via local storage. Once a user checks "Don't show again", the modal will not render again for that `modalId` unless the key is cleared.
 -   `onSetDoNotShowAgainStatus` fires when the checkbox state changes, if you need to sync this externally.
+-   `hideDoNotShowAgainCheckbox` hides the checkbox. `onSetDoNotShowAgainStatus` never fires.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@7shifts/sous-chef",
-    "version": "4.8.0",
+    "version": "4.10.0",
     "description": "7shifts component library",
     "author": "7shifts",
     "license": "MIT",
@@ -34,12 +34,12 @@
         "test:unit": "jest --runInBand",
         "test:unit:coverage": "jest --coverage",
         "test:watch": "jest --watch",
-        "test:visual": "chromatic --project-token=9226d55e4d56 --exit-zero-on-changes --build-script-name=storybook:chromatic:build --only-changed --exitOnceUploaded",
+        "test:visual": "storybook build -o .storybook/dist && (lsof -ti:6007 | xargs kill -9 2>/dev/null || true) && concurrently -k --success command-1 \"http-server .storybook/dist -p 6007 -q\" \"wait-on http://localhost:6007 && test-storybook --url http://localhost:6007 --index-json\"",
+        "test:visual:update": "storybook build -o .storybook/dist && (lsof -ti:6007 | xargs kill -9 2>/dev/null || true) && concurrently -k --success command-1 \"http-server .storybook/dist -p 6007 -q\" \"wait-on http://localhost:6007 && test-storybook --url http://localhost:6007 --index-json --updateSnapshot\"",
+        "test:visual:dev": "test-storybook --url http://localhost:6006 --index-json",
         "start": "yarn storybook",
         "storybook": "storybook dev -p 6006 --loglevel info",
-        "storybook:chromatic": "storybook dev -p 6006",
-        "storybook:chromatic:build": "storybook build -o ./.storybook/dist --webpack-stats-json",
-        "storybook:build": "storybook build -o ./.storybook/dist --loglevel info --webpack-stats-json",
+        "storybook:build": "storybook build -o ./.storybook/dist --loglevel info",
         "new:component": "node ./scripts/new-component.js",
         "changeset": "changeset",
         "version": "changeset version",
@@ -54,18 +54,21 @@
         "@babel/core": "^7.24.4",
         "@babel/preset-env": "^7.24.4",
         "@changesets/cli": "^2.29.8",
+        "@playwright/test": "^1.54.0",
         "@storybook/addon-a11y": "10.3.5",
         "@storybook/addon-docs": "10.3.5",
         "@storybook/addon-links": "10.3.5",
         "@storybook/addon-mcp": "^0.6.0",
         "@storybook/addon-onboarding": "10.3.5",
         "@storybook/react-vite": "10.3.5",
+        "@storybook/test-runner": "^0.24.4",
         "@svgr/cli": "^8.0.1",
         "@testing-library/jest-dom": "^5.12.0",
         "@testing-library/react": "^11.2.7",
         "@testing-library/react-hooks": "^8.0.1",
         "@testing-library/user-event": "^13.2.1",
         "@types/jest": "^25.1.4",
+        "@types/jest-image-snapshot": "^6.4.0",
         "@types/lodash-es": "^4.17.5",
         "@types/node": "^22",
         "@types/react": "^18.2.15",
@@ -75,7 +78,7 @@
         "@typescript-eslint/parser": "^6.11.0",
         "@vitejs/plugin-react": "^4.7.0",
         "babel-jest": "^29.7.0",
-        "chromatic": "^13.3.4",
+        "concurrently": "^9.1.0",
         "cross-env": "^7.0.3",
         "eslint": "^8.53.0",
         "eslint-config-prettier": "^9.0.0",
@@ -91,10 +94,12 @@
         "eslint-plugin-standard": "^5.0.0",
         "eslint-plugin-storybook": "10.3.5",
         "formik": "^2.2.6",
+        "http-server": "^14.1.1",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "jest-environment-jsdom-sixteen": "^2.0.0",
+        "jest-image-snapshot": "^6.5.2",
         "microbundle": "^0.15.1",
         "npm-run-all": "^4.1.5",
         "prompt": "^1.3.0",
@@ -107,7 +112,7 @@
         "ts-jest": "^29.1.2",
         "typescript": "^5.3.2",
         "vite": "^6.4.1",
-        "vite-plugin-turbosnap": "^1.0.3",
+        "wait-on": "^8.0.1",
         "yup": "^0.32.9"
     },
     "files": [
@@ -120,6 +125,7 @@
         "libphonenumber-js": "^1.10.36",
         "lodash-es": "^4.17.15",
         "react-day-picker": "^8.8.0",
+        "react-draggable": "^4.4.5",
         "react-modal": "^3.16.1",
         "react-router-dom": "5.1.2 - 6.7.0",
         "react-select": "^5.10.0",