@ovotech/element-native 0.0.1 → 0.0.2

package/dist/theme/theme.d.ts

@@ -0,0 +1,291 @@
+import { BadgeVariantName, BadgeVariant } from '../components/Badge/Badge';
+import { CTAVariantName, CTAVariant } from '../components/CTAButton/CTAButton';
+import { NotificationVariant, NotificationVariantName } from '../components/Notification/Notification';
+import { IconName } from '../providers';
+declare type Shadow = {
+    color: string;
+    offset: string;
+    opacity: number;
+    radius: string;
+    elevation: number;
+};
+export declare type Theme = {
+    space: Record<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12, string>;
+    colors: Record<'primary' | 'primaryAlt' | 'primaryContrast' | 'primaryMuted' | 'error' | 'errorAlt' | 'errorContrast' | 'errorMuted' | 'info' | 'infoAlt' | 'infoContrast' | 'infoMuted' | 'warning' | 'warningAlt' | 'warningContrast' | 'warningMuted' | 'success' | 'successAlt' | 'successContrast' | 'successMuted' | 'focus' | 'body' | 'heading' | 'border' | 'borderMuted' | 'canvas' | 'canvasMuted', string>;
+    fonts: Record<'display' | 'body' | 'monospace', string>;
+    lineHeights: Record<'standard', number>;
+    fontSizes: string[];
+    responsiveFontSizes: Record<'body' | 'small' | 'level1' | 'level2' | 'level3' | 'level4', string[]>;
+    breakpoints: Record<'small' | 'medium' | 'large', number>;
+    radii: Record<'standard', string>;
+    shadows: Record<'standard', Shadow>;
+    borderWidths: Record<'standard' | 'heavy' | 'heavier', string>;
+    fontWeights: Record<'normal' | 'bold' | 'semiBold', number>;
+    badge: {
+        fontWeight: number;
+        lineHeight: number;
+        paddingVertical: string;
+        paddingHorizontal: string;
+        borderRadius: string;
+        borderWidth: string;
+        fontSize: string[];
+        variants: Record<BadgeVariantName, BadgeVariant>;
+    };
+    cta: {
+        fontSize: string[];
+        fontWeight: number;
+        font: string;
+        lineHeight: number;
+        paddingVertical: string;
+        paddingHorizontal: string;
+        borderRadius: number | string;
+        borderWidth: string;
+        iconGap: string;
+        minHeight: string;
+        variants: Record<CTAVariantName, CTAVariant>;
+    };
+    text: {
+        fontFamily: string;
+        lineHeight: number;
+        fontWeight: number;
+        color: string;
+        p: {
+            fontSize: string[];
+            marginTop: string[];
+            marginBottom: string[];
+        };
+        small: {
+            fontSize: string[];
+        };
+        strong: {
+            fontWeight: number;
+        };
+    };
+    list: {
+        marginTop: string[];
+        marginBottom: string[];
+        marginLeft: string;
+        listItem: {
+            fontSize: string[];
+            marginVertical: keyof Theme['space'];
+            bulletGap: string;
+            bulletWidth: string;
+        };
+        descriptionTerm: {
+            fontWeight: number | string;
+            color: string;
+            marginTop: string[];
+            marginBottom: string[];
+        };
+    };
+    textLink: {
+        color: string;
+        fontWeight: number;
+    };
+    heading: {
+        fontFamily: string;
+        lineHeight: number;
+        fontWeight: number;
+        color: string;
+        heading1: {
+            fontSize: string[];
+            marginTop: string[];
+            marginBottom: string[];
+            fontWeight?: number;
+        };
+        heading2: {
+            fontSize: string[];
+            marginTop: string[];
+            marginBottom: string[];
+            fontWeight?: number;
+        };
+        heading3: {
+            fontSize: string[];
+            marginTop: string[];
+            marginBottom: string[];
+            fontWeight?: number;
+        };
+        heading4: {
+            fontSize: string[];
+            marginTop: string[];
+            marginBottom: string[];
+            fontWeight?: number;
+        };
+    };
+    notification: {
+        borderRadius: string;
+        borderWidth: string;
+        borderColor: string;
+        background: string;
+        padding: string[];
+        variants: Record<NotificationVariantName, NotificationVariant>;
+        dismiss: {
+            icon: IconName;
+            size: string;
+            color: string;
+            touchSize: string;
+        };
+    };
+    radio: {
+        touchSize: string;
+        size: string;
+        dotSize: string;
+        gap: string;
+        paddingTop: string;
+        borderWidth: string;
+        borderColor: string;
+        background: string;
+        dotColor: string;
+        errorColor: string;
+    };
+    checkbox: {
+        touchSize: string;
+        size: string;
+        checkSize: string;
+        gap: string;
+        paddingTop: string;
+        borderWidth: string;
+        borderColor: string;
+        borderRadius: string;
+        background: string;
+        checkColor: string;
+        errorColor: string;
+    };
+    input: {
+        fontFamily: string;
+        fontSize: string[];
+        color: string;
+        lineHeight: number;
+        fontWeight: number;
+        height: string;
+        borderColor: string;
+        borderWidth: string;
+        background: string;
+        borderRadius: string;
+        padding: string;
+        error: {
+            borderWidth: string;
+            color: string;
+        };
+        icon: {
+            size: string;
+        };
+    };
+    focusRing: {
+        color: string;
+        width: string;
+        distance: string;
+    };
+    field: {
+        fontFamily: string;
+        fontSize: string[];
+        lineHeight: number;
+        dateWidth: string;
+        gap: string;
+        error: {
+            fontWeight: number;
+            color: string;
+        };
+        hint: {
+            fontWeight: number;
+            color: string;
+        };
+        label: {
+            fontWeight: number;
+            color: string;
+        };
+        subLabel: {
+            fontWeight: number;
+            color: string;
+        };
+        legend: {
+            marginBottom: string;
+        };
+        errorIndent: {
+            borderWidth: string;
+            borderRadius: string;
+        };
+    };
+    card: {
+        background: string;
+        borderWidth: string;
+        borderColor: string;
+        borderRadius: string;
+        shadow: Shadow;
+        padding: string[];
+    };
+    disclosure: {
+        iconGap: string[];
+        panelGap: string[];
+        lineIndent: {
+            borderRadius: string;
+            width: string;
+            backgroundColor: string;
+        };
+    };
+    grid: {
+        maxWidth: string;
+        gutter: string[];
+    };
+    dataTable: {
+        borderWidth: string;
+        borderRadius: string;
+        borderColor: string;
+        tableHeader: {
+            color: string;
+            backgroundColor: string;
+            borderWidth: string;
+            borderColor: string;
+            fontWeight: number;
+        };
+        tableCaption: {
+            color: string;
+            fontWeight: number;
+            paddingVertical: string;
+            paddingHorizontal: string;
+        };
+        tableCell: {
+            color: string;
+            borderWidth: string;
+            borderColor: string;
+            paddingVertical: string;
+            paddingHorizontal: string;
+        };
+        tableRow: {
+            backgroundColor: string;
+            stripeColor: string;
+        };
+    };
+    accordion: {
+        header: {
+            color: string;
+            iconSize: string;
+            iconGap: string;
+            paddingVertical: string[];
+        };
+    };
+    tabs: {
+        tab: {
+            fontSize: string[];
+            fontWeight: number;
+            fontFamily: string;
+            lineHeight: number;
+            borderTopWidth: string;
+            paddingVertical: string[];
+            paddingHorizontal: string[];
+            active: {
+                backgroundColor: string;
+                foregroundColor: string;
+                borderTopColor: string;
+            };
+            inactive: {
+                backgroundColor: string;
+                foregroundColor: string;
+            };
+            hover: {
+                foregroundColor: string;
+            };
+        };
+    };
+};
+export {};

