ferns-ui 0.7.0 → 0.10.0

package/dist/Common.d.ts

@@ -602,7 +602,7 @@ export interface ScrollViewProps {
 }
 declare type ItemT = any;
 declare type ViewStyle = any;
-interface StyleProp {
+export interface StyleProp {
     [key: string]: any;
 }
 interface LayoutRectangle {
@@ -838,4 +838,11 @@ export interface ProgressBarProps {
     color: Color;
     completed: number;
 }
+export interface AddressInterface {
+    address1: string;
+    address2?: string;
+    city: string;
+    state: string;
+    zipcode: string;
+}
 export {};

package/dist/Constants.d.ts

@@ -0,0 +1,4 @@
+export declare const USSTATESLIST: {
+    label: string;
+    value: string;
+}[];

package/dist/Constants.js

@@ -0,0 +1,54 @@
+export const USSTATESLIST = [
+    { label: "AL", value: "Alabama" },
+    { label: "AK", value: "Alaska" },
+    { label: "AZ", value: "Arizona" },
+    { label: "AR", value: "Arkansas" },
+    { label: "CA", value: "California" },
+    { label: "CO", value: "Colorado" },
+    { label: "CT", value: "Connecticut" },
+    { label: "DE", value: "Delaware" },
+    { label: "DC", value: "District Of Columbia" },
+    { label: "FL", value: "Florida" },
+    { label: "GA", value: "Georgia" },
+    { label: "HI", value: "Hawaii" },
+    { label: "ID", value: "Idaho" },
+    { label: "IL", value: "Illinois" },
+    { label: "IN", value: "Indiana" },
+    { label: "IA", value: "Iowa" },
+    { label: "KS", value: "Kansas" },
+    { label: "KY", value: "Kentucky" },
+    { label: "LA", value: "Louisiana" },
+    { label: "ME", value: "Maine" },
+    { label: "MD", value: "Maryland" },
+    { label: "MA", value: "Massachusetts" },
+    { label: "MI", value: "Michigan" },
+    { label: "MN", value: "Minnesota" },
+    { label: "MS", value: "Mississippi" },
+    { label: "MO", value: "Missouri" },
+    { label: "MT", value: "Montana" },
+    { label: "NE", value: "Nebraska" },
+    { label: "NV", value: "Nevada" },
+    { label: "NH", value: "New Hampshire" },
+    { label: "NJ", value: "New Jersey" },
+    { label: "NM", value: "New Mexico" },
+    { label: "NY", value: "New York" },
+    { label: "NC", value: "North Carolina" },
+    { label: "ND", value: "North Dakota" },
+    { label: "OH", value: "Ohio" },
+    { label: "OK", value: "Oklahoma" },
+    { label: "OR", value: "Oregon" },
+    { label: "PA", value: "Pennsylvania" },
+    { label: "RI", value: "Rhode Island" },
+    { label: "SC", value: "South Carolina" },
+    { label: "SD", value: "South Dakota" },
+    { label: "TN", value: "Tennessee" },
+    { label: "TX", value: "Texas" },
+    { label: "UT", value: "Utah" },
+    { label: "VT", value: "Vermont" },
+    { label: "VA", value: "Virginia" },
+    { label: "WA", value: "Washington" },
+    { label: "WV", value: "West Virginia" },
+    { label: "WI", value: "Wisconsin" },
+    { label: "WY", value: "Wyoming" },
+];
+//# sourceMappingURL=Constants.js.map

package/dist/Constants.js.map

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

package/dist/Field.d.ts

@@ -9,7 +9,7 @@ export interface FieldProps extends FieldWithLabelsProps {
     handleChange: any;
     validate?: (value: any) => boolean;
     validateErrorMessage?: string;
-    type?: "boolean" | "email" | "text" | "textarea" | "number" | "currency" | "percent" | "select" | "password" | "url" | "date" | "multiselect";
+    type?: "boolean" | "email" | "text" | "textarea" | "number" | "currency" | "percent" | "select" | "password" | "url" | "date" | "multiselect" | "address";
     rows?: number;
     options?: SelectListOptions;
     placeholder?: string;

package/dist/Field.js

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { Box } from "./Box";
+import { USSTATESLIST } from "./Constants";
 import { FieldWithLabels } from "./FieldWithLabels";
 import { SelectList } from "./SelectList";
 import { Switch } from "./Switch";
@@ -32,6 +33,12 @@ export function Field(props) {
             props.handleChange(props.name, newValue);
         }
     };
+    const handleAddressChange = (field, newValue) => {
+        setValue(Object.assign(Object.assign({}, value), { [field]: newValue }));
+        if (props.handleChange) {
+            props.handleChange(props.name, Object.assign(Object.assign({}, value), { [field]: newValue }));
+        }
+    };
     const handleSwitchChange = (switchValue) => {
         setValue(switchValue);
         if (props.handleChange) {
@@ -84,6 +91,15 @@ export function Field(props) {
                 // TODO: allow editing with a date picker
                 value: value, onChange: (result) => handleChange(result.value) }));
         }
+        else if (props.type === "address") {
+            const { address1 = "", address2 = "", city = "", state = "", zipcode = "", } = value;
+            return (React.createElement(React.Fragment, null,
+                React.createElement(TextField, { id: "address1", label: "Street Address", type: "text", value: address1, onChange: (result) => handleAddressChange("address1", result.value) }),
+                React.createElement(TextField, { id: "address2", label: "Apt, suite, etc", type: "text", value: address2, onChange: (result) => handleAddressChange("address2", result.value) }),
+                React.createElement(TextField, { id: "city", label: "City", type: "text", value: city, onChange: (result) => handleAddressChange("city", result.value) }),
+                React.createElement(SelectList, { id: "state", label: "State", options: USSTATESLIST, placeholder: "Select state", style: { borderRadius: 16 }, value: state, onChange: (result) => handleAddressChange("state", result) }),
+                React.createElement(TextField, { id: "zipcode", label: "Zipcode", type: "text", value: zipcode, onChange: (result) => handleAddressChange("zipcode", result.value) })));
+        }
         else {
             let type = "text";
             // Number is supported differently because we need fractional numbers and they don't work

package/dist/Field.js.map

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

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/SelectList.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { FieldWithLabelsProps } from "./Common";
+import { FieldWithLabelsProps, StyleProp } from "./Common";
 export declare type SelectListOptions = {
     label: string;
     value: string;
@@ -13,5 +13,6 @@ export interface SelectListProps extends FieldWithLabelsProps {
     disabled?: boolean;
     size?: "md" | "lg";
     placeholder?: string;
+    style?: StyleProp;
 }
-export declare function SelectList({ options, value, onChange }: SelectListProps): JSX.Element;
+export declare function SelectList({ options, value, onChange, label, labelColor, style }: SelectListProps): JSX.Element;

package/dist/SelectList.js

@@ -1,22 +1,25 @@
 import React from "react";
 import RNPickerSelect from "./PickerSelect";
 import { Unifier } from "./Unifier";
-export function SelectList({ options, value, onChange }) {
-    return (React.createElement(RNPickerSelect, { items: options, placeholder: {}, style: {
-            viewContainer: {
-                flexDirection: "row",
-                justifyContent: "center",
-                alignItems: "center",
-                minHeight: 50,
-                width: "100%",
-                // Add padding so the border doesn't mess up layouts
-                paddingHorizontal: 6,
-                paddingVertical: 4,
-                borderColor: Unifier.theme.gray,
-                borderWidth: 1,
-                borderRadius: 5,
-                backgroundColor: Unifier.theme.white,
-            },
-        }, value: value, onValueChange: onChange }));
+import { WithLabel } from "./WithLabel";
+export function SelectList({ options, value, onChange, label, labelColor, style }) {
+    const withLabelProps = { label, labelColor };
+    return (React.createElement(WithLabel, Object.assign({}, withLabelProps),
+        React.createElement(RNPickerSelect, { items: options, placeholder: {}, style: {
+                viewContainer: {
+                    flexDirection: (style === null || style === void 0 ? void 0 : style.flexDirection) || "row",
+                    justifyContent: (style === null || style === void 0 ? void 0 : style.justifyContent) || "center",
+                    alignItems: (style === null || style === void 0 ? void 0 : style.alignItems) || "center",
+                    minHeight: (style === null || style === void 0 ? void 0 : style.minHeight) || 50,
+                    width: (style === null || style === void 0 ? void 0 : style.width) || "100%",
+                    // Add padding so the border doesn't mess up layouts
+                    paddingHorizontal: (style === null || style === void 0 ? void 0 : style.paddingHorizontal) || 6,
+                    paddingVertical: (style === null || style === void 0 ? void 0 : style.paddingVertical) || 4,
+                    borderColor: (style === null || style === void 0 ? void 0 : style.borderColor) || Unifier.theme.gray,
+                    borderWidth: (style === null || style === void 0 ? void 0 : style.borderWidth) || 1,
+                    borderRadius: (style === null || style === void 0 ? void 0 : style.borderRadius) || 5,
+                    backgroundColor: (style === null || style === void 0 ? void 0 : style.backgroundColor) || Unifier.theme.white,
+                },
+            }, value: value, onValueChange: onChange })));
 }
 //# sourceMappingURL=SelectList.js.map

package/dist/SelectList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectList.js","sourceRoot":"","sources":["../src/SelectList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,cAAc,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAelC,MAAM,UAAU,UAAU,CAAC,EAAC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAkB;IACpE,OAAO,CACL,oBAAC,cAAc,IACb,KAAK,EAAE,OAAO,EACd,WAAW,EAAE,EAAE,EACf,KAAK,EAAE;YACL,aAAa,EAAE;gBACb,aAAa,EAAE,KAAK;gBACpB,cAAc,EAAE,QAAQ;gBACxB,UAAU,EAAE,QAAQ;gBACpB,SAAS,EAAE,EAAE;gBACb,KAAK,EAAE,MAAM;gBACb,oDAAoD;gBACpD,iBAAiB,EAAE,CAAC;gBACpB,eAAe,EAAE,CAAC;gBAClB,WAAW,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI;gBAC/B,WAAW,EAAE,CAAC;gBACd,YAAY,EAAE,CAAC;gBACf,eAAe,EAAE,OAAO,CAAC,KAAK,CAAC,KAAK;aACrC;SACF,EACD,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,QAAQ,GACvB,CACH,CAAC;AACJ,CAAC"}
+{"version":3,"file":"SelectList.js","sourceRoot":"","sources":["../src/SelectList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,cAAc,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAgBtC,MAAM,UAAU,UAAU,CAAC,EAAC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAkB;IAC9F,MAAM,cAAc,GAAG,EAAC,KAAK,EAAE,UAAU,EAAC,CAAC;IAC3C,OAAO,CACL,oBAAC,SAAS,oBAAK,cAAc;QAC3B,oBAAC,cAAc,IACb,KAAK,EAAE,OAAO,EACd,WAAW,EAAE,EAAE,EACf,KAAK,EAAE;gBACL,aAAa,EAAE;oBACb,aAAa,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,aAAa,KAAI,KAAK;oBAC5C,cAAc,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,KAAI,QAAQ;oBACjD,UAAU,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAU,KAAI,QAAQ;oBACzC,SAAS,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,SAAS,KAAI,EAAE;oBACjC,KAAK,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,KAAI,MAAM;oBAC7B,oDAAoD;oBACpD,iBAAiB,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,iBAAiB,KAAI,CAAC;oBAChD,eAAe,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,KAAI,CAAC;oBAC5C,WAAW,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,KAAI,OAAO,CAAC,KAAK,CAAC,IAAI;oBACrD,WAAW,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,KAAI,CAAC;oBACpC,YAAY,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAY,KAAI,CAAC;oBACtC,eAAe,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,KAAI,OAAO,CAAC,KAAK,CAAC,KAAK;iBAC/D;aACF,EACD,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,QAAQ,GACvB,CACQ,CACb,CAAC;AACJ,CAAC"}

package/dist/index.d.ts

@@ -1,4 +1,6 @@
+export * from "./Constants";
 export * from "./Common";
+export * from "./ActionSheet";
 export * from "./Avatar";
 export * from "./Banner";
 export * from "./BlurBox";
@@ -16,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";

package/dist/index.js

@@ -1,4 +1,6 @@
+export * from "./Constants";
 export * from "./Common";
+export * from "./ActionSheet";
 export * from "./Avatar";
 export * from "./Banner";
 export * from "./BlurBox";
@@ -16,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";
@@ -25,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";

package/dist/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferns-ui",
-  "version": "0.7.0",
+  "version": "0.10.0",
   "main": "dist/index.js",
   "license": "Apache-2.0",
   "scripts": {
@@ -121,16 +121,16 @@
   },
   "devDependencies": {
     "@expo/vector-icons": "^13.0.0",
-    "@react-native-async-storage/async-storage": "^1.17.7",
-    "@react-native-community/blur": "^3.6.0",
-    "@react-native-community/datetimepicker": "^6.2.0",
-    "@react-native-picker/picker": "2.4.2",
-    "@types/lodash": "^4.14.182",
+    "@react-native-async-storage/async-storage": "^1.17.10",
+    "@react-native-community/blur": "^4.2.0",
+    "@react-native-community/datetimepicker": "^6.3.2",
+    "@react-native-picker/picker": "2.4.4",
+    "@types/lodash": "^4.14.184",
     "@types/mdurl": "^1.0.2",
     "@types/react-native": "^0.69.1",
-    "@typescript-eslint/eslint-plugin": "^5.23.0",
-    "@typescript-eslint/parser": "^5.23.0",
-    "eslint": "^8.15.0",
+    "@typescript-eslint/eslint-plugin": "^5.34.0",
+    "@typescript-eslint/parser": "^5.34.0",
+    "eslint": "^8.22.0",
     "eslint-config-ferns": "^0.4.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
@@ -142,51 +142,51 @@
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "eslint-plugin-unused-imports": "2.0.0",
     "expo-font": "^10.0.5",
-    "expo-haptics": "~11.2.0",
+    "expo-haptics": "~11.3.0",
     "lodash": "^4.17.21",
     "mixpanel-browser": "^2.38.0",
-    "moment-timezone": "^0.5.34",
+    "moment-timezone": "^0.5.35",
     "prettier": "^2.6.2",
-    "react": "^17.0.0",
-    "react-app-polyfill": "^1.0.6",
+    "react": "^18.2.0",
+    "react-app-polyfill": "^3.0.0",
     "react-dev-utils": "^12.0.1",
-    "react-dom": "17.0.2",
-    "react-native": "0.68.2",
-    "react-native-calendars": "^1.1286.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.69.4",
+    "react-native-calendars": "^1.1288.2",
     "react-native-gesture-handler": "^2.1.0",
-    "react-native-modalize": "^2.0.12",
-    "react-native-permissions": "^3.1.0",
+    "react-native-modalize": "^2.1.1",
+    "react-native-permissions": "^3.6.1",
     "react-native-picker-select": "^8.0.0",
     "react-native-portalize": "^1.0.7",
-    "react-native-svg": "^12.1.0",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
+    "react-native-svg": "^13.0.0",
+    "react-router": "^6.3.0",
+    "react-router-dom": "^6.3.0",
     "typescript": "4.1.5"
   },
   "peerDependencies": {
     "@expo/vector-icons": "^13.0.0",
-    "@react-native-async-storage/async-storage": "^1.17.7",
-    "@react-native-community/blur": "^3.6.0",
-    "@react-native-community/datetimepicker": "^6.2.0",
-    "@react-native-picker/picker": "2.4.2",
+    "@react-native-async-storage/async-storage": "^1.17.10",
+    "@react-native-community/blur": "^4.2.0",
+    "@react-native-community/datetimepicker": "^6.3.2",
+    "@react-native-picker/picker": "2.4.4",
     "expo-font": "^10.0.5",
-    "expo-haptics": "~11.2.0",
+    "expo-haptics": "~11.3.0",
     "lodash": "^4.17.21",
     "mixpanel-browser": "^2.38.0",
-    "moment-timezone": "^0.5.34",
-    "react": "^17.0.0",
-    "react-app-polyfill": "^1.0.6",
+    "moment-timezone": "^0.5.35",
+    "react": "^18.2.0",
+    "react-app-polyfill": "^3.0.0",
     "react-dev-utils": "^12.0.1",
-    "react-dom": "17.0.2",
-    "react-native": "0.68.2",
-    "react-native-calendars": "^1.1286.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.69.4",
+    "react-native-calendars": "^1.1288.2",
     "react-native-gesture-handler": "^2.1.0",
-    "react-native-modalize": "^2.0.12",
-    "react-native-permissions": "^3.1.0",
+    "react-native-modalize": "^2.1.1",
+    "react-native-permissions": "^3.6.1",
     "react-native-picker-select": "^8.0.0",
     "react-native-portalize": "^1.0.7",
-    "react-native-svg": "^12.1.0",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0"
+    "react-native-svg": "^13.0.0",
+    "react-router": "^6.3.0",
+    "react-router-dom": "^6.3.0"
   }
 }

package/src/Common.ts

@@ -1026,7 +1026,7 @@ export interface ScrollViewProps {
 
 type ItemT = any;
 type ViewStyle = any;
-interface StyleProp {
+export interface StyleProp {
   [key: string]: any;
 }
 
@@ -1329,3 +1329,11 @@ export interface ProgressBarProps {
   color: Color;
   completed: number;
 }
+
+export interface AddressInterface {
+  address1: string;
+  address2?: string;
+  city: string;
+  state: string;
+  zipcode: string;
+}

package/src/Constants.ts

@@ -0,0 +1,53 @@
+export const USSTATESLIST = [
+  {label: "AL", value: "Alabama"},
+  {label: "AK", value: "Alaska"},
+  {label: "AZ", value: "Arizona"},
+  {label: "AR", value: "Arkansas"},
+  {label: "CA", value: "California"},
+  {label: "CO", value: "Colorado"},
+  {label: "CT", value: "Connecticut"},
+  {label: "DE", value: "Delaware"},
+  {label: "DC", value: "District Of Columbia"},
+  {label: "FL", value: "Florida"},
+  {label: "GA", value: "Georgia"},
+  {label: "HI", value: "Hawaii"},
+  {label: "ID", value: "Idaho"},
+  {label: "IL", value: "Illinois"},
+  {label: "IN", value: "Indiana"},
+  {label: "IA", value: "Iowa"},
+  {label: "KS", value: "Kansas"},
+  {label: "KY", value: "Kentucky"},
+  {label: "LA", value: "Louisiana"},
+  {label: "ME", value: "Maine"},
+  {label: "MD", value: "Maryland"},
+  {label: "MA", value: "Massachusetts"},
+  {label: "MI", value: "Michigan"},
+  {label: "MN", value: "Minnesota"},
+  {label: "MS", value: "Mississippi"},
+  {label: "MO", value: "Missouri"},
+  {label: "MT", value: "Montana"},
+  {label: "NE", value: "Nebraska"},
+  {label: "NV", value: "Nevada"},
+  {label: "NH", value: "New Hampshire"},
+  {label: "NJ", value: "New Jersey"},
+  {label: "NM", value: "New Mexico"},
+  {label: "NY", value: "New York"},
+  {label: "NC", value: "North Carolina"},
+  {label: "ND", value: "North Dakota"},
+  {label: "OH", value: "Ohio"},
+  {label: "OK", value: "Oklahoma"},
+  {label: "OR", value: "Oregon"},
+  {label: "PA", value: "Pennsylvania"},
+  {label: "RI", value: "Rhode Island"},
+  {label: "SC", value: "South Carolina"},
+  {label: "SD", value: "South Dakota"},
+  {label: "TN", value: "Tennessee"},
+  {label: "TX", value: "Texas"},
+  {label: "UT", value: "Utah"},
+  {label: "VT", value: "Vermont"},
+  {label: "VA", value: "Virginia"},
+  {label: "WA", value: "Washington"},
+  {label: "WV", value: "West Virginia"},
+  {label: "WI", value: "Wisconsin"},
+  {label: "WY", value: "Wyoming"},
+];

package/src/Field.tsx

@@ -1,7 +1,8 @@
 import React, {useState} from "react";
 
 import {Box} from "./Box";
-import {FieldWithLabelsProps, TextFieldType} from "./Common";
+import {AddressInterface, FieldWithLabelsProps, TextFieldType} from "./Common";
+import {USSTATESLIST} from "./Constants";
 import {FieldWithLabels} from "./FieldWithLabels";
 import {SelectList, SelectListOptions} from "./SelectList";
 import {Switch} from "./Switch";
@@ -30,7 +31,8 @@ export interface FieldProps extends FieldWithLabelsProps {
     | "password"
     | "url"
     | "date"
-    | "multiselect";
+    | "multiselect"
+    | "address";
   rows?: number;
   options?: SelectListOptions;
   placeholder?: string;
@@ -63,6 +65,13 @@ export function Field(props: FieldProps) {
     }
   };
 
+  const handleAddressChange = (field: string, newValue: string) => {
+    setValue({...value, [field]: newValue});
+    if (props.handleChange) {
+      props.handleChange(props.name, {...value, [field]: newValue});
+    }
+  };
+
   const handleSwitchChange = (switchValue: boolean) => {
     setValue(switchValue);
     if (props.handleChange) {
@@ -159,6 +168,55 @@ export function Field(props: FieldProps) {
           onChange={(result) => handleChange(result.value)}
         />
       );
+    } else if (props.type === "address") {
+      const {
+        address1 = "",
+        address2 = "",
+        city = "",
+        state = "",
+        zipcode = "",
+      }: AddressInterface = value;
+      return (
+        <>
+          <TextField
+            id="address1"
+            label="Street Address"
+            type="text"
+            value={address1}
+            onChange={(result) => handleAddressChange("address1", result.value)}
+          />
+          <TextField
+            id="address2"
+            label="Apt, suite, etc"
+            type="text"
+            value={address2}
+            onChange={(result) => handleAddressChange("address2", result.value)}
+          />
+          <TextField
+            id="city"
+            label="City"
+            type="text"
+            value={city}
+            onChange={(result) => handleAddressChange("city", result.value)}
+          />
+          <SelectList
+            id="state"
+            label="State"
+            options={USSTATESLIST}
+            placeholder="Select state"
+            style={{borderRadius: 16}}
+            value={state}
+            onChange={(result) => handleAddressChange("state", result)}
+          />
+          <TextField
+            id="zipcode"
+            label="Zipcode"
+            type="text"
+            value={zipcode}
+            onChange={(result) => handleAddressChange("zipcode", result.value)}
+          />
+        </>
+      );
     } else {
       let type: TextFieldType = "text";
       // Number is supported differently because we need fractional numbers and they don't work

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/SelectList.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 
-import {FieldWithLabelsProps} from "./Common";
+import {FieldWithLabelsProps, StyleProp} from "./Common";
 import RNPickerSelect from "./PickerSelect";
 import {Unifier} from "./Unifier";
+import {WithLabel} from "./WithLabel";
 
 // Use "" if you want to have an "unset" value.
 export type SelectListOptions = {label: string; value: string}[];
@@ -15,31 +16,35 @@ export interface SelectListProps extends FieldWithLabelsProps {
   disabled?: boolean;
   size?: "md" | "lg";
   placeholder?: string;
+  style?: StyleProp;
 }
 
-export function SelectList({options, value, onChange}: SelectListProps) {
+export function SelectList({options, value, onChange, label, labelColor, style}: SelectListProps) {
+  const withLabelProps = {label, labelColor};
   return (
-    <RNPickerSelect
-      items={options}
-      placeholder={{}}
-      style={{
-        viewContainer: {
-          flexDirection: "row",
-          justifyContent: "center",
-          alignItems: "center",
-          minHeight: 50,
-          width: "100%",
-          // Add padding so the border doesn't mess up layouts
-          paddingHorizontal: 6,
-          paddingVertical: 4,
-          borderColor: Unifier.theme.gray,
-          borderWidth: 1,
-          borderRadius: 5,
-          backgroundColor: Unifier.theme.white,
-        },
-      }}
-      value={value}
-      onValueChange={onChange}
-    />
+    <WithLabel {...withLabelProps}>
+      <RNPickerSelect
+        items={options}
+        placeholder={{}}
+        style={{
+          viewContainer: {
+            flexDirection: style?.flexDirection || "row",
+            justifyContent: style?.justifyContent || "center",
+            alignItems: style?.alignItems || "center",
+            minHeight: style?.minHeight || 50,
+            width: style?.width || "100%",
+            // Add padding so the border doesn't mess up layouts
+            paddingHorizontal: style?.paddingHorizontal || 6,
+            paddingVertical: style?.paddingVertical || 4,
+            borderColor: style?.borderColor || Unifier.theme.gray,
+            borderWidth: style?.borderWidth || 1,
+            borderRadius: style?.borderRadius || 5,
+            backgroundColor: style?.backgroundColor || Unifier.theme.white,
+          },
+        }}
+        value={value}
+        onValueChange={onChange}
+      />
+    </WithLabel>
   );
 }

package/src/index.tsx

@@ -1,4 +1,6 @@
+export * from "./Constants";
 export * from "./Common";
+export * from "./ActionSheet";
 export * from "./Avatar";
 export * from "./Banner";
 export * from "./BlurBox";
@@ -16,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";
@@ -25,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";