@draftbit/core 46.10.3-6c7505.2 → 46.10.3-7476ab.2

package/src/mappings/MapMarker.ts

@@ -0,0 +1,62 @@
+import {
+  COMPONENT_TYPES,
+  createBoolProp,
+  createColorProp,
+  createNumberProp,
+  createTextProp,
+  GROUPS,
+  StylesPanelSections,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Map Marker",
+  tag: "MapMarker",
+  packageName: "@draftbit/maps",
+  description: "A marker to show inside map view",
+  category: COMPONENT_TYPES.map,
+  stylesPanelSections: [
+    StylesPanelSections.Size,
+    StylesPanelSections.Margins,
+    StylesPanelSections.Effects,
+  ],
+  layout: {},
+  props: {
+    latitude: createNumberProp({
+      label: "Latitude",
+      description: "The latitude in which the marker is located",
+      required: true,
+      precision: 6,
+      min: -90,
+      max: 90,
+    }),
+    longitude: createNumberProp({
+      label: "Longitude",
+      description: "The longitude in which the marker is located",
+      required: true,
+      precision: 6,
+      min: -180,
+      max: 180,
+    }),
+    title: createTextProp({
+      label: "Title",
+      description: "Title to show along with the marker",
+      defaultValue: null,
+    }),
+    description: createTextProp({
+      label: "Description",
+      description: "Optional description for the marker",
+      defaultValue: null,
+    }),
+    flat: createBoolProp({
+      label: "Flat",
+      description:
+        "Sets whether this marker should be flat against the map (if true) or a billboard facing the camera (if false)",
+      group: GROUPS.basic,
+      defaultValue: false,
+    }),
+    pinColor: createColorProp({
+      label: "Pin Color",
+      description: "Sets the color of the marker",
+    }),
+  },
+};

package/src/mappings/MapView.js

@@ -0,0 +1,142 @@
+import { COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createTextProp, GROUPS, FORM_TYPES, PROP_TYPES, StylesPanelSections, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Map View",
+    tag: "MapView",
+    packageName: "@draftbit/maps",
+    description: "A map view",
+    category: COMPONENT_TYPES.map,
+    stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins],
+    layout: {
+        flex: 1,
+        width: "100%",
+        height: "100%",
+    },
+    props: {
+        provider: {
+            formType: FORM_TYPES.flatArray,
+            propType: PROP_TYPES.STRING,
+            editable: true,
+            group: GROUPS.basic,
+            label: "Provider",
+            description: "The maps provider",
+            required: false,
+            defaultValue: null,
+            options: ["google"],
+        },
+        latitude: createNumberProp({
+            label: "Initial Latitude",
+            description: "The longitude for the map's initial region",
+            required: false,
+            precision: 6,
+            min: -90,
+            max: 90,
+            defaultValue: 37.40241,
+        }),
+        longitude: createNumberProp({
+            label: "Initial Longitude",
+            description: "The longitude for the map's initial region",
+            required: false,
+            precision: 6,
+            min: -180,
+            max: 180,
+            defaultValue: -122.12125,
+        }),
+        zoom: createNumberProp({
+            label: "Initial Zoom",
+            description: "The initial zoom of the map",
+            required: true,
+            precision: 0,
+            step: 1,
+            defaultValue: 8,
+            min: 0,
+            max: 22,
+            group: GROUPS.basic,
+        }),
+        mapType: {
+            label: "Map Type",
+            description: "The type of map to show",
+            group: GROUPS.basic,
+            editable: true,
+            formType: FORM_TYPES.flatArray,
+            propType: PROP_TYPES.STRING,
+            required: false,
+            defaultValue: null,
+            options: [
+                "standard",
+                "satellite",
+                "hybrid",
+                "terrain",
+                "none",
+                "mutedStandard",
+            ],
+        },
+        zoomEnabled: createBoolProp({
+            label: "Zoom Enabled",
+            description: "Whether zooming is enabled (native only)",
+            group: GROUPS.basic,
+            required: false,
+            defaultValue: true,
+        }),
+        showsCompass: createBoolProp({
+            label: "Shows Compass",
+            description: "Whether compass is shown",
+            group: GROUPS.basic,
+            required: false,
+            defaultValue: false,
+        }),
+        rotateEnabled: createBoolProp({
+            label: "Rotate Enabled",
+            description: "Whether rotating the map is enabled",
+            group: GROUPS.basic,
+            required: false,
+            defaultValue: true,
+        }),
+        scrollEnabled: createBoolProp({
+            label: "Pan Enabled",
+            description: "Whether panning the map view is enabled",
+            group: GROUPS.basic,
+            required: false,
+            defaultValue: true,
+        }),
+        loadingEnabled: createBoolProp({
+            label: "Loading Enabled",
+            description: "If true a loading indicator will show while the map is loading",
+            group: GROUPS.basic,
+            required: false,
+            defaultValue: true,
+        }),
+        loadingIndicatorColor: createColorProp({
+            label: "Loading Indicator Color",
+            description: "Color of the loading indicator",
+        }),
+        loadingBackgroundColor: createColorProp({
+            label: "Loading BG Color",
+            description: "Color of the background to show while the map is loading",
+        }),
+        showsUserLocation: createBoolProp({
+            label: "Shows User Location",
+            description: "Whether to show the user's location on the map",
+            required: false,
+            defaultValue: null,
+            group: GROUPS.basic,
+        }),
+        followsUserLocation: createBoolProp({
+            label: "Follows User Location (iOS only)",
+            description: "Whether to set the map region to follow the user's location",
+            required: false,
+            defaultValue: null,
+            group: GROUPS.basic,
+        }),
+        showsPointsOfInterest: createBoolProp({
+            label: "Shows Points of Interest",
+            description: "Whether to show points of interest on the map.",
+            required: false,
+            defaultValue: true,
+            group: GROUPS.basic,
+        }),
+        apiKey: createTextProp({
+            defaultValue: process.env.GOOGLE_MAPS_API_KEY,
+            editable: false,
+        }),
+    },
+};

