@draftbit/core 47.0.1-df014a.2 → 47.0.1-e04fa3.2

package/src/mappings/NativeBase/Button.ts

@@ -0,0 +1,83 @@
+/* Temporarily Commented Out
+
+
+import {
+  COMPONENT_TYPES,
+  StylesPanelSections,
+  createTextEnumProp,
+  createBoolProp,
+  createIconProp,
+} from "@draftbit/types";
+
+const SHARED_SEED_DATA = {
+  category: COMPONENT_TYPES.NBForms,
+  packageName: "native-base",
+  stylesPanelSections: [
+    StylesPanelSections.LayoutFlexItems,
+    StylesPanelSections.LayoutSelectedItem,
+    StylesPanelSections.LayoutContent,
+    StylesPanelSections.Background,
+    StylesPanelSections.Size,
+    StylesPanelSections.MarginsAndPaddings,
+    StylesPanelSections.Position,
+    StylesPanelSections.Borders,
+    StylesPanelSections.Effects,
+  ],
+  layout: {},
+  triggers: {},
+};
+
+export const SEED_DATA = [
+  {
+    name: "Button",
+    tag: "Button",
+    description:
+      "The Button component triggers an event or an action. Examples can be submitting forms and deleting a data point.",
+    ...SHARED_SEED_DATA,
+    props: {
+      isLoading: createBoolProp({
+        label: "Loading",
+        description: "If true, the button will show a spinner.",
+      }),
+      isDisabled: createBoolProp({
+        label: "Disabled",
+        description: "If true, the button will be disabled.",
+      }),
+      leftIcon: createIconProp({
+        label: "Left Icon",
+        description: "The icon to display on the left side of the button",
+      }),
+      rightIcon: createIconProp({
+        label: "Right Icon",
+        description: "The icon to display on the right side of the button",
+      }),
+      spinnerPlacement: createTextEnumProp({
+        label: "Spinner Placement",
+        description: "The placement of the spinner",
+        options: ["start", "end"],
+        defaultValue: "start",
+      }),
+    },
+  },
+  {
+    name: "Button Group",
+    tag: "ButtonGroup",
+    description:
+      "Used to group buttons whose actions are related, with an option to flush them together.",
+    ...SHARED_SEED_DATA,
+    allowChildren: true,
+    props: {
+      direction: createTextEnumProp({
+        label: "Direction",
+        description: "The direction of the button group",
+        options: ["row", "column"],
+        defaultValue: "row",
+      }),
+      isAttached: createBoolProp({
+        label: "Attached",
+        description: "If true, the buttons will be attached",
+      }),
+    },
+  },
+];
+ */

package/src/mappings/NativeBase/DataDisplay.js

@@ -0,0 +1,67 @@
+import { COMPONENT_TYPES, StylesPanelSections, createTextEnumProp, createIconProp, createStaticNumberProp, } from "@draftbit/types";
+const SHARED_SEED_DATA = {
+    category: COMPONENT_TYPES.NBDataDisplay,
+    packageName: "native-base",
+    stylesPanelSections: [
+        StylesPanelSections.LayoutFlexItems,
+        StylesPanelSections.LayoutSelectedItem,
+        StylesPanelSections.LayoutContent,
+        StylesPanelSections.Background,
+        StylesPanelSections.Size,
+        StylesPanelSections.MarginsAndPaddings,
+        StylesPanelSections.Position,
+        StylesPanelSections.Borders,
+        StylesPanelSections.Effects,
+    ],
+    layout: {},
+    triggers: {},
+};
+export const SEED_DATA = [
+    {
+        name: "Badge",
+        tag: "Badge",
+        doc_link: "https://docs.nativebase.io/badge",
+        code_link: "https://github.com/GeekyAnts/NativeBase/tree/master/src/components/composites/Badge",
+        description: "Badges allow the highlighting of an item’s status. This provides quick recognition.",
+        ...SHARED_SEED_DATA,
+        props: {
+            /*  */
+            leftIcon: createIconProp({
+                label: "Left Icon",
+                description: "The left icon element to use in the button.",
+            }),
+            rightIcon: createIconProp({
+                label: "Right Icon",
+                description: "The right icon element to use in the button.",
+            }),
+            startIcon: createIconProp({
+                label: "Start Icon",
+                description: "The start icon element to use in the button.",
+            }),
+            endIcon: createIconProp({
+                label: "End Icon",
+                description: "The end icon element to use in the button.",
+            }),
+        },
+    },
+    {
+        name: "Divider",
+        tag: "Divider",
+        doc_link: "https://docs.nativebase.io/divider",
+        code_link: "https://github.com/GeekyAnts/NativeBase/tree/master/src/components/composites/Divider",
+        description: "Divider can visually separate content in a given list or group.",
+        ...SHARED_SEED_DATA,
+        props: {
+            orientation: createTextEnumProp({
+                label: "Orientation",
+                description: "The orientation of the divider",
+                options: ["horizontal", "vertical"],
+            }),
+            thickness: createStaticNumberProp({
+                label: "Thickness",
+                description: "The thickness of the divider",
+                defaultValue: 1,
+            }),
+        },
+    },
+];

