@draftbit/core 47.0.0-eae99e.2 → 47.0.1-54c307.2

package/src/components/Typography.js

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -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.js

@@ -2,36 +2,51 @@ export { injectIcon } from "./interfaces/Icon";
 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";
-/* Temporarily Taking Out Picker
-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";
-// MEDIA
-export { default as SVG } from "./components/SVG";
-// FLEX LAYOUT
-export { Center, Circle, Square, Row, Stack, Spacer, } from "./components/Layout";
-// SWIPER
-export { Swiper, SwiperItem } from "./components/Swiper";
-// CONTAINERS
+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 { default as Surface } from "./components/Surface";
-// ACTIONSHEET
 export { ActionSheet, ActionSheetItem, ActionSheetCancel, } from "./components/ActionSheet";
+export { Swiper, SwiperItem } from "./components/Swiper";
+export { Center, Circle, Square, Row, Stack, Spacer, } from "./components/Layout";
+export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup, } from "./components/RadioButton/index";
+/* 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";
+// a comment to fix sourcemap comment issue

package/src/index.tsx

@@ -3,41 +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";
-/* Temporarily Taking Out Picker
-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,
@@ -47,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.js

@@ -1,10 +1,27 @@
-import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, } from "@draftbit/types";
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, StylesPanelSections, createColorProp, createNumberProp, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Audio Player",
     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,
@@ -16,5 +33,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/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.js

@@ -0,0 +1,38 @@
+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

@@ -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.js

@@ -0,0 +1,32 @@
+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

@@ -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",
+    }),
+  },
+};