@ovotech/element-native 0.0.2 → 2.0.0-beta.0

package/dist/theme/theme.d.ts

@@ -9,32 +9,35 @@ declare type Shadow = {
     radius: string;
     elevation: number;
 };
+declare type FontNames = 'body' | 'small' | 'label' | 'level1' | 'level2' | 'level3' | 'level4' | 'lead';
 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>;
+    colors: Record<'primary' | 'primaryAlt' | 'primaryContrast' | 'primaryMuted' | 'error' | 'errorAlt' | 'errorContrast' | 'errorMuted' | 'info' | 'infoAlt' | 'infoContrast' | 'infoMuted' | 'warning' | 'warningAlt' | 'warningContrast' | 'warningMuted' | 'success' | 'successAlt' | 'successContrast' | 'successMuted' | 'focus' | 'focusMuted' | 'body' | 'heading' | 'border' | 'borderMuted' | 'canvas' | 'canvasMuted' | 'mission' | 'missionMuted' | 'missionAlt' | 'missionContrast', string> & {
+        brand: Record<string, Record<string, string>>;
+    };
+    fonts: Record<'body' | 'bold' | 'heading', string>;
     lineHeights: Record<'standard', number>;
     fontSizes: string[];
-    responsiveFontSizes: Record<'body' | 'small' | 'level1' | 'level2' | 'level3' | 'level4', string[]>;
+    responsiveFontSizes: Record<FontNames, string[]>;
+    responsiveLineHeights: Record<FontNames, string[]>;
     breakpoints: Record<'small' | 'medium' | 'large', number>;
-    radii: Record<'standard', string>;
+    radii: Record<'small' | 'medium' | 'large', string>;
     shadows: Record<'standard', Shadow>;
     borderWidths: Record<'standard' | 'heavy' | 'heavier', string>;
