@draftbit/core 42.1.5 → 42.1.7-71d4c6.1

package/src/components/DeprecatedFAB.js

@@ -0,0 +1,261 @@
+import * as React from "react";
+import { ActivityIndicator, View, StyleSheet, } from "react-native";
+import color from "color";
+import Config from "./Config";
+import Text from "./Text";
+import Touchable from "./Touchable";
+import Elevation from "./Elevation";
+import { withTheme } from "../theming";
+import { GROUPS, FORM_TYPES, PROP_TYPES, COMPONENT_TYPES, } from "@draftbit/types";
+const FAB = ({ Icon, icon, disabled = false, type = "solid", loading = false, color: colorOverride, label, onPress, elevation = 0, style, theme: { colors, disabledOpacity, roundness, typography }, ...rest }) => {
+    let backgroundColor, borderColor, textColor, borderWidth;
+    const buttonColor = colorOverride || colors.primary;
+    if (type === "standard" || type === "extended" || type === "fixed") {
+        backgroundColor = buttonColor;
+        if (disabled) {
+            textColor = color(colors.surface).alpha(disabledOpacity).rgb().string();
+        }
+        else {
+            textColor = colors.surface;
+        }
+    }
+    else {
+        backgroundColor = "transparent";
+        if (disabled) {
+            textColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
+        }
+        else {
+            textColor = buttonColor;
+        }
+    }
+    if (type === "outline") {
+        if (disabled) {
+            borderColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
+        }
+        else {
+            borderColor = buttonColor;
+        }
+        borderWidth = StyleSheet.hairlineWidth;
+    }
+    else {
+        borderColor = "transparent";
+        borderWidth = 0;
+    }
+    const buttonStyle = {
+        backgroundColor,
+        borderColor,
+        borderWidth,
+        borderRadius: roundness,
+        alignItems: "center",
+        justifyContent: "center",
+    };
+    const buttonStyles = [styles.button, buttonStyle];
+    const contentStyle = [styles.content];
+    const textStyle = {
+        textAlign: "center",
+        color: textColor,
+    };
+    const iconStyle = [
+        styles.icon,
+        {
+            width: Config.buttonIconSize,
+        },
+    ];
+    if (type === "standard" || type === "outline") {
+        buttonStyle.width = Config.FABSize;
+        buttonStyle.height = Config.FABSize;
+        buttonStyle.borderRadius = Config.FABBorderRadius;
+        contentStyle.push({
+            width: Config.FABSize,
+            height: Config.FABSize,
+        });
+    }
+    if (type === "extended" || type === "fixed") {
+        iconStyle.push({
+            marginLeft: 16,
+            marginRight: -8,
+        });
+        textStyle.margin = 16;
+    }
+    if (type === "fixed") {
+        buttonStyles.push({
+            height: Config.FABFixedHeight,
+            alignSelf: "stretch",
+        });
+    }
+    return (React.createElement(Elevation, { style: [{ elevation }, style] },
+        React.createElement(Touchable, { ...rest, onPress: onPress, accessibilityState: { disabled }, accessibilityRole: "button", disabled: disabled || loading, style: buttonStyles },
+            React.createElement(View, { style: styles.content },
+                icon && loading !== true ? (React.createElement(View, { style: iconStyle },
+                    React.createElement(Icon, { name: icon, size: Config.buttonIconSize, color: textColor }))) : null,
+                loading ? (React.createElement(ActivityIndicator, { size: "small", color: textColor, style: iconStyle })) : null,
+                label ? (React.createElement(Text, { numberOfLines: 1, style: [textStyle, typography.button] }, label)) : null))));
+};
+const styles = StyleSheet.create({
+    button: {
+        borderStyle: "solid",
+    },
+    content: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    icon: {
+        alignItems: "center",
+        justifyContent: "center",
+        width: Config.buttonIconSize,
+    },
+    fixed: {
+        left: 0,
+        right: 0,
+        bottom: 0,
+        height: 64,
+        borderRadius: 0,
+    },
+});
+export default withTheme(FAB);
+const SEED_DATA_PROPS = {
+    icon: {
+        group: GROUPS.basic,
+        label: "Icon Name",
+        description: "Name of the icon",
+        editable: true,
+        required: true,
+        formType: FORM_TYPES.icon,
+        propType: PROP_TYPES.ASSET,
+        defaultValue: null,
+    },
+    label: {
+        group: GROUPS.basic,
+        label: "Label",
+        description: "Button label",
+        required: true,
+        editable: true,
+        formType: FORM_TYPES.string,
+        propType: PROP_TYPES.STRING,
+        defaultValue: "GET STARTED",
+    },
+    color: {
+        group: GROUPS.basic,
+        label: "Color Override",
+        description: "Override the background color of the button",
+        editable: true,
+        required: false,
+        formType: FORM_TYPES.color,
+        propType: PROP_TYPES.THEME,
+        defaultValue: null,
+    },
+    onPress: {
+        group: GROUPS.basic,
+        label: "Action",
+        description: "Action to execute when button pressed",
+        editable: true,
+        required: false,
+        formType: FORM_TYPES.action,
+        propType: PROP_TYPES.STRING,
+        defaultValue: null,
+    },
+};
+export const SEED_DATA = [
+    {
+        name: "FAB Mini",
+        tag: "FAB",
+        category: COMPONENT_TYPES.deprecated,
+        description: "A round, mini FAB",
+        preview_image_url: "{CLOUDINARY_URL}/Button_FABMini.png",
+        props: {
+            ...SEED_DATA_PROPS,
+            type: {
+                group: GROUPS.uncategorized,
+                label: "Type",
+                description: "Button type",
+                editable: false,
+                required: true,
+                formType: FORM_TYPES.icon,
+                propType: PROP_TYPES.STRING,
+                defaultValue: "standard",
+            },
+            label: {
+                group: GROUPS.data,
+                label: "Label",
+                description: "Button label",
+                required: false,
+                editable: false,
+                formType: FORM_TYPES.string,
+                propType: PROP_TYPES.STRING,
+                defaultValue: null,
+            },
+        },
+        layout: {},
+    },
+    {
+        name: "FAB Outline",
+        tag: "FAB",
+        category: COMPONENT_TYPES.deprecated,
+        preview_image_url: "{CLOUDINARY_URL}/Button_FABMini.png",
+        props: {
+            ...SEED_DATA_PROPS,
+            type: {
+                group: GROUPS.uncategorized,
+                label: "Type",
+                description: "Button type",
+                editable: false,
+                required: true,
+                propType: PROP_TYPES.STRING,
+                formType: FORM_TYPES.string,
+                defaultValue: "outline",
+            },
+            label: {
+                group: GROUPS.uncategorized,
+                label: "Label",
+                description: "Button label",
+                required: false,
+                editable: false,
+                formType: FORM_TYPES.string,
+                propType: PROP_TYPES.STRING,
+                defaultValue: null,
+            },
+        },
+        layout: {},
+    },
+    {
+        name: "FAB Extended",
+        tag: "FAB",
+        category: COMPONENT_TYPES.deprecated,
+        preview_image_url: "{CLOUDINARY_URL}/Button_FABExtended.png",
+        props: {
+            ...SEED_DATA_PROPS,
+            type: {
+                group: GROUPS.uncategorized,
+                label: "Type",
+                description: "Button type",
+                editable: false,
+                required: true,
+                formType: FORM_TYPES.string,
+                propType: PROP_TYPES.STRING,
+                defaultValue: "extended",
+            },
+        },
+        layout: {},
+    },
+    {
+        name: "FAB Fixed",
+        tag: "FAB",
+        category: COMPONENT_TYPES.deprecated,
+        preview_image_url: "{CLOUDINARY_URL}/Button_FABFixed.png",
+        props: {
+            ...SEED_DATA_PROPS,
+            type: {
+                group: GROUPS.uncategorized,
+                label: "Type",
+                description: "Button type",
+                editable: false,
+                required: true,
+                formType: FORM_TYPES.string,
+                propType: PROP_TYPES.STRING,
+                defaultValue: "fixed",
+            },
+        },
+        layout: {},
+    },
+];