package/src/mappings/NativeBase/DataDisplay.ts

@@ -0,0 +1,79 @@
+import {
+  COMPONENT_TYPES,
+  StylesPanelSections,
+  createTextEnumProp,
+  createIconProp,
+  createStaticNumberProp,
+} from "@draftbit/types";
+
+const SHARED_SEED_DATA = {
+  category: COMPONENT_TYPES.NBDataDisplay,
+  packageName: "native-base",
+  stylesPanelSections: [
+    StylesPanelSections.LayoutFlexItems,
+    StylesPanelSections.LayoutSelectedItem,
+    StylesPanelSections.LayoutContent,
+    StylesPanelSections.Background,
+    StylesPanelSections.Size,
+    StylesPanelSections.MarginsAndPaddings,
+    StylesPanelSections.Position,
+    StylesPanelSections.Borders,
+    StylesPanelSections.Effects,
+  ],
+  layout: {},
+  triggers: {},
+};
+
+export const SEED_DATA = [
+  {
+    name: "Badge",
+    tag: "Badge",
+    doc_link: "https://docs.nativebase.io/badge",
+    code_link:
+      "https://github.com/GeekyAnts/NativeBase/tree/master/src/components/composites/Badge",
+    description:
+      "Badges allow the highlighting of an item’s status. This provides quick recognition.",
+    ...SHARED_SEED_DATA,
+    props: {
+      /*  */
+      leftIcon: createIconProp({
+        label: "Left Icon",
+        description: "The left icon element to use in the button.",
+      }),
+      rightIcon: createIconProp({
+        label: "Right Icon",
+        description: "The right icon element to use in the button.",
+      }),
+      startIcon: createIconProp({
+        label: "Start Icon",
+        description: "The start icon element to use in the button.",
+      }),
+      endIcon: createIconProp({
+        label: "End Icon",
+        description: "The end icon element to use in the button.",
+      }),
+    },
+  },
+  {
+    name: "Divider",
+    tag: "Divider",
+    doc_link: "https://docs.nativebase.io/divider",
+    code_link:
+      "https://github.com/GeekyAnts/NativeBase/tree/master/src/components/composites/Divider",
+    description:
+      "Divider can visually separate content in a given list or group.",
+    ...SHARED_SEED_DATA,
+    props: {
+      orientation: createTextEnumProp({
+        label: "Orientation",
+        description: "The orientation of the divider",
+        options: ["horizontal", "vertical"],
+      }),
+      thickness: createStaticNumberProp({
+        label: "Thickness",
+        description: "The thickness of the divider",
+        defaultValue: 1,
+      }),
+    },
+  },
+];

package/src/mappings/NativeBase/Feedback.js

