@draftbit/core 46.10.3-47314f.2 → 46.10.3-6c7505.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/Accordion.js

@@ -1,50 +0,0 @@
-import { COMPONENT_TYPES, createNumberProp, createIconProp, createTextProp, createStaticBoolProp, createColorProp, StylesPanelSections, } from "@draftbit/types";
-export const SEED_DATA = {
-    name: "Accordion",
-    tag: "AccordionGroup",
-    description: "An expandable container containing components",
-    category: COMPONENT_TYPES.container,
-    stylesPanelSections: [
-        StylesPanelSections.LayoutSelectedItem,
-        StylesPanelSections.Background,
-        StylesPanelSections.Size,
-        StylesPanelSections.MarginsAndPaddings,
-        StylesPanelSections.Position,
-        StylesPanelSections.Borders,
-        StylesPanelSections.Effects,
-    ],
-    layout: {
-        paddingTop: 8,
-        paddingRight: 8,
-        paddingBottom: 8,
-        paddingLeft: 8,
-        fontSize: 16,
-    },
-    props: {
-        label: createTextProp({
-            label: "Label",
-        }),
-        expanded: createStaticBoolProp({
-            label: "Expanded",
-            description: "Whether the AccordionGroup should be initaially expanded or not",
-        }),
-        openColor: createColorProp({
-            label: "Open text color",
-        }),
-        closedColor: createColorProp({
-            label: "Closed text color",
-        }),
-        caretColor: createColorProp({
-            label: "Caret color",
-        }),
-        caretSize: createNumberProp({
-            label: "Caret size",
-            defaultValue: 24,
-        }),
-        icon: createIconProp(),
-        iconSize: createNumberProp({
-            label: "Icon size",
-            defaultValue: 24,
-        }),
-    },
-};

package/src/mappings/Accordion.ts

@@ -1,60 +0,0 @@
-import {
-  COMPONENT_TYPES,
-  createNumberProp,
-  createIconProp,
-  createTextProp,
-  createStaticBoolProp,
-  createColorProp,
-  StylesPanelSections,
-} from "@draftbit/types";
-
-export const SEED_DATA = {
-  name: "Accordion",
-  tag: "AccordionGroup",
-  description: "An expandable container containing components",
-  category: COMPONENT_TYPES.container,
-  stylesPanelSections: [
-    StylesPanelSections.LayoutSelectedItem,
-    StylesPanelSections.Background,
-    StylesPanelSections.Size,
-    StylesPanelSections.MarginsAndPaddings,
-    StylesPanelSections.Position,
-    StylesPanelSections.Borders,
-    StylesPanelSections.Effects,
-  ],
-  layout: {
-    paddingTop: 8,
-    paddingRight: 8,
-    paddingBottom: 8,
-    paddingLeft: 8,
-    fontSize: 16,
-  },
-  props: {
-    label: createTextProp({
-      label: "Label",
-    }),
-    expanded: createStaticBoolProp({
-      label: "Expanded",
-      description:
-        "Whether the AccordionGroup should be initaially expanded or not",
-    }),
-    openColor: createColorProp({
-      label: "Open text color",
-    }),
-    closedColor: createColorProp({
-      label: "Closed text color",
-    }),
-    caretColor: createColorProp({
-      label: "Caret color",
-    }),
-    caretSize: createNumberProp({
-      label: "Caret size",
-      defaultValue: 24,
-    }),
-    icon: createIconProp(),
-    iconSize: createNumberProp({
-      label: "Icon size",
-      defaultValue: 24,
-    }),
-  },
-};

package/src/mappings/AccordionItem.js

