@bigbinary/neetoui-rn 0.0.12 → 0.0.16

package/README.md

@@ -1,6 +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)
-
-
+[![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).
@@ -11,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.
@@ -43,11 +54,10 @@ folder with static files.
 
 Run `yarn serve` to serve storybook locally.
 
+## Building Component Documentation
 
-## Building Component Documentation 
-
-Run `cd docs`, `yarn build` to build component documentation locally, this would create `dist`
-folder with static files in `docs` folder.
+Run `cd docs`, `yarn build` to build component documentation locally, this would
+create `dist` folder with static files in `docs` folder.
 
 ## Documentation
 

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/Typography.js → Typography.js}

@@ -1,19 +1,27 @@
 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,
+  position,
+} from "styled-system";
 import propTypes from "@styled-system/prop-types";
 import PropTypes from "prop-types";
 
 export const Text = styled.Text`
+  ${textStyle}
   ${space}
   ${layout}
+  ${flexbox}
   ${typography}
   ${color}
-  ${textStyle}
+  ${position}
 `;
 
-// @component-group Typography Components
-
 /**
  * Typography component is a primitive text component which is built on top of styled-system.
  *
@@ -22,15 +30,20 @@ export const Text = styled.Text`
  * <ul>
  * <li>space</li>
  * <li>layout</li>
+ * <li>flexbox</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" />
+ *   <img src="screenshots/typography/fontsizes.png" />
+ *   <img src="screenshots/typography/textstyles.png" />
+ * </div>
+ *
+ * <div class="screenshots">
+ *   <img src="screenshots/typography/fontsizes.png" />
+ *   <img src="screenshots/typography/textstyles.png" />
  * </div>
  *
  *  ## Usage
@@ -59,6 +72,7 @@ export const Typography = ({ children, ...rest }) => {
 Typography.propTypes = {
   ...propTypes.space,
   ...propTypes.layout,
+  ...propTypes.flexbox,
   ...propTypes.typography,
   ...propTypes.color,
   ...propTypes.textStyle,
@@ -66,5 +80,5 @@ Typography.propTypes = {
 };
 
 Typography.defaultProps = {
-  color: "font.primary",
+  textStyle: "defaultTextStyle",
 };

package/lib/components/index.js

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

package/lib/theme/index.js

@@ -1,63 +1,92 @@
-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),
+    xs: 10,
+    s: 12,
+    m: 14,
+    l: 18,
+    xl: 24,
+    xxl: 32,
   },
 };
 
+//aliases
+baseTheme.lineHeights.note = baseTheme.lineHeights[0] + "px";
+
 export const theme = {
   ...baseTheme,
+  textStyles: {
+    defaultTextStyle: {
+      color: baseTheme.colors.font.primary,
+    },
+    header: {
+      color: baseTheme.colors.font.primary,
+      fontSize: baseTheme.fontSizes.l,
+      fontFamily: baseTheme.fonts.inter700,
+    },
+    body: {
+      color: baseTheme.colors.font.primary,
+      fontSize: baseTheme.fontSizes.m,
+    },
+    subtext: {
+      color: baseTheme.colors.font.primary,
+      fontSize: baseTheme.fontSizes.s,
+    },
+  },
   buttons: {
     primary: {
       color: baseTheme.colors.white,
@@ -68,7 +97,7 @@ export const theme = {
       backgroundColor: baseTheme.colors.white,
     },
     disabled: {
-      color: baseTheme.colors.white,
+      color: "#00FF00",
       backgroundColor: baseTheme.colors.grey,
     },
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.12",
+  "version": "0.0.16",
   "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/Body.js

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

@@ -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/Caption1.js

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

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

@@ -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/LargeTitle.js

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

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

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

@@ -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,
-};