@draftbit/core 47.0.1-17098e.2 → 47.0.1-2aab54.2

package/src/index.tsx

@@ -3,39 +3,11 @@ export { withTheme, ThemeProvider } from "./theming";
 export { default as Provider } from "./Provider";
 export { default as DefaultTheme } from "./styles/DefaultTheme";
 
-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 Image } from "./components/Image";
-export { default as SVG } from "./components/SVG";
-export { default as NumberInput } from "./components/NumberInput";
-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";
-
-export {
+/** Replaced By NativeBase
+ * export { default as Avatar } from "./components/CircleImage";
+ * export { default as Container } from "./components/Container";
+ * export { default as FAB } from "./components/FAB";
+ * export {
   Center,
   Circle,
   Square,
@@ -43,31 +15,139 @@ export {
   Stack,
   Spacer,
 } from "./components/Layout";
+ */
+
+// BASIC
+export { default as ScreenContainer } from "./components/ScreenContainer";
+export { default as Banner } from "./components/Banner";
+
+// BUTTONS
+export { Button, ButtonSolid, ButtonOutline } from "./components/Button";
+export { Link } from "./components/Text";
+export { default as IconButton } from "./components/IconButton";
+export { default as Touchable } from "./components/Touchable";
+export { default as ToggleButton } from "./components/ToggleButton";
 
+// INPUTS
+export { default as DatePicker } from "./components/DatePicker/DatePicker";
+export { default as NumberInput } from "./components/NumberInput";
+export { default as TextField } from "./components/TextField";
+export { default as FieldSearchBarFull } from "./components/FieldSearchBarFull";
+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 StarRating } from "./components/StarRating";
+export { default as Switch, SwitchRow } from "./components/Switch";
 
-/* 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";
+// MEDIA
+export { default as SVG } from "./components/SVG";
+export { default as Image } from "./components/Image";
+// export { default as Avatar } from "./components/CircleImage"; Replaced by NativeBase
+export { default as AvatarEdit } from "./components/AvatarEdit";
+export { default as CircleImage } from "./components/CircleImage";
+
+// SWIPER
+export { Swiper, SwiperItem } from "./components/Swiper";
+
+// CONTAINERS
+export { AccordionGroup, AccordionItem } from "./components/Accordion";
+export { default as Surface } from "./components/Surface";
+
+// ACTIONSHEET
+export {
+  ActionSheet,
+  ActionSheetItem,
+  ActionSheetCancel,
+} from "./components/ActionSheet";
+
+// OTHER
+export { default as Carousel } from "./components/Carousel";
+export { default as Divider } from "./components/Divider";
 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 { default as Card } from "./components/Card";
+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 { useAuthState } from "./components/useAuthState";
 
-// a comment to fix sourcemap comment issue
+/**
+ * NativeBase Components Jan 2023
+ *
+ * ALERT
+ * - AlertDialog
+ * - AlertDialog.Header
+ * - AlertDialog.Body
+ * - AlertDialog.Footer
+ * - AlertDialog.Content
+ * - AlertDialog.CloseButton
+ *
+ * FORMS
+ * - Button -- COMMENTED OUT
+ * - Button.Group -- COMMENTED OUT
+ * - Fab
+ *
+ * DATA DISPLAY
+ * - Badge
+ * - Divider
+ *
+ * FEEDBACK
+ * - Alert
+ * - Alert.Icon
+ * - Progress
+ *
+ * LAYOUT
+ * - AspectRatio
+ * - Box
+ * - Center
+ * - Square
+ * - Circle
+ * - Column
+ * - Container
+ * - Flex
+ * - Spacer
+ * - Row
+ * - Stack
+ * - ZStack
+ *
+ * MEDIA
+ * - Avatar
+ * - Avatar.Badge
+ * - Avatar.Group
+ *
+ * MENU
+ * - Menu
+ * - Menu.Item
+ * - Menu.Group
+ * - Menu.OptionGroup
+ * - Menu.ItemOption
+ * - Menu.Trigger
+ *
+ * MODAL
+ * - Modal
+ * - Modal.Content
+ * - Modal.Header
+ * - Modal.Footer
+ * - Modal.Body
+ * - Modal.CloseButton
+ *
+ * OTHER
+ * - Tooltip
+ *
+ * */

