@bigbinary/neetoui-rn 0.0.13 → 0.0.14

package/README.md

@@ -10,6 +10,18 @@ Native products built at [BigBinary](https://www.bigbinary.com).
 yarn add @bigbinary/neetoui-rn
 ```
 
+To link the library, run:
+
+```sh
+react-native link
+```
+
+or
+
+```sh
+npx react-native link
+```
+
 ## Development
 
 Install all the dependencies by executing following command.

package/lib/components/Container.js

@@ -17,7 +17,7 @@ export const Container = ({ children, ...rest }) => {
 };
 
 Container.defaultProps = {
-  color: "background.default",
+  color: "background.primary",
 };
 
 Container.propTypes = {

package/lib/components/Typography/Body.js

@@ -30,7 +30,7 @@ import { Typography } from "./Typography";
 
 export const Body = ({ children, ...rest }) => {
   return (
-    <Typography fontSize="body" fontFamily="regular" {...rest}>
+    <Typography fontSize="body" {...rest}>
       {children}
     </Typography>
   );

package/lib/components/Typography/Caption1.js

@@ -30,7 +30,7 @@ import { Typography } from "./Typography";
 
 export const Caption1 = ({ children, ...rest }) => {
   return (
-    <Typography fontSize="caption1" fontFamily="regular" {...rest}>
+    <Typography fontSize="caption1" {...rest}>
       {children}
     </Typography>
   );

package/lib/components/Typography/Caption2.js

@@ -30,7 +30,7 @@ import { Typography } from "./Typography";
 
 export const Caption2 = ({ children, ...rest }) => {
   return (
-    <Typography fontSize="caption2" fontFamily="regular" {...rest}>
+    <Typography fontSize="caption2" {...rest}>
       {children}
     </Typography>
   );

package/lib/components/Typography/LargeTitle.js

@@ -30,7 +30,7 @@ import { Typography } from "./Typography";
 
 export const LargeTitle = ({ children, ...rest }) => {
   return (
-    <Typography fontSize="largeTitle" fontFamily="bold" {...rest}>
+    <Typography fontSize="largeTitle" {...rest}>
       {children}
     </Typography>
   );

package/lib/components/Typography/Title1.js

@@ -30,7 +30,7 @@ import { Typography } from "./Typography";
 
 export const Title1 = ({ children, ...rest }) => {
   return (
-    <Typography fontSize="title1" fontFamily="bold" {...rest}>
+    <Typography fontSize="title1" {...rest}>
       {children}
     </Typography>
   );

package/lib/components/Typography/Title2.js

@@ -30,7 +30,7 @@ import { Typography } from "./Typography";
 
 export const Title2 = ({ children, ...rest }) => {
   return (
-    <Typography fontSize="title2" fontFamily="bold" {...rest}>
+    <Typography fontSize="title2" {...rest}>
       {children}
     </Typography>
   );

package/lib/components/index.js

@@ -5,9 +5,6 @@ export { Typography } from "./Typography/Typography";
 export { LargeTitle } from "./Typography/LargeTitle";
 export { Title1 } from "./Typography/Title1";
 export { Title2 } from "./Typography/Title2";
-export { Title3 } from "./Typography/Title3";
-export { Headline } from "./Typography/Headline";
 export { Body } from "./Typography/Body";
-export { Callout } from "./Typography/Callout";
 export { Caption1 } from "./Typography/Caption1";
 export { Caption2 } from "./Typography/Caption2";

package/lib/theme/index.js

@@ -1,59 +1,69 @@
-import { moderateScale } from "react-native-size-matters";
+const defaultColors = {
+  white: "#ffffff",
+  black: "#000000",
+  base: "#2f3941",
+  danger: "#ff6969",
+};
 
-const baseTheme = {
-  colors: {
-    font: {
-      default: "#FFFFFF",
-      base: "#2F3941",
-      primary: "#1B1F23",
-      secondary: "#676767",
-      danger: "#FF6969",
-    },
-    background: {
-      default: "#FFFFFF",
-      base: "#2F3941",
-      primary: "#E4E4E7",
-      secondary: "#E9EBED",
-    },
-    card: {
-      default: "#FFFFFF",
-      base: "#2F3941",
-      primary: "#F8F9F9",
-      secondary: "#E9EBED",
-    },
-    border: {
-      default: "#FFFFFF",
-      base: "#2F3941",
-      primary: "#E4E4E7",
-      danger: "#FF6969",
-    },
+const greyVarients = {
+  grey: "#828282",
+  grey100: "#f8f9f9",
+  grey200: "#e9ebed",
+  grey300: "#d8dcde",
+  grey400: "#c2c8cc",
+  grey500: "#87929d",
+  grey600: "#68737d",
+  grey800: "#2f3941",
+};
+
+const colors = {
+  font: {
+    primary: "#1b1f23",
+    secondary: "#828282",
+    ...defaultColors,
+    ...greyVarients,
+  },
+  background: {
+    primary: "#ffffff",
+    secondary: "#e4e4e7",
+    ...defaultColors,
+    ...greyVarients,
+  },
+  border: {
+    primary: "#e4e4e7",
+    ...greyVarients,
+    ...defaultColors,
   },
+};
+
+const baseTheme = {
+  colors,
   fonts: {
     // We can add below commented fonts later as follows. Also add font faces in index.web.js for the web.
     // https://www.bigbinary.com/learn-react-native/adding-custom-fonats
 
-    // thin: "Inter-Thin",
-    // extraLight: "Inter-ExtraLight",
-    // light: "Inter-Light",
-    // medium: "Inter-Medium",
-    // semiBold: "Inter-SemiBold",
-    // extraBold: "Inter-ExtraBold",
-    // black: "Inter-Black",
+    // inter100: "Inter-Thin",
+    // inter200: "Inter-ExtraLight",
+    // inter300: "Inter-Light",
+    // inter500: "Inter-Medium",
+    // inter600: "Inter-SemiBold",
+    // inter800: "Inter-ExtraBold",
+    // inter900: "Inter-Black",
 
-    regular: "Inter-Regular",
-    bold: "Inter-Bold",
+    inter400: "Inter-Regular",
+    inter700: "Inter-Bold",
   },
   lineHeights: [24],
   fontSizes: {
-    largeTitle: moderateScale(32),
-    title1: moderateScale(24),
-    title2: moderateScale(18),
-    title3: moderateScale(18),
-    headline: moderateScale(14),
-    body: moderateScale(14),
-    callout: moderateScale(12),
-    caption1: moderateScale(12),
-    caption2: moderateScale(10),
+    largeTitle: 32,
+    title1: 24,
+    title2: 18,
+    title3: 18,
+    headline: 14,
+    body: 14,
+    callout: 12,
+    caption1: 12,
+    caption2: 10,
   },
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -26,7 +26,9 @@
     "web": "yarn prestart && webpack serve --mode=development --config webpack.config.js"
   },
   "files": [
-    "lib"
+    "lib",
+    "react-native.config.js",
+    "assets"
   ],
   "husky": {
     "hooks": {
@@ -43,7 +45,6 @@
   "peerDependencies": {},
   "dependencies": {
     "@styled-system/prop-types": "^5.1.5",
-    "react-native-size-matters": "^0.4.0",
     "styled-components": "^5.3.3",
     "styled-system": "^5.1.5"
   },

package/react-native.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  project: {
+    ios: {},
+    android: {},
+  },
+  assets: ["./assets/fonts/"],
+  dependency: {
+    assets: ["./assets/fonts/"],
+  },
+};

package/lib/components/Typography/Callout.js

@@ -1,42 +0,0 @@
-import * as React from "react";
-import PropTypes from "prop-types";
-
-import { Typography } from "./Typography";
-
-// @component-group Typography Components
-
-/**
- * Callout component is built on top of typography component with default font family and font size.
- *
- *  ## Usage
- * ```js
- * import * as React from 'react';
- * import { Callout, Container } from '@bigbinary/neetoui-rn';
- *
- * export default function Main() {
- *  return (
- *    <Container>
- *     <Callout>
- *         This is basic example of Callout
- *      </Callout>
- *     </Container>
- *  );
- * }
- *
- * ```
- *
- * @extends StyledSystems props /styled-system
- */
-
-export const Callout = ({ children, ...rest }) => {
-  return (
-    <Typography fontSize="callout" fontFamily="bold" {...rest}>
-      {children}
-    </Typography>
-  );
-};
-
-Callout.propTypes = {
-  ...Typography.propTypes,
-  children: PropTypes.node.isRequired,
-};

package/lib/components/Typography/Headline.js

@@ -1,42 +0,0 @@
-import * as React from "react";
-import PropTypes from "prop-types";
-
-import { Typography } from "./Typography";
-
-// @component-group Typography Components
-
-/**
- * Headline component is built on top of typography component with default font family and font size.
- *
- *  ## Usage
- * ```js
- * import * as React from 'react';
- * import { Headline, Container } from '@bigbinary/neetoui-rn';
- *
- * export default function Main() {
- *  return (
- *    <Container>
- *     <Headline>
- *         This is basic example of Headline
- *      </Headline>
- *     </Container>
- *  );
- * }
- *
- * ```
- *
- * @extends StyledSystems props /styled-system
- */
-
-export const Headline = ({ children, ...rest }) => {
-  return (
-    <Typography fontSize="headline" fontFamily="bold" {...rest}>
-      {children}
-    </Typography>
-  );
-};
-
-Headline.propTypes = {
-  ...Typography.propTypes,
-  children: PropTypes.node.isRequired,
-};

package/lib/components/Typography/Title3.js

@@ -1,42 +0,0 @@
-import * as React from "react";
-import PropTypes from "prop-types";
-
-import { Typography } from "./Typography";
-
-// @component-group Typography Components
-
-/**
- * Title3 component is built on top of typography component with default font family and font size.
- *
- *  ## Usage
- * ```js
- * import * as React from 'react';
- * import { Title3, Container } from '@bigbinary/neetoui-rn';
- *
- * export default function Main() {
- *  return (
- *    <Container>
- *     <Title3>
- *         This is basic example of Title3
- *      </Title3>
- *     </Container>
- *  );
- * }
- *
- * ```
- *
- * @extends StyledSystems props /styled-system
- */
-
-export const Title3 = ({ children, ...rest }) => {
-  return (
-    <Typography fontSize="title3" fontFamily="regular" {...rest}>
-      {children}
-    </Typography>
-  );
-};
-
-Title3.propTypes = {
-  ...Typography.propTypes,
-  children: PropTypes.node.isRequired,
-};