@manuscripts/style-guide 3.3.6 → 3.3.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "3.3.6",
+  "version": "3.3.8",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -20,7 +20,7 @@
     "build:es": "tsc --outDir dist/es --declarationDir dist/types --declaration",
     "build-storybook": "storybook build",
     "dev": "npm-run-all --parallel 'build:* --watch'",
-    "lint": "eslint src stories --ext .ts,.tsx --max-warnings=0",
+    "lint": "eslint src stories --ext .ts,.tsx --max-warnings=0 --fix",
     "prebuild": "rimraf dist",
     "prettier": "prettier --write \"{src,stories}/**/*.{ts,tsx}\"",
     "preversion": "npm-run-all --parallel lint typecheck test",
@@ -31,7 +31,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@headlessui/react": "2.2.3",
+    "@headlessui/react": "2.2.9",
     "@manuscripts/json-schema": "2.2.12",
     "date-fns": "2.30.0",
     "formik": "2.4.6",
@@ -42,16 +42,14 @@
     "prosemirror-model": "1.25.0",
     "prosemirror-state": "1.4.3",
     "prosemirror-view": "1.40.0",
-    "react": "18.3.1",
+    "react": "19.2.0",
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
-    "react-dom": "18.3.1",
-    "react-is": "18.3.1",
+    "react-dom": "19.2.0",
+    "react-is": "19.2.0",
     "react-modal": "3.16.3",
-    "react-modern-calendar-datepicker": "3.1.6",
     "react-router-dom": "5.3.4",
     "react-select": "5.10.1",
-    "react-sizeme": "3.0.2",
     "react-tooltip": "5.28.1",
     "styled-components": "5.3.11"
   },
@@ -63,24 +61,26 @@
     "@eslint/eslintrc": "3.3.1",
     "@eslint/js": "9.39.1",
     "@manuscripts/eslint-config": "0.5.1",
-    "@storybook/addon-actions": "7.6.10",
-    "@storybook/addon-essentials": "7.6.10",
-    "@storybook/addon-interactions": "7.6.10",
-    "@storybook/addon-links": "7.6.10",
-    "@storybook/blocks": "7.6.10",
-    "@storybook/react": "7.6.10",
-    "@storybook/react-webpack5": "7.6.10",
-    "@storybook/test": "7.6.10",
+    "@storybook/addon-actions": "8.5.3",
+    "@storybook/addon-essentials": "8.5.3",
+    "@storybook/addon-interactions": "8.5.3",
+    "@storybook/addon-links": "8.5.3",
+    "@storybook/blocks": "8.5.3",
+    "@storybook/react": "8.5.3",
+    "@storybook/react-webpack5": "8.5.3",
+    "@storybook/test": "8.5.3",
     "@types/jest": "30.0.0",
     "@types/lodash": "4.17.16",
-    "@types/react": "18.3.21",
-    "@types/react-dom": "18.3.7",
+    "@types/node": "^20.19.25",
+    "@types/react": "19.2.3",
+    "@types/react-dom": "19.2.3",
     "@types/react-modal": "3.16.3",
     "@types/react-router-dom": "5.3.3",
     "@types/styled-components": "5.1.34",
     "@typescript-eslint/eslint-plugin": "8.46.4",
     "@typescript-eslint/parser": "8.46.4",
     "babel-jest": "30.0.5",
+    "babel-loader": "9.1.3",
     "eslint": "9.39.1",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-diff": "2.0.3",
@@ -102,7 +102,7 @@
     "npm-run-all": "4.1.5",
     "prettier": "3.6.2",
     "rimraf": "6.0.1",
-    "storybook": "7.6.10",
+    "storybook": "8.5.3",
     "typeface-lato": "1.1.13",
     "typescript": "5.9.2"
   },

package/dist/cjs/components/DatePicker/CalendarDatePicker.js

