@bigbinary/neetoui-rn 0.0.9 → 0.0.13

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).
@@ -28,15 +29,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",
 };
+
+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}>
       {children}
     </Typography>
   );
 };
+
+Body.propTypes = {
+  ...Typography.propTypes,
+  children: PropTypes.node.isRequired,
+};

package/lib/components/Typography/Callout.js

@@ -1,10 +1,12 @@
 import * as React from "react";
+import PropTypes from "prop-types";
+
 import { Typography } from "./Typography";
 
 // @component-group Typography Components
 
 /**
- * Callout component is a build on top of typography component with some default fontFamilty and fontSize.
+ * Callout 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 Callout = ({ children, rest }) => {
+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/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}>
       {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
@@ -33,3 +35,8 @@ export const Caption2 = ({ children, ...rest }) => {
     </Typography>
   );
 };
+
+Caption2.propTypes = {
+  ...Typography.propTypes,
+  children: PropTypes.node.isRequired,
+};

package/lib/components/Typography/Headline.js

@@ -1,10 +1,12 @@
 import * as React from "react";
+import PropTypes from "prop-types";
+
 import { Typography } from "./Typography";
 
 // @component-group Typography Components
 
 /**
- * Headline component is a build on top of typography component with some default fontFamilty and fontSize.
+ * Headline 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 Headline = ({ children, rest }) => {
+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/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
@@ -33,3 +35,8 @@ export const LargeTitle = ({ children, ...rest }) => {
     </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}>
       {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}>
       {children}
     </Typography>
   );
 };
+
+Title2.propTypes = {
+  ...Typography.propTypes,
+  children: PropTypes.node.isRequired,
+};

package/lib/components/Typography/Title3.js

@@ -1,10 +1,12 @@
 import * as React from "react";
+import PropTypes from "prop-types";
+
 import { Typography } from "./Typography";
 
 // @component-group Typography Components
 
 /**
- * Title3 component is a build on top of typography component with some default fontFamilty and fontSize.
+ * Title3 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 Title3 = ({ children, rest }) => {
+export const Title3 = ({ children, ...rest }) => {
   return (
     <Typography fontSize="title3" fontFamily="regular" {...rest}>
       {children}
     </Typography>
   );
 };
+
+Title3.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/index.js

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

package/lib/theme/index.js

@@ -7,7 +7,7 @@ const baseTheme = {
       base: "#2F3941",
       primary: "#1B1F23",
       secondary: "#676767",
-      danger: "#FE295C",
+      danger: "#FF6969",
     },
     background: {
       default: "#FFFFFF",
@@ -25,7 +25,7 @@ const baseTheme = {
       default: "#FFFFFF",
       base: "#2F3941",
       primary: "#E4E4E7",
-      danger: "#FE295C",
+      danger: "#FF6969",
     },
   },
   fonts: {
@@ -43,6 +43,7 @@ const baseTheme = {
     regular: "Inter-Regular",
     bold: "Inter-Bold",
   },
+  lineHeights: [24],
   fontSizes: {
     largeTitle: moderateScale(32),
     title1: moderateScale(24),
@@ -56,6 +57,9 @@ const baseTheme = {
   },
 };
 
+//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.9",
+  "version": "0.0.13",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -41,7 +41,12 @@
     ]
   },
   "peerDependencies": {},
-  "dependencies": {},
+  "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"
+  },
   "devDependencies": {
     "@babel/core": "^7.12.9",
     "@babel/runtime": "^7.12.5",
@@ -90,13 +95,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",