@draftbit/core 46.4.4-6da88d.2 → 46.4.4-7001c8.2

package/src/components/ToggleButton.tsx

@@ -1,94 +0,0 @@
-import * as React from "react";
-import { withTheme } from "../theming";
-import { colorTypes } from "@draftbit/types";
-import { StyleProp, StyleSheet, ViewStyle } from "react-native";
-import IconButton from "./IconButton";
-import type { Theme } from "../styles/DefaultTheme";
-import type { IconSlot } from "../interfaces/Icon";
-
-type Props = {
-  icon: string;
-  toggled?: boolean;
-  onPress?: (value: boolean) => void;
-  defaultValue?: boolean;
-  disabled?: boolean;
-  color?: colorTypes;
-  colorSecondary?: colorTypes;
-  borderColor?: colorTypes;
-  iconSize?: number;
-  width?: number;
-  height?: number;
-  style?: StyleProp<ViewStyle>;
-  theme: Theme;
-} & IconSlot;
-
-const ToggleButton: React.FC<React.PropsWithChildren<Props>> = ({
-  Icon,
-  icon,
-  toggled = false,
-  onPress = () => {},
-  defaultValue,
-  disabled = false,
-  color = "primary",
-  colorSecondary = "surface",
-  borderColor = "divider",
-  iconSize = 25,
-  width = 50,
-  height = 50,
-  theme: { colors },
-  style,
-  ...rest
-}) => {
-  const [internalValue, setInternalValue] = React.useState<boolean>(
-    toggled || defaultValue || false
-  );
-
-  React.useEffect(() => {
-    if (toggled != null) {
-      setInternalValue(toggled);
-    }
-  }, [toggled]);
-
-  React.useEffect(() => {
-    if (defaultValue != null) {
-      setInternalValue(defaultValue);
-    }
-  }, [defaultValue]);
-
-  const handlePress = () => {
-    setInternalValue(!internalValue);
-    onPress(!internalValue);
-  };
-
-  return (
-    <IconButton
-      Icon={Icon}
-      icon={icon}
-      size={iconSize}
-      color={internalValue ? colors[color] : colors[colorSecondary]}
-      onPress={handlePress}
-      disabled={disabled}
-      style={[
-        styles.mainContainer,
-        {
-          width,
-          height,
-          backgroundColor: internalValue
-            ? colors[colorSecondary]
-            : colors[color],
-          borderColor: colors[borderColor],
-        },
-        style,
-      ]}
-      {...rest}
-    />
-  );
-};
-
-const styles = StyleSheet.create({
-  mainContainer: {
-    borderWidth: 1,
-  },
-});
-
-export default withTheme(ToggleButton);

package/src/components/Typography.js

@@ -1,36 +0,0 @@
-import React from "react";
-import { Text } from "react-native";
-import { withTheme } from "../theming";
-export const Title = withTheme(({ text, theme, style }) => {
-    return (React.createElement(Text, { style: [
-            {
-                fontSize: 20,
-                letterSpacing: 0,
-                lineHeight: 26,
-                color: theme.colors.text,
-            },
-            style,
-        ] }, text));
-});
-export const Subtitle = withTheme(({ text, theme, style }) => {
-    return (React.createElement(Text, { style: [
-            {
-                fontSize: 14,
-                letterSpacing: 0,
-                lineHeight: 16,
-                color: theme.colors.medium,
-            },
-            style,
-        ] }, text));
-});
-export const Caption = withTheme(({ text, theme, style }) => {
-    return (React.createElement(Text, { style: [
-            {
-                fontSize: 12,
-                letterSpacing: 0,
-                lineHeight: 14,
-                color: theme.colors.light,
-            },
-            style,
-        ] }, text));
-});

package/src/components/Typography.tsx

@@ -1,67 +0,0 @@
-import React from "react";
-import { Text, TextStyle, StyleProp } from "react-native";
-import { withTheme } from "../theming";
-import Theme from "../styles/DefaultTheme";
-
-type Props = {
-  text: string;
-  style?: StyleProp<TextStyle>;
-  /**
-   * @optional
-   */
-  theme: typeof Theme;
-};
-
-export const Title = withTheme(({ text, theme, style }: Props) => {
-  return (
-    <Text
-      style={[
-        {
-          fontSize: 20,
-          letterSpacing: 0,
-          lineHeight: 26,
-          color: theme.colors.text,
-        },
-        style,
-      ]}
-    >
-      {text}
-    </Text>
-  );
-});
-
-export const Subtitle = withTheme(({ text, theme, style }: Props) => {
-  return (
-    <Text
-      style={[
-        {
-          fontSize: 14,
-          letterSpacing: 0,
-          lineHeight: 16,
-          color: theme.colors.medium,
-        },
-        style,
-      ]}
-    >
-      {text}
-    </Text>
-  );
-});
-
-export const Caption = withTheme(({ text, theme, style }: Props) => {
-  return (
-    <Text
-      style={[
-        {
-          fontSize: 12,
-          letterSpacing: 0,
-          lineHeight: 14,
-          color: theme.colors.light,
-        },
-        style,
-      ]}
-    >
-      {text}
-    </Text>
-  );
-});

