@ovotech/element-native 5.4.3 → 5.6.0

package/dist/styled.native.js

@@ -1,4 +1,43 @@
-import * as styledComponents from 'styled-components/native';
+"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 __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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTheme = exports.ThemeProvider = exports.ThemeContext = exports.css = void 0;
+const styledComponents = __importStar(require("styled-components/native"));
 const { default: styled, css, ThemeProvider, ThemeContext, useTheme, } = styledComponents;
-export { ThemeContext, ThemeProvider, css, useTheme };
-export default styled;
+exports.css = css;
+exports.ThemeProvider = ThemeProvider;
+exports.ThemeContext = ThemeContext;
+exports.useTheme = useTheme;
+exports.default = styled;

package/dist/test/utils.d.ts

@@ -0,0 +1,4 @@
+import { render } from '@testing-library/react-native';
+declare const customRender: typeof render;
+export * from '@testing-library/react-native';
+export { customRender as render };

package/dist/test/utils.js

@@ -0,0 +1,28 @@
+"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 });
+exports.render = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const element_core_1 = require("@ovotech/element-core");
+const react_native_1 = require("@testing-library/react-native");
+const styled_native_1 = require("../styled.native");
+function Wrapper({ children }) {
+    return (0, jsx_runtime_1.jsx)(styled_native_1.ThemeProvider, { theme: element_core_1.themeNative, children: children });
+}
+const customRender = (ui, options) => (0, react_native_1.render)(ui, Object.assign({ wrapper: Wrapper }, options));
+exports.render = customRender;
+// re-export everything
+__exportStar(require("@testing-library/react-native"), exports);

package/dist/theme/index.js

@@ -1 +1,17 @@
-export * from '@ovotech/element-core';
+"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("@ovotech/element-core"), exports);

package/dist/utils/index.js

@@ -1 +1,17 @@
-export * from './utils';
+"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

@@ -1,6 +1,7 @@
 import { ComponentType, ReactElement, ReactNode, Ref, RefCallback, RefObject } from 'react';
 import { View, ViewProps } from 'react-native';
 import { BreakpointNames, Breakpoints } from '../hooks';
+import { ThemeNative } from '../styled.native';
 declare function mergeRefs<T>(...refs: Array<RefObject<T> | Ref<T> | undefined>): RefCallback<T>;
 declare function getText(children: ReactNode): string;
 declare function styledComponentWithBreakpoints<T = ViewProps, C = View>(Component: ComponentType<T>): (props: Omit<T, BreakpointNames> & (C extends ComponentType<any> ? import("react").ComponentProps<C> : object)) => import("react/jsx-runtime").JSX.Element;
