@bigbinary/neetoui-rn 0.0.10 → 0.0.14

package/README.md

@@ -1,4 +1,5 @@
 [![Netlify Status](https://api.netlify.com/api/v1/badges/1772e21c-61b9-4100-9b2e-9b0d1ce6a210/deploy-status)](https://app.netlify.com/sites/neetoui-rn/deploys)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/717761ba-353e-4417-9860-86e49b78ac36/deploy-status)](https://app.netlify.com/sites/neetoui-rn-docs/deploys)
 
 **NeetoUI-RN** is the library that drives the experience in all Neeto React
 Native products built at [BigBinary](https://www.bigbinary.com).
@@ -9,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.
@@ -28,15 +41,24 @@ You can use below commands for running storybook in different platforms:
 | iOS:     | `yarn ios`           |
 | Web      | `yarn storybook-web` |
 
-## Building
+## Auto Publish to NPM
 
 NeetoUI-RN version gets patched, auto-incremented and auto-published to npm on
 new commit to master. You can checkout the `publish` workflow in git actions to
 get a live update.
 
-Run `build-storybook-web` to build locally, this would create `storybook-static`
+## Building Storybook
+
+Run `yarn build-react` to build storybook locally, this would create `dist`
 folder with static files.
 
+Run `yarn serve` to serve storybook locally.
+
+## Building Component Documentation
+
+Run `cd docs`, `yarn build` to build component documentation locally, this would
+create `dist` folder with static files in `docs` folder.
+
 ## Documentation
 
 Read the docs here.

package/lib/components/Button.js

@@ -1,6 +1,8 @@
 import * as React from "react";
 import { flexbox, space, border, buttonStyle } from "styled-system";
 import styled from "styled-components/native";
+import propTypes from "@styled-system/prop-types";
+import PropTypes from "prop-types";
 
 export const TouchableOpacity = styled.TouchableOpacity`
   ${flexbox}
@@ -18,3 +20,11 @@ Button.defaultProps = {
   p: 15,
   alignItems: "center",
 };
+
+Button.propTypes = {
+  ...propTypes.flexbox,
+  ...propTypes.space,
+  ...propTypes.border,
+  ...propTypes.buttonStyle,
+  children: PropTypes.node.isRequired,
+};

package/lib/components/Container.js

@@ -1,7 +1,10 @@
+import * as React from "react";
 import { flexbox, space, border, color, layout } from "styled-system";
 import styled from "styled-components/native";
+import propTypes from "@styled-system/prop-types";
+import PropTypes from "prop-types";
 
-export const Container = styled.View`
+const View = styled.View`
   ${flexbox}
   ${space}
   ${border}
@@ -9,6 +12,19 @@ export const Container = styled.View`
   ${layout}
 `;
 
+export const Container = ({ children, ...rest }) => {
+  return <View {...rest}>{children}</View>;
+};
+
 Container.defaultProps = {
-  color: "background.default",
+  color: "background.primary",
+};
+
+Container.propTypes = {
+  ...propTypes.flexbox,
+  ...propTypes.space,
+  ...propTypes.border,
+  ...propTypes.color,
+  ...propTypes.layout,
+  children: PropTypes.node.isRequired,
 };

package/lib/components/Typography/Body.js

@@ -1,10 +1,12 @@
 import * as React from "react";
+import PropTypes from "prop-types";
+
 import { Typography } from "./Typography";
 
 // @component-group Typography Components
 
 /**
- * Body component is a build on top of typography component with some default fontFamilty and fontSize.
+ * Body component is built on top of typography component with default font family and font size.
  *
  *  ## Usage
  * ```js
@@ -26,10 +28,15 @@ import { Typography } from "./Typography";
  * @extends StyledSystems props /styled-system
  */
 
-export const Body = ({ children, rest }) => {
+export const Body = ({ children, ...rest }) => {
   return (
-    <Typography fontSize="body" fontFamily="regular" {...rest}>
+    <Typography fontSize="body" {...rest}>
       {children}
     </Typography>
   );
 };
+
+Body.propTypes = {
+  ...Typography.propTypes,
+  children: PropTypes.node.isRequired,
+};

package/lib/components/Typography/Caption1.js

@@ -1,10 +1,12 @@
 import * as React from "react";
+import PropTypes from "prop-types";
+
 import { Typography } from "./Typography";
 
 // @component-group Typography Components
 
 /**
- * Caption1 component is a build on top of typography component with some default fontFamilty and fontSize.
+ * Caption1 component is built on top of typography component with default font family and font size.
  *
  *  ## Usage
  * ```js
@@ -26,10 +28,15 @@ import { Typography } from "./Typography";
  * @extends StyledSystems props /styled-system
  */
 
-export const Caption1 = ({ children, rest }) => {
+export const Caption1 = ({ children, ...rest }) => {
   return (
-    <Typography fontSize="caption1" fontFamily="regular" {...rest}>
+    <Typography fontSize="caption1" {...rest}>
       {children}
     </Typography>
   );
 };
+
+Caption1.propTypes = {
+  ...Typography.propTypes,
+  children: PropTypes.node.isRequired,
+};

package/lib/components/Typography/Caption2.js

@@ -1,10 +1,12 @@
 import * as React from "react";
+import PropTypes from "prop-types";
+
 import { Typography } from "./Typography";
 
 // @component-group Typography Components
 
 /**
- * Caption2 component is a build on top of typography component with some default fontFamilty and fontSize.
+ * Caption2 component is built on top of typography component with default font family and font size.
  *
  *  ## Usage
  * ```js
@@ -28,8 +30,13 @@ import { Typography } from "./Typography";
 
 export const Caption2 = ({ children, ...rest }) => {
   return (
-    <Typography fontSize="caption2" fontFamily="regular" {...rest}>
+    <Typography fontSize="caption2" {...rest}>
       {children}
     </Typography>
   );
 };
+
+Caption2.propTypes = {
+  ...Typography.propTypes,
+  children: PropTypes.node.isRequired,
+};

package/lib/components/Typography/LargeTitle.js

@@ -1,10 +1,12 @@
 import * as React from "react";
+import PropTypes from "prop-types";
+
 import { Typography } from "./Typography";
 
 // @component-group Typography Components
 
 /**
- * LargeTitle component is a build on top of typography component with some default fontFamilty and fontSize.
+ * LargeTitle component is built on top of typography component with default font family and font size.
  *
  *  ## Usage
  * ```js
@@ -28,8 +30,13 @@ import { Typography } from "./Typography";
 
 export const LargeTitle = ({ children, ...rest }) => {
   return (
-    <Typography fontSize="largeTitle" fontFamily="bold" {...rest}>
+    <Typography fontSize="largeTitle" {...rest}>
       {children}
     </Typography>
   );
 };
+
+LargeTitle.propTypes = {
+  ...Typography.propTypes,
+  children: PropTypes.node.isRequired,
+};

package/lib/components/Typography/Title1.js

@@ -1,10 +1,12 @@
 import * as React from "react";
+import PropTypes from "prop-types";
+
 import { Typography } from "./Typography";
 
 // @component-group Typography Components
 
 /**
- * Title1 component is a build on top of typography component with some default fontFamilty and fontSize.
+ * Title1 component is built on top of typography component with default font family and font size.
  *
  *  ## Usage
  * ```js
@@ -26,10 +28,15 @@ import { Typography } from "./Typography";
  * @extends StyledSystems props /styled-system
  */
 
-export const Title1 = ({ children, rest }) => {
+export const Title1 = ({ children, ...rest }) => {
   return (
-    <Typography fontSize="title1" fontFamily="bold" {...rest}>
+    <Typography fontSize="title1" {...rest}>
       {children}
     </Typography>
   );
 };
+
+Title1.propTypes = {
+  ...Typography.propTypes,
+  children: PropTypes.node.isRequired,
+};

package/lib/components/Typography/Title2.js

@@ -1,10 +1,12 @@
 import * as React from "react";
+import PropTypes from "prop-types";
+
 import { Typography } from "./Typography";
 
 // @component-group Typography Components
 
 /**
- * Title2 component is a build on top of typography component with some default fontFamilty and fontSize.
+ * Title2 component is built on top of typography component with default font family and font size.
  *
  *  ## Usage
  * ```js
@@ -26,10 +28,15 @@ import { Typography } from "./Typography";
  * @extends StyledSystems props /styled-system
  */
 
-export const Title2 = ({ children, rest }) => {
+export const Title2 = ({ children, ...rest }) => {
   return (
-    <Typography fontSize="title2" fontFamily="bold" {...rest}>
+    <Typography fontSize="title2" {...rest}>
       {children}
     </Typography>
   );
 };
+
+Title2.propTypes = {
+  ...Typography.propTypes,
+  children: PropTypes.node.isRequired,
+};

package/lib/components/Typography/Typography.js

@@ -1,10 +1,20 @@
 import * as React from "react";
 import styled from "styled-components/native";
-import { space, layout, typography, color, textStyle } from "styled-system";
+import {
+  space,
+  layout,
+  flexbox,
+  typography,
+  color,
+  textStyle,
+} from "styled-system";
+import propTypes from "@styled-system/prop-types";
+import PropTypes from "prop-types";
 
 export const Text = styled.Text`
   ${space}
   ${layout}
+  ${flexbox}
   ${typography}
   ${color}
   ${textStyle}
@@ -13,13 +23,14 @@ export const Text = styled.Text`
 // @component-group Typography Components
 
 /**
- * Typography component is a primitive text component built on top of styled-system.
+ * Typography component is a primitive text component which is built on top of styled-system.
  *
- * This component supports below props categories from [styled-system ](/styled-system)
+ * This component supports below props categories from [styled-system ](/styled-system).
  *
  * <ul>
  * <li>space</li>
  * <li>layout</li>
+ * <li>flexbox</li>
  * <li>typography</li>
  * <li>color</li>
  * <li>textStyle</li>
@@ -53,3 +64,17 @@ export const Text = styled.Text`
 export const Typography = ({ children, ...rest }) => {
   return <Text {...rest}>{children}</Text>;
 };
+
+Typography.propTypes = {
+  ...propTypes.space,
+  ...propTypes.layout,
+  ...propTypes.flexbox,
+  ...propTypes.typography,
+  ...propTypes.color,
+  ...propTypes.textStyle,
+  children: PropTypes.node.isRequired,
+};
+
+Typography.defaultProps = {
+  color: "font.primary",
+};

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/index.js

@@ -0,0 +1,2 @@
+export * from "./components/index";
+export * from "./theme/index";

package/lib/theme/index.js

@@ -1,61 +1,75 @@
-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: "#FE295C",
-    },
-    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: "#FE295C",
-    },
+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,
   },
 };
 
+//aliases
+baseTheme.lineHeights.note = baseTheme.lineHeights[0] + "px";
+
 export const theme = {
   ...baseTheme,
   buttons: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.10",
+  "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": {
@@ -41,7 +43,11 @@
     ]
   },
   "peerDependencies": {},
-  "dependencies": {},
+  "dependencies": {
+    "@styled-system/prop-types": "^5.1.5",
+    "styled-components": "^5.3.3",
+    "styled-system": "^5.1.5"
+  },
   "devDependencies": {
     "@babel/core": "^7.12.9",
     "@babel/runtime": "^7.12.5",
@@ -90,13 +96,10 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-native": "0.66.2",
-    "react-native-size-matters": "^0.4.0",
     "react-native-storybook-loader": "^2.0.4",
     "react-native-web": "^0.17.5",
     "react-test-renderer": "17.0.2",
     "serve": "^13.0.2",
-    "styled-components": "^5.3.3",
-    "styled-system": "^5.1.5",
     "url-loader": "^4.1.1",
     "webpack": "^5.61.0",
     "webpack-cli": "^4.9.1",

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,35 +0,0 @@
-import * as React from "react";
-import { Typography } from "./Typography";
-
-// @component-group Typography Components
-
-/**
- * Callout component is a build on top of typography component with some default fontFamilty and fontSize.
- *
- *  ## 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>
-  );
-};

package/lib/components/Typography/Headline.js

@@ -1,35 +0,0 @@
-import * as React from "react";
-import { Typography } from "./Typography";
-
-// @component-group Typography Components
-
-/**
- * Headline component is a build on top of typography component with some default fontFamilty and fontSize.
- *
- *  ## 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>
-  );
-};

package/lib/components/Typography/Title3.js

@@ -1,35 +0,0 @@
-import * as React from "react";
-import { Typography } from "./Typography";
-
-// @component-group Typography Components
-
-/**
- * Title3 component is a build on top of typography component with some default fontFamilty and fontSize.
- *
- *  ## 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>
-  );
-};