@bigbinary/neetoui-rn 0.0.22 → 0.0.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/README.md +14 -8
  2. package/lib/components/Button.js +1 -93
  3. package/lib/components/Container.js +1 -30
  4. package/lib/components/FAB.js +1 -0
  5. package/lib/components/Input.js +1 -172
  6. package/lib/components/Typography.js +1 -84
  7. package/lib/components/index.js +1 -4
  8. package/lib/index.js +1 -2
  9. package/lib/theme/index.js +1 -116
  10. package/package.json +4 -1
  11. package/src/components/Button.js +93 -0
  12. package/src/components/Container.js +30 -0
  13. package/src/components/FAB.js +66 -0
  14. package/src/components/Input.js +188 -0
  15. package/src/components/Typography.js +84 -0
  16. package/src/components/index.js +5 -0
  17. package/src/index.js +2 -0
  18. package/src/theme/index.js +116 -0
package/README.md CHANGED
@@ -30,16 +30,16 @@ Install all the dependencies by executing following command.
30
30
  yarn
31
31
  ```
32
32
 
33
- You can create new components in the `lib/components` and export them from
34
- `lib/index.js`. You can create stories in `storybook/stories`.
33
+ You can create new components in the `src/components` and export them from
34
+ `src/components/index.js`. You can create stories in `storybook/stories`.
35
35
 
36
36
  You can use below commands for running storybook in different platforms:
37
37
 
38
- | Platform | Command |
39
- | -------- | -------------------- |
40
- | Android | `yarn android` |
41
- | iOS: | `yarn ios` |
42
- | Web | `yarn storybook-web` |
38
+ | Platform | Command |
39
+ | -------- | -------------- |
40
+ | Android | `yarn android` |
41
+ | iOS: | `yarn ios` |
42
+ | Web | `yarn web` |
43
43
 
44
44
  ## Auto Publish to NPM
45
45
 
@@ -54,6 +54,10 @@ folder with static files.
54
54
 
55
55
  Run `yarn serve` to serve storybook locally.
56
56
 
57
+ ## Running Component Documentation
58
+
59
+ Run `cd docs`, `yarn start` to run component documentation locally.
60
+
57
61
  ## Building Component Documentation
58
62
 
59
63
  Run `cd docs`, `yarn build` to build component documentation locally, this would
@@ -63,4 +67,6 @@ create `dist` folder with static files in `docs` folder.
63
67
 
64
68
  Read the docs here.
65
69
 
66
- https://neetoui-rn.netlify.app
70
+ Docs: https://neetoui-rn-docs.netlify.app/
71
+
72
+ Storybook: https://neetoui-rn.netlify.app
package/lib/components/Button.js CHANGED
@@ -1,93 +1 @@
1
- import * as React from "react";
2
- import {
3
- flexbox,
4
- space,
5
- border,
6
- buttonStyle,
7
- color,
8
- layout,
9
- } from "styled-system";
10
- import styled from "styled-components/native";
11
- import propTypes from "@styled-system/prop-types";
12
- import { Typography, Container } from "@components";
13
- import PropTypes from "prop-types";
14
-
15
- export const TouchableOpacity = styled.TouchableOpacity`
16
- ${buttonStyle}
17
- ${flexbox}
18
- ${space}
19
- ${border}
20
- ${layout}
21
- ${color}
22
- `;
23
-
24
- export const Button = ({
25
- RightIcon,
26
- LeftIcon,
27
- fontFamily,
28
- color,
29
- fontSize,
30
- loadingText,
31
- isLoading,
32
- Loader,
33
- disabled,
34
- variant,
35
- ...rest
36
- }) => {
37
- let style = rest.style || {};
38
- if (disabled || isLoading) {
39
- style = { ...style, opacity: 0.5 };
40
- }
41
-
42
- return (
43
- <TouchableOpacity
44
- flexDirection="row"
45
- disabled={disabled || isLoading}
46
- {...rest}
47
- variant={variant}
48
- style={style}
49
- >
50
- {Loader && (
51
- <Container mx={1}>
52
- <Loader />
53
- </Container>
54
- )}
55
- {LeftIcon && <LeftIcon />}
56
- <Typography
57
- textAlign="center"
58
- mx={1}
59
- color={color}
60
- fontFamily={fontFamily || "inter700"}
61
- fontSize={fontSize || "s"}
62
- textStyle={variant}
63
- >
64
- {isLoading ? loadingText : rest.label}
65
- </Typography>
66
- {RightIcon && <RightIcon />}
67
- </TouchableOpacity>
68
- );
69
- };
70
-
71
- Button.defaultProps = {
72
- variant: "solid",
73
- p: 12,
74
- alignItems: "center",
75
- justifyContent: "center",
76
- borderRadius: 2,
77
- loadingText: "Loading…",
78
- };
79
-
80
- Button.propTypes = {
81
- ...propTypes.buttonStyle,
82
- ...propTypes.flexbox,
83
- ...propTypes.space,
84
- ...propTypes.border,
85
- ...propTypes.layout,
86
- ...propTypes.color,
87
- label: PropTypes.string.isRequired,
88
- RightIcon: PropTypes.elementType,
89
- LeftIcon: PropTypes.elementType,
90
- loadingText: PropTypes.string,
91
- isLoading: PropTypes.bool,
92
- Loader: PropTypes.elementType,
93
- };
1
+ var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TouchableOpacity=exports.Button=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var React=_interopRequireWildcard(require("react"));var _styledSystem=require("styled-system");var _native=_interopRequireDefault(require("styled-components/native"));var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _=require("./");var _propTypes2=_interopRequireDefault(require("prop-types"));var _excluded=["RightIcon","LeftIcon","fontFamily","color","fontSize","loadingText","isLoading","Loader","disabled","variant"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Button.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var TouchableOpacity=_native.default.TouchableOpacity(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.buttonStyle,_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.layout,_styledSystem.color);exports.TouchableOpacity=TouchableOpacity;var Button=function Button(_ref){var RightIcon=_ref.RightIcon,LeftIcon=_ref.LeftIcon,fontFamily=_ref.fontFamily,color=_ref.color,fontSize=_ref.fontSize,loadingText=_ref.loadingText,isLoading=_ref.isLoading,Loader=_ref.Loader,disabled=_ref.disabled,variant=_ref.variant,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var style=rest.style||{};if(disabled||isLoading){style=(0,_extends2.default)({},style,{opacity:0.5});}return React.createElement(TouchableOpacity,(0,_extends2.default)({flexDirection:"row",disabled:disabled||isLoading},rest,{variant:variant,style:style,__self:_this,__source:{fileName:_jsxFileName,lineNumber:43,columnNumber:5}}),Loader&&isLoading&&React.createElement(_.Container,{mx:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:51,columnNumber:9}},React.createElement(Loader,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:52,columnNumber:11}})),LeftIcon&&React.createElement(LeftIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:55,columnNumber:20}}),React.createElement(_.Typography,{textAlign:"center",mx:1,color:color,fontFamily:fontFamily||"inter700",fontSize:fontSize||"s",textStyle:variant,__self:_this,__source:{fileName:_jsxFileName,lineNumber:56,columnNumber:7}},isLoading?loadingText:rest.label),RightIcon&&React.createElement(RightIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:66,columnNumber:21}}));};exports.Button=Button;Button.defaultProps={variant:"solid",p:12,alignItems:"center",justifyContent:"center",borderRadius:2,loadingText:"Loading…"};Button.propTypes=(0,_extends2.default)({},_propTypes.default.buttonStyle,_propTypes.default.flexbox,_propTypes.default.space,_propTypes.default.border,_propTypes.default.layout,_propTypes.default.color,{label:_propTypes2.default.string.isRequired,RightIcon:_propTypes2.default.elementType,LeftIcon:_propTypes2.default.elementType,loadingText:_propTypes2.default.string,isLoading:_propTypes2.default.bool,Loader:_propTypes2.default.elementType});
package/lib/components/Container.js CHANGED
@@ -1,30 +1 @@
1
- import * as React from "react";
2
- import { flexbox, space, border, color, layout } from "styled-system";
3
- import styled from "styled-components/native";
4
- import propTypes from "@styled-system/prop-types";
5
- import PropTypes from "prop-types";
6
-
7
- const View = styled.View`
8
- ${flexbox}
9
- ${space}
10
- ${border}
11
- ${color}
12
- ${layout}
13
- `;
14
-
15
- export const Container = ({ children, ...rest }) => {
16
- return <View {...rest}>{children}</View>;
17
- };
18
-
19
- Container.defaultProps = {
20
- color: "background.primary",
21
- };
22
-
23
- Container.propTypes = {
24
- ...propTypes.flexbox,
25
- ...propTypes.space,
26
- ...propTypes.border,
27
- ...propTypes.color,
28
- ...propTypes.layout,
29
- children: PropTypes.node.isRequired,
30
- };
1
+ var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Container=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var React=_interopRequireWildcard(require("react"));var _styledSystem=require("styled-system");var _native=_interopRequireDefault(require("styled-components/native"));var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _excluded=["children"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Container.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var View=_native.default.View(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.color,_styledSystem.layout);var Container=function Container(_ref){var children=_ref.children,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);return React.createElement(View,(0,_extends2.default)({},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:16,columnNumber:10}}),children);};exports.Container=Container;Container.defaultProps={color:"background.primary"};Container.propTypes=(0,_extends2.default)({},_propTypes.default.flexbox,_propTypes.default.space,_propTypes.default.border,_propTypes.default.color,_propTypes.default.layout,{children:_propTypes2.default.node.isRequired});
package/lib/components/FAB.js ADDED
@@ -0,0 +1 @@
1
+ var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TouchableOpacity=exports.FAB=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var React=_interopRequireWildcard(require("react"));var _styledSystem=require("styled-system");var _native=_interopRequireDefault(require("styled-components/native"));var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _excluded=["Icon","bg","disabled"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/FAB.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var TouchableOpacity=_native.default.TouchableOpacity(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.buttonStyle,_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.layout,_styledSystem.color);exports.TouchableOpacity=TouchableOpacity;var FAB=function FAB(_ref){var Icon=_ref.Icon,bg=_ref.bg,disabled=_ref.disabled,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var shadowStyle={shadowColor:"#000",shadowOffset:{width:0,height:2},shadowOpacity:0.25,shadowRadius:3.84,elevation:5};var style=rest.style||{};if(disabled){style=(0,_extends2.default)({},style,{opacity:0.5});}return React.createElement(TouchableOpacity,(0,_extends2.default)({bg:bg,disabled:disabled},rest,{style:[style,shadowStyle],__self:_this,__source:{fileName:_jsxFileName,lineNumber:40,columnNumber:5}}),React.createElement(Icon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:46,columnNumber:7}}));};exports.FAB=FAB;FAB.defaultProps={variant:"solid",size:56,alignItems:"center",justifyContent:"center",borderRadius:28};FAB.propTypes=(0,_extends2.default)({},_propTypes.default.flexbox,_propTypes.default.space,_propTypes.default.border,_propTypes.default.layout,_propTypes.default.color,{Icon:_propTypes2.default.elementType.isRequired});
package/lib/components/Input.js CHANGED
@@ -1,172 +1 @@
1
- import React, { useContext, useState } from "react";
2
- import { flexbox, space, border, buttonStyle, typography } from "styled-system";
3
- import styled, { ThemeContext } from "styled-components/native";
4
- import propTypes from "@styled-system/prop-types";
5
- import PropTypes from "prop-types";
6
- import { Typography, Container } from "@components";
7
-
8
- export const TextInput = styled.TextInput`
9
- ${flexbox}
10
- ${space}
11
- ${border}
12
- ${buttonStyle}
13
- ${typography}
14
- `;
15
-
16
- const InputText = ({ theme, text }) => (
17
- <Container
18
- bg={theme.colors.background.menubackground}
19
- justifyContent="center"
20
- px={2}
21
- >
22
- <Typography>{text}</Typography>
23
- </Container>
24
- );
25
-
26
- const LabelText = ({ inline, label }) => (
27
- <Typography
28
- numberOfLines={1}
29
- textStyle="subtext"
30
- mb={inline ? "12px" : "7px"}
31
- >
32
- {label}
33
- </Typography>
34
- );
35
-
36
- const ErrorMessage = ({ error, message, theme }) => {
37
- if (error) {
38
- return (
39
- <Typography textStyle="subtext" color={theme.colors.font.danger}>
40
- {message}
41
- </Typography>
42
- );
43
- }
44
- return null;
45
- };
46
-
47
- export const Input = ({
48
- label = "",
49
- message = "",
50
- error = false,
51
- onFocus,
52
- onBlur,
53
- inline = false,
54
- brandRight,
55
- brandLeft,
56
- disabled = false,
57
- ...rest
58
- }) => {
59
- const theme = useContext(ThemeContext);
60
- const [isFocus, setIsFocus] = useState(false);
61
- const borderColor = error
62
- ? theme.colors.border.danger
63
- : theme.colors.border.primary;
64
-
65
- const handleFocus = e => {
66
- onFocus && onFocus(e);
67
- setIsFocus(true);
68
- };
69
-
70
- const handleBlur = e => {
71
- onBlur && onBlur(e);
72
- setIsFocus(false);
73
- };
74
-
75
- const focusStyles = isFocus && {
76
- borderRadius: 4,
77
- borderColor: error
78
- ? "rgba(255, 105, 105, 0.3)"
79
- : theme.colors.border.grey400,
80
- borderWidth: inline ? "0px" : "3px",
81
- borderStyle: "solid",
82
- };
83
-
84
- const disabledStyles = disabled && {
85
- opacity: 0.5,
86
- bg: theme.colors.background.secondary,
87
- };
88
-
89
- const inlineInputStyles = isFocus && {
90
- backgroundColor: error
91
- ? theme.colors.border.danger
92
- : theme.colors.border.base,
93
- };
94
-
95
- return (
96
- <Container mb={20}>
97
- {!inline && <LabelText inline={inline} label={label} />}
98
- <Container
99
- {...focusStyles}
100
- {...disabledStyles}
101
- flexDirection={inline && "row"}
102
- onBlur={handleBlur}
103
- onFocus={handleFocus}
104
- >
105
- {inline && (
106
- <Container alignSelf="flex-end" maxWidth={100} px={2}>
107
- <LabelText inline={inline} label={label} />
108
- </Container>
109
- )}
110
- <Container flexDirection="row" width="100%">
111
- {brandLeft && <InputText theme={theme} text={brandLeft} />}
112
- <TextInput
113
- height={40}
114
- flex={1}
115
- textStyle="subtext"
116
- {...rest}
117
- border={!inline && borderColor}
118
- editable={!disabled}
119
- color={error ? theme.colors.font.danger : theme.colors.font.primary}
120
- />
121
- {brandRight && <InputText theme={theme} text={brandRight} />}
122
- </Container>
123
- </Container>
124
- {inline && (
125
- <Container
126
- backgroundColor={theme.colors.border.primary}
127
- height={1}
128
- {...inlineInputStyles}
129
- />
130
- )}
131
- <ErrorMessage theme={theme} error={error} message={message} />
132
- </Container>
133
- );
134
- };
135
-
136
- Input.propTypes = {
137
- ...propTypes.flexbox,
138
- ...propTypes.space,
139
- ...propTypes.border,
140
- ...propTypes.buttonStyle,
141
- label: PropTypes.string.isRequired,
142
- message: PropTypes.string,
143
- error: PropTypes.bool,
144
- inline: PropTypes.bool,
145
- brandRight: PropTypes.string,
146
- brandLeft: PropTypes.string,
147
- disabled: PropTypes.bool,
148
- children: PropTypes.node,
149
- };
150
-
151
- InputText.propTypes = {
152
- text: PropTypes.string,
153
- };
154
-
155
- LabelText.propTypes = {
156
- inline: PropTypes.bool,
157
- label: PropTypes.string,
158
- };
159
-
160
- ErrorMessage.propTypes = {
161
- error: PropTypes.bool,
162
- message: PropTypes.message,
163
- };
164
-
165
- TextInput.defaultProps = {
166
- height: 40,
167
- border: 1,
168
- px: 2,
169
- fontFamily: "inter400",
170
- fontSize: "14px",
171
- borderRadius: 2,
172
- };
1
+ var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TextInput=exports.Input=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _styledSystem=require("styled-system");var _native=_interopRequireWildcard(require("styled-components/native"));var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _=require("./");var _excluded=["label","message","error","onFocus","onBlur","inline","brandRight","brandLeft","disabled"];var _templateObject,_templateObject2,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Input.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var TextInput=_native.default.TextInput(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.buttonStyle,_styledSystem.typography);exports.TextInput=TextInput;var View=_native.default.View(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.color,_styledSystem.layout);var InputText=function InputText(_ref){var theme=_ref.theme,text=_ref.text;return _react.default.createElement(_.Container,{bg:theme.colors.background.menubackground,justifyContent:"center",px:2,__self:_this,__source:{fileName:_jsxFileName,lineNumber:33,columnNumber:3}},_react.default.createElement(_.Typography,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:38,columnNumber:5}},text));};var LabelText=function LabelText(_ref2){var inline=_ref2.inline,label=_ref2.label;return _react.default.createElement(_.Typography,{numberOfLines:1,textStyle:"subtext",mb:inline?"12px":"7px",__self:_this,__source:{fileName:_jsxFileName,lineNumber:43,columnNumber:3}},label);};var ErrorMessage=function ErrorMessage(_ref3){var error=_ref3.error,message=_ref3.message,theme=_ref3.theme;if(error){return _react.default.createElement(_.Typography,{textStyle:"subtext",color:theme.colors.font.danger,__self:_this,__source:{fileName:_jsxFileName,lineNumber:55,columnNumber:7}},message);}return null;};var Input=function Input(_ref4){var _ref4$label=_ref4.label,label=_ref4$label===void 0?"":_ref4$label,_ref4$message=_ref4.message,message=_ref4$message===void 0?"":_ref4$message,_ref4$error=_ref4.error,error=_ref4$error===void 0?false:_ref4$error,onFocus=_ref4.onFocus,onBlur=_ref4.onBlur,_ref4$inline=_ref4.inline,inline=_ref4$inline===void 0?false:_ref4$inline,brandRight=_ref4.brandRight,brandLeft=_ref4.brandLeft,_ref4$disabled=_ref4.disabled,disabled=_ref4$disabled===void 0?false:_ref4$disabled,rest=(0,_objectWithoutProperties2.default)(_ref4,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isFocus=_useState2[0],setIsFocus=_useState2[1];var borderColor=error?theme.colors.border.danger:theme.colors.border.primary;var handleFocus=function handleFocus(e){onFocus&&onFocus(e);setIsFocus(true);};var handleBlur=function handleBlur(e){onBlur&&onBlur(e);setIsFocus(false);};var focusStyles=isFocus&&{borderRadius:4,borderColor:error?"rgba(255, 105, 105, 0.3)":theme.colors.border.grey400,borderWidth:inline?"0px":"3px",borderStyle:"solid"};var disabledStyles=disabled&&{opacity:0.5,bg:theme.colors.background.secondary};var inlineInputStyles=isFocus&&{backgroundColor:error?theme.colors.border.danger:theme.colors.border.base};return _react.default.createElement(_.Container,{mb:20,__self:_this,__source:{fileName:_jsxFileName,lineNumber:112,columnNumber:5}},!inline&&_react.default.createElement(LabelText,{inline:inline,label:label,__self:_this,__source:{fileName:_jsxFileName,lineNumber:113,columnNumber:19}}),_react.default.createElement(_.Container,(0,_extends2.default)({},focusStyles,disabledStyles,{flexDirection:inline?"row":"column",onBlur:handleBlur,onFocus:handleFocus,__self:_this,__source:{fileName:_jsxFileName,lineNumber:114,columnNumber:7}}),inline&&_react.default.createElement(_.Container,{alignSelf:"flex-end",maxWidth:100,px:2,__self:_this,__source:{fileName:_jsxFileName,lineNumber:122,columnNumber:11}},_react.default.createElement(LabelText,{inline:inline,label:label,__self:_this,__source:{fileName:_jsxFileName,lineNumber:123,columnNumber:13}})),_react.default.createElement(_.Container,{flexDirection:"row",width:"100%",__self:_this,__source:{fileName:_jsxFileName,lineNumber:126,columnNumber:9}},brandLeft&&_react.default.createElement(InputText,{theme:theme,text:brandLeft,__self:_this,__source:{fileName:_jsxFileName,lineNumber:127,columnNumber:25}}),_react.default.createElement(TextInput,(0,_extends2.default)({height:40,flex:1,textStyle:"subtext"},rest,{border:!inline&&borderColor,editable:!disabled,color:error?theme.colors.font.danger:theme.colors.font.primary,__self:_this,__source:{fileName:_jsxFileName,lineNumber:128,columnNumber:11}})),brandRight&&_react.default.createElement(InputText,{theme:theme,text:brandRight,__self:_this,__source:{fileName:_jsxFileName,lineNumber:137,columnNumber:26}}))),inline&&_react.default.createElement(View,(0,_extends2.default)({backgroundColor:theme.colors.border.primary,height:1},inlineInputStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:141,columnNumber:9}})),_react.default.createElement(ErrorMessage,{theme:theme,error:error,message:message,__self:_this,__source:{fileName:_jsxFileName,lineNumber:147,columnNumber:7}}));};exports.Input=Input;Input.propTypes=(0,_extends2.default)({},_propTypes.default.flexbox,_propTypes.default.space,_propTypes.default.border,_propTypes.default.buttonStyle,{label:_propTypes2.default.string.isRequired,message:_propTypes2.default.string,error:_propTypes2.default.bool,inline:_propTypes2.default.bool,brandRight:_propTypes2.default.string,brandLeft:_propTypes2.default.string,disabled:_propTypes2.default.bool,children:_propTypes2.default.node});InputText.propTypes={text:_propTypes2.default.string};LabelText.propTypes={inline:_propTypes2.default.bool,label:_propTypes2.default.string};ErrorMessage.propTypes={error:_propTypes2.default.bool,message:_propTypes2.default.string};TextInput.defaultProps={height:40,border:1,px:2,fontFamily:"inter400",fontSize:"14px",borderRadius:2};
package/lib/components/Typography.js CHANGED
@@ -1,84 +1 @@
1
- import * as React from "react";
2
- import styled from "styled-components/native";
3
- import {
4
- space,
5
- layout,
6
- flexbox,
7
- typography,
8
- color,
9
- textStyle,
10
- position,
11
- } from "styled-system";
12
- import propTypes from "@styled-system/prop-types";
13
- import PropTypes from "prop-types";
14
-
15
- export const Text = styled.Text`
16
- ${textStyle}
17
- ${space}
18
- ${layout}
19
- ${flexbox}
20
- ${typography}
21
- ${color}
22
- ${position}
23
- `;
24
-
25
- /**
26
- * Typography component is a primitive text component which is built on top of styled-system.
27
- *
28
- * This component supports below props categories from [styled-system ](/styled-system).
29
- *
30
- * <ul>
31
- * <li>space</li>
32
- * <li>layout</li>
33
- * <li>flexbox</li>
34
- * <li>typography</li>
35
- * <li>color</li>
36
- * <li>textStyle</li>
37
- * </ul>
38
- *
39
- * <div class="screenshots">
40
- * <img src="screenshots/typography/fontsizes.png" />
41
- * <img src="screenshots/typography/textstyles.png" />
42
- * </div>
43
- *
44
- * <div class="screenshots">
45
- * <img src="screenshots/typography/fontsizes.png" />
46
- * <img src="screenshots/typography/textstyles.png" />
47
- * </div>
48
- *
49
- * ## Usage
50
- * ```js
51
- * import * as React from 'react';
52
- * import { Typography, Container } from '@bigbinary/neetoui-rn';
53
- *
54
- * export default function Main() {
55
- * return (
56
- * <Container>
57
- * <Typography>
58
- * This is basic example of Typography
59
- * </Typography>
60
- * </Container>
61
- * );
62
- * }
63
- * ```
64
- *
65
- * @extends StyledSystems props /styled-system
66
- */
67
-
68
- export const Typography = ({ children, ...rest }) => {
69
- return <Text {...rest}>{children}</Text>;
70
- };
71
-
72
- Typography.propTypes = {
73
- ...propTypes.space,
74
- ...propTypes.layout,
75
- ...propTypes.flexbox,
76
- ...propTypes.typography,
77
- ...propTypes.color,
78
- ...propTypes.textStyle,
79
- children: PropTypes.node.isRequired,
80
- };
81
-
82
- Typography.defaultProps = {
83
- textStyle: "defaultTextStyle",
84
- };
1
+ var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Typography=exports.Text=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var React=_interopRequireWildcard(require("react"));var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _excluded=["children"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Typography.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var Text=_native.default.Text(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.textStyle,_styledSystem.space,_styledSystem.layout,_styledSystem.flexbox,_styledSystem.typography,_styledSystem.color,_styledSystem.position);exports.Text=Text;var Typography=function Typography(_ref){var children=_ref.children,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);return React.createElement(Text,(0,_extends2.default)({},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:69,columnNumber:10}}),children);};exports.Typography=Typography;Typography.propTypes=(0,_extends2.default)({},_propTypes.default.space,_propTypes.default.layout,_propTypes.default.flexbox,_propTypes.default.typography,_propTypes.default.color,_propTypes.default.textStyle,{children:_propTypes2.default.node.isRequired});Typography.defaultProps={textStyle:"defaultTextStyle"};
package/lib/components/index.js CHANGED
@@ -1,4 +1 @@
1
- export { Button } from "./Button";
2
- export { Container } from "./Container";
3
- export { Typography } from "./Typography";
4
- export { Input } from "./Input";
1
+ Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"Container",{enumerable:true,get:function get(){return _Container.Container;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");
package/lib/index.js CHANGED
@@ -1,2 +1 @@
1
- export * from "./components/index";
2
- export * from "./theme/index";
1
+ Object.defineProperty(exports,"__esModule",{value:true});var _index=require("./components/index");Object.keys(_index).forEach(function(key){if(key==="default"||key==="__esModule")return;if(key in exports&&exports[key]===_index[key])return;Object.defineProperty(exports,key,{enumerable:true,get:function get(){return _index[key];}});});var _index2=require("./theme/index");Object.keys(_index2).forEach(function(key){if(key==="default"||key==="__esModule")return;if(key in exports&&exports[key]===_index2[key])return;Object.defineProperty(exports,key,{enumerable:true,get:function get(){return _index2[key];}});});
package/lib/theme/index.js CHANGED
@@ -1,116 +1 @@
1
- const defaultColors = {
2
- white: "#ffffff",
3
- black: "#000000",
4
- base: "#2f3941",
5
- danger: "#ff6969",
6
- menubackground: "#f4f5f7",
7
- };
8
-
9
- const greyVarients = {
10
- grey: "#828282",
11
- grey100: "#f8f9f9",
12
- grey200: "#e9ebed",
13
- grey300: "#d8dcde",
14
- grey400: "#c2c8cc",
15
- grey500: "#87929d",
16
- grey600: "#68737d",
17
- grey800: "#2f3941",
18
- };
19
-
20
- const colors = {
21
- font: {
22
- primary: "#1b1f23",
23
- secondary: "#828282",
24
- ...defaultColors,
25
- ...greyVarients,
26
- },
27
- background: {
28
- primary: "#ffffff",
29
- secondary: "#e4e4e7",
30
- ...defaultColors,
31
- ...greyVarients,
32
- },
33
- border: {
34
- primary: "#e4e4e7",
35
- ...greyVarients,
36
- ...defaultColors,
37
- },
38
- };
39
-
40
- const baseTheme = {
41
- colors,
42
- fonts: {
43
- // We can add below commented fonts later as follows. Also add font faces in index.web.js for the web.
44
- // https://www.bigbinary.com/learn-react-native/adding-custom-fonats
45
-
46
- // inter100: "Inter-Thin",
47
- // inter200: "Inter-ExtraLight",
48
- // inter300: "Inter-Light",
49
- // inter500: "Inter-Medium",
50
- // inter600: "Inter-SemiBold",
51
- // inter800: "Inter-ExtraBold",
52
- // inter900: "Inter-Black",
53
-
54
- inter400: "Inter-Regular",
55
- inter700: "Inter-Bold",
56
- },
57
- lineHeights: [24],
58
- fontSizes: {
59
- xs: 10,
60
- s: 12,
61
- m: 14,
62
- l: 18,
63
- xl: 24,
64
- xxl: 32,
65
- },
66
- };
67
-
68
- //aliases
69
- baseTheme.lineHeights.note = baseTheme.lineHeights[0] + "px";
70
-
71
- export const theme = {
72
- ...baseTheme,
73
- textStyles: {
74
- defaultTextStyle: {
75
- color: baseTheme.colors.font.primary,
76
- },
77
- header: {
78
- color: baseTheme.colors.font.primary,
79
- fontSize: baseTheme.fontSizes.l,
80
- fontFamily: baseTheme.fonts.inter700,
81
- },
82
- body: {
83
- color: baseTheme.colors.font.primary,
84
- fontSize: baseTheme.fontSizes.m,
85
- },
86
- subtext: {
87
- color: baseTheme.colors.font.primary,
88
- fontSize: baseTheme.fontSizes.s,
89
- },
90
-
91
- // buttonTextStyles
92
- solid: {
93
- color: baseTheme.colors.font.white,
94
- },
95
- inverse: {
96
- color: baseTheme.colors.font.base,
97
- },
98
- text: {
99
- color: baseTheme.colors.font.base,
100
- },
101
- },
102
- buttons: {
103
- solid: {
104
- backgroundColor: baseTheme.colors.background.base,
105
- },
106
- inverse: {
107
- border: 2,
108
- borderColor: baseTheme.colors.white,
109
- backgroundColor: baseTheme.colors.white,
110
- },
111
- text: {
112
- color: baseTheme.colors.grey800,
113
- backgroundColor: baseTheme.colors.white,
114
- },
115
- },
116
- };
1
+ var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.theme=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var defaultColors={white:"#ffffff",black:"#000000",base:"#2f3941",danger:"#ff6969",menubackground:"#f4f5f7"};var greyVarients={grey:"#828282",grey100:"#f8f9f9",grey200:"#e9ebed",grey300:"#d8dcde",grey400:"#c2c8cc",grey500:"#87929d",grey600:"#68737d",grey800:"#2f3941"};var colors={font:(0,_extends2.default)({primary:"#1b1f23",secondary:"#828282"},defaultColors,greyVarients),background:(0,_extends2.default)({primary:"#ffffff",secondary:"#e4e4e7"},defaultColors,greyVarients),border:(0,_extends2.default)({primary:"#e4e4e7"},greyVarients,defaultColors)};var baseTheme={colors:colors,fonts:{inter400:"Inter-Regular",inter700:"Inter-Bold"},lineHeights:[24],fontSizes:{xs:10,s:12,m:14,l:18,xl:24,xxl:32}};baseTheme.lineHeights.note=baseTheme.lineHeights[0]+"px";var theme=(0,_extends2.default)({},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},solid:{color:baseTheme.colors.font.white},inverse:{color:baseTheme.colors.font.base},text:{color:baseTheme.colors.font.base}},buttons:{solid:{backgroundColor:baseTheme.colors.background.base},inverse:{border:2,borderColor:baseTheme.colors.border.base,backgroundColor:baseTheme.colors.background.white},text:{color:baseTheme.colors.font.grey800,backgroundColor:baseTheme.colors.background.white}}});exports.theme=theme;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bigbinary/neetoui-rn",
3
- "version": "0.0.22",
3
+ "version": "0.0.26",
4
4
  "main": "lib/index.js",
5
5
  "author": "BigBinary",
6
6
  "license": "MIT",
@@ -9,6 +9,7 @@
9
9
  "ios": "yarn prestart && react-native run-ios",
10
10
  "start": "react-native start",
11
11
  "test": "jest",
12
+ "build": "babel src --out-dir lib",
12
13
  "lint": "eslint .",
13
14
  "format": "prettier --write .",
14
15
  "flow": "flow",
@@ -27,6 +28,7 @@
27
28
  },
28
29
  "files": [
29
30
  "lib",
31
+ "src",
30
32
  "react-native.config.js",
31
33
  "assets"
32
34
  ],
@@ -49,6 +51,7 @@
49
51
  "styled-system": "^5.1.5"
50
52
  },
51
53
  "devDependencies": {
54
+ "@babel/cli": "^7.16.0",
52
55
  "@babel/core": "^7.12.9",
53
56
  "@babel/runtime": "^7.12.5",
54
57
  "@react-native-async-storage/async-storage": "^1.15.11",
package/src/components/Button.js ADDED
@@ -0,0 +1,93 @@
1
+ import * as React from "react";
2
+ import {
3
+ flexbox,
4
+ space,
5
+ border,
6
+ buttonStyle,
7
+ color,
8
+ layout,
9
+ } from "styled-system";
10
+ import styled from "styled-components/native";
11
+ import propTypes from "@styled-system/prop-types";
12
+ import { Typography, Container } from "@components";
13
+ import PropTypes from "prop-types";
14
+
15
+ export const TouchableOpacity = styled.TouchableOpacity`
16
+ ${buttonStyle}
17
+ ${flexbox}
18
+ ${space}
19
+ ${border}
20
+ ${layout}
21
+ ${color}
22
+ `;
23
+
24
+ export const Button = ({
25
+ RightIcon,
26
+ LeftIcon,
27
+ fontFamily,
28
+ color,
29
+ fontSize,
30
+ loadingText,
31
+ isLoading,
32
+ Loader,
33
+ disabled,
34
+ variant,
35
+ ...rest
36
+ }) => {
37
+ let style = rest.style || {};
38
+ if (disabled || isLoading) {
39
+ style = { ...style, opacity: 0.5 };
40
+ }
41
+
42
+ return (
43
+ <TouchableOpacity
44
+ flexDirection="row"
45
+ disabled={disabled || isLoading}
46
+ {...rest}
47
+ variant={variant}
48
+ style={style}
49
+ >
50
+ {Loader && isLoading && (
51
+ <Container mx={1}>
52
+ <Loader />
53
+ </Container>
54
+ )}
55
+ {LeftIcon && <LeftIcon />}
56
+ <Typography
57
+ textAlign="center"
58
+ mx={1}
59
+ color={color}
60
+ fontFamily={fontFamily || "inter700"}
61
+ fontSize={fontSize || "s"}
62
+ textStyle={variant}
63
+ >
64
+ {isLoading ? loadingText : rest.label}
65
+ </Typography>
66
+ {RightIcon && <RightIcon />}
67
+ </TouchableOpacity>
68
+ );
69
+ };
70
+
71
+ Button.defaultProps = {
72
+ variant: "solid",
73
+ p: 12,
74
+ alignItems: "center",
75
+ justifyContent: "center",
76
+ borderRadius: 2,
77
+ loadingText: "Loading…",
78
+ };
79
+
80
+ Button.propTypes = {
81
+ ...propTypes.buttonStyle,
82
+ ...propTypes.flexbox,
83
+ ...propTypes.space,
84
+ ...propTypes.border,
85
+ ...propTypes.layout,
86
+ ...propTypes.color,
87
+ label: PropTypes.string.isRequired,
88
+ RightIcon: PropTypes.elementType,
89
+ LeftIcon: PropTypes.elementType,
90
+ loadingText: PropTypes.string,
91
+ isLoading: PropTypes.bool,
92
+ Loader: PropTypes.elementType,
93
+ };
package/src/components/Container.js ADDED
@@ -0,0 +1,30 @@
1
+ import * as React from "react";
2
+ import { flexbox, space, border, color, layout } from "styled-system";
3
+ import styled from "styled-components/native";
4
+ import propTypes from "@styled-system/prop-types";
5
+ import PropTypes from "prop-types";
6
+
7
+ const View = styled.View`
8
+ ${flexbox}
9
+ ${space}
10
+ ${border}
11
+ ${color}
12
+ ${layout}
13
+ `;
14
+
15
+ export const Container = ({ children, ...rest }) => {
16
+ return <View {...rest}>{children}</View>;
17
+ };
18
+
19
+ Container.defaultProps = {
20
+ color: "background.primary",
21
+ };
22
+
23
+ Container.propTypes = {
24
+ ...propTypes.flexbox,
25
+ ...propTypes.space,
26
+ ...propTypes.border,
27
+ ...propTypes.color,
28
+ ...propTypes.layout,
29
+ children: PropTypes.node.isRequired,
30
+ };
package/src/components/FAB.js ADDED
@@ -0,0 +1,66 @@
1
+ import * as React from "react";
2
+ import {
3
+ flexbox,
4
+ space,
5
+ border,
6
+ buttonStyle,
7
+ color,
8
+ layout,
9
+ } from "styled-system";
10
+ import styled from "styled-components/native";
11
+ import propTypes from "@styled-system/prop-types";
12
+ import PropTypes from "prop-types";
13
+
14
+ export const TouchableOpacity = styled.TouchableOpacity`
15
+ ${buttonStyle}
16
+ ${flexbox}
17
+ ${space}
18
+ ${border}
19
+ ${layout}
20
+ ${color}
21
+ `;
22
+
23
+ export const FAB = ({ Icon, bg, disabled, ...rest }) => {
24
+ const shadowStyle = {
25
+ shadowColor: "#000",
26
+ shadowOffset: {
27
+ width: 0,
28
+ height: 2,
29
+ },
30
+ shadowOpacity: 0.25,
31
+ shadowRadius: 3.84,
32
+ elevation: 5,
33
+ };
34
+
35
+ let style = rest.style || {};
36
+ if (disabled) {
37
+ style = { ...style, opacity: 0.5 };
38
+ }
39
+ return (
40
+ <TouchableOpacity
41
+ bg={bg}
42
+ disabled={disabled}
43
+ {...rest}
44
+ style={[style, shadowStyle]}
45
+ >
46
+ <Icon />
47
+ </TouchableOpacity>
48
+ );
49
+ };
50
+
51
+ FAB.defaultProps = {
52
+ variant: "solid",
53
+ size: 56,
54
+ alignItems: "center",
55
+ justifyContent: "center",
56
+ borderRadius: 28,
57
+ };
58
+
59
+ FAB.propTypes = {
60
+ ...propTypes.flexbox,
61
+ ...propTypes.space,
62
+ ...propTypes.border,
63
+ ...propTypes.layout,
64
+ ...propTypes.color,
65
+ Icon: PropTypes.elementType.isRequired,
66
+ };
package/src/components/Input.js ADDED
@@ -0,0 +1,188 @@
1
+ import React, { useContext, useState } from "react";
2
+ import {
3
+ flexbox,
4
+ space,
5
+ border,
6
+ buttonStyle,
7
+ typography,
8
+ color,
9
+ layout,
10
+ } from "styled-system";
11
+ import styled, { ThemeContext } from "styled-components/native";
12
+ import propTypes from "@styled-system/prop-types";
13
+ import PropTypes from "prop-types";
14
+ import { Typography, Container } from "@components";
15
+
16
+ export const TextInput = styled.TextInput`
17
+ ${flexbox}
18
+ ${space}
19
+ ${border}
20
+ ${buttonStyle}
21
+ ${typography}
22
+ `;
23
+
24
+ const View = styled.View`
25
+ ${flexbox}
26
+ ${space}
27
+ ${border}
28
+ ${color}
29
+ ${layout}
30
+ `;
31
+
32
+ const InputText = ({ theme, text }) => (
33
+ <Container
34
+ bg={theme.colors.background.menubackground}
35
+ justifyContent="center"
36
+ px={2}
37
+ >
38
+ <Typography>{text}</Typography>
39
+ </Container>
40
+ );
41
+
42
+ const LabelText = ({ inline, label }) => (
43
+ <Typography
44
+ numberOfLines={1}
45
+ textStyle="subtext"
46
+ mb={inline ? "12px" : "7px"}
47
+ >
48
+ {label}
49
+ </Typography>
50
+ );
51
+
52
+ const ErrorMessage = ({ error, message, theme }) => {
53
+ if (error) {
54
+ return (
55
+ <Typography textStyle="subtext" color={theme.colors.font.danger}>
56
+ {message}
57
+ </Typography>
58
+ );
59
+ }
60
+ return null;
61
+ };
62
+
63
+ export const Input = ({
64
+ label = "",
65
+ message = "",
66
+ error = false,
67
+ onFocus,
68
+ onBlur,
69
+ inline = false,
70
+ brandRight,
71
+ brandLeft,
72
+ disabled = false,
73
+ ...rest
74
+ }) => {
75
+ const theme = useContext(ThemeContext);
76
+ const [isFocus, setIsFocus] = useState(false);
77
+ const borderColor = error
78
+ ? theme.colors.border.danger
79
+ : theme.colors.border.primary;
80
+
81
+ const handleFocus = e => {
82
+ onFocus && onFocus(e);
83
+ setIsFocus(true);
84
+ };
85
+
86
+ const handleBlur = e => {
87
+ onBlur && onBlur(e);
88
+ setIsFocus(false);
89
+ };
90
+
91
+ const focusStyles = isFocus && {
92
+ borderRadius: 4,
93
+ borderColor: error
94
+ ? "rgba(255, 105, 105, 0.3)"
95
+ : theme.colors.border.grey400,
96
+ borderWidth: inline ? "0px" : "3px",
97
+ borderStyle: "solid",
98
+ };
99
+
100
+ const disabledStyles = disabled && {
101
+ opacity: 0.5,
102
+ bg: theme.colors.background.secondary,
103
+ };
104
+
105
+ const inlineInputStyles = isFocus && {
106
+ backgroundColor: error
107
+ ? theme.colors.border.danger
108
+ : theme.colors.border.base,
109
+ };
110
+
111
+ return (
112
+ <Container mb={20}>
113
+ {!inline && <LabelText inline={inline} label={label} />}
114
+ <Container
115
+ {...focusStyles}
116
+ {...disabledStyles}
117
+ flexDirection={inline ? "row" : "column"}
118
+ onBlur={handleBlur}
119
+ onFocus={handleFocus}
120
+ >
121
+ {inline && (
122
+ <Container alignSelf="flex-end" maxWidth={100} px={2}>
123
+ <LabelText inline={inline} label={label} />
124
+ </Container>
125
+ )}
126
+ <Container flexDirection="row" width="100%">
127
+ {brandLeft && <InputText theme={theme} text={brandLeft} />}
128
+ <TextInput
129
+ height={40}
130
+ flex={1}
131
+ textStyle="subtext"
132
+ {...rest}
133
+ border={!inline && borderColor}
134
+ editable={!disabled}
135
+ color={error ? theme.colors.font.danger : theme.colors.font.primary}
136
+ />
137
+ {brandRight && <InputText theme={theme} text={brandRight} />}
138
+ </Container>
139
+ </Container>
140
+ {inline && (
141
+ <View
142
+ backgroundColor={theme.colors.border.primary}
143
+ height={1}
144
+ {...inlineInputStyles}
145
+ />
146
+ )}
147
+ <ErrorMessage theme={theme} error={error} message={message} />
148
+ </Container>
149
+ );
150
+ };
151
+
152
+ Input.propTypes = {
153
+ ...propTypes.flexbox,
154
+ ...propTypes.space,
155
+ ...propTypes.border,
156
+ ...propTypes.buttonStyle,
157
+ label: PropTypes.string.isRequired,
158
+ message: PropTypes.string,
159
+ error: PropTypes.bool,
160
+ inline: PropTypes.bool,
161
+ brandRight: PropTypes.string,
162
+ brandLeft: PropTypes.string,
163
+ disabled: PropTypes.bool,
164
+ children: PropTypes.node,
165
+ };
166
+
167
+ InputText.propTypes = {
168
+ text: PropTypes.string,
169
+ };
170
+
171
+ LabelText.propTypes = {
172
+ inline: PropTypes.bool,
173
+ label: PropTypes.string,
174
+ };
175
+
176
+ ErrorMessage.propTypes = {
177
+ error: PropTypes.bool,
178
+ message: PropTypes.string,
179
+ };
180
+
181
+ TextInput.defaultProps = {
182
+ height: 40,
183
+ border: 1,
184
+ px: 2,
185
+ fontFamily: "inter400",
186
+ fontSize: "14px",
187
+ borderRadius: 2,
188
+ };
package/src/components/Typography.js ADDED
@@ -0,0 +1,84 @@
1
+ import * as React from "react";
2
+ import styled from "styled-components/native";
3
+ import {
4
+ space,
5
+ layout,
6
+ flexbox,
7
+ typography,
8
+ color,
9
+ textStyle,
10
+ position,
11
+ } from "styled-system";
12
+ import propTypes from "@styled-system/prop-types";
13
+ import PropTypes from "prop-types";
14
+
15
+ export const Text = styled.Text`
16
+ ${textStyle}
17
+ ${space}
18
+ ${layout}
19
+ ${flexbox}
20
+ ${typography}
21
+ ${color}
22
+ ${position}
23
+ `;
24
+
25
+ /**
26
+ * Typography component is a primitive text component which is built on top of styled-system.
27
+ *
28
+ * This component supports below props categories from [styled-system ](/styled-system).
29
+ *
30
+ * <ul>
31
+ * <li>space</li>
32
+ * <li>layout</li>
33
+ * <li>flexbox</li>
34
+ * <li>typography</li>
35
+ * <li>color</li>
36
+ * <li>textStyle</li>
37
+ * </ul>
38
+ *
39
+ * <div class="screenshots">
40
+ * <img src="screenshots/typography/fontsizes.png" />
41
+ * <img src="screenshots/typography/textstyles.png" />
42
+ * </div>
43
+ *
44
+ * <div class="screenshots">
45
+ * <img src="screenshots/typography/fontsizes.png" />
46
+ * <img src="screenshots/typography/textstyles.png" />
47
+ * </div>
48
+ *
49
+ * ## Usage
50
+ * ```js
51
+ * import * as React from 'react';
52
+ * import { Typography, Container } from '@bigbinary/neetoui-rn';
53
+ *
54
+ * export default function Main() {
55
+ * return (
56
+ * <Container>
57
+ * <Typography>
58
+ * This is basic example of Typography
59
+ * </Typography>
60
+ * </Container>
61
+ * );
62
+ * }
63
+ * ```
64
+ *
65
+ * @extends StyledSystems props /styled-system
66
+ */
67
+
68
+ export const Typography = ({ children, ...rest }) => {
69
+ return <Text {...rest}>{children}</Text>;
70
+ };
71
+
72
+ Typography.propTypes = {
73
+ ...propTypes.space,
74
+ ...propTypes.layout,
75
+ ...propTypes.flexbox,
76
+ ...propTypes.typography,
77
+ ...propTypes.color,
78
+ ...propTypes.textStyle,
79
+ children: PropTypes.node.isRequired,
80
+ };
81
+
82
+ Typography.defaultProps = {
83
+ textStyle: "defaultTextStyle",
84
+ };
package/src/components/index.js ADDED
@@ -0,0 +1,5 @@
1
+ export { Button } from "./Button";
2
+ export { Container } from "./Container";
3
+ export { Typography } from "./Typography";
4
+ export { Input } from "./Input";
5
+ export { FAB } from "./FAB";
package/src/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export * from "./components/index";
2
+ export * from "./theme/index";
package/src/theme/index.js ADDED
@@ -0,0 +1,116 @@
1
+ const defaultColors = {
2
+ white: "#ffffff",
3
+ black: "#000000",
4
+ base: "#2f3941",
5
+ danger: "#ff6969",
6
+ menubackground: "#f4f5f7",
7
+ };
8
+
9
+ const greyVarients = {
10
+ grey: "#828282",
11
+ grey100: "#f8f9f9",
12
+ grey200: "#e9ebed",
13
+ grey300: "#d8dcde",
14
+ grey400: "#c2c8cc",
15
+ grey500: "#87929d",
16
+ grey600: "#68737d",
17
+ grey800: "#2f3941",
18
+ };
19
+
20
+ const colors = {
21
+ font: {
22
+ primary: "#1b1f23",
23
+ secondary: "#828282",
24
+ ...defaultColors,
25
+ ...greyVarients,
26
+ },
27
+ background: {
28
+ primary: "#ffffff",
29
+ secondary: "#e4e4e7",
30
+ ...defaultColors,
31
+ ...greyVarients,
32
+ },
33
+ border: {
34
+ primary: "#e4e4e7",
35
+ ...greyVarients,
36
+ ...defaultColors,
37
+ },
38
+ };
39
+
40
+ const baseTheme = {
41
+ colors,
42
+ fonts: {
43
+ // We can add below commented fonts later as follows. Also add font faces in index.web.js for the web.
44
+ // https://www.bigbinary.com/learn-react-native/adding-custom-fonats
45
+
46
+ // inter100: "Inter-Thin",
47
+ // inter200: "Inter-ExtraLight",
48
+ // inter300: "Inter-Light",
49
+ // inter500: "Inter-Medium",
50
+ // inter600: "Inter-SemiBold",
51
+ // inter800: "Inter-ExtraBold",
52
+ // inter900: "Inter-Black",
53
+
54
+ inter400: "Inter-Regular",
55
+ inter700: "Inter-Bold",
56
+ },
57
+ lineHeights: [24],
58
+ fontSizes: {
59
+ xs: 10,
60
+ s: 12,
61
+ m: 14,
62
+ l: 18,
63
+ xl: 24,
64
+ xxl: 32,
65
+ },
66
+ };
67
+
68
+ //aliases
69
+ baseTheme.lineHeights.note = baseTheme.lineHeights[0] + "px";
70
+
71
+ export const theme = {
72
+ ...baseTheme,
73
+ textStyles: {
74
+ defaultTextStyle: {
75
+ color: baseTheme.colors.font.primary,
76
+ },
77
+ header: {
78
+ color: baseTheme.colors.font.primary,
79
+ fontSize: baseTheme.fontSizes.l,
80
+ fontFamily: baseTheme.fonts.inter700,
81
+ },
82
+ body: {
83
+ color: baseTheme.colors.font.primary,
84
+ fontSize: baseTheme.fontSizes.m,
85
+ },
86
+ subtext: {
87
+ color: baseTheme.colors.font.primary,
88
+ fontSize: baseTheme.fontSizes.s,
89
+ },
90
+
91
+ // buttonTextStyles
92
+ solid: {
93
+ color: baseTheme.colors.font.white,
94
+ },
95
+ inverse: {
96
+ color: baseTheme.colors.font.base,
97
+ },
98
+ text: {
99
+ color: baseTheme.colors.font.base,
100
+ },
101
+ },
102
+ buttons: {
103
+ solid: {
104
+ backgroundColor: baseTheme.colors.background.base,
105
+ },
106
+ inverse: {
107
+ border: 2,
108
+ borderColor: baseTheme.colors.border.base,
109
+ backgroundColor: baseTheme.colors.background.white,
110
+ },
111
+ text: {
112
+ color: baseTheme.colors.font.grey800,
113
+ backgroundColor: baseTheme.colors.background.white,
114
+ },
115
+ },
116
+ };