ferns-ui 0.9.0 → 0.11.1

package/dist/Common.d.ts

@@ -354,6 +354,11 @@ export interface FieldWithLabelsProps {
     helperTextColor?: AllColors;
     children?: React.ReactNode;
 }
+export interface DateTimeFieldProps extends FieldWithLabelsProps {
+    mode: "date" | "time" | "datetime";
+    value: Date;
+    onChange: (date: Date) => void;
+}
 export interface TextFieldProps extends FieldWithLabelsProps {
     innerRef?: any;
     id?: string;

package/dist/Common.js.map

@@ -1 +1 @@
-{"version":3,"file":"Common.js","sourceRoot":"","sources":["../src/Common.ts"],"names":[],"mappings":"AAgVA,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,CAAC;AAkBzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAe,EAAE,EAAE;IAClD,OAAO;QACL,EAAE,EAAE,CAAC;QACL,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;KACP,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAI,GAAG,EAAE,EAAY,EAAE;IACtD,IAAI,QAAkB,CAAC;IACvB,IAAI,IAAI,GAAG,CAAC,EAAE;QACZ,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM,IAAI,IAAI,GAAG,EAAE,EAAE;QACpB,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM,IAAI,IAAI,GAAG,EAAE,EAAE;QACpB,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM,IAAI,IAAI,GAAG,EAAE,EAAE;QACpB,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM;QACL,QAAQ,GAAG,IAAI,CAAC;KACjB;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,UAAU,eAAe,CAAC,OAAgE;IAC9F,OAAO,CAAC;QACN,SAAS,EAAE,QAAQ;QACnB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,QAAQ;QAChB,KAAK,EAAE,KAAK;QACZ,cAAc,EAAE,KAAK;QACrB,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,MAAM;KACjB,CAAC,OAAO,CAAC,IAAI,MAAM,CAAU,CAAC;AACjC,CAAC;AAs4BD,MAAM,UAAU,UAAU,CAAC,OAAqB;IAC9C,OAAO,CACL,OAAO;QACP,OAAO,CAAC,KAAK;QACb,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,CACrF,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Common.js","sourceRoot":"","sources":["../src/Common.ts"],"names":[],"mappings":"AAgVA,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,CAAC;AAkBzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAe,EAAE,EAAE;IAClD,OAAO;QACL,EAAE,EAAE,CAAC;QACL,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;KACP,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAI,GAAG,EAAE,EAAY,EAAE;IACtD,IAAI,QAAkB,CAAC;IACvB,IAAI,IAAI,GAAG,CAAC,EAAE;QACZ,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM,IAAI,IAAI,GAAG,EAAE,EAAE;QACpB,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM,IAAI,IAAI,GAAG,EAAE,EAAE;QACpB,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM,IAAI,IAAI,GAAG,EAAE,EAAE;QACpB,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM;QACL,QAAQ,GAAG,IAAI,CAAC;KACjB;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,UAAU,eAAe,CAAC,OAAgE;IAC9F,OAAO,CAAC;QACN,SAAS,EAAE,QAAQ;QACnB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,QAAQ;QAChB,KAAK,EAAE,KAAK;QACZ,cAAc,EAAE,KAAK;QACrB,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,MAAM;KACjB,CAAC,OAAO,CAAC,IAAI,MAAM,CAAU,CAAC;AACjC,CAAC;AA44BD,MAAM,UAAU,UAAU,CAAC,OAAqB;IAC9C,OAAO,CACL,OAAO;QACP,OAAO,CAAC,KAAK;QACb,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,CACrF,CAAC;AACJ,CAAC"}

package/dist/DateTimeField.android.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from "react";
+import { DateTimeFieldProps } from "./Common";
+export declare const DateTimeField: ({ mode, value, onChange, errorMessage, errorMessageColor, }: DateTimeFieldProps) => ReactElement;

package/dist/DateTimeField.android.js

@@ -0,0 +1,26 @@
+import DateTimePicker from "@react-native-community/datetimepicker";
+import moment from "moment-timezone";
+import React from "react";
+import { View } from "react-native";
+import { Box } from "./Box";
+import { WithLabel } from "./WithLabel";
+export const DateTimeField = ({ mode, value, onChange, errorMessage, errorMessageColor, }) => {
+    return (React.createElement(WithLabel, { label: errorMessage, labelColor: errorMessageColor || "red", labelPlacement: "after", labelSize: "sm" },
+        React.createElement(WithLabel, null,
+            React.createElement(View, null,
+                React.createElement(Box, { maxWidth: 300 },
+                    React.createElement(DateTimePicker, { display: "spinner", mode: mode === "datetime" ? "date" : mode, testID: "dateTimePicker", value: moment(value).toDate(), onChange: (event, date) => {
+                            if (!date) {
+                                return;
+                            }
+                            onChange(value);
+                        } }),
+                    mode === "datetime" && (React.createElement(DateTimePicker, { display: "spinner", mode: "time", testID: "dateTimePicker", value: moment(value).toDate(), onChange: (event, date) => {
+                            // fix to append to date object
+                            if (!date) {
+                                return;
+                            }
+                            onChange(value);
+                        } })))))));
+};
+//# sourceMappingURL=DateTimeField.android.js.map

package/dist/DateTimeField.android.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeField.android.js","sourceRoot":"","sources":["../src/DateTimeField.android.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,wCAAwC,CAAC;AACpE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,cAAc,CAAC;AAElC,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAEtC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,iBAAiB,GACE,EAAgB,EAAE;IACrC,OAAO,CACL,oBAAC,SAAS,IACR,KAAK,EAAE,YAAY,EACnB,UAAU,EAAE,iBAAiB,IAAI,KAAK,EACtC,cAAc,EAAC,OAAO,EACtB,SAAS,EAAC,IAAI;QAEd,oBAAC,SAAS;YACR,oBAAC,IAAI;gBACH,oBAAC,GAAG,IAAC,QAAQ,EAAE,GAAG;oBAChB,oBAAC,cAAc,IACb,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EACzC,MAAM,EAAC,gBAAgB,EACvB,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,EAC7B,QAAQ,EAAE,CAAC,KAAU,EAAE,IAAS,EAAE,EAAE;4BAClC,IAAI,CAAC,IAAI,EAAE;gCACT,OAAO;6BACR;4BACD,QAAQ,CAAC,KAAK,CAAC,CAAC;wBAClB,CAAC,GACD;oBACD,IAAI,KAAK,UAAU,IAAI,CACtB,oBAAC,cAAc,IACb,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,gBAAgB,EACvB,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,EAC7B,QAAQ,EAAE,CAAC,KAAU,EAAE,IAAS,EAAE,EAAE;4BAClC,+BAA+B;4BAC/B,IAAI,CAAC,IAAI,EAAE;gCACT,OAAO;6BACR;4BACD,QAAQ,CAAC,KAAK,CAAC,CAAC;wBAClB,CAAC,GACD,CACH,CACG,CACD,CACG,CACF,CACb,CAAC;AACJ,CAAC,CAAC"}

package/dist/DateTimeField.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from "react";
+import { DateTimeFieldProps } from "./Common";
+export declare const DateTimeField: ({ mode, value, onChange, errorMessage, errorMessageColor, }: DateTimeFieldProps) => ReactElement;

package/dist/DateTimeField.ios.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from "react";
+import { DateTimeFieldProps } from "./Common";
+export declare const DateTimeField: ({ mode, value, onChange, errorMessage, errorMessageColor, }: DateTimeFieldProps) => ReactElement;

package/dist/DateTimeField.ios.js

@@ -0,0 +1,19 @@
+import DateTimePicker from "@react-native-community/datetimepicker";
+import moment from "moment-timezone";
+import React from "react";
+import { View } from "react-native";
+import { Box } from "./Box";
+import { WithLabel } from "./WithLabel";
+export const DateTimeField = ({ mode, value, onChange, errorMessage, errorMessageColor, }) => {
+    return (React.createElement(WithLabel, { label: errorMessage, labelColor: errorMessageColor || "red", labelPlacement: "after", labelSize: "sm" },
+        React.createElement(WithLabel, null,
+            React.createElement(View, null,
+                React.createElement(Box, { maxWidth: 300 },
+                    React.createElement(DateTimePicker, { display: "spinner", mode: mode, testID: "dateTimePicker", value: moment(value).toDate(), onChange: (event, date) => {
+                            if (!date) {
+                                return;
+                            }
+                            onChange(value);
+                        } }))))));
+};
+//# sourceMappingURL=DateTimeField.ios.js.map

package/dist/DateTimeField.ios.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeField.ios.js","sourceRoot":"","sources":["../src/DateTimeField.ios.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,wCAAwC,CAAC;AACpE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,cAAc,CAAC;AAElC,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAEtC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,iBAAiB,GACE,EAAgB,EAAE;IACrC,OAAO,CACL,oBAAC,SAAS,IACR,KAAK,EAAE,YAAY,EACnB,UAAU,EAAE,iBAAiB,IAAI,KAAK,EACtC,cAAc,EAAC,OAAO,EACtB,SAAS,EAAC,IAAI;QAEd,oBAAC,SAAS;YACR,oBAAC,IAAI;gBACH,oBAAC,GAAG,IAAC,QAAQ,EAAE,GAAG;oBAChB,oBAAC,cAAc,IACb,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,IAAI,EACV,MAAM,EAAC,gBAAgB,EACvB,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,EAC7B,QAAQ,EAAE,CAAC,KAAU,EAAE,IAAS,EAAE,EAAE;4BAClC,IAAI,CAAC,IAAI,EAAE;gCACT,OAAO;6BACR;4BACD,QAAQ,CAAC,KAAK,CAAC,CAAC;wBAClB,CAAC,GACD,CACE,CACD,CACG,CACF,CACb,CAAC;AACJ,CAAC,CAAC"}

package/dist/DateTimeField.js

@@ -0,0 +1,21 @@
+import React from "react";
+import DatePicker from "react-date-picker";
+import DateTimePickerWeb from "react-datetime-picker";
+import { View } from "react-native";
+import TimePicker from "react-time-picker";
+import { Box } from "./Box";
+import { WithLabel } from "./WithLabel";
+export const DateTimeField = ({ mode, value, onChange, errorMessage, errorMessageColor, }) => {
+    return (React.createElement(WithLabel, { label: errorMessage, labelColor: errorMessageColor || "red", labelPlacement: "after", labelSize: "sm" },
+        React.createElement(WithLabel, null,
+            React.createElement(View, null,
+                React.createElement(Box, { maxWidth: 300 },
+                    mode === "datetime" && (React.createElement(DateTimePickerWeb, { disableClock: true, value: value, onChange: onChange })),
+                    mode === "date" && React.createElement(DatePicker, { value: value, onChange: onChange }),
+                    mode === "time" && (React.createElement(TimePicker, { disableClock: true, value: value, onChange: (newVal) => {
+                            // TimePicker returns a string or Date, so we need to make sure it's a Date
+                            const newDate = new Date(newVal);
+                            onChange(newDate);
+                        } })))))));
+};
+//# sourceMappingURL=DateTimeField.js.map

package/dist/DateTimeField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeField.js","sourceRoot":"","sources":["../src/DateTimeField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,UAAU,MAAM,mBAAmB,CAAC;AAC3C,OAAO,iBAAiB,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAC,IAAI,EAAC,MAAM,cAAc,CAAC;AAClC,OAAO,UAAU,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAEtC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,iBAAiB,GACE,EAAgB,EAAE;IACrC,OAAO,CACL,oBAAC,SAAS,IACR,KAAK,EAAE,YAAY,EACnB,UAAU,EAAE,iBAAiB,IAAI,KAAK,EACtC,cAAc,EAAC,OAAO,EACtB,SAAS,EAAC,IAAI;QAEd,oBAAC,SAAS;YACR,oBAAC,IAAI;gBACH,oBAAC,GAAG,IAAC,QAAQ,EAAE,GAAG;oBACf,IAAI,KAAK,UAAU,IAAI,CACtB,oBAAC,iBAAiB,IAAC,YAAY,QAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CACrE;oBACA,IAAI,KAAK,MAAM,IAAI,oBAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI;oBACnE,IAAI,KAAK,MAAM,IAAI,CAClB,oBAAC,UAAU,IACT,YAAY,QACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE;4BACnB,2EAA2E;4BAC3E,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC;4BACjC,QAAQ,CAAC,OAAO,CAAC,CAAC;wBACpB,CAAC,GACD,CACH,CACG,CACD,CACG,CACF,CACb,CAAC;AACJ,CAAC,CAAC"}

package/dist/Modal.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+interface ModalProps {
+    onDismiss: () => void;
+    visible: boolean;
+    align?: "center" | "start";
+    children?: React.ReactElement;
+    footer?: React.ReactElement;
+    heading?: string;
+    size?: "sm" | "md" | "lg";
+    subHeading?: string;
+    primaryButtonText?: string;
+    primaryButtonOnClick?: (value?: any) => void;
+    secondaryButtonText?: string;
+    secondaryButtonOnClick?: (value?: any) => void;
+}
+export declare const Modal: ({ onDismiss, visible, align, children, footer, heading, size, subHeading, primaryButtonText, primaryButtonOnClick, secondaryButtonText, secondaryButtonOnClick, }: ModalProps) => React.ReactElement;
+export {};

package/dist/Modal.js

@@ -0,0 +1,62 @@
+import React from "react";
+import { Dimensions, Modal as RNModal } from "react-native";
+import { Box } from "./Box";
+import { Button } from "./Button";
+import { Heading } from "./Heading";
+import { Text } from "./Text";
+export const Modal = ({ onDismiss, visible, align = "center", children, footer, heading, size, subHeading, primaryButtonText, primaryButtonOnClick, secondaryButtonText, secondaryButtonOnClick, }) => {
+    if (subHeading && !heading) {
+        throw new Error("Cannot render Modal with subHeading and no heading");
+    }
+    if (!footer && !primaryButtonText && !secondaryButtonText) {
+        throw new Error("Cannot render Modal without footer, primaryButtonText, or secondaryButtonText");
+    }
+    function renderHeader() {
+        return (React.createElement(Box, { paddingY: 3, width: "100%" },
+            React.createElement(Box, null,
+                React.createElement(Heading, { align: align === "center" ? "center" : undefined, size: "sm" }, heading)),
+            Boolean(subHeading) && (React.createElement(Box, { paddingY: 2 },
+                React.createElement(Text, { align: align === "center" ? "center" : undefined }, subHeading)))));
+    }
+    function renderFooter() {
+        if (footer) {
+            return footer;
+        }
+        return (React.createElement(Box, { direction: "row", justifyContent: "end", width: "100%" },
+            Boolean(secondaryButtonText) && (React.createElement(Box, { marginRight: 4, minWidth: 120 },
+                React.createElement(Button, { color: "gray", text: secondaryButtonText !== null && secondaryButtonText !== void 0 ? secondaryButtonText : "", onClick: secondaryButtonOnClick }))),
+            React.createElement(Box, { minWidth: 120 },
+                React.createElement(Button, { color: "primary", text: primaryButtonText !== null && primaryButtonText !== void 0 ? primaryButtonText : "", onClick: primaryButtonOnClick }))));
+    }
+    let sizePx = 540;
+    if (size === "md") {
+        sizePx = 720;
+    }
+    else if (size === "lg") {
+        sizePx = 900;
+    }
+    // Adjust size for small screens
+    if (sizePx > Dimensions.get("window").width) {
+        sizePx = "90%";
+    }
+    return (React.createElement(Box, { alignItems: "center", flex: "grow", height: "100%", justifyContent: "center", width: "100%" },
+        React.createElement(RNModal, { animationType: "slide", transparent: true, visible: visible, onRequestClose: onDismiss },
+            React.createElement(Box, { alignItems: "center", alignSelf: "center", color: "white", dangerouslySetInlineStyle: {
+                    __style: {
+                        zIndex: 1,
+                        shadowColor: "#999",
+                        shadowOffset: {
+                            width: 4,
+                            height: 6,
+                        },
+                        shadowRadius: 4,
+                        shadowOpacity: 1.0,
+                        elevation: 8,
+                    },
+                }, direction: "column", justifyContent: "center", marginTop: 12, maxWidth: sizePx, minWidth: 300, paddingX: 8, paddingY: 2, rounding: 6, shadow: true, width: sizePx },
+                React.createElement(Box, { marginBottom: 6, width: "100%" },
+                    renderHeader(),
+                    React.createElement(Box, { paddingY: 4 }, children),
+                    React.createElement(Box, { paddingY: 4 }, renderFooter()))))));
+};
+//# sourceMappingURL=Modal.js.map

package/dist/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../src/Modal.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./Constants";
 export * from "./Common";
+export * from "./ActionSheet";
 export * from "./Avatar";
 export * from "./Banner";
 export * from "./BlurBox";
@@ -17,13 +18,13 @@ export * from "./Form";
 export * from "./HeaderButtons";
 export * from "./Heading";
 export * from "./Icon";
-export * from "./ActionSheet";
 export * from "./IconButton";
 export * from "./Image";
 export * from "./ImageBackground";
 export * from "./Link";
 export * from "./Mask";
 export * from "./Meta";
+export * from "./Modal";
 export * from "./Page";
 export * from "./Pill";
 export * from "./ScrollView";
@@ -44,6 +45,7 @@ export * from "./HeightActionSheet";
 export * from "./NumberPickerActionSheet";
 export * from "./ModalSheet";
 export * from "./ProgressBar";
+export * from "./DateTimeField";
 declare type ImageRequireSource = number;
 interface Insets {
     top?: number;

package/dist/index.js

@@ -1,5 +1,6 @@
 export * from "./Constants";
 export * from "./Common";
+export * from "./ActionSheet";
 export * from "./Avatar";
 export * from "./Banner";
 export * from "./BlurBox";
@@ -17,7 +18,6 @@ export * from "./Form";
 export * from "./HeaderButtons";
 export * from "./Heading";
 export * from "./Icon";
-export * from "./ActionSheet";
 export * from "./IconButton";
 export * from "./Image";
 export * from "./ImageBackground";
@@ -26,7 +26,7 @@ export * from "./ImageBackground";
 export * from "./Link";
 export * from "./Mask";
 export * from "./Meta";
-// export * from "./Modal";
+export * from "./Modal";
 export * from "./Page";
 export * from "./Pill";
 export * from "./ScrollView";
@@ -48,4 +48,5 @@ export * from "./NumberPickerActionSheet";
 // export * from "./Chart";
 export * from "./ModalSheet";
 export * from "./ProgressBar";
+export * from "./DateTimeField";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,4BAA4B;AAC5B,4BAA4B;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,2BAA2B;AAE3B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,2BAA2B;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,4BAA4B;AAC5B,4BAA4B;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AAExB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,2BAA2B;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferns-ui",
-  "version": "0.9.0",
+  "version": "0.11.1",
   "main": "dist/index.js",
   "license": "Apache-2.0",
   "scripts": {
@@ -127,7 +127,9 @@
     "@react-native-picker/picker": "2.4.4",
     "@types/lodash": "^4.14.184",
     "@types/mdurl": "^1.0.2",
+    "@types/react-datetime-picker": "^3.4.1",
     "@types/react-native": "^0.69.1",
+    "@types/react-time-picker": "^4.0.2",
     "@typescript-eslint/eslint-plugin": "^5.34.0",
     "@typescript-eslint/parser": "^5.34.0",
     "eslint": "^8.22.0",
@@ -149,6 +151,8 @@
     "prettier": "^2.6.2",
     "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
+    "react-date-picker": "^8.4.0",
+    "react-datetime-picker": "^3.5.0",
     "react-dev-utils": "^12.0.1",
     "react-dom": "18.2.0",
     "react-native": "0.69.4",
@@ -161,6 +165,7 @@
     "react-native-svg": "^13.0.0",
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
+    "react-time-picker": "^4.5.0",
     "typescript": "4.1.5"
   },
   "peerDependencies": {

package/src/Common.ts

@@ -659,6 +659,12 @@ export interface FieldWithLabelsProps {
   children?: React.ReactNode;
 }
 
+export interface DateTimeFieldProps extends FieldWithLabelsProps {
+  mode: "date" | "time" | "datetime";
+  value: Date;
+  onChange: (date: Date) => void;
+}
+
 export interface TextFieldProps extends FieldWithLabelsProps {
   innerRef?: any;
   id?: string;

package/src/DateTimeField.android.tsx

@@ -0,0 +1,59 @@
+import DateTimePicker from "@react-native-community/datetimepicker";
+import moment from "moment-timezone";
+import React, {ReactElement} from "react";
+import {View} from "react-native";
+
+import {Box} from "./Box";
+import {DateTimeFieldProps} from "./Common";
+import {WithLabel} from "./WithLabel";
+
+export const DateTimeField = ({
+  mode,
+  value,
+  onChange,
+  errorMessage,
+  errorMessageColor,
+}: DateTimeFieldProps): ReactElement => {
+  return (
+    <WithLabel
+      label={errorMessage}
+      labelColor={errorMessageColor || "red"}
+      labelPlacement="after"
+      labelSize="sm"
+    >
+      <WithLabel>
+        <View>
+          <Box maxWidth={300}>
+            <DateTimePicker
+              display="spinner"
+              mode={mode === "datetime" ? "date" : mode}
+              testID="dateTimePicker"
+              value={moment(value).toDate()}
+              onChange={(event: any, date: any) => {
+                if (!date) {
+                  return;
+                }
+                onChange(value);
+              }}
+            />
+            {mode === "datetime" && (
+              <DateTimePicker
+                display="spinner"
+                mode="time"
+                testID="dateTimePicker"
+                value={moment(value).toDate()}
+                onChange={(event: any, date: any) => {
+                  // fix to append to date object
+                  if (!date) {
+                    return;
+                  }
+                  onChange(value);
+                }}
+              />
+            )}
+          </Box>
+        </View>
+      </WithLabel>
+    </WithLabel>
+  );
+};

package/src/DateTimeField.ios.tsx

@@ -0,0 +1,44 @@
+import DateTimePicker from "@react-native-community/datetimepicker";
+import moment from "moment-timezone";
+import React, {ReactElement} from "react";
+import {View} from "react-native";
+
+import {Box} from "./Box";
+import {DateTimeFieldProps} from "./Common";
+import {WithLabel} from "./WithLabel";
+
+export const DateTimeField = ({
+  mode,
+  value,
+  onChange,
+  errorMessage,
+  errorMessageColor,
+}: DateTimeFieldProps): ReactElement => {
+  return (
+    <WithLabel
+      label={errorMessage}
+      labelColor={errorMessageColor || "red"}
+      labelPlacement="after"
+      labelSize="sm"
+    >
+      <WithLabel>
+        <View>
+          <Box maxWidth={300}>
+            <DateTimePicker
+              display="spinner"
+              mode={mode}
+              testID="dateTimePicker"
+              value={moment(value).toDate()}
+              onChange={(event: any, date: any) => {
+                if (!date) {
+                  return;
+                }
+                onChange(value);
+              }}
+            />
+          </Box>
+        </View>
+      </WithLabel>
+    </WithLabel>
+  );
+};

package/src/DateTimeField.tsx

@@ -0,0 +1,48 @@
+import React, {ReactElement} from "react";
+import DatePicker from "react-date-picker";
+import DateTimePickerWeb from "react-datetime-picker";
+import {View} from "react-native";
+import TimePicker from "react-time-picker";
+
+import {Box} from "./Box";
+import {DateTimeFieldProps} from "./Common";
+import {WithLabel} from "./WithLabel";
+
+export const DateTimeField = ({
+  mode,
+  value,
+  onChange,
+  errorMessage,
+  errorMessageColor,
+}: DateTimeFieldProps): ReactElement => {
+  return (
+    <WithLabel
+      label={errorMessage}
+      labelColor={errorMessageColor || "red"}
+      labelPlacement="after"
+      labelSize="sm"
+    >
+      <WithLabel>
+        <View>
+          <Box maxWidth={300}>
+            {mode === "datetime" && (
+              <DateTimePickerWeb disableClock value={value} onChange={onChange} />
+            )}
+            {mode === "date" && <DatePicker value={value} onChange={onChange} />}
+            {mode === "time" && (
+              <TimePicker
+                disableClock
+                value={value}
+                onChange={(newVal) => {
+                  // TimePicker returns a string or Date, so we need to make sure it's a Date
+                  const newDate = new Date(newVal);
+                  onChange(newDate);
+                }}
+              />
+            )}
+          </Box>
+        </View>
+      </WithLabel>
+    </WithLabel>
+  );
+};

package/src/Modal.tsx

@@ -0,0 +1,143 @@
+import React from "react";
+import {Dimensions, Modal as RNModal} from "react-native";
+
+import {Box} from "./Box";
+import {Button} from "./Button";
+import {Heading} from "./Heading";
+import {Text} from "./Text";
+
+interface ModalProps {
+  onDismiss: () => void;
+  visible: boolean;
+  // Alignment of the header. Default is "center".
+  align?: "center" | "start";
+  // Element to render in the middle part of the modal.
+  children?: React.ReactElement;
+  // Element to render in the bottom of the modal. This takes precedence over primaryButton and secondaryButton.
+  footer?: React.ReactElement;
+  heading?: string;
+  size?: "sm" | "md" | "lg";
+  subHeading?: string;
+  // Renders a primary colored button all the way to the right in the footer, if no footer prop is provided.
+  primaryButtonText?: string;
+  primaryButtonOnClick?: (value?: any) => void;
+  // Renders a primary gray button to the left of the primary button in the footer, if no footer prop is provided.
+  // Requires primaryButtonText to be defined, but is not required itself.
+  secondaryButtonText?: string;
+  secondaryButtonOnClick?: (value?: any) => void;
+}
+
+export const Modal = ({
+  onDismiss,
+  visible,
+  align = "center",
+  children,
+  footer,
+  heading,
+  size,
+  subHeading,
+  primaryButtonText,
+  primaryButtonOnClick,
+  secondaryButtonText,
+  secondaryButtonOnClick,
+}: ModalProps): React.ReactElement => {
+  if (subHeading && !heading) {
+    throw new Error("Cannot render Modal with subHeading and no heading");
+  }
+  if (!footer && !primaryButtonText && !secondaryButtonText) {
+    throw new Error(
+      "Cannot render Modal without footer, primaryButtonText, or secondaryButtonText"
+    );
+  }
+
+  function renderHeader(): React.ReactElement {
+    return (
+      <Box paddingY={3} width="100%">
+        <Box>
+          <Heading align={align === "center" ? "center" : undefined} size="sm">
+            {heading}
+          </Heading>
+        </Box>
+        {Boolean(subHeading) && (
+          <Box paddingY={2}>
+            <Text align={align === "center" ? "center" : undefined}>{subHeading}</Text>
+          </Box>
+        )}
+      </Box>
+    );
+  }
+  function renderFooter(): React.ReactElement | null {
+    if (footer) {
+      return footer;
+    }
+    return (
+      <Box direction="row" justifyContent="end" width="100%">
+        {Boolean(secondaryButtonText) && (
+          <Box marginRight={4} minWidth={120}>
+            <Button
+              color="gray"
+              text={secondaryButtonText ?? ""}
+              onClick={secondaryButtonOnClick}
+            />
+          </Box>
+        )}
+        <Box minWidth={120}>
+          <Button color="primary" text={primaryButtonText ?? ""} onClick={primaryButtonOnClick} />
+        </Box>
+      </Box>
+    );
+  }
+
+  let sizePx: string | number = 540;
+  if (size === "md") {
+    sizePx = 720;
+  } else if (size === "lg") {
+    sizePx = 900;
+  }
+
+  // Adjust size for small screens
+  if (sizePx > Dimensions.get("window").width) {
+    sizePx = "90%";
+  }
+
+  return (
+    <Box alignItems="center" flex="grow" height="100%" justifyContent="center" width="100%">
+      <RNModal animationType="slide" transparent visible={visible} onRequestClose={onDismiss}>
+        <Box
+          alignItems="center"
+          alignSelf="center"
+          color="white"
+          dangerouslySetInlineStyle={{
+            __style: {
+              zIndex: 1,
+              shadowColor: "#999",
+              shadowOffset: {
+                width: 4,
+                height: 6,
+              },
+              shadowRadius: 4,
+              shadowOpacity: 1.0,
+              elevation: 8,
+            },
+          }}
+          direction="column"
+          justifyContent="center"
+          marginTop={12}
+          maxWidth={sizePx}
+          minWidth={300}
+          paddingX={8}
+          paddingY={2}
+          rounding={6}
+          shadow
+          width={sizePx}
+        >
+          <Box marginBottom={6} width="100%">
+            {renderHeader()}
+            <Box paddingY={4}>{children}</Box>
+            <Box paddingY={4}>{renderFooter()}</Box>
+          </Box>
+        </Box>
+      </RNModal>
+    </Box>
+  );
+};

package/src/index.tsx

@@ -1,5 +1,6 @@
 export * from "./Constants";
 export * from "./Common";
+export * from "./ActionSheet";
 export * from "./Avatar";
 export * from "./Banner";
 export * from "./BlurBox";
@@ -17,7 +18,6 @@ export * from "./Form";
 export * from "./HeaderButtons";
 export * from "./Heading";
 export * from "./Icon";
-export * from "./ActionSheet";
 export * from "./IconButton";
 export * from "./Image";
 export * from "./ImageBackground";
@@ -26,7 +26,7 @@ export * from "./ImageBackground";
 export * from "./Link";
 export * from "./Mask";
 export * from "./Meta";
-// export * from "./Modal";
+export * from "./Modal";
 
 export * from "./Page";
 export * from "./Pill";
@@ -49,6 +49,7 @@ export * from "./NumberPickerActionSheet";
 // export * from "./Chart";
 export * from "./ModalSheet";
 export * from "./ProgressBar";
+export * from "./DateTimeField";
 
 // Lifted from react-native
 type ImageRequireSource = number;