@draftbit/core 46.7.9-13d0dd.2 → 46.7.9-193328.2

package/lib/typescript/src/mappings/HtmlElements.d.ts

@@ -0,0 +1,77 @@
+export declare const SEED_DATA: ({
+    props: {
+        href: any;
+        target: {
+            group: string;
+            label: string;
+            description: string;
+            formType: string;
+            defaultValue: string;
+            options: string[];
+        };
+    };
+    category: string;
+    doc_link: string;
+    code_link: string;
+    packageName: string;
+    stylesPanelSections: string[];
+    layout: {
+        margin: number;
+    };
+    triggers: string[];
+    name: string;
+    tag: string;
+} | {
+    props: {
+        href?: undefined;
+        target?: undefined;
+    };
+    category: string;
+    doc_link: string;
+    code_link: string;
+    packageName: string;
+    stylesPanelSections: string[];
+    layout: {
+        margin: number;
+    };
+    triggers: string[];
+    name: string;
+    tag: string;
+} | {
+    category: string;
+    props: {
+        children: {
+            group: string;
+            label: string;
+            description: string;
+            defaultValue: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+        };
+    };
+    doc_link: string;
+    code_link: string;
+    packageName: string;
+    stylesPanelSections: string[];
+    layout: {
+        margin: number;
+    };
+    triggers: string[];
+    name: string;
+    tag: string;
+} | {
+    doc_link: string;
+    code_link: string;
+    packageName: string;
+    stylesPanelSections: string[];
+    layout: {
+        margin: number;
+    };
+    triggers: string[];
+    category: string;
+    name: string;
+    tag: string;
+})[];
+//# sourceMappingURL=HtmlElements.d.ts.map

package/lib/typescript/src/mappings/HtmlElements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HtmlElements.d.ts","sourceRoot":"","sources":["../../../../src/mappings/HtmlElements.ts"],"names":[],"mappings":"AAsFA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAwHrB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "46.7.9-13d0dd.2+13d0dde",
+  "version": "46.7.9-193328.2+1933281",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -41,7 +41,8 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "^46.7.9-13d0dd.2+13d0dde",
+    "@draftbit/types": "^46.7.9-193328.2+1933281",
+    "@expo/html-elements": "^0.3.1",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.3",
@@ -53,6 +54,7 @@
     "lodash.isnumber": "^3.0.3",
     "lodash.omit": "^4.5.0",
     "lodash.tonumber": "^4.0.3",
+    "react-native-deck-swiper": "^2.0.12",
     "react-native-modal-datetime-picker": "^13.0.0",
     "react-native-svg": "12.3.0",
     "react-native-typography": "^1.4.1",
@@ -91,5 +93,5 @@
       ]
     ]
   },
-  "gitHead": "13d0dde6f213290a9a26f91f0ac79c5a2d124560"
+  "gitHead": "1933281a981a18f99c4c7eaeccf250cad7e58d23"
 }

package/src/components/DatePicker/DatePicker.js

@@ -137,7 +137,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
         ? labelSize
         : typography.caption.fontSize;
     const hasActiveOutline = focused;
