update

.gitignore

@@ -64,3 +64,5 @@ example/web-build
 completed.json
 errors.json
 components.json
+
+js.map

README.md

@@ -65,8 +65,7 @@ Release Process:
 - We release master, meaning a pull-request containing substantive changes
   should not alter any version information.
 
-- When master is ready for release, create a new branch and run a `yarn
-  version:XXXX` command from the root, as appropriate. Lerna will update all
+- When master is ready for release, create a new branch and run a `yarn version:XXXX` command from the root, as appropriate. Lerna will update all
   the package.json files with the next version, and create and tag a commit.
 
   - **NOTE:** We follow a modified semver: EXPO_VERSION.MAJOR.MINOR.
@@ -90,9 +89,10 @@ Sound cool? [We're hiring!](https://draftbit.com/jobs).
 
 MIT
 
-
 ## Contributing
+
 - Any color should be passed down via theme prop:
+
 ```
 // NOT dotColor="#5a45ff" b/c that isn't theme powered
 // Learn more here https://callstack.github.io/react-native-paper/theming.html

example/app.json

@@ -7,11 +7,7 @@
     "description": "Example app for @draftbit/ui",
     "privacy": "public",
     "version": "1.0.0",
-    "platforms": [
-      "ios",
-      "android",
-      "web"
-    ],
+    "platforms": ["ios", "android", "web"],
     "icon": "./src/assets/images/icon.png",
     "splash": {
       "image": "./src/assets/images/splash.png",
@@ -21,8 +17,6 @@
     "ios": {
       "supportsTablet": true
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ]
+    "assetBundlePatterns": ["**/*"]
   }
 }

example/src/App.tsx

@@ -93,8 +93,8 @@ const ROUTES = {
 };
 
 let customFonts = {
-  "FiraCode": require("./assets/fonts/FiraCode-Bold.otf"),
-  "Testing": require("./assets/fonts/Sriracha-Regular.ttf"),
+  FiraCode: require("./assets/fonts/FiraCode-Bold.otf"),
+  Testing: require("./assets/fonts/Sriracha-Regular.ttf"),
   "Inter-SemiBoldItalic":
     "https://rsms.me/inter/font-files/Inter-SemiBoldItalic.otf?v=3.12",
 };

example/src/FABExample.js

@@ -1,23 +1,20 @@
 import * as React from "react";
-import {View} from 'react-native'
-import {withTheme, FAB} from "@draftbit/ui";
-import Section, {Container, styles} from "./Section";
+import { View } from "react-native";
+import { withTheme, FAB } from "@draftbit/ui";
+import Section, { Container, styles } from "./Section";
 
-function FABExample({theme}) {
+function FABExample({ theme }) {
   // const [elevation, setElevation] = React.useState(0);
 
   const handlePress = () => {};
   return (
-    <Container style={{flexDirection: 'row', backgroundColor: theme.colors.background}}>
+    <Container
+      style={{ flexDirection: "row", backgroundColor: theme.colors.background }}
+    >
       <FAB icon="add" onPress={handlePress} />
       <FAB icon="add" disabled onPress={handlePress} />
-      <View style={{backgroundColor: 'yellow'}}>
-        <FAB
-          icon="add"
-          loading
-          onPress={handlePress}
-          style={{margin: 20}}
-        />
+      <View style={{ backgroundColor: "yellow" }}>
+        <FAB icon="add" loading onPress={handlePress} style={{ margin: 20 }} />
       </View>
     </Container>
   );

mock-backend.json

@@ -151,4 +151,4 @@
       "id": 50
     }
   ]
-}
+}

package.json

@@ -14,6 +14,7 @@
     "bootstrap": "lerna bootstrap",
     "crosslink": "lerna link",
     "build": "lerna run prepare",
+    "format": "prettier --write .",
     "upload:run": "node ./scripts/collector.js",
     "upload:test": "bash ./scripts/test-collector.bash",
     "version:expo": "lerna version major --no-push",
@@ -28,13 +29,37 @@
     ]
   },
   "devDependencies": {
+    "@react-native-community/eslint-config": "^2.0.0",
+    "@types/jest": "^26.0.23",
+    "babel-jest": "^26.6.3",
     "dotenv": "^9.0.2",
+    "eslint": "^7.26.0",
     "expo-yarn-workspaces": "1.2.1",
+    "jest": "^26.6.3",
     "json-server": "^0.16.3",
     "lerna": "^4.0.0",
     "node-fetch": "^2.6.1",
+    "prettier": "^2.3.0",
     "rimraf": "^3.0.2",
     "typescript": "^4.2.4",
     "utility-types": "^3.10.0"
-  }
+  },
+  "eslintConfig": {
+    "extends": [
+      "@react-native-community",
+      "prettier"
+    ],
+    "settings": {
+      "react": {
+        "version": "16"
+      }
+    }
+  },
+  "eslintIgnore": [
+    "scripts",
+    "example/web-build",
+    "node_modules/",
+    "lib/",
+    "__generated__"
+  ]
 }

packages/core/src/components/Card.tsx

@@ -127,9 +127,11 @@ const Card: React.FC<Props> = ({
   // Necessary to inject web-renderable Icons in buider.
   const SelectedIcon = IconOverride || Icon;
 
-  const { backgroundColor: bgColor, padding, ...styles } = StyleSheet.flatten(
-    style || {}
-  );
+  const {
+    backgroundColor: bgColor,
+    padding,
+    ...styles
+  } = StyleSheet.flatten(style || {});
 
   const backgroundColor = bgColor ? bgColor : theme.colors.surface;
   const innerPadding = padding ? padding : 12;

packages/core/src/components/DatePicker/DatePicker.tsx

@@ -6,12 +6,11 @@ import dateFormat from "dateformat";
 import { withTheme } from "../../theming";
 
 import Portal from "../Portal/Portal";
-import Button from "../Button";
+import Button from "../DeprecatedButton";
 import TextField, { Props as TextFieldProps } from "../TextField";
 import Touchable from "../Touchable";
 import theme from "../../styles/DefaultTheme";
 import DateTimePicker from "./DatePickerComponent";
-import type { IconSlot } from "../../interfaces/Icon";
 
 type Props = {
   style?: StyleProp<ViewStyle>;
@@ -27,8 +26,7 @@ type Props = {
   onDateChange?: (data?: any) => void;
   disabled?: boolean;
   mode?: "date" | "time" | "datetime";
-} & TextFieldProps &
-  IconSlot;
+} & TextFieldProps;
 
 const MONTHS = [
   "January",
@@ -46,7 +44,6 @@ const MONTHS = [
 ];
 
 const DatePicker: React.FC<Props> = ({
-  Icon,
   style,
   theme: { colors },
   date = new Date(),
@@ -120,7 +117,6 @@ const DatePicker: React.FC<Props> = ({
             >
               {Platform.OS === "ios" && (
                 <Button
-                  Icon={Icon}
                   type="text"
                   onPress={toggleVisibility}
                   style={styles.closeButton}

packages/core/src/components/Elevation.tsx

@@ -9,11 +9,11 @@ import {
 } from "react-native";
 import shadow from "../styles/shadow";
 import { withTheme } from "../theming";
-import themeT from "../styles/DefaultTheme";
+import type { Theme } from "../styles/DefaultTheme";
 
 type Props = {
   style?: StyleProp<ViewStyle>;
-  theme: typeof themeT;
+  theme: Theme;
 } & ViewProps;
 
 /* directly copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx#L62 */

packages/core/src/components/FAB.tsx

@@ -10,8 +10,8 @@ import {
   Platform,
 } from "react-native";
 import { withTheme } from "../theming";
-import { Icon } from "@draftbit/native";
 import type { Theme } from "../styles/DefaultTheme";
+import type { IconSlot } from "../interfaces/Icon";
 
 import {
   COMPONENT_TYPES,
@@ -29,9 +29,9 @@ type Props = {
   iconName?: string;
   onPress: () => void;
   theme: Theme;
-  IconOverride: typeof Icon;
   style?: StyleProp<ViewStyle>;
-} & PressableProps;
+} & PressableProps &
+  IconSlot;
 
 const FAB: React.FC<Props> = ({
   onPress,
@@ -43,11 +43,9 @@ const FAB: React.FC<Props> = ({
   iconColor,
   bgColor,
   size = 50,
-  IconOverride = null,
+  Icon,
   ...props
 }) => {
-  const SelectedIcon = IconOverride || Icon;
-
   const backgroundColor = bgColor || theme.colors.primary;
   const color = iconColor || "#FFF";
 
@@ -88,7 +86,7 @@ const FAB: React.FC<Props> = ({
           {loading ? (
             <ActivityIndicator size="small" color={color} />
           ) : (
-            <SelectedIcon name={iconName} size={28} color={iconColor} />
+            <Icon name={iconName} size={28} color={iconColor} />
           )}
         </View>
       </Pressable>

packages/core/src/components/FieldRadioButton.tsx

@@ -5,9 +5,13 @@ import { withTheme } from "../theming";
 import Touchable from "./Touchable";
 import RadioButton from "./RadioButton/RadioButton";
 
-import { GROUPS, COMPONENT_TYPES, FORM_TYPES } from "@draftbit/types";
+import {
+  GROUPS,
+  COMPONENT_TYPES,
+  FORM_TYPES,
+  colorTypes,
+} from "@draftbit/types";
 import type { Theme } from "../styles/DefaultTheme";
-import { colorTypes } from "../types";
 
 type Props = {
   onPress?: () => void;