Primera versión de la librería OK

Author: mugan86

app-react/package-lock.json

@@ -1,15 +1,16 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
-
+import { HelloFC, HelloCC, CustomBox } from '@mugan86/react-basic-library';
 function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
+        <CustomBox content="Anartz" bgColor="blue" width="400px" height="300px"/>
         <p>
           Anartz Mugika Ledo - [email protected].
         </p>
+        <HelloFC name="Anartz"/>
+        <HelloCC name="Holaaaaaa" lastname="hdhdhdhd"/>
         <a
           className="App-link"
           href="https://reactjs.org"

app-react/src/App.js

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const CustomBox: (props: any) => JSX.Element;
+export default CustomBox;

lib-react/lib/custom-box.d.ts

@@ -1 +1,17 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const CustomBox = (props) => {
+    const { width, height, bgColor, content, color } = props;
+    const showText = (!content) ? 'Texto de ejemplo' : content;
+    return (react_1.default.createElement("div", { style: {
+            width: width || 200,
+            height: height || 200,
+            backgroundColor: bgColor || "green",
+            color: color || "white",
+        } }, showText));
+};
+exports.default = CustomBox;

lib-react/lib/custom-box.js

@@ -1 +1,9 @@
-/** class component */ 
+/** class component */
+import React from 'react';
+declare class HelloCC extends React.Component {
+    name: string;
+    lastname: string;
+    constructor(props: any);
+    render(): JSX.Element;
+}
+export default HelloCC;

lib-react/lib/hello-cc.d.ts

@@ -1,2 +1,23 @@
 "use strict";
-/** class component */ 
+/** class component */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+class HelloCC extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.name = (!props.name) ? '-->>' : props.name;
+        this.lastname = (!props.lastname) ? '....' : props.lastname;
+    }
+    render() {
+        return react_1.default.createElement("h1", null,
+            "Hola ",
+            this.name,
+            " ",
+            this.lastname,
+            " desde CC");
+    }
+}
+exports.default = HelloCC;

lib-react/lib/hello-cc.js

@@ -1,3 +1,5 @@
 /** Aquí vamos a importar todos los componentes para usarlo en la aplicación */
 import HelloFC from './hello-fc';
-export { HelloFC };
+import HelloCC from './hello-cc';
+import CustomBox from './custom-box';
+export { HelloFC, HelloCC, CustomBox };

lib-react/lib/index.d.ts

@@ -6,3 +6,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const hello_fc_1 = __importDefault(require("./hello-fc"));
 exports.HelloFC = hello_fc_1.default;
+const hello_cc_1 = __importDefault(require("./hello-cc"));
+exports.HelloCC = hello_cc_1.default;
+const custom_box_1 = __importDefault(require("./custom-box"));
+exports.CustomBox = custom_box_1.default;

lib-react/lib/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const CustomBox = (props: any) => {
+    const { width, height, bgColor, content, color } = props;
+    const showText = (!content)? 'Texto de ejemplo': content;
+    return (
+        <div 
+            style={
+                {
+                    width: width || 200,
+                    height: height || 200,
+                    backgroundColor: bgColor || "green",
+                    color: color || "white",
+                }
+            }>
+                { showText}
+            </div>
+    )
+}
+
+export default CustomBox;

lib-react/src/custom-box.tsx

@@ -1 +1,18 @@
-/** class component */
+/** class component */
+
+import React from 'react';
+
+class HelloCC extends React.Component {
+    name: string;
+    lastname: string;
+    constructor(props: any) {
+        super(props);
+        this.name = (!props.name) ? '-->>': props.name;
+        this.lastname = (!props.lastname) ? '....': props.lastname;
+    }
+    render() {
+        return <h1>Hola {this.name} {this.lastname} desde CC</h1>
+    }
+}
+
+export default HelloCC;

lib-react/src/hello-cc.tsx

@@ -1,5 +1,7 @@
 /** Aquí vamos a importar todos los componentes para usarlo en la aplicación */
 
 import HelloFC from './hello-fc';
+import HelloCC from './hello-cc';
+import CustomBox from './custom-box';
+export { HelloFC, HelloCC, CustomBox };
 
-export { HelloFC };