@draftbit/core 46.8.2-41c76e.2 → 46.8.2-57763.2

package/src/components/TabView/TabViewItem.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { StyleProp, ViewStyle, StyleSheet, View } from "react-native";
+
+//Props used by parent (TabView) to create tabs
+export interface TabViewItemProps {
+  title: string;
+  icon?: string;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const TabViewItem: React.FC<React.PropsWithChildren<TabViewItemProps>> = ({
+  style,
+  children,
+}) => {
+  return <View style={[styles.parentContainer, style]}>{children}</View>;
+};
+
+const styles = StyleSheet.create({
+  parentContainer: {
+    flex: 1,
+  },
+});
+
+export default TabViewItem;

package/src/components/TabView/index.js

@@ -0,0 +1,2 @@
+export { default as TabView } from "./TabView";
+export { default as TabViewItem } from "./TabViewItem";

package/src/components/TabView/index.tsx

@@ -0,0 +1,2 @@
+export { default as TabView } from "./TabView";
+export { default as TabViewItem } from "./TabViewItem";

package/src/index.js

@@ -32,6 +32,8 @@ 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";
 export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
+export { TabView, TabViewItem } from "./components/TabView";
+export { default as Markdown } from "./components/Markdown";
 /* Deprecated: Fix or Delete!  */
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
 export { default as Picker } from "./components/Picker/Picker";

package/src/index.tsx

@@ -53,6 +53,9 @@ export {
 
 export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
 
+export { TabView, TabViewItem } from "./components/TabView";
+export { default as Markdown } from "./components/Markdown";
+
 /* Deprecated: Fix or Delete!  */
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
 export { default as Picker } from "./components/Picker/Picker";

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/TabView.js

@@ -0,0 +1,75 @@
+import { COMPONENT_TYPES, createTextEnumProp, createColorProp, StylesPanelSections, Triggers, createActionProp, createStaticBoolProp, GROUPS, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Tab View",
+    tag: "TabView",
+    description: "Tab view container",
+    category: COMPONENT_TYPES.swiper,
+    stylesPanelSections: [
+        StylesPanelSections.Size,
+        StylesPanelSections.MarginsAndPaddings,
+        StylesPanelSections.Position,
+        StylesPanelSections.Effects,
+        StylesPanelSections.LayoutSelectedItem,
+        StylesPanelSections.Background,
+        StylesPanelSections.Typography,
+    ],
+    triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
+    props: {
+        onIndexChanged: createActionProp({
+            label: "On index changed",
+            description: "Action to execute when swipe to new index",
+        }),
+        onEndReached: createActionProp({
+            label: "On end reached",
+            description: "Action to execute when end of swiping reached",
+        }),
+        tabBarPosition: createTextEnumProp({
+            label: "Tab Bar Position",
+            description: "Position of tab bar",
+            options: ["top", "bottom"],
+            defaultValue: "top",
+        }),
+        keyboardDismissMode: createTextEnumProp({
+            label: "Keyboard Dismiss Mode",
+            description: "Keyboard Dismiss Mode",
+            options: ["auto", "on-drag", "none"],
+            defaultValue: "auto",
+        }),
+        swipeEnabled: createStaticBoolProp({
+            label: "Swipe Enabled",
+            description: "Whether swiping is enabled or not",
+            defaultValue: true,
+        }),
+        scrollEnabled: createStaticBoolProp({
+            label: "Tab Scroll Enabled",
+            description: "Whether scrolling of tabs is enabled or not",
+            defaultValue: false,
+        }),
+        activeColor: createColorProp({
+            label: "Active Color",
+            description: "Color of icon and text of active tab",
+            defaultValue: "primary",
+        }),
+        inactiveColor: createColorProp({
+            label: "Inactive Color",
+            description: "Color of icon and text of inactive tab(s)",
+            defaultValue: null,
+        }),
+        pressColor: createColorProp({
+            label: "Press Color",
+            description: "Color of ripple when pressed",
+            defaultValue: "primary",
+            group: GROUPS.android,
+        }),
+        indicatorColor: createColorProp({
+            label: "Indicator Color",
+            description: "Color of indicator",
+            defaultValue: "primary",
+        }),
+        tabsBackgroundColor: createColorProp({
+            label: "Tabs Background Color",
+            description: "Background color of tabs container",
+            defaultValue: "background",
+        }),
+    },
+};

package/src/mappings/TabView.ts

@@ -0,0 +1,85 @@
+import {
+  COMPONENT_TYPES,
+  createTextEnumProp,
+  createColorProp,
+  StylesPanelSections,
+  Triggers,
+  createActionProp,
+  createStaticBoolProp,
+  GROUPS,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Tab View",
+  tag: "TabView",
+  description: "Tab view container",
+  category: COMPONENT_TYPES.swiper,
+  stylesPanelSections: [
+    StylesPanelSections.Size,
+    StylesPanelSections.MarginsAndPaddings,
+    StylesPanelSections.Position,
+    StylesPanelSections.Effects,
+    StylesPanelSections.LayoutSelectedItem,
+    StylesPanelSections.Background,
+    StylesPanelSections.Typography,
+  ],
+  triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
+  props: {
+    onIndexChanged: createActionProp({
+      label: "On index changed",
+      description: "Action to execute when swipe to new index",
+    }),
+    onEndReached: createActionProp({
+      label: "On end reached",
+      description: "Action to execute when end of swiping reached",
+    }),
+    tabBarPosition: createTextEnumProp({
+      label: "Tab Bar Position",
+      description: "Position of tab bar",
+      options: ["top", "bottom"],
+      defaultValue: "top",
+    }),
+    keyboardDismissMode: createTextEnumProp({
+      label: "Keyboard Dismiss Mode",
+      description: "Keyboard Dismiss Mode",
+      options: ["auto", "on-drag", "none"],
+      defaultValue: "auto",
+    }),
+    swipeEnabled: createStaticBoolProp({
+      label: "Swipe Enabled",
+      description: "Whether swiping is enabled or not",
+      defaultValue: true,
+    }),
+    scrollEnabled: createStaticBoolProp({
+      label: "Tab Scroll Enabled",
+      description: "Whether scrolling of tabs is enabled or not",
+      defaultValue: false,
+    }),
+    activeColor: createColorProp({
+      label: "Active Color",
+      description: "Color of icon and text of active tab",
+      defaultValue: "primary",
+    }),
+    inactiveColor: createColorProp({
+      label: "Inactive Color",
+      description: "Color of icon and text of inactive tab(s)",
+      defaultValue: null,
+    }),
+    pressColor: createColorProp({
+      label: "Press Color",
+      description: "Color of ripple when pressed",
+      defaultValue: "primary",
+      group: GROUPS.android,
+    }),
+    indicatorColor: createColorProp({
+      label: "Indicator Color",
+      description: "Color of indicator",
+      defaultValue: "primary",
+    }),
+    tabsBackgroundColor: createColorProp({
+      label: "Tabs Background Color",
+      description: "Background color of tabs container",
+      defaultValue: "background",
+    }),
+  },
+};

package/src/mappings/TabViewItem.js

@@ -0,0 +1,30 @@
+import { COMPONENT_TYPES, createTextProp, createIconProp, CONTAINER_COMPONENT_STYLES_SECTIONS, GROUPS, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Tab View Item",
+    tag: "TabViewItem",
+    description: "Single Tab View item to be used in TabView. Each item represents a single tab and its content",
+    category: COMPONENT_TYPES.swiper,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+    layout: {
+        flex: 1,
+    },
+    props: {
+        title: createTextProp({
+            label: "Title",
+            description: "Title of tab item",
+            defaultValue: "Title",
+            required: true,
+            group: GROUPS.basic,
+        }),
+        icon: createIconProp({
+            defaultValue: null,
+            required: false,
+        }),
+        accessibilityLabel: createTextProp({
+            label: "Accessibility Label",
+            description: "Accessibility Label",
+            defaultValue: null,
+            group: GROUPS.accessibility,
+        }),
+    },
+};

package/src/mappings/TabViewItem.ts

@@ -0,0 +1,38 @@
+import {
+  COMPONENT_TYPES,
+  createTextProp,
+  createIconProp,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
+  GROUPS,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Tab View Item",
+  tag: "TabViewItem",
+  description:
+    "Single Tab View item to be used in TabView. Each item represents a single tab and its content",
+  category: COMPONENT_TYPES.swiper,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+  layout: {
+    flex: 1,
+  },
+  props: {
+    title: createTextProp({
+      label: "Title",
+      description: "Title of tab item",
+      defaultValue: "Title",
+      required: true,
+      group: GROUPS.basic,
+    }),
+    icon: createIconProp({
+      defaultValue: null,
+      required: false,
+    }),
+    accessibilityLabel: createTextProp({
+      label: "Accessibility Label",
+      description: "Accessibility Label",
+      defaultValue: null,
+      group: GROUPS.accessibility,
+    }),
+  },
+};