@draftbit/core 46.8.2-fee87c.2 → 46.9.1-1cf4d4.2

package/src/components/TabView/TabView.js

@@ -1,17 +1,23 @@
 import * as React from "react";
 import { TabView, TabBar, SceneMap, } from "react-native-tab-view";
-import TabViewItem from "./TabViewItem";
 import { withTheme } from "../../theming";
+import { extractStyles } from "../../utilities";
 const TabViewComponent = ({ Icon, onIndexChanged, onEndReached, tabBarPosition, keyboardDismissMode, swipeEnabled, scrollEnabled, activeColor, inactiveColor, pressColor, indicatorColor, tabsBackgroundColor, style, theme, children, }) => {
     const [index, setIndex] = React.useState(0);
     const [routes, setRoutes] = React.useState([]);
     const [tabScenes, setTabScenes] = React.useState({});
+    const { textStyles, viewStyles } = extractStyles(style);
+    //Check type of child using props
+    //Regular '.type' cannot work because Draftbit strips the type in Draft view
+    const instanceOfTabViewItemProps = (object) => {
+        return "title" in object;
+    };
     //Populate routes and scenes based on children
     React.useEffect(() => {
         const newRoutes = [];
         const scenes = {};
         React.Children.toArray(children)
-            .filter((child) => React.isValidElement(child) && child.type === TabViewItem)
+            .filter((child) => React.isValidElement(child) && instanceOfTabViewItemProps(child.props))
             .forEach((item, idx) => {
             const child = item;
             newRoutes.push({
@@ -35,11 +41,14 @@ const TabViewComponent = ({ Icon, onIndexChanged, onEndReached, tabBarPosition,
     const renderTabBar = (props) => {
         return (React.createElement(TabBar, { ...props, activeColor: activeColor || theme.colors.primary, inactiveColor: inactiveColor || theme.colors.divider, pressColor: pressColor || theme.colors.primary, scrollEnabled: scrollEnabled, indicatorStyle: {
                 backgroundColor: indicatorColor || theme.colors.primary,
-            }, renderIcon: ({ route, color }) => (route === null || route === void 0 ? void 0 : route.icon) ? (React.createElement(Icon, { name: route.icon, color: color, size: 36 })) : null, style: [
-                { backgroundColor: tabsBackgroundColor || theme.colors.background },
-                style,
-            ] }));
+            }, labelStyle: textStyles, renderIcon: ({ route, color }) => (route === null || route === void 0 ? void 0 : route.icon) ? (React.createElement(Icon, { name: route.icon, color: color, size: 16 })) : null, style: {
+                backgroundColor: tabsBackgroundColor || theme.colors.background,
+            } }));
     };
-    return (React.createElement(TabView, { navigationState: { index, routes }, renderScene: SceneMap(tabScenes), renderTabBar: renderTabBar, onIndexChange: indexChangeHandler, tabBarPosition: tabBarPosition, keyboardDismissMode: keyboardDismissMode, swipeEnabled: swipeEnabled }));
+    //Cannot render TabView without at least one tab
+    if (!routes.length) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement(TabView, { style: [viewStyles], navigationState: { index, routes }, renderScene: SceneMap(tabScenes), renderTabBar: renderTabBar, onIndexChange: indexChangeHandler, tabBarPosition: tabBarPosition, keyboardDismissMode: keyboardDismissMode, swipeEnabled: swipeEnabled }));
 };
 export default withTheme(TabViewComponent);

package/src/components/TabView/TabView.tsx

@@ -9,10 +9,11 @@ import {
   Route,
 } from "react-native-tab-view";
 
-import TabViewItem from "./TabViewItem";
+import { TabViewItemProps } from "./TabViewItem";
 import type { IconSlot } from "../../interfaces/Icon";
 import { withTheme } from "../../theming";
 import type { Theme } from "../../styles/DefaultTheme";
+import { extractStyles } from "../../utilities";
 
 type TabBarProps = SceneRendererProps & {
   navigationState: NavigationState<any>;
@@ -57,6 +58,16 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
   const [routes, setRoutes] = React.useState<Route[]>([]);
   const [tabScenes, setTabScenes] = React.useState({});
 
+  const { textStyles, viewStyles } = extractStyles(style);
+
+  //Check type of child using props
+  //Regular '.type' cannot work because Draftbit strips the type in Draft view
+  const instanceOfTabViewItemProps = (
+    object: any
+  ): object is TabViewItemProps => {
+    return "title" in object;
+  };
+
   //Populate routes and scenes based on children
   React.useEffect(() => {
     const newRoutes: Route[] = [];
@@ -64,7 +75,8 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
 
     React.Children.toArray(children)
       .filter(
-        (child) => React.isValidElement(child) && child.type === TabViewItem
+        (child) =>
+          React.isValidElement(child) && instanceOfTabViewItemProps(child.props)
       )
       .forEach((item: any, idx) => {
         const child = item as React.ReactElement;
@@ -100,21 +112,27 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
         indicatorStyle={{
           backgroundColor: indicatorColor || theme.colors.primary,
         }}
+        labelStyle={textStyles}
         renderIcon={({ route, color }) =>
           route?.icon ? (
-            <Icon name={route.icon} color={color} size={36} />
+            <Icon name={route.icon} color={color} size={16} />
           ) : null
         }
-        style={[
-          { backgroundColor: tabsBackgroundColor || theme.colors.background },
-          style,
-        ]}
+        style={{
+          backgroundColor: tabsBackgroundColor || theme.colors.background,
+        }}
       />
     );
   };
 
+  //Cannot render TabView without at least one tab
+  if (!routes.length) {
+    return <></>;
+  }
+
   return (
     <TabView
+      style={[viewStyles]}
       navigationState={{ index, routes }}
       renderScene={SceneMap(tabScenes)}
       renderTabBar={renderTabBar}

package/src/components/TabView/TabViewItem.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { StyleProp, ViewStyle, StyleSheet, View } from "react-native";
 
 //Props used by parent (TabView) to create tabs
-interface TabViewItemProps {
+export interface TabViewItemProps {
   title: string;
   icon?: string;
   accessibilityLabel?: string;

package/src/index.js

@@ -31,8 +31,10 @@ export { ActionSheet, ActionSheetItem, ActionSheetCancel, } from "./components/A
 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 { default as Shadow } from "./components/Shadow";
 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

@@ -51,9 +51,12 @@ export {
   RadioButtonFieldGroup,
 } from "./components/RadioButton/index";
 
+export { default as Shadow } from "./components/Shadow";
+
 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";

package/src/mappings/FlashList.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, createNumberProp, CONTAINER_COMPONENT_STYLES_SECTIONS, GROUPS, Triggers, createActionProp, createStaticNumberProp, createColorProp, } from "@draftbit/types";
+import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, createNumberProp, GROUPS, Triggers, createActionProp, createStaticNumberProp, createColorProp, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = [
     {
         name: "Masonry List",
@@ -6,10 +6,10 @@ export const SEED_DATA = [
         description: "Masonry Flashlist by Shopify",
         packageName: "@shopify/flash-list",
         category: COMPONENT_TYPES.data,
-        stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
-        layout: {
-            flex: 1,
-        },
+        stylesPanelSections: [
+            StylesPanelSections.Background,
+            StylesPanelSections.MarginsAndPaddings,
+        ],
         triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
         props: {
             onRefresh: createActionProp(),
@@ -57,10 +57,10 @@ export const SEED_DATA = [
         description: "Flashlist by Shopify",
         packageName: "@shopify/flash-list",
         category: COMPONENT_TYPES.data,
-        stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
-        layout: {
-            flex: 1,
-        },
+        stylesPanelSections: [
+            StylesPanelSections.Background,
+            StylesPanelSections.MarginsAndPaddings,
+        ],
         triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
         props: {
             onRefresh: createActionProp(),

package/src/mappings/FlashList.ts

@@ -3,12 +3,12 @@ import {
   createNumColumnsType,
   createStaticBoolProp,
   createNumberProp,
-  CONTAINER_COMPONENT_STYLES_SECTIONS,
   GROUPS,
   Triggers,
   createActionProp,
   createStaticNumberProp,
   createColorProp,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = [
@@ -18,10 +18,10 @@ export const SEED_DATA = [
     description: "Masonry Flashlist by Shopify",
     packageName: "@shopify/flash-list",
     category: COMPONENT_TYPES.data,
-    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
-    layout: {
-      flex: 1,
-    },
+    stylesPanelSections: [
+      StylesPanelSections.Background,
+      StylesPanelSections.MarginsAndPaddings,
+    ],
     triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
     props: {
       onRefresh: createActionProp(),
@@ -72,10 +72,10 @@ export const SEED_DATA = [
     description: "Flashlist by Shopify",
     packageName: "@shopify/flash-list",
     category: COMPONENT_TYPES.data,
-    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
-    layout: {
-      flex: 1,
-    },
+    stylesPanelSections: [
+      StylesPanelSections.Background,
+      StylesPanelSections.MarginsAndPaddings,
+    ],
     triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
     props: {
       onRefresh: createActionProp(),

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

@@ -0,0 +1,95 @@
+import { COMPONENT_TYPES, CONTAINER_COMPONENT_STYLES_SECTIONS, createColorProp, createStaticNumberProp, createStaticBoolProp, createDisabledProp, GROUPS, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Shadow",
+    tag: "Shadow",
+    description: "A cross-platform, universal shadow.",
+    category: COMPONENT_TYPES.view,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+    props: {
+        disabled: createDisabledProp({
+            description: "Disables the shadow.",
+        }),
+        startColor: createColorProp({
+            label: "Start Color",
+            description: "The initial gradient color of the shadow.",
+            defaultValue: null,
+        }),
+        endColor: createColorProp({
+            label: "End Color",
+            description: "The final gradient color of the shadow.",
+            defaultValue: null,
+        }),
+        distance: createStaticNumberProp({
+            label: "Distance",
+            description: "The distance of the shadow.",
+        }),
+        paintInside: createStaticBoolProp({
+            label: "Paint Inside",
+            description: "Apply the shadow below/inside the content.",
+            defaultValue: false,
+        }),
+        stretch: createStaticBoolProp({
+            label: "Stretch",
+            description: "Force children to occupy all available horizontal space.",
+            defaultValue: null,
+        }),
+        offsetX: createStaticNumberProp({
+            label: "Offset X",
+            description: "Moves the shadow in the x direction",
+            defeaultValue: 0,
+        }),
+        offsetY: createStaticNumberProp({
+            label: "Offset Y",
+            description: "Moves the shadow in the y direction",
+            defeaultValue: 0,
+        }),
+        showShadowSideStart: createStaticBoolProp({
+            label: "Show Shadow Start",
+            description: "Whether to show shadow on the start side or not",
+            defaultValue: true,
+            group: GROUPS.advanced,
+        }),
+        showShadowSideEnd: createStaticBoolProp({
+            label: "Show Shadow End",
+            description: "Whether to show shadow on the end side or not",
+            defaultValue: true,
+            group: GROUPS.advanced,
+        }),
+        showShadowSideTop: createStaticBoolProp({
+            label: "Show Shadow Top",
+            description: "Whether to show shadow on the top side or not",
+            defaultValue: true,
+            group: GROUPS.advanced,
+        }),
+        showShadowSideBottom: createStaticBoolProp({
+            label: "Show Shadow Bottom",
+            description: "Whether to show shadow on the bottom side or not",
+            defaultValue: true,
+            group: GROUPS.advanced,
+        }),
+        showShadowCornerTopStart: createStaticBoolProp({
+            label: "Show Shadow Top Start Corner",
+            description: "Whether to show shadow on the top start corner or not",
+            defaultValue: true,
+            group: GROUPS.advanced,
+        }),
+        showShadowCornerTopEnd: createStaticBoolProp({
+            label: "Show Shadow Top End Corner",
+            description: "Whether to show shadow on the top end corner or not",
+            defaultValue: true,
+            group: GROUPS.advanced,
+        }),
+        showShadowCornerBottomStart: createStaticBoolProp({
+            label: "Show Shadow Bottom Start Corner",
+            description: "Whether to show shadow on the bottom start corner or not",
+            defaultValue: true,
+            group: GROUPS.advanced,
+        }),
+        showShadowCornerBottomEnd: createStaticBoolProp({
+            label: "Show Shadow Bottom End Corner",
+            description: "Whether to show shadow on the bottom end corner or not",
+            defaultValue: true,
+            group: GROUPS.advanced,
+        }),
+    },
+};

package/src/mappings/Shadow.ts

@@ -0,0 +1,104 @@
+import {
+  COMPONENT_TYPES,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
+  createColorProp,
+  createStaticNumberProp,
+  createStaticBoolProp,
+  createDisabledProp,
+  GROUPS,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Shadow",
+  tag: "Shadow",
+  description: "A cross-platform, universal shadow.",
+  category: COMPONENT_TYPES.view,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+  props: {
+    disabled: createDisabledProp({
+      description: "Disables the shadow.",
+    }),
+    startColor: createColorProp({
+      label: "Start Color",
+      description: "The initial gradient color of the shadow.",
+      defaultValue: null,
+    }),
+    endColor: createColorProp({
+      label: "End Color",
+      description: "The final gradient color of the shadow.",
+      defaultValue: null,
+    }),
+    distance: createStaticNumberProp({
+      label: "Distance",
+      description: "The distance of the shadow.",
+    }),
+    paintInside: createStaticBoolProp({
+      label: "Paint Inside",
+      description: "Apply the shadow below/inside the content.",
+      defaultValue: false,
+    }),
+    stretch: createStaticBoolProp({
+      label: "Stretch",
+      description: "Force children to occupy all available horizontal space.",
+      defaultValue: null,
+    }),
+    offsetX: createStaticNumberProp({
+      label: "Offset X",
+      description: "Moves the shadow in the x direction",
+      defeaultValue: 0,
+    }),
+    offsetY: createStaticNumberProp({
+      label: "Offset Y",
+      description: "Moves the shadow in the y direction",
+      defeaultValue: 0,
+    }),
+    showShadowSideStart: createStaticBoolProp({
+      label: "Show Shadow Start",
+      description: "Whether to show shadow on the start side or not",
+      defaultValue: true,
+      group: GROUPS.advanced,
+    }),
+    showShadowSideEnd: createStaticBoolProp({
+      label: "Show Shadow End",
+      description: "Whether to show shadow on the end side or not",
+      defaultValue: true,
+      group: GROUPS.advanced,
+    }),
+    showShadowSideTop: createStaticBoolProp({
+      label: "Show Shadow Top",
+      description: "Whether to show shadow on the top side or not",
+      defaultValue: true,
+      group: GROUPS.advanced,
+    }),
+    showShadowSideBottom: createStaticBoolProp({
+      label: "Show Shadow Bottom",
+      description: "Whether to show shadow on the bottom side or not",
+      defaultValue: true,
+      group: GROUPS.advanced,
+    }),
+    showShadowCornerTopStart: createStaticBoolProp({
+      label: "Show Shadow Top Start Corner",
+      description: "Whether to show shadow on the top start corner or not",
+      defaultValue: true,
+      group: GROUPS.advanced,
+    }),
+    showShadowCornerTopEnd: createStaticBoolProp({
+      label: "Show Shadow Top End Corner",
+      description: "Whether to show shadow on the top end corner or not",
+      defaultValue: true,
+      group: GROUPS.advanced,
+    }),
+    showShadowCornerBottomStart: createStaticBoolProp({
+      label: "Show Shadow Bottom Start Corner",
+      description: "Whether to show shadow on the bottom start corner or not",
+      defaultValue: true,
+      group: GROUPS.advanced,
+    }),
+    showShadowCornerBottomEnd: createStaticBoolProp({
+      label: "Show Shadow Bottom End Corner",
+      description: "Whether to show shadow on the bottom end corner or not",
+      defaultValue: true,
+      group: GROUPS.advanced,
+    }),
+  },
+};

package/src/mappings/TabView.js

@@ -1,12 +1,17 @@
-import { COMPONENT_TYPES, createTextEnumProp, createColorProp, BLOCK_STYLES_SECTIONS, StylesPanelSections, Triggers, createActionProp, createStaticBoolProp, } from "@draftbit/types";
+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: [
-        ...BLOCK_STYLES_SECTIONS,
+        StylesPanelSections.Size,
+        StylesPanelSections.MarginsAndPaddings,
+        StylesPanelSections.Position,
+        StylesPanelSections.Effects,
+        StylesPanelSections.LayoutSelectedItem,
         StylesPanelSections.Background,
+        StylesPanelSections.Typography,
     ],
     triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
     props: {
@@ -36,9 +41,9 @@ export const SEED_DATA = {
             defaultValue: true,
         }),
         scrollEnabled: createStaticBoolProp({
-            label: "Scroll Enabled",
+            label: "Tab Scroll Enabled",
             description: "Whether scrolling of tabs is enabled or not",
-            defaultValue: true,
+            defaultValue: false,
         }),
         activeColor: createColorProp({
             label: "Active Color",
@@ -52,8 +57,9 @@ export const SEED_DATA = {
         }),
         pressColor: createColorProp({
             label: "Press Color",
-            description: "Color of ripple when pressed (android only)",
+            description: "Color of ripple when pressed",
             defaultValue: "primary",
+            group: GROUPS.android,
         }),
         indicatorColor: createColorProp({
             label: "Indicator Color",

package/src/mappings/TabView.ts

@@ -2,11 +2,11 @@ import {
   COMPONENT_TYPES,
   createTextEnumProp,
   createColorProp,
-  BLOCK_STYLES_SECTIONS,
   StylesPanelSections,
   Triggers,
   createActionProp,
   createStaticBoolProp,
+  GROUPS,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -15,8 +15,13 @@ export const SEED_DATA = {
   description: "Tab view container",
   category: COMPONENT_TYPES.swiper,
   stylesPanelSections: [
-    ...BLOCK_STYLES_SECTIONS,
+    StylesPanelSections.Size,
+    StylesPanelSections.MarginsAndPaddings,
+    StylesPanelSections.Position,
+    StylesPanelSections.Effects,
+    StylesPanelSections.LayoutSelectedItem,
     StylesPanelSections.Background,
+    StylesPanelSections.Typography,
   ],
   triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
   props: {
@@ -46,9 +51,9 @@ export const SEED_DATA = {
       defaultValue: true,
     }),
     scrollEnabled: createStaticBoolProp({
-      label: "Scroll Enabled",
+      label: "Tab Scroll Enabled",
       description: "Whether scrolling of tabs is enabled or not",
-      defaultValue: true,
+      defaultValue: false,
     }),
     activeColor: createColorProp({
       label: "Active Color",
@@ -62,8 +67,9 @@ export const SEED_DATA = {
     }),
     pressColor: createColorProp({
       label: "Press Color",
-      description: "Color of ripple when pressed (android only)",
+      description: "Color of ripple when pressed",
       defaultValue: "primary",
+      group: GROUPS.android,
     }),
     indicatorColor: createColorProp({
       label: "Indicator Color",

package/src/mappings/TabViewItem.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, createTextProp, createIconProp, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
+import { COMPONENT_TYPES, createTextProp, createIconProp, CONTAINER_COMPONENT_STYLES_SECTIONS, GROUPS, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Tab View Item",
     tag: "TabViewItem",
@@ -12,8 +12,9 @@ export const SEED_DATA = {
         title: createTextProp({
             label: "Title",
             description: "Title of tab item",
-            defaultValue: null,
+            defaultValue: "Title",
             required: true,
+            group: GROUPS.basic,
         }),
         icon: createIconProp({
             defaultValue: null,
@@ -23,6 +24,7 @@ export const SEED_DATA = {
             label: "Accessibility Label",
             description: "Accessibility Label",
             defaultValue: null,
+            group: GROUPS.accessibility,
         }),
     },
 };

package/src/mappings/TabViewItem.ts

@@ -3,6 +3,7 @@ import {
   createTextProp,
   createIconProp,
   CONTAINER_COMPONENT_STYLES_SECTIONS,
+  GROUPS,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -19,8 +20,9 @@ export const SEED_DATA = {
     title: createTextProp({
       label: "Title",
       description: "Title of tab item",
-      defaultValue: null,
+      defaultValue: "Title",
       required: true,
+      group: GROUPS.basic,
     }),
     icon: createIconProp({
       defaultValue: null,
@@ -30,6 +32,7 @@ export const SEED_DATA = {
       label: "Accessibility Label",
       description: "Accessibility Label",
       defaultValue: null,
+      group: GROUPS.accessibility,
     }),
   },
 };