@@ -1,169 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CalendarDatePicker = exports.calendarDatePickerDefaultDateFormat = exports.calendarPotentialDueDate = exports.calendarGetDay = void 0;
-require("react-modern-calendar-datepicker/lib/DatePicker.css");
-const date_fns_1 = require("date-fns");
-const react_1 = __importStar(require("react"));
-const react_modern_calendar_datepicker_1 = __importDefault(require("react-modern-calendar-datepicker"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const Dialog_1 = require("../Dialog");
-const calendarGetDay = (date) => ({
-    year: date.getFullYear(),
-    month: date.getMonth() + 1,
-    day: date.getDate(),
-});
-exports.calendarGetDay = calendarGetDay;
-const calendarPotentialDueDate = (stepDueDate, dueDate, submissionDueDate) => {
-    const duration = (0, date_fns_1.intervalToDuration)({
-        start: stepDueDate,
-        end: new Date(`${dueDate.year}-${dueDate.month < 10 ? `0${dueDate.month}` : dueDate.month}-${dueDate.day < 10 ? `0${dueDate.day}` : dueDate.day}`),
-    });
-    return (0, date_fns_1.add)(submissionDueDate, duration);
-};
-exports.calendarPotentialDueDate = calendarPotentialDueDate;
-const calendarDatePickerDefaultDateFormat = 'd MMM, EEEE';
-exports.calendarDatePickerDefaultDateFormat = calendarDatePickerDefaultDateFormat;
-const CalendarDatePicker = ({ Button, handleDateChange, originalDueDate, currentDueDate, datePickerConfigs, dialogConfigs, primaryButtonTitle = 'Reschedule', secondaryButtonTitle = 'Cancel', }) => {
-    datePickerConfigs = {
-        position: 'bottom',
-        color: '#f2fbfc',
-        selectedDayClassName: 'selected-day',
-        calendarClassName: 'responsive-calendar',
-        ...datePickerConfigs,
-    };
-    const dialog = Object.assign({}, dialogConfigs, {
-        header: 'Change the task due date?',
-    });
-    const [dueDate, setDueDate] = (0, react_1.useState)();
-    const [toggleDialog, setToggleDialog] = (0, react_1.useState)(false);
-    const onConfirmClick = (0, react_1.useCallback)(() => {
-        handleDateChange(dueDate);
-        setToggleDialog(false);
-    }, [dueDate, setToggleDialog, handleDateChange]);
-    const formattedDueDate = (0, react_1.useMemo)(() => dueDate &&
-        (0, date_fns_1.format)(new Date(dueDate.year, dueDate.month, dueDate.day), calendarDatePickerDefaultDateFormat), [dueDate]);
-    const formattedPotentialDueDate = (0, react_1.useMemo)(() => dueDate &&
-        (0, date_fns_1.format)(calendarPotentialDueDate(currentDueDate, dueDate, originalDueDate), calendarDatePickerDefaultDateFormat), [originalDueDate, currentDueDate, dueDate]);
-    const onDatePickerChange = (0, react_1.useCallback)((date) => {
-        setDueDate(date);
-        setToggleDialog(true);
-        const button = document.querySelector('.DatePicker button');
-        button.blur();
-    }, []);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Calendar, null,
-            react_1.default.createElement(react_modern_calendar_datepicker_1.default, { value: calendarGetDay(currentDueDate), onChange: onDatePickerChange, calendarPopperPosition: datePickerConfigs.position, colorPrimary: datePickerConfigs.color, calendarSelectedDayClassName: datePickerConfigs.selectedDayClassName, calendarClassName: datePickerConfigs.calendarClassName, renderInput: Button })),
-        react_1.default.createElement(Dialog_1.Dialog, { isOpen: toggleDialog, category: Dialog_1.Category.confirmation, header: dialog.header, message: react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(UpdatedDueDate, null, formattedDueDate),
-                dialog.dueDateMessage && (react_1.default.createElement(DueDateMessage, null, dialog.dueDateMessage)),
-                react_1.default.createElement(Value, null,
-                    react_1.default.createElement(StrikeDueDate, { as: 'del' }, (0, date_fns_1.format)(originalDueDate, calendarDatePickerDefaultDateFormat)),
-                    formattedPotentialDueDate)), actions: {
-                primary: {
-                    action: onConfirmClick,
-                    title: primaryButtonTitle,
-                },
-                secondary: {
-                    action: () => setToggleDialog(false),
-                    title: secondaryButtonTitle,
-                },
-            } })));
-};
-exports.CalendarDatePicker = CalendarDatePicker;
-const StrikeDueDate = (0, styled_components_1.default)(Dialog_1.MessageContainer) `
-  margin: 0;
-  min-height: min-content;
-  padding-right: ${(props) => props.theme.grid.unit}px;
-`;
-const Value = styled_components_1.default.div `
-  flex: 1;
-  display: flex;
-  color: ${(props) => props.theme.colors.text.primary};
-  align-items: center;
-  line-height: 1;
-`;
-const Calendar = styled_components_1.default.div `
-  flex: 1;
-
-  .DatePicker {
-    width: 100%;
-  }
-
-  .DatePicker__calendarContainer {
-    position: absolute;
-    top: unset;
-    left: unset !important;
-    right: 0 !important;
-    transform: unset !important;
-  }
-
-  .Calendar__weekDay {
-    color: #e6e6e6;
-    font-size: ${(props) => props.theme.font.size.normal};
-    line-height: ${(props) => props.theme.font.lineHeight.large};
-    font-weight: ${(props) => props.theme.font.weight.medium};
-  }
-
-  .Calendar__day:not(.-blank):not(.-selected):hover {
-    background: #f2fbfc !important;
-  }
-
-  .Calendar__day.-today:hover::after {
-    opacity: 0.5 !important;
-  }
-
-  .selected-day {
-    color: ${(props) => props.theme.colors.text.primary} !important;
-    border: 1px solid ${(props) => props.theme.colors.border.primary} !important;
-  }
-`;
-const UpdatedDueDate = styled_components_1.default.div `
-  background: ${(props) => props.theme.colors.background.secondary};
-  color: ${(props) => props.theme.colors.text.primary};
-  width: max-content;
-  border: 1px solid ${(props) => props.theme.colors.border.secondary};
-  box-sizing: border-box;
-  border-radius: ${(props) => props.theme.grid.unit}px;
-  padding: ${(props) => props.theme.grid.unit}px
-    ${(props) => props.theme.grid.unit * 2}px;
-`;
-const DueDateMessage = (0, styled_components_1.default)(Dialog_1.MessageContainer) `
-  min-height: min-content;
-  margin: ${(props) => props.theme.grid.unit * 6}px 0 0 0;
-`;

