app-studio 0.0.2 → 0.0.3

package/README.md

@@ -64,12 +64,15 @@ const Root = () => {
 
 ```jsx
 import React from 'react';
-import { View, useResponsive } from 'app-studio';
+import { View } from 'app-studio';
 
 function Example() {
- const {screen} = useResponsive()
 	return (
-		<View backgroundColor="grey" padding={ screen == 'xs' ? 10 : 20}>
+		<View 
+    backgroundColor="grey" 
+    padding={20}
+    on={{ hover: { backgroundColor: 'blue.100' } }}
+    >
 			Hello
 		</View>
 	);
@@ -105,7 +108,9 @@ const Example = () => {
   };
 
   return (
-    <View size={100} {...responsive[screen]}>
+    <View size={100} 
+    {...responsive[screen]}       
+>
       {screen} -  mobile : {on('mobile') ? 'yes' : 'no'}
     </View>
   );
@@ -142,13 +147,34 @@ import React from 'react';
 import { ThemeProvider, View } from 'app-studio';
 
 const theme = {
-	fontFamily: 'arial',
+
+  colors: {
+     orange: '#fff7ed', 
+     cyan:'#ecfeff',
+  },
+  palette:{
+    blueGray: {
+      50: '#f8fafc',
+      100: '#f1f5f9',
+      200: '#e2e8f0',
+      300: '#cbd5e1',
+      400: '#94a3b8',
+      500: '#64748b',
+      600: '#475569',
+      700: '#334155',
+      800: '#1e293b',
+      900: '#0f172a',
+    },
+  }
+	
 };
 
 function Example() {
 	return (
 		<ThemeProvider theme={theme}>
-			<View>Hello</View>
+      <View backgroundColor="cyan">
+			  <Text color="blue.200">Hello</Text>
+      </View>
 		</ThemeProvider>
 	);
 }
@@ -197,7 +223,11 @@ If you are a collaborator, please follow our [Pull Request principle](https://gi
 | title       | string | undefined | change the title      |
 | description | string | undefined | change the descrition | -->
 
+## Roadmap 
 
+- Integrate React Native 
+- Build a documentation website
+- manage  all pseudo class  : https://html.spec.whatwg.org/multipage/semantics-other.html#selector-hover
 
 ## Author
 

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

@@ -8,24 +8,6 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var styled = _interopDefault(require('styled-components'));
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
 function _inheritsLoose(subClass, superClass) {
   subClass.prototype = Object.create(superClass.prototype);
   subClass.prototype.constructor = subClass;
@@ -416,6 +398,109 @@ var ThemeProvider = function ThemeProvider(_ref) {
   }, children);
 };
 
+var shadows = {
+  0: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.18,
+    shadowRadius: 1.0,
+    elevation: 1
+  },
+  1: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 1.41,
+    elevation: 2
+  },
+  2: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.22,
+    shadowRadius: 2.22,
+    elevation: 3
+  },
+  3: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.23,
+    shadowRadius: 2.62,
+    elevation: 4
+  },
+  4: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5
+  },
+  5: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 3
+    },
+    shadowOpacity: 0.27,
+    shadowRadius: 4.65,
+    elevation: 6
+  },
+  6: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 3
+    },
+    shadowOpacity: 0.29,
+    shadowRadius: 4.65,
+    elevation: 7
+  },
+  7: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 4.65,
+    elevation: 8
+  },
+  8: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowOpacity: 0.32,
+    shadowRadius: 5.46,
+    elevation: 9
+  },
+  9: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 5
+    },
+    shadowOpacity: 0.34,
+    shadowRadius: 6.27,
+    elevation: 10
+  }
+};
+
 var TransformStyleProps = ['transform', 'transformMatrix', 'rotation', 'scaleX', 'scaleY', 'translateX', 'translateY', // 'perspective',
 // 'rotate',
 // 'rotateX',
@@ -475,16 +560,41 @@ var applyStyle = function applyStyle(props) {
     newProps.marginBottom = props.marginVertical;
   }
 
-  Object.keys(props).filter(function (property) {
-    return StyleProps[property] !== undefined || property[0] == '&';
-  }).map(function (property) {
-    newProps[property] = props[property]; //  console.log(property, propertyType);
+  if (props.shadow) {
+    var shawdowValue = typeof props.shadow === 'number' && shadows[props.shadow] !== undefined ? props.shadow : 2;
 
-    if (property.toLowerCase().indexOf('color') !== -1) {
-      newProps[property] = getColor(props[property]);
+    if (shadows[shawdowValue]) {
+      for (var i in shadows[shawdowValue]) {
+        newProps[i] = shadows[shawdowValue][i];
+      }
     }
-  }); // return {newProps,responsive};
+  }
 
+  Object.keys(props).map(function (property) {
+    if (StyleProps[property] !== undefined || property == 'on') {
+      if (typeof props[property] === 'number' && property !== 'fontWeight') {
+        newProps[property] = props[property] + 'px';
+      } else if (property.toLowerCase().indexOf('color') !== -1) {
+        newProps[property] = getColor(props[property]);
+      } else if (typeof props[property] === 'object') {
+        if (property === 'on') {
+          for (var event in props[property]) {
+            newProps['&:' + event] = applyStyle(props[property][event]);
+          }
+        } else {
+          newProps[property] = applyStyle(props[property]);
+        }
+      } else {
+        newProps[property] = props[property];
+      }
+    } else {
+      newProps[property] = props[property];
+    }
+  });
+  console.log({
+    props: props,
+    newProps: newProps
+  });
   return newProps;
 }; // function convertToCSS(props: any) {
 var StyledView = /*#__PURE__*/styled.div(function (props) {
@@ -550,75 +660,8 @@ var Scroll = function Scroll(props) {
     overflow: 'auto'
   }, props));
 };
-var Horizontal = function Horizontal(props) {
-  return React__default.createElement(View, Object.assign({
-    display: 'flex',
-    flexDirection: "row"
-  }, props));
-};
-var HorizontalScroll = function HorizontalScroll(props) {
-  return React__default.createElement(Horizontal, Object.assign({
-    overflowX: "auto"
-  }, props));
-};
-var Vertical = function Vertical(props) {
-  return React__default.createElement(View, Object.assign({
-    flexDirection: "column"
-  }, props));
-};
-var VerticalScroll = function VerticalScroll(props) {
-  return React__default.createElement(Vertical, Object.assign({
-    overflowY: "auto"
-  }, props));
-};
-var Inline = function Inline(props) {
-  return React__default.createElement(View, Object.assign({
-    display: 'flex',
-    flexDirection: "row",
-    wordBreak: "break-word"
-  }, props));
-};
-var Start = function Start(props) {
-  return React__default.createElement(View, Object.assign({
-    display: 'flex',
-    alignSelf: "flex-start"
-  }, props));
-};
-var End = function End(props) {
-  return React__default.createElement(View, Object.assign({
-    display: 'flex',
-    alignSelf: "flex-end"
-  }, props));
-};
-var Center = function Center(props) {
-  return React__default.createElement(View, Object.assign({
-    display: 'flex',
-    justifyContent: "center",
-    alignItems: 'center'
-  }, props));
-};
-var AlignStart = function AlignStart(props) {
-  return React__default.createElement(View, Object.assign({
-    display: 'flex',
-    justifyContent: "flex-start"
-  }, props));
-};
-var AlignCenter = function AlignCenter(props) {
-  return React__default.createElement(View, Object.assign({
-    display: 'flex',
-    justifyContent: "center",
-    width: '100%'
-  }, props));
-};
-var AlignEnd = function AlignEnd(props) {
-  return React__default.createElement(View, Object.assign({
-    display: 'flex',
-    justifyContent: "flex-end",
-    width: '100%'
-  }, props));
-};
 
-var _excluded = ["src", "style", "onClick", "onPress"],
+var _excluded = ["src", "onClick", "onPress"],
     _excluded2 = ["size", "src"],
     _excluded3 = ["size", "src"];
 var ImageBackground = /*#__PURE__*/function (_React$PureComponent) {
@@ -633,18 +676,17 @@ var ImageBackground = /*#__PURE__*/function (_React$PureComponent) {
   _proto.render = function render() {
     var _this$props = this.props,
         src = _this$props.src,
-        style = _this$props.style,
         onClick = _this$props.onClick,
         onPress = _this$props.onPress,
         props = _objectWithoutPropertiesLoose(_this$props, _excluded);
 
     return React__default.createElement(View, Object.assign({
-      style: _extends({
+      style: {
         backgroundSize: 'contain',
         backgroundImage: "url(\"" + src + "\")",
         backgroundPosition: 'center center',
         backgroundRepeat: 'no-repeat'
-      }, style),
+      },
       onClick: onClick ? onClick : onPress
     }, props));
   };
@@ -676,34 +718,7 @@ var SquaredImage = function SquaredImage(_ref2) {
   }));
 };
 
-var _excluded$1 = ["hint", "disabled", "opacity", "fontSize"],
-    _excluded2$1 = ["toUpperCase", "children"];
-var formatTextStyle = function formatTextStyle(_ref) {
-  var _ref$hint = _ref.hint,
-      hint = _ref$hint === void 0 ? false : _ref$hint,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      opacity = _ref.opacity,
-      fontSize = _ref.fontSize,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-
-  if (props) {
-    if (hint) {
-      opacity = hint;
-    }
-
-    if (disabled) {
-      opacity = disabled;
-    }
-
-    return _extends({}, props, {
-      opacity: opacity,
-      fontSize: fontSize
-    });
-  }
-
-  return applyStyle(props);
-};
+var _excluded$1 = ["toUpperCase", "children"];
 var TextSpan = /*#__PURE__*/styled.div(function (props) {
   props.display = 'inherit';
   props.flexDirection = 'column';
@@ -723,7 +738,7 @@ var Text = /*#__PURE__*/function (_React$PureComponent) {
         _this$props$toUpperCa = _this$props.toUpperCase,
         toUpperCase = _this$props$toUpperCa === void 0 ? false : _this$props$toUpperCa,
         children = _this$props.children,
-        props = _objectWithoutPropertiesLoose(_this$props, _excluded2$1);
+        props = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
 
     var content = children;
 
@@ -862,32 +877,20 @@ var useResponsive = function useResponsive() {
   };
 };
 
-exports.AlignCenter = AlignCenter;
-exports.AlignEnd = AlignEnd;
-exports.AlignStart = AlignStart;
-exports.Center = Center;
-exports.End = End;
-exports.Horizontal = Horizontal;
-exports.HorizontalScroll = HorizontalScroll;
 exports.Image = Image;
 exports.ImageBackground = ImageBackground;
-exports.Inline = Inline;
 exports.ResponsiveContext = ResponsiveContext;
 exports.ResponsiveProvider = ResponsiveProvider;
 exports.RoundedImage = RoundedImage;
 exports.SafeArea = SafeArea;
 exports.Scroll = Scroll;
 exports.SquaredImage = SquaredImage;
-exports.Start = Start;
 exports.Text = Text;
 exports.TextSpan = TextSpan;
 exports.ThemeContext = ThemeContext;
 exports.ThemeProvider = ThemeProvider;
-exports.Vertical = Vertical;
-exports.VerticalScroll = VerticalScroll;
 exports.View = View;
 exports.createQuery = createQuery;
-exports.formatTextStyle = formatTextStyle;
 exports.useMount = useMount;
 exports.useResponsive = useResponsive;
 exports.useResponsiveContext = useResponsiveContext;