@@ -12,4 +13,13 @@ declare function getErrorMessage(id: string, errors: Array<{
 declare function callAll(...fns: Array<Function | undefined>): (...args: any[]) => void;
 declare function filterChildrenByType(children: ReactNode, type: ComponentType): ReactElement<any, string | import("react").JSXElementConstructor<any>>[];
 declare function getValidChildren(children: ReactNode): ReactNode;
-export { callAll, filterChildrenByType, getErrorMessage, getText, getValidChildren, mergeRefs, responsiveStyle, styledComponentWithBreakpoints, };
+declare function getShadowCSS({ theme, shadowColor, shadowOffsetX, shadowOffsetY, shadowOpacity, shadowRadius, elevation, }: {
+    theme: ThemeNative;
+    shadowColor?: string;
+    shadowOffsetX?: number;
+    shadowOffsetY?: number;
+    shadowOpacity?: number;
+    shadowRadius?: number;
+    elevation?: number;
+}): import("styled-components").FlattenSimpleInterpolation;
+export { callAll, filterChildrenByType, getErrorMessage, getShadowCSS, getText, getValidChildren, mergeRefs, responsiveStyle, styledComponentWithBreakpoints, };

package/dist/utils/utils.js

@@ -1,6 +1,19 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Children, } from 'react';
-import { useBreakpoint } from '../hooks';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.callAll = callAll;
+exports.filterChildrenByType = filterChildrenByType;
+exports.getErrorMessage = getErrorMessage;
+exports.getShadowCSS = getShadowCSS;
+exports.getText = getText;
+exports.getValidChildren = getValidChildren;
+exports.mergeRefs = mergeRefs;
+exports.responsiveStyle = responsiveStyle;
+exports.styledComponentWithBreakpoints = styledComponentWithBreakpoints;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const hooks_1 = require("../hooks");
+const styled_native_1 = require("../styled.native");
+const theme_1 = require("../theme");
 function mergeRefs(...refs) {
     return value => {
         refs.forEach(ref => {
@@ -22,15 +35,15 @@ function getText(children) {
     }
     if (typeof children === 'object' &&
         children.props) {
-        return Children.map(children.props.children, child => getText(child)).join('');
+        return react_1.Children.map(children.props.children, child => getText(child)).join('');
     }
     return String(children);
 }
 function styledComponentWithBreakpoints(Component) {
     return (props) => {
-        const breakpoints = useBreakpoint();
+        const breakpoints = (0, hooks_1.useBreakpoint)();
         // @ts-ignore.
-        return _jsx(Component, { ...props, ...breakpoints, ref: props.ref });
+        return (0, jsx_runtime_1.jsx)(Component, Object.assign({}, props, breakpoints, { ref: props.ref }));
     };
 }
 function responsiveStyle(property, value, breakpoints, formatter) {
@@ -61,9 +74,17 @@ function callAll(...fns) {
     return (...args) => fns.forEach(fn => fn && fn(...args));
 }
 function filterChildrenByType(children, type) {
-    return Children.toArray(children).filter(child => child?.type === type);
+    return react_1.Children.toArray(children).filter(child => (child === null || child === void 0 ? void 0 : child.type) === type);
 }
 function getValidChildren(children) {
-    return Children.toArray(children).filter(Boolean);
+    return react_1.Children.toArray(children).filter(Boolean);
+}
+function getShadowCSS({ theme, shadowColor, shadowOffsetX, shadowOffsetY, shadowOpacity = 0.1, shadowRadius, elevation = 5, }) {
+    return (0, styled_native_1.css) `
+    shadow-color: ${shadowColor || theme.color.neutral.black};
+    shadow-offset: ${`${shadowOffsetX > 0 ? (0, theme_1.numToPx)(shadowOffsetX) : 0} ${(0, theme_1.numToPx)(shadowOffsetY || theme.space[100])}`};
+    shadow-opacity: ${shadowOpacity || '0.1'};
+    shadow-radius: ${(0, theme_1.numToPx)(shadowRadius || theme.space[200])};
+    elevation: ${elevation || 5};
+  `;
 }
-export { callAll, filterChildrenByType, getErrorMessage, getText, getValidChildren, mergeRefs, responsiveStyle, styledComponentWithBreakpoints, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "5.4.3",
+  "version": "5.6.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -10,15 +10,14 @@
   ],
   "repository": {
     "type": "git",
-    "url": "@ovotech/element"
+    "url": "https://github.com/ovotech/element-design-system.git",
+    "directory": "packages/native"
   },
   "dependencies": {
     "@backpackapp-io/react-native-toast": "^0.14.0",
     "deepmerge": "^4.2.2",
     "lodash.groupby": "^4.6.0",
-    "react-native-error-boundary": "^3.0.0",
     "react-native-reanimated-carousel": "^3.5.1",
-    "react-native-svg": "^15.12.1",
     "@ovotech/element-core": "4.2.0"
   },
   "devDependencies": {
@@ -30,7 +29,6 @@
     "@testing-library/jest-dom": "^6.6.4",
     "@testing-library/react": "^16.1.0",
     "@testing-library/react-native": "^13.3.3",
-    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.4",
     "@types/lodash.groupby": "^4.6.9",
     "@types/react": "^19.1.0",
@@ -51,6 +49,7 @@
     "react-native-gesture-handler": "^2.28.0",
     "react-native-reanimated": "^3.19.1",
     "react-native-safe-area-context": "^5.6.1",
+    "react-native-svg": "^15.12.1",
     "react-router-dom": "^6.11.2",
     "react-test-renderer": "^19.1.0",
     "styled-components": "^5.3.11",
@@ -64,6 +63,7 @@
     "@react-native-masked-view/masked-view": "^0.3.2",
     "react": "^19.1.0",
     "react-native": "^0.74.2 | ^0.81.0",
+    "react-native-error-boundary": "^3.0.0",
     "react-native-gesture-handler": "^2.28.0",
     "react-native-reanimated": "^3.19.1",
     "react-native-safe-area-context": "^5.6.1",
@@ -72,7 +72,7 @@
   },
   "sideEffects": false,
   "scripts": {
-    "build": "rm -rf dist &&tsc --project tsconfig.build.json && tsc --project tsconfig.build.json --module ES6 --outDir dist/esm --declaration false --rootDir src",
+    "build": "rm -rf dist && tsc --project tsconfig.build.json --module CommonJS --outDir dist && tsc --project tsconfig.build.json --module ES6 --outDir dist/esm --declaration false --rootDir src",
     "quickbuild": "tsc --project tsconfig.build.json --module ES6 --outDir dist/esm --declaration false",
     "test": "jest --maxWorkers 4",
     "typecheck": "tsc --noEmit",

package/dist/components/Cards/shared.d.ts

@@ -1,3 +0,0 @@
-import { ColorKey } from './types';
-export declare const SmallCardHeight = 172;
-export declare const resolveColor: (colorKey?: ColorKey) => string;

package/dist/components/Cards/shared.js

@@ -1,12 +0,0 @@
-import { useTheme } from '../../styled.native';
-export const SmallCardHeight = 172;
-export const resolveColor = (colorKey = 'default') => {
-    const theme = useTheme();
-    if (colorKey === 'default' || !colorKey) {
-        return theme.color.brand.brand;
-    }
-    if (colorKey === 'onSurface') {
-        return theme.color.surface.onSurface;
-    }
-    return colorKey;
-};

package/dist/components/ErrorWrapper/styles.js

@@ -1 +0,0 @@
-"use strict";

package/dist/esm/components/Cards/shared.js

@@ -1,12 +0,0 @@
-import { useTheme } from '../../styled.native';
-export const SmallCardHeight = 172;
-export const resolveColor = (colorKey = 'default') => {
-    const theme = useTheme();
-    if (colorKey === 'default' || !colorKey) {
-        return theme.color.brand.brand;
-    }
-    if (colorKey === 'onSurface') {
-        return theme.color.surface.onSurface;
-    }
-    return colorKey;
-};

package/dist/esm/components/ErrorWrapper/styles.js

@@ -1 +0,0 @@
-"use strict";