@draftbit/core 47.0.0-df8093.2 → 47.0.0

package/src/components/useAuthState.tsx

@@ -0,0 +1,38 @@
+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/index.tsx

@@ -3,39 +3,38 @@ export { withTheme, ThemeProvider } from "./theming";
 export { default as Provider } from "./Provider";
 export { default as DefaultTheme } from "./styles/DefaultTheme";
 
-// BASIC
-export { default as ScreenContainer } from "./components/ScreenContainer";
-export { default as Banner } from "./components/Banner";
-
-// BUTTONS
-export { Button } from "./components/Button";
 export { Link } from "./components/Text";
+export { default as Banner } from "./components/Banner";
+export { Button, ButtonSolid, ButtonOutline } from "./components/Button";
+export { default as Avatar } from "./components/CircleImage";
+export { default as AvatarEdit } from "./components/AvatarEdit";
+export { default as Card } from "./components/Card";
+export { default as Carousel } from "./components/Carousel";
+export { Checkbox, CheckboxGroup, CheckboxRow } from "./components/Checkbox";
+export { default as CircleImage } from "./components/CircleImage";
+export { default as Container } from "./components/Container";
+export { default as Divider } from "./components/Divider";
+export { default as FAB } from "./components/FAB";
+export { default as FieldSearchBarFull } from "./components/FieldSearchBarFull";
 export { default as IconButton } from "./components/IconButton";
-export { default as Touchable } from "./components/Touchable";
-
-// INPUTS
-export { default as DatePicker } from "./components/DatePicker/DatePicker";
+export { default as Image } from "./components/Image";
+export { default as SVG } from "./components/SVG";
 export { default as NumberInput } from "./components/NumberInput";
-export { default as TextField } from "./components/TextField";
-export { default as Picker } from "./components/Picker/Picker";
-
-// CONTROLS
-export { Checkbox, CheckboxGroup, CheckboxRow } from "./components/Checkbox";
-export {
-  RadioButton,
-  RadioButtonGroup,
-  RadioButtonRow,
-  RadioButtonFieldGroup,
-} from "./components/RadioButton/index";
-export { default as Slider } from "./components/Slider";
-export { default as Stepper } from "./components/Stepper";
+export { default as ScreenContainer } from "./components/ScreenContainer";
 export { default as StarRating } from "./components/StarRating";
+export { default as Surface } from "./components/Surface";
 export { default as Switch, SwitchRow } from "./components/Switch";
+export { default as TextField } from "./components/TextField";
+export { default as ToggleButton } from "./components/ToggleButton";
+export { default as Touchable } from "./components/Touchable";
+export { AccordionGroup, AccordionItem } from "./components/Accordion";
+export {
+  ActionSheet,
+  ActionSheetItem,
+  ActionSheetCancel,
+} from "./components/ActionSheet";
+export { Swiper, SwiperItem } from "./components/Swiper";
 
-// MEDIA
-export { default as SVG } from "./components/SVG";
-
-// FLEX LAYOUT
 export {
   Center,
   Circle,
@@ -45,16 +44,30 @@ export {
   Spacer,
 } from "./components/Layout";
 
-// SWIPER
-export { Swiper, SwiperItem } from "./components/Swiper";
+export {
+  RadioButton,
+  RadioButtonGroup,
+  RadioButtonRow,
+  RadioButtonFieldGroup,
+} from "./components/RadioButton/index";
 
-// CONTAINERS
-export { AccordionGroup, AccordionItem } from "./components/Accordion";
-export { default as Surface } from "./components/Surface";
+/* Deprecated: Fix or Delete!  */
+export { default as CardBlock } from "./components/CardBlock";
+export { default as CardContainer } from "./components/CardContainer";
+export { default as CardContainerRating } from "./components/CardContainerRating";
+export { default as CardInline } from "./components/CardInline";
+export { default as DatePicker } from "./components/DatePicker/DatePicker";
+export { default as HeaderLarge } from "./components/HeaderLarge";
+export { default as HeaderMedium } from "./components/HeaderMedium";
+export { default as HeaderOverline } from "./components/HeaderOverline";
+export { default as Picker } from "./components/Picker/Picker";
+export { default as ProgressBar } from "./components/ProgressBar";
+export { default as ProgressCircle } from "./components/ProgressCircle";
+export { default as RowBodyIcon } from "./components/RowBodyIcon";
+export { default as RowHeadlineImageCaption } from "./components/RowHeadlineImageCaption";
+export { default as RowHeadlineImageIcon } from "./components/RowHeadlineImageIcon";
+export { default as Slider } from "./components/Slider";
+export { default as Stepper } from "./components/Stepper";
+export { useAuthState } from "./components/useAuthState";
 
-// ACTIONSHEET
-export {
-  ActionSheet,
-  ActionSheetItem,
-  ActionSheetCancel,
-} from "./components/ActionSheet";
+// a comment to fix sourcemap comment issue

package/src/mappings/AudioPlayer.ts

@@ -3,6 +3,9 @@ import {
   COMPONENT_TYPES,
   FORM_TYPES,
   PROP_TYPES,
+  StylesPanelSections,
+  createColorProp,
+  createNumberProp,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -10,7 +13,24 @@ export const SEED_DATA = {
   tag: "AudioPlayer",
   description: "Given a source URL, plays sounds & audio!",
   category: COMPONENT_TYPES.media,
-  layout: {},
+  stylesPanelSections: [
+    StylesPanelSections.Typography,
+    StylesPanelSections.Background,
+    StylesPanelSections.Borders,
+    StylesPanelSections.Size,
+    StylesPanelSections.MarginsAndPaddings,
+    StylesPanelSections.Position,
+  ],
+  layout: {
+    backgroundColor: "#eee",
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 8,
+    paddingBottom: 8,
+    borderRadius: 24,
+    flexDirection: "row",
+    alignItems: "center",
+  },
   props: {
     source: {
       group: GROUPS.data,
@@ -23,5 +43,25 @@ export const SEED_DATA = {
       formType: FORM_TYPES.sourceUrl,
       propType: PROP_TYPES.OBJECT,
     },
+    sliderColor: createColorProp({
+      label: "Thumb Color",
+      defaultValue: "strong",
+    }),
+    completedTrackColor: createColorProp({
+      label: "Completed Track Color",
+      defaultValue: "background",
+    }),
+    remainingTrackColor: createColorProp({
+      label: "Remaining Track Color",
+      defaultValue: "light",
+    }),
+    trackThumbSize: createNumberProp({
+      label: "Thumb Size",
+      defaultValue: 24,
+    }),
+    playIconColor: createColorProp({
+      label: "Play Icon Color",
+      defaultValue: "strong",
+    }),
   },
 };

package/src/mappings/AvatarEdit.ts

@@ -0,0 +1,45 @@
+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.ts

@@ -0,0 +1,40 @@
+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.ts

@@ -0,0 +1,64 @@
+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.ts

@@ -0,0 +1,136 @@
+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,
+      }),
+    },
+  },
+];

