@bigbinary/neetoui-rn 0.0.17 → 0.0.21

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

@@ -0,0 +1,172 @@
+import React, { useContext, useState } from "react";
+import { flexbox, space, border, buttonStyle, typography } from "styled-system";
+import styled, { ThemeContext } from "styled-components/native";
+import propTypes from "@styled-system/prop-types";
+import PropTypes from "prop-types";
+import { Typography, Container } from "@components";
+
+export const TextInput = styled.TextInput`
+  ${flexbox}
+  ${space}
+  ${border}
+  ${buttonStyle}
+  ${typography}
+`;
+
+const InputText = ({ theme, text }) => (
+  <Container
+    bg={theme.colors.background.menubackground}
+    justifyContent="center"
+    px={2}
+  >
+    <Typography>{text}</Typography>
+  </Container>
+);
+
+const LabelText = ({ inline, label }) => (
+  <Typography
+    numberOfLines={1}
+    textStyle="subtext"
+    mb={inline ? "12px" : "7px"}
+  >
+    {label}
+  </Typography>
+);
+
+const ErrorMessage = ({ error, message, theme }) => {
+  if (error) {
+    return (
+      <Typography textStyle="subtext" color={theme.colors.font.danger}>
+        {message}
+      </Typography>
+    );
+  }
+  return null;
+};
+
+export const Input = ({
+  label = "",
+  message = "",
+  error = false,
+  onFocus,
+  onBlur,
+  inline = false,
+  brandRight,
+  brandLeft,
+  disabled = false,
+  ...rest
+}) => {
+  const theme = useContext(ThemeContext);
+  const [isFocus, setIsFocus] = useState(false);
+  const borderColor = error
+    ? theme.colors.border.danger
+    : theme.colors.border.primary;
+
+  const handleFocus = e => {
+    onFocus && onFocus(e);
+    setIsFocus(true);
+  };
+
+  const handleBlur = e => {
+    onBlur && onBlur(e);
+    setIsFocus(false);
+  };
+
+  const focusStyles = isFocus && {
+    borderRadius: 4,
+    borderColor: error
+      ? "rgba(255, 105, 105, 0.3)"
+      : theme.colors.border.grey400,
+    borderWidth: inline ? "0px" : "3px",
+    borderStyle: "solid",
+  };
+
+  const disabledStyles = disabled && {
+    opacity: 0.5,
+    bg: theme.colors.background.secondary,
+  };
+
+  const inlineInputStyles = isFocus && {
+    backgroundColor: error
+      ? theme.colors.border.danger
+      : theme.colors.border.base,
+  };
+
+  return (
+    <Container mb={20}>
+      {!inline && <LabelText inline={inline} label={label} />}
+      <Container
+        {...focusStyles}
+        {...disabledStyles}
+        flexDirection={inline && "row"}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+      >
+        {inline && (
+          <Container alignSelf="flex-end" maxWidth={100} px={2}>
+            <LabelText inline={inline} label={label} />
+          </Container>
+        )}
+        <Container flexDirection="row" width="100%">
+          {brandLeft && <InputText theme={theme} text={brandLeft} />}
+          <TextInput
+            height={40}
+            flex={1}
+            textStyle="subtext"
+            {...rest}
+            border={!inline && borderColor}
+            editable={!disabled}
+            color={error ? theme.colors.font.danger : theme.colors.font.primary}
+          />
+          {brandRight && <InputText theme={theme} text={brandRight} />}
+        </Container>
+      </Container>
+      {inline && (
+        <Container
+          backgroundColor={theme.colors.border.primary}
+          height={1}
+          {...inlineInputStyles}
+        />
+      )}
+      <ErrorMessage theme={theme} error={error} message={message} />
+    </Container>
+  );
+};
+
+Input.propTypes = {
+  ...propTypes.flexbox,
+  ...propTypes.space,
+  ...propTypes.border,
+  ...propTypes.buttonStyle,
+  label: PropTypes.string.isRequired,
+  message: PropTypes.string,
+  error: PropTypes.bool,
+  inline: PropTypes.bool,
+  brandRight: PropTypes.string,
+  brandLeft: PropTypes.string,
+  disabled: PropTypes.bool,
+  children: PropTypes.node,
+};
+
+InputText.propTypes = {
+  text: PropTypes.string,
+};
+
+LabelText.propTypes = {
+  inline: PropTypes.bool,
+  label: PropTypes.string,
+};
+
+ErrorMessage.propTypes = {
+  error: PropTypes.bool,
+  message: PropTypes.message,
+};
+
+TextInput.defaultProps = {
+  height: 40,
+  border: 1,
+  px: 2,
+  fontFamily: "inter400",
+  fontSize: "14px",
+  borderRadius: 2,
+};

package/lib/components/index.js

@@ -1,3 +1,4 @@
 export { Button } from "./Button";
 export { Container } from "./Container";
 export { Typography } from "./Typography";
+export { Input } from "./Input";

package/lib/theme/index.js

@@ -3,6 +3,7 @@ const defaultColors = {
   black: "#000000",
   base: "#2f3941",
   danger: "#ff6969",
+  menubackground: "#f4f5f7",
 };
 
 const greyVarients = {
@@ -86,19 +87,30 @@ export const theme = {
       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: "#00FF00",
-      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.17",
+  "version": "0.0.21",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",