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

package/src/components/RowBodyIcon.js

@@ -0,0 +1,83 @@
+import * as React from "react";
+import { withTheme } from "../theming";
+import { COMPONENT_TYPES, FORM_TYPES, GROUPS, PROP_TYPES, } from "@draftbit/types";
+import Row from "./Row";
+import Config from "./Config";
+const RowBodyIcon = ({ Icon, title, subtitle, icon, style, theme: { colors, typography }, }) => {
+    return (React.createElement(Row, { titleTypeStyle: typography.body1, titleColor: colors.medium, subtitleTypeStyle: typography.subtitle2, subtitleColor: colors.light, title: title, subtitle: subtitle, right: () => (React.createElement(Icon, { name: icon, size: Config.rowSingleLineIconSize, color: colors.light, style: { marginLeft: 16 } })), style: style }));
+};
+export default withTheme(RowBodyIcon);
+export const SEED_DATA = [
+    {
+        name: "Row Single Line Body Icon",
+        tag: "RowBodyIcon",
+        description: "A row with left aligned body text and a right aligned icon",
+        category: COMPONENT_TYPES.row,
+        preview_image_url: "{CLOUDINARY_URL}/Row_SingleLine_BodyIcon.png",
+        supports_list_render: true,
+        props: {
+            title: {
+                group: GROUPS.data,
+                label: "Title",
+                description: "Text to display",
+                formType: FORM_TYPES.string,
+                propType: PROP_TYPES.STRING,
+                defaultValue: "Beautiful West Coast Villa",
+                editable: true,
+                required: false,
+            },
+            icon: {
+                group: GROUPS.basic,
+                label: "Icon",
+                description: "Icon to display",
+                formType: FORM_TYPES.icon,
+                propType: PROP_TYPES.ASSET,
+                defaultValue: null,
+                editable: true,
+                required: false,
+            },
+        },
+        layout: {},
+    },
+    {
+        name: "Row Double Line Body Icon",
+        tag: "RowBodyIcon",
+        description: "A row with left aligned body text and subtitle text and a right aligned icon",
+        category: COMPONENT_TYPES.row,
+        preview_image_url: "{CLOUDINARY_URL}/Row_DoubleLine_BodyIcon.png",
+        supports_list_render: true,
+        props: {
+            title: {
+                group: GROUPS.data,
+                label: "Title",
+                description: "Text to display",
+                formType: FORM_TYPES.string,
+                propType: PROP_TYPES.STRING,
+                defaultValue: "Beautiful West Coast Villa",
+                editable: true,
+                required: false,
+            },
+            subtitle: {
+                group: GROUPS.data,
+                label: "Subtitle",
+                description: "Subtitle text to display",
+                formType: FORM_TYPES.string,
+                propType: PROP_TYPES.STRING,
+                defaultValue: "San Diego",
+                editable: true,
+                required: false,
+            },
+            icon: {
+                group: GROUPS.basic,
+                label: "Icon",
+                description: "Icon to display",
+                formType: FORM_TYPES.icon,
+                propType: PROP_TYPES.ASSET,
+                defaultValue: null,
+                editable: true,
+                required: false,
+            },
+        },
+        layout: {},
+    },
+];

package/src/components/RowHeadlineImageCaption.js