@@ -1,17 +0,0 @@
-import { COMPONENT_TYPES, createIconProp, createTextProp, createColorProp, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
-export const SEED_DATA = {
-    name: "Accordion Item",
-    tag: "AccordionItem",
-    description: "Item to be used in Accordion",
-    category: COMPONENT_TYPES.deprecated,
-    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
-    props: {
-        icon: createIconProp(),
-        label: createTextProp({
-            label: "Item label",
-        }),
-        iconColor: createColorProp({
-            label: "Icon color",
-        }),
-    },
-};

package/src/mappings/AccordionItem.ts

@@ -1,24 +0,0 @@
-import {
-  COMPONENT_TYPES,
-  createIconProp,
-  createTextProp,
-  createColorProp,
-  CONTAINER_COMPONENT_STYLES_SECTIONS,
-} from "@draftbit/types";
-
-export const SEED_DATA = {
-  name: "Accordion Item",
-  tag: "AccordionItem",
-  description: "Item to be used in Accordion",
-  category: COMPONENT_TYPES.deprecated,
-  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
-  props: {
-    icon: createIconProp(),
-    label: createTextProp({
-      label: "Item label",
-    }),
-    iconColor: createColorProp({
-      label: "Icon color",
-    }),
-  },
-};

package/src/mappings/ActionSheet.js

@@ -1,17 +0,0 @@
-import { COMPONENT_TYPES, createStaticBoolProp, GROUPS, StylesPanelSections, } from "@draftbit/types";
-export const SEED_DATA = {
-    name: "Action Sheet",
-    tag: "ActionSheet",
-    description: "Action Sheet container",
-    category: COMPONENT_TYPES.actionsheet,
-    stylesPanelSections: [
-        StylesPanelSections.Margins,
-        StylesPanelSections.Effects,
-    ],
-    props: {
-        visible: createStaticBoolProp({
-            group: GROUPS.data,
-            label: "Show Action Sheet",
-        }),
-    },
-};

package/src/mappings/ActionSheet.ts

@@ -1,23 +0,0 @@
-import {
-  COMPONENT_TYPES,
-  createStaticBoolProp,
-  GROUPS,
-  StylesPanelSections,
-} from "@draftbit/types";
-
-export const SEED_DATA = {
-  name: "Action Sheet",
-  tag: "ActionSheet",
-  description: "Action Sheet container",
-  category: COMPONENT_TYPES.actionsheet,
-  stylesPanelSections: [
-    StylesPanelSections.Margins,
-    StylesPanelSections.Effects,
-  ],
-  props: {
-    visible: createStaticBoolProp({
-      group: GROUPS.data,
-      label: "Show Action Sheet",
-    }),
-  },
-};

package/src/mappings/ActionSheetCancel.js

@@ -1,23 +0,0 @@
-import { COMPONENT_TYPES, createActionProp, createColorProp, createTextProp, GROUPS, Triggers, StylesPanelSections, } from "@draftbit/types";
-export const SEED_DATA = {
-    name: "Action Sheet Cancel",
-    tag: "ActionSheetCancel",
-    description: "Action Sheet cancel",
-    stylesPanelSections: [
-        StylesPanelSections.Margins,
-        StylesPanelSections.Effects,
-    ],
-    category: COMPONENT_TYPES.actionsheet,
-    triggers: [Triggers.OnPress],
-    props: {
-        onPress: createActionProp(),
-        label: createTextProp({
-            group: GROUPS.basic,
-            label: "Label",
-            defaultValue: "Cancel",
-        }),
-        color: createColorProp({
-            label: "Font Color",
-        }),
-    },
-};

package/src/mappings/ActionSheetCancel.ts

@@ -1,32 +0,0 @@
-import {
-  COMPONENT_TYPES,
-  createActionProp,
-  createColorProp,
-  createTextProp,
-  GROUPS,
-  Triggers,
-  StylesPanelSections,
-} from "@draftbit/types";
-
-export const SEED_DATA = {
-  name: "Action Sheet Cancel",
-  tag: "ActionSheetCancel",
-  description: "Action Sheet cancel",
-  stylesPanelSections: [
-    StylesPanelSections.Margins,
-    StylesPanelSections.Effects,
-  ],
-  category: COMPONENT_TYPES.actionsheet,
-  triggers: [Triggers.OnPress],
-  props: {
-    onPress: createActionProp(),
-    label: createTextProp({
-      group: GROUPS.basic,
-      label: "Label",
-      defaultValue: "Cancel",
-    }),
-    color: createColorProp({
-      label: "Font Color",
-    }),
-  },
-};

package/src/mappings/ActionSheetItem.js

@@ -1,27 +0,0 @@
-import { COMPONENT_TYPES, createActionProp, createColorProp, createTextProp, GROUPS, Triggers, StylesPanelSections, } from "@draftbit/types";
-export const SEED_DATA = {
-    name: "Action Sheet Item",
-    tag: "ActionSheetItem",
-    description: "Action Sheet item",
-    category: COMPONENT_TYPES.actionsheet,
-    stylesPanelSections: [
-        StylesPanelSections.Margins,
-        StylesPanelSections.Effects,
-    ],
-    triggers: [Triggers.OnPress],
-    layout: {
-        textAlign: "center",
-    },
-    props: {
-        onPress: createActionProp(),
-        label: createTextProp({
-            group: GROUPS.basic,
-            label: "Label",
-            defaultValue: "Option",
-        }),
-        color: createColorProp({
-            label: "Font Color",
-            defaultValue: "strong",
-        }),
-    },
-};

package/src/mappings/ActionSheetItem.ts

@@ -1,36 +0,0 @@
-import {
-  COMPONENT_TYPES,
-  createActionProp,
-  createColorProp,
-  createTextProp,
-  GROUPS,
-  Triggers,
-  StylesPanelSections,
-} from "@draftbit/types";
-
-export const SEED_DATA = {
-  name: "Action Sheet Item",
-  tag: "ActionSheetItem",
-  description: "Action Sheet item",
-  category: COMPONENT_TYPES.actionsheet,
-  stylesPanelSections: [
-    StylesPanelSections.Margins,
-    StylesPanelSections.Effects,
-  ],
-  triggers: [Triggers.OnPress],
-  layout: {
-    textAlign: "center",
-  },
-  props: {
-    onPress: createActionProp(),
-    label: createTextProp({
-      group: GROUPS.basic,
-      label: "Label",
-      defaultValue: "Option",
-    }),
-    color: createColorProp({
-      label: "Font Color",
-      defaultValue: "strong",
-    }),
-  },
-};