@bigbinary/neetoui-rn 0.0.15 → 0.0.19

package/lib/components/Button.js

@@ -1,30 +1,74 @@
 import * as React from "react";
-import { flexbox, space, border, buttonStyle } from "styled-system";
+import {
+  flexbox,
+  space,
+  border,
+  buttonStyle,
+  color,
+  layout,
+} from "styled-system";
 import styled from "styled-components/native";
 import propTypes from "@styled-system/prop-types";
-import PropTypes from "prop-types";
+import { Typography } from "@components";
 
 export const TouchableOpacity = styled.TouchableOpacity`
+  ${buttonStyle}
   ${flexbox}
   ${space}
   ${border}
-  ${buttonStyle}
+  ${layout}
+  ${color}
 `;
 
-export const Button = ({ children, ...rest }) => {
-  return <TouchableOpacity {...rest}>{children}</TouchableOpacity>;
+export const Button = ({
+  RightIcon,
+  LeftIcon,
+  fontFamily,
+  color,
+  fontSize,
+  ...rest
+}) => {
+  const { disabled } = rest;
+  let style = rest.style || {};
+  if (disabled) {
+    style = { ...style, opacity: 0.5 };
+  }
+  return (
+    <TouchableOpacity
+      flexDirection="row"
+      disabled={disabled}
+      {...rest}
+      style={style}
+    >
+      {RightIcon && <RightIcon />}
+      <Typography
+        textAlign="center"
+        mx={1}
+        color={color}
+        fontFamily={fontFamily || "inter700"}
+        fontSize={fontSize || "s"}
+        textStyle={rest.variant}
+      >
+        {rest.label}
+      </Typography>
+      {LeftIcon && <LeftIcon />}
+    </TouchableOpacity>
+  );
 };
 
 Button.defaultProps = {
-  variant: "primary",
-  p: 15,
+  variant: "solid",
+  p: 12,
   alignItems: "center",
+  justifyContent: "center",
+  borderRadius: 2,
 };
 
 Button.propTypes = {
+  ...propTypes.buttonStyle,
   ...propTypes.flexbox,
   ...propTypes.space,
   ...propTypes.border,
-  ...propTypes.buttonStyle,
-  children: PropTypes.node.isRequired,
+  ...propTypes.layout,
+  ...propTypes.color,
 };

package/lib/components/{Typography/Typography.js → Typography.js}

@@ -7,21 +7,21 @@ import {
   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.
  *
@@ -37,9 +37,13 @@ export const Text = styled.Text`
  * </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
@@ -76,5 +80,5 @@ Typography.propTypes = {
 };
 
 Typography.defaultProps = {
-  color: "font.primary",
+  textStyle: "defaultTextStyle",
 };

package/lib/components/index.js

@@ -1,10 +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 { Body } from "./Typography/Body";
-export { Caption1 } from "./Typography/Caption1";
-export { Caption2 } from "./Typography/Caption2";
+export { Typography } from "./Typography";

package/lib/theme/index.js

@@ -55,15 +55,12 @@ const baseTheme = {
   },
   lineHeights: [24],
   fontSizes: {
-    largeTitle: 32,
-    title1: 24,
-    title2: 18,
-    title3: 18,
-    headline: 14,
-    body: 14,
-    callout: 12,
-    caption1: 12,
-    caption2: 10,
+    xs: 10,
+    s: 12,
+    m: 14,
+    l: 18,
+    xl: 24,
+    xxl: 32,
   },
 };
 
@@ -72,18 +69,47 @@ 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,
+    },
+
+    // buttonTextStyles
+    solid: {
+      color: baseTheme.colors.font.white,
+    },
+    inverse: {
+      color: baseTheme.colors.font.base,
+    },
+    text: {
+      color: baseTheme.colors.font.base,
+    },
+  },
   buttons: {
-    primary: {
-      color: baseTheme.colors.white,
-      backgroundColor: baseTheme.colors.grey800,
+    solid: {
+      backgroundColor: baseTheme.colors.background.base,
     },
-    secondary: {
-      color: baseTheme.colors.grey800,
+    inverse: {
+      border: 2,
+      borderColor: baseTheme.colors.white,
       backgroundColor: baseTheme.colors.white,
     },
-    disabled: {
-      color: baseTheme.colors.white,
-      backgroundColor: baseTheme.colors.grey,
+    text: {
+      color: baseTheme.colors.grey800,
+      backgroundColor: baseTheme.colors.white,
     },
   },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.15",
+  "version": "0.0.19",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",

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" {...rest}>
-      {children}
-    </Typography>
-  );
-};
-
-Body.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" {...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" {...rest}>
-      {children}
-    </Typography>
-  );
-};
-
-Caption2.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" {...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" {...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" {...rest}>
-      {children}
-    </Typography>
-  );
-};
-
-Title2.propTypes = {
-  ...Typography.propTypes,
-  children: PropTypes.node.isRequired,
-};