bananas-commerce-admin 0.19.0 → 0.19.2
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.
- package/dist/esm/components/Card/CardFieldDate.js +2 -2
- package/dist/esm/components/Card/CardFieldDate.js.map +1 -1
- package/dist/esm/components/Card/CardFieldDate.stories.js +95 -0
- package/dist/esm/components/Card/CardFieldDate.stories.js.map +1 -0
- package/dist/esm/extensions/member/components/MemberDetailCard.js +2 -2
- package/dist/esm/extensions/member/components/MemberDetailCard.js.map +1 -1
- package/dist/types/components/Card/CardFieldDate.d.ts +2 -0
- package/dist/types/components/Card/CardFieldDate.stories.d.ts +14 -0
- package/package.json +1 -1
- package/src/components/Card/CardFieldDate.stories.tsx +119 -0
- package/src/components/Card/CardFieldDate.tsx +5 -1
- package/src/extensions/member/components/MemberDetailCard.tsx +2 -2
|
@@ -6,7 +6,7 @@ import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
|
|
|
6
6
|
import { DateTime } from "luxon";
|
|
7
7
|
import { useCardContext } from "../../contexts/CardContext";
|
|
8
8
|
import LabeledValue from "../LabeledValue";
|
|
9
|
-
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 }) => {
|
|
9
|
+
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 }) => {
|
|
10
10
|
const { isCompact, isEditing } = useCardContext();
|
|
11
11
|
const [value, setValue] = useState(() => {
|
|
12
12
|
if (defaultValue instanceof Date) {
|
|
@@ -40,7 +40,7 @@ export const CardFieldDate = ({ dateFormatter = (date) => (date.isValid ? date.t
|
|
|
40
40
|
setValue(date);
|
|
41
41
|
}, [setValue]);
|
|
42
42
|
return (React.createElement(Grid, { size: size }, isEditing && isEditable ? (React.createElement(Stack, { direction: "column", py: 1 },
|
|
43
|
-
React.createElement(LocalizationProvider, { dateAdapter: AdapterLuxon },
|
|
43
|
+
React.createElement(LocalizationProvider, { adapterLocale: adapterLocale, dateAdapter: AdapterLuxon },
|
|
44
44
|
React.createElement(DatePicker, { defaultValue: value, disabled: isDisabled, label: label, name: formName, sx: { width: "100%", ...sx }, onChange: handleDateChange, ...props })),
|
|
45
45
|
helperText != null && React.createElement(FormHelperText, { sx: { mb: 1 } }, helperText))) : (isReadable && (React.createElement(LabeledValue, { compact: isCompact, label: label, value: fallbackPredicate(value) ? fallback : dateFormatter(value) })))));
|
|
46
46
|
};
|
|
@@ -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;
|
|
1
|
+
{"version":3,"file":"CardFieldDate.js","sourceRoot":"","sources":["../../../../src/components/Card/CardFieldDate.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { DateTime } from "luxon";
|
|
3
|
+
import CardContent from "./CardContent";
|
|
4
|
+
import { CardFieldDate } from "./CardFieldDate";
|
|
5
|
+
import CardHeader from "./CardHeader";
|
|
6
|
+
import CardRow from "./CardRow";
|
|
7
|
+
import Card from "./index";
|
|
8
|
+
const meta = {
|
|
9
|
+
component: CardFieldDate,
|
|
10
|
+
decorators: [
|
|
11
|
+
(Story) => (React.createElement(Card, { defaultEditing: true, isEditable: true },
|
|
12
|
+
React.createElement(CardHeader, { title: "CardFieldDate Demo" }),
|
|
13
|
+
React.createElement(CardContent, null,
|
|
14
|
+
React.createElement(CardRow, null,
|
|
15
|
+
React.createElement(Story, null))))),
|
|
16
|
+
],
|
|
17
|
+
};
|
|
18
|
+
export default meta;
|
|
19
|
+
export const Default = {
|
|
20
|
+
args: {
|
|
21
|
+
label: "Date",
|
|
22
|
+
formName: "date",
|
|
23
|
+
value: DateTime.now(),
|
|
24
|
+
},
|
|
25
|
+
};
|
|
26
|
+
export const WithCustomValue = {
|
|
27
|
+
args: {
|
|
28
|
+
label: "Birth Date",
|
|
29
|
+
formName: "birthDate",
|
|
30
|
+
value: DateTime.fromISO("1990-01-15"),
|
|
31
|
+
},
|
|
32
|
+
};
|
|
33
|
+
export const WithStringValue = {
|
|
34
|
+
args: {
|
|
35
|
+
label: "Event Date",
|
|
36
|
+
formName: "eventDate",
|
|
37
|
+
value: "2024-12-31",
|
|
38
|
+
},
|
|
39
|
+
};
|
|
40
|
+
export const Empty = {
|
|
41
|
+
args: {
|
|
42
|
+
label: "Optional Date",
|
|
43
|
+
formName: "optionalDate",
|
|
44
|
+
value: undefined,
|
|
45
|
+
},
|
|
46
|
+
};
|
|
47
|
+
export const Disabled = {
|
|
48
|
+
args: {
|
|
49
|
+
label: "Disabled Date",
|
|
50
|
+
formName: "disabledDate",
|
|
51
|
+
value: DateTime.now(),
|
|
52
|
+
isDisabled: true,
|
|
53
|
+
},
|
|
54
|
+
};
|
|
55
|
+
export const WithHelperText = {
|
|
56
|
+
args: {
|
|
57
|
+
label: "Appointment Date",
|
|
58
|
+
formName: "appointmentDate",
|
|
59
|
+
value: DateTime.now(),
|
|
60
|
+
helperText: "Please select your preferred appointment date",
|
|
61
|
+
},
|
|
62
|
+
};
|
|
63
|
+
export const WithLocaleGB = {
|
|
64
|
+
args: {
|
|
65
|
+
label: "Date (en-GB locale)",
|
|
66
|
+
formName: "dateGB",
|
|
67
|
+
value: DateTime.now(),
|
|
68
|
+
adapterLocale: "en-GB",
|
|
69
|
+
helperText: "Week starts on Monday",
|
|
70
|
+
},
|
|
71
|
+
};
|
|
72
|
+
export const WithLocaleUS = {
|
|
73
|
+
args: {
|
|
74
|
+
label: "Date (en-US locale)",
|
|
75
|
+
formName: "dateUS",
|
|
76
|
+
value: DateTime.now(),
|
|
77
|
+
adapterLocale: "en-US",
|
|
78
|
+
helperText: "Week starts on Sunday",
|
|
79
|
+
},
|
|
80
|
+
};
|
|
81
|
+
export const ReadOnlyMode = {
|
|
82
|
+
args: {
|
|
83
|
+
label: "Created At",
|
|
84
|
+
formName: "createdAt",
|
|
85
|
+
value: DateTime.fromISO("2023-06-15"),
|
|
86
|
+
},
|
|
87
|
+
decorators: [
|
|
88
|
+
(Story) => (React.createElement(Card, null,
|
|
89
|
+
React.createElement(CardHeader, { title: "Read-Only CardFieldDate" }),
|
|
90
|
+
React.createElement(CardContent, null,
|
|
91
|
+
React.createElement(CardRow, null,
|
|
92
|
+
React.createElement(Story, null))))),
|
|
93
|
+
],
|
|
94
|
+
};
|
|
95
|
+
//# sourceMappingURL=CardFieldDate.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CardFieldDate.stories.js","sourceRoot":"","sources":["../../../../src/components/Card/CardFieldDate.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -84,8 +84,8 @@ export const MemberDetailCard = (props) => {
|
|
|
84
84
|
isCompany && (React.createElement(CardRow, null,
|
|
85
85
|
React.createElement(CardFieldText, { formName: "company_name", label: t("Company name"), required: isCompany, size: 6, value: member.company_name }))),
|
|
86
86
|
React.createElement(CardRow, null,
|
|
87
|
-
React.createElement(CardFieldText, { formName: "given_name", label: t("First Name"), required:
|
|
88
|
-
React.createElement(CardFieldText, { formName: "family_name", label: t("Last Name"), required:
|
|
87
|
+
React.createElement(CardFieldText, { formName: "given_name", label: t("First Name"), required: !isCompany, size: 3, value: member.given_name }),
|
|
88
|
+
React.createElement(CardFieldText, { formName: "family_name", label: t("Last Name"), required: !isCompany, size: 3, value: member.family_name })),
|
|
89
89
|
React.createElement(CardRow, null,
|
|
90
90
|
React.createElement(CardFieldText, { formName: "phone", label: t("Phone"), required: true, size: 3, value: member.phone }),
|
|
91
91
|
React.createElement(CardFieldText, { formName: "email", label: t("Email"), size: 3, value: member.email })),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MemberDetailCard.js","sourceRoot":"","sources":["../../../../../src/extensions/member/components/MemberDetailCard.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"MemberDetailCard.js","sourceRoot":"","sources":["../../../../../src/extensions/member/components/MemberDetailCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,OAAO,IAAI,MAAM,0BAA0B,CAAC;AAC5C,OAAO,WAAW,MAAM,sCAAsC,CAAC;AAC/D,OAAO,gBAAgB,MAAM,2CAA2C,CAAC;AACzE,OAAO,WAAW,MAAM,sCAAsC,CAAC;AAC/D,OAAO,gBAAgB,MAAM,2CAA2C,CAAC;AACzE,OAAO,aAAa,MAAM,wCAAwC,CAAC;AACnE,OAAO,UAAU,MAAM,qCAAqC,CAAC;AAC7D,OAAO,OAAO,MAAM,kCAAkC,CAAC;AACvD,OAAO,cAAc,MAAM,yCAAyC,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAgB,MAAM,iBAAiB,CAAC;AAgC7D,MAAM,CAAC,MAAM,gBAAgB,GAA8B,CAAC,KAAK,EAAE,EAAE;IACnE,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,CAAC;IAC3B,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IAExB,MAAM,UAAU,GAAG,KAAK,EAAE,MAAkC,EAAE,EAAE;QAC9D,MAAM,IAAI,GAAG,EAAE,GAAG,MAAM,EAAE,CAAC;QAE3B,MAAM,aAAa,GAAG;YACpB,cAAc,EAAE,MAAM,CAAC,cAAc;YACrC,eAAe,EAAE,MAAM,CAAC,eAAe;YACvC,WAAW,EAAE,MAAM,CAAC,WAAW;YAC/B,IAAI,EAAE,MAAM,CAAC,IAAI;YACjB,YAAY,EAAE,MAAM,CAAC,YAAY;YACjC,MAAM,EAAE,MAAM,CAAC,MAAM;YACrB,OAAO,EAAE,MAAM,CAAC,OAAO;SACxB,CAAC;QAEF,IAAI,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;YACxD,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;YAC1B,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;gBACrD,sEAAsE;gBACtE,IAAI,KAAK,IAAI,IAAI;oBAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;YACvD,CAAC,CAAC,CAAC;QACL,CAAC;QAED,MAAM,MAAM,GAAG,GAAG,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAC;QACtD,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,MAAM,IAAI,KAAK,CAAC,wCAAwC,CAAC,CAAC;QAC5D,CAAC;QAED,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,IAAI,CAAC;YACjC,MAAM;YACN,IAAI;SACL,CAAC,CAAC;QAEH,IAAI,QAAQ,CAAC,EAAE,EAAE,CAAC;YAChB,MAAM,aAAa,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;YAC5C,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;YAC/B,OAAO,CAAC,CAAC,8BAA8B,CAAC,CAAC;QAC3C,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,KAAK,CAAC,0BAA0B,EAAE,QAAQ,CAAC,CAAC;YACpD,MAAM,IAAI,KAAK,CAAC,yBAAyB,CAAC,CAAC;QAC7C,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,IAAI;QAC7B,EAAE,EAAE,EAAE;QACN,MAAM,EAAE,EAAE;QACV,aAAa,EAAE,EAAE;QACjB,YAAY,EAAE,EAAE;QAChB,UAAU,EAAE,EAAE;QACd,WAAW,EAAE,EAAE;QACf,KAAK,EAAE,EAAE;QACT,KAAK,EAAE,EAAE;QACT,eAAe,EAAE;YACf,cAAc,EAAE,EAAE;YAClB,eAAe,EAAE,EAAE;YACnB,WAAW,EAAE,EAAE;YACf,IAAI,EAAE,EAAE;YACR,YAAY,EAAE,EAAE;YAChB,MAAM,EAAE,EAAE;YACV,OAAO,EAAE,EAAE;SACZ;QACD,MAAM,EAAE,EAAE;QACV,aAAa,EAAE,EAAE;KAClB,CAAC;IAEF,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,KAAK,YAAY,CAAC,OAAO,CAAC;IAEhE,OAAO,CACL,oBAAC,IAAI,IACH,OAAO,EAAE,CAAC,EACV,UAAU,EAAE,aAAa,CAAC,IAAI,EAAE,sBAAsB,CAAC,EACvD,QAAQ,EAAE,UAAU;QAEpB,oBAAC,UAAU,IAAC,KAAK,EAAE,CAAC,CAAC,iBAAiB,CAAC,GAAI;QAE3C,oBAAC,WAAW;YACT,SAAS,IAAI,CACZ,oBAAC,OAAO;gBACN,oBAAC,aAAa,IACZ,QAAQ,EAAC,cAAc,EACvB,KAAK,EAAE,CAAC,CAAC,cAAc,CAAC,EACxB,QAAQ,EAAE,SAAS,EACnB,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,MAAM,CAAC,YAAY,GAC1B,CACM,CACX;YACD,oBAAC,OAAO;gBACN,oBAAC,aAAa,IACZ,QAAQ,EAAC,YAAY,EACrB,KAAK,EAAE,CAAC,CAAC,YAAY,CAAC,EACtB,QAAQ,EAAE,CAAC,SAAS,EACpB,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,MAAM,CAAC,UAAU,GACxB;gBAEF,oBAAC,aAAa,IACZ,QAAQ,EAAC,aAAa,EACtB,KAAK,EAAE,CAAC,CAAC,WAAW,CAAC,EACrB,QAAQ,EAAE,CAAC,SAAS,EACpB,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,MAAM,CAAC,WAAW,GACzB,CACM;YAEV,oBAAC,OAAO;gBACN,oBAAC,aAAa,IACZ,QAAQ,EAAC,OAAO,EAChB,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,EACjB,QAAQ,EAAE,IAAI,EACd,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,MAAM,CAAC,KAAK,GACnB;gBACF,oBAAC,aAAa,IAAC,QAAQ,EAAC,OAAO,EAAC,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,GAAI,CAC3E;YAEV,oBAAC,OAAO;gBACN,oBAAC,gBAAgB,IACf,QAAQ,EAAC,iBAAiB,EAC1B,UAAU,EAAE,aAAa,CAAC,IAAI,EAAE,6BAA6B,CAAC,EAC9D,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC,EACnB,QAAQ,EAAE,IAAI,EACd,KAAK,EAAE,MAAM,CAAC,eAAe,GAC7B,CACM,CACE;QAEd,oBAAC,WAAW;YACV,oBAAC,gBAAgB,OAAG;YACpB,oBAAC,cAAc,OAAG,CACN,CACT,CACR,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -10,6 +10,8 @@ export interface CardFieldDateProps extends Omit<DatePickerProps<DateTime>, "lab
|
|
|
10
10
|
value?: DateTime | Date | string | null | undefined;
|
|
11
11
|
isReadable?: boolean;
|
|
12
12
|
isEditable?: boolean;
|
|
13
|
+
/** E.g en-GB for "Monday, tuesday, ..., sunday" instead of "Sunday, monday ..., saturday" */
|
|
14
|
+
adapterLocale?: string;
|
|
13
15
|
}
|
|
14
16
|
export declare const CardFieldDate: React.FC<Omit<CardFieldDateProps, "type">>;
|
|
15
17
|
export default CardFieldDate;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { CardFieldDate } from "./CardFieldDate";
|
|
3
|
+
declare const meta: Meta<typeof CardFieldDate>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof CardFieldDate>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const WithCustomValue: Story;
|
|
8
|
+
export declare const WithStringValue: Story;
|
|
9
|
+
export declare const Empty: Story;
|
|
10
|
+
export declare const Disabled: Story;
|
|
11
|
+
export declare const WithHelperText: Story;
|
|
12
|
+
export declare const WithLocaleGB: Story;
|
|
13
|
+
export declare const WithLocaleUS: Story;
|
|
14
|
+
export declare const ReadOnlyMode: Story;
|
package/package.json
CHANGED
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
3
|
+
import { Meta, StoryObj } from "@storybook/react";
|
|
4
|
+
import { DateTime } from "luxon";
|
|
5
|
+
|
|
6
|
+
import CardContent from "./CardContent";
|
|
7
|
+
import { CardFieldDate } from "./CardFieldDate";
|
|
8
|
+
import CardHeader from "./CardHeader";
|
|
9
|
+
import CardRow from "./CardRow";
|
|
10
|
+
import Card from "./index";
|
|
11
|
+
|
|
12
|
+
const meta: Meta<typeof CardFieldDate> = {
|
|
13
|
+
component: CardFieldDate,
|
|
14
|
+
decorators: [
|
|
15
|
+
(Story) => (
|
|
16
|
+
<Card defaultEditing isEditable>
|
|
17
|
+
<CardHeader title="CardFieldDate Demo" />
|
|
18
|
+
<CardContent>
|
|
19
|
+
<CardRow>
|
|
20
|
+
<Story />
|
|
21
|
+
</CardRow>
|
|
22
|
+
</CardContent>
|
|
23
|
+
</Card>
|
|
24
|
+
),
|
|
25
|
+
],
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
export default meta;
|
|
29
|
+
type Story = StoryObj<typeof CardFieldDate>;
|
|
30
|
+
|
|
31
|
+
export const Default: Story = {
|
|
32
|
+
args: {
|
|
33
|
+
label: "Date",
|
|
34
|
+
formName: "date",
|
|
35
|
+
value: DateTime.now(),
|
|
36
|
+
},
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
export const WithCustomValue: Story = {
|
|
40
|
+
args: {
|
|
41
|
+
label: "Birth Date",
|
|
42
|
+
formName: "birthDate",
|
|
43
|
+
value: DateTime.fromISO("1990-01-15"),
|
|
44
|
+
},
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
export const WithStringValue: Story = {
|
|
48
|
+
args: {
|
|
49
|
+
label: "Event Date",
|
|
50
|
+
formName: "eventDate",
|
|
51
|
+
value: "2024-12-31",
|
|
52
|
+
},
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
export const Empty: Story = {
|
|
56
|
+
args: {
|
|
57
|
+
label: "Optional Date",
|
|
58
|
+
formName: "optionalDate",
|
|
59
|
+
value: undefined,
|
|
60
|
+
},
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
export const Disabled: Story = {
|
|
64
|
+
args: {
|
|
65
|
+
label: "Disabled Date",
|
|
66
|
+
formName: "disabledDate",
|
|
67
|
+
value: DateTime.now(),
|
|
68
|
+
isDisabled: true,
|
|
69
|
+
},
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
export const WithHelperText: Story = {
|
|
73
|
+
args: {
|
|
74
|
+
label: "Appointment Date",
|
|
75
|
+
formName: "appointmentDate",
|
|
76
|
+
value: DateTime.now(),
|
|
77
|
+
helperText: "Please select your preferred appointment date",
|
|
78
|
+
},
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
export const WithLocaleGB: Story = {
|
|
82
|
+
args: {
|
|
83
|
+
label: "Date (en-GB locale)",
|
|
84
|
+
formName: "dateGB",
|
|
85
|
+
value: DateTime.now(),
|
|
86
|
+
adapterLocale: "en-GB",
|
|
87
|
+
helperText: "Week starts on Monday",
|
|
88
|
+
},
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
export const WithLocaleUS: Story = {
|
|
92
|
+
args: {
|
|
93
|
+
label: "Date (en-US locale)",
|
|
94
|
+
formName: "dateUS",
|
|
95
|
+
value: DateTime.now(),
|
|
96
|
+
adapterLocale: "en-US",
|
|
97
|
+
helperText: "Week starts on Sunday",
|
|
98
|
+
},
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
export const ReadOnlyMode: Story = {
|
|
102
|
+
args: {
|
|
103
|
+
label: "Created At",
|
|
104
|
+
formName: "createdAt",
|
|
105
|
+
value: DateTime.fromISO("2023-06-15"),
|
|
106
|
+
},
|
|
107
|
+
decorators: [
|
|
108
|
+
(Story) => (
|
|
109
|
+
<Card>
|
|
110
|
+
<CardHeader title="Read-Only CardFieldDate" />
|
|
111
|
+
<CardContent>
|
|
112
|
+
<CardRow>
|
|
113
|
+
<Story />
|
|
114
|
+
</CardRow>
|
|
115
|
+
</CardContent>
|
|
116
|
+
</Card>
|
|
117
|
+
),
|
|
118
|
+
],
|
|
119
|
+
};
|
|
@@ -23,6 +23,9 @@ export interface CardFieldDateProps
|
|
|
23
23
|
value?: DateTime | Date | string | null | undefined;
|
|
24
24
|
isReadable?: boolean;
|
|
25
25
|
isEditable?: boolean;
|
|
26
|
+
|
|
27
|
+
/** E.g en-GB for "Monday, tuesday, ..., sunday" instead of "Sunday, monday ..., saturday" */
|
|
28
|
+
adapterLocale?: string;
|
|
26
29
|
}
|
|
27
30
|
|
|
28
31
|
export const CardFieldDate: React.FC<Omit<CardFieldDateProps, "type">> = ({
|
|
@@ -37,6 +40,7 @@ export const CardFieldDate: React.FC<Omit<CardFieldDateProps, "type">> = ({
|
|
|
37
40
|
label,
|
|
38
41
|
size = "grow",
|
|
39
42
|
sx,
|
|
43
|
+
adapterLocale,
|
|
40
44
|
value: defaultValue,
|
|
41
45
|
...props
|
|
42
46
|
}) => {
|
|
@@ -76,7 +80,7 @@ export const CardFieldDate: React.FC<Omit<CardFieldDateProps, "type">> = ({
|
|
|
76
80
|
<Grid size={size}>
|
|
77
81
|
{isEditing && isEditable ? (
|
|
78
82
|
<Stack direction="column" py={1}>
|
|
79
|
-
<LocalizationProvider dateAdapter={AdapterLuxon}>
|
|
83
|
+
<LocalizationProvider adapterLocale={adapterLocale} dateAdapter={AdapterLuxon}>
|
|
80
84
|
<DatePicker
|
|
81
85
|
defaultValue={value}
|
|
82
86
|
disabled={isDisabled}
|
|
@@ -141,7 +141,7 @@ export const MemberDetailCard: React.FC<MemberCardProps> = (props) => {
|
|
|
141
141
|
<CardFieldText
|
|
142
142
|
formName="given_name"
|
|
143
143
|
label={t("First Name")}
|
|
144
|
-
required={
|
|
144
|
+
required={!isCompany}
|
|
145
145
|
size={3}
|
|
146
146
|
value={member.given_name}
|
|
147
147
|
/>
|
|
@@ -149,7 +149,7 @@ export const MemberDetailCard: React.FC<MemberCardProps> = (props) => {
|
|
|
149
149
|
<CardFieldText
|
|
150
150
|
formName="family_name"
|
|
151
151
|
label={t("Last Name")}
|
|
152
|
-
required={
|
|
152
|
+
required={!isCompany}
|
|
153
153
|
size={3}
|
|
154
154
|
value={member.family_name}
|
|
155
155
|
/>
|