@manufac/react-components-potli 1.0.5 → 1.0.6

package/dist/tsc/components/CustomDateTimePicker/index.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { customDateFormatter } from "./utils";
+import { InputWrapper } from "@mantine/core";
+import { DatePickerInput, TimePicker } from "@mantine/dates";
+import dayjs from "dayjs";
+export function CustomDateTimePicker({ wrapperProps, datePickerInputProps, timePickerInputProps, onChange, value, }) {
+    const onDateChange = (date) => {
+        if (typeof date === "string") {
+            const existingHour = value.getHours();
+            const existingMinute = value.getMinutes();
+            onChange(dayjs(date).hour(existingHour).minute(existingMinute).toDate());
+        }
+    };
+    const onTimeChange = (time) => {
+        const timePart = time.split(":");
+        const parsedHours = Number.parseInt(timePart[0], 10);
+        const parsedMinutes = Number.parseInt(timePart[1], 10);
+        if (Number.isFinite(parsedHours) === true && Number.isFinite(parsedMinutes) === true) {
+            onChange(dayjs(value).hour(parsedHours).minute(parsedMinutes).toDate());
+        }
+    };
+    return (_jsx(InputWrapper, { ...wrapperProps, children: _jsx(DatePickerInput, { ...datePickerInputProps, value: new Date(value), onChange: onDateChange, valueFormatter: customDateFormatter, rightSection: _jsx(TimePicker, { ...timePickerInputProps, value: dayjs(value).format("HH:mm"), onChange: onTimeChange, w: "100%", withDropdown: true, format: "12h", styles: {
+                    input: {
+                        borderTopLeftRadius: "0px",
+                        borderBottomLeftRadius: "0px",
+                        borderRight: "none",
+                    },
+                } }), rightSectionProps: {
+                style: {
+                    width: "110px",
+                },
+            } }) }));
+}
+//# sourceMappingURL=index.js.map

package/dist/tsc/components/CustomDateTimePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/CustomDateTimePicker/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,MAAM,UAAU,oBAAoB,CAAC,EACnC,YAAY,EACZ,oBAAoB,EACpB,oBAAoB,EACpB,QAAQ,EACR,KAAK,GACqB;IAC1B,MAAM,YAAY,GAAqC,CAAC,IAAI,EAAE,EAAE;QAC9D,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC7B,MAAM,YAAY,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;YACtC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,EAAE,CAAC;YAC1C,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC;QAC3E,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,YAAY,GAAgC,CAAC,IAAI,EAAE,EAAE;QACzD,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACjC,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;QACrD,MAAM,aAAa,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;QACvD,IAAI,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,KAAK,IAAI,IAAI,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,IAAI,EAAE,CAAC;YACrF,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC;QAC1E,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,YAAY,OAAK,YAAY,YAC5B,KAAC,eAAe,OACV,oBAAoB,EACxB,KAAK,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,EACtB,QAAQ,EAAE,YAAY,EACtB,cAAc,EAAE,mBAAmB,EACnC,YAAY,EACV,KAAC,UAAU,OACL,oBAAoB,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EACnC,QAAQ,EAAE,YAAY,EACtB,CAAC,EAAC,MAAM,EACR,YAAY,QACZ,MAAM,EAAC,KAAK,EACZ,MAAM,EAAE;oBACN,KAAK,EAAE;wBACL,mBAAmB,EAAE,KAAK;wBAC1B,sBAAsB,EAAE,KAAK;wBAC7B,WAAW,EAAE,MAAM;qBACpB;iBACF,GACD,EAEJ,iBAAiB,EAAE;gBACjB,KAAK,EAAE;oBACL,KAAK,EAAE,OAAO;iBACf;aACF,GACD,GACW,CAChB,CAAC;AACJ,CAAC"}

package/dist/tsc/components/CustomDateTimePicker/index.stories.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CustomDateTimePicker } from ".";
+import { useState } from "react";
+export default {
+    title: "CustomDateTimePicker",
+    component: CustomDateTimePicker,
+    args: {
+        wrapperProps: {
+            label: "Date & Time",
+        },
+    },
+};
+export const Template = {
+    render: (args) => {
+        const [dateTime, setDateTime] = useState(new Date());
+        return _jsx(CustomDateTimePicker, { ...args, value: dateTime, onChange: setDateTime });
+    },
+};
+//# sourceMappingURL=index.stories.js.map

package/dist/tsc/components/CustomDateTimePicker/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/CustomDateTimePicker/index.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,GAAG,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,oBAAoB;IAC/B,IAAI,EAAE;QACJ,YAAY,EAAE;YACZ,KAAK,EAAE,aAAa;SACrB;KACF;CACmC,CAAC;AAEvC,MAAM,CAAC,MAAM,QAAQ,GAA0C;IAC7D,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QACf,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAO,IAAI,IAAI,EAAE,CAAC,CAAC;QAC3D,OAAO,KAAC,oBAAoB,OAAK,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,GAAI,CAAC;IACpF,CAAC;CACF,CAAC"}

package/dist/tsc/components/CustomDateTimePicker/utils.js

@@ -0,0 +1,13 @@
+export const customDateFormatter = ({ date }) => {
+    let result = "Invalid date";
+    if (date instanceof Date || typeof date === "string") {
+        const dateValue = date instanceof Date ? date : new Date(date);
+        result = dateValue.toLocaleString(undefined, {
+            month: "short",
+            day: "2-digit",
+            year: "numeric",
+        });
+    }
+    return result;
+};
+//# sourceMappingURL=utils.js.map

package/dist/tsc/components/CustomDateTimePicker/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/CustomDateTimePicker/utils.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,mBAAmB,GAAkB,CAAC,EAAE,IAAI,EAAE,EAAU,EAAE;IACrE,IAAI,MAAM,GAAG,cAAc,CAAC;IAC5B,IAAI,IAAI,YAAY,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QACrD,MAAM,SAAS,GAAG,IAAI,YAAY,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC;QAE/D,MAAM,GAAG,SAAS,CAAC,cAAc,CAAC,SAAS,EAAE;YAC3C,KAAK,EAAE,OAAO;YACd,GAAG,EAAE,SAAS;YACd,IAAI,EAAE,SAAS;SAChB,CAAC,CAAC;IACL,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC"}

package/dist/tsc/components/CustomEventTimelineChart/index.js

@@ -49,12 +49,12 @@ export function EventTimelineChart({ theme, data }) {
                                 hour: "2-digit",
                                 minute: "2-digit",
                             });
-                            return `
-      <div style="padding:6px">
-        <b>${format.encodeHTML(event.event.toUpperCase())}</b><br/>
-        Start: ${format.encodeHTML(startTime)}<br/>
-        End: ${format.encodeHTML(endTime)}<br/>
-      </div>
+                            return `
+      <div style="padding:6px">
+        <b>${format.encodeHTML(event.event.toUpperCase())}</b><br/>
+        Start: ${format.encodeHTML(startTime)}<br/>
+        End: ${format.encodeHTML(endTime)}<br/>
+      </div>
     `;
                         },
                     },

package/dist/tsc/index.js

@@ -1,4 +1,5 @@
 export * from "./components/CustomEventTimelineChart";
 export * from "./components/CustomTable";
 export * from "./components/CustomColorPalette";
+export * from "./components/CustomDateTimePicker";
 //# sourceMappingURL=index.js.map

package/dist/tsc/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,uCAAuC,CAAC;AACtD,cAAc,0BAA0B,CAAC;AACzC,cAAc,iCAAiC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,uCAAuC,CAAC;AACtD,cAAc,0BAA0B,CAAC;AACzC,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC"}