package/src/components/Divider.js

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+import { withTheme } from "../theming";
+import { GROUPS, FORM_TYPES, PROP_TYPES, COMPONENT_TYPES, } from "@draftbit/types";
+const Divider = ({ style, color, theme: { colors }, ...rest }) => {
+    return (React.createElement(View, { style: [
+            {
+                backgroundColor: color || colors.divider,
+                height: StyleSheet.hairlineWidth,
+            },
+            style,
+        ], ...rest }));
+};
+export default withTheme(Divider);
+export const SEED_DATA = [
+    {
+        name: "Divider",
+        tag: "Divider",
+        category: COMPONENT_TYPES.layout,
+        description: "A horizontal line used to divide content",
+        preview_image_url: "{CLOUDINARY_URL}/Divider.png",
+        supports_list_render: false,
+        props: {
+            color: {
+                group: GROUPS.basic,
+                label: "Color",
+                description: "The color of the divider",
+                editable: true,
+                required: false,
+                defaultValue: "divider",
+                formType: FORM_TYPES.color,
+                propType: PROP_TYPES.THEME,
+            },
+        },
+        layout: {
+            height: 1,
+        },
+    },
+];

package/src/components/Elevation.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { Animated, StyleSheet, View, } from "react-native";
+import shadow from "../styles/shadow";
+import { withTheme } from "../theming";
+/* directly copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx#L62 */
+const Elevation = ({ style, theme, children, ...rest }) => {
+    const { elevation = 4, borderRadius: radius } = StyleSheet.flatten(style) || {};
+    const { colors } = theme;
+    const borderRadius = radius;
+    return (React.createElement(Animated.View, { ...rest, style: [
+            {
+                borderRadius,
+                backgroundColor: colors.surface,
+            },
+            elevation ? shadow(elevation) : null,
+            style,
+        ] },
+        React.createElement(View, { style: { overflow: "hidden", borderRadius } }, children)));
+};
+export default withTheme(Elevation);

