app-studio 0.0.2 → 0.0.6

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

@@ -6,26 +6,9 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var React = require('react');
 var React__default = _interopDefault(React);
+var Color = _interopDefault(require('color-convert'));
 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 +399,99 @@ var ThemeProvider = function ThemeProvider(_ref) {
   }, children);
 };
 
+var shadows = {
+  0: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.18,
+    shadowRadius: 1.0
+  },
+  1: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 1.41
+  },
+  2: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.22,
+    shadowRadius: 2.22
+  },
+  3: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.23,
+    shadowRadius: 2.62
+  },
+  4: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84
+  },
+  5: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 3
+    },
+    shadowOpacity: 0.27,
+    shadowRadius: 4.65
+  },
+  6: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 3
+    },
+    shadowOpacity: 0.29,
+    shadowRadius: 4.65
+  },
+  7: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 4.65
+  },
+  8: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowOpacity: 0.32,
+    shadowRadius: 5.46
+  },
+  9: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 5
+    },
+    shadowOpacity: 0.34,
+    shadowRadius: 6.27
+  }
+};
+
 var TransformStyleProps = ['transform', 'transformMatrix', 'rotation', 'scaleX', 'scaleY', 'translateX', 'translateY', // 'perspective',
 // 'rotate',
 // 'rotateX',
@@ -436,6 +512,11 @@ var StyleProps = {};
 allStyleProps.map(function (property) {
   StyleProps[property] = true;
 });
+var NumberPropsStyle = {};
+var NumberProps = ['numberOfLines', 'fontWeight', 'timeStamp', 'flex', 'flexGrow', 'flexShrink', 'order', 'zIndex', 'aspectRatio', 'shadowOpacity', 'shadowRadius', 'scale', 'opacity', 'min', 'max', 'now'];
+NumberProps.map(function (property) {
+  NumberPropsStyle[property] = true;
+});
 var setSize = function setSize(newSize, newProps) {
   newProps.height = newProps.width = newSize;
 };
@@ -475,18 +556,85 @@ 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) {
+    if (typeof props.shadow === 'number' || typeof props.shadow === 'boolean') {
+      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]) {
+        var shadowColor = Color.hex.rgb(shadows[shawdowValue].shadowColor).join(',');
+        newProps['boxShadow'] = shadows[shawdowValue].shadowOffset.height + "px " + shadows[shawdowValue].shadowOffset.width + "px " + shadows[shawdowValue].shadowRadius + "px rgba(" + shadowColor + "," + shadows[shawdowValue].shadowOpacity + ")";
+      }
+    } else {
+      var _shadowColor = Color.hex.rgb(props.shadow.shadowColor).join(',');
+
+      newProps['boxShadow'] = props.shadow.shadowOffset.height + "px " + props.shadow.shadowOffset.width + "px " + props.shadow.shadowRadius + "px rgba(" + _shadowColor + "," + props.shadow.shadowOpacity + ")";
     }
-  }); // return {newProps,responsive};
+  }
 
+  Object.keys(props).map(function (property) {
+    if (StyleProps[property] !== undefined || property == 'on') {
+      if (typeof props[property] === 'number' && NumberPropsStyle[property] === undefined) {
+        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];
+      }
+    }
+  });
   return newProps;
 }; // function convertToCSS(props: any) {
+//   return Object.entries(props).reduce((str, [key, val]) => {
+//     const casedKey = key.replace(
+//       /[A-Z]/g,
+//       (match) => `-${match.toLowerCase()}`
+//     );
+//     return `${str}${casedKey}:${typeof val === 'number' ? val + 'px' : val};\n`;
+//   }, '');
+// }
+// export const getResponsiveMediaQueries = (props: any) => {
+//   const { breakpointKeys, breakpoints } = useResponsive();
+//   console.log('mediaQueries', props);
+//   const mediaQueries = breakpointKeys
+//     .map((size) => {
+//       return props && props[size] !== undefined
+//         ? `
+//     @media ${
+//       breakpoints[size].min
+//         ? ' (min-width:' +
+//           (breakpoints[size].min > 0 ? breakpoints[size].min : 0) +
+//           'px)'
+//         : ''
+//     } ${
+//             breakpoints[size].min &&
+//             breakpoints[size].max &&
+//             breakpoints[size].max >= 0 &&
+//             breakpoints[size].max < Infinity
+//               ? ' and '
+//               : ''
+//           } ${
+//             breakpoints[size].max &&
+//             breakpoints[size].max >= 0 &&
+//             breakpoints[size].max < Infinity
+//               ? ' (max-width:' + breakpoints[size].max + 'px)'
+//               : ''
+//           } {
+//      ${convertToCSS(props[size])}
+//     }`
+//         : '';
+//     })
+//     .join('\n');
+//   return mediaQueries;
+// };
+
 var StyledView = /*#__PURE__*/styled.div(function (props) {
   return applyStyle(props);
 });
@@ -550,75 +698,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 +714,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 +756,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", "toFormat"];
 var TextSpan = /*#__PURE__*/styled.div(function (props) {
   props.display = 'inherit';
   props.flexDirection = 'column';
@@ -723,7 +776,9 @@ 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);
+        _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;
 
@@ -735,7 +790,7 @@ var Text = /*#__PURE__*/function (_React$PureComponent) {
       content = content.toUpperCase();
     }
 
-    if (typeof content === 'string') {
+    if (typeof content === 'string' && toFormat) {
       content = content.split('\n').map(function (item, key) {
         return React__default.createElement("span", {
           key: key.toString()
@@ -862,32 +917,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;