package/dist/theme/theme.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './utils';

package/dist/utils/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./utils"), exports);

package/dist/utils/utils.d.ts

@@ -0,0 +1,15 @@
+import React, { Ref, ReactNode, ComponentType } from 'react';
+import { ViewProps, View } from 'react-native';
+import { BreakpointNames, Breakpoints } from '../hooks';
+declare function mergeRefs<T>(ref1: undefined | Ref<T>, ref2: undefined | Ref<T>): (element: T) => void;
+declare function getText(children: ReactNode): string;
+declare function pxToNumber(px: string): number;
+declare function styledComponentWithBreakpoints<T = ViewProps, C = View>(Component: ComponentType<T>): React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<T, BreakpointNames>> & React.RefAttributes<C>>;
+declare function responsiveStyle(property: string, value: any, breakpoints: Breakpoints, formatter?: (v: any) => string): any;
+declare function getErrorMessage(id: string, errors: Array<{
+    id: string;
+    message: ReactNode;
+}>): null | ReactNode;
+declare function callAll(...fns: Array<Function | undefined>): (...args: any[]) => void;
+declare function filterChildrenByType(children: ReactNode, type: ComponentType): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+export { styledComponentWithBreakpoints, responsiveStyle, pxToNumber, mergeRefs, getText, getErrorMessage, callAll, filterChildrenByType, };