package/src/mappings/MapView.ts

@@ -0,0 +1,155 @@
+import {
+  COMPONENT_TYPES,
+  createBoolProp,
+  createColorProp,
+  createNumberProp,
+  createTextProp,
+  GROUPS,
+  FORM_TYPES,
+  PROP_TYPES,
+  StylesPanelSections,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Map View",
+  tag: "MapView",
+  packageName: "@draftbit/maps",
+  description: "A map view",
+  category: COMPONENT_TYPES.map,
+  stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins],
+  layout: {
+    flex: 1,
+    width: "100%",
+    height: "100%",
+  },
+  props: {
+    provider: {
+      formType: FORM_TYPES.flatArray,
+      propType: PROP_TYPES.STRING,
+      editable: true,
+      group: GROUPS.basic,
+      label: "Provider",
+      description: "The maps provider",
+      required: false,
+      defaultValue: null,
+      options: ["google"],
+    },
+    latitude: createNumberProp({
+      label: "Initial Latitude",
+      description: "The longitude for the map's initial region",
+      required: false,
+      precision: 6,
+      min: -90,
+      max: 90,
+      defaultValue: 37.40241,
+    }),
+    longitude: createNumberProp({
+      label: "Initial Longitude",
+      description: "The longitude for the map's initial region",
+      required: false,
+      precision: 6,
+      min: -180,
+      max: 180,
+      defaultValue: -122.12125,
+    }),
+    zoom: createNumberProp({
+      label: "Initial Zoom",
+      description: "The initial zoom of the map",
+      required: true,
+      precision: 0,
+      step: 1,
+      defaultValue: 8,
+      min: 0,
+      max: 22,
+      group: GROUPS.basic,
+    }),
+    mapType: {
+      label: "Map Type",
+      description: "The type of map to show",
+      group: GROUPS.basic,
+      editable: true,
+      formType: FORM_TYPES.flatArray,
+      propType: PROP_TYPES.STRING,
+      required: false,
+      defaultValue: null,
+      options: [
+        "standard",
+        "satellite",
+        "hybrid",
+        "terrain",
+        "none",
+        "mutedStandard",
+      ],
+    },
+    zoomEnabled: createBoolProp({
+      label: "Zoom Enabled",
+      description: "Whether zooming is enabled (native only)",
+      group: GROUPS.basic,
+      required: false,
+      defaultValue: true,
+    }),
+    showsCompass: createBoolProp({
+      label: "Shows Compass",
+      description: "Whether compass is shown",
+      group: GROUPS.basic,
+      required: false,
+      defaultValue: false,
+    }),
+    rotateEnabled: createBoolProp({
+      label: "Rotate Enabled",
+      description: "Whether rotating the map is enabled",
+      group: GROUPS.basic,
+      required: false,
+      defaultValue: true,
+    }),
+    scrollEnabled: createBoolProp({
+      label: "Pan Enabled",
+      description: "Whether panning the map view is enabled",
+      group: GROUPS.basic,
+      required: false,
+      defaultValue: true,
+    }),
+    loadingEnabled: createBoolProp({
+      label: "Loading Enabled",
+      description:
+        "If true a loading indicator will show while the map is loading",
+      group: GROUPS.basic,
+      required: false,
+      defaultValue: true,
+    }),
+    loadingIndicatorColor: createColorProp({
+      label: "Loading Indicator Color",
+      description: "Color of the loading indicator",
+    }),
+    loadingBackgroundColor: createColorProp({
+      label: "Loading BG Color",
+      description: "Color of the background to show while the map is loading",
+    }),
+    showsUserLocation: createBoolProp({
+      label: "Shows User Location",
+      description: "Whether to show the user's location on the map",
+      required: false,
+      defaultValue: null,
+      group: GROUPS.basic,
+    }),
+    followsUserLocation: createBoolProp({
+      label: "Follows User Location (iOS only)",
+      description:
+        "Whether to set the map region to follow the user's location",
+      required: false,
+      defaultValue: null,
+      group: GROUPS.basic,
+    }),
+    showsPointsOfInterest: createBoolProp({
+      label: "Shows Points of Interest",
+      description: "Whether to show points of interest on the map.",
+      required: false,
+      defaultValue: true,
+      group: GROUPS.basic,
+    }),
+    apiKey: createTextProp({
+      defaultValue: process.env.GOOGLE_MAPS_API_KEY,
+      editable: false,
+    }),
+  },
+};