@@ -0,0 +1,179 @@
+import * as React from "react";
+import { Text } from "react-native";
+import { withTheme } from "../theming";
+import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, GROUPS, } from "@draftbit/types";
+import Row from "./Row";
+const RowHeadlineImageCaption = ({ title, subtitle, caption, image, style, theme: { colors, typography }, }) => {
+    return (React.createElement(Row, { titleTypeStyle: typography.headline6, titleColor: colors.strong, subtitleTypeStyle: typography.body2, subtitleColor: colors.medium, title: title, subtitle: subtitle, image: image, right: () => (React.createElement(Text, { style: {
+                ...typography.caption,
+                color: colors.strong,
+                marginLeft: 16,
+            } }, caption)), style: style }));
+};
+export default withTheme(RowHeadlineImageCaption);
+export const SEED_DATA = [
+    {
+        name: "Row Single Line Headline Caption",
+        tag: "RowHeadlineImageCaption",
+        description: "A row with left aligned headline text and right aligned caption text",
+        category: COMPONENT_TYPES.row,
+        preview_image_url: "{CLOUDINARY_URL}/Row_SingleLine_HeadlineCaption.png",
+        supports_list_render: true,
+        props: {
+            title: {
+                group: GROUPS.data,
+                label: "Title",
+                description: "Headline text to display",
+                formType: FORM_TYPES.string,
+                propType: PROP_TYPES.STRING,
+                defaultValue: "Beautiful West Coast Villa",
+                editable: true,
+                required: false,
+            },
+            caption: {
+                group: GROUPS.data,
+                label: "Caption",
+                description: "Caption text to display",
+                formType: FORM_TYPES.string,
+                propType: PROP_TYPES.STRING,
+                defaultValue: "$100",
+                editable: true,
+                required: false,
+            },
+        },
+        layout: {},
+    },
+    {
+        name: "Row Single Line Headline Image Caption",
+        tag: "RowHeadlineImageCaption",
+        description: "A row with left aligned image and headline text and right aligned caption text",
+        category: COMPONENT_TYPES.row,
+        preview_image_url: "{CLOUDINARY_URL}/Row_SingleLine_HeadlineImageCaption.png",
+        supports_list_render: true,
+        props: {
+            title: {
+                group: GROUPS.data,
+                label: "Title",
+                description: "Headline text to display",
+                formType: FORM_TYPES.string,
+                propType: PROP_TYPES.STRING,
+                defaultValue: "Beautiful West Coast Villa",
+                editable: true,
+                required: false,
+            },
+            caption: {
+                group: GROUPS.data,
+                label: "Caption",
+                description: "Caption text to display",
+                formType: FORM_TYPES.string,
+                propType: PROP_TYPES.STRING,
+                defaultValue: "$100",
+                editable: true,
+                required: false,
+            },
+            image: {
+                group: GROUPS.data,
+                label: "Image",
+                description: "Image to display",
+                formType: FORM_TYPES.image,
+                propType: PROP_TYPES.ASSET,
+                defaultValue: null,
+                editable: true,
+                required: false,
+            },
+        },
+        layout: {},
+    },
+    {
+        name: "Row Double Line Headline Caption",
+        tag: "RowHeadlineImageCaption",
+        description: "A row with left aligned headline text and subtitle text and right aligned caption text",
+        category: COMPONENT_TYPES.row,
+        preview_image_url: "{CLOUDINARY_URL}/Row_DoubleLine_HeadlineCaption.png",
+        supports_list_render: true,
+        props: {
+            title: {
+                group: GROUPS.data,
+                label: "Title",
+                description: "Headline text to display",
+                formType: FORM_TYPES.string,
+                propType: PROP_TYPES.STRING,
+                defaultValue: "Beautiful West Coast Villa",
+                editable: true,
+                required: false,
+            },
+            subtitle: {
+                group: GROUPS.data,
+                label: "Subtitle",
+                description: "Subtitle text to display",
+                formType: FORM_TYPES.string,
+                propType: PROP_TYPES.STRING,
+                defaultValue: "San Diego",
+                editable: true,
+                required: false,
+            },
+            caption: {
+                group: GROUPS.data,
+                label: "Caption",
+                description: "Caption text to display",
+                formType: FORM_TYPES.string,
+                propType: PROP_TYPES.STRING,
+                defaultValue: "$100",
+                editable: true,
+                required: false,
+            },
+        },
+        layout: {},
+    },
+    {
+        name: "Row Double Line Headline Image Caption",
+        tag: "RowHeadlineImageCaption",
+        description: "A row with left aligned image, headline text, and subtitle text, and right aligned caption text",
+        category: COMPONENT_TYPES.row,
+        preview_image_url: "{CLOUDINARY_URL}/Row_DoubleLine_HeadlineCaption.png",
+        supports_list_render: true,
+        props: {
+            title: {
+                group: GROUPS.data,
+                label: "Title",
+                description: "Headline text to display",
+                formType: FORM_TYPES.string,
+                propType: PROP_TYPES.STRING,
+                defaultValue: "Beautiful West Coast Villa",
+                editable: true,
+                required: false,
+            },
+            subtitle: {
+                group: GROUPS.data,
+                label: "Subtitle",
+                description: "Subtitle text to display",
+                formType: FORM_TYPES.string,
+                propType: PROP_TYPES.STRING,
+                defaultValue: "San Diego",
+                editable: true,
+                required: false,
+            },
+            caption: {
+                group: GROUPS.data,
+                label: "Caption",
+                description: "Caption text to display",
+                formType: FORM_TYPES.string,
+                propType: PROP_TYPES.STRING,
+                defaultValue: "$100",
+                editable: true,
+                required: false,
+            },
+            image: {
+                group: GROUPS.data,
+                label: "Image",
+                description: "Image to display",
+                formType: FORM_TYPES.image,
+                propType: PROP_TYPES.ASSET,
+                defaultValue: null,
+                editable: true,
+                required: false,
+            },
+        },
+        layout: {},
+    },
+];

