@bigbinary/neetoui-rn 0.0.8 → 0.0.12

package/README.md

@@ -1,4 +1,6 @@
-[![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/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 +30,25 @@ 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,19 +1,30 @@
-import React from "react";
-import { TouchableOpacity, Text, StyleSheet } from "react-native";
+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 Button = ({ onPress, text }) => {
-  return (
-    <TouchableOpacity style={styles.container} onPress={onPress}>
-      <Text style={styles.text}>{text}</Text>
-    </TouchableOpacity>
-  );
+export const TouchableOpacity = styled.TouchableOpacity`
+  ${flexbox}
+  ${space}
+  ${border}
+  ${buttonStyle}
+`;
+
+export const Button = ({ children, ...rest }) => {
+  return <TouchableOpacity {...rest}>{children}</TouchableOpacity>;
+};
+
+Button.defaultProps = {
+  variant: "primary",
+  p: 15,
+  alignItems: "center",
 };
 
-const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    backgroundColor: "violet",
-  },
-  text: { color: "black" },
-});
+Button.propTypes = {
+  ...propTypes.flexbox,
+  ...propTypes.space,
+  ...propTypes.border,
+  ...propTypes.buttonStyle,
+  children: PropTypes.node.isRequired,
+};

package/lib/components/Container.js

@@ -0,0 +1,30 @@
+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";
+
+const View = styled.View`
+  ${flexbox}
+  ${space}
+  ${border}
+  ${color}
+  ${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

@@ -0,0 +1,42 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+
+import { Typography } from "./Typography";
+
+// @component-group Typography Components
+
+/**
+ * Body component is built on top of typography component with default font family and font size.
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Body, Container } from '@bigbinary/neetoui-rn';
+ *
+ * export default function Main() {
+ *  return (
+ *    <Container>
+ *     <Body>
+ *         This is basic example of Body
+ *      </Body>
+ *     </Container>
+ *  );
+ * }
+ *
+ * ```
+ *
+ * @extends StyledSystems props /styled-system
+ */
+
+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

@@ -0,0 +1,42 @@
+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/Caption1.js

@@ -0,0 +1,42 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+
+import { Typography } from "./Typography";
+
+// @component-group Typography Components
+
+/**
+ * Caption1 component is built on top of typography component with default font family and font size.
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Caption1, Container } from '@bigbinary/neetoui-rn';
+ *
+ * export default function Main() {
+ *  return (
+ *    <Container>
+ *     <Caption1>
+ *         This is basic example of Caption1
+ *      </Caption1>
+ *     </Container>
+ *  );
+ * }
+ *
+ * ```
+ *
+ * @extends StyledSystems props /styled-system
+ */
+
+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

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

package/lib/components/Typography/Headline.js

@@ -0,0 +1,42 @@
+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/LargeTitle.js

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

package/lib/components/Typography/Title1.js

@@ -0,0 +1,42 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+
+import { Typography } from "./Typography";
+
+// @component-group Typography Components
+
+/**
+ * Title1 component is built on top of typography component with default font family and font size.
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Title1, Container } from '@bigbinary/neetoui-rn';
+ *
+ * export default function Main() {
+ *  return (
+ *    <Container>
+ *     <Title1>
+ *         This is basic example of Title1
+ *      </Title1>
+ *     </Container>
+ *  );
+ * }
+ *
+ * ```
+ *
+ * @extends StyledSystems props /styled-system
+ */
+
+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

@@ -0,0 +1,42 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+
+import { Typography } from "./Typography";
+
+// @component-group Typography Components
+
+/**
+ * Title2 component is built on top of typography component with default font family and font size.
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Title2, Container } from '@bigbinary/neetoui-rn';
+ *
+ * export default function Main() {
+ *  return (
+ *    <Container>
+ *     <Title2>
+ *         This is basic example of Title2
+ *      </Title2>
+ *     </Container>
+ *  );
+ * }
+ *
+ * ```
+ *
+ * @extends StyledSystems props /styled-system
+ */
+
+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

@@ -0,0 +1,42 @@
+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,
+};

package/lib/components/Typography/Typography.js

@@ -0,0 +1,70 @@
+import * as React from "react";
+import styled from "styled-components/native";
+import { space, layout, 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}
+  ${typography}
+  ${color}
+  ${textStyle}
+`;
+
+// @component-group Typography Components
+
+/**
+ * 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).
+ *
+ * <ul>
+ * <li>space</li>
+ * <li>layout</li>
+ * <li>typography</li>
+ * <li>color</li>
+ * <li>textStyle</li>
+ * </ul>
+ *
+ * <div class="screenshots">
+ *   <img src="screenshots/typography-all.png" />
+ *   <img src="screenshots/typography-colors.png" />
+ *   <img src="screenshots/typography-fonts.png" />
+ * </div>
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Typography, Container } from '@bigbinary/neetoui-rn';
+ *
+ * export default function Main() {
+ *  return (
+ *    <Container>
+ *     <Typography>
+ *         This is basic example of Typography
+ *      </Typography>
+ *     </Container>
+ *  );
+ * }
+ * ```
+ *
+ * @extends StyledSystems props /styled-system
+ */
+
+export const Typography = ({ children, ...rest }) => {
+  return <Text {...rest}>{children}</Text>;
+};
+
+Typography.propTypes = {
+  ...propTypes.space,
+  ...propTypes.layout,
+  ...propTypes.typography,
+  ...propTypes.color,
+  ...propTypes.textStyle,
+  children: PropTypes.node.isRequired,
+};
+
+Typography.defaultProps = {
+  color: "font.primary",
+};