package/src/components/FAB.js

@@ -0,0 +1,82 @@
+import * as React from "react";
+import { View, StyleSheet, Pressable, ActivityIndicator, Platform, } from "react-native";
+import { withTheme } from "../theming";
+import { COMPONENT_TYPES, createIconProp, createColorProp, GROUPS, createBoolProp, createIconSizeProp, createActionProp, Triggers, } from "@draftbit/types";
+const FAB = ({ onPress, disabled, loading, iconName = "MaterialIcons/add", style, theme, iconColor, bgColor, size = 50, Icon, ...props }) => {
+    const backgroundColor = bgColor || theme.colors.primary;
+    const color = iconColor || "#FFF";
+    return (React.createElement(View, { style: [
+            {
+                width: size,
+                height: size,
+                borderRadius: size / 2,
+                overflow: "hidden",
+            },
+            style,
+        ] },
+        React.createElement(Pressable, { onPress: onPress, disabled: loading || disabled, android_ripple: {
+                color: "#333",
+                radius: size / 4,
+            }, style: ({ pressed }) => {
+                return [
+                    styles.button,
+                    {
+                        opacity: pressed || disabled ? 0.75 : 1,
+                        width: size,
+                        height: size,
+                        borderRadius: size / 2,
+                        backgroundColor,
+                    },
+                ];
+            }, ...props },
+            React.createElement(View, null, loading ? (React.createElement(ActivityIndicator, { size: "small", color: color })) : (React.createElement(Icon, { name: iconName, size: 28, color: color }))))));
+};
+const styles = StyleSheet.create({
+    button: {
+        backgroundColor: "#5a45ff",
+        justifyContent: "center",
+        alignItems: "center",
+        ...Platform.select({
+            web: {
+                cursor: "pointer",
+                userSelect: "none",
+            },
+        }),
+    },
+});
+export default withTheme(FAB);
+export const SEED_DATA = {
+    name: "FAB",
+    tag: "FAB",
+    category: COMPONENT_TYPES.button,
+    description: "A mini round icon FAB",
+    layout: {},
+    triggers: [Triggers.OnPress],
+    props: {
+        onPress: createActionProp(),
+        disabled: createBoolProp({
+            label: "Disabled",
+            group: GROUPS.basic,
+        }),
+        loading: createBoolProp({
+            label: "Loading",
+            group: GROUPS.basic,
+        }),
+        iconName: createIconProp({
+            label: "Icon",
+            defaultValue: null,
+            group: GROUPS.basic,
+        }),
+        iconColor: createColorProp({
+            label: "Icon color",
+            defaultValue: null,
+            group: GROUPS.basic,
+        }),
+        bgColor: createColorProp({
+            label: "Background color",
+            defaultValue: null,
+            group: GROUPS.basic,
+        }),
+        iconSize: createIconSizeProp(),
+    },
+};

package/src/components/FieldSearchBarFull.js

