@draftbit/core 46.10.3-106fd0.2 → 46.10.3-17bcb4.2

package/src/components/ProgressIndicator.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+import StepIndicator from "./StepIndicator";
+import { withTheme } from "../theming";
+import themeT from "../styles/DefaultTheme";
+import { colorTypes } from "@draftbit/types";
+
+type Props = {
+  numberOfSteps: number;
+  currentStep: number;
+  currentStepStrokeWidth?: number;
+  stepStrokeCurrentColor?: colorTypes;
+  stepIndicatorSize?: number;
+  currentStepIndicatorSize?: number;
+  stepIndicatorCurrentColor?: colorTypes;
+  stepIndicatorLabelCurrentColor?: colorTypes;
+  stepIndicatorLabelFontSize?: number;
+  stepNumberFinishedColor?: colorTypes;
+  stepNumberUnfinishedColor?: colorTypes;
+  unfinishedColor?: colorTypes;
+  finishedColor?: colorTypes;
+  theme: typeof themeT;
+};
+
+const ProgressIndicator: React.FC<React.PropsWithChildren<Props>> = ({
+  numberOfSteps,
+  currentStep,
+  currentStepStrokeWidth = 3,
+  stepStrokeCurrentColor = "primary",
+  stepIndicatorSize,
+  currentStepIndicatorSize,
+  stepIndicatorCurrentColor,
+  stepIndicatorLabelCurrentColor,
+  stepIndicatorLabelFontSize = 12,
+  stepNumberFinishedColor = "strongInverse",
+  stepNumberUnfinishedColor = "primary",
+  unfinishedColor = "light",
+  finishedColor = "primary",
+  theme,
+}) => {
+  const currentPosition = currentStep - 1;
+  return (
+    <StepIndicator
+      stepCount={numberOfSteps}
+      currentPosition={currentPosition}
+      customStyles={{
+        stepIndicatorSize,
+        currentStepIndicatorSize: currentStepIndicatorSize
+          ? currentStepIndicatorSize
+          : stepIndicatorSize,
+        stepStrokeFinishedColor: finishedColor,
+        stepStrokeUnFinishedColor: unfinishedColor,
+        separatorFinishedColor: finishedColor,
+        separatorUnFinishedColor: unfinishedColor,
+        stepIndicatorFinishedColor: finishedColor,
+        stepIndicatorUnFinishedColor: unfinishedColor,
+        currentStepStrokeWidth,
+        stepStrokeCurrentColor:
+          stepStrokeCurrentColor || stepIndicatorCurrentColor,
+        stepIndicatorLabelUnFinishedColor: stepNumberUnfinishedColor,
+        stepIndicatorLabelFinishedColor: stepNumberFinishedColor,
+        stepIndicatorCurrentColor: stepIndicatorCurrentColor || unfinishedColor,
+        stepIndicatorLabelCurrentColor:
+          stepIndicatorLabelCurrentColor || stepNumberUnfinishedColor,
+        stepIndicatorLabelFontSize,
+        labelFontFamily: theme.typography.body1.fontFamily,
+      }}
+    />
+  );
+};
+
+export default withTheme(ProgressIndicator);

package/src/components/ResizeMode.js

@@ -0,0 +1 @@
+export {};

package/src/components/ResizeMode.ts

@@ -0,0 +1,7 @@
+export type ResizeModeType =
+  | "cover"
+  | "contain"
+  | "stretch"
+  | "repeat"
+  | "center"
+  | undefined;

package/src/components/Table/Table.js

@@ -1,7 +1,8 @@
 import React from "react";
 import { ScrollView, View, StyleSheet, } from "react-native";