-    let inputTextColor, activeColor, underlineColor, borderColor, placeholderColor, containerStyle, backgroundColor, inputStyle;
+    let inputTextColor, activeColor, underlineColor, borderColor = inputBorderColor, placeholderColor, containerStyle, backgroundColor, inputStyle;
     inputTextColor = colors.strong;
     if (disabled) {
         activeColor = colors.light;

package/src/components/DatePicker/DatePicker.tsx

@@ -241,7 +241,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
   let inputTextColor,
     activeColor,
     underlineColor,
-    borderColor,
+    borderColor = inputBorderColor,
     placeholderColor,
     containerStyle: StyleProp<ViewStyle>,
     backgroundColor,

package/src/components/DeckSwiper/DeckSwiper.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import DeckSwiperComponent from "react-native-deck-swiper";
+const DeckSwiper = ({ onIndexChanged, onEndReached, startCardIndex = 0, infiniteSwiping = false, verticalEnabled = true, horizontalEnabled = true, visibleCardCount = 1, style, children, }) => {
+    const childrenArray = React.useMemo(() => React.Children.toArray(children), [children]);
+    // an array of indices based on children count
+    const cardsFillerData = React.useMemo(() => Array.from(Array(childrenArray.length).keys()), [childrenArray]);
+    /**
+     * By default react-native-deck-swiper positions everything with absolute position.
+     * To overcome this, it is wrapped in a View to be able to add the component in any layout structure.
+     *
+     *
+     * Since all children of that View are absolutley positioned, the View does not have a height and still looks and behaves weird.
+     * To fix/mitage this without setting a static height, the first card is rendered in invisible state to take up space.
+     * This effectivley makes the default height of the container be the height of the first card.
+     */
+    return (React.createElement(View, null,
+        React.createElement(View, { style: styles.containerHeightFiller }, childrenArray.length && childrenArray[0]),
+        React.createElement(DeckSwiperComponent, { cards: cardsFillerData, renderCard: (_, i) => React.createElement(React.Fragment, null, childrenArray[i]), keyExtractor: (card) => card === null || card === void 0 ? void 0 : card.toString(), containerStyle: StyleSheet.flatten([styles.cardsContainer, style]), cardStyle: styles.card, onSwiped: onIndexChanged, onSwipedAll: onEndReached, cardIndex: startCardIndex, infinite: infiniteSwiping, verticalSwipe: verticalEnabled, horizontalSwipe: horizontalEnabled, showSecondCard: visibleCardCount > 1, stackSize: visibleCardCount, backgroundColor: "transparent", cardVerticalMargin: 0, cardHorizontalMargin: 0 })));
+};
+const styles = StyleSheet.create({
+    cardsContainer: {
+        width: "100%",
+    },
+    card: {
+        left: 0,
+        right: 0,
+        width: "auto",
+        height: "auto",
+    },
+    containerHeightFiller: {
+        opacity: 0.0,
+    },
+});
+export default DeckSwiper;

package/src/components/DeckSwiper/DeckSwiper.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { StyleProp, ViewStyle, StyleSheet, View } from "react-native";
+import DeckSwiperComponent from "react-native-deck-swiper";
+
+export interface DeckSwiperProps {
+  onIndexChanged?: (index: number) => void;
+  onEndReached?: () => void;
+  startCardIndex?: number;
+  infiniteSwiping?: boolean;
+  verticalEnabled?: boolean;
+  horizontalEnabled?: boolean;
+  visibleCardCount?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+const DeckSwiper: React.FC<React.PropsWithChildren<DeckSwiperProps>> = ({
+  onIndexChanged,
+  onEndReached,
+  startCardIndex = 0,
+  infiniteSwiping = false,
+  verticalEnabled = true,
+  horizontalEnabled = true,
+  visibleCardCount = 1,
+  style,
+  children,
+}) => {
+  const childrenArray = React.useMemo(
+    () => React.Children.toArray(children),
+    [children]
+  );
+
+  // an array of indices based on children count
+  const cardsFillerData = React.useMemo(
+    () => Array.from(Array(childrenArray.length).keys()),
+    [childrenArray]
+  );
+
+  /**
+   * By default react-native-deck-swiper positions everything with absolute position.
+   * To overcome this, it is wrapped in a View to be able to add the component in any layout structure.
+   *
+   *
+   * Since all children of that View are absolutley positioned, the View does not have a height and still looks and behaves weird.
+   * To fix/mitage this without setting a static height, the first card is rendered in invisible state to take up space.
+   * This effectivley makes the default height of the container be the height of the first card.
+   */
+
+  return (
+    <View>
+      <View style={styles.containerHeightFiller}>
+        {childrenArray.length && childrenArray[0]}
+      </View>
+      <DeckSwiperComponent
+        cards={cardsFillerData}
+        renderCard={(_, i) => <>{childrenArray[i]}</>}
+        keyExtractor={(card) => card?.toString()}
+        containerStyle={
+          StyleSheet.flatten([styles.cardsContainer, style]) as
+            | object
+            | undefined
+        }
+        cardStyle={styles.card as object | undefined}
+        onSwiped={onIndexChanged}
+        onSwipedAll={onEndReached}
+        cardIndex={startCardIndex}
+        infinite={infiniteSwiping}
+        verticalSwipe={verticalEnabled}
+        horizontalSwipe={horizontalEnabled}
+        showSecondCard={visibleCardCount > 1}
+        stackSize={visibleCardCount}
+        backgroundColor="transparent"
+        cardVerticalMargin={0}
+        cardHorizontalMargin={0}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  cardsContainer: {
+    width: "100%",
+  },
+  card: {
+    left: 0,
+    right: 0,
+    width: "auto",
+    height: "auto",
+  },
+  containerHeightFiller: {
+    opacity: 0.0,
+  },
+});
+
+export default DeckSwiper;

package/src/components/DeckSwiper/DeckSwiperCard.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { withTheme } from "../../theming";
+const DeckSwiperCard = ({ style, children, theme, }) => (React.createElement(View, { style: [
+        styles.card,
+        {
+            backgroundColor: theme.colors.background,
+            borderColor: theme.colors.divider,
+        },
+        style,
+    ] }, children));
+const styles = StyleSheet.create({
+    card: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 20,
+        borderWidth: 2,
+    },
+});
+export default withTheme(DeckSwiperCard);

package/src/components/DeckSwiper/DeckSwiperCard.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { View, StyleSheet, StyleProp, ViewStyle } from "react-native";
+import type { Theme } from "../../styles/DefaultTheme";
+import { withTheme } from "../../theming";
+
+export interface DeckSwiperCardProps {
+  style?: StyleProp<ViewStyle>;
+  children: React.ReactNode;
+  theme: Theme;
+}
+
+const DeckSwiperCard: React.FC<DeckSwiperCardProps> = ({
+  style,
+  children,
+  theme,
+}) => (
+  <View
+    style={[
+      styles.card,
+      {
+        backgroundColor: theme.colors.background,
+        borderColor: theme.colors.divider,
+      },
+      style,
+    ]}
+  >
+    {children}
+  </View>
+);
+
+const styles = StyleSheet.create({
+  card: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 20,
+    borderWidth: 2,
+  },
+});
+
+export default withTheme(DeckSwiperCard);