@@ -0,0 +1,89 @@
+import { COMPONENT_TYPES, StylesPanelSections, createTextEnumProp, createNumberProp, createIconProp, } from "@draftbit/types";
+const SHARED_SEED_DATA = {
+    category: COMPONENT_TYPES.NBFeedback,
+    packageName: "native-base",
+    stylesPanelSections: [
+        StylesPanelSections.LayoutFlexItems,
+        StylesPanelSections.LayoutSelectedItem,
+        StylesPanelSections.LayoutContent,
+        StylesPanelSections.Background,
+        StylesPanelSections.Size,
+        StylesPanelSections.MarginsAndPaddings,
+        StylesPanelSections.Position,
+        StylesPanelSections.Borders,
+        StylesPanelSections.Effects,
+    ],
+    layout: {},
+    triggers: {},
+};
+export const SEED_DATA = [
+    {
+        name: "Alert",
+        tag: "Alert",
+        description: "Wrapper component. Alerts convey a state that can influence a system, feature, or page.",
+        ...SHARED_SEED_DATA,
+        props: {
+            status: createTextEnumProp({
+                label: "Status",
+                description: "The status of the alert",
+                options: ["success", "warning", "error", "info"],
+                defaultValue: "info",
+            }),
+            variant: createTextEnumProp({
+                label: "Variant",
+                description: "The variant of the alert style to use.",
+                options: [
+                    "subtle",
+                    "solid",
+                    "outline",
+                    "left-accent",
+                    "top-accent",
+                    "outline-light",
+                ],
+                defaultValue: "subtle",
+            }),
+        },
+    },
+    {
+        name: "Alert Icon",
+        tag: "Alert.Icon",
+        description: "The visual icon for the alert that changes based on the status prop.",
+        ...SHARED_SEED_DATA,
+        props: {
+            icon: createIconProp({
+                label: "Icon",
+                description: "The icon to display",
+            }),
+        },
+    },
+    {
+        name: "Progress",
+        tag: "Progress",
+        description: "Progress helps show the progress status for a time-consuming task that consists of several steps.",
+        ...SHARED_SEED_DATA,
+        props: {
+            value: createNumberProp({
+                label: "Value",
+                description: "The value of the progress bar",
+                defaultValue: 0,
+                min: 0,
+                max: 100,
+            }),
+            min: createNumberProp({
+                label: "Min",
+                description: "The minimum value of the progress bar",
+                defaultValue: 0,
+                min: 0,
+                max: 100,
+            }),
+            max: createNumberProp({
+                label: "Max",
+                description: "The maximum value of the progress bar",
+                defaultValue: 100,
+                min: 0,
+                max: 100,
+            }),
+        },
+    },
+    {},
+];

package/src/mappings/NativeBase/Feedback.ts

@@ -0,0 +1,100 @@
+import {
+  COMPONENT_TYPES,
+  StylesPanelSections,
+  createTextEnumProp,
+  createNumberProp,
+  createIconProp,
+} from "@draftbit/types";
+
+const SHARED_SEED_DATA = {
+  category: COMPONENT_TYPES.NBFeedback,
+  packageName: "native-base",
+  stylesPanelSections: [
+    StylesPanelSections.LayoutFlexItems,
+    StylesPanelSections.LayoutSelectedItem,
+    StylesPanelSections.LayoutContent,
+    StylesPanelSections.Background,
+    StylesPanelSections.Size,
+    StylesPanelSections.MarginsAndPaddings,
+    StylesPanelSections.Position,
+    StylesPanelSections.Borders,
+    StylesPanelSections.Effects,
+  ],
+  layout: {},
+  triggers: {},
+};
+
+export const SEED_DATA = [
+  {
+    name: "Alert",
+    tag: "Alert",
+    description:
+      "Wrapper component. Alerts convey a state that can influence a system, feature, or page.",
+    ...SHARED_SEED_DATA,
+    props: {
+      status: createTextEnumProp({
+        label: "Status",
+        description: "The status of the alert",
+        options: ["success", "warning", "error", "info"],
+        defaultValue: "info",
+      }),
+      variant: createTextEnumProp({
+        label: "Variant",
+        description: "The variant of the alert style to use.",
+        options: [
+          "subtle",
+          "solid",
+          "outline",
+          "left-accent",
+          "top-accent",
+          "outline-light",
+        ],
+        defaultValue: "subtle",
+      }),
+    },
+  },
+  {
+    name: "Alert Icon",
+    tag: "Alert.Icon",
+    description:
+      "The visual icon for the alert that changes based on the status prop.",
+    ...SHARED_SEED_DATA,
+    props: {
+      icon: createIconProp({
+        label: "Icon",
+        description: "The icon to display",
+      }),
+    },
+  },
+  {
+    name: "Progress",
+    tag: "Progress",
+    description:
+      "Progress helps show the progress status for a time-consuming task that consists of several steps.",
+    ...SHARED_SEED_DATA,
+    props: {
+      value: createNumberProp({
+        label: "Value",
+        description: "The value of the progress bar",
+        defaultValue: 0,
+        min: 0,
+        max: 100,
+      }),
+      min: createNumberProp({
+        label: "Min",
+        description: "The minimum value of the progress bar",
+        defaultValue: 0,
+        min: 0,
+        max: 100,
+      }),
+      max: createNumberProp({
+        label: "Max",
+        description: "The maximum value of the progress bar",
+        defaultValue: 100,
+        min: 0,
+        max: 100,
+      }),
+    },
+  },
+  {},
+];

