app-studio 0.0.8 → 0.0.12

package/README.md

@@ -79,9 +79,10 @@ function Example() {
 }
 ```
 
-### Responsive
 
+You can Use View is use <div> tag you can use  Div, Span, Form, Input, Image components if you need another tag.
 
+### Responsive
 
 ```jsx
 import React from 'react';
@@ -89,6 +90,8 @@ import { ResponsiveProvider } from 'app-studio';
 
 const Example = () => {
   const { screen, on } = useResponsive();
+  // "screen" provide you the screen size corresponding to you breakpoints
+  // "on" tell you is screen size is included corresponding to you devices
   const responsive = {
     xs: {
       backgroundColor: 'red',
@@ -168,7 +171,8 @@ const theme = {
   }
 	
 };
-
+//  color will be replaced by the value form the theme
+// all the colors props like backgroundColor will have the color from the theme
 function Example() {
 	return (
 		<ThemeProvider theme={theme}>

package/dist/app-studio.cjs.development.js

@@ -667,6 +667,15 @@ var StyledView = /*#__PURE__*/styled.div(function (props) {
 var StyledImage = /*#__PURE__*/styled.img(function (props) {
   return applyStyle(props);
 });
+var StyledSpan = /*#__PURE__*/styled.span(function (props) {
+  return applyStyle(props);
+});
+var StyledInput = /*#__PURE__*/styled.input(function (props) {
+  return applyStyle(props);
+});
+var StyledForm = /*#__PURE__*/styled.form(function (props) {
+  return applyStyle(props);
+});
 var ViewElement = /*#__PURE__*/function (_React$PureComponent) {
   _inheritsLoose(ViewElement, _React$PureComponent);
 
@@ -714,122 +723,134 @@ var ImageElement = /*#__PURE__*/function (_React$PureComponent2) {
 
   return ImageElement;
 }(React__default.PureComponent);
+var SpanElement = /*#__PURE__*/function (_React$PureComponent3) {
+  _inheritsLoose(SpanElement, _React$PureComponent3);
 
-var View = function View(props) {
-  return React__default.createElement(ViewElement, Object.assign({}, props));
-};
-var SafeArea = View;
-var Scroll = function Scroll(props) {
-  return React__default.createElement(View, Object.assign({
-    overflow: 'auto'
-  }, props));
-};
+  function SpanElement() {
+    return _React$PureComponent3.apply(this, arguments) || this;
+  }
 
-var _excluded = ["src", "onClick", "onPress"],
-    _excluded2 = ["size", "src"],
-    _excluded3 = ["size", "src"];
-var ImageBackground = /*#__PURE__*/function (_React$PureComponent) {
-  _inheritsLoose(ImageBackground, _React$PureComponent);
+  var _proto3 = SpanElement.prototype;
 
-  function ImageBackground() {
-    return _React$PureComponent.apply(this, arguments) || this;
-  }
+  _proto3.render = function render() {
+    var onClick = this.props.onClick;
 
-  var _proto = ImageBackground.prototype;
+    if (this.props.onPress !== undefined) {
+      onClick = this.props.onPress;
+    }
 
-  _proto.render = function render() {
-    var _this$props = this.props,
-        src = _this$props.src,
-        onClick = _this$props.onClick,
-        onPress = _this$props.onPress,
-        props = _objectWithoutPropertiesLoose(_this$props, _excluded);
-
-    return React__default.createElement(View, Object.assign({
-      style: {
-        backgroundSize: 'contain',
-        backgroundImage: "url(\"" + src + "\")",
-        backgroundPosition: 'center center',
-        backgroundRepeat: 'no-repeat'
-      },
-      onClick: onClick ? onClick : onPress
-    }, props));
+    return React__default.createElement(StyledSpan, Object.assign({}, this.props, {
+      onClick: onClick
+    }));
   };
 
-  return ImageBackground;
+  return SpanElement;
 }(React__default.PureComponent);
-var Image = function Image(props) {
-  return React__default.createElement(ImageElement, Object.assign({}, props));
-};
-var RoundedImage = function RoundedImage(_ref) {
-  var size = _ref.size,
-      src = _ref.src,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded2);
-
-  return React__default.createElement(ImageBackground, Object.assign({
-    borderRadius: size / 2,
-    size: size,
-    src: src
-  }, props));
-};
-var SquaredImage = function SquaredImage(_ref2) {
-  var size = _ref2.size,
-      src = _ref2.src,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded3);
-
-  return React__default.createElement(ImageBackground, Object.assign({}, props, {
-    size: size,
-    src: src
-  }));
-};
-
-var _excluded$1 = ["toUpperCase", "children", "toFormat"];
-var TextSpan = /*#__PURE__*/styled.div(function (props) {
-  props.display = 'inherit';
-  props.flexDirection = 'column';
-  return applyStyle(props);
-});
-var Text = /*#__PURE__*/function (_React$PureComponent) {
-  _inheritsLoose(Text, _React$PureComponent);
+var InputElement = /*#__PURE__*/function (_React$PureComponent4) {
+  _inheritsLoose(InputElement, _React$PureComponent4);
 
-  function Text() {
-    return _React$PureComponent.apply(this, arguments) || this;
+  function InputElement() {
+    return _React$PureComponent4.apply(this, arguments) || this;
   }
 
-  var _proto = Text.prototype;
+  var _proto4 = InputElement.prototype;
 
-  _proto.render = function render() {
-    var _this$props = this.props,
-        _this$props$toUpperCa = _this$props.toUpperCase,
-        toUpperCase = _this$props$toUpperCa === void 0 ? false : _this$props$toUpperCa,
-        children = _this$props.children,
-        _this$props$toFormat = _this$props.toFormat,
-        toFormat = _this$props$toFormat === void 0 ? false : _this$props$toFormat,
-        props = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
-
-    var content = children;
-
-    if (children && typeof children === 'string') {
-      content = children.toString().trim();
-    }
+  _proto4.render = function render() {
+    var onClick = this.props.onClick;
 
-    if (typeof content === 'string' && toUpperCase) {
-      content = content.toUpperCase();
+    if (this.props.onPress !== undefined) {
+      onClick = this.props.onPress;
     }
 
-    if (typeof content === 'string' && toFormat) {
-      content = content.split('\n').map(function (item, key) {
-        return React__default.createElement("span", {
-          key: key.toString()
-        }, item, React__default.createElement("br", null));
-      });
+    return React__default.createElement(StyledInput, Object.assign({}, this.props, {
+      onClick: onClick
+    }));
+  };
+
+  return InputElement;
+}(React__default.PureComponent);
+var FormElement = /*#__PURE__*/function (_React$PureComponent5) {
+  _inheritsLoose(FormElement, _React$PureComponent5);
+
+  function FormElement() {
+    return _React$PureComponent5.apply(this, arguments) || this;
+  }
+
+  var _proto5 = FormElement.prototype;
+
+  _proto5.render = function render() {
+    var onClick = this.props.onClick;
+
+    if (this.props.onPress !== undefined) {
+      onClick = this.props.onPress;
     }
 
-    return React__default.createElement(TextSpan, Object.assign({}, props), content);
+    return React__default.createElement(StyledForm, Object.assign({}, this.props, {
+      onClick: onClick
+    }));
   };
 
-  return Text;
+  return FormElement;
 }(React__default.PureComponent);
 
+var View = function View(props) {
+  return React__default.createElement(ViewElement, Object.assign({}, props));
+};
+var Div = View;
+var SafeArea = View;
+var Scroll = function Scroll(props) {
+  return React__default.createElement(View, Object.assign({
+    overflow: 'auto'
+  }, props));
+};
+var Span = function Span(props) {
+  return React__default.createElement(SpanElement, Object.assign({}, props));
+};
+
+var Image = function Image(props) {
+  return React__default.createElement(ImageElement, Object.assign({}, props));
+};
+
+var _excluded = ["toUpperCase", "children"];
+var TextSpan = /*#__PURE__*/styled.span(function (props) {
+  return applyStyle(props);
+});
+var Text = function Text(props) {
+  var _props$toUpperCase = props.toUpperCase,
+      toUpperCase = _props$toUpperCase === void 0 ? false : _props$toUpperCase,
+      children = props.children,
+      textPops = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var content = children;
+
+  if (typeof content === 'string' && toUpperCase) {
+    content = content.toUpperCase();
+  } // if (typeof content === 'string' && toFormat) {
+  //   const newtext: any = content
+  //     .split('\n')
+  //     .map((item: any, key: number): any => {
+  //       return (
+  //         <span key={key.toString()}>
+  //           {item}
+  //           <br />
+  //         </span>
+  //       );
+  //     });
+  // }
+
+
+  return React__default.createElement(TextSpan, Object.assign({}, textPops, {
+    children: content
+  }));
+};
+
+var Form = function Form(props) {
+  return React__default.createElement(FormElement, Object.assign({}, props));
+};
+var Input = function Input(props) {
+  return React__default.createElement(InputElement, Object.assign({}, props));
+};
+
 var useMount = function useMount(callback) {
   React.useEffect(function () {
     callback();
@@ -943,14 +964,15 @@ var useResponsive = function useResponsive() {
   };
 };
 
+exports.Div = Div;
+exports.Form = Form;
 exports.Image = Image;
-exports.ImageBackground = ImageBackground;
+exports.Input = Input;
 exports.ResponsiveContext = ResponsiveContext;
 exports.ResponsiveProvider = ResponsiveProvider;
-exports.RoundedImage = RoundedImage;
 exports.SafeArea = SafeArea;
 exports.Scroll = Scroll;
-exports.SquaredImage = SquaredImage;
+exports.Span = Span;
 exports.Text = Text;
 exports.TextSpan = TextSpan;
 exports.ThemeContext = ThemeContext;