@draftbit/core 46.10.3-4470c4.2 → 46.10.3-61c083.2

package/src/components/DeprecatedFAB.tsx

@@ -1,231 +0,0 @@
-import * as React from "react";
-import {
-  ActivityIndicator,
-  View,
-  StyleSheet,
-  StyleProp,
-  ViewStyle,
-  TextStyle,
-  Pressable,
-  PressableProps,
-} from "react-native";
-import color from "color";
-import Config from "./Config";
-import Text from "./Text";
-import Elevation from "./Elevation";
-import { withTheme } from "../theming";
-
-import type { Theme } from "../styles/DefaultTheme";
-import type { IconSlot } from "../interfaces/Icon";
-
-/**
- * A floating action button represents the primary action in an application.
- *
- * <div class="screenshots">
- *   <img src="screenshots/fab-1.png" />
- *   <img src="screenshots/fab-2.png" />
- * </div>
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { StyleSheet } from 'react-native';
- * import { FAB } from '@draftbit/ui';
- *
- * const MyComponent = () => (
- *   <FAB
- *     style={styles.fab}
- *     type="outline"
- *     icon="add"
- *     onPress={() => console.log('Pressed')}
- *   />
- * );
- *
- * const styles = StyleSheet.create({
- *   fab: {
- *     position: 'absolute',
- *     margin: 16,
- *     right: 0,
- *     bottom: 0,
- *   },
- * })
- *
- * export default MyComponent;
- * ```
- */
-
-type Props = {
-  disabled?: boolean;
-  type?: "solid" | "extended" | "outline" | "fixed" | "standard";
-  loading?: boolean;
-  icon?: string;
-  color?: string;
-  label?: string;
-  onPress: () => void;
-  elevation?: number;
-  theme: Theme;
-  style?: StyleProp<ViewStyle>;
-} & PressableProps &
-  IconSlot;
-
-const FAB: React.FC<React.PropsWithChildren<Props>> = ({
-  Icon,
-  icon,
-  disabled = false,
-  type = "solid",
-  loading = false,
-  color: colorOverride,
-  label,
-  onPress,
-  elevation = 0,
-  style,
-  theme: { colors, disabledOpacity, roundness, typography },
-  ...rest
-}) => {
-  let backgroundColor, borderColor, textColor, borderWidth;
-  const buttonColor = colorOverride || colors.primary;
-
-  if (type === "standard" || type === "extended" || type === "fixed") {
-    backgroundColor = buttonColor;
-
-    if (disabled) {
-      textColor = color(colors.surface).alpha(disabledOpacity).rgb().string();
-    } else {
-      textColor = colors.surface;
-    }
-  } else {
-    backgroundColor = "transparent";
-
-    if (disabled) {
-      textColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
-    } else {
-      textColor = buttonColor;
-    }
-  }
-
-  if (type === "outline") {
-    if (disabled) {
-      borderColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
-    } else {
-      borderColor = buttonColor;
-    }
-    borderWidth = StyleSheet.hairlineWidth;
-  } else {
-    borderColor = "transparent";
-    borderWidth = 0;
-  }
-
-  const buttonStyle: StyleProp<ViewStyle> = {
-    backgroundColor,
-    borderColor,
-    borderWidth,
-    borderRadius: roundness,
-    alignItems: "center",
-    justifyContent: "center",
-  };
-
-  const buttonStyles: StyleProp<ViewStyle>[] = [styles.button, buttonStyle];
-
-  const contentStyle: StyleProp<ViewStyle>[] = [styles.content];
-
-  const textStyle: StyleProp<TextStyle> = {
-    textAlign: "center",
-    color: textColor,
-  };
-
-  const iconStyle: StyleProp<ViewStyle>[] = [
-    styles.icon,
-    {
-      width: Config.buttonIconSize,
-    },
-  ];
-
-  if (type === "standard" || type === "outline") {
-    buttonStyle.width = Config.FABSize;
-    buttonStyle.height = Config.FABSize;
-    buttonStyle.borderRadius = Config.FABBorderRadius;
-
-    contentStyle.push({
-      width: Config.FABSize,
-      height: Config.FABSize,
-    });
-  }
-
-  if (type === "extended" || type === "fixed") {
-    iconStyle.push({
-      marginLeft: 16,
-      marginRight: -8,
-    });
-
-    textStyle.margin = 16;
-  }
-
-  if (type === "fixed") {
-    buttonStyles.push({
-      height: Config.FABFixedHeight,
-      alignSelf: "stretch",
-    });
-  }
-
-  return (
-    <Elevation style={[{ elevation }, style]}>
-      <Pressable
-        {...rest}
-        onPress={onPress}
-        accessibilityState={{ disabled }}
-        accessibilityRole="button"
-        disabled={disabled || loading}
-        style={buttonStyles}
-      >
-        <View style={styles.content}>
-          {icon && loading !== true ? (
-            <View style={iconStyle}>
-              <Icon
-                name={icon}
-                size={Config.buttonIconSize}
-                color={textColor}
-              />
-            </View>
-          ) : null}
-          {loading ? (
-            <ActivityIndicator
-              size="small"
-              color={textColor}
-              style={iconStyle}
-            />
-          ) : null}
-          {label ? (
-            <Text numberOfLines={1} style={[textStyle, typography.button]}>
-              {label}
-            </Text>
-          ) : null}
-        </View>
-      </Pressable>
-    </Elevation>
-  );
-};
-
-const styles = StyleSheet.create({
-  button: {
-    borderStyle: "solid",
-  },
-  content: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  icon: {
-    alignItems: "center",
-    justifyContent: "center",
-    width: Config.buttonIconSize,
-  },
-  fixed: {
-    left: 0,
-    right: 0,
-    bottom: 0,
-    height: 64,
-    borderRadius: 0,
-  },
-});
-
-export default withTheme(FAB);

package/src/components/ProgressIndicator.js

@@ -1,27 +0,0 @@
-import * as React from "react";
-import StepIndicator from "./StepIndicator";
-import { withTheme } from "../theming";
-const ProgressIndicator = ({ 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 (React.createElement(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/ProgressIndicator.tsx

@@ -1,71 +0,0 @@
-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

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

package/src/components/ResizeMode.ts

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

package/src/mappings/CardBlock.js

@@ -1,123 +0,0 @@
-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

@@ -1,136 +0,0 @@
-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

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