Merge pull request #49 from juanmanuelgg/28-generar-la-documentación-…

…para-personas_Juan-Manuel

28 generar la documentación para personas juan manuel

README.md

@@ -2,6 +2,58 @@
 
 Este repositorio guarda una librería libre de componentes para React, escrita en Typescript.
 
+La librería puede ser usada desde un tag `<script>` del navegador.
+
+> También se deben importar las dependencias (react y react-dom).
+
+## Ejemplo
+
+```html
+<script
+    src="https://unpkg.com/react@18/umd/react.production.min.js"
+    crossorigin
+></script>
+<script
+    src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
+    crossorigin
+></script>
+<script
+    src="https://unpkg.com/@bonapata/[email protected]/dist/umd/partes.js"
+    crossorigin
+></script>
+<script>
+    const pathnames = new Map();
+    pathnames.set('/javascript', 'assets/images/js.png');
+    pathnames.set('/mysql', 'assets/images/mysql.png');
+    pathnames.set('/git', 'assets/images/git.png');
+    pathnames.set('/bash', 'assets/images/gnu-bash.png');
+    pathnames.set('/postgresql', 'assets/images/postgres.png');
+    pathnames.set('/firewall', 'assets/images/cortafuegos.png');
+    pathnames.set('/networking', 'assets/images/networking.png');
+    pathnames.set('/docker', 'assets/images/docker.png');
+    pathnames.set('/ssh', 'assets/images/ssh.png');
+    pathnames.set('/python', 'assets/images/python.png');
+    pathnames.set('/linux-basic-info', 'assets/images/linux.png');
+    pathnames.set('/java', 'assets/images/java.png');
+    pathnames.set('/java-process', 'assets/images/java-process.png');
+    pathnames.set('/crontab', 'assets/images/cron.png');
+    pathnames.set('/vim', 'assets/images/cli-file.png');
+    pathnames.set('/heroku-java', 'assets/images/heroku.png');
+    pathnames.set('/gpg', 'assets/images/privacyBorder.png');
+    pathnames.set('/strace', 'assets/images/strace.svg');
+
+    const props = { pathnames };
+    const element = React.createElement(partes.SpeedDial, props);
+    const container = document.getElementById('app');
+
+    ReactDOM.render(element, container);
+</script>
+```
+
+## Muestra de la librería en uso
+
+[Ejemplo de uso, en mis notas.](https://juanmanuelgg.github.io/)
+
 ## Documentación
 
 [API Reference](/docs/index.md)

cypress/component/SpeedDial.cy.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import DarkModeToogle from '../support/DarkModeToogle';
 import { SpeedDial } from '../../src/components/SpeedDial';
 import { SpeedDial as SpeedDialDist } from '../../';
 
@@ -10,8 +11,6 @@ describe('SpeedDial.cy.tsx', () => {
     // ============================================================================================
     it('Mounts', () => {
         cy.mount(<Component />);
-
-        cy.pause();
     });
 
     it('Should default to an empty list of favorites', () => {
@@ -54,17 +53,16 @@ describe('SpeedDial.cy.tsx', () => {
     it('Show dark mode', () => {
         // Arrange
         cy.mount(
-            <div className="dark">
+            <>
                 <Component />
-            </div>
+                <DarkModeToogle />
+            </>
         );
         // Act
         cy.getByDataCy('add-button').click();
         // Assert
         cy.getByDataCy('favorite-goto-button-0').should('be.visible');
         // TODO ... evaluar color
-
-        cy.pause();
     });
     // TODO ... make more rigorous tests
 });

cypress/support/DarkModeToogle.tsx

@@ -0,0 +1,6 @@
+import { DarkModeToggle } from '../../src/components/DarkModeToggle';
+import { DarkModeToggle as DarkModeToggleDist } from '../../';
+
+const Component = Cypress.env('CI') ? DarkModeToggleDist : DarkModeToggle;
+
+export default Component;

dist/esm/components/DarkModeToggle.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+/**
+ * Un boton que permite quitar o poner la clase dark del elemento html.
+ * Lo que controla el modo oscuro o claro de los otros componentes.
+ * @returns Un componente función de React renderizable.
+ * @public
+ */
+export declare const DarkModeToggle: React.FunctionComponent;
+//# sourceMappingURL=DarkModeToggle.d.ts.map

dist/esm/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from './DarkModeToggle';
 export * from './Helper';
 export * from './Notification';
 export * from './SpeedDial';

dist/partes-alpha.d.ts

@@ -6,6 +6,14 @@
 
 import { default as React_2 } from 'react';
 
+/**
+ * Un boton que permite quitar o poner la clase dark del elemento html.
+ * Lo que controla el modo oscuro o claro de los otros componentes.
+ * @returns Un componente función de React renderizable.
+ * @public
+ */
+export declare const DarkModeToggle: React_2.FunctionComponent;
+
 /**
  * La interfaz que cumplen las propiedades del componente Notification.
  * @public

dist/partes-beta.d.ts

@@ -6,6 +6,14 @@
 
 import { default as React_2 } from 'react';
 
+/**
+ * Un boton que permite quitar o poner la clase dark del elemento html.
+ * Lo que controla el modo oscuro o claro de los otros componentes.
+ * @returns Un componente función de React renderizable.
+ * @public
+ */
+export declare const DarkModeToggle: React_2.FunctionComponent;
+
 /**
  * La interfaz que cumplen las propiedades del componente Notification.
  * @public

dist/partes-public.d.ts

@@ -6,6 +6,14 @@
 
 import { default as React_2 } from 'react';
 
+/**
+ * Un boton que permite quitar o poner la clase dark del elemento html.
+ * Lo que controla el modo oscuro o claro de los otros componentes.
+ * @returns Un componente función de React renderizable.
+ * @public
+ */
+export declare const DarkModeToggle: React_2.FunctionComponent;
+
 /**
  * La interfaz que cumplen las propiedades del componente Notification.
  * @public

dist/partes.d.ts

@@ -6,6 +6,14 @@
 
 import { default as React_2 } from 'react';
 
+/**
+ * Un boton que permite quitar o poner la clase dark del elemento html.
+ * Lo que controla el modo oscuro o claro de los otros componentes.
+ * @returns Un componente función de React renderizable.
+ * @public
+ */
+export declare const DarkModeToggle: React_2.FunctionComponent;
+
 /**
  * La interfaz que cumplen las propiedades del componente Notification.
  * @public