@@ -0,0 +1,92 @@
+import * as React from "react";
+import { View, TextInput, StyleSheet, } from "react-native";
+import { withTheme } from "../theming";
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, Triggers, } from "@draftbit/types";
+import Config from "./Config";
+import { usePrevious } from "../hooks";
+const FieldSearchBarFull = ({ Icon, icon = "search", placeholder = "", style, theme: { colors, typography }, onChange: changeOverride, onSubmit: submitOverride, value, initialValue, }) => {
+    const [focused, setIsFocused] = React.useState(false);
+    const onBlur = () => {
+        setIsFocused(false);
+    };
+    const onChange = React.useCallback((text) => {
+        changeOverride && changeOverride(text);
+    }, [changeOverride]);
+    const previousInitialValue = usePrevious(initialValue);
+    React.useEffect(() => {
+        if (initialValue !== previousInitialValue) {
+            onChange(initialValue);
+        }
+    }, [initialValue, previousInitialValue, onChange]);
+    const onFocus = () => {
+        setIsFocused(true);
+    };
+    const onSubmit = (e) => {
+        submitOverride && submitOverride(e);
+    };
+    const { lineHeight, ...typeStyles } = typography.body2; // eslint-disable-line @typescript-eslint/no-unused-vars
+    return (React.createElement(View, { style: [{ padding: 16 }, styles.container, style] },
+        React.createElement(Icon, { name: icon, size: Config.fieldSearchBarFullIconSize, color: focused ? colors.primary : colors.light }),
+        React.createElement(View, { style: { marginLeft: 12, flex: 1 } },
+            React.createElement(TextInput, { clearButtonMode: "while-editing", placeholder: placeholder, value: value, onBlur: onBlur, onFocus: onFocus, onChangeText: onChange, onSubmitEditing: onSubmit, placeholderTextColor: colors.light, style: [
+                    {
+                        color: colors.medium,
+                    },
+                    typeStyles,
+                ] }))));
+};
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        alignItems: "center",
+    },
+});
+export default withTheme(FieldSearchBarFull);
+export const SEED_DATA = [
+    {
+        name: "Search Bar",
+        tag: "FieldSearchBarFull",
+        description: "A search bar with accompanying search icon and clear button.",
+        category: COMPONENT_TYPES.input,
+        preview_image_url: "{CLOUDINARY_URL}/Field_SearchBar_Full.png",
+        supports_list_render: false,
+        triggers: [Triggers.OnChange],
+        props: {
+            icon: {
+                group: GROUPS.basic,
+                label: "Icon",
+                description: "Left icon to display",
+                formType: FORM_TYPES.icon,
+                propType: PROP_TYPES.ASSET,
+                defaultValue: null,
+                editable: true,
+                required: false,
+            },
+            placeholder: {
+                group: GROUPS.basic,
+                label: "Placeholder",
+                description: "Input placeholder text",
+                formType: FORM_TYPES.string,
+                propType: PROP_TYPES.STRING,
+                defaultValue: "Search for...",
+                editable: true,
+                required: false,
+            },
+            onSubmit: {
+                group: GROUPS.basic,
+                label: "Submit action",
+                description: "Action to execute on submission",
+                editable: true,
+                required: false,
+                formType: FORM_TYPES.action,
+                propType: PROP_TYPES.STRING,
+                defaultValue: null,
+            },
+            fieldName: {
+                ...FIELD_NAME,
+                defaultValue: "searchBarValue",
+            },
+        },
+        layout: {},
+    },
+];

package/src/components/FormRow.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { Text, StyleSheet } from "react-native";
+import { extractStyles } from "../utilities";
+import Touchable from "./Touchable";
+export default function FormRow({ disabled, direction, children, label, style, onPress, ...rest }) {
+    const { textStyles, viewStyles } = extractStyles(style);
+    return (React.createElement(Touchable, { disabled: disabled, onPress: onPress, style: [styles.row, { flexDirection: direction }, viewStyles], ...rest },
+        React.createElement(Text, { style: textStyles }, label),
+        children));
+}
+const styles = StyleSheet.create({
+    row: {
+        marginLeft: 8,
+        marginRight: 8,
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+    },
+});