-import { generateBorderStyles, TableStyleContext, } from "./index";
-export const Table = ({ borderWidth = 1, borderColor = "rgba(200, 200, 200, 1)", borderStyle = "solid", drawTopBorder = true, drawBottomBorder = false, drawStartBorder = false, drawEndBorder = false, cellVerticalPadding = 10, cellHorizontalPadding = 10, data, keyExtractor, renderItem, children: childrenProp, style, ...rest }) => {
+import { withTheme } from "../../theming";
+import { generateBorderStyles, TableStyleContext, } from "./TableCommon";
+const Table = ({ theme, borderWidth = 1, borderColor = theme.colors.divider, borderStyle = "solid", drawTopBorder = true, drawBottomBorder = false, drawStartBorder = false, drawEndBorder = false, cellVerticalPadding = 10, cellHorizontalPadding = 10, data, keyExtractor, renderItem, children: childrenProp, style, ...rest }) => {
     //Both 'renderItem' and 'data' are optional to allow direct children. But if one is included, both need to be included
     if ((data && !renderItem) || (renderItem && !data)) {
         throw new Error("'renderItem' and 'data' need to both be provided to render from 'data'. Either remove them entirley or include both");
@@ -89,3 +90,4 @@ const styles = StyleSheet.create({
         flex: 1,
     },
 });
+export default withTheme(Table);

package/src/components/Table/Table.tsx

@@ -7,23 +7,27 @@ import {
   StyleSheet,
   ScrollViewProps,
 } from "react-native";
+import { Theme } from "../../styles/DefaultTheme";
+import { withTheme } from "../../theming";
 import {
   generateBorderStyles,
   TableProps,
   TableStyleContext,
   TableStyleProps,
-} from "./index";
+} from "./TableCommon";
 
 export interface Props<T> extends TableProps, ScrollViewProps {
   data?: Array<T>;
   keyExtractor?: (item: T, index: number) => string;
   renderItem?: ({ item, index }: { item: T; index: number }) => JSX.Element;
   style?: StyleProp<ViewStyle>;
+  theme: Theme;
 }
 
-export const Table = <T extends object>({
+const Table = <T extends object>({
+  theme,
   borderWidth = 1,
-  borderColor = "rgba(200, 200, 200, 1)",
+  borderColor = theme.colors.divider,
   borderStyle = "solid",
   drawTopBorder = true,
   drawBottomBorder = false,
@@ -168,3 +172,5 @@ const styles = StyleSheet.create({
     flex: 1,
   },
 });
+
+export default withTheme(Table);

package/src/components/Table/TableCell.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { generateBorderStyles, TableStyleContext } from "./index";
+import { generateBorderStyles, TableStyleContext, } from "./TableCommon";
 const TableCell = ({ borderWidth, borderColor, borderStyle, drawTopBorder = false, drawBottomBorder = false, drawStartBorder = false, drawEndBorder = true, cellVerticalPadding, cellHorizontalPadding, children, style, }) => {
     const parentContextValue = React.useContext(TableStyleContext);
     const borderViewStyle = generateBorderStyles({

package/src/components/Table/TableCell.tsx

@@ -1,6 +1,10 @@
 import React from "react";
 import { View, StyleProp, ViewStyle, StyleSheet } from "react-native";
-import { generateBorderStyles, TableProps, TableStyleContext } from "./index";
+import {
+  generateBorderStyles,
+  TableProps,
+  TableStyleContext,
+} from "./TableCommon";
 
 export interface Props extends TableProps {
   style?: StyleProp<ViewStyle>;

package/src/components/Table/TableCommon.js

@@ -0,0 +1,12 @@
+import React from "react";
+export const TableStyleContext = React.createContext({});
+export function generateBorderStyles({ borderColor, borderWidth, borderStyle, drawTopBorder, drawBottomBorder, drawStartBorder, drawEndBorder, }) {
+    return {
+        borderColor,
+        borderStyle,
+        borderTopWidth: drawTopBorder ? borderWidth : 0,
+        borderBottomWidth: drawBottomBorder ? borderWidth : 0,
+        borderStartWidth: drawStartBorder ? borderWidth : 0,
+        borderEndWidth: drawEndBorder ? borderWidth : 0,
+    };
+}

package/src/components/Table/TableCommon.ts

@@ -0,0 +1,40 @@
+import React from "react";
+import { ViewStyle } from "react-native";
+
+type BorderStyle = "solid" | "dotted" | "dashed";
+
+export const TableStyleContext = React.createContext<TableStyleProps>({});
+
+export interface TableStyleProps {
+  borderWidth?: number;
+  borderColor?: string;
+  borderStyle?: BorderStyle;
+  cellVerticalPadding?: number;
+  cellHorizontalPadding?: number;
+}
+
+export interface TableProps extends TableStyleProps {
+  drawTopBorder?: boolean;
+  drawBottomBorder?: boolean;
+  drawStartBorder?: boolean;
+  drawEndBorder?: boolean;
+}
+
+export function generateBorderStyles({
+  borderColor,
+  borderWidth,
+  borderStyle,
+  drawTopBorder,
+  drawBottomBorder,
+  drawStartBorder,
+  drawEndBorder,
+}: TableProps): ViewStyle {
+  return {
+    borderColor,
+    borderStyle,
+    borderTopWidth: drawTopBorder ? borderWidth : 0,
+    borderBottomWidth: drawBottomBorder ? borderWidth : 0,
+    borderStartWidth: drawStartBorder ? borderWidth : 0,
+    borderEndWidth: drawEndBorder ? borderWidth : 0,
+  };
+}

package/src/components/Table/TableRow.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { generateBorderStyles, TableStyleContext, } from "./index";
+import { generateBorderStyles, TableStyleContext, } from "./TableCommon";
 import { withTheme } from "../../theming";
 const TableRow = ({ borderWidth, borderColor, borderStyle, drawTopBorder = false, drawBottomBorder = true, drawStartBorder = true, drawEndBorder = false, cellVerticalPadding, cellHorizontalPadding, isTableHeader = false, children, style, theme, }) => {
     const parentContextValue = React.useContext(TableStyleContext);

package/src/components/Table/TableRow.tsx

@@ -5,7 +5,7 @@ import {
   TableProps,
   TableStyleContext,
   TableStyleProps,
-} from "./index";
+} from "./TableCommon";
 import { Theme } from "../../styles/DefaultTheme";
 import { withTheme } from "../../theming";
 

package/src/components/Table/index.js

@@ -1,15 +1,3 @@
-import React from "react";
-export const TableStyleContext = React.createContext({});
-export function generateBorderStyles({ borderColor, borderWidth, borderStyle, drawTopBorder, drawBottomBorder, drawStartBorder, drawEndBorder, }) {
-    return {
-        borderColor,
-        borderStyle,
-        borderTopWidth: drawTopBorder ? borderWidth : 0,
-        borderBottomWidth: drawBottomBorder ? borderWidth : 0,
-        borderStartWidth: drawStartBorder ? borderWidth : 0,
-        borderEndWidth: drawEndBorder ? borderWidth : 0,
-    };
-}
-export { Table } from "./Table";
+export { default as Table } from "./Table";
 export { default as TableRow } from "./TableRow";
 export { default as TableCell } from "./TableCell";

package/src/components/Table/index.tsx

@@ -1,44 +1,3 @@
-import React from "react";
-import { ViewStyle } from "react-native";
-
-type BorderStyle = "solid" | "dotted" | "dashed";
-
-export const TableStyleContext = React.createContext<TableStyleProps>({});
-
-export interface TableStyleProps {
-  borderWidth?: number;
-  borderColor?: string;
-  borderStyle?: BorderStyle;
-  cellVerticalPadding?: number;
-  cellHorizontalPadding?: number;
-}
-
-export interface TableProps extends TableStyleProps {
-  drawTopBorder?: boolean;
-  drawBottomBorder?: boolean;
-  drawStartBorder?: boolean;
-  drawEndBorder?: boolean;
-}
-
-export function generateBorderStyles({
-  borderColor,
-  borderWidth,
-  borderStyle,
-  drawTopBorder,
-  drawBottomBorder,
-  drawStartBorder,
-  drawEndBorder,
-}: TableProps): ViewStyle {
-  return {
-    borderColor,
-    borderStyle,
-    borderTopWidth: drawTopBorder ? borderWidth : 0,
-    borderBottomWidth: drawBottomBorder ? borderWidth : 0,
-    borderStartWidth: drawStartBorder ? borderWidth : 0,
-    borderEndWidth: drawEndBorder ? borderWidth : 0,
-  };
-}
-
-export { Table } from "./Table";
+export { default as Table } from "./Table";
 export { default as TableRow } from "./TableRow";
 export { default as TableCell } from "./TableCell";

package/src/mappings/CardBlock.js

@@ -0,0 +1,123 @@
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, createElevationType, createNumColumnsType, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
+const SEED_DATA_PROPS = {
+    image: {
+        group: GROUPS.data,
+        label: "Image",
+        description: "Image",
+        formType: FORM_TYPES.image,
+        propType: PROP_TYPES.ASSET,
+        defaultValue: null,
+        editable: true,
+        required: false,
+    },
+    title: {
+        group: GROUPS.data,
+        label: "Title",
+        description: "Text to display",
+        formType: FORM_TYPES.string,
+        propType: PROP_TYPES.STRING,
+        defaultValue: "Beautiful West Coast Villa",
+        editable: true,
+        required: false,
+    },
+    leftDescription: {
+        group: GROUPS.data,
+        label: "Left description",
+        description: "Text to display on the left",
+        formType: FORM_TYPES.string,
+        propType: PROP_TYPES.STRING,
+        defaultValue: "San Diego",
+        editable: true,
+        required: false,
+    },
+    rightDescription: {
+        group: GROUPS.data,
+        label: "Right description",
+        description: "Text to display on the right",
+        formType: FORM_TYPES.string,
+        propType: PROP_TYPES.STRING,
+        defaultValue: "$100",
+        editable: true,
+        required: false,
+    },
+    aspectRatio: {
+        group: GROUPS.basic,
+        label: "Aspect ratio",
+        description: "Aspect ratio of the image",
+        formType: FORM_TYPES.aspectRatio,
+        propType: PROP_TYPES.NUMBER,
+        defaultValue: 1.5,
+        editable: true,
+        required: false,
+    },
+    titleCentered: {
+        group: GROUPS.basic,
+        label: "Title centered",
+        description: "Whether to center the title",
+        formType: FORM_TYPES.boolean,
+        propType: PROP_TYPES.BOOLEAN,
+        defaultValue: false,
+        editable: true,
+        required: false,
+    },
+    elevation: createElevationType(2),
+};
+export const SEED_DATA = [
+    {
+        name: "Small Card",
+        tag: "CardBlock",
+        description: "An elevated card with a title and description, that takes up one third of its container.",
+        category: COMPONENT_TYPES.card,
+        props: {
+            ...SEED_DATA_PROPS,
+            numColumns: createNumColumnsType({
+                defaultValue: 1,
+            }),
+        },
+    },
+    {
+        name: "Medium Block Card",
+        tag: "CardBlock",
+        description: "An elevated card with a title and description, that takes up one half of its container.",
+        category: COMPONENT_TYPES.card,
+        props: {
+            ...SEED_DATA_PROPS,
+            icon: {
+                group: GROUPS.basic,
+                label: "Icon",
+                description: "Icon to display on the top right",
+                formType: FORM_TYPES.icon,
+                propType: PROP_TYPES.STRING,
+                defaultValue: null,
+                editable: true,
+                required: true,
+            },
+            numColumns: createNumColumnsType({
+                defaultValue: 2,
+            }),
+        },
+    },
+    {
+        name: "Large Block Card",
+        tag: "CardBlock",
+        description: "An elevated card with a title and description, that takes up the full width its container.",
+        category: COMPONENT_TYPES.card,
+        stylesPanelSections: BLOCK_STYLES_SECTIONS,
+        props: {
+            ...SEED_DATA_PROPS,
+            icon: {
+                group: GROUPS.basic,
+                label: "Icon",
+                description: "Icon to display on the top right",
+                formType: FORM_TYPES.icon,
+                propType: PROP_TYPES.STRING,
+                defaultValue: null,
+                editable: true,
+                required: true,
+            },
+            numColumns: createNumColumnsType({
+                defaultValue: 3,
+            }),
+        },
+    },
+];

package/src/mappings/CardBlock.ts

@@ -0,0 +1,136 @@
+import {
+  GROUPS,
+  COMPONENT_TYPES,
+  FORM_TYPES,
+  PROP_TYPES,
+  createElevationType,
+  createNumColumnsType,
+  BLOCK_STYLES_SECTIONS,
+} from "@draftbit/types";
+
+const SEED_DATA_PROPS = {
+  image: {
+    group: GROUPS.data,
+    label: "Image",
+    description: "Image",
+    formType: FORM_TYPES.image,
+    propType: PROP_TYPES.ASSET,
+    defaultValue: null,
+    editable: true,
+    required: false,
+  },
+  title: {
+    group: GROUPS.data,
+    label: "Title",
+    description: "Text to display",
+    formType: FORM_TYPES.string,
+    propType: PROP_TYPES.STRING,
+    defaultValue: "Beautiful West Coast Villa",
+    editable: true,
+    required: false,
+  },
+  leftDescription: {
+    group: GROUPS.data,
+    label: "Left description",
+    description: "Text to display on the left",
+    formType: FORM_TYPES.string,
+    propType: PROP_TYPES.STRING,
+    defaultValue: "San Diego",
+    editable: true,
+    required: false,
+  },
+  rightDescription: {
+    group: GROUPS.data,
+    label: "Right description",
+    description: "Text to display on the right",
+    formType: FORM_TYPES.string,
+    propType: PROP_TYPES.STRING,
+    defaultValue: "$100",
+    editable: true,
+    required: false,
+  },
+  aspectRatio: {
+    group: GROUPS.basic,
+    label: "Aspect ratio",
+    description: "Aspect ratio of the image",
+    formType: FORM_TYPES.aspectRatio,
+    propType: PROP_TYPES.NUMBER,
+    defaultValue: 1.5,
+    editable: true,
+    required: false,
+  },
+  titleCentered: {
+    group: GROUPS.basic,
+    label: "Title centered",
+    description: "Whether to center the title",
+    formType: FORM_TYPES.boolean,
+    propType: PROP_TYPES.BOOLEAN,
+    defaultValue: false,
+    editable: true,
+    required: false,
+  },
+  elevation: createElevationType(2),
+};
+
+export const SEED_DATA = [
+  {
+    name: "Small Card",
+    tag: "CardBlock",
+    description:
+      "An elevated card with a title and description, that takes up one third of its container.",
+    category: COMPONENT_TYPES.card,
+    props: {
+      ...SEED_DATA_PROPS,
+      numColumns: createNumColumnsType({
+        defaultValue: 1,
+      }),
+    },
+  },
+  {
+    name: "Medium Block Card",
+    tag: "CardBlock",
+    description:
+      "An elevated card with a title and description, that takes up one half of its container.",
+    category: COMPONENT_TYPES.card,
+    props: {
+      ...SEED_DATA_PROPS,
+      icon: {
+        group: GROUPS.basic,
+        label: "Icon",
+        description: "Icon to display on the top right",
+        formType: FORM_TYPES.icon,
+        propType: PROP_TYPES.STRING,
+        defaultValue: null,
+        editable: true,
+        required: true,
+      },
+      numColumns: createNumColumnsType({
+        defaultValue: 2,
+      }),
+    },
+  },
+  {
+    name: "Large Block Card",
+    tag: "CardBlock",
+    description:
+      "An elevated card with a title and description, that takes up the full width its container.",
+    category: COMPONENT_TYPES.card,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
+    props: {
+      ...SEED_DATA_PROPS,
+      icon: {
+        group: GROUPS.basic,
+        label: "Icon",
+        description: "Icon to display on the top right",
+        formType: FORM_TYPES.icon,
+        propType: PROP_TYPES.STRING,
+        defaultValue: null,
+        editable: true,
+        required: true,
+      },
+      numColumns: createNumColumnsType({
+        defaultValue: 3,
+      }),
+    },
+  },
+];

package/src/mappings/CardContainer.js

@@ -0,0 +1,104 @@
+import { GROUPS, FORM_TYPES, PROP_TYPES, COMPONENT_TYPES, createElevationType, createNumColumnsType, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
+const SEED_DATA_PROPS = {
+    image: {
+        label: "Image",
+        description: "Image",
+        formType: FORM_TYPES.image,
+        propType: PROP_TYPES.ASSET,
+        defaultValue: null,
+        editable: true,
+        required: true,
+        group: GROUPS.data,
+    },
+    title: {
+        label: "Title",
+        description: "Text to display",
+        formType: FORM_TYPES.string,
+        propType: PROP_TYPES.STRING,
+        defaultValue: "Beautiful West Coast Villa",
+        editable: true,
+        required: false,
+        group: GROUPS.data,
+    },
+    leftDescription: {
+        label: "Left description",
+        description: "Text to display on the left",
+        formType: FORM_TYPES.string,
+        propType: PROP_TYPES.STRING,
+        defaultValue: "San Diego",
+        editable: true,
+        required: false,
+        group: GROUPS.data,
+    },
+    rightDescription: {
+        label: "Right description",
+        description: "Text to display on the right",
+        formType: FORM_TYPES.string,
+        propType: PROP_TYPES.STRING,
+        defaultValue: "$100",
+        editable: true,
+        required: false,
+        group: GROUPS.data,
+    },
+    icon: {
+        label: "Icon",
+        description: "Icon to display on the top right",
+        formType: FORM_TYPES.icon,
+        propType: PROP_TYPES.STRING /* OR ASSET TODO TEST ME */,
+        defaultValue: null,
+        editable: true,
+        required: false,
+        group: GROUPS.basic,
+    },
+    aspectRatio: {
+        label: "Aspect ratio",
+        description: "Aspect ratio of the image",
+        formType: FORM_TYPES.aspectRatio,
+        propType: PROP_TYPES.NUMBER,
+        defaultValue: 1.5,
+        editable: true,
+        required: false,
+        group: GROUPS.basic,
+    },
+    textCentered: {
+        label: "Centered Text",
+        description: "Whether to center the text",
+        formType: FORM_TYPES.boolean,
+        propType: PROP_TYPES.BOOLEAN,
+        defaultValue: false,
+        editable: true,
+        required: false,
+        group: GROUPS.basic,
+    },
+    elevation: createElevationType(2),
+};
+export const SEED_DATA = [
+    {
+        name: "Medium Card",
+        tag: "CardContainer",
+        description: "An elevated card with a title and description, that takes up half of its container.",
+        category: COMPONENT_TYPES.card,
+        stylesPanelSections: BLOCK_STYLES_SECTIONS,
+        layout: null,
+        props: {
+            ...SEED_DATA_PROPS,
+            numColumns: createNumColumnsType({
+                defaultValue: 2,
+            }),
+        },
+    },
+    {
+        name: "Large Card",
+        tag: "CardContainer",
+        description: "An elevated card with a title and description, that takes up its full container.",
+        category: COMPONENT_TYPES.card,
+        stylesPanelSections: BLOCK_STYLES_SECTIONS,
+        layout: null,
+        props: {
+            ...SEED_DATA_PROPS,
+            numColumns: createNumColumnsType({
+                defaultValue: 3,
+            }),
+        },
+    },
+];