package/src/mappings/CardContainer.ts

@@ -0,0 +1,116 @@
+import {
+  GROUPS,
+  FORM_TYPES,
+  PROP_TYPES,
+  COMPONENT_TYPES,
+  createElevationType,
+  createNumColumnsType,
+  BLOCK_STYLES_SECTIONS,
+} from "@draftbit/types";
+
+const SEED_DATA_PROPS = {
+  image: {
+    label: "Image",
+    description: "Image",
+    formType: FORM_TYPES.image,
+    propType: PROP_TYPES.ASSET,
+    defaultValue: null,
+    editable: true,
+    required: true,
+    group: GROUPS.data,
+  },
+  title: {
+    label: "Title",
+    description: "Text to display",
+    formType: FORM_TYPES.string,
+    propType: PROP_TYPES.STRING,
+    defaultValue: "Beautiful West Coast Villa",
+    editable: true,
+    required: false,
+    group: GROUPS.data,
+  },
+  leftDescription: {
+    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,
+    group: GROUPS.data,
+  },
+  rightDescription: {
+    label: "Right description",
+    description: "Text to display on the right",
+    formType: FORM_TYPES.string,
+    propType: PROP_TYPES.STRING,
+    defaultValue: "$100",
+    editable: true,
+    required: false,
+    group: GROUPS.data,
+  },
+  icon: {
+    label: "Icon",
+    description: "Icon to display on the top right",
+    formType: FORM_TYPES.icon,
+    propType: PROP_TYPES.STRING /* OR ASSET TODO TEST ME */,
+    defaultValue: null,
+    editable: true,
+    required: false,
+    group: GROUPS.basic,
+  },
+  aspectRatio: {
+    label: "Aspect ratio",
+    description: "Aspect ratio of the image",
+    formType: FORM_TYPES.aspectRatio,
+    propType: PROP_TYPES.NUMBER,
+    defaultValue: 1.5,
+    editable: true,
+    required: false,
+    group: GROUPS.basic,
+  },
+  textCentered: {
+    label: "Centered Text",
+    description: "Whether to center the text",
+    formType: FORM_TYPES.boolean,
+    propType: PROP_TYPES.BOOLEAN,
+    defaultValue: false,
+    editable: true,
+    required: false,
+    group: GROUPS.basic,
+  },
+  elevation: createElevationType(2),
+};
+
+export const SEED_DATA = [
+  {
+    name: "Medium Card",
+    tag: "CardContainer",
+    description:
+      "An elevated card with a title and description, that takes up half of its container.",
+    category: COMPONENT_TYPES.card,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
+    layout: null,
+    props: {
+      ...SEED_DATA_PROPS,
+      numColumns: createNumColumnsType({
+        defaultValue: 2,
+      }),
+    },
+  },
+  {
+    name: "Large Card",
+    tag: "CardContainer",
+    description:
+      "An elevated card with a title and description, that takes up its full container.",
+    category: COMPONENT_TYPES.card,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
+    layout: null,
+    props: {
+      ...SEED_DATA_PROPS,
+      numColumns: createNumColumnsType({
+        defaultValue: 3,
+      }),
+    },
+  },
+];