@draftbit/core 46.1.4 → 46.2.1-39f6d9.3

package/src/styles/fonts.js

@@ -0,0 +1,62 @@
+/* https://github.com/callstack/react-native-paper/blob/main/src/styles/fonts.tsx */
+import { Platform } from "react-native";
+const fontConfig = {
+    web: {
+        regular: {
+            fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+            fontWeight: "400",
+        },
+        medium: {
+            fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+            fontWeight: "500",
+        },
+        light: {
+            fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+            fontWeight: "300",
+        },
+        thin: {
+            fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+            fontWeight: "100",
+        },
+    },
+    ios: {
+        regular: {
+            fontFamily: "System",
+            fontWeight: "400",
+        },
+        medium: {
+            fontFamily: "System",
+            fontWeight: "500",
+        },
+        light: {
+            fontFamily: "System",
+            fontWeight: "300",
+        },
+        thin: {
+            fontFamily: "System",
+            fontWeight: "100",
+        },
+    },
+    default: {
+        regular: {
+            fontFamily: "sans-serif",
+            fontWeight: "normal",
+        },
+        medium: {
+            fontFamily: "sans-serif-medium",
+            fontWeight: "normal",
+        },
+        light: {
+            fontFamily: "sans-serif-light",
+            fontWeight: "normal",
+        },
+        thin: {
+            fontFamily: "sans-serif-thin",
+            fontWeight: "normal",
+        },
+    },
+};
+export default function configureFonts(config) {
+    const fonts = Platform.select({ ...fontConfig, ...config });
+    return fonts;
+}

package/src/styles/overlay.js

@@ -0,0 +1,60 @@
+/* Copied from https://github.com/callstack/react-native-paper/blob/main/src/styles/overlay.tsx */
+import color from "color";
+import { Animated } from "react-native";
+import DarkTheme from "./DarkTheme";
+const isAnimatedValue = (it) => it instanceof Animated.Value;
+export default function overlay(elevation, surfaceColor = DarkTheme.colors.surface) {
+    if (isAnimatedValue(elevation)) {
+        const inputRange = [0, 1, 2, 3, 8, 24];
+        // @ts-expect-error: TS doesn't seem to refine the type correctly
+        return elevation.interpolate({
+            inputRange,
+            outputRange: inputRange.map((e) => {
+                return calculateColor(surfaceColor, e);
+            }),
+        });
+    }
+    // @ts-expect-error: TS doesn't seem to refine the type correctly
+    return calculateColor(surfaceColor, elevation);
+}
+function calculateColor(surfaceColor, elevation = 1) {
+    let overlayTransparency;
+    if (elevation >= 1 && elevation <= 24) {
+        overlayTransparency = elevationOverlayTransparency[elevation];
+    }
+    else if (elevation > 24) {
+        overlayTransparency = elevationOverlayTransparency[24];
+    }
+    else {
+        overlayTransparency = elevationOverlayTransparency[1];
+    }
+    return color(surfaceColor)
+        .mix(color("white"), overlayTransparency * 0.01)
+        .hex();
+}
+const elevationOverlayTransparency = {
+    1: 5,
+    2: 7,
+    3: 8,
+    4: 9,
+    5: 10,
+    6: 11,
+    7: 11.5,
+    8: 12,
+    9: 12.5,
+    10: 13,
+    11: 13.5,
+    12: 14,
+    13: 14.25,
+    14: 14.5,
+    15: 14.75,
+    16: 15,
+    17: 15.12,
+    18: 15.24,
+    19: 15.36,
+    20: 15.48,
+    21: 15.6,
+    22: 15.72,
+    23: 15.84,
+    24: 16,
+};

package/src/styles/shadow.js

@@ -0,0 +1,51 @@
+import { Animated } from "react-native";
+const SHADOW_COLOR = "#000";
+const SHADOW_OPACITY = 0.24;
+export default function shadow(elevation = 0) {
+    if (elevation instanceof Animated.Value) {
+        const inputRange = [0, 1, 2, 3, 8, 24];
+        return {
+            shadowColor: SHADOW_COLOR,
+            shadowOffset: {
+                width: new Animated.Value(0),
+                height: elevation.interpolate({
+                    inputRange,
+                    outputRange: [0, 0.5, 0.75, 2, 7, 23],
+                }),
+            },
+            shadowOpacity: new Animated.Value(SHADOW_OPACITY),
+            shadowRadius: elevation.interpolate({
+                inputRange,
+                outputRange: [0, 0.75, 1.5, 3, 8, 24],
+            }),
+        };
+    }
+    else {
+        if (elevation === 0) {
+            return {};
+        }
+        let height, radius;
+        switch (elevation) {
+            case 1:
+                height = 0.5;
+                radius = 0.75;
+                break;
+            case 2:
+                height = 0.75;
+                radius = 1.5;
+                break;
+            default:
+                height = elevation - 1;
+                radius = elevation;
+        }
+        return {
+            shadowColor: SHADOW_COLOR,
+            shadowOffset: {
+                width: 0,
+                height,
+            },
+            shadowOpacity: SHADOW_OPACITY,
+            shadowRadius: radius,
+        };
+    }
+}