package/src/components/useAuthState.js

@@ -1,31 +0,0 @@
-import * as React from "react";
-export const useAuthState = (auth) => {
-    const [error, setError] = React.useState();
-    const [value, setValue] = React.useState(auth.currentUser);
-    React.useEffect(() => {
-        const list = auth.onAuthStateChanged(setValue, setError);
-        return () => {
-            list();
-        };
-    }, [auth]);
-    const signInWithEmailAndPassword = (user, password) => {
-        auth
-            .signInWithEmailAndPassword(user, password)
-            .then(setValue)
-            .catch(setError);
-    };
-    const createUserWithEmailAndPassword = (user, password) => {
-        auth
-            .signInWithEmailAndPassword(user, password)
-            .then(setValue)
-            .catch(setError);
-    };
-    const signOut = () => auth.signOut();
-    return [
-        value,
-        error,
-        signInWithEmailAndPassword,
-        signOut,
-        createUserWithEmailAndPassword,
-    ];
-};

package/src/components/useAuthState.tsx

@@ -1,38 +0,0 @@
-import * as React from "react";
-
-export const useAuthState = (auth: any) => {
-  const [error, setError] = React.useState();
-  const [value, setValue] = React.useState(auth.currentUser);
-
-  React.useEffect(() => {
-    const list = auth.onAuthStateChanged(setValue, setError);
-
-    return () => {
-      list();
-    };
-  }, [auth]);
-
-  const signInWithEmailAndPassword = (user: string, password: string) => {
-    auth
-      .signInWithEmailAndPassword(user, password)
-      .then(setValue)
-      .catch(setError);
-  };
-
-  const createUserWithEmailAndPassword = (user: string, password: string) => {
-    auth
-      .signInWithEmailAndPassword(user, password)
-      .then(setValue)
-      .catch(setError);
-  };
-
-  const signOut = () => auth.signOut();
-
-  return [
-    value,
-    error,
-    signInWithEmailAndPassword,
-    signOut,
-    createUserWithEmailAndPassword,
-  ];
-};

package/src/mappings/AvatarEdit.js

@@ -1,38 +0,0 @@
-import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
-export const SEED_DATA = {
-    name: "Avatar Edit",
-    tag: "AvatarEdit",
-    description: "An avatar with an edit icon in the top right",
-    category: COMPONENT_TYPES.deprecated,
-    stylesPanelSections: BLOCK_STYLES_SECTIONS,
-    layout: {
-        width: 64,
-        height: 64,
-    },
-    props: {
-        size: {
-            group: GROUPS.basic,
-            label: "Size",
-            description: "Size of avatar / width, height",
-            editable: true,
-            required: false,
-            formType: FORM_TYPES.number,
-            propType: PROP_TYPES.NUMBER,
-            min: 0,
-            max: 300,
-            precision: 0,
-            step: 1,
-            defaultValue: 80,
-        },
-        image: {
-            group: GROUPS.data,
-            label: "Image",
-            description: "Name of the image",
-            editable: true,
-            required: true,
-            formType: FORM_TYPES.image,
-            propType: PROP_TYPES.ASSET,
-            defaultValue: "brightness-5",
-        },
-    },
-};

package/src/mappings/AvatarEdit.ts

@@ -1,45 +0,0 @@
-import {
-  GROUPS,
-  COMPONENT_TYPES,
-  FORM_TYPES,
-  PROP_TYPES,
-  BLOCK_STYLES_SECTIONS,
-} from "@draftbit/types";
-
-export const SEED_DATA = {
-  name: "Avatar Edit",
-  tag: "AvatarEdit",
-  description: "An avatar with an edit icon in the top right",
-  category: COMPONENT_TYPES.deprecated,
-  stylesPanelSections: BLOCK_STYLES_SECTIONS,
-  layout: {
-    width: 64,
-    height: 64,
-  },
-  props: {
-    size: {
-      group: GROUPS.basic,
-      label: "Size",
-      description: "Size of avatar / width, height",
-      editable: true,
-      required: false,
-      formType: FORM_TYPES.number,
-      propType: PROP_TYPES.NUMBER,
-      min: 0,
-      max: 300,
-      precision: 0,
-      step: 1,
-      defaultValue: 80,
-    },
-    image: {
-      group: GROUPS.data,
-      label: "Image",
-      description: "Name of the image",
-      editable: true,
-      required: true,
-      formType: FORM_TYPES.image,
-      propType: PROP_TYPES.ASSET,
-      defaultValue: "brightness-5",
-    },
-  },
-};