-    fontWeights: Record<'normal' | 'bold' | 'semiBold', number>;
+    fontWeights: Record<'normal' | 'bold' | 'semiBold' | 'heading', number>;
     badge: {
         fontWeight: number;
+        fontFamily: string;
         lineHeight: number;
-        paddingVertical: string;
         paddingHorizontal: string;
         borderRadius: string;
-        borderWidth: string;
         fontSize: string[];
         variants: Record<BadgeVariantName, BadgeVariant>;
     };
     cta: {
         fontSize: string[];
         fontWeight: number;
-        font: string;
+        fontFamily: string;
         lineHeight: number;
         paddingVertical: string;
         paddingHorizontal: string;
@@ -46,19 +49,22 @@ export declare type Theme = {
     };
     text: {
         fontFamily: string;
-        lineHeight: number;
         fontWeight: number;
+        lineHeight: number;
         color: string;
         p: {
             fontSize: string[];
+            lineHeight: string[];
             marginTop: string[];
             marginBottom: string[];
         };
         small: {
             fontSize: string[];
+            lineHeight: string[];
         };
         strong: {
             fontWeight: number;
+            fontFamily: string;
         };
     };
     list: {
@@ -73,6 +79,7 @@ export declare type Theme = {
         };
         descriptionTerm: {
             fontWeight: number | string;
+            fontFamily: string;
             color: string;
             marginTop: string[];
             marginBottom: string[];
@@ -84,29 +91,32 @@ export declare type Theme = {
     };
     heading: {
         fontFamily: string;
-        lineHeight: number;
         fontWeight: number;
         color: string;
         heading1: {
             fontSize: string[];
+            lineHeight: string[];
             marginTop: string[];
             marginBottom: string[];
             fontWeight?: number;
         };
         heading2: {
             fontSize: string[];
+            lineHeight: string[];
             marginTop: string[];
             marginBottom: string[];
             fontWeight?: number;
         };
         heading3: {
             fontSize: string[];
+            lineHeight: string[];
             marginTop: string[];
             marginBottom: string[];
             fontWeight?: number;
         };
         heading4: {
             fontSize: string[];
+            lineHeight: string[];
             marginTop: string[];
             marginBottom: string[];
             fontWeight?: number;
@@ -117,7 +127,8 @@ export declare type Theme = {
         borderWidth: string;
         borderColor: string;
         background: string;
-        padding: string[];
+        paddingX: string[];
+        paddingY: string[];
         variants: Record<NotificationVariantName, NotificationVariant>;
         dismiss: {
             icon: IconName;
@@ -136,6 +147,7 @@ export declare type Theme = {
         borderColor: string;
         background: string;
         dotColor: string;
+        checkedBackground: string;
         errorColor: string;
     };
     checkbox: {
@@ -148,6 +160,7 @@ export declare type Theme = {
         borderColor: string;
         borderRadius: string;
         background: string;
+        checkedBackground: string;
         checkColor: string;
         errorColor: string;
     };
@@ -184,6 +197,7 @@ export declare type Theme = {
         gap: string;
         error: {
             fontWeight: number;
+            fontFamily: string;
             color: string;
         };
         hint: {
@@ -192,6 +206,7 @@ export declare type Theme = {
         };
         label: {
             fontWeight: number;
+            fontFamily: string;
             color: string;
         };
         subLabel: {
@@ -210,18 +225,11 @@ export declare type Theme = {
         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;
@@ -231,25 +239,25 @@ export declare type Theme = {
         borderWidth: string;
         borderRadius: string;
         borderColor: string;
+        responsivePadding: {
+            vertical: [string, string];
+            horizontal: [string, string];
+        };
         tableHeader: {
             color: string;
             backgroundColor: string;
             borderWidth: string;
             borderColor: string;
             fontWeight: number;
+            fontFamily: string;
         };
         tableCaption: {
             color: string;
             fontWeight: number;
-            paddingVertical: string;
-            paddingHorizontal: string;
+            fontFamily: string;
         };
         tableCell: {
             color: string;
-            borderWidth: string;
-            borderColor: string;
-            paddingVertical: string;
-            paddingHorizontal: string;
         };
         tableRow: {
             backgroundColor: string;
@@ -271,12 +279,14 @@ export declare type Theme = {
             fontFamily: string;
             lineHeight: number;
             borderTopWidth: string;
+            borderBottomWidth: string;
+            borderColor: string;
             paddingVertical: string[];
             paddingHorizontal: string[];
             active: {
                 backgroundColor: string;
                 foregroundColor: string;
-                borderTopColor: string;
+                borderColor: string;
             };
             inactive: {
                 backgroundColor: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "0.0.2",
+  "version": "2.0.0-beta.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -13,46 +13,49 @@
     "url": "@ovotech/element"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
+    "@babel/core": "^7.11.5",
     "@storybook/react-native": "^5.3.25",
-    "@testing-library/dom": "^5.0.0",
-    "@testing-library/react": "^9.5.0",
-    "@testing-library/react-native": "^6.0.0",
-    "@testing-library/user-event": "^10.3.2",
+    "@testing-library/dom": "^8.20.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/react-native": "^11.5.2",
+    "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^25.1.4",
     "@types/react": "18.0.24",
     "@types/react-native": "^0.70.6",
     "@types/react-router-dom": "^5.1.5",
     "@types/styled-components": "^5.1.3",
     "@types/styled-components-react-native": "^5.1.1",
-    "babel-jest": "^25.2.4",
+    "babel-jest": "^28.1.1",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "jest": "^25.1.0",
+    "jest": "^28.1.1",
     "jest-styled-components": "^7.0.3",
-    "metro-react-native-babel-preset": "^0.59.0",
+    "metro-react-native-babel-preset": "^0.75.0",
     "react": "18.2.0",
     "react-is": "^16.13.0",
     "react-native": "0.70.4",
+    "react-native-reanimated": "^2.10.0",
     "react-native-svg": "9.2.4",
     "react-router-dom": "^5.1.2",
-    "react-test-renderer": "16.9.0",
+    "react-test-renderer": "^18.2.0",
     "styled-components": "^5.1.3",
-    "ts-jest": "^25.2.1",
+    "ts-jest": "^28.0.5",
     "ts-loader": "^6.2.1",
     "typescript": "^4.8.4"
   },
   "peerDependencies": {
     "react": "^16.9.0 || ^17.0.0",
     "react-native": "^0.63.3",
-    "react-native-svg": "^9.2.4",
+    "react-native-reanimated": "^2.10.0",
+    "react-native-svg": "^13.5.0",
     "styled-components": "^5.1.3"
   },
   "dependencies": {
-    "deepmerge": "^4.2.2",
-    "react-uid": "^2.3.0"
+    "deepmerge": "^4.2.2"
   },
   "scripts": {
     "build": "tsc && tsc --module ES6 --outDir dist/esm --declaration false",
-    "test": "jest --maxWorkers 4"
+    "quickbuild": "tsc --module ES6 --outDir dist/esm --declaration false",
+    "test": "jest --maxWorkers 4",
+    "typecheck": "tsc --noEmit"
   }
 }