package/src/mappings/Markdown.js

@@ -0,0 +1,25 @@
+import { COMPONENT_TYPES, FORM_TYPES, GROUPS, PROP_TYPES, StylesPanelSections, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Markdown",
+    tag: "Markdown",
+    description: "A component that renders markdown",
+    category: COMPONENT_TYPES.text,
+    stylesPanelSections: [
+        StylesPanelSections.Typography,
+        StylesPanelSections.LayoutSelectedItem,
+        StylesPanelSections.MarginsAndPaddings,
+        StylesPanelSections.Effects,
+    ],
+    props: {
+        children: {
+            group: GROUPS.data,
+            label: "Markdown Text",
+            description: "Markdown text to be rendered ",
+            editable: true,
+            required: true,
+            formType: FORM_TYPES.string,
+            propType: PROP_TYPES.STRING,
+            defaultValue: "### Markdown",
+        },
+    },
+};

package/src/mappings/Markdown.ts

@@ -0,0 +1,32 @@
+import {
+  COMPONENT_TYPES,
+  FORM_TYPES,
+  GROUPS,
+  PROP_TYPES,
+  StylesPanelSections,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Markdown",
+  tag: "Markdown",
+  description: "A component that renders markdown",
+  category: COMPONENT_TYPES.text,
+  stylesPanelSections: [
+    StylesPanelSections.Typography,
+    StylesPanelSections.LayoutSelectedItem,
+    StylesPanelSections.MarginsAndPaddings,
+    StylesPanelSections.Effects,
+  ],
+  props: {
+    children: {
+      group: GROUPS.data,
+      label: "Markdown Text",
+      description: "Markdown text to be rendered ",
+      editable: true,
+      required: true,
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "### Markdown",
+    },
+  },
+};

package/src/mappings/Modal.js

@@ -0,0 +1,42 @@
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, createBoolProp, StylesPanelSections, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Modal",
+    tag: "Modal",
+    description: "A basic Modal Component",
+    category: COMPONENT_TYPES.layout,
+    stylesPanelSections: [StylesPanelSections.NoStyles],
+    props: {
+        animationType: {
+            group: GROUPS.basic,
+            label: "Animation Type",
+            description: "Animation Type",
+            options: ["slide", "fade", "none"],
+            editable: true,
+            required: false,
+            formType: FORM_TYPES.flatArray,
+            propType: PROP_TYPES.STRING,
+            defaultValue: "none",
+        },
+        transparent: createBoolProp({
+            group: GROUPS.basic,
+            label: "Transparent",
+            description: "Determines whether the modal will fill the entire view. Setting this to true will render the modal over a transparent background",
+        }),
+        visible: createBoolProp({
+            group: GROUPS.data,
+            label: "Visible",
+            description: "Determines whether the modal is visible",
+        }),
+        presentationStyle: {
+            group: GROUPS.basic,
+            label: "Presentation Style",
+            description: "Presentation Style",
+            options: ["fullScreen", "pageSheet", "formSheet", "overFullScreen"],
+            editable: true,
+            required: false,
+            formType: FORM_TYPES.flatArray,
+            propType: PROP_TYPES.STRING,
+            defaultValue: null,
+        },
+    },
+};

package/src/mappings/Modal.ts