package/src/mappings/Banner.js

@@ -1,32 +0,0 @@
-import { COMPONENT_TYPES, createIconProp, createBoolProp, createColorProp, createTextProp, GROUPS, } from "@draftbit/types";
-export const SEED_DATA = {
-    name: "Banner",
-    tag: "Banner",
-    category: COMPONENT_TYPES.deprecated,
-    props: {
-        icon: createIconProp({
-            defaultValue: null,
-            required: false,
-        }),
-        content: createTextProp({
-            label: "Content",
-            description: "Banner text content",
-        }),
-        initiallyVisible: createBoolProp({
-            group: GROUPS.basic,
-            label: "Initially visible",
-            description: "Whether the banner should be visible",
-            defaultValue: true,
-        }),
-        dismissable: createBoolProp({
-            group: GROUPS.basic,
-            label: "Dismissable",
-            description: "Whether the banner should be able to be closed",
-            defaultValue: true,
-        }),
-        buttonColor: createColorProp({
-            label: "Button color",
-            defaultValue: "primary",
-        }),
-    },
-};

package/src/mappings/Banner.ts

@@ -1,40 +0,0 @@
-import {
-  COMPONENT_TYPES,
-  createIconProp,
-  createBoolProp,
-  createColorProp,
-  createTextProp,
-  GROUPS,
-} from "@draftbit/types";
-
-export const SEED_DATA = {
-  name: "Banner",
-  tag: "Banner",
-  category: COMPONENT_TYPES.deprecated,
-  props: {
-    icon: createIconProp({
-      defaultValue: null,
-      required: false,
-    }),
-    content: createTextProp({
-      label: "Content",
-      description: "Banner text content",
-    }),
-    initiallyVisible: createBoolProp({
-      group: GROUPS.basic,
-      label: "Initially visible",
-      description: "Whether the banner should be visible",
-      defaultValue: true,
-    }),
-    dismissable: createBoolProp({
-      group: GROUPS.basic,
-      label: "Dismissable",
-      description: "Whether the banner should be able to be closed",
-      defaultValue: true,
-    }),
-    buttonColor: createColorProp({
-      label: "Button color",
-      defaultValue: "primary",
-    }),
-  },
-};

package/src/mappings/Card.js

@@ -1,52 +0,0 @@
-import { COMPONENT_TYPES, createElevationType, createTextProp, createImageProp, createIconProp, createAspectRatioProp, createStaticBoolProp, createTextStyle, createActionProp, Triggers, } from "@draftbit/types";
-export const SEED_DATA = {
-    name: "Card",
-    tag: "Card",
-    description: "A card you can customize however you'd like",
-    category: COMPONENT_TYPES.card,
-    triggers: [Triggers.OnPress, Triggers.OnPressIcon],
-    props: {
-        onPress: createActionProp(),
-        onPressIcon: createActionProp({
-            handlerPropName: "onPressIcon",
-        }),
-        elevation: createElevationType(3),
-        image: createImageProp(),
-        title: createTextProp({
-            label: "Title",
-            description: "Large title text",
-            // defaultValue: "Title",
-            defaultValue: null,
-        }),
-        titleStyle: createTextStyle({
-            label: "Title Style",
-        }),
-        subtitle: createTextProp({
-            label: "Subtitle",
-            description: "Text underneath the title",
-            defaultValue: null,
-            // defaultValue: "Edit me in the props panel on the right",
-        }),
-        subtitleStyle: createTextStyle({
-            label: "Subtitle Style",
-        }),
-        description: createTextProp({
-            label: "Description",
-            description: "Smallest text underneath subtitle",
-            // defaultValue:
-            // "This bottom text is optional, but shows up to make your life a little easier!",
-            defaultValue: null,
-        }),
-        descriptionStyle: createTextStyle({
-            label: "Description Style",
-        }),
-        icon: createIconProp(),
-        aspectRatio: createAspectRatioProp({
-            defaultValue: 1.5,
-        }),
-        textCentered: createStaticBoolProp({
-            label: "Centered Text",
-            description: "Places your title and subtitle in the center",
-        }),
-    },
-};

package/src/mappings/Card.ts