package/src/components/RowHeadlineImageIcon.js

@@ -0,0 +1,113 @@
+import * as React from "react";
+import { withTheme } from "../theming";
+import { COMPONENT_TYPES, createIconProp, createTextProp, createImageProp, createStaticBoolProp, } from "@draftbit/types";
+import Row from "./Row";
+import Config from "./Config";
+const RowHeadlineImageIcon = ({ Icon, icon, title, image, subtitle, multilineSubtitle = false, style, theme: { colors, typography }, }) => {
+    return (React.createElement(Row, { titleTypeStyle: typography.headline6, titleColor: colors.strong, subtitleTypeStyle: typography.body2, subtitleColor: colors.medium, title: title, subtitle: subtitle, multilineSubtitle: multilineSubtitle, image: image, right: () => (React.createElement(Icon, { name: icon, size: multilineSubtitle
+                ? Config.rowMultiLineIconSize
+                : Config.rowSingleLineIconSize, color: colors.light, style: {
+                marginLeft: 16,
+                alignSelf: multilineSubtitle ? "flex-start" : "center",
+                marginTop: multilineSubtitle ? 4 : 0,
+            } })), style: style }));
+};
+export default withTheme(RowHeadlineImageIcon);
+const SEED_DATA_PROPS = {
+    title: createTextProp({
+        label: "Title",
+        description: "Headline text to display",
+    }),
+    icon: createIconProp({
+        defaultValue: null,
+    }),
+};
+const IMAGE_PROP = createImageProp();
+const MULTILINE_PROP = createStaticBoolProp({
+    defaultValue: true,
+    editable: false,
+});
+const SUBTITLE_PROP = createTextProp({
+    label: "Subtitle",
+    description: "Subtitle text to display",
+    defaultValue: "San Diego",
+});
+export const SEED_DATA = [
+    {
+        name: "Row Single Line Headline Icon",
+        tag: "RowHeadlineImageIcon",
+        description: "A row with left aligned headline text and a right aligned icon",
+        category: COMPONENT_TYPES.row,
+        layout: {},
+        props: {
+            ...SEED_DATA_PROPS,
+        },
+    },
+    {
+        name: "Row Single Line Headline Icon Image",
+        tag: "RowHeadlineImageIcon",
+        description: "A row with left aligned image and headline text and a right aligned icon",
+        category: COMPONENT_TYPES.row,
+        layout: {},
+        props: {
+            ...SEED_DATA_PROPS,
+            image: IMAGE_PROP,
+        },
+    },
+    {
+        name: "Row Double Line Headline Icon",
+        tag: "RowHeadlineImageIcon",
+        description: "A row with left aligned headline text and subtitle text and a right aligned icon",
+        category: COMPONENT_TYPES.row,
+        layout: {},
+        props: {
+            ...SEED_DATA_PROPS,
+            subtitle: SUBTITLE_PROP,
+        },
+    },
+    {
+        name: "Row Double Line Headline Image Icon",
+        tag: "RowHeadlineImageIcon",
+        description: "A row with left aligned headline text and subtitle text and a right aligned icon",
+        category: COMPONENT_TYPES.row,
+        layout: {},
+        props: {
+            ...SEED_DATA_PROPS,
+            image: IMAGE_PROP,
+            subtitle: SUBTITLE_PROP,
+        },
+    },
+    {
+        name: "Row Multiline Headline Icon",
+        tag: "RowHeadlineImageIcon",
+        description: "A row with left aligned headline text and multiline subtitle text and a right aligned icon",
+        category: COMPONENT_TYPES.row,
+        layout: {},
+        props: {
+            ...SEED_DATA_PROPS,
+            multilineSubtitle: MULTILINE_PROP,
+            subtitle: createTextProp({
+                label: "Subtitle",
+                description: "Subtitle text to display",
+                defaultValue: "San Diego is a city on the Pacific coast of California known for its beaches, parks and warm climate",
+            }),
+        },
+    },
+    {
+        name: "Row Multiline Headline Image Icon",
+        tag: "RowHeadlineImageIcon",
+        description: "A row with left aligned image, headline text, and multiline subtitle text, and a right aligned icon",
+        category: COMPONENT_TYPES.row,
+        layout: {},
+        props: {
+            ...SEED_DATA_PROPS,
+            image: IMAGE_PROP,
+            multilineSubtitle: MULTILINE_PROP,
+            subtitle: createTextProp({
+                label: "Subtitle",
+                description: "Subtitle text to display",
+                defaultValue: "San Diego is a city on the Pacific coast of California known for its beaches, parks and warm climate",
+            }),
+        },
+    },
+];