package/src/components/DeckSwiper/index.js

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

package/src/components/DeckSwiper/index.tsx

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

package/src/components/NumberInput.js

@@ -20,16 +20,8 @@ const NumberInput = ({ onChangeText, value, defaultValue, ...props }) => {
                 return valueToFormat.toString();
             }
         }
-        return "0";
+        return "";
     };
-    // set currentStringNumberValue as defaultValue prop if there is a differnce on first render only
-    useEffect(() => {
-        const defaultStringNumberValue = formatValueToStringNumber(defaultValue);
-        if (currentStringNumberValue !== defaultStringNumberValue) {
-            setCurrentStringNumberValue(defaultStringNumberValue);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
     const handleChangeText = (newValue) => {
         const newStringNumberValue = formatValueToStringNumber(newValue);
         const number = parseFloat(newStringNumberValue);
@@ -44,6 +36,14 @@ const NumberInput = ({ onChangeText, value, defaultValue, ...props }) => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
+    // set currentStringNumberValue as defaultValue prop if there is a differnce on first render only
+    useEffect(() => {
+        const defaultStringNumberValue = formatValueToStringNumber(defaultValue);
+        if (currentStringNumberValue !== defaultStringNumberValue) {
+            setCurrentStringNumberValue(defaultStringNumberValue);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     return (React.createElement(TextInput, { keyboardType: "numeric", value: currentStringNumberValue, onChangeText: handleChangeText, ...props }));
 };
 export default NumberInput;

package/src/components/NumberInput.tsx

@@ -31,19 +31,9 @@ const NumberInput: FC<Props> = ({
       }
     }
 
-    return "0";
+    return "";
   };
 
-  // set currentStringNumberValue as defaultValue prop if there is a differnce on first render only
-  useEffect(() => {
-    const defaultStringNumberValue = formatValueToStringNumber(defaultValue);
-
-    if (currentStringNumberValue !== defaultStringNumberValue) {
-      setCurrentStringNumberValue(defaultStringNumberValue);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const handleChangeText = (newValue: string) => {
     const newStringNumberValue = formatValueToStringNumber(newValue);
     const number = parseFloat(newStringNumberValue);
@@ -62,6 +52,16 @@ const NumberInput: FC<Props> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
 
+  // set currentStringNumberValue as defaultValue prop if there is a differnce on first render only
+  useEffect(() => {
+    const defaultStringNumberValue = formatValueToStringNumber(defaultValue);
+
+    if (currentStringNumberValue !== defaultStringNumberValue) {
+      setCurrentStringNumberValue(defaultStringNumberValue);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <TextInput
       keyboardType="numeric"

package/src/components/Picker/Picker.js

@@ -32,6 +32,7 @@ function normalizeOptions(options) {
 }
 const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
 const isIos = Platform.OS === "ios";
+const isWeb = Platform.OS === "web";
 const unstyledColor = "rgba(165, 173, 183, 1)";
 const disabledColor = "rgb(240, 240, 240)";
 const errorColor = "rgba(255, 69, 100, 1)";
@@ -191,7 +192,7 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
                 React.createElement(View, { style: styles.iosPickerContent },
                     React.createElement(Button, { Icon: Icon, type: "text", onPress: togglePickerVisible, style: styles.iosButton }, "Close"),
                     React.createElement(NativePicker, { style: styles.iosNativePicker, selectedValue: internalValue, onValueChange: handleValueChange }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value })))))))) : null,
-        !isIos && pickerVisible ? (React.createElement(NativePicker, { enabled: pickerVisible, selectedValue: internalValue, onValueChange: handleValueChange, style: styles.nonIosPicker, ref: androidPickerRef, onBlur: () => setPickerVisible(false) }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value }))))) : null));
+        !isIos && (pickerVisible || isWeb) ? (React.createElement(NativePicker, { enabled: !disabled, selectedValue: internalValue, onValueChange: handleValueChange, style: styles.nonIosPicker, ref: androidPickerRef, onBlur: () => setPickerVisible(false) }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value }))))) : null));
 };
 const styles = StyleSheet.create({
     marginsContainer: {

package/src/components/Picker/Picker.tsx

@@ -86,6 +86,8 @@ function normalizeOptions(options: PickerProps["options"]): PickerOption[] {
 
 const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
 const isIos = Platform.OS === "ios";
+const isWeb = Platform.OS === "web";
+
 const unstyledColor = "rgba(165, 173, 183, 1)";
 const disabledColor = "rgb(240, 240, 240)";
 const errorColor = "rgba(255, 69, 100, 1)";
@@ -383,9 +385,10 @@ const Picker: React.FC<PickerProps> = ({
       ) : null}
 
       {/* nonIosPicker */}
-      {!isIos && pickerVisible ? (
+      {/* Web version is collapsed by default, always show to allow direct expand */}
+      {!isIos && (pickerVisible || isWeb) ? (
         <NativePicker
-          enabled={pickerVisible}
+          enabled={!disabled}
           selectedValue={internalValue}
           onValueChange={handleValueChange}
           style={styles.nonIosPicker}

package/src/index.js

@@ -31,6 +31,7 @@ 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 { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
 /* 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,6 +51,8 @@ export {
   RadioButtonFieldGroup,
 } from "./components/RadioButton/index";
 
+export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
+
 /* Deprecated: Fix or Delete!  */
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
 export { default as Picker } from "./components/Picker/Picker";

package/src/mappings/DatePicker.js

@@ -31,7 +31,8 @@ const SEED_DATA_PROPS = {
         label: "Border Color",
     }),
     borderColorActive: createColorProp({
-        label: "Border Color",
+        label: "Active Border Color",
+        description: "Color of border when date picker is active",
     }),
     format: {
         label: "Format",

package/src/mappings/DatePicker.ts

@@ -43,7 +43,8 @@ const SEED_DATA_PROPS = {
     label: "Border Color",
   }),
   borderColorActive: createColorProp({
-    label: "Border Color",
+    label: "Active Border Color",
+    description: "Color of border when date picker is active",
   }),
   format: {
     label: "Format",

package/src/mappings/DeckSwiper.js

@@ -0,0 +1,48 @@
+import { COMPONENT_TYPES, Triggers, createActionProp, createStaticNumberProp, createStaticBoolProp, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Deck Swiper",
+    tag: "DeckSwiper",
+    description: "Deck swiper container",
+    category: COMPONENT_TYPES.swiper,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
+    layout: {
+        width: "100%",
+    },
+    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",
+        }),
+        startCardIndex: createStaticNumberProp({
+            label: "Start card index",
+            description: "Index of card to start swiping from",
+            defaultValue: 0,
+        }),
+        infiniteSwiping: createStaticBoolProp({
+            label: "Infinite swiping",
+            description: "Whether to infinitley loop through cards or not",
+        }),
+        verticalEnabled: createStaticBoolProp({
+            label: "Vertical swipe enabled",
+            description: "Whether cards should be swipeable vertically or not",
+            defaultValue: true,
+        }),
+        horizontalEnabled: createStaticBoolProp({
+            label: "Horizontal swipe enabled",
+            description: "Whether cards should be swipeable horizontally or not",
+            defaultValue: true,
+        }),
+        visibleCardCount: createStaticNumberProp({
+            label: "Visible card count",
+            description: "Number of cards visible behind (and including) the current card",
+            defaultValue: 1,
+            min: 1,
+            step: 1,
+        }),
+    },
+};

package/src/mappings/DeckSwiper.ts

@@ -0,0 +1,57 @@
+import {
+  COMPONENT_TYPES,
+  Triggers,
+  createActionProp,
+  createStaticNumberProp,
+  createStaticBoolProp,
+  BLOCK_STYLES_SECTIONS,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Deck Swiper",
+  tag: "DeckSwiper",
+  description: "Deck swiper container",
+  category: COMPONENT_TYPES.swiper,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  layout: {
+    width: "100%",
+  },
+  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",
+    }),
+    startCardIndex: createStaticNumberProp({
+      label: "Start card index",
+      description: "Index of card to start swiping from",
+      defaultValue: 0,
+    }),
+    infiniteSwiping: createStaticBoolProp({
+      label: "Infinite swiping",
+      description: "Whether to infinitley loop through cards or not",
+    }),
+    verticalEnabled: createStaticBoolProp({
+      label: "Vertical swipe enabled",
+      description: "Whether cards should be swipeable vertically or not",
+      defaultValue: true,
+    }),
+    horizontalEnabled: createStaticBoolProp({
+      label: "Horizontal swipe enabled",
+      description: "Whether cards should be swipeable horizontally or not",
+      defaultValue: true,
+    }),
+    visibleCardCount: createStaticNumberProp({
+      label: "Visible card count",
+      description:
+        "Number of cards visible behind (and including) the current card",
+      defaultValue: 1,
+      min: 1,
+      step: 1,
+    }),
+  },
+};

package/src/mappings/DeckSwiperCard.js

@@ -0,0 +1,16 @@
+import { COMPONENT_TYPES, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Deck Swiper Card",
+    tag: "DeckSwiperCard",
+    description: "Single Deck Swiper Card item to be used in DeckSwiper",
+    category: COMPONENT_TYPES.swiper,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+    layout: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 20,
+        borderWidth: 2,
+    },
+    props: {},
+};

package/src/mappings/DeckSwiperCard.ts

@@ -0,0 +1,20 @@
+import {
+  COMPONENT_TYPES,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Deck Swiper Card",
+  tag: "DeckSwiperCard",
+  description: "Single Deck Swiper Card item to be used in DeckSwiper",
+  category: COMPONENT_TYPES.swiper,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+  layout: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 20,
+    borderWidth: 2,
+  },
+  props: {},
+};