package/src/mappings/NativeBase/Layout.js

@@ -0,0 +1,140 @@
+import { COMPONENT_TYPES, StylesPanelSections, createTextEnumProp, createBoolProp, } from "@draftbit/types";
+const NB_LAYOUT_PROPS = {
+    category: COMPONENT_TYPES.NBLayout,
+    packageName: "native-base",
+    doc_link: "https://www.npmjs.com/package/@expo/html-elements",
+    code_link: "https://github.com/expo/expo/tree/master/packages/html-elements",
+    stylesPanelSections: [
+        StylesPanelSections.LayoutFlexItems,
+        StylesPanelSections.LayoutSelectedItem,
+        StylesPanelSections.LayoutContent,
+        StylesPanelSections.Background,
+        StylesPanelSections.Size,
+        StylesPanelSections.MarginsAndPaddings,
+        StylesPanelSections.Position,
+        StylesPanelSections.Borders,
+        StylesPanelSections.Effects,
+    ],
+    allowChildren: true,
+    layout: {},
+    triggers: {},
+};
+export const SEED_DATA = [
+    {
+        name: "Aspect Ratio",
+        tag: "AspectRatio",
+        description: "AspectRatio controls the size of the undefined dimension of a node or child component.",
+        ...NB_LAYOUT_PROPS,
+        props: {
+            ratio: createTextEnumProp({
+                label: "Ratio",
+                description: "The aspect ratio of the container",
+                options: [
+                    "1 / 1",
+                    "4 / 3",
+                    "3 / 2",
+                    "16 / 9",
+                    "2 / 1",
+                    "3 / 4",
+                    "2 / 3",
+                    "9 / 16",
+                    "1 / 2",
+                ],
+                defaultValue: "4 / 3",
+            }),
+        },
+    },
+    {
+        name: "Box",
+        tag: "Box",
+        description: "This is a generic component for low level layout needs. It is similar to a div in HTML",
+        ...NB_LAYOUT_PROPS,
+    },
+    {
+        name: "Center",
+        tag: "Center",
+        description: "Centers its child",
+        ...NB_LAYOUT_PROPS,
+    },
+    {
+        name: "Square",
+        tag: "Square",
+        description: "Centers its child inside a square",
+        ...NB_LAYOUT_PROPS,
+    },
+    {
+        name: "Circle",
+        tag: "Circle",
+        description: "Centers its child inside a circle",
+        ...NB_LAYOUT_PROPS,
+    },
+    {
+        name: "Column",
+        tag: "Column",
+        description: "Column aligns items vertically",
+        ...NB_LAYOUT_PROPS,
+    },
+    {
+        name: "Container",
+        tag: "Container",
+        description: "The Container restricts a content's width according to current breakpoint, while keeping the size fluid.",
+        ...NB_LAYOUT_PROPS,
+    },
+    {
+        name: "Flex",
+        tag: "Flex",
+        description: "A Box with Flexbox properties. ",
+        ...NB_LAYOUT_PROPS,
+    },
+    {
+        name: "Spacer",
+        tag: "Spacer",
+        description: "An adjustable, empty space that can be used to tune the spacing between child elements within Flex",
+        ...NB_LAYOUT_PROPS,
+    },
+    {
+        name: "Row",
+        tag: "Row",
+        description: "Column aligns items horizontally",
+        ...NB_LAYOUT_PROPS,
+        props: {},
+    },
+    {
+        name: "Stack",
+        tag: "Stack",
+        description: "Stack aligns items vertically or horizontally based on the direction prop.",
+        ...NB_LAYOUT_PROPS,
+        props: {
+            direction: createTextEnumProp({
+                label: "Direction",
+                description: "The direction of the Stack",
+                options: ["row", "column"],
+                defaultValue: "column",
+            }),
+            reversed: createBoolProp({
+                label: "Reversed",
+                description: "Determines whether to reverse the direction of items.",
+            }),
+            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.",
+        ...NB_LAYOUT_PROPS,
+        props: {
+            reversed: createBoolProp({
+                label: "Reversed",
+                description: "Determines whether to reverse the direction of items.",
+            }),
+        },
+    },
+];