docs(bot): ⚡ updated doc

packages/docs/src/assets/fonts/generated/IBMPlexMono-Regular.module.css

@@ -0,0 +1,13 @@
+.font {
+    font-family: IBMPlexMono-Regular;
+}
+
+/* This file was automatically generated by GlyphHanger 4.0.1 */
+
+@font-face {
+    font-family: IBMPlexMono-Regular;
+    src: url(IBMPlexMono-Regular-subset.woff2) format('woff2'),
+        url(IBMPlexMono-Regular-subset.zopfli.woff) format('woff');
+    unicode-range: U+20, U+2C, U+2E, U+41-43, U+46, U+49, U+4B-4F, U+53-55, U+58,
+        U+61-65, U+67-69, U+6C-76;
+}

packages/docs/src/assets/fonts/generated/IBMPlexMono-SemiBold.module.css

@@ -0,0 +1,13 @@
+.font {
+    font-family: IBMPlexMono-SemiBold;
+}
+
+/* This file was automatically generated by GlyphHanger 4.0.1 */
+
+@font-face {
+    font-family: IBMPlexMono-SemiBold;
+    src: url(IBMPlexMono-SemiBold-subset.woff2) format('woff2'),
+        url(IBMPlexMono-SemiBold-subset.zopfli.woff) format('woff');
+    unicode-range: U+20, U+24, U+2E, U+30, U+38, U+39, U+41, U+42, U+44, U+47,
+        U+4E, U+4F, U+52-55, U+57, U+59, U+65, U+68, U+6F, U+72, U+74;
+}

packages/docs/src/assets/fonts/generated/Pally-Variable.module.css

@@ -0,0 +1,14 @@
+.font {
+    font-family: Pally-Variable;
+}
+
+/* This file was automatically generated by GlyphHanger 4.0.1 */
+
+@font-face {
+    font-family: Pally-Variable;
+    src: url(Pally-Variable-subset.woff2) format('woff2'),
+        url(Pally-Variable-subset.zopfli.woff) format('woff');
+    unicode-range: U+20, U+24, U+2C, U+2E, U+30, U+33, U+39, U+41-43, U+46,
+        U+49-4D, U+53, U+55, U+58, U+61-65, U+67-69, U+6B-77, U+79;
+    font-weight: 400 700;
+}

packages/docs/src/assets/fonts/generated/SourceSerifPro-Regular.module.css

@@ -0,0 +1,13 @@
+.font {
+    font-family: SourceSerifPro-Regular;
+}
+
+/* This file was automatically generated by GlyphHanger 4.0.1 */
+
+@font-face {
+    font-family: SourceSerifPro-Regular;
+    src: url(SourceSerifPro-Regular-subset.woff2) format('woff2'),
+        url(SourceSerifPro-Regular-subset.zopfli.woff) format('woff');
+    unicode-range: U+20, U+2C, U+2E, U+41-44, U+49, U+4A, U+4C, U+53, U+55,
+        U+61-65, U+67-69, U+6B-76, U+79;
+}

packages/docs/src/assets/fonts/generated/Synonym-Variable.module.css

@@ -0,0 +1,14 @@
+.font {
+    font-family: Synonym-Variable;
+}
+
+/* This file was automatically generated by GlyphHanger 4.0.1 */
+
+@font-face {
+    font-family: Synonym-Variable;
+    src: url(Synonym-Variable-subset.woff2) format('woff2'),
+        url(Synonym-Variable-subset.zopfli.woff) format('woff');
+    unicode-range: U+20, U+24, U+2C, U+2E, U+30, U+33, U+35, U+41-44, U+46, U+47,
+        U+49, U+4B-4F, U+53-55, U+57-59, U+61, U+63-65, U+67-69, U+6C-76;
+    font-weight: 400 700;
+}

packages/docs/src/assets/fonts/generated/TenorSans-Regular.module.css