package/src/components/Header.js

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { View, Text, StyleSheet, } from "react-native";
+import { withTheme } from "../theming";
+import Divider from "./Divider";
+import Touchable from "./Touchable";
+import Config from "./Config";
+const Header = ({ Icon, titleTypeStyle, titleColor, title, buttonText, dividerTopMargin, icon, onPress, style, theme: { colors, typography }, }) => {
+    return (React.createElement(View, { style: [styles.container, style] },
+        React.createElement(View, { style: styles.topContainer },
+            React.createElement(Text, { style: [
+                    titleTypeStyle,
+                    {
+                        color: titleColor,
+                        flex: 1,
+                    },
+                ], numberOfLines: 1 }, title),
+            onPress && (React.createElement(Touchable, { style: { alignSelf: "center", marginLeft: 12 }, onPress: onPress },
+                React.createElement(View, { style: styles.buttonContainer },
+                    React.createElement(Text, { style: [
+                            typography.subtitle2,
+                            {
+                                color: colors.light,
+                                marginRight: 8,
+                            },
+                        ], numberOfLines: 1 }, buttonText),
+                    React.createElement(Icon, { name: icon, size: Config.headerIconSize, color: colors.light }))))),
+        React.createElement(Divider, { style: { marginTop: dividerTopMargin || 16 } })));
+};
+const styles = StyleSheet.create({
+    container: {
+        alignSelf: "stretch",
+    },
+    topContainer: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+    },
+    buttonContainer: {
+        flexDirection: "row",
+        justifyContent: "center",
+        alignItems: "center",
+    },
+});
+export default withTheme(Header);

package/src/components/HeaderLarge.js

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { withTheme } from "../theming";
+import { COMPONENT_TYPES, createIconProp, createTextProp, createActionProp, Triggers, } from "@draftbit/types";
+import Header from "./Header";
+const HeaderLarge = ({ Icon, title, buttonText, icon, onPress = () => { }, style, theme: { colors, typography }, }) => {
+    return (React.createElement(Header, { Icon: Icon, titleTypeStyle: typography.headline4, titleColor: colors.strong, title: title, buttonText: buttonText, icon: icon, onPress: onPress, style: style }));
+};
+export default withTheme(HeaderLarge);
+export const SEED_DATA = [
+    {
+        name: "Header Large",
+        tag: "HeaderLarge",
+        description: "A large header with an optional touchable right aligned text and icon.",
+        category: COMPONENT_TYPES.header,
+        layout: {},
+        triggers: [Triggers.OnPress],
+        props: {
+            onPress: createActionProp(),
+            title: createTextProp({
+                label: "Title",
+                description: "Text to display",
+                defaultValue: "Title",
+            }),
+            buttonText: createTextProp({
+                label: "Button text",
+                description: "Right aligned button text to display",
+                defaultValue: "See All",
+            }),
+            icon: createIconProp({
+                defaultValue: null,
+                required: false,
+            }),
+        },
+    },
+];

package/src/components/HeaderMedium.js

@@ -0,0 +1,61 @@
+import * as React from "react";
+import { withTheme } from "../theming";
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, } from "@draftbit/types";
+import Header from "./Header";
+const HeaderMedium = ({ Icon, title, buttonText, icon, onPress = () => { }, style, theme: { colors, typography }, }) => {
+    return (React.createElement(Header, { Icon: Icon, titleTypeStyle: typography.headline6, titleColor: colors.strong, title: title, buttonText: buttonText, icon: icon, onPress: onPress, style: style }));
+};
+export default withTheme(HeaderMedium);
+export const SEED_DATA = [
+    {
+        name: "Header Medium",
+        tag: "HeaderMedium",
+        description: "A medium header with an optional touchable right aligned text and icon.",
+        category: COMPONENT_TYPES.header,
+        preview_image_url: "{CLOUDINARY_URL}/Header_HeadlineMediumIconText.png",
+        supports_list_render: false,
+        props: {
+            title: {
+                group: GROUPS.data,
+                label: "Title",
+                description: "Text to display",
+                formType: FORM_TYPES.string,
+                propType: PROP_TYPES.STRING,
+                defaultValue: "Title",
+                editable: true,
+                required: false,
+            },
+            buttonText: {
+                group: GROUPS.data,
+                label: "Button text",
+                description: "Right aligned button text to display",
+                formType: FORM_TYPES.string,
+                propType: PROP_TYPES.STRING,
+                defaultValue: "See All",
+                editable: true,
+                required: false,
+            },
+            icon: {
+                group: GROUPS.basic,
+                label: "Icon",
+                description: "Name of icon to display",
+                formType: FORM_TYPES.icon,
+                propType: PROP_TYPES.ASSET,
+                defaultValue: null,
+                editable: true,
+                required: false,
+            },
+            onPress: {
+                group: GROUPS.basic,
+                label: "Action",
+                description: "Action to execute when button pressed",
+                editable: true,
+                required: false,
+                formType: FORM_TYPES.action,
+                propType: PROP_TYPES.STRING,
+                defaultValue: null,
+            },
+        },
+        layout: {},
+    },
+];