package/dist/cjs/components/DatePicker/index.js

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./CalendarDatePicker"), exports);

package/dist/es/components/DatePicker/CalendarDatePicker.js

@@ -1,127 +0,0 @@
-import 'react-modern-calendar-datepicker/lib/DatePicker.css';
-import { add, format, intervalToDuration } from 'date-fns';
-import React, { useCallback, useMemo, useState } from 'react';
-import DatePicker from 'react-modern-calendar-datepicker';
-import styled from 'styled-components';
-import { Category, Dialog, MessageContainer } from '../Dialog';
-const calendarGetDay = (date) => ({
-    year: date.getFullYear(),
-    month: date.getMonth() + 1,
-    day: date.getDate(),
-});
-const calendarPotentialDueDate = (stepDueDate, dueDate, submissionDueDate) => {
-    const duration = intervalToDuration({
-        start: stepDueDate,
-        end: new Date(`${dueDate.year}-${dueDate.month < 10 ? `0${dueDate.month}` : dueDate.month}-${dueDate.day < 10 ? `0${dueDate.day}` : dueDate.day}`),
-    });
-    return add(submissionDueDate, duration);
-};
-const calendarDatePickerDefaultDateFormat = 'd MMM, EEEE';
-const CalendarDatePicker = ({ Button, handleDateChange, originalDueDate, currentDueDate, datePickerConfigs, dialogConfigs, primaryButtonTitle = 'Reschedule', secondaryButtonTitle = 'Cancel', }) => {
-    datePickerConfigs = {
-        position: 'bottom',
-        color: '#f2fbfc',
-        selectedDayClassName: 'selected-day',
-        calendarClassName: 'responsive-calendar',
-        ...datePickerConfigs,
-    };
-    const dialog = Object.assign({}, dialogConfigs, {
-        header: 'Change the task due date?',
-    });
-    const [dueDate, setDueDate] = useState();
-    const [toggleDialog, setToggleDialog] = useState(false);
-    const onConfirmClick = useCallback(() => {
-        handleDateChange(dueDate);
-        setToggleDialog(false);
-    }, [dueDate, setToggleDialog, handleDateChange]);
-    const formattedDueDate = useMemo(() => dueDate &&
-        format(new Date(dueDate.year, dueDate.month, dueDate.day), calendarDatePickerDefaultDateFormat), [dueDate]);
-    const formattedPotentialDueDate = useMemo(() => dueDate &&
-        format(calendarPotentialDueDate(currentDueDate, dueDate, originalDueDate), calendarDatePickerDefaultDateFormat), [originalDueDate, currentDueDate, dueDate]);
-    const onDatePickerChange = useCallback((date) => {
-        setDueDate(date);
-        setToggleDialog(true);
-        const button = document.querySelector('.DatePicker button');
-        button.blur();
-    }, []);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Calendar, null,
-            React.createElement(DatePicker, { value: calendarGetDay(currentDueDate), onChange: onDatePickerChange, calendarPopperPosition: datePickerConfigs.position, colorPrimary: datePickerConfigs.color, calendarSelectedDayClassName: datePickerConfigs.selectedDayClassName, calendarClassName: datePickerConfigs.calendarClassName, renderInput: Button })),
-        React.createElement(Dialog, { isOpen: toggleDialog, category: Category.confirmation, header: dialog.header, message: React.createElement(React.Fragment, null,
-                React.createElement(UpdatedDueDate, null, formattedDueDate),
-                dialog.dueDateMessage && (React.createElement(DueDateMessage, null, dialog.dueDateMessage)),
-                React.createElement(Value, null,
-                    React.createElement(StrikeDueDate, { as: 'del' }, format(originalDueDate, calendarDatePickerDefaultDateFormat)),
-                    formattedPotentialDueDate)), actions: {
-                primary: {
-                    action: onConfirmClick,
-                    title: primaryButtonTitle,
-                },
-                secondary: {
-                    action: () => setToggleDialog(false),
-                    title: secondaryButtonTitle,
-                },
-            } })));
-};
-const StrikeDueDate = styled(MessageContainer) `
-  margin: 0;
-  min-height: min-content;
-  padding-right: ${(props) => props.theme.grid.unit}px;
-`;
-const Value = styled.div `
-  flex: 1;
-  display: flex;
-  color: ${(props) => props.theme.colors.text.primary};
-  align-items: center;
-  line-height: 1;
-`;
-const Calendar = styled.div `
-  flex: 1;
-
-  .DatePicker {
-    width: 100%;
-  }
-
-  .DatePicker__calendarContainer {
-    position: absolute;
-    top: unset;
-    left: unset !important;
-    right: 0 !important;
-    transform: unset !important;
-  }
-
-  .Calendar__weekDay {
-    color: #e6e6e6;
-    font-size: ${(props) => props.theme.font.size.normal};
-    line-height: ${(props) => props.theme.font.lineHeight.large};
-    font-weight: ${(props) => props.theme.font.weight.medium};
-  }
-
-  .Calendar__day:not(.-blank):not(.-selected):hover {
-    background: #f2fbfc !important;
-  }
-
-  .Calendar__day.-today:hover::after {
-    opacity: 0.5 !important;
-  }
-
-  .selected-day {
-    color: ${(props) => props.theme.colors.text.primary} !important;
-    border: 1px solid ${(props) => props.theme.colors.border.primary} !important;
-  }
-`;
-const UpdatedDueDate = styled.div `
-  background: ${(props) => props.theme.colors.background.secondary};
-  color: ${(props) => props.theme.colors.text.primary};
-  width: max-content;
-  border: 1px solid ${(props) => props.theme.colors.border.secondary};
-  box-sizing: border-box;
-  border-radius: ${(props) => props.theme.grid.unit}px;
-  padding: ${(props) => props.theme.grid.unit}px
-    ${(props) => props.theme.grid.unit * 2}px;
-`;
-const DueDateMessage = styled(MessageContainer) `
-  min-height: min-content;
-  margin: ${(props) => props.theme.grid.unit * 6}px 0 0 0;
-`;
-export { calendarGetDay, calendarPotentialDueDate, calendarDatePickerDefaultDateFormat, CalendarDatePicker, };