@@ -0,0 +1,51 @@
+import {
+  GROUPS,
+  COMPONENT_TYPES,
+  FORM_TYPES,
+  PROP_TYPES,
+  createBoolProp,
+  StylesPanelSections,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Modal",
+  tag: "Modal",
+  description: "A basic Modal Component",
+  category: COMPONENT_TYPES.layout,
+  stylesPanelSections: [StylesPanelSections.NoStyles],
+  props: {
+    animationType: {
+      group: GROUPS.basic,
+      label: "Animation Type",
+      description: "Animation Type",
+      options: ["slide", "fade", "none"],
+      editable: true,
+      required: false,
+      formType: FORM_TYPES.flatArray,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "none",
+    },
+    transparent: createBoolProp({
+      group: GROUPS.basic,
+      label: "Transparent",
+      description:
+        "Determines whether the modal will fill the entire view. Setting this to true will render the modal over a transparent background",
+    }),
+    visible: createBoolProp({
+      group: GROUPS.data,
+      label: "Visible",
+      description: "Determines whether the modal is visible",
+    }),
+    presentationStyle: {
+      group: GROUPS.basic,
+      label: "Presentation Style",
+      description: "Presentation Style",
+      options: ["fullScreen", "pageSheet", "formSheet", "overFullScreen"],
+      editable: true,
+      required: false,
+      formType: FORM_TYPES.flatArray,
+      propType: PROP_TYPES.STRING,
+      defaultValue: null,
+    },
+  },
+};

package/src/mappings/NativeBase/Layout.js

@@ -0,0 +1,124 @@
+import { COMPONENT_TYPES, createBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, createStaticNumberProp, StylesPanelSections, createStaticBoolProp, } from "@draftbit/types";
+const SHARED_SEED_DATA = {
+    category: COMPONENT_TYPES.layout,
+    packageName: "native-base",
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+};
+const CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX = CONTAINER_COMPONENT_STYLES_SECTIONS.filter((item) => item !== StylesPanelSections.LayoutFlexItems &&
+    item !== StylesPanelSections.LayoutContent);
+export const SEED_DATA = [
+    {
+        name: "Aspect Ratio",
+        tag: "AspectRatio",
+        description: "Controls the size of the undefined dimension of a node or child component using an aspect ratio",
+        ...SHARED_SEED_DATA,
+        props: {
+            ratio: createStaticNumberProp({
+                label: "Ratio",
+                description: "The aspect ratio of the container in decimal format (ex: 3/4 -> 1.33)",
+                defaultValue: 1.33,
+            }),
+        },
+        stylesPanelSections: [
+            StylesPanelSections.Background,
+            StylesPanelSections.Size,
+            StylesPanelSections.Margins,
+            StylesPanelSections.Position,
+            StylesPanelSections.Borders,
+            StylesPanelSections.Effects,
+        ],
+    },
+    {
+        name: "Box",
+        tag: "Box",
+        description: "This is a generic component for low level layout needs. It is similar to a div in HTML",
+        ...SHARED_SEED_DATA,
+    },
+    {
+        name: "Center",
+        tag: "Center",
+        description: "Center aligns its contents to the center within itself",
+        ...SHARED_SEED_DATA,
+        stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX,
+    },
+    {
+        name: "Circle",
+        tag: "Circle",
+        description: "Center aligns its contents to the center within itself with a round border radius",
+        ...SHARED_SEED_DATA,
+        stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX,
+    },
+    {
+        name: "Container",
+        tag: "Container",
+        description: "The Container restricts a content's width according to current breakpoint, while keeping the size fluid",
+        props: {
+            centerContent: createStaticBoolProp({
+                label: "Center content",
+                description: "Center child elements based on their content width",
+                defaultValue: true,
+            }),
+        },
+        ...SHARED_SEED_DATA,
+    },
+    {
+        name: "Column",
+        tag: "Column",
+        description: "Column aligns items vertically",
+        layout: {
+            flexDirection: "column",
+        },
+        ...SHARED_SEED_DATA,
+    },
+    {
+        name: "Row",
+        tag: "Row",
+        description: "Column aligns items horizontally",
+        layout: {
+            flexDirection: "row",
+        },
+        ...SHARED_SEED_DATA,
+    },
+    {
+        name: "Spacer",
+        tag: "Spacer",
+        description: "An adjustable, empty space that can be used to tune the spacing between child elements within Flex",
+        layout: {
+            flex: 1,
+        },
+        ...SHARED_SEED_DATA,
+        stylesPanelSections: [
+            StylesPanelSections.LayoutSelectedItem,
+            StylesPanelSections.Background,
+            StylesPanelSections.Margins,
+        ],
+    },
+    {
+        name: "Stack",
+        tag: "Stack",
+        description: "Stack aligns items vertically or horizontally based on the direction prop",
+        ...SHARED_SEED_DATA,
+        props: {
+            isDisabled: createBoolProp({
+                label: "Disabled",
+                description: "If true, the Stack will be disabled",
+            }),
+            isInvalid: createBoolProp({
+                label: "Invalid",
+                description: "If true, the Stack will be invalid",
+            }),
+        },
+    },
+    {
+        name: "ZStack",
+        tag: "ZStack",
+        description: "ZStack aligns items to the z-axis",
+        ...SHARED_SEED_DATA,
+        props: {
+            reversed: createBoolProp({
+                label: "Reversed",
+                description: "Determines whether to reverse the direction of items",
+            }),
+        },
+    },
+];