@draftbit/core 46.10.3-fb35c9.2 → 46.10.3-fbd333.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/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,
+            }),
+        },
+    },
+];

package/src/mappings/CardContainer.ts

@@ -0,0 +1,116 @@
+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,
+      }),
+    },
+  },
+];

package/src/mappings/CardContainerRating.js

@@ -0,0 +1,126 @@
+import { GROUPS, FORM_TYPES, PROP_TYPES, COMPONENT_TYPES, createElevationType, 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,
+    },
+    icon: {
+        group: GROUPS.basic,
+        label: "Icon",
+        description: "Icon to display on the top right",
+        formType: FORM_TYPES.icon,
+        propType: PROP_TYPES.ASSET,
+        defaultValue: null,
+        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,
+    },
+    rating: {
+        group: GROUPS.data,
+        label: "Rating",
+        description: "Number of stars to show. A number 0-5.",
+        formType: FORM_TYPES.number,
+        propType: PROP_TYPES.NUMBER,
+        defaultValue: 5,
+        min: 0,
+        max: 5,
+        step: 1,
+        precision: 0,
+        editable: true,
+        required: false,
+    },
+    elevation: createElevationType(2),
+};
+export const SEED_DATA = [
+    {
+        name: "Medium Card (Rating)",
+        tag: "CardContainerRating",
+        description: "An elevated card with a title and description, that takes up half of its container.",
+        category: COMPONENT_TYPES.card,
+        stylesPanelSections: BLOCK_STYLES_SECTIONS,
+        preview_image_url: "{CLOUDINARY_URL}/Card_ContainerRating_2col.png",
+        supports_list_render: true,
+        props: {
+            ...SEED_DATA_PROPS,
+            numColumns: {
+                label: "Number of Columns",
+                description: "Numbre of columns",
+                group: GROUPS.uncategorized,
+                formType: FORM_TYPES.number,
+                propType: PROP_TYPES.NUMBER,
+                defaultValue: 2,
+                editable: false,
+                required: false,
+            },
+        },
+        layout: {},
+    },
+    {
+        name: "Large Card (Rating)",
+        tag: "CardContainerRating",
+        description: "An elevated card with a title and description, that takes up its full container.",
+        category: COMPONENT_TYPES.card,
+        stylesPanelSections: BLOCK_STYLES_SECTIONS,
+        preview_image_url: "{CLOUDINARY_URL}/Card_ContainerRating_3col.png",
+        supports_list_render: true,
+        props: {
+            ...SEED_DATA_PROPS,
+            numColumns: {
+                label: "Number of Columns",
+                description: "Numbre of columns",
+                group: GROUPS.uncategorized,
+                formType: FORM_TYPES.number,
+                propType: PROP_TYPES.NUMBER,
+                defaultValue: 3,
+                editable: false,
+                required: false,
+            },
+        },
+        layout: {},
+    },
+];