package/src/components/ScreenContainer.js

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { StyleSheet, ScrollView as NativeScrollView, View, } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { withTheme } from "../theming";
+function ScrollView({ children, style, }) {
+    return (React.createElement(NativeScrollView, { contentContainerStyle: [
+            {
+                flexGrow: 1,
+            },
+            style,
+        ] }, children));
+}
+function ScreenContainer({ hasSafeArea = false, scrollable = false, hasBottomSafeArea, hasTopSafeArea, theme, style, children, ...rest }) {
+    const backgroundColor = theme.colors.background;
+    const edges = ["left", "right"];
+    if (hasSafeArea || hasTopSafeArea) {
+        edges.push("top");
+    }
+    if (hasSafeArea || hasBottomSafeArea) {
+        edges.push("bottom");
+    }
+    return (React.createElement(SafeAreaView, { edges: edges, style: [
+            styles.container,
+            {
+                backgroundColor,
+            },
+        ], ...rest },
+        React.createElement(View, { style: [styles.container, { backgroundColor }, style] }, scrollable ? (React.createElement(ScrollView, { style: style }, children)) : (children))));
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+});
+export default withTheme(ScreenContainer);

package/src/components/Slider.js

@@ -0,0 +1,114 @@
+import * as React from "react";
+import { View, StyleSheet } from "react-native";
+import NativeSlider from "@react-native-community/slider";
+import isNumber from "lodash.isnumber";
+import toNumber from "lodash.tonumber";
+import { COMPONENT_TYPES, GROUPS, createNumberProp, createColorProp, createFieldNameProp, createIconProp, Triggers, } from "@draftbit/types";
+import { withTheme } from "../theming";
+import { usePrevious } from "../hooks";
+function maybeParseValue(value) {
+    if (value === undefined) {
+        return undefined;
+    }
+    if (isNumber(value)) {
+        return value;
+    }
+    try {
+        const maybe = toNumber(value);
+        if (isNumber(maybe)) {
+            return maybe;
+        }
+    }
+    catch {
+        return undefined;
+    }
+    return undefined;
+}
+function Slider({ Icon, leftIcon, rightIcon, leftIconColor, rightIconColor, value, initialValue, minimumTrackTintColor, maximumTrackTintColor, thumbTintColor, minimumValue = 0, maximumValue = 100, tapToSeek, step = 1, onValueChange = () => { }, style, theme, ...rest }) {
+    const previousInitialValue = usePrevious(initialValue);
+    React.useEffect(() => {
+        if (initialValue !== previousInitialValue) {
+            onValueChange(initialValue);
+        }
+    }, [initialValue, previousInitialValue, onValueChange]);
+    const minTrackColor = minimumTrackTintColor || theme.colors.primary;
+    const maxTrackColor = maximumTrackTintColor || theme.colors.light;
+    const thumbColor = thumbTintColor || theme.colors.primary;
+    const leftIconThemeColor = leftIconColor || theme.colors.light;
+    const rightIconThemeColor = rightIconColor || theme.colors.light;
+    const parsedValue = maybeParseValue(value);
+    return (React.createElement(View, { style: [styles.container, style], ...rest },
+        leftIcon ? (React.createElement(Icon, { color: leftIconThemeColor, name: leftIcon, size: 24 })) : null,
+        React.createElement(NativeSlider, { value: parsedValue, step: step, minimumValue: minimumValue, maximumValue: maximumValue, tapToSeek: tapToSeek, minimumTrackTintColor: minTrackColor, maximumTrackTintColor: maxTrackColor, thumbTintColor: thumbColor, onSlidingComplete: onValueChange, style: styles.slider }),
+        rightIcon ? (React.createElement(Icon, { color: rightIconThemeColor, name: rightIcon, size: 24 })) : null));
+}
+const styles = StyleSheet.create({
+    container: {
+        height: 40,
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    slider: {
+        flex: 1,
+        marginHorizontal: 12,
+    },
+});
+export default withTheme(Slider);
+export const SEED_DATA = {
+    name: "Slider",
+    tag: "Slider",
+    description: "A component used to set a value in a range",
+    category: COMPONENT_TYPES.input,
+    layout: {
+        marginLeft: 12,
+        marginRight: 12,
+    },
+    triggers: [Triggers.OnValueChange],
+    props: {
+        fieldName: createFieldNameProp({
+            defaultValue: "sliderValue",
+            handlerPropName: "onValueChange",
+            valuePropName: "value",
+        }),
+        minimumValue: createNumberProp({
+            group: GROUPS.basic,
+            label: "Min Value",
+            min: 0,
+            max: 1000,
+        }),
+        maximumValue: createNumberProp({
+            group: GROUPS.basic,
+            label: "Max Value",
+            min: 1,
+            max: 10000,
+        }),
+        step: createNumberProp({
+            group: GROUPS.basic,
+            label: "Step",
+            min: 0,
+            max: 100,
+            step: 0.01,
+            precision: 2,
+        }),
+        leftIcon: createIconProp({
+            label: "Left Icon",
+            defaultValue: null,
+        }),
+        rightIcon: createIconProp({
+            label: "Right Icon",
+            defaultValue: null,
+        }),
+        minimumTrackTintColor: createColorProp({
+            label: "Min Track Color",
+            defaultValue: null,
+        }),
+        maximumTrackTintColor: createColorProp({
+            label: "Max Track Color",
+            defaultValue: null,
+        }),
+        thumbTintColor: createColorProp({
+            label: "Thumb Color",
+            defaultValue: null,
+        }),
+    },
+};

package/src/components/StarRating.js

@@ -0,0 +1,80 @@
+import * as React from "react";
+import { View, StyleSheet, Pressable, } from "react-native";
+import { withTheme } from "../theming";
+import { COMPONENT_TYPES, createStaticNumberProp, createFieldNameProp, createStaticBoolProp, Triggers, } from "@draftbit/types";
+const StarRating = ({ Icon, starSize = 16, maxStars = 5, rating = 0, isEditable = false, theme, style, onPress, ...rest }) => {
+    const [localRating, setLocalRating] = React.useState(rating);
+    React.useEffect(() => {
+        setLocalRating(rating);
+    }, [rating]);
+    const ratingHandler = React.useCallback((r) => {
+        setLocalRating(r);
+        !!onPress && onPress(r);
+    }, [onPress]);
+    const ratingRounded = Math.round(localRating * 2) / 2;
+    return (React.createElement(View, { style: [styles.container, style], ...rest }, [...Array(maxStars)].map((_, i) => (React.createElement(View, { key: i, style: { display: "flex" } },
+        React.createElement(Icon, { name: ratingRounded - i === 0.5
+                ? "MaterialIcons/star-half"
+                : "MaterialIcons/star", size: starSize, color: ratingRounded > i ? theme.colors.primary : theme.colors.divider }),
+        isEditable && (React.createElement(View, { style: styles.touchContainer },
+            React.createElement(Pressable, { style: styles.pressable, onPress: () => ratingHandler(i + 0.5) }),
+            React.createElement(Pressable, { style: styles.pressable, onPress: () => ratingHandler(i + 1) }))))))));
+};
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    touchContainer: {
+        display: "flex",
+        flexDirection: "row",
+        position: "absolute",
+        top: 0,
+        right: 0,
+        left: 0,
+        bottom: 0,
+        zIndex: 1,
+    },
+    pressable: {
+        flex: 1,
+        height: "100%",
+        width: "50%",
+    },
+});
+export default withTheme(StarRating);
+export const SEED_DATA = {
+    name: "Star Rating",
+    tag: "StarRating",
+    description: "A star rating component",
+    category: COMPONENT_TYPES.button,
+    triggers: [Triggers.OnPress],
+    props: {
+        starSize: createStaticNumberProp({
+            label: "Star size",
+            description: "Size of each individual star",
+            defaultValue: 16,
+            min: 8,
+            max: 36,
+            step: 1,
+        }),
+        fieldName: createFieldNameProp({
+            defaultValue: "ratingValue",
+            handlerPropName: "onPress",
+            valuePropName: "rating", // the value prop in this component
+        }),
+        maxStars: createStaticNumberProp({
+            label: "Max stars",
+            description: "The max number of stars",
+            defaultValue: 5,
+            min: 0,
+            max: 10,
+            step: 1,
+        }),
+        rating: createStaticNumberProp({
+            label: "Rating",
+        }),
+        isEditable: createStaticBoolProp({
+            label: "Editable",
+        }),
+    },
+};