package/dist/es/components/DatePicker/index.js

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

package/dist/types/components/DatePicker/CalendarDatePicker.d.ts

@@ -1,32 +0,0 @@
-import 'react-modern-calendar-datepicker/lib/DatePicker.css';
-import React from 'react';
-import { Day, DayValue, RenderInputProps } from 'react-modern-calendar-datepicker';
-declare const calendarGetDay: (date: Date) => {
-    year: number;
-    month: number;
-    day: number;
-};
-declare const calendarPotentialDueDate: (stepDueDate: Date, dueDate: Day, submissionDueDate: Date) => Date;
-declare const calendarDatePickerDefaultDateFormat = "d MMM, EEEE";
-type CalendarDatePickerConfigs = {
-    color?: string;
-    position?: 'auto' | 'top' | 'bottom';
-    calendarClassName?: string;
-    selectedDayClassName?: string;
-};
-type CalendarDialogConfigs = {
-    header?: string;
-    dueDateMessage?: string;
-};
-type CalendarDatePickerProps = {
-    currentDueDate: Date;
-    originalDueDate: Date;
-    handleDateChange: (day: DayValue) => void;
-    datePickerConfigs?: CalendarDatePickerConfigs;
-    dialogConfigs?: CalendarDialogConfigs;
-    Button: React.FC<RenderInputProps>;
-    primaryButtonTitle?: string;
-    secondaryButtonTitle?: string;
-};
-declare const CalendarDatePicker: React.FC<CalendarDatePickerProps>;
-export { Day as CalendarDay, DayValue as CalendarDayValue, RenderInputProps as CalendarRenderInputProps, calendarGetDay, calendarPotentialDueDate, calendarDatePickerDefaultDateFormat, CalendarDatePickerConfigs, CalendarDialogConfigs, CalendarDatePickerProps, CalendarDatePicker, };

package/dist/types/components/DatePicker/index.d.ts

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