@@ -1,64 +0,0 @@
-import {
-  COMPONENT_TYPES,
-  createElevationType,
-  createTextProp,
-  createImageProp,
-  createIconProp,
-  createAspectRatioProp,
-  createStaticBoolProp,
-  createTextStyle,
-  createActionProp,
-  Triggers,
-} from "@draftbit/types";
-
-export const SEED_DATA = {
-  name: "Card",
-  tag: "Card",
-  description: "A card you can customize however you'd like",
-  category: COMPONENT_TYPES.card,
-  triggers: [Triggers.OnPress, Triggers.OnPressIcon],
-  props: {
-    onPress: createActionProp(),
-    onPressIcon: createActionProp({
-      handlerPropName: "onPressIcon",
-    }),
-    elevation: createElevationType(3),
-    image: createImageProp(),
-    title: createTextProp({
-      label: "Title",
-      description: "Large title text",
-      // defaultValue: "Title",
-      defaultValue: null,
-    }),
-    titleStyle: createTextStyle({
-      label: "Title Style",
-    }),
-    subtitle: createTextProp({
-      label: "Subtitle",
-      description: "Text underneath the title",
-      defaultValue: null,
-      // defaultValue: "Edit me in the props panel on the right",
-    }),
-    subtitleStyle: createTextStyle({
-      label: "Subtitle Style",
-    }),
-    description: createTextProp({
-      label: "Description",
-      description: "Smallest text underneath subtitle",
-      // defaultValue:
-      // "This bottom text is optional, but shows up to make your life a little easier!",
-      defaultValue: null,
-    }),
-    descriptionStyle: createTextStyle({
-      label: "Description Style",
-    }),
-    icon: createIconProp(),
-    aspectRatio: createAspectRatioProp({
-      defaultValue: 1.5,
-    }),
-    textCentered: createStaticBoolProp({
-      label: "Centered Text",
-      description: "Places your title and subtitle in the center",
-    }),
-  },
-};

package/src/mappings/CardBlock.js

@@ -1,123 +0,0 @@
-import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, createElevationType, createNumColumnsType, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
-const SEED_DATA_PROPS = {
-    image: {
-        group: GROUPS.data,
-        label: "Image",
-        description: "Image",
-        formType: FORM_TYPES.image,
-        propType: PROP_TYPES.ASSET,
-        defaultValue: null,
-        editable: true,
-        required: false,
-    },
-    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,
-    },
-    leftDescription: {
-        group: GROUPS.data,
-        label: "Left description",
-        description: "Text to display on the left",
-        formType: FORM_TYPES.string,
-        propType: PROP_TYPES.STRING,
-        defaultValue: "San Diego",
-        editable: true,
-        required: false,
-    },
-    rightDescription: {
-        group: GROUPS.data,
-        label: "Right description",
-        description: "Text to display on the right",
-        formType: FORM_TYPES.string,
-        propType: PROP_TYPES.STRING,
-        defaultValue: "$100",
-        editable: true,
-        required: false,
-    },
-    aspectRatio: {
-        group: GROUPS.basic,
-        label: "Aspect ratio",
-        description: "Aspect ratio of the image",
-        formType: FORM_TYPES.aspectRatio,
-        propType: PROP_TYPES.NUMBER,
-        defaultValue: 1.5,
-        editable: true,
-        required: false,
-    },
-    titleCentered: {
-        group: GROUPS.basic,
-        label: "Title centered",
-        description: "Whether to center the title",
-        formType: FORM_TYPES.boolean,
-        propType: PROP_TYPES.BOOLEAN,
-        defaultValue: false,
-        editable: true,
-        required: false,
-    },
-    elevation: createElevationType(2),
-};
-export const SEED_DATA = [
-    {
-        name: "Small Card",
-        tag: "CardBlock",
-        description: "An elevated card with a title and description, that takes up one third of its container.",
-        category: COMPONENT_TYPES.card,
-        props: {
-            ...SEED_DATA_PROPS,
-            numColumns: createNumColumnsType({
-                defaultValue: 1,
-            }),
-        },
-    },
-    {
-        name: "Medium Block Card",
-        tag: "CardBlock",
-        description: "An elevated card with a title and description, that takes up one half of its container.",
-        category: COMPONENT_TYPES.card,
-        props: {
-            ...SEED_DATA_PROPS,
-            icon: {
-                group: GROUPS.basic,
-                label: "Icon",
-                description: "Icon to display on the top right",
-                formType: FORM_TYPES.icon,
-                propType: PROP_TYPES.STRING,
-                defaultValue: null,
-                editable: true,
-                required: true,
-            },
-            numColumns: createNumColumnsType({
-                defaultValue: 2,
-            }),
-        },
-    },
-    {
-        name: "Large Block Card",
-        tag: "CardBlock",
-        description: "An elevated card with a title and description, that takes up the full width its container.",
-        category: COMPONENT_TYPES.card,
-        stylesPanelSections: BLOCK_STYLES_SECTIONS,
-        props: {
-            ...SEED_DATA_PROPS,
-            icon: {
-                group: GROUPS.basic,
-                label: "Icon",
-                description: "Icon to display on the top right",
-                formType: FORM_TYPES.icon,
-                propType: PROP_TYPES.STRING,
-                defaultValue: null,
-                editable: true,
-                required: true,
-            },
-            numColumns: createNumColumnsType({
-                defaultValue: 3,
-            }),
-        },
-    },
-];