package/dist/utils/utils.js

@@ -0,0 +1,126 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterChildrenByType = exports.callAll = exports.getErrorMessage = exports.getText = exports.mergeRefs = exports.pxToNumber = exports.responsiveStyle = exports.styledComponentWithBreakpoints = void 0;
+var react_1 = __importStar(require("react"));
+var hooks_1 = require("../hooks");
+function mergeRefs(ref1, ref2) {
+    return function (element) {
+        assignRef(ref1, element);
+        assignRef(ref2, element);
+    };
+}
+exports.mergeRefs = mergeRefs;
+function assignRef(ref, element) {
+    if (typeof ref === 'function') {
+        ref(element);
+    }
+    else if (ref) {
+        // @ts-ignore
+        ref.current = element;
+    }
+}
+function getText(children) {
+    if (!Boolean(children) && typeof children !== 'number') {
+        return '';
+    }
+    if (typeof children === 'object' && children.props) {
+        return react_1.Children.map(children.props.children, function (child) {
+            return getText(child);
+        }).join('');
+    }
+    return String(children);
+}
+exports.getText = getText;
+function pxToNumber(px) {
+    return parseFloat(px);
+}
+exports.pxToNumber = pxToNumber;
+function styledComponentWithBreakpoints(Component) {
+    return (0, react_1.forwardRef)(function (props, ref) {
+        var breakpoints = (0, hooks_1.useBreakpoint)();
+        // @ts-ignore.
+        return react_1.default.createElement(Component, __assign({}, props, breakpoints, { ref: ref }));
+    });
+}
+exports.styledComponentWithBreakpoints = styledComponentWithBreakpoints;
+function responsiveStyle(property, value, breakpoints, formatter) {
+    var values;
+    if (Array.isArray(value)) {
+        values = value;
+    }
+    else {
+        values = [value];
+    }
+    var ascMediaQueries = [
+        breakpoints.smallAndUp,
+        breakpoints.mediumAndUp,
+        breakpoints.largeAndUp,
+    ];
+    var base = values[0], rest = values.slice(1);
+    return rest.reduce(function (acc, val, i) {
+        return ascMediaQueries[i]
+            ? "".concat(property, ": ").concat(formatter ? formatter(val) : val, ";")
+            : acc;
+    }, "".concat(property, ": ").concat(formatter ? formatter(base) : base, ";"));
+}
+exports.responsiveStyle = responsiveStyle;
+function getErrorMessage(id, errors) {
+    return (errors.find(function (_a) {
+        var errorId = _a.id;
+        return id === errorId;
+    }) || { message: null })
+        .message;
+}
+exports.getErrorMessage = getErrorMessage;
+function callAll() {
+    var fns = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        fns[_i] = arguments[_i];
+    }
+    return function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        return fns.forEach(function (fn) { return fn && fn.apply(void 0, args); });
+    };
+}
+exports.callAll = callAll;
+function filterChildrenByType(children, type) {
+    return react_1.Children.toArray(children).filter(function (child) { return (child === null || child === void 0 ? void 0 : child.type) === type; });
+}
+exports.filterChildrenByType = filterChildrenByType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",