package/src/theming.js

@@ -0,0 +1,3 @@
+import { createTheming } from "@draftbit/react-theme-provider";
+import DefaultTheme from "./styles/DefaultTheme";
+export const { ThemeProvider, withTheme, useTheme } = createTheming(DefaultTheme);

package/src/utilities.js

@@ -0,0 +1,102 @@
+import { StyleSheet } from "react-native";
+import { isString, isNumber, pick, pickBy, identity } from "lodash";
+export function extractStyles(style) {
+    const { color, fontFamily, fontWeight, fontSize, lineHeight, letterSpacing, textTransform, textAlign, textDecorationLine, textDecorationColor, textDecorationStyle, ...viewStyles } = StyleSheet.flatten(style || {});
+    const textStyles = {
+        color,
+        fontFamily,
+        fontWeight,
+        fontSize,
+        lineHeight,
+        letterSpacing,
+        textTransform,
+        textAlign,
+        textDecorationLine,
+        textDecorationColor,
+        textDecorationStyle,
+    };
+    return { viewStyles, textStyles };
+}
+export const borderStyleNames = [
+    "borderRadius",
+    "borderBottomColor",
+    "borderBottomEndRadius",
+    "borderBottomLeftRadius",
+    "borderBottomRightRadius",
+    "borderBottomStartRadius",
+    "borderBottomWidth",
+    "borderColor",
+    "borderEndColor",
+    "borderLeftColor",
+    "borderLeftWidth",
+    "borderRadius",
+    "borderRightColor",
+    "borderRightWidth",
+    "borderStartColor",
+    "borderStyle",
+    "borderTopColor",
+    "borderTopEndRadius",
+    "borderTopLeftRadius",
+    "borderTopRightRadius",
+    "borderTopStartRadius",
+    "borderTopWidth",
+    "borderWidth",
+];
+export const marginStyleNames = [
+    "margin",
+    "marginBottom",
+    "marginEnd",
+    "marginHorizontal",
+    "marginLeft",
+    "marginRight",
+    "marginStart",
+    "marginTop",
+    "marginVertical",
+];
+export function extractBorderAndMarginStyles(style, additionalBorderStyles, additionalMarginStyles) {
+    const flatStyle = StyleSheet.flatten(style || {});
+    const borderStyles = pickBy(pick(flatStyle, [
+        ...borderStyleNames,
+        ...(additionalBorderStyles ? additionalBorderStyles : []),
+    ]), identity);
+    const marginStyles = pickBy(pick(flatStyle, [
+        ...marginStyleNames,
+        ...(additionalMarginStyles ? additionalMarginStyles : []),
+    ]), identity);
+    return { borderStyles, marginStyles };
+}
+/**
+ * Merges a style object on top of another style object. In React Native,
+ * keys with undefined values in a style object will still override styles
+ * that appear earlier in a sequence. This avoids that problem.
+ *
+ * This lets us avoid the `...(something ? { something } : {})` pattern.
+ * There doesn't seem to be a better way to do this. These all seem to not
+ * work (i.e. they all result in `{ color: undefined }`:
+ * `const mergedStyles = [{ color: "red" }, { color: undefined }]`
+ * `const mergedStyles = StyleSheet.compose({ color: "red" }, { color: undefined })`
+ * `const mergedStyles = StyleSheet.flatten([{ color: "red" }, { color: undefined }])`
+ */
+export function applyStyles(baseStyles, stylesToApply) {
+    if (!stylesToApply) {
+        return;
+    }
+    const flattenedStyles = StyleSheet.flatten(baseStyles);
+    for (const [key, value] of Object.entries(stylesToApply)) {
+        if (value != null) {
+            flattenedStyles[key] = value;
+        }
+    }
+    return flattenedStyles;
+}
+export function getValueForRadioButton(value) {
+    if (isString(value)) {
+        return value;
+    }
+    else if (isNumber(value)) {
+        return String(value);
+    }
+    else {
+        throw new Error(`Invalid value: ${value}`);
+    }
+}