@@ -0,0 +1,13 @@
+.font {
+    font-family: TenorSans-Regular;
+}
+
+/* This file was automatically generated by GlyphHanger 4.0.1 */
+
+@font-face {
+    font-family: TenorSans-Regular;
+    src: url(TenorSans-Regular-subset.woff2) format('woff2'),
+        url(TenorSans-Regular-subset.zopfli.woff) format('woff');
+    unicode-range: U+20, U+24, U+2E, U+30, U+36, U+46, U+49, U+4A, U+53, U+54,
+        U+61, U+63, U+65, U+69, U+6B, U+6E, U+6F, U+72-75, U+79;
+}

packages/docs/src/assets/styles/fonts.css

@@ -0,0 +1,44 @@
+@font-face {
+    font-family: 'Inter var';
+    font-weight: 100 900;
+    font-display: block;
+    font-style: normal;
+    font-named-instance: 'Regular';
+    src: url('../fonts/Inter-roman-latin.var.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Inter var';
+    font-weight: 100 900;
+    font-display: block;
+    font-style: italic;
+    font-named-instance: 'Italic';
+    src: url('../fonts/Inter-italic-latin.var.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Fira Code VF';
+    font-weight: 300 700;
+    font-style: normal;
+    src: url('../fonts/FiraCode-VF.woff2') format('woff2-variations'),
+        url('../fonts/FiraCode-VF.woff') format('woff-variations');
+}
+
+.font-mono {
+    font-variant-ligatures: none;
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('../fonts/SourceSansPro-Regular.otf') format('opentype');
+}
+
+@font-face {
+    font-family: 'Ubuntu Mono';
+    font-weight: 700;
+    font-style: normal;
+    src: url('../fonts/Ubuntu-Mono-bold.woff2') format('woff2');
+}

packages/docs/src/assets/styles/global.css

@@ -9,6 +9,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@import url('./fonts.css');
 
 @layer components {
     .btn {
@@ -24,19 +25,19 @@
     }
 
     .slot h1 {
-        @apply mb-2 font-semibold text-2xl;
+        @apply my-2 font-semibold text-2xl;
     }
 
     .slot h2 {
-        @apply mb-2 font-semibold text-lg;
+        @apply my-2 font-semibold text-lg;
     }
 
     .slot h3 {
-        @apply mb-2 font-semibold text-base;
+        @apply my-2 font-semibold text-base;
     }
 
     .slot code {
-        @apply bg-slate-100 dark:bg-slate-800 p-1 px-2 rounded w-full;
+        @apply bg-slate-100 dark:bg-slate-800 p-1 px-2 rounded w-full text-sm;
     }
 
     .slot pre {
@@ -51,6 +52,10 @@
         @apply my-5;
     }
 
+    .slot img {
+        @apply rounded drop-shadow-2xl;
+    }
+
     [data-aw-toggle-menu] path {
         @apply transition;
     }

packages/docs/src/components/widgets/Collaborators.tsx

@@ -0,0 +1,46 @@
+import { component$ } from '@builder.io/qwik'
+
+export default component$(() => {
+    return (
+        <div class={'pt-4'}>
+            <div class="flex items-center space-x-2 text-base">
+                <h4 class="font-semibold text-slate-900">Contributors</h4>
+                <span class="rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700">
+                    204
+                </span>
+            </div>
+            <div class="mt-3 flex -space-x-2 overflow-hidden">
+                <img
+                    class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
+                    src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                    alt=""
+                />
+                <img
+                    class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
+                    src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                    alt=""
+                />
+                <img
+                    class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
+                    src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
+                    alt=""
+                />
+                <img
+                    class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
+                    src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                    alt=""
+                />
+                <img
+                    class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
+                    src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                    alt=""
+                />
+            </div>
+            <div class="mt-3 text-sm font-medium">
+                <a href="#" class="text-blue-500">
+                    + 198 others
+                </a>
+            </div>
+        </div>
+    )
+})

packages/docs/src/components/widgets/NavBar.tsx

@@ -5,28 +5,68 @@ import { useLocation } from '@builder.io/qwik-city'
  * options = [] array con la lista de opciones de la documentacion
  */
 export default component$(
-    ({ options = [] }: { options: { link: string; name: string }[] }) => {
-        const location = useLocation()
-        const currentPage = location.pathname
+    ({
+        options = [],
+    }: {
+        options: {
+            title: string
+            link: string
+            list: { link: string; name: string }[]
+        }[]
+    }) => {
         return (
             <div>
-                <ul>
-                    {options.map((opt) => (
-                        <li>
-                            <a
-                                class={
-                                    currentPage === `${opt.link}/`
-                                        ? 'font-semibold'
-                                        : ''
-                                }
-                                href={opt.link}
-                            >
-                                {opt.name}
-                            </a>
-                        </li>
-                    ))}
-                </ul>
+                {options.map((item) => (
+                    <UlCompoent title={item.title} list={item.list} />
+                ))}
             </div>
         )
     }
 )
+
+export const UlCompoent = component$(
+    (porps: {
+        title: string
+        link: string
+        list: { link: string; name: string }[]
+    }) => {
+        return (
+            <ul>
+                <li class="mt-2 lg:mt-2">
+                    <a href={porps.link}>
+                        <h5 class="mb-8 lg:mb-3 font-semibold text-slate-900 dark:text-slate-200">
+                            {porps.title}
+                        </h5>
+                    </a>
+                    <LiComponent list={porps.list} />
+                </li>
+            </ul>
+        )
+    }
+)
+
+export const LiComponent = component$(
+    (porps: { list: { link: string; name: string }[] }) => {
+        const location = useLocation()
+        const currentPage = location.pathname
+        return (
+            <ul class="space-y-6 lg:space-y-2 border-l border-slate-100 dark:border-slate-800">
+                {porps.list.map((opt) => (
+                    <li>
+                        <a
+                            class={[
+                                currentPage === `${opt.link}/`
+                                    ? 'font-semibold'
+                                    : '',
+                                'block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300 ',
+                            ]}
+                            href={opt.link}
+                        >
+                            {opt.name}
+                        </a>
+                    </li>
+                ))}
+            </ul>
+        )
+    }
+)

packages/docs/src/root.tsx

@@ -8,6 +8,7 @@ import {
 import { RouterHead } from '~/components/core/RouterHead'
 import { DarkThemeLauncher } from '~/components/core/DarkThemeLauncher'
 
+import fontStyles from '~/assets/styles/fonts.css?inline'
 import globalStyles from '~/assets/styles/global.css?inline'
 
 export default component$(() => {
@@ -18,6 +19,7 @@ export default component$(() => {
      * Dont remove the `<head>` and `<body>` elements.
      */
 
+    useStyles$(fontStyles)
     useStyles$(globalStyles)
 
     return (
@@ -29,10 +31,7 @@ export default component$(() => {
                     content="width=device-width, initial-scale=1"
                 />
                 <link rel="manifest" href="/manifest.json" />
-                <link
-                    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
-                    rel="stylesheet"
-                />
+
                 <RouterHead />
                 <DarkThemeLauncher />
             </head>

packages/docs/src/routes/docs/index.mdx

@@ -1,3 +1,5 @@
+import Collaborators from '../../components/widgets/Collaborators'
+
 # Primeros Pasos
 
 Los chatbots son una herramienta poderosa para que las empresas y
@@ -6,8 +8,6 @@ organizaciones comuniquen de forma personalizada y automatizada con sus clientes
 Está documentación te ayudará a instalar tu bot de whatsapp en simples pasos con el proposito de
 que tengas un chatbot funcional en solo minutos.
 
----
-
 ### Ejecutar
 
 Es muy sencillo solo deberas ejecutar el siguiente comando 🚀
@@ -16,4 +16,12 @@ Es muy sencillo solo deberas ejecutar el siguiente comando 🚀
 npm create bot-whatsapp@latest
 ```
 
-![](https://camo.githubusercontent.com/97cd563fb448c72cc50dd60d71e85d269e5b1c738473d56fee6e023e1e0723bb/68747470733a2f2f692e67697068792e636f6d2f6d656469612f6e744d74365476616c70737454497837416b2f67697068792e77656270)
+<div class="my-4 w-full">
+    <img
+        class="w-full"
+        src="https://camo.githubusercontent.com/97cd563fb448c72cc50dd60d71e85d269e5b1c738473d56fee6e023e1e0723bb/68747470733a2f2f692e67697068792e636f6d2f6d656469612f6e744d74365476616c70737454497837416b2f67697068792e77656270"
+        alt=""
+    />
+</div>
+
+<Collaborators />

packages/docs/src/routes/docs/install/index.mdx

@@ -8,3 +8,113 @@ contributors:
 ---
 
 # Instalación
+
+### 📄 Bienvenido/a
+
+Si deseas colaborar con el proyecto existen varias maneras, la primera de ellas es aportando conocimiento y mejorando el repositorio (actualizando documentación, mejorando código, revisando **[issues](https://github.com/codigoencasa/bot-whatsapp/issues)**, etc).
+
+También es bien recibido los aportes económicos que se utilizaran para diferentes fines **[ver más](https://opencollective.com/bot-whatsapp)**
+
+El lenguaje principal que se utilizó para desarrollar este proyecto fue **JavaScript** con el fin de qué personas que están iniciando en el mundo de la programación puedan entender fácilmente.
+
+### 🤔 Preguntas frecuentes
+
+-   ¿Como puedo hacer aportaciones de código en el proyecto?: [Ver Video](https://youtu.be/Lxt8Acob6aU)
+-   ¿Como ejecutar el entorno de pruebas?: [Ver Video](https://youtu.be/Mf9V-dloBfk)
+-   ¿Como crear un nuevo proveedor?: [Ver Video](https://youtu.be/cahK9zH3SI8)
+-   ¿Que son los GithubActions?: [Ver Video](https://youtu.be/nYBEBFKLiqw)
+-   ¿Canales de comunicación?: [Discord](https://link.codigoencasa.com/DISCORD)
+
+---
+
+![](https://i.giphy.com/media/ntMt6TvalpstTIx7Ak/giphy.webp)
+
+**Requerimientos:**
+
+-   Node v16 o superior **[descargar node](https://nodejs.org/es/download/)**
+-   **[Yarn](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable)** como gestor de paquetes. En el link conseguirás las intrucciones para instalar yarn.
+-   **[VSCode](https://code.visualstudio.com/download)** (recomendado): Editor de código con plugins.
+-   **[Conventional Commits](https://marketplace.visualstudio.com/items?itemName=vivaxy.vscode-conventional-commits&ssr=false#overview)** (plugin-vscode) este plugin te ayudará a crear commit semántico.
+-   Se usará la rama **dev** _(https://github.com/leifermendez/bot-whatsapp/tree/dev)_ como rama principal hasta que se haga oficialmente el lanzamiento de la V2.
+
+### 🚀 Iniciando
+
+**Clonar repo rama dev**
+
+```
+git clone --branch dev https://github.com/codigoencasa/bot-whatsapp
+```
+
+**Instalar dependencias**
+
+```
+cd bot-whatsapp
+yarn install
+```
+
+**Compilar (build)**
+Para compilar la aplicación es necesario ejecutar este comando, el cual genera un directorio `lib` dentro de los paquetes del monorepo.
+
+```
+yarn build
+```
+
+**Example-app**
+Se ejecuta el CLI (Command Line Interface) para ayudarte a crear un app-bot de ejemplo.
+
+```
+yarn run cli
+```
+
+Selecionas (mediante las flechas arriba y abajo) el proveedor que quieras usar y cuando estes sobre el presiona la barra de espacio, igualmente selecciona la base de datos que quieras usar.
+
+Se creó un subdirecorio con el nombre del proveedor y base de datos que seleccionaste, ejemplo: `base-bailey-mysql`
+
+Dentro de ese directorio necesitas editar el archivo package.json y borrar las siguientes lineas:
+
+```
+        "@bot-whatsapp/bot": "latest",
+        "@bot-whatsapp/cli": "latest",
+        "@bot-whatsapp/database": "latest",
+        "@bot-whatsapp/provider": "latest",
+```
+
+Cambiate al directorio creado ejemplo: `base-bailey-mysql`
+
+```
+cd base-baileys-mysql
+```
+
+Ejecuta los comandos:
+
+```
+npm install
+npm run pre-copy
+npm start
+```
+
+En el caso de MySql y Mongo es necesario especificar en app.js los datos de la conexión, ejemplo de MySql:
+
+```
+const BaileysProvider = require('@bot-whatsapp/provider/baileys')
+const MySQLAdapter = require('@bot-whatsapp/database/mysql')
+
+/**
+ * Declaramos las conexiones de MySQL
+ */
+const MYSQL_DB_HOST = 'localhost'
+const MYSQL_DB_USER = 'usr'
+const MYSQL_DB_PASSWORD = 'pass'
+const MYSQL_DB_NAME = 'bot'
+```
+
+![](https://i.imgur.com/dC6lEwy.png)
+
+> **NOTA:** [Eres libre de aportar informacion a este documento o arreglar ortografia 🤣](https://github.com/codigoencasa/bot-whatsapp/edit/dev/CONTRIBUTING.md)
+
+---
+
+-   [Discord](https://link.codigoencasa.com/DISCORD)
+-   [Twitter](https://twitter.com/leifermendez)
+-   [Youtube](https://www.youtube.com/watch?v=5lEMCeWEJ8o&list=PL_WGMLcL4jzWPhdhcUyhbFU6bC0oJd2BR)
+-   [Telegram](https://t.me/leifermendez)

packages/docs/src/routes/docs/layout!.tsx

@@ -8,16 +8,15 @@ import ExtraBar from '~/components/widgets/ExtraBar'
 export default component$(() => {
     const store = useStore({
         options: [
-            { name: 'Primeros pasos', link: '/docs' },
-            { name: 'Instalación', link: '/docs/install' },
-            { name: 'Configuración', link: '/docs/settings' },
-            { name: 'Migración', link: '/docs/migration' },
-        ],
-        extraOptions: [
-            { name: 'Primeros pasos', link: '/docs', class: 'font-semibold' },
-            { name: 'Instalación', link: '/docs' },
-            { name: 'Configuración', link: '/docs' },
-            { name: 'Forma de pensar', link: '/docs' },
+            {
+                title: 'Primeros pasos',
+                list: [
+                    { name: 'Vista rápida', link: '/docs' },
+                    { name: 'Instalación', link: '/docs/install' },
+                    { name: 'Configuración', link: '/docs/settings' },
+                    { name: 'Migración', link: '/docs/migration' },
+                ],
+            },
         ],
     })
 
@@ -33,7 +32,7 @@ export default component$(() => {
                         <Slot />
                     </div>
                     <div class={'px-3 col-span-1  '}>
-                        <ExtraBar options={store.extraOptions} />
+                        {/* <ExtraBar options={store.extraOptions} /> */}
                     </div>
                 </div>
             </main>

packages/docs/src/routes/docs/migration/index.mdx

@@ -1,10 +1,130 @@
----
-title: Overview
-contributors:
-    - adamdbradley
-    - steve8708
-    - manucorporat
-    - gabrielgrant
----
+# Migración
 
-# Migracion
+#### Versión (legacy)
+
+En la **_versión (legacy)_** se implementas los flujos de esta manera, en dos archivos independientes.
+
+> **`initial.json`** para establecer las palabras claves y el flujo a responder, por otro lado tambien se necesitaba implementar.
+> **`response.json`** donde se escriben los mensajes a responder.
+
+```json
+//initial.json
+[
+    {
+        "keywords": ["hola", "ola", "alo"],
+        "key": "hola"
+    },
+    {
+        "keywords": ["productos", "info"],
+        "key": "productos"
+    },
+    {
+        "keywords": ["adios", "bye"],
+        "key": "adios"
+    },
+    {
+        "keywords": ["imagen", "foto"],
+        "key": "catalogo"
+    }
+]
+```
+
+```json
+//response.json
+{
+    "hola": {
+        "replyMessage": ["Gracias a ti! \n"],
+        "media": null,
+        "trigger": null
+    },
+    "adios": {
+        "replyMessage": ["Que te vaya bien!!"]
+    },
+    "productos": {
+        "replyMessage": ["Más productos aquí"],
+        "trigger": null,
+        "actions": {
+            "title": "¿Que te interesa ver?",
+            "message": "Abajo unos botons",
+            "footer": "",
+            "buttons": [
+                { "body": "Telefonos" },
+                { "body": "Computadoras" },
+                { "body": "Otros" }
+            ]
+        }
+    },
+    "catalogo": {
+        "replyMessage": ["Te envio una imagen"],
+        "media": "https://media2.giphy.com/media/VQJu0IeULuAmCwf5SL/giphy.gif",
+        "trigger": null
+    }
+}
+```
+
+#### Versión 2 (0.2.X)
+
+En esta versión es mucho más sencillo abajo encontraras un ejemplo del mismo flujo anteriormente mostrado.
+
+```js
+//app.js
+const {
+    createBot,
+    createProvider,
+    createFlow,
+    addKeyword,
+    addChild,
+} = require('@bot-whatsapp/bot')
+
+const BaileysProvider = require('@bot-whatsapp/provider/baileys')
+const MockAdapter = require('@bot-whatsapp/database/mock')
+/**
+ * Declarando flujos principales.
+ */
+const flowHola = addKeyword(['hola', 'ola', 'alo']).addAnswer(
+    'Bienvenido a tu tienda online!'
+)
+
+const flowAdios = addKeyword(['adios', 'bye'])
+    .addAnswer('Que te vaya bien!!')
+    .addAnswer('Hasta luego!')
+
+const flowProductos = addKeyword(['productos', 'info']).addAnswer(
+    'Te envio una imagen',
+    {
+        buttons: [
+            { body: 'Telefonos' },
+            { body: 'Computadoras' },
+            { body: 'Otros' },
+        ],
+    }
+)
+
+const flowCatalogo = addKeyword(['imagen', 'foto']).addAnswer(
+    'Te envio una imagen',
+    { media: 'https://media2.giphy.com/media/VQJu0IeULuAmCwf5SL/giphy.gif' }
+)
+
+const main = async () => {
+    const adapterDB = new MockAdapter()
+    const adapterFlow = createFlow([
+        flowHola,
+        flowAdios,
+        flowProductos,
+        flowCatalogo,
+    ])
+    const adapterProvider = createProvider(BaileysProvider)
+    createBot({
+        flow: adapterFlow,
+        provider: adapterProvider,
+        database: adapterDB,
+    })
+}
+```
+
+> Forma parte de este proyecto.
+
+-   [Discord](https://link.codigoencasa.com/DISCORD)
+-   [Twitter](https://twitter.com/leifermendez)
+-   [Youtube](https://www.youtube.com/watch?v=5lEMCeWEJ8o&list=PL_WGMLcL4jzWPhdhcUyhbFU6bC0oJd2BR)
+-   [Telegram](https://t.me/leifermendez)