package/lib/components/index.js

@@ -0,0 +1,13 @@
+export { Button } from "./Button";
+export { Container } from "./Container";
+
+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

@@ -1,2 +1,2 @@
-export { Typography } from "./components/Typography";
-export { Button } from "./components/Button";
+export * from "./components/index";
+export * from "./theme/index";

package/lib/theme/index.js

@@ -0,0 +1,75 @@
+import { moderateScale } from "react-native-size-matters";
+
+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",
+    },
+  },
+  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",
+
+    regular: "Inter-Regular",
+    bold: "Inter-Bold",
+  },
+  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),
+  },
+};
+
+export const theme = {
+  ...baseTheme,
+  buttons: {
+    primary: {
+      color: baseTheme.colors.white,
+      backgroundColor: baseTheme.colors.grey800,
+    },
+    secondary: {
+      color: baseTheme.colors.grey800,
+      backgroundColor: baseTheme.colors.white,
+    },
+    disabled: {
+      color: baseTheme.colors.white,
+      backgroundColor: baseTheme.colors.grey,
+    },
+  },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.8",
+  "version": "0.0.12",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -11,6 +11,7 @@
     "test": "jest",
     "lint": "eslint .",
     "format": "prettier --write .",
+    "flow": "flow",
     "precommit": "lint-staged",
     "prestart": "sb-rn-get-stories",
     "storybook-watcher": "sb-rn-watcher",
@@ -40,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",
@@ -58,6 +64,7 @@
     "@storybook/addon-ondevice-controls": "^6.0.1-alpha.6",
     "@storybook/addon-ondevice-knobs": "^5.3.25",
     "@storybook/addon-ondevice-notes": "^6.0.1-alpha.6",
+    "@storybook/addon-storyshots": "^6.3.12",
     "@storybook/addons": "^6.3.1",
     "@storybook/cli": "^6.3.12",
     "@storybook/react": "^6.3.12",
@@ -68,6 +75,7 @@
     "babel-loader": "^8.2.3",
     "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-react-native-web": "^0.17.5",
+    "babel-plugin-transform-remove-console": "^6.9.4",
     "eslint": "7.14.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-import-resolver-babel-module": "^5.3.1",
@@ -81,6 +89,7 @@
     "html-webpack-plugin": "^5.5.0",
     "husky": "^7.0.4",
     "jest": "^26.6.3",
+    "lint-staged": "^12.0.3",
     "metro-react-native-babel-preset": "^0.66.2",
     "prettier": "^2.3.1",
     "react": "17.0.2",
@@ -90,20 +99,20 @@
     "react-native-web": "^0.17.5",
     "react-test-renderer": "17.0.2",
     "serve": "^13.0.2",
-    "styled-components": "^5.3.3",
     "url-loader": "^4.1.1",
     "webpack": "^5.61.0",
     "webpack-cli": "^4.9.1",
     "webpack-dev-server": "^4.4.0"
   },
   "jest": {
-    "preset": "jest-expo",
+    "preset": "react-native",
+    "moduleDirectories": [
+      "node_modules"
+    ],
     "transformIgnorePatterns": [
-      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base)"
+      "node_modules/(?!react-native)/"
     ],
-    "setupFilesAfterEnv": [
-      "<rootDir>/__mocks__/globalMock.js"
-    ]
+    "testEnvironment": "jsdom"
   },
   "repository": {
     "type": "git",
@@ -124,5 +133,8 @@
       "pattern": "**/*.stories.js",
       "outputFile": "./storybook/storyLoader.js"
     }
+  },
+  "resolutions": {
+    "styled-components": "^5"
   }
 }

package/lib/components/Typography.js

@@ -1,23 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { Text } from "react-native";
-
-// const STYLES = {
-//   h1: "h1",
-//   h2: "h2",
-//   h3: "h3",
-//   h4: "h4",
-//   h5: "h5",
-//   h6: "h6",
-//   body1: "body1",
-//   body2: "body2",
-//   body3: "body3",
-// };
-
-export const Typography = ({ label }) => {
-  return <Text>{label}</Text>;
-};
-
-Typography.propTypes = {
-  label: PropTypes.string,
-};