npm - bananas-commerce-admin - Versions diffs - 0.19.0 → 0.19.1 - Mend

bananas-commerce-admin 0.19.0 → 0.19.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/esm/components/Card/CardFieldDate.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
 import { DateTime } from "luxon";
 import { useCardContext } from "../../contexts/CardContext";
 import LabeledValue from "../LabeledValue";
-export const CardFieldDate = ({ dateFormatter = (date) => (date.isValid ? date.toISODate() : ""), fallback = "—", fallbackPredicate = (date) => !date?.isValid, formName, helperText, isDisabled = false, isEditable = true, isReadable = true, label, size = "grow", sx, value: defaultValue, ...props }) => {
+export const CardFieldDate = ({ dateFormatter = (date) => (date.isValid ? date.toISODate() : ""), fallback = "—", fallbackPredicate = (date) => !date?.isValid, formName, helperText, isDisabled = false, isEditable = true, isReadable = true, label, size = "grow", sx, adapterLocale, value: defaultValue, ...props }) => {
     const { isCompact, isEditing } = useCardContext();
     const [value, setValue] = useState(() => {
         if (defaultValue instanceof Date) {
@@ -40,7 +40,7 @@ export const CardFieldDate = ({ dateFormatter = (date) => (date.isValid ? date.t
             setValue(date);
     }, [setValue]);
     return (React.createElement(Grid, { size: size }, isEditing && isEditable ? (React.createElement(Stack, { direction: "column", py: 1 },
-        React.createElement(LocalizationProvider, { dateAdapter: AdapterLuxon },
+        React.createElement(LocalizationProvider, { adapterLocale: adapterLocale, dateAdapter: AdapterLuxon },
             React.createElement(DatePicker, { defaultValue: value, disabled: isDisabled, label: label, name: formName, sx: { width: "100%", ...sx }, onChange: handleDateChange, ...props })),
         helperText != null && React.createElement(FormHelperText, { sx: { mb: 1 } }, helperText))) : (isReadable && (React.createElement(LabeledValue, { compact: isCompact, label: label, value: fallbackPredicate(value) ? fallback : dateFormatter(value) })))));
 };

package/dist/esm/components/Card/CardFieldDate.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CardFieldDate.js","sourceRoot":"","sources":["../../../../src/components/Card/CardFieldDate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,IAAI,MAAM,qBAAqB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAmB,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AACxF,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAEhE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,YAAY,MAAM,iBAAiB,CAAC;~~AAiB3C~~,MAAM,CAAC,MAAM,aAAa,GAA+C,CAAC,EACxE,aAAa,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAChE,QAAQ,GAAG,GAAG,EACd,iBAAiB,GAAG,CAAC,IAA0B,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,OAAO,EAClE,QAAQ,EACR,UAAU,EACV,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,IAAI,EACjB,UAAU,GAAG,IAAI,EACjB,KAAK,EACL,IAAI,GAAG,MAAM,EACb,EAAE,EACF,KAAK,EAAE,YAAY,EACnB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,CAAC;IAElD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAuB,GAAG,EAAE;QAC5D,IAAI,YAAY,YAAY,IAAI,EAAE,CAAC;YACjC,OAAO,QAAQ,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;QAC3C,CAAC;aAAM,IAAI,YAAY,YAAY,QAAQ,EAAE,CAAC;YAC5C,OAAO,YAAY,CAAC;QACtB,CAAC;aAAM,IAAI,OAAO,YAAY,KAAK,QAAQ,EAAE,CAAC;YAC5C,IAAI,CAAC;gBACH,MAAM,IAAI,GAAG,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;gBAC5C,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;oBACjB,OAAO,IAAI,CAAC;gBACd,CAAC;qBAAM,CAAC;oBACN,OAAO,CAAC,KAAK,CAAC,0CAA0C,YAAY,EAAE,CAAC,CAAC;oBACxE,OAAO,SAAS,CAAC;gBACnB,CAAC;YACH,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,OAAO,CAAC,KAAK,CAAC,qBAAqB,KAAK,EAAE,CAAC,CAAC;gBAC5C,OAAO,SAAS,CAAC;YACnB,CAAC;QACH,CAAC;aAAM,CAAC;YACN,OAAO,SAAS,CAAC;QACnB,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,IAAqB,EAAE,EAAE;QACxB,IAAI,IAAI,IAAI,IAAI;YAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,IACb,SAAS,IAAI,UAAU,CAAC,CAAC,CAAC,CACzB,oBAAC,KAAK,IAAC,SAAS,EAAC,QAAQ,EAAC,EAAE,EAAE,CAAC;QAC7B,oBAAC,oBAAoB,IAAC,WAAW,EAAE,YAAY;~~YAC7C~~,oBAAC,UAAU,IACT,YAAY,EAAE,KAAK,EACnB,QAAQ,EAAE,UAAU,EACpB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,QAAQ,EACd,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAC5B,QAAQ,EAAE,gBAAgB,KACtB,KAAK,GACT,CACmB;QAEtB,UAAU,IAAI,IAAI,IAAI,oBAAC,cAAc,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,IAAG,UAAU,CAAkB,CAC7E,CACT,CAAC,CAAC,CAAC,CACF,UAAU,IAAI,CACZ,oBAAC,YAAY,IACX,OAAO,EAAE,SAAS,EAClB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAM,CAAC,GAClE,CACH,CACF,CACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}
1	+ {"version":3,"file":"CardFieldDate.js","sourceRoot":"","sources":["../../../../src/components/Card/CardFieldDate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,IAAI,MAAM,qBAAqB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAmB,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AACxF,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAEhE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAoB3C,MAAM,CAAC,MAAM,aAAa,GAA+C,CAAC,EACxE,aAAa,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAChE,QAAQ,GAAG,GAAG,EACd,iBAAiB,GAAG,CAAC,IAA0B,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,OAAO,EAClE,QAAQ,EACR,UAAU,EACV,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,IAAI,EACjB,UAAU,GAAG,IAAI,EACjB,KAAK,EACL,IAAI,GAAG,MAAM,EACb,EAAE,EACF,aAAa,EACb,KAAK,EAAE,YAAY,EACnB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,CAAC;IAElD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAuB,GAAG,EAAE;QAC5D,IAAI,YAAY,YAAY,IAAI,EAAE,CAAC;YACjC,OAAO,QAAQ,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;QAC3C,CAAC;aAAM,IAAI,YAAY,YAAY,QAAQ,EAAE,CAAC;YAC5C,OAAO,YAAY,CAAC;QACtB,CAAC;aAAM,IAAI,OAAO,YAAY,KAAK,QAAQ,EAAE,CAAC;YAC5C,IAAI,CAAC;gBACH,MAAM,IAAI,GAAG,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;gBAC5C,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;oBACjB,OAAO,IAAI,CAAC;gBACd,CAAC;qBAAM,CAAC;oBACN,OAAO,CAAC,KAAK,CAAC,0CAA0C,YAAY,EAAE,CAAC,CAAC;oBACxE,OAAO,SAAS,CAAC;gBACnB,CAAC;YACH,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,OAAO,CAAC,KAAK,CAAC,qBAAqB,KAAK,EAAE,CAAC,CAAC;gBAC5C,OAAO,SAAS,CAAC;YACnB,CAAC;QACH,CAAC;aAAM,CAAC;YACN,OAAO,SAAS,CAAC;QACnB,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,IAAqB,EAAE,EAAE;QACxB,IAAI,IAAI,IAAI,IAAI;YAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,IACb,SAAS,IAAI,UAAU,CAAC,CAAC,CAAC,CACzB,oBAAC,KAAK,IAAC,SAAS,EAAC,QAAQ,EAAC,EAAE,EAAE,CAAC;QAC7B,oBAAC,oBAAoB,IAAC,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,YAAY;YAC3E,oBAAC,UAAU,IACT,YAAY,EAAE,KAAK,EACnB,QAAQ,EAAE,UAAU,EACpB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,QAAQ,EACd,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAC5B,QAAQ,EAAE,gBAAgB,KACtB,KAAK,GACT,CACmB;QAEtB,UAAU,IAAI,IAAI,IAAI,oBAAC,cAAc,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,IAAG,UAAU,CAAkB,CAC7E,CACT,CAAC,CAAC,CAAC,CACF,UAAU,IAAI,CACZ,oBAAC,YAAY,IACX,OAAO,EAAE,SAAS,EAClB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAM,CAAC,GAClE,CACH,CACF,CACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/esm/components/Card/CardFieldDate.stories.js ADDED Viewed

@@ -0,0 +1,95 @@
+import React from "react";
+import { DateTime } from "luxon";
+import CardContent from "./CardContent";
+import { CardFieldDate } from "./CardFieldDate";
+import CardHeader from "./CardHeader";
+import CardRow from "./CardRow";
+import Card from "./index";
+const meta = {
+    component: CardFieldDate,
+    decorators: [
+        (Story) => (React.createElement(Card, { defaultEditing: true, isEditable: true },
+            React.createElement(CardHeader, { title: "CardFieldDate Demo" }),
+            React.createElement(CardContent, null,
+                React.createElement(CardRow, null,
+                    React.createElement(Story, null))))),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        label: "Date",
+        formName: "date",
+        value: DateTime.now(),
+    },
+};
+export const WithCustomValue = {
+    args: {
+        label: "Birth Date",
+        formName: "birthDate",
+        value: DateTime.fromISO("1990-01-15"),
+    },
+};
+export const WithStringValue = {
+    args: {
+        label: "Event Date",
+        formName: "eventDate",
+        value: "2024-12-31",
+    },
+};
+export const Empty = {
+    args: {
+        label: "Optional Date",
+        formName: "optionalDate",
+        value: undefined,
+    },
+};
+export const Disabled = {
+    args: {
+        label: "Disabled Date",
+        formName: "disabledDate",
+        value: DateTime.now(),
+        isDisabled: true,
+    },
+};
+export const WithHelperText = {
+    args: {
+        label: "Appointment Date",
+        formName: "appointmentDate",
+        value: DateTime.now(),
+        helperText: "Please select your preferred appointment date",
+    },
+};
+export const WithLocaleGB = {
+    args: {
+        label: "Date (en-GB locale)",
+        formName: "dateGB",
+        value: DateTime.now(),
+        adapterLocale: "en-GB",
+        helperText: "Week starts on Monday",
+    },
+};
+export const WithLocaleUS = {
+    args: {
+        label: "Date (en-US locale)",
+        formName: "dateUS",
+        value: DateTime.now(),
+        adapterLocale: "en-US",
+        helperText: "Week starts on Sunday",
+    },
+};
+export const ReadOnlyMode = {
+    args: {
+        label: "Created At",
+        formName: "createdAt",
+        value: DateTime.fromISO("2023-06-15"),
+    },
+    decorators: [
+        (Story) => (React.createElement(Card, null,
+            React.createElement(CardHeader, { title: "Read-Only CardFieldDate" }),
+            React.createElement(CardContent, null,
+                React.createElement(CardRow, null,
+                    React.createElement(Story, null))))),
+    ],
+};
+//# sourceMappingURL=CardFieldDate.stories.js.map

package/dist/esm/components/Card/CardFieldDate.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CardFieldDate.stories.js","sourceRoot":"","sources":["../../../../src/components/Card/CardFieldDate.stories.tsx"],"names":[],"mappings":"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"}

package/dist/types/components/Card/CardFieldDate.d.ts CHANGED Viewed

@@ -10,6 +10,8 @@ export interface CardFieldDateProps extends Omit<DatePickerProps<DateTime>, "lab
     value?: DateTime | Date | string | null | undefined;
     isReadable?: boolean;
     isEditable?: boolean;
+    /** E.g en-GB for "Monday, tuesday, ..., sunday" instead of "Sunday, monday ..., saturday" */
+    adapterLocale?: string;
 }
 export declare const CardFieldDate: React.FC<Omit<CardFieldDateProps, "type">>;
 export default CardFieldDate;

package/dist/types/components/Card/CardFieldDate.stories.d.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { CardFieldDate } from "./CardFieldDate";
+declare const meta: Meta<typeof CardFieldDate>;
+export default meta;
+type Story = StoryObj<typeof CardFieldDate>;
+export declare const Default: Story;
+export declare const WithCustomValue: Story;
+export declare const WithStringValue: Story;
+export declare const Empty: Story;
+export declare const Disabled: Story;
+export declare const WithHelperText: Story;
+export declare const WithLocaleGB: Story;
+export declare const WithLocaleUS: Story;
+export declare const ReadOnlyMode: Story;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "bananas-commerce-admin",
-  "version": "0.19.0",
+  "version": "0.19.1",
   "description": "What's this, an admin for apes?",
   "keywords": [
     "admin",

package/src/components/Card/CardFieldDate.stories.tsx ADDED Viewed

@@ -0,0 +1,119 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import { DateTime } from "luxon";
+import CardContent from "./CardContent";
+import { CardFieldDate } from "./CardFieldDate";
+import CardHeader from "./CardHeader";
+import CardRow from "./CardRow";
+import Card from "./index";
+const meta: Meta<typeof CardFieldDate> = {
+  component: CardFieldDate,
+  decorators: [
+    (Story) => (
+      <Card defaultEditing isEditable>
+        <CardHeader title="CardFieldDate Demo" />
+        <CardContent>
+          <CardRow>
+            <Story />
+          </CardRow>
+        </CardContent>
+      </Card>
+    ),
+  ],
+};
+export default meta;
+type Story = StoryObj<typeof CardFieldDate>;
+export const Default: Story = {
+  args: {
+    label: "Date",
+    formName: "date",
+    value: DateTime.now(),
+  },
+};
+export const WithCustomValue: Story = {
+  args: {
+    label: "Birth Date",
+    formName: "birthDate",
+    value: DateTime.fromISO("1990-01-15"),
+  },
+};
+export const WithStringValue: Story = {
+  args: {
+    label: "Event Date",
+    formName: "eventDate",
+    value: "2024-12-31",
+  },
+};
+export const Empty: Story = {
+  args: {
+    label: "Optional Date",
+    formName: "optionalDate",
+    value: undefined,
+  },
+};
+export const Disabled: Story = {
+  args: {
+    label: "Disabled Date",
+    formName: "disabledDate",
+    value: DateTime.now(),
+    isDisabled: true,
+  },
+};
+export const WithHelperText: Story = {
+  args: {
+    label: "Appointment Date",
+    formName: "appointmentDate",
+    value: DateTime.now(),
+    helperText: "Please select your preferred appointment date",
+  },
+};
+export const WithLocaleGB: Story = {
+  args: {
+    label: "Date (en-GB locale)",
+    formName: "dateGB",
+    value: DateTime.now(),
+    adapterLocale: "en-GB",
+    helperText: "Week starts on Monday",
+  },
+};
+export const WithLocaleUS: Story = {
+  args: {
+    label: "Date (en-US locale)",
+    formName: "dateUS",
+    value: DateTime.now(),
+    adapterLocale: "en-US",
+    helperText: "Week starts on Sunday",
+  },
+};
+export const ReadOnlyMode: Story = {
+  args: {
+    label: "Created At",
+    formName: "createdAt",
+    value: DateTime.fromISO("2023-06-15"),
+  },
+  decorators: [
+    (Story) => (
+      <Card>
+        <CardHeader title="Read-Only CardFieldDate" />
+        <CardContent>
+          <CardRow>
+            <Story />
+          </CardRow>
+        </CardContent>
+      </Card>
+    ),
+  ],
+};

package/src/components/Card/CardFieldDate.tsx CHANGED Viewed

@@ -23,6 +23,9 @@ export interface CardFieldDateProps
   value?: DateTime | Date | string | null | undefined;
   isReadable?: boolean;
   isEditable?: boolean;
+  /** E.g en-GB for "Monday, tuesday, ..., sunday" instead of "Sunday, monday ..., saturday" */
+  adapterLocale?: string;
 }
 export const CardFieldDate: React.FC<Omit<CardFieldDateProps, "type">> = ({
@@ -37,6 +40,7 @@ export const CardFieldDate: React.FC<Omit<CardFieldDateProps, "type">> = ({
   label,
   size = "grow",
   sx,
+  adapterLocale,
   value: defaultValue,
   ...props
 }) => {
@@ -76,7 +80,7 @@ export const CardFieldDate: React.FC<Omit<CardFieldDateProps, "type">> = ({
     <Grid size={size}>
       {isEditing && isEditable ? (
         <Stack direction="column" py={1}>
-          <LocalizationProvider dateAdapter={AdapterLuxon}>
+          <LocalizationProvider adapterLocale={adapterLocale} dateAdapter={AdapterLuxon}>
             <DatePicker
               defaultValue={value}
               disabled={isDisabled}