package/src/mappings/Button.js

@@ -1,8 +1,7 @@
-import { COMPONENT_TYPES, createIconProp, createTextProp, createDisabledProp, createLoadingProp, createActionProp, Triggers, StylesPanelSections, createNumberProp, } from "@draftbit/types";
-const SEED_DATA_TRIGGERS = [Triggers.OnPress, Triggers.OnLongPress];
+import { COMPONENT_TYPES, createIconProp, createTextProp, createDisabledProp, createLoadingProp, createActionProp, Triggers, StylesPanelSections, } from "@draftbit/types";
+const SEED_DATA_TRIGGERS = [Triggers.OnPress];
 const SEED_DATA_PROPS = {
     onPress: createActionProp(),
-    onLongPress: createActionProp(),
     icon: createIconProp({
         defaultValue: null,
         required: false,
@@ -14,10 +13,11 @@ const SEED_DATA_PROPS = {
     }),
     disabled: createDisabledProp(),
     loading: createLoadingProp(),
-    activeOpacity: createNumberProp(),
-    disabledOpacity: createNumberProp(),
-    delayLongPress: createNumberProp(),
-    hitSlop: createNumberProp(),
+};
+const LAYOUT = {
+    backgroundColor: "transparent",
+    borderRadius: 8,
+    fontFamily: "system-700",
 };
 export const SEED_DATA = [
     {
@@ -34,9 +34,8 @@ export const SEED_DATA = [
             StylesPanelSections.Effects,
         ],
         layout: {
+            ...LAYOUT,
             backgroundColor: "transparent",
-            borderRadius: 8,
-            fontFamily: "system-700",
             borderWidth: 1,
             textAlign: "center",
         },
@@ -57,8 +56,7 @@ export const SEED_DATA = [
             StylesPanelSections.Effects,
         ],
         layout: {
-            borderRadius: 8,
-            fontFamily: "system-700",
+            ...LAYOUT,
             backgroundColor: "primary",
             textAlign: "center",
         },
@@ -79,9 +77,7 @@ export const SEED_DATA = [
             StylesPanelSections.Effects,
         ],
         layout: {
-            borderRadius: 8,
-            height: 42,
-            fontFamily: "system-700",
+            ...LAYOUT,
             backgroundColor: "primary",
             textAlign: "center",
         },

package/src/mappings/Button.ts

@@ -7,13 +7,11 @@ import {
   createActionProp,
   Triggers,
   StylesPanelSections,
-  createNumberProp,
 } from "@draftbit/types";
 
-const SEED_DATA_TRIGGERS = [Triggers.OnPress, Triggers.OnLongPress];
+const SEED_DATA_TRIGGERS = [Triggers.OnPress];
 const SEED_DATA_PROPS = {
   onPress: createActionProp(),
-  onLongPress: createActionProp(),
   icon: createIconProp({
     defaultValue: null,
     required: false,
@@ -25,10 +23,12 @@ const SEED_DATA_PROPS = {
   }),
   disabled: createDisabledProp(),
   loading: createLoadingProp(),
-  activeOpacity: createNumberProp(),
-  disabledOpacity: createNumberProp(),
-  delayLongPress: createNumberProp(),
-  hitSlop: createNumberProp(),
+};
+
+const LAYOUT = {
+  backgroundColor: "transparent",
+  borderRadius: 8,
+  fontFamily: "system-700",
 };
 
 export const SEED_DATA = [
@@ -46,9 +46,8 @@ export const SEED_DATA = [
       StylesPanelSections.Effects,
     ],
     layout: {
+      ...LAYOUT,
       backgroundColor: "transparent",
-      borderRadius: 8,
-      fontFamily: "system-700",
       borderWidth: 1,
       textAlign: "center",
     },
@@ -69,8 +68,7 @@ export const SEED_DATA = [
       StylesPanelSections.Effects,
     ],
     layout: {
-      borderRadius: 8,
-      fontFamily: "system-700",
+      ...LAYOUT,
       backgroundColor: "primary",
       textAlign: "center",
     },
@@ -91,9 +89,7 @@ export const SEED_DATA = [
       StylesPanelSections.Effects,
     ],
     layout: {
-      borderRadius: 8,
-      height: 42,
-      fontFamily: "system-700",
+      ...LAYOUT,
       backgroundColor: "primary",
       textAlign: "center",
     },

package/src/mappings/NativeBase/AlertDialog.js

@@ -0,0 +1,103 @@
+import { COMPONENT_TYPES, StylesPanelSections, Triggers, createBoolProp, createStaticBoolProp, createTextEnumProp, createActionProp, } from "@draftbit/types";
+const SHARED_SEED_DATA = {
+    category: COMPONENT_TYPES.NBAlert,
+    packageName: "native-base",
+    stylesPanelSections: [
+        StylesPanelSections.LayoutFlexItems,
+        StylesPanelSections.LayoutSelectedItem,
+        StylesPanelSections.LayoutContent,
+        StylesPanelSections.Background,
+        StylesPanelSections.Size,
+        StylesPanelSections.MarginsAndPaddings,
+        StylesPanelSections.Position,
+        StylesPanelSections.Borders,
+        StylesPanelSections.Effects,
+    ],
+    layout: {},
+};
+export const SEED_DATA = [
+    {
+        name: "Alert Dialog",
+        tag: "AlertDialog",
+        description: "AlertDialog is used when a user needs to be interrupted with a mandatory confirmation or call-to-action. AlertDialog composes Modal so you can use all its props.",
+        ...SHARED_SEED_DATA,
+        triggers: [Triggers.OnClose, Triggers.OnOpen],
+        props: {
+            isOpen: createBoolProp({
+                label: "Is Open",
+                description: "If true, the modal will open. Useful for controllable state behavior.",
+            }),
+            defaultIsOpen: createStaticBoolProp({
+                label: "Default Is Open",
+                description: "If true, the modal will be opened by default.",
+            }),
+            avoidKeyboard: createStaticBoolProp({
+                label: "Avoid Keyboard",
+                description: "If true and the keyboard is opened, the modal will move up equivalent to the keyboard height.",
+                defaultValue: false,
+            }),
+            closeOnOverlayClick: createStaticBoolProp({
+                label: "Close on Overlay Click",
+                description: "If true, the modal will close when the overlay is clicked.",
+                defaultValue: true,
+            }),
+            isKeyboardDismissable: createStaticBoolProp({
+                label: "Is Keyboard Dismissable",
+                description: "If true, the modal will close when the keyboard is dismissed.",
+                defaultValue: true,
+            }),
+            backdropVisible: createStaticBoolProp({
+                label: "Backdrop Visible",
+                description: "If true, the backdrop element is visible.",
+                defaultValue: true,
+            }),
+            animationPreset: createTextEnumProp({
+                label: "Animation Preset",
+                description: "The animation preset to use for the modal.",
+                options: ["slide", "fade", "none"],
+                defaultValue: "fade",
+            }),
+            useRNModal: createStaticBoolProp({
+                label: "Use RN Modal",
+                description: "If true, the modal will use the RN Modal component.",
+            }),
+            onOpen: createActionProp(),
+            onClose: createActionProp(),
+        },
+    },
+    {
+        name: "Alert Header",
+        tag: "AlertDialog.Header",
+        description: "Contains the title announced by screen readers.",
+        ...SHARED_SEED_DATA,
+        props: {},
+    },
+    {
+        name: "Alert Body",
+        tag: "AlertDialog.Body",
+        description: "Contains the description announced by screen readers.",
+        ...SHARED_SEED_DATA,
+        props: {},
+    },
+    {
+        name: "Alert Footer",
+        tag: "AlertDialog.Footer",
+        description: "Contains the actions of the dialog.",
+        ...SHARED_SEED_DATA,
+        props: {},
+    },
+    {
+        name: "Alert Content",
+        tag: "AlertDialog.Content",
+        description: "The wrapper for the alert dialog's content.",
+        ...SHARED_SEED_DATA,
+        props: {},
+    },
+    {
+        name: "Alert Close Button",
+        tag: "AlertDialog.CloseButton",
+        description: "The button that closes the dialog",
+        ...SHARED_SEED_DATA,
+        props: {},
+    },
+];

package/src/mappings/NativeBase/AlertDialog.ts

@@ -0,0 +1,118 @@
+import {
+  COMPONENT_TYPES,
+  StylesPanelSections,
+  Triggers,
+  createBoolProp,
+  createStaticBoolProp,
+  createTextEnumProp,
+  createActionProp,
+} from "@draftbit/types";
+
+const SHARED_SEED_DATA = {
+  category: COMPONENT_TYPES.NBAlert,
+  packageName: "native-base",
+  stylesPanelSections: [
+    StylesPanelSections.LayoutFlexItems,
+    StylesPanelSections.LayoutSelectedItem,
+    StylesPanelSections.LayoutContent,
+    StylesPanelSections.Background,
+    StylesPanelSections.Size,
+    StylesPanelSections.MarginsAndPaddings,
+    StylesPanelSections.Position,
+    StylesPanelSections.Borders,
+    StylesPanelSections.Effects,
+  ],
+  layout: {},
+};
+
+export const SEED_DATA = [
+  {
+    name: "Alert Dialog",
+    tag: "AlertDialog",
+    description:
+      "AlertDialog is used when a user needs to be interrupted with a mandatory confirmation or call-to-action. AlertDialog composes Modal so you can use all its props.",
+    ...SHARED_SEED_DATA,
+    triggers: [Triggers.OnClose, Triggers.OnOpen],
+    props: {
+      isOpen: createBoolProp({
+        label: "Is Open",
+        description:
+          "If true, the modal will open. Useful for controllable state behavior.",
+      }),
+      defaultIsOpen: createStaticBoolProp({
+        label: "Default Is Open",
+        description: "If true, the modal will be opened by default.",
+      }),
+      avoidKeyboard: createStaticBoolProp({
+        label: "Avoid Keyboard",
+        description:
+          "If true and the keyboard is opened, the modal will move up equivalent to the keyboard height.",
+        defaultValue: false,
+      }),
+      closeOnOverlayClick: createStaticBoolProp({
+        label: "Close on Overlay Click",
+        description:
+          "If true, the modal will close when the overlay is clicked.",
+        defaultValue: true,
+      }),
+      isKeyboardDismissable: createStaticBoolProp({
+        label: "Is Keyboard Dismissable",
+        description:
+          "If true, the modal will close when the keyboard is dismissed.",
+        defaultValue: true,
+      }),
+      backdropVisible: createStaticBoolProp({
+        label: "Backdrop Visible",
+        description: "If true, the backdrop element is visible.",
+        defaultValue: true,
+      }),
+      animationPreset: createTextEnumProp({
+        label: "Animation Preset",
+        description: "The animation preset to use for the modal.",
+        options: ["slide", "fade", "none"],
+        defaultValue: "fade",
+      }),
+      useRNModal: createStaticBoolProp({
+        label: "Use RN Modal",
+        description: "If true, the modal will use the RN Modal component.",
+      }),
+      onOpen: createActionProp(),
+      onClose: createActionProp(),
+    },
+  },
+  {
+    name: "Alert Header",
+    tag: "AlertDialog.Header",
+    description: "Contains the title announced by screen readers.",
+    ...SHARED_SEED_DATA,
+    props: {},
+  },
+  {
+    name: "Alert Body",
+    tag: "AlertDialog.Body",
+    description: "Contains the description announced by screen readers.",
+    ...SHARED_SEED_DATA,
+    props: {},
+  },
+  {
+    name: "Alert Footer",
+    tag: "AlertDialog.Footer",
+    description: "Contains the actions of the dialog.",
+    ...SHARED_SEED_DATA,
+    props: {},
+  },
+  {
+    name: "Alert Content",
+    tag: "AlertDialog.Content",
+    description: "The wrapper for the alert dialog's content.",
+    ...SHARED_SEED_DATA,
+    props: {},
+  },
+  {
+    name: "Alert Close Button",
+    tag: "AlertDialog.CloseButton",
+    description: "The button that closes the dialog",
+    ...SHARED_SEED_DATA,
+    props: {},
+  },
+];

package/src/mappings/NativeBase/Button.js

@@ -0,0 +1,84 @@
+"use strict";
+/* 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",
+      }),
+    },
+  },
+];
+ */