Ups

App.js

@@ -14,7 +14,7 @@ import RootComp from './modules/RootComp';
 import ImageComp from './modules/Image';
 import ButtonComp from './modules/Button';
 import Environment from './environment';
-
+import * as Font from 'expo-font';
 import Module from './modules';
 console.log("@@@@@@@@@@@@@@")
 console.log(Module)
@@ -150,14 +150,38 @@ CS.import(Environment);
 
 
 const useForceUpdate = (text) => useState(text)[1];
-export default function App() {
-  let [text, setText] = useState('');
+export default class App extends React.Component {
+  constructor(){
+      super()
+
+  }
+
+  /*let [text, setText] = useState('');
   let forceUpdate = useForceUpdate(text);
-  // let currentView =  NCS.render();
-  let currentView2 = CS.render();
-  // console.log(currentView2)
-  return <Div>{currentView2}</Div>;
-}
+  */
+  componentDidMount() {
+    Font.loadAsync({
+      'black': require('./assets/fonts/SFCompactDisplay-Black_0.otf'),
+      'bold': require('./assets/fonts/SFCompactDisplay-Bold_0.otf'),
+      'heavy': require('./assets/fonts/SFCompactDisplay-Heavy_0.otf'),
+      'light': require('./assets/fonts/SFCompactDisplay-Light_0.otf'),
+      'medium': require('./assets/fonts/SFCompactDisplay-Medium_0.otf'),
+      'regular': require('./assets/fonts/SFCompactDisplay-Regular_0.otf'),
+      'semibold': require('./assets/fonts/SFCompactDisplay-Semibold_0.otf'),
+      'thin': require('./assets/fonts/SFCompactDisplay-Thin_0.otf'),
+      'ultralight': require('./assets/fonts/SFCompactDisplay-Ultralight_0.otf')
+
+    });
+  }
+  render(){
+  let currentView2 = CS.render();  
+  return (
+    <Div>
+      <Div>{CS.ModuleSystem.createElementCtor(ButtonComp)}</Div>
+      <Div>{currentView2}</Div>
+    </Div>)
+    }
+  }
 
 
 const ImageStyle = StyleSheet.create({

dist/modules/Button/styles/arial.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _default={textColor:'rgba(255, 255, 255, 1)',width:'100%',height:'48',borderRadius:0,FontSize:18,backgroundColor:'rgba(73, 156, 219, 1)'};exports["default"]=_default;

dist/modules/Button/styles/black.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _default={textColor:'rgba(255, 255, 255, 1)',width:'150',height:'48',borderRadius:0,FontSize:18,backgroundColor:'rgba(52, 52, 52, 1)'};exports["default"]=_default;

dist/modules/Button/styles/deepblue.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _default={textColor:'rgba(255, 255, 255, 1)',width:'150',height:'48',borderRadius:24,FontSize:18,backgroundColor:'rgba(96, 96, 248, 1)'};exports["default"]=_default;

dist/modules/Button/styles/defaultStyle.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _default={textColor:'white',width:'100',height:'50',borderRadius:14,FontSize:14,backgroundColor:'red'};exports["default"]=_default;

dist/modules/Button/styles/gray.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _default={textColor:'rgba(35, 35, 35, 1)',width:'258',height:'48',borderRadius:5,FontSize:18,backgroundColor:'rgba(233, 233, 233, 1)'};exports["default"]=_default;

dist/modules/Button/styles/index.js

@@ -1 +1 @@
-"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _defaultStyle=_interopRequireDefault(require("./defaultStyle"));var _fake=_interopRequireDefault(require("./fake"));var _default={defaultStyle:_defaultStyle["default"],fake:_fake["default"]};exports["default"]=_default;
+"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _black=_interopRequireDefault(require("./black"));var _fake=_interopRequireDefault(require("./fake"));var _arial=_interopRequireDefault(require("./arial"));var _deepblue=_interopRequireDefault(require("./deepblue"));var _lightgreen=_interopRequireDefault(require("./lightgreen"));var _lightred=_interopRequireDefault(require("./lightred"));var _white=_interopRequireDefault(require("./white"));var _gray=_interopRequireDefault(require("./gray"));var _default={blackStyle:_black["default"],fake:_fake["default"],arial:_arial["default"],deepblue:_deepblue["default"],lightgreen:_lightgreen["default"],lightred:_lightred["default"],white:_white["default"],gray:_gray["default"]};exports["default"]=_default;

dist/modules/Button/styles/lightgreen.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _default={textColor:'rgba(35, 35, 35, 1)',width:'150',height:'48',borderRadius:24,FontSize:18,backgroundColor:'rgba(97, 255, 171, 1)'};exports["default"]=_default;

dist/modules/Button/styles/lightred.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _default={textColor:'rgba(255, 255, 255, 1)',width:'150',height:'48',borderRadius:0,FontSize:18,backgroundColor:'rgba(255, 119, 119, 1)'};exports["default"]=_default;

dist/modules/Button/styles/white.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _default={textColor:'rgba(255, 119, 119, 1)',width:'258',height:'48',borderRadius:5,FontSize:18,backgroundColor:'rgba(255, 255, 255, 1)'};exports["default"]=_default;

modules/Button/index.js

@@ -5,8 +5,7 @@ import Types from '../../lib/Types';
 import {Button} from 'react-native-elements'
 import Styles from './styles';
 
-console.log("WHATTTTTTTTTTTTTTTTT")
-console.log(Styles)
+
 
 export default class ButtonComp extends Module {
 	constructor(props) {
@@ -23,6 +22,7 @@ export default class ButtonComp extends Module {
 			height,
 			borderRadius,
 			FontSize,
+			fontFamily,
 			backgroundColor
 		} = this.props;
 		return 	(
@@ -30,7 +30,7 @@ export default class ButtonComp extends Module {
 				  onPress = {this.props.press || this.press}
 				  title={title || "submit"}
 				  accessibilityLabel="Learn more about this purple button"
-				  titleStyle = {{color:textColor,fontSize:FontSize}}
+				  titleStyle = {{color:textColor,fontSize:FontSize,fontFamily:fontFamily}}
 				  buttonStyle = {{backgroundColor:backgroundColor,width:width,height:height,borderRadius:borderRadius}}
 				/>
 			)
@@ -40,10 +40,11 @@ export default class ButtonComp extends Module {
 
 ButtonComp.Inputs = {
 	title: new Types.Text().require().default('Submit'),
-	textColor: new Types.Text().require().color().default('black'),
-	backgroundColor: new Types.Text().require().color().default('rgba(47, 150, 145, 1)'),
-	borderRadius: new Types.Integer().require(),
-	FontSize: new Types.Integer().require(),
+	fontFamily :  new Types.Text().require().default('Light'),
+	textColor: new Types.Text().require().color().default('rgba(255, 255, 255, 1)'),
+	backgroundColor: new Types.Text().require().color().default('rgba(73, 156, 219, 1)'),
+	borderRadius: new Types.Integer().require().default(0),
+	FontSize: new Types.Integer().require().default(18),
 	width: new Types.Integer().require(),
 	height: new Types.Integer().require()
 }

modules/Button/styles/arial.js

@@ -0,0 +1,8 @@
+export default {
+	textColor:'rgba(255, 255, 255, 1)',
+	width:'100%',
+	height:'48',
+	borderRadius:0,
+	FontSize:18,
+	backgroundColor:'rgba(73, 156, 219, 1)'
+}

modules/Button/styles/black.js

@@ -0,0 +1,8 @@
+export default {
+	textColor:'rgba(255, 255, 255, 1)',
+	width:'150',
+	height:'48',
+	borderRadius:0,
+	FontSize:18,
+	backgroundColor:'rgba(52, 52, 52, 1)'
+}

modules/Button/styles/deepblue.js

@@ -0,0 +1,8 @@
+export default {
+	textColor:'rgba(255, 255, 255, 1)',
+	width:'150',
+	height:'48',
+	borderRadius:24,
+	FontSize:18,
+	backgroundColor:'rgba(96, 96, 248, 1)'
+}

modules/Button/styles/defaultStyle.js

@@ -1,8 +0,0 @@
-export default {
-	textColor:'white',
-	width:'100',
-	height:'50',
-	borderRadius:14,
-	FontSize:14,
-	backgroundColor:'red'
-}

modules/Button/styles/gray.js

@@ -0,0 +1,8 @@
+export default {
+	textColor:'rgba(35, 35, 35, 1)',
+	width:'258',
+	height:'48',
+	borderRadius:5,
+	FontSize:18,
+	backgroundColor:'rgba(233, 233, 233, 1)'
+}

modules/Button/styles/index.js

@@ -1,7 +1,21 @@
-import defaultStyle from './defaultStyle';
+import blackStyle from './black';
 import fake from './fake';
+import arial from './arial';
+import deepblue from './deepblue';
+import lightgreen from './lightgreen';
+import lightred from './lightred';
+import white from './white';
+import gray from './gray'
+
 
 export default {
-defaultStyle,
-fake
+	blackStyle,
+	fake,
+	arial,
+	deepblue,
+	lightgreen,
+	lightred,
+	white,
+	gray
+	
 }

modules/Button/styles/lightgreen.js

@@ -0,0 +1,8 @@
+export default {
+	textColor:'rgba(35, 35, 35, 1)',
+	width:'150',
+	height:'48',
+	borderRadius:24,
+	FontSize:18,
+	backgroundColor:'rgba(97, 255, 171, 1)'
+}

modules/Button/styles/lightred.js

@@ -0,0 +1,8 @@
+export default {
+	textColor:'rgba(255, 255, 255, 1)',
+	width:'150',
+	height:'48',
+	borderRadius:0,
+	FontSize:18,
+	backgroundColor:'rgba(255, 119, 119, 1)'
+}

modules/Button/styles/white.js

@@ -0,0 +1,8 @@
+export default {
+	textColor:'rgba(255, 119, 119, 1)',
+	width:'258',
+	height:'48',
+	borderRadius:5,
+	FontSize:18,
+	backgroundColor:'rgba(255, 255, 255, 1)'
+}

modules/Form/index.js

@@ -38,8 +38,7 @@ export default class FormComp extends Module {
 		//Init
 		
 		if(!inputsMargin) inputsMargin = 7
-		console.log("@@@@@")
-		console.log(this.props)
+	
 
 		let Inputs = (inputs || []).map((item,indx) => {
 			let state = {}

modules/Image/index.js

@@ -31,7 +31,7 @@ export default class ImageComp extends Module {
 
 ImageComp.Inputs = {
 	source: new Types.Text(),
-	width: new Types.Integer().require().default(100),
-	height: new Types.Integer().require().default(100),
+	width: new Types.Integer().require().default(70),
+	height: new Types.Integer().require().default(70),
 	resizeMode: new Types.Text().require().default('cover')
 }