docs(bot): 📝 new desing

fix(adapter): 🔥 improvement baileys

.c8rc.json

@@ -4,5 +4,5 @@
     "reporter": ["html"],
     "report-dir": "./coverage",
     "check-coverage": true,
-    "lines": 95
+    "lines": 90
 }

.eslintignore

@@ -0,0 +1 @@
+packages/docs/*

.eslintrc.js

@@ -10,5 +10,9 @@ module.exports = {
     parserOptions: {
         ecmaVersion: 'latest',
     },
-    rules: {},
+    rules: {
+        'no-unsafe-negation': 'off',
+        'no-prototype-builtins': 'off',
+        'no-useless-escape': 'off',
+    },
 }

.github/FUNDING.yml

@@ -0,0 +1,9 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: leifermendez
+open_collective: bot-whatsapp
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+custom: https://www.buymeacoffee.com/leifermendez

.github/workflows/ci.yml

@@ -1,26 +1,58 @@
-name: Test / Coverage
+name: BotWhatsapp Build-Test
 
 on:
-    push:
-        branches: [feature/monorepo]
     pull_request:
-        branches: [main]
+        branches:
+            - dev
 
 jobs:
-    build:
+    ############ BUILD PACKAGE ############
+    build-package:
+        name: Build Package
         runs-on: ubuntu-latest
-
-        strategy:
-            matrix:
-                node-version: [16.x]
-
+        needs:
+            - test-unit
         steps:
-            - uses: actions/checkout@v3
-            - name: Use Node.js ${{ matrix.node-version }}
+            - name: Checkout
+              uses: actions/checkout@v3
+
+            - name: Setup Node
               uses: actions/setup-node@v3
               with:
-                  node-version: ${{ matrix.node-version }}
-            - run: npm install
-            - run: npm run build --if-present
-            - run: npm run test.unit
-            - run: npm run test.coverage
+                  node-version: 16.x
+                  cache: 'yarn'
+                  registry-url: https://registry.npmjs.org/
+
+            - run: corepack enable
+
+            - name: Install NPM Dependencies
+              run: yarn install --immutable --network-timeout 300000
+
+            - name: Build Package
+              run: yarn build
+
+            - name: Build Eslint rules
+              run: yarn lint:fix
+
+    ############ UNIT TEST ############
+    test-unit:
+        name: Unit Tests
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v3
+
+            - name: Setup Node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 16.x
+                  cache: 'yarn'
+                  registry-url: https://registry.npmjs.org/
+
+            - run: corepack enable
+
+            - name: Install NPM Dependencies
+              run: yarn install --immutable --network-timeout 300000
+
+            - name: Unit Tests
+              run: yarn test

.github/workflows/contributors.yml

@@ -0,0 +1,19 @@
+name: Add contributors
+on:
+    pull_request:
+        branches:
+            - dev
+            - main
+        types: [closed]
+
+jobs:
+    contrib-readme-job:
+        runs-on: ubuntu-latest
+        name: A job to automate contrib in readme
+        steps:
+            - name: Contribute List
+              uses: akhilmhdh/contributors-readme-action@v2.3.6
+              with:
+                  image_size: 50
+              env:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/releases-dev.yml

@@ -0,0 +1,56 @@
+name: BotWhatsapp Releases(DEV)
+
+on:
+    push:
+        branches:
+            - next-release
+
+jobs:
+    ############ RELEASE ############
+    release:
+        name: Release
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v3
+              with:
+                  ref: ${{ github.head_ref }}
+                  persist-credentials: false
+                  fetch-depth: 0
+
+            - name: Setup Node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 16.x
+                  cache: 'yarn'
+                  registry-url: https://registry.npmjs.org/
+
+            - run: corepack enable
+
+            - name: Install NPM Dependencies
+              run: yarn install --immutable --network-timeout 300000
+
+            - name: Build Package
+              run: yarn build
+
+            - name: Release @bot-whatsapp/bot
+              run: yarn node ./scripts/release.js --name=bot --version=  --token="${{ secrets.NPM_TOKEN }}"
+
+            - name: Release @bot-whatsapp/cli
+              run: yarn node ./scripts/release.js --name=cli --version=  --token="${{ secrets.NPM_TOKEN }}"
+
+            - name: Release @bot-whatsapp/create-bot-whatsapp
+              run: yarn node ./scripts/release.js --name=create-bot-whatsapp --version=  --token="${{ secrets.NPM_TOKEN }}"
+
+            - name: Release @bot-whatsapp/database
+              run: yarn node ./scripts/release.js --name=database --version=  --token="${{ secrets.NPM_TOKEN }}"
+
+            - name: Release @bot-whatsapp/provider
+              run: yarn node ./scripts/release.js --name=provider --version=  --token="${{ secrets.NPM_TOKEN }}"
+
+            - name: Commit Versioning & Push changes
+              uses: actions-js/push@master
+              with:
+                  github_token: ${{ secrets.GITHUB_TOKEN }}
+                  message: 'ci(version): :zap: automatic - "${date}" updated versions every packages'
+                  branch: 'dev'

.github/workflows/releases.yml

@@ -0,0 +1,60 @@
+name: BotWhatsapp Releases(Prod)
+
+on:
+    push:
+        tags:
+            - 'v*.*.*'
+
+jobs:
+    ############ RELEASE ############
+    release:
+        name: Release
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v3
+              with:
+                  ref: ${{ github.head_ref }}
+                  persist-credentials: false
+                  fetch-depth: 0
+
+            - name: Set output
+              id: vars
+              run: echo "tag=${GITHUB_REF#refs/*/}" >> $GITHUB_OUTPUT
+
+            - name: Setup Node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 16.x
+                  cache: 'yarn'
+                  registry-url: https://registry.npmjs.org/
+
+            - run: corepack enable
+
+            - name: Install NPM Dependencies
+              run: yarn install --immutable --network-timeout 300000
+
+            - name: Build Package
+              run: yarn build
+
+            - name: Release @bot-whatsapp/bot
+              run: yarn node ./scripts/release.js --name=bot --version="${{ steps.vars.outputs.tag }}" --token="${{ secrets.NPM_TOKEN }}"
+
+            - name: Release @bot-whatsapp/cli
+              run: yarn node ./scripts/release.js --name=cli --version="${{ steps.vars.outputs.tag }}" --token="${{ secrets.NPM_TOKEN }}"
+
+            - name: Release @bot-whatsapp/create-bot-whatsapp
+              run: yarn node ./scripts/release.js --name=create-bot-whatsapp --version="${{ steps.vars.outputs.tag }}" --token="${{ secrets.NPM_TOKEN }}"
+
+            - name: Release @bot-whatsapp/database
+              run: yarn node ./scripts/release.js --name=database --version="${{ steps.vars.outputs.tag }}" --token="${{ secrets.NPM_TOKEN }}"
+
+            - name: Release @bot-whatsapp/provider
+              run: yarn node ./scripts/release.js --name=provider --version="${{ steps.vars.outputs.tag }}" --token="${{ secrets.NPM_TOKEN }}"
+
+            - name: Commit Versioning & Push changes
+              uses: actions-js/push@master
+              with:
+                  github_token: ${{ secrets.GITHUB_TOKEN }}
+                  message: 'ci(version): :zap: automatic - "${date}" updated versions every packages'
+                  branch: 'dev'

.gitignore

@@ -1,7 +1,9 @@
 /node_modules
+/packages/*/starters
 /packages/*/node_modules
 /packages/*/dist
 /packages/*/docs/dist
+/packages/provider/src/venom/tokens
 session.json
 chats/*
 !chats/.gitkeep
@@ -14,12 +16,23 @@ mediaSend/*
 .wwebjs_auth
 packages/cli/config.json
 config.json
+.yarnrc.yml
 coverage/
 *.lcov
 log
+log/*
+*.log
+*.tgz
 lib
 tmp/
+.yarn/*
+!.yarn/releases
+!.yarn/plugins/@yarnpkg/plugin-postinstall.cjs
 .fleet/
-example-app/
+example-app*/
+base-*/
+!starters/apps/base-*/
 qr.svg
-package-lock.json
+package-lock.json
+yarn-error.log
+.npmrc

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit 

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-yarn run format:check && yarn run format:write && git add .
+yarn run fmt.staged

.prettierignore

@@ -1,5 +1,5 @@
 packages/**/lib
-packages/docs
+packages/docs/*.json
 **/.git
 **/.svn
 **/.hg

.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+    "conventionalCommits.scopes": [
+        "hook",
+        "contributing",
+        "cli",
+        "bot",
+        "provider",
+        "adapter",
+        "ci",
+        "starters"
+    ]
+}

.yarn/plugins/@yarnpkg/plugin-postinstall.cjs

@@ -0,0 +1,8 @@
+/* eslint-disable */
+module.exports = {
+name: "@yarnpkg/plugin-postinstall",
+factory: function (require) {
+var plugin;(()=>{"use strict";var e={d:(t,n)=>{for(var o in n)e.o(n,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:n[o]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{default:()=>s});const n=require("@yarnpkg/core"),o=require("clipanion"),a={postinstall:{description:"Postinstall hook that will always run in Yarn v2",type:n.SettingsType.STRING,default:""}},r=require("@yarnpkg/shell"),l=async e=>{if(e){console.log("Running postinstall command...");const t=await r.execute(e);if(0!==t)throw new Error("postinstall command failed with exit code "+t)}};var i=function(e,t,n,o){var a,r=arguments.length,l=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,n,o);else for(var i=e.length-1;i>=0;i--)(a=e[i])&&(l=(r<3?a(l):r>3?a(t,n,l):a(t,n))||l);return r>3&&l&&Object.defineProperty(t,n,l),l};class c extends o.Command{async execute(){const e=(await n.Configuration.find(this.context.cwd,this.context.plugins)).get("postinstall");await l(e)}}i([o.Command.Path("postinstall")],c.prototype,"execute",null);const s={configuration:a,commands:[c],hooks:{afterAllInstalled:async e=>{const t=e.configuration.get("postinstall");await l(t)}}};plugin=t})();
+return plugin;
+}
+};

.yarnrc.yml

@@ -0,0 +1,10 @@
+nodeLinker: node-modules
+
+npmPublishRegistry: 'https://registry.npmjs.org'
+
+plugins:
+    - path: .yarn/plugins/@yarnpkg/plugin-postinstall.cjs
+      spec: 'https://raw.githubusercontent.com/gravitywelluk/yarn-plugin-postinstall/master/bundles/%40yarnpkg/plugin-postinstall.js'
+
+yarnPath: .yarn/releases/yarn-3.3.0.cjs
+postinstall: npx husky install

CHANGELOG.md

@@ -1,3 +1,273 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+### [0.1.2](https://github.com/leifermendez/bot-whatsapp/compare/v0.1.1...v0.1.2) (2022-12-12)
+
+
+### Bug Fixes
+
+* **cli:** :art: starters ([79e2318](https://github.com/leifermendez/bot-whatsapp/commit/79e231825613f33bfec2ae8e93139f885c199c7a))
+* **cli:** :art: starters ([87ba43a](https://github.com/leifermendez/bot-whatsapp/commit/87ba43a5535be0893a7701a3b6a085ee5d29e7c5))
+* fix dependencias ([61d0324](https://github.com/leifermendez/bot-whatsapp/commit/61d032426119341187a470035d49b8b252ca46cd))
+
+### [0.1.1](https://github.com/leifermendez/bot-whatsapp/compare/v0.3.0...v0.1.1) (2022-12-12)
+
+## 0.3.0 (2022-12-12)
+
+
+### ⚠ BREAKING CHANGES
+
+* 🧨 NO
+
+### Features
+
+* (🎸) add onClick prop to component ([4ae3898](https://github.com/leifermendez/bot-whatsapp/commit/4ae389846d38c133f6bb2129ae373eed39d9d08d))
+* **adapter:** added adapter mysql ([717a7dc](https://github.com/leifermendez/bot-whatsapp/commit/717a7dc95fbc107ec6f55387aff606c47144baa4))
+* **adapter:** implementation of json file adapter ([5e1a373](https://github.com/leifermendez/bot-whatsapp/commit/5e1a3737303c843095984f6357564ea18458362f))
+* **adapter:** mysql adapter  ([8d73c86](https://github.com/leifermendez/bot-whatsapp/commit/8d73c86946d07aa80e5b375b62b84a88b2892e03))
+* **adapter:** sql is added to create the table ([4b7de0f](https://github.com/leifermendez/bot-whatsapp/commit/4b7de0f6901524fa2c09271c3a99c364e6b3c260))
+* **bot:** :fire: improvement provider handler ([4154cc2](https://github.com/leifermendez/bot-whatsapp/commit/4154cc223091a46d3203d3a378cd42f61749a5fa))
+* **bot:** :zap: add send image function ([ce8a96b](https://github.com/leifermendez/bot-whatsapp/commit/ce8a96b958ff814c65d8fb4dbd5eaed5cc83a1ed))
+* **ci:** :art: add releases ([b115dc3](https://github.com/leifermendez/bot-whatsapp/commit/b115dc3654996f049837bfb6b5d039a2313df0ad))
+* **ci:** :art: relases script ([2e906bc](https://github.com/leifermendez/bot-whatsapp/commit/2e906bce79f7d854d437334e1d0c2cd270b0bbc6))
+* **ci:** update ci ([e5a9db7](https://github.com/leifermendez/bot-whatsapp/commit/e5a9db7e12340c4f5baa66e8b20585b63daa3bcf))
+* **cli:** create-starter ([3977987](https://github.com/leifermendez/bot-whatsapp/commit/397798790ef5857ca758b0df8384c6a4bfacc181))
+* **provider:** :fire: add twilii (weoking) ([4350dff](https://github.com/leifermendez/bot-whatsapp/commit/4350dff22a7de69ba6d35ecbdd67e59b810bd46f))
+* **provider:** added twilio provider ([8dd3be9](https://github.com/leifermendez/bot-whatsapp/commit/8dd3be909b36717f6b54e141a5f48d2722d4855c))
+* **release:** added ([1988948](https://github.com/leifermendez/bot-whatsapp/commit/1988948c30d922beb7b83faab96d1d59cf7f5f90))
+* **release:** added ([f4ad704](https://github.com/leifermendez/bot-whatsapp/commit/f4ad7040abf619635480c30babd6f1159c7af85a))
+
+
+### Bug Fixes
+
+* **adapter:** conflict resolution ([4b307ef](https://github.com/leifermendez/bot-whatsapp/commit/4b307efe79c738a5c4e04ff1c07ca247d827593c))
+* **adapter:** corrections are made to the adapter ([afa6771](https://github.com/leifermendez/bot-whatsapp/commit/afa677190392d48715930ebe2b1e15c7619d730f))
+* **bot:** :zap: added delay promises ([73caf09](https://github.com/leifermendez/bot-whatsapp/commit/73caf090ba9013132e5dcb7761a10939dc9ac300))
+* **bot:** :zap: fix sensitive case ([24ac9fb](https://github.com/leifermendez/bot-whatsapp/commit/24ac9fbf48f80eeb521a36bc938af3a70dd82303))
+* **bot:** :zap: flow improvement + add utils ([a7b19d9](https://github.com/leifermendez/bot-whatsapp/commit/a7b19d9bff5ea66ff888555c3df37ae0e20b612a))
+* **bot:** update ([49698bf](https://github.com/leifermendez/bot-whatsapp/commit/49698bfda9d2a53f7b1a7e1724a796698601fbaa))
+* **ci:** :zap: balance version ([ec46cfd](https://github.com/leifermendez/bot-whatsapp/commit/ec46cfdd657c08c8e90261613f00cfc080f1e1d6))
+* **ci:** :zap: github action ([b827a0a](https://github.com/leifermendez/bot-whatsapp/commit/b827a0ab225b89bb8117c82628db0679c09b4102))
+* **ci:** :zap: github action ([4142ca4](https://github.com/leifermendez/bot-whatsapp/commit/4142ca4fd552e7005f3b1397a76b90a2e574d19d))
+* **ci:** :zap: github action ([091544a](https://github.com/leifermendez/bot-whatsapp/commit/091544ac3fac0c16925e856e1aec64bcad0ecf6d))
+* **ci:** :zap: github action ([2ce342a](https://github.com/leifermendez/bot-whatsapp/commit/2ce342a0cb15019d5084ca06dc30e342b030ea10))
+* **ci:** :zap: github action ([7817793](https://github.com/leifermendez/bot-whatsapp/commit/781779328f93ef8b0e6e0f85c6cd05ae782112fb))
+* **ci:** :zap: github action ([dfced8c](https://github.com/leifermendez/bot-whatsapp/commit/dfced8c594e9175c81e837af359631ba055b7e1a))
+* **ci:** :zap: github action ([aaa4ce8](https://github.com/leifermendez/bot-whatsapp/commit/aaa4ce837229fd51e274de3d91e1d9d615ac69fd))
+* **ci:** :zap: github action ([9ddf144](https://github.com/leifermendez/bot-whatsapp/commit/9ddf144244cd6877e7d26f576387814459f2befb))
+* **ci:** :zap: github action ([b465de5](https://github.com/leifermendez/bot-whatsapp/commit/b465de55a0e511213d1a7760a74efa102172c85e))
+* **ci:** :zap: github action ([cf1dc6f](https://github.com/leifermendez/bot-whatsapp/commit/cf1dc6fac810545e5a2b63f31f71322f37329e38))
+* **ci:** :zap: github action ([8d897f8](https://github.com/leifermendez/bot-whatsapp/commit/8d897f824e27a55ca011163092a813a7e8f426af))
+* **ci:** ci ([f55cfae](https://github.com/leifermendez/bot-whatsapp/commit/f55cfae6e4ccc1df949212999406680020d27f9c))
+* **ci:** ci ([671c5b3](https://github.com/leifermendez/bot-whatsapp/commit/671c5b37f33360e8cb754625b8dd6e83bce9014d))
+* **cli:** :bug: path ([32212fb](https://github.com/leifermendez/bot-whatsapp/commit/32212fb52d206bf6f8d753a86d9ce40aa0db2a5d))
+* **cli:** :fire: create script - templates ([2319db3](https://github.com/leifermendez/bot-whatsapp/commit/2319db3009501fe57ae21e60ad286eb68c46f4fd))
+* **cli:** :fire: create script - templates ([9cb98b5](https://github.com/leifermendez/bot-whatsapp/commit/9cb98b5e73fca3c3f5e70a8497badc31e494b943))
+* **cli:** :fire: create script - templates ([2999e0e](https://github.com/leifermendez/bot-whatsapp/commit/2999e0e753f31a8b9e6d7c117e78cdb5656e203a))
+* **cli:** :fire: create script - templates ([af716b7](https://github.com/leifermendez/bot-whatsapp/commit/af716b75372899877a81b528b58278376166d0ad))
+* **cli:** :fire: create script - templates ([c6999c8](https://github.com/leifermendez/bot-whatsapp/commit/c6999c84931083a87b5717db58003be68244707e))
+* **cli:** :fire: create script - templates ([d4b49a9](https://github.com/leifermendez/bot-whatsapp/commit/d4b49a9bd7085070f0c5964d2903f10b71bde0b3))
+* **cli:** :fire: create script - templates ([eebc3c9](https://github.com/leifermendez/bot-whatsapp/commit/eebc3c980638d88f11a0d93b8344f3ff345c7ee5))
+* **cli:** :zap: clean eslinter ([bfb69d9](https://github.com/leifermendez/bot-whatsapp/commit/bfb69d9a9574a757ae02748b6c5f5afa3eac68e6))
+* **cli:** :zap: clean eslinter ([15f6972](https://github.com/leifermendez/bot-whatsapp/commit/15f697225775a0f0e0a440cd980f7fb8f51a1056))
+* **cli:** :zap: create-starter ([d3b8310](https://github.com/leifermendez/bot-whatsapp/commit/d3b8310180d2ad813733b1d18f2c32d7d947740a))
+* **cli:** :zap: update cli copy ([7797c2b](https://github.com/leifermendez/bot-whatsapp/commit/7797c2b46133697e2a591adab2b67e66b34a1cfe))
+* **fix:** fix ([6483545](https://github.com/leifermendez/bot-whatsapp/commit/648354500b123f20044f5ac2e8a26b15f16d1b8d))
+* **fix:** fix ([28c0480](https://github.com/leifermendez/bot-whatsapp/commit/28c0480b8bfa6b24394095f57c36ef89c9aeb566))
+* **linter:** update linter and commitlint ([70a94ab](https://github.com/leifermendez/bot-whatsapp/commit/70a94ab2c6f8e4122780c77bc3a621944883e621))
+* pre-copy fix ([08e2552](https://github.com/leifermendez/bot-whatsapp/commit/08e2552907c48cfeaac843457a18bf2032e6f8aa))
+* pre-copy fix ([6617107](https://github.com/leifermendez/bot-whatsapp/commit/6617107ab824215c449e26eae6c2bb327ecfc092))
+* **starter:** pre-copy fix ([929e74c](https://github.com/leifermendez/bot-whatsapp/commit/929e74c84b667ec13cb5490b3b951cb8df15ebd1))
+
+
+* (💍) Is justa test! ([37d04e9](https://github.com/leifermendez/bot-whatsapp/commit/37d04e9e89d3f01fdc367654ba60fb11ab2614c4))
+
+### [0.2.1](https://github.com/leifermendez/bot-whatsapp/compare/v0.2.0...v0.2.1) (2022-12-12)
+
+## 0.2.0 (2022-12-12)
+
+
+### ⚠ BREAKING CHANGES
+
+* 🧨 NO
+
+### Features
+
+* (🎸) add onClick prop to component ([4ae3898](https://github.com/leifermendez/bot-whatsapp/commit/4ae389846d38c133f6bb2129ae373eed39d9d08d))
+* **adapter:** added adapter mysql ([717a7dc](https://github.com/leifermendez/bot-whatsapp/commit/717a7dc95fbc107ec6f55387aff606c47144baa4))
+* **adapter:** implementation of json file adapter ([5e1a373](https://github.com/leifermendez/bot-whatsapp/commit/5e1a3737303c843095984f6357564ea18458362f))
+* **adapter:** mysql adapter  ([8d73c86](https://github.com/leifermendez/bot-whatsapp/commit/8d73c86946d07aa80e5b375b62b84a88b2892e03))
+* **adapter:** sql is added to create the table ([4b7de0f](https://github.com/leifermendez/bot-whatsapp/commit/4b7de0f6901524fa2c09271c3a99c364e6b3c260))
+* **bot:** :fire: improvement provider handler ([4154cc2](https://github.com/leifermendez/bot-whatsapp/commit/4154cc223091a46d3203d3a378cd42f61749a5fa))
+* **bot:** :zap: add send image function ([ce8a96b](https://github.com/leifermendez/bot-whatsapp/commit/ce8a96b958ff814c65d8fb4dbd5eaed5cc83a1ed))
+* **ci:** :art: add releases ([b115dc3](https://github.com/leifermendez/bot-whatsapp/commit/b115dc3654996f049837bfb6b5d039a2313df0ad))
+* **ci:** :art: relases script ([2e906bc](https://github.com/leifermendez/bot-whatsapp/commit/2e906bce79f7d854d437334e1d0c2cd270b0bbc6))
+* **ci:** update ci ([e5a9db7](https://github.com/leifermendez/bot-whatsapp/commit/e5a9db7e12340c4f5baa66e8b20585b63daa3bcf))
+* **cli:** create-starter ([3977987](https://github.com/leifermendez/bot-whatsapp/commit/397798790ef5857ca758b0df8384c6a4bfacc181))
+* **provider:** :fire: add twilii (weoking) ([4350dff](https://github.com/leifermendez/bot-whatsapp/commit/4350dff22a7de69ba6d35ecbdd67e59b810bd46f))
+* **provider:** added twilio provider ([8dd3be9](https://github.com/leifermendez/bot-whatsapp/commit/8dd3be909b36717f6b54e141a5f48d2722d4855c))
+* **release:** added ([1988948](https://github.com/leifermendez/bot-whatsapp/commit/1988948c30d922beb7b83faab96d1d59cf7f5f90))
+* **release:** added ([f4ad704](https://github.com/leifermendez/bot-whatsapp/commit/f4ad7040abf619635480c30babd6f1159c7af85a))
+
+
+### Bug Fixes
+
+* **adapter:** conflict resolution ([4b307ef](https://github.com/leifermendez/bot-whatsapp/commit/4b307efe79c738a5c4e04ff1c07ca247d827593c))
+* **adapter:** corrections are made to the adapter ([afa6771](https://github.com/leifermendez/bot-whatsapp/commit/afa677190392d48715930ebe2b1e15c7619d730f))
+* **bot:** :zap: added delay promises ([73caf09](https://github.com/leifermendez/bot-whatsapp/commit/73caf090ba9013132e5dcb7761a10939dc9ac300))
+* **bot:** :zap: fix sensitive case ([24ac9fb](https://github.com/leifermendez/bot-whatsapp/commit/24ac9fbf48f80eeb521a36bc938af3a70dd82303))
+* **bot:** :zap: flow improvement + add utils ([a7b19d9](https://github.com/leifermendez/bot-whatsapp/commit/a7b19d9bff5ea66ff888555c3df37ae0e20b612a))
+* **bot:** update ([49698bf](https://github.com/leifermendez/bot-whatsapp/commit/49698bfda9d2a53f7b1a7e1724a796698601fbaa))
+* **ci:** :zap: balance version ([ec46cfd](https://github.com/leifermendez/bot-whatsapp/commit/ec46cfdd657c08c8e90261613f00cfc080f1e1d6))
+* **ci:** :zap: github action ([b827a0a](https://github.com/leifermendez/bot-whatsapp/commit/b827a0ab225b89bb8117c82628db0679c09b4102))
+* **ci:** :zap: github action ([4142ca4](https://github.com/leifermendez/bot-whatsapp/commit/4142ca4fd552e7005f3b1397a76b90a2e574d19d))
+* **ci:** :zap: github action ([091544a](https://github.com/leifermendez/bot-whatsapp/commit/091544ac3fac0c16925e856e1aec64bcad0ecf6d))
+* **ci:** :zap: github action ([2ce342a](https://github.com/leifermendez/bot-whatsapp/commit/2ce342a0cb15019d5084ca06dc30e342b030ea10))
+* **ci:** :zap: github action ([7817793](https://github.com/leifermendez/bot-whatsapp/commit/781779328f93ef8b0e6e0f85c6cd05ae782112fb))
+* **ci:** :zap: github action ([dfced8c](https://github.com/leifermendez/bot-whatsapp/commit/dfced8c594e9175c81e837af359631ba055b7e1a))
+* **ci:** :zap: github action ([aaa4ce8](https://github.com/leifermendez/bot-whatsapp/commit/aaa4ce837229fd51e274de3d91e1d9d615ac69fd))
+* **ci:** :zap: github action ([9ddf144](https://github.com/leifermendez/bot-whatsapp/commit/9ddf144244cd6877e7d26f576387814459f2befb))
+* **ci:** :zap: github action ([b465de5](https://github.com/leifermendez/bot-whatsapp/commit/b465de55a0e511213d1a7760a74efa102172c85e))
+* **ci:** :zap: github action ([cf1dc6f](https://github.com/leifermendez/bot-whatsapp/commit/cf1dc6fac810545e5a2b63f31f71322f37329e38))
+* **ci:** :zap: github action ([8d897f8](https://github.com/leifermendez/bot-whatsapp/commit/8d897f824e27a55ca011163092a813a7e8f426af))
+* **ci:** ci ([f55cfae](https://github.com/leifermendez/bot-whatsapp/commit/f55cfae6e4ccc1df949212999406680020d27f9c))
+* **ci:** ci ([671c5b3](https://github.com/leifermendez/bot-whatsapp/commit/671c5b37f33360e8cb754625b8dd6e83bce9014d))
+* **cli:** :bug: path ([32212fb](https://github.com/leifermendez/bot-whatsapp/commit/32212fb52d206bf6f8d753a86d9ce40aa0db2a5d))
+* **cli:** :fire: create script - templates ([2319db3](https://github.com/leifermendez/bot-whatsapp/commit/2319db3009501fe57ae21e60ad286eb68c46f4fd))
+* **cli:** :fire: create script - templates ([9cb98b5](https://github.com/leifermendez/bot-whatsapp/commit/9cb98b5e73fca3c3f5e70a8497badc31e494b943))
+* **cli:** :fire: create script - templates ([2999e0e](https://github.com/leifermendez/bot-whatsapp/commit/2999e0e753f31a8b9e6d7c117e78cdb5656e203a))
+* **cli:** :fire: create script - templates ([af716b7](https://github.com/leifermendez/bot-whatsapp/commit/af716b75372899877a81b528b58278376166d0ad))
+* **cli:** :fire: create script - templates ([c6999c8](https://github.com/leifermendez/bot-whatsapp/commit/c6999c84931083a87b5717db58003be68244707e))
+* **cli:** :fire: create script - templates ([d4b49a9](https://github.com/leifermendez/bot-whatsapp/commit/d4b49a9bd7085070f0c5964d2903f10b71bde0b3))
+* **cli:** :fire: create script - templates ([eebc3c9](https://github.com/leifermendez/bot-whatsapp/commit/eebc3c980638d88f11a0d93b8344f3ff345c7ee5))
+* **cli:** :zap: clean eslinter ([bfb69d9](https://github.com/leifermendez/bot-whatsapp/commit/bfb69d9a9574a757ae02748b6c5f5afa3eac68e6))
+* **cli:** :zap: clean eslinter ([15f6972](https://github.com/leifermendez/bot-whatsapp/commit/15f697225775a0f0e0a440cd980f7fb8f51a1056))
+* **cli:** :zap: create-starter ([d3b8310](https://github.com/leifermendez/bot-whatsapp/commit/d3b8310180d2ad813733b1d18f2c32d7d947740a))
+* **cli:** :zap: update cli copy ([7797c2b](https://github.com/leifermendez/bot-whatsapp/commit/7797c2b46133697e2a591adab2b67e66b34a1cfe))
+* **fix:** fix ([6483545](https://github.com/leifermendez/bot-whatsapp/commit/648354500b123f20044f5ac2e8a26b15f16d1b8d))
+* **fix:** fix ([28c0480](https://github.com/leifermendez/bot-whatsapp/commit/28c0480b8bfa6b24394095f57c36ef89c9aeb566))
+* **linter:** update linter and commitlint ([70a94ab](https://github.com/leifermendez/bot-whatsapp/commit/70a94ab2c6f8e4122780c77bc3a621944883e621))
+* pre-copy fix ([08e2552](https://github.com/leifermendez/bot-whatsapp/commit/08e2552907c48cfeaac843457a18bf2032e6f8aa))
+* pre-copy fix ([6617107](https://github.com/leifermendez/bot-whatsapp/commit/6617107ab824215c449e26eae6c2bb327ecfc092))
+* **starter:** pre-copy fix ([929e74c](https://github.com/leifermendez/bot-whatsapp/commit/929e74c84b667ec13cb5490b3b951cb8df15ebd1))
+
+
+* (💍) Is justa test! ([37d04e9](https://github.com/leifermendez/bot-whatsapp/commit/37d04e9e89d3f01fdc367654ba60fb11ab2614c4))
+
+### [0.0.3](https://github.com/leifermendez/bot-whatsapp/compare/v0.2.0...v0.0.3) (2022-12-12)
+
+## 0.2.0 (2022-12-12)
+
+
+### ⚠ BREAKING CHANGES
+
+* 🧨 NO
+
+### Features
+
+* (🎸) add onClick prop to component ([4ae3898](https://github.com/leifermendez/bot-whatsapp/commit/4ae389846d38c133f6bb2129ae373eed39d9d08d))
+* **adapter:** added adapter mysql ([717a7dc](https://github.com/leifermendez/bot-whatsapp/commit/717a7dc95fbc107ec6f55387aff606c47144baa4))
+* **adapter:** implementation of json file adapter ([5e1a373](https://github.com/leifermendez/bot-whatsapp/commit/5e1a3737303c843095984f6357564ea18458362f))
+* **adapter:** mysql adapter  ([8d73c86](https://github.com/leifermendez/bot-whatsapp/commit/8d73c86946d07aa80e5b375b62b84a88b2892e03))
+* **adapter:** sql is added to create the table ([4b7de0f](https://github.com/leifermendez/bot-whatsapp/commit/4b7de0f6901524fa2c09271c3a99c364e6b3c260))
+* **bot:** :fire: improvement provider handler ([4154cc2](https://github.com/leifermendez/bot-whatsapp/commit/4154cc223091a46d3203d3a378cd42f61749a5fa))
+* **bot:** :zap: add send image function ([ce8a96b](https://github.com/leifermendez/bot-whatsapp/commit/ce8a96b958ff814c65d8fb4dbd5eaed5cc83a1ed))
+* **ci:** :art: add releases ([b115dc3](https://github.com/leifermendez/bot-whatsapp/commit/b115dc3654996f049837bfb6b5d039a2313df0ad))
+* **ci:** :art: relases script ([2e906bc](https://github.com/leifermendez/bot-whatsapp/commit/2e906bce79f7d854d437334e1d0c2cd270b0bbc6))
+* **ci:** update ci ([e5a9db7](https://github.com/leifermendez/bot-whatsapp/commit/e5a9db7e12340c4f5baa66e8b20585b63daa3bcf))
+* **cli:** create-starter ([3977987](https://github.com/leifermendez/bot-whatsapp/commit/397798790ef5857ca758b0df8384c6a4bfacc181))
+* **provider:** :fire: add twilii (weoking) ([4350dff](https://github.com/leifermendez/bot-whatsapp/commit/4350dff22a7de69ba6d35ecbdd67e59b810bd46f))
+* **provider:** added twilio provider ([8dd3be9](https://github.com/leifermendez/bot-whatsapp/commit/8dd3be909b36717f6b54e141a5f48d2722d4855c))
+* **release:** added ([1988948](https://github.com/leifermendez/bot-whatsapp/commit/1988948c30d922beb7b83faab96d1d59cf7f5f90))
+* **release:** added ([f4ad704](https://github.com/leifermendez/bot-whatsapp/commit/f4ad7040abf619635480c30babd6f1159c7af85a))
+
+
+### Bug Fixes
+
+* **adapter:** conflict resolution ([4b307ef](https://github.com/leifermendez/bot-whatsapp/commit/4b307efe79c738a5c4e04ff1c07ca247d827593c))
+* **adapter:** corrections are made to the adapter ([afa6771](https://github.com/leifermendez/bot-whatsapp/commit/afa677190392d48715930ebe2b1e15c7619d730f))
+* **bot:** :zap: added delay promises ([73caf09](https://github.com/leifermendez/bot-whatsapp/commit/73caf090ba9013132e5dcb7761a10939dc9ac300))
+* **bot:** :zap: fix sensitive case ([24ac9fb](https://github.com/leifermendez/bot-whatsapp/commit/24ac9fbf48f80eeb521a36bc938af3a70dd82303))
+* **bot:** :zap: flow improvement + add utils ([a7b19d9](https://github.com/leifermendez/bot-whatsapp/commit/a7b19d9bff5ea66ff888555c3df37ae0e20b612a))
+* **bot:** update ([49698bf](https://github.com/leifermendez/bot-whatsapp/commit/49698bfda9d2a53f7b1a7e1724a796698601fbaa))
+* **ci:** :zap: balance version ([ec46cfd](https://github.com/leifermendez/bot-whatsapp/commit/ec46cfdd657c08c8e90261613f00cfc080f1e1d6))
+* **ci:** :zap: github action ([b827a0a](https://github.com/leifermendez/bot-whatsapp/commit/b827a0ab225b89bb8117c82628db0679c09b4102))
+* **ci:** :zap: github action ([4142ca4](https://github.com/leifermendez/bot-whatsapp/commit/4142ca4fd552e7005f3b1397a76b90a2e574d19d))
+* **ci:** :zap: github action ([091544a](https://github.com/leifermendez/bot-whatsapp/commit/091544ac3fac0c16925e856e1aec64bcad0ecf6d))
+* **ci:** :zap: github action ([2ce342a](https://github.com/leifermendez/bot-whatsapp/commit/2ce342a0cb15019d5084ca06dc30e342b030ea10))
+* **ci:** :zap: github action ([7817793](https://github.com/leifermendez/bot-whatsapp/commit/781779328f93ef8b0e6e0f85c6cd05ae782112fb))
+* **ci:** :zap: github action ([dfced8c](https://github.com/leifermendez/bot-whatsapp/commit/dfced8c594e9175c81e837af359631ba055b7e1a))
+* **ci:** :zap: github action ([aaa4ce8](https://github.com/leifermendez/bot-whatsapp/commit/aaa4ce837229fd51e274de3d91e1d9d615ac69fd))
+* **ci:** :zap: github action ([9ddf144](https://github.com/leifermendez/bot-whatsapp/commit/9ddf144244cd6877e7d26f576387814459f2befb))
+* **ci:** :zap: github action ([b465de5](https://github.com/leifermendez/bot-whatsapp/commit/b465de55a0e511213d1a7760a74efa102172c85e))
+* **ci:** :zap: github action ([cf1dc6f](https://github.com/leifermendez/bot-whatsapp/commit/cf1dc6fac810545e5a2b63f31f71322f37329e38))
+* **ci:** :zap: github action ([8d897f8](https://github.com/leifermendez/bot-whatsapp/commit/8d897f824e27a55ca011163092a813a7e8f426af))
+* **ci:** ci ([f55cfae](https://github.com/leifermendez/bot-whatsapp/commit/f55cfae6e4ccc1df949212999406680020d27f9c))
+* **ci:** ci ([671c5b3](https://github.com/leifermendez/bot-whatsapp/commit/671c5b37f33360e8cb754625b8dd6e83bce9014d))
+* **cli:** :bug: path ([32212fb](https://github.com/leifermendez/bot-whatsapp/commit/32212fb52d206bf6f8d753a86d9ce40aa0db2a5d))
+* **cli:** :fire: create script - templates ([2319db3](https://github.com/leifermendez/bot-whatsapp/commit/2319db3009501fe57ae21e60ad286eb68c46f4fd))
+* **cli:** :fire: create script - templates ([9cb98b5](https://github.com/leifermendez/bot-whatsapp/commit/9cb98b5e73fca3c3f5e70a8497badc31e494b943))
+* **cli:** :fire: create script - templates ([2999e0e](https://github.com/leifermendez/bot-whatsapp/commit/2999e0e753f31a8b9e6d7c117e78cdb5656e203a))
+* **cli:** :fire: create script - templates ([af716b7](https://github.com/leifermendez/bot-whatsapp/commit/af716b75372899877a81b528b58278376166d0ad))
+* **cli:** :fire: create script - templates ([c6999c8](https://github.com/leifermendez/bot-whatsapp/commit/c6999c84931083a87b5717db58003be68244707e))
+* **cli:** :fire: create script - templates ([d4b49a9](https://github.com/leifermendez/bot-whatsapp/commit/d4b49a9bd7085070f0c5964d2903f10b71bde0b3))
+* **cli:** :fire: create script - templates ([eebc3c9](https://github.com/leifermendez/bot-whatsapp/commit/eebc3c980638d88f11a0d93b8344f3ff345c7ee5))
+* **cli:** :zap: clean eslinter ([bfb69d9](https://github.com/leifermendez/bot-whatsapp/commit/bfb69d9a9574a757ae02748b6c5f5afa3eac68e6))
+* **cli:** :zap: clean eslinter ([15f6972](https://github.com/leifermendez/bot-whatsapp/commit/15f697225775a0f0e0a440cd980f7fb8f51a1056))
+* **cli:** :zap: create-starter ([d3b8310](https://github.com/leifermendez/bot-whatsapp/commit/d3b8310180d2ad813733b1d18f2c32d7d947740a))
+* **cli:** :zap: update cli copy ([7797c2b](https://github.com/leifermendez/bot-whatsapp/commit/7797c2b46133697e2a591adab2b67e66b34a1cfe))
+* **fix:** fix ([6483545](https://github.com/leifermendez/bot-whatsapp/commit/648354500b123f20044f5ac2e8a26b15f16d1b8d))
+* **fix:** fix ([28c0480](https://github.com/leifermendez/bot-whatsapp/commit/28c0480b8bfa6b24394095f57c36ef89c9aeb566))
+* **linter:** update linter and commitlint ([70a94ab](https://github.com/leifermendez/bot-whatsapp/commit/70a94ab2c6f8e4122780c77bc3a621944883e621))
+* pre-copy fix ([08e2552](https://github.com/leifermendez/bot-whatsapp/commit/08e2552907c48cfeaac843457a18bf2032e6f8aa))
+* pre-copy fix ([6617107](https://github.com/leifermendez/bot-whatsapp/commit/6617107ab824215c449e26eae6c2bb327ecfc092))
+* **starter:** pre-copy fix ([929e74c](https://github.com/leifermendez/bot-whatsapp/commit/929e74c84b667ec13cb5490b3b951cb8df15ebd1))
+
+
+* (💍) Is justa test! ([37d04e9](https://github.com/leifermendez/bot-whatsapp/commit/37d04e9e89d3f01fdc367654ba60fb11ab2614c4))
+
+## 0.2.0-alpha.0 (2022-12-01)
+
+
+### ⚠ BREAKING CHANGES
+
+* 🧨 NO
+
+### Features
+
+* (🎸) add onClick prop to component ([4ae3898](https://github.com/leifermendez/bot-whatsapp/commit/4ae389846d38c133f6bb2129ae373eed39d9d08d))
+
+
+### Bug Fixes
+
+* **ci:** ci ([f55cfae](https://github.com/leifermendez/bot-whatsapp/commit/f55cfae6e4ccc1df949212999406680020d27f9c))
+* **ci:** ci ([671c5b3](https://github.com/leifermendez/bot-whatsapp/commit/671c5b37f33360e8cb754625b8dd6e83bce9014d))
+* **linter:** update linter and commitlint ([70a94ab](https://github.com/leifermendez/bot-whatsapp/commit/70a94ab2c6f8e4122780c77bc3a621944883e621))
+
+
+* (💍) Is justa test! ([37d04e9](https://github.com/leifermendez/bot-whatsapp/commit/37d04e9e89d3f01fdc367654ba60fb11ab2614c4))
+
+## 0.1.0 (2022-11-29)
+
+
+### ⚠ BREAKING CHANGES
+
+* 🧨 NO
+
+### Features
+
+* (🎸) add onClick prop to component ([4ae3898](https://github.com/leifermendez/bot-whatsapp/commit/4ae389846d38c133f6bb2129ae373eed39d9d08d))
+
+
+### Bug Fixes
+
+* **ci:** ci ([f55cfae](https://github.com/leifermendez/bot-whatsapp/commit/f55cfae6e4ccc1df949212999406680020d27f9c))
+* **ci:** ci ([671c5b3](https://github.com/leifermendez/bot-whatsapp/commit/671c5b37f33360e8cb754625b8dd6e83bce9014d))
+
+
+* (💍) Is justa test! ([37d04e9](https://github.com/leifermendez/bot-whatsapp/commit/37d04e9e89d3f01fdc367654ba60fb11ab2614c4))
+
 #### Actualización 14 Ene 2022
 
 -   npm update

CONTRIBUTING.md

@@ -0,0 +1,60 @@
+# CONTRIBUTING
+
+![](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/leifermendez/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
+```
+
+Abrir carpeta __example-app-base__ y ejecutar
+```
+cd example-app-base
+npm i
+npm run pre-copy
+npm start
+```
+
+### __Commit y Push__
+
+El proyecto tiene implementado __[husky](https://typicode.github.io/husky/#/)__, es una herramienta que dispara unas acciones al momento de hacer commit y hacer push.
+
+__commit:__ Los commit son semánticos, esto quiere decir que deben cumplir un standar al momento de escribirlos ejemplo: ` feat(adapter): new adapter myqsl ` puede ver más info sobre esto __[aquí](https://github.com/conventional-changelog/commitlint/#what-is-commitlint)__
+
+__push:__ Cada push ejecutar `yarn run test` el cual realiza los test internos que tienen que cumplir con __95% de cobertura__.
+
+
+> Documento en constante actualización....
+
+------
+-   [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)

EXAMPLE.md

@@ -1,3 +1,4 @@
+
 ```js
 
 const {

GLOSSARY.md

@@ -0,0 +1,2 @@
+CTX: Es el objeto que representa un mensaje, con opciones, id, ref
+messageInComming: Objeto entrante del provider {body, from,...}

README.md

@@ -1,20 +1,93 @@
 [![Test / Coverage](https://github.com/leifermendez/bot-whatsapp/actions/workflows/ci.yml/badge.svg)](https://github.com/leifermendez/bot-whatsapp/actions/workflows/ci.yml)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
-
+--------
 🦊 Documentación: [https://bot-whatsapp.pages.dev/](https://bot-whatsapp.pages.dev/)
 Video como hacer PR: https://youtu.be/Lxt8Acob6aU
- 
--   [ ] Evitar dependencias
+
+🚀 __Roadmap:__ [https://github.com/users/leifermendez/projects/4/views/1](https://github.com/users/leifermendez/projects/4/views/1)
 
 
 **Comunidad**
+<!-- readme: collaborators,contributors -start -->
+<table>
+<tr>
+    <td align="center">
+        <a href="https://github.com/leifermendez">
+            <img src="https://avatars.githubusercontent.com/u/15802366?v=4" width="50;" alt="leifermendez"/>
+            <br />
+            <sub><b>Leifer Mendez</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/aurik3">
+            <img src="https://avatars.githubusercontent.com/u/37228512?v=4" width="50;" alt="aurik3"/>
+            <br />
+            <sub><b>Null</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/vicente1992">
+            <img src="https://avatars.githubusercontent.com/u/57806030?v=4" width="50;" alt="vicente1992"/>
+            <br />
+            <sub><b>Manuel Vicente Ortiz</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/leifermendezfroged">
+            <img src="https://avatars.githubusercontent.com/u/97020486?v=4" width="50;" alt="leifermendezfroged"/>
+            <br />
+            <sub><b>Leifer Mendez</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/Gonzalito87">
+            <img src="https://avatars.githubusercontent.com/u/100331586?v=4" width="50;" alt="Gonzalito87"/>
+            <br />
+            <sub><b>Null</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/jzvi12">
+            <img src="https://avatars.githubusercontent.com/u/10729787?v=4" width="50;" alt="jzvi12"/>
+            <br />
+            <sub><b>Null</b></sub>
+        </a>
+    </td></tr>
+<tr>
+    <td align="center">
+        <a href="https://github.com/tonyvazgar">
+            <img src="https://avatars.githubusercontent.com/u/21047090?v=4" width="50;" alt="tonyvazgar"/>
+            <br />
+            <sub><b>Luis Antonio Vázquez García</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/ulisesvina">
+            <img src="https://avatars.githubusercontent.com/u/20508563?v=4" width="50;" alt="ulisesvina"/>
+            <br />
+            <sub><b>Ulises Viña</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/rrruuuyyy">
+            <img src="https://avatars.githubusercontent.com/u/33061671?v=4" width="50;" alt="rrruuuyyy"/>
+            <br />
+            <sub><b>Rodrigo Mendoza Cabrera</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/yond1994">
+            <img src="https://avatars.githubusercontent.com/u/47557263?v=4" width="50;" alt="yond1994"/>
+            <br />
+            <sub><b>Yonathan Suarez</b></sub>
+        </a>
+    </td></tr>
+</table>
+<!-- readme: collaborators,contributors -end -->
 
 > 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)
-
-
- 
+-   [Telegram](https://t.me/leifermendez)

TODO.md

@@ -2,30 +2,50 @@
 - [X] __(doc)__ Video de como colaborar PR
 - [ ] __(doc)__ Video implementación de test y cobertura
 - [ ] __(doc)__ Video explicacion de github action
+- [ ] Crear packages list externas
 
 ### @bot-whatsapp/bot
-- [ ] agregar export package
+- [X] agregar export package
 - [X] Posibilidad de en el capture meter todo un nuevo CTX  de FLOW .addAnswer('Marca la opcion',{capture:true, join:CTX})
 - [X] .addKeyword('1') no funciona con 1 caracter
 - [X] sensitivy viene activado por defecto
-- [ ] fallback respuesta en hijo: Se puede colocar en option el ref de la answer fallback
+- [X] fallback respuesta en hijo: Se puede colocar en option el ref de la answer fallback
+- [X] Cuando Envian Sticket devuelve mensaje raro
+- [x] addAnswer agregar delay
 - [ ] colocar mensaje esperando conectando whatsapp (provider)
-- [ ] Cuando Envian Sticket devuelve mensaje raro
 - [ ] createDatabase validar implementacion de funciones
+- [ ] limitar caracteres de mensajes 4000
+- [X] cuando envias numeros (5 o 1) se dispara el flujo
 
 ### @bot-whatsapp/database
 - [X] agregar export package
 - [X] __(doc):__ Video para explicar como implementar nuevos database
 - [X] Mongo adapter
-- [ ] MySQL adapter
+- [X] MySQL adapter
 - [ ] JsonFile adapter
 
 ### @bot-whatsapp/provider
 - [X] agregar export package
 - [ ] __(doc):__ Video para explicar como implementar nuevos providers
-- [ ] WhatsappWeb provider enviar imagenes
-- [ ] WhatsappWeb provider enviar audio
+- [X] WhatsappWeb provider enviar imagenes
+- [X] WhatsappWeb provider enviar audio
+- [X] WhatsappWeb botones (Tiene truco) github:leifermendez/whatsapp-web.js
 - [ ] Twilio adapter
 - [ ] Meta adapter
 
 ### @bot-whatsapp/cli
+- [X] Hacer comando para crear `example-app`
+
+
+### @bot-whatsapp/create-bot
+- [ ] 
+
+### Starters
+- [X] Base
+- [X] Basico
+- [ ] Enviando Imagen
+- [ ] Enviando Botones
+- [ ] Mezclando flujos hijos
+
+### Extra
+- [X] Crear CI mantener fork update https://stackoverflow.com/questions/23793062/can-forks-be-synced-automatically-in-github

changelog.config.js

@@ -0,0 +1,91 @@
+module.exports = {
+    disableEmoji: false,
+    format: '{type}{scope}: {emoji}{subject}',
+    list: [
+        'test',
+        'feat',
+        'fix',
+        'chore',
+        'docs',
+        'refactor',
+        'style',
+        'ci',
+        'perf',
+    ],
+    maxMessageLength: 64,
+    minMessageLength: 3,
+    questions: [
+        'type',
+        'scope',
+        'subject',
+        'body',
+        'breaking',
+        'issues',
+        'lerna',
+    ],
+    scopes: [],
+    types: {
+        chore: {
+            description: 'Build process or auxiliary tool changes',
+            emoji: '(🤖)',
+            value: 'chore',
+        },
+        ci: {
+            description: 'CI related changes',
+            emoji: '(🎡)',
+            value: 'ci',
+        },
+        docs: {
+            description: 'Documentation only changes',
+            emoji: '(✏️)',
+            value: 'docs',
+        },
+        feat: {
+            description: 'A new feature',
+            emoji: '(🎸)',
+            value: 'feat',
+        },
+        fix: {
+            description: 'A bug fix',
+            emoji: '(🐛)',
+            value: 'fix',
+        },
+        perf: {
+            description: 'A code change that improves performance',
+            emoji: '(⚡️)',
+            value: 'perf',
+        },
+        refactor: {
+            description:
+                'A code change that neither fixes a bug or adds a feature',
+            emoji: '(💡)',
+            value: 'refactor',
+        },
+        release: {
+            description: 'Create a release commit',
+            emoji: '(🏹)',
+            value: 'release',
+        },
+        style: {
+            description:
+                'Markup, white-space, formatting, missing semi-colons...',
+            emoji: '(💄)',
+            value: 'style',
+        },
+        test: {
+            description: 'Adding missing tests',
+            emoji: '(💍)',
+            value: 'test',
+        },
+        messages: {
+            type: "Select the type of change that you're committing:",
+            customScope: 'Select the scope this component affects:',
+            subject:
+                'Write a short, imperative mood description of the change:\n',
+            body: 'Provide a longer description of the change:\n ',
+            breaking: 'List any breaking changes:\n',
+            footer: 'Issues this commit closes, e.g #123:',
+            confirmCommit: 'The packages that this commit has affected\n',
+        },
+    },
+}

commitlint.config.js

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] }

config/banner.rollup.json

@@ -0,0 +1,8 @@
+{
+    "banner.output": [
+        "/** \n",
+        "* NO TOCAR ESTE ARCHIVO: Es generado automaticamente, si sabes lo que haces adelante ;)\n",
+        "* de lo contrario mejor ir a la documentacion o al servidor de discord link.codigoencasa.com/DISCORD\n",
+        "*/"
+    ]
+}

package.json

@@ -1,31 +1,38 @@
 {
     "name": "@bot-whatsapp/root",
-    "version": "0.0.1",
+    "version": "0.1.2",
     "description": "Bot de wahtsapp open source para MVP o pequeños negocios",
     "main": "app.js",
     "private": true,
     "scripts": {
         "commit": "git-cz",
         "cli:rollup": "rollup --config ./packages/cli/rollup-cli.config.js ",
+        "create-bot:rollup": "rollup --config ./packages/create-bot-whatsapp/rollup-create.config.js ",
         "bot:rollup": "rollup --config ./packages/bot/rollup-bot.config.js",
         "provider:rollup": "rollup --config ./packages/provider/rollup-provider.config.js ",
         "database:rollup": "rollup --config ./packages/database/rollup-database.config.js",
+        "create-bot-whatsapp:rollup": "rollup --config ./packages/create-bot-whatsapp/rollup-create.config.js",
         "format:check": "prettier --check ./packages",
         "format:write": "prettier --write ./packages",
+        "fmt.staged": "pretty-quick --staged",
         "lint:check": "eslint ./packages",
         "lint:fix": "eslint --fix ./packages",
-        "build": "yarn run cli:rollup && yarn run bot:rollup && yarn run provider:rollup && yarn run database:rollup",
-        "link.dist": "cd packages/bot && npm link && cd ../provider && npm link && cd ../cli && npm link",
+        "build": "yarn run cli:rollup && yarn run bot:rollup && yarn run provider:rollup && yarn run database:rollup && yarn run create-bot-whatsapp:rollup",
+        "copy.lib": "node ./scripts/move.js",
         "test.unit": "node ./node_modules/uvu/bin.js packages test",
         "test.coverage": "node ./node_modules/c8/bin/c8.js npm run test.unit",
         "test": "npm run test.coverage",
         "cli": "node ./packages/cli/bin/cli.js",
+        "create": "node ./packages/create-bot-whatsapp/bin/create.js",
         "dev:debug": "node --inspect ./example-app/app.js",
         "dev": "node ./example-app/app.js",
         "prepare": "npx husky install",
-        "preinstall": "npx only-allow yarn"
+        "preinstall": "npx only-allow yarn",
+        "postinstall": "npx prettier --write .",
+        "release": "standard-version -- --prerelease"
     },
     "workspaces": [
+        "packages/create-bot-whatsapp",
         "packages/bot",
         "packages/cli",
         "packages/database",
@@ -52,36 +59,37 @@
     "repository": "https://github.com/leifermendez/bot-whatsapp",
     "license": "ISC",
     "devDependencies": {
+        "@commitlint/cli": "^17.3.0",
+        "@commitlint/config-conventional": "^17.3.0",
         "@rollup/plugin-commonjs": "^23.0.2",
         "@rollup/plugin-json": "^5.0.1",
         "@rollup/plugin-node-resolve": "^15.0.1",
         "@rollup/plugin-replace": "^5.0.1",
         "c8": "^7.12.0",
-        "commitizen": "^4.2.5",
+        "conventional-changelog": "^3.1.25",
         "cross-env": "^7.0.3",
-        "cz-conventional-changelog": "^3.3.0",
         "eslint": "^8.26.0",
         "eslint-config-prettier": "^8.5.0",
+        "fs-extra": "^11.1.0",
+        "git-cz": "^4.9.0",
         "husky": "^8.0.2",
         "only-allow": "^1.1.1",
-        "prettier": "^2.7.1",
+        "prettier": "^2.8.0",
+        "pretty-quick": "^3.1.3",
         "prompts": "^2.4.2",
         "rimraf": "^3.0.2",
         "rollup": "^3.2.3",
         "rollup-plugin-cleanup": "^3.2.1",
         "rollup-plugin-copy": "^3.4.0",
+        "semver": "^7.3.8",
+        "standard-version": "^9.5.0",
         "uvu": "^0.5.6"
     },
-    "packageManager": "yarn@1.22.19",
+    "packageManager": "yarn@3.3.0",
     "engines": {
         "node": ">=16",
         "npm": "please-use-yarn",
-        "yarn": ">=1"
+        "yarn": ">=3"
     },
-    "author": "Leifer Mendez <leifer33@gmail.com>",
-    "config": {
-        "commitizen": {
-            "path": "./node_modules/cz-conventional-changelog"
-        }
-    }
+    "author": "Leifer Mendez <leifer33@gmail.com>"
 }

packages/bot/core/core.class.js

@@ -1,6 +1,13 @@
 const { toCtx } = require('../io/methods')
 const { printer } = require('../utils/interactive')
+const { delay } = require('../utils/delay')
+const Queue = require('../utils/queue')
+const { Console } = require('console')
+const { createWriteStream } = require('fs')
 
+const logger = new Console({
+    stdout: createWriteStream(`${process.cwd()}/core.class.log`),
+})
 /**
  * [ ] Escuchar eventos del provider asegurarte que los provider emitan eventos
  * [ ] Guardar historial en db
@@ -21,15 +28,22 @@ class CoreClass {
         }
     }
 
+    /**
+     * Manejador de eventos
+     */
     listenerBusEvents = () => [
+        {
+            event: 'preinit',
+            func: () => printer('Iniciando proveedor, espere...'),
+        },
         {
             event: 'require_action',
-            func: ({ instructions, title = '⚡⚡ ACCION REQUERIDA ⚡⚡' }) =>
+            func: ({ instructions, title = '⚡⚡ ACCIÓN REQUERIDA ⚡⚡' }) =>
                 printer(instructions, title),
         },
         {
             event: 'ready',
-            func: () => printer('Provider conectado y listo'),
+            func: () => printer('Proveedor conectado y listo'),
         },
         {
             event: 'auth_failure',
@@ -44,16 +58,19 @@ class CoreClass {
     ]
 
     /**
-     * @private
-     * @param {*} ctxMessage
+     *
+     * @param {*} messageInComming
+     * @returns
      */
     handleMsg = async (messageInComming) => {
+        logger.log(`[handleMsg]: `, messageInComming)
         const { body, from } = messageInComming
         let msgToSend = []
+        let fallBackFlag = false
+
+        if (!body.length) return
 
-        //Consultamos mensaje previo en DB
         const prevMsg = await this.databaseClass.getPrevByNumber(from)
-        //Consultamos for refSerializada en el flow actual
         const refToContinue = this.flowClass.findBySerialize(
             prevMsg?.refSerialize
         )
@@ -67,14 +84,24 @@ class CoreClass {
             this.databaseClass.save(ctxByNumber)
         }
 
-        //Si se tiene un callback se ejecuta
-        if (refToContinue && prevMsg?.options?.callback) {
-            const indexFlow = this.flowClass.findIndexByRef(refToContinue?.ref)
-            this.flowClass.allCallbacks[indexFlow].callback(messageInComming)
+        // 📄 [options: fallback]: esta funcion se encarga de repetir el ultimo mensaje
+        const fallBack = () => {
+            fallBackFlag = true
+            msgToSend = this.flowClass.find(refToContinue?.keyword, true) || []
+            this.sendFlow(msgToSend, from)
+            return refToContinue
         }
 
-        //Si se tiene anidaciones de flows, si tienes anidados obligatoriamente capture:true
-        if (prevMsg?.options?.nested?.length) {
+        // 📄 [options: callback]: Si se tiene un callback se ejecuta
+        if (!fallBackFlag && refToContinue && prevMsg?.options?.callback) {
+            const indexFlow = this.flowClass.findIndexByRef(refToContinue?.ref)
+            this.flowClass.allCallbacks[indexFlow].callback(messageInComming, {
+                fallBack,
+            })
+        }
+
+        // 📄🤘(tiene return) [options: nested(array)]: Si se tiene flujos hijos los implementa
+        if (!fallBackFlag && prevMsg?.options?.nested?.length) {
             const nestedRef = prevMsg.options.nested
             const flowStandalone = nestedRef.map((f) => ({
                 ...nestedRef.find((r) => r.refSerialize === f.refSerialize),
@@ -85,28 +112,44 @@ class CoreClass {
             return
         }
 
-        //Consultamos si se espera respuesta por parte de cliente "Ejemplo: Dime tu nombre"
-        if (!prevMsg?.options?.nested?.length && prevMsg?.options?.capture) {
-            msgToSend = this.flowClass.find(refToContinue?.ref, true) || []
-        } else {
-            msgToSend = this.flowClass.find(body) || []
+        // 📄🤘(tiene return) [options: capture (boolean)]: Si se tiene option boolean
+        if (!fallBackFlag && !prevMsg?.options?.nested?.length) {
+            const typeCapture = typeof prevMsg?.options?.capture
+            const valueCapture = prevMsg?.options?.capture
+
+            if (['string', 'boolean'].includes(typeCapture) && valueCapture) {
+                msgToSend = this.flowClass.find(refToContinue?.ref, true) || []
+                this.sendFlow(msgToSend, from)
+                return
+            }
         }
 
+        msgToSend = this.flowClass.find(body) || []
         this.sendFlow(msgToSend, from)
     }
 
+    /**
+     * Enviar mensaje con contexto atraves del proveedor de whatsapp
+     * @param {*} numberOrId
+     * @param {*} ctxMessage ver más en GLOSSARY.md
+     * @returns
+     */
     sendProviderAndSave = (numberOrId, ctxMessage) => {
         const { answer } = ctxMessage
         return Promise.all([
-            this.providerClass.sendMessage(numberOrId, answer),
+            this.providerClass.sendMessage(numberOrId, answer, ctxMessage),
             this.databaseClass.save({ ...ctxMessage, from: numberOrId }),
         ])
     }
 
-    sendFlow = (messageToSend, numberOrId) => {
+    sendFlow = async (messageToSend, numberOrId) => {
         const queue = []
         for (const ctxMessage of messageToSend) {
-            queue.push(this.sendProviderAndSave(numberOrId, ctxMessage))
+            const delayMs = ctxMessage?.options?.delay || 0
+            if (delayMs) await delay(delayMs)
+            Queue.enqueue(() =>
+                this.sendProviderAndSave(numberOrId, ctxMessage)
+            )
         }
         return Promise.all(queue)
     }

packages/bot/index.js

@@ -1,7 +1,7 @@
 const CoreClass = require('./core/core.class')
 const ProviderClass = require('./provider/provider.class')
 const FlowClass = require('./io/flow.class')
-const { addKeyword, addAnswer, toSerialize } = require('./io/methods')
+const { addKeyword, addAnswer, addChild, toSerialize } = require('./io/methods')
 
 /**
  * Crear instancia de clase Bot
@@ -22,11 +22,13 @@ const createFlow = (args) => {
 
 /**
  * Crear instancia de clase Provider
+ * Depdendiendo del Provider puedes pasar argumentos
+ * Ver Documentacion
  * @param {*} args
  * @returns
  */
-const createProvider = (providerClass = class {}) => {
-    const providerInstance = new providerClass()
+const createProvider = (providerClass = class {}, args = null) => {
+    const providerInstance = new providerClass(args)
     if (!providerClass.prototype instanceof ProviderClass)
         throw new Error('El provider no implementa ProviderClass')
     return providerInstance
@@ -38,6 +40,7 @@ module.exports = {
     createProvider,
     addKeyword,
     addAnswer,
+    addChild,
     toSerialize,
     ProviderClass,
     CoreClass,

packages/bot/io/flow.class.js

@@ -21,29 +21,25 @@ class FlowClass {
     }
 
     find = (keyOrWord, symbol = false, overFlow = null) => {
+        keyOrWord = `${keyOrWord}`
         let capture = false
         let messages = []
         let refSymbol = null
         overFlow = overFlow ?? this.flowSerialize
 
-        const mapSensitiveString = (str, flag = false) => {
-            if (!flag && Array.isArray(str)) {
-                return str.map((c) => c.toLowerCase())
+        /** Retornar expresion regular para buscar coincidencia */
+        const mapSensitive = (str, flag = false) => {
+            const regexSensitive = flag ? 'g' : 'i'
+            if (Array.isArray(str)) {
+                return new RegExp(str.join('|'), regexSensitive)
             }
-
-            if (!flag && typeof str === 'string') {
-                return str.toLowerCase()
-            }
-
-            return str
+            return new RegExp(str, regexSensitive)
         }
 
         const findIn = (keyOrWord, symbol = false, flow = overFlow) => {
             const sensitive = refSymbol?.options?.sensitive || false
             capture = refSymbol?.options?.capture || false
 
-            keyOrWord = mapSensitiveString(keyOrWord, sensitive)
-
             if (capture) return messages
 
             if (symbol) {
@@ -51,9 +47,9 @@ class FlowClass {
                 if (refSymbol?.answer) messages.push(refSymbol)
                 if (refSymbol?.ref) findIn(refSymbol.ref, true)
             } else {
-                refSymbol = flow.find((c) =>
-                    mapSensitiveString(c.keyword, sensitive).includes(keyOrWord)
-                )
+                refSymbol = flow.find((c) => {
+                    return mapSensitive(c.keyword, sensitive).test(keyOrWord)
+                })
                 if (refSymbol?.ref) findIn(refSymbol.ref, true)
                 return messages
             }

packages/bot/io/methods/addAnswer.js

@@ -1,15 +1,15 @@
 const { generateRef } = require('../../utils/hash')
 const { toJson } = require('./toJson')
-const { toSerialize } = require('./toSerialize')
 /**
  *
  * @param answer string
- * @param options {media:string, buttons:[], capture:true default false}
+ * @param options {media:string, buttons:[{"body":"😎 Cursos"}], delay:ms, capture:true default false}
  * @returns
  */
 const addAnswer =
     (inCtx) =>
     (answer, options, cb = null, nested = []) => {
+        answer = Array.isArray(answer) ? answer.join('\n') : answer
         /**
          * Todas las opciones referentes a el mensaje en concreto options:{}
          * @returns
@@ -24,6 +24,7 @@ const addAnswer =
                     : false,
             child:
                 typeof options?.child === 'string' ? `${options?.child}` : null,
+            delay: typeof options?.delay === 'number' ? options?.delay : 0,
         })
 
         const getNested = () => ({
@@ -78,6 +79,7 @@ const addAnswer =
             }
         }
 
+        /// Retornar contexto no colocar nada más abajo de esto
         const ctx = ctxAnswer()
 
         return {

packages/bot/io/methods/addChild.js

@@ -0,0 +1,15 @@
+const { toSerialize } = require('./toSerialize')
+/**
+ * @deprecate
+ * @param answer string
+ * @param options {media:string, buttons:[], capture:true default false}
+ * @returns
+ */
+const addChild = (flowIn = null) => {
+    if (!flowIn?.toJson) {
+        throw new Error('DEBE SER UN FLOW CON toJSON()')
+    }
+    return toSerialize(flowIn.toJson())
+}
+
+module.exports = { addChild }

packages/bot/io/methods/index.js

@@ -1,7 +1,8 @@
 const { addAnswer } = require('./addAnswer')
 const { addKeyword } = require('./addKeyword')
+const { addChild } = require('./addChild')
 const { toSerialize } = require('./toSerialize')
 const { toCtx } = require('./toCtx')
 const { toJson } = require('./toJson')
 
-module.exports = { addAnswer, addKeyword, toCtx, toJson, toSerialize }
+module.exports = { addAnswer, addKeyword, addChild, toCtx, toJson, toSerialize }

packages/bot/package.json

@@ -1,9 +1,8 @@
 {
     "name": "@bot-whatsapp/bot",
-    "version": "0.0.1",
+    "version": "0.0.21-alpha.0",
     "description": "",
     "main": "./lib/bundle.bot.cjs",
-    "private": true,
     "scripts": {
         "bot:rollup": "node ../../node_modules/.bin/rollup index.js --config ./rollup-cli.config.js",
         "format:check": "prettier --check .",

packages/bot/rollup-bot.config.js

@@ -1,3 +1,4 @@
+const banner = require('../../config/banner.rollup.json')
 const commonjs = require('@rollup/plugin-commonjs')
 const { nodeResolve } = require('@rollup/plugin-node-resolve')
 const { join } = require('path')
@@ -7,6 +8,7 @@ const PATH = join(__dirname, 'lib', 'bundle.bot.cjs')
 module.exports = {
     input: join(__dirname, 'index.js'),
     output: {
+        banner: banner['banner.output'].join(''),
         file: PATH,
         format: 'cjs',
     },

packages/bot/tests/methods.test.js

@@ -22,6 +22,15 @@ test('Debere probar las propeidades array', () => {
     assert.is(MAIN_CTX.ctx.keyword, ARRANGE.keyword)
 })
 
+test('Debere probar las propeidades array en answer', () => {
+    const ARRANGE = {
+        keyword: ['hola!', 'ole'],
+    }
+    const MAIN_CTX = addKeyword(ARRANGE.keyword).addAnswer(['hola', 'chao'])
+
+    assert.is(MAIN_CTX.ctx.keyword, ARRANGE.keyword)
+})
+
 test('Debere probar toSerialize', () => {
     const ARRANGE = {
         keyword: ['hola!', 'ole'],

packages/bot/utils/delay.js

@@ -0,0 +1,4 @@
+const delay = (miliseconds) =>
+    new Promise((res) => setTimeout(res, miliseconds))
+
+module.exports = { delay }

packages/bot/utils/queue.js

@@ -0,0 +1,46 @@
+class Queue {
+    static queue = []
+    static pendingPromise = false
+
+    static enqueue(promise) {
+        return new Promise((resolve, reject) => {
+            this.queue.push({
+                promise,
+                resolve,
+                reject,
+            })
+            this.dequeue()
+        })
+    }
+
+    static dequeue() {
+        if (this.workingOnPromise) {
+            return false
+        }
+        const item = this.queue.shift()
+        if (!item) {
+            return false
+        }
+        try {
+            this.workingOnPromise = true
+            item.promise()
+                .then((value) => {
+                    this.workingOnPromise = false
+                    item.resolve(value)
+                    this.dequeue()
+                })
+                .catch((err) => {
+                    this.workingOnPromise = false
+                    item.reject(err)
+                    this.dequeue()
+                })
+        } catch (err) {
+            this.workingOnPromise = false
+            item.reject(err)
+            this.dequeue()
+        }
+        return true
+    }
+}
+
+module.exports = Queue

packages/cli/check/index.js

@@ -12,20 +12,20 @@ const checkNodeVersion = () => {
         )
         process.exit(1)
     }
-    console.log(green(`Node.js combatible ${version}`))
+    console.log(green(`Node.js compatible ${version}`))
     console.log(``)
 }
 
 const checkOs = () => {
-    console.log(bgCyan('🙂 Revisando tu Sistema Operativo'))
+    console.log(bgCyan('🙂 Revisando tu sistema operativo'))
     const os = process.platform
     if (!os.includes('win32')) {
         const messages = [
             `El sistema operativo actual (${os}) posiblemente requiera`,
-            `una confiuración adicional referente al puppeter`,
+            `una configuración adicional referente al puppeteer`,
             ``,
             `Recuerda pasar por el WIKI`,
-            `🔗 https://github.com/leifermendez/bot-whatsapp/wiki/Instalaci%C3%B3n`,
+            `🔗 https://github.com/leifermendez/bot-whatsapp/wiki/Instalación`,
             ``,
         ]
 

packages/cli/create-app/index.js

@@ -0,0 +1,25 @@
+const fs = require('fs-extra')
+
+/**
+ * Copy files
+ */
+const copyFiles = async (from, to) => {
+    try {
+        await fs.copy(from, to)
+        console.log('success!')
+    } catch (err) {
+        console.error(err)
+    }
+}
+
+/**
+ * Copiar directorio con archivos
+ * @param {*} templateName
+ */
+const copyBaseApp = async (fromDir = process.cwd(), toDir = process.cwd()) => {
+    const BASEP_APP_PATH_FROM = `${fromDir}`
+    const BASEP_APP_PATH_TO = `${toDir}`
+    await copyFiles(BASEP_APP_PATH_FROM, BASEP_APP_PATH_TO)
+}
+
+module.exports = { copyBaseApp }

packages/cli/install/tool.js

@@ -14,7 +14,7 @@ const getPkgManage = async () => {
 }
 
 const installDeps = (pkgManager, packageList) => {
-    const errorMessage = `Ocurrio un error instalando ${packageList}`
+    const errorMessage = `Ocurrió un error instalando ${packageList}`
     let childProcess = []
 
     const installSingle = (pkgInstall) => () => {

packages/cli/interactive/index.js

@@ -1,47 +1,59 @@
 const prompts = require('prompts')
-const { yellow, red } = require('kleur')
-const { installAll } = require('../install')
-const { cleanSession } = require('../clean')
+const { yellow, red, cyan, bgMagenta } = require('kleur')
+const { copyBaseApp } = require('../create-app')
+const { join } = require('path')
+const { existsSync } = require('fs')
 const { checkNodeVersion, checkOs } = require('../check')
-const { jsonConfig } = require('../configuration')
+
+const bannerDone = () => {
+    console.log(``)
+    console.log(
+        cyan(
+            [
+                `[Agradecimientos]: Este es un proyecto OpenSource, si tienes intenciones de colaborar puedes hacerlo:`,
+                `[😉] Comprando un cafe https://www.buymeacoffee.com/leifermendez`,
+                `[⭐] Dar estrella  https://github.com/leifermendez/bot-whatsapp`,
+                `[🚀] Realizando mejoras en el codigo`,
+            ].join('\n')
+        )
+    )
+    console.log(``)
+}
 
 const startInteractive = async () => {
     const questions = [
         {
             type: 'text',
-            name: 'dependencies',
-            message:
-                'Quieres actualizar las librerias "whatsapp-web.js"? (Y/n)',
-        },
-        {
-            type: 'text',
-            name: 'cleanTmp',
-            message: 'Quieres limpiar la session del bot? (Y/n)',
+            name: 'outDir',
+            message: 'Quieres crear un bot? (Y/n)',
         },
         {
             type: 'multiselect',
             name: 'providerWs',
-            message: 'Proveedor de Whatsapp',
+            message: '¿Cuál proveedor de whatsapp quieres utilizar?',
             choices: [
-                { title: 'whatsapp-web.js', value: 'whatsapp-web.js' },
+                { title: 'whatsapp-web.js (gratis)', value: 'wweb' },
+                { title: 'Twilio', value: 'twilio' },
+                { title: 'Venom (gratis)', value: 'venom' },
+                { title: 'Baileys (gratis)', value: 'bailey' },
                 { title: 'API Oficial (Meta)', value: 'meta', disabled: true },
-                { title: 'Twilio', value: 'twilio', disabled: true },
             ],
             max: 1,
-            hint: 'Espacio para selecionar',
+            hint: 'Espacio para seleccionar',
             instructions: '↑/↓',
         },
         {
             type: 'multiselect',
             name: 'providerDb',
-            message: 'Cual base de datos quieres usar',
+            message: '¿Cuál base de datos quieres utilizar?',
             choices: [
-                { title: 'JSONFile', value: 'json' },
-                { title: 'MySQL', value: 'mysql', disabled: true },
-                { title: 'Mongo', value: 'mongo', disabled: true },
+                { title: 'Memory', value: 'memory' },
+                { title: 'Mongo', value: 'mongo' },
+                { title: 'MySQL', value: 'mysql' },
+                { title: 'Json', value: 'json', disabled: true },
             ],
             max: 1,
-            hint: 'Espacio para selecionar',
+            hint: 'Espacio para seleccionar',
             instructions: '↑/↓',
         },
     ]
@@ -50,78 +62,78 @@ const startInteractive = async () => {
     checkNodeVersion()
     checkOs()
     const onCancel = () => {
-        console.log('Proceso cancelado!')
+        console.log('¡Proceso cancelado!')
         return true
     }
     const response = await prompts(questions, { onCancel })
-    const {
-        dependencies = '',
-        cleanTmp = '',
-        providerDb = [],
-        providerWs = [],
-    } = response
-    /**
-     * Question #1
-     * @returns
-     */
-    const installOrUdpateDep = async () => {
-        const answer = dependencies.toLowerCase() || 'n'
+    const { outDir = '', providerDb = [], providerWs = [] } = response
+
+    const createApp = async (templateName = null) => {
+        if (!templateName)
+            throw new Error('TEMPLATE_NAME_INVALID: ', templateName)
+
+        const possiblesPath = [
+            join(__dirname, '..', '..', 'starters', 'apps', templateName),
+            join(__dirname, '..', 'starters', 'apps', templateName),
+            join(__dirname, 'starters', 'apps', templateName),
+        ]
+
+        const answer = outDir.toLowerCase() || 'n'
         if (answer.includes('n')) return true
 
         if (answer.includes('y')) {
-            await installAll()
-            return true
+            const indexOfPath = possiblesPath.find((a) => existsSync(a))
+            await copyBaseApp(indexOfPath, join(process.cwd(), templateName))
+            console.log(``)
+            console.log(bgMagenta(`⚡⚡⚡INSTRUCCIONES⚡⚡⚡`))
+            console.log(yellow(`cd ${templateName}`))
+            console.log(yellow(`npm install`))
+            console.log(yellow(`npm start`))
+            console.log(``)
+
+            return outDir
         }
     }
 
     /**
-     * Question #2
+     * Selccionar Provider (meta, twilio, etc...)
      * @returns
      */
-    const cleanAllSession = async () => {
-        const answer = cleanTmp.toLowerCase() || 'n'
-        if (answer.includes('n')) return true
-
-        if (answer.includes('y')) {
-            await cleanSession()
-            return true
-        }
-    }
-
     const vendorProvider = async () => {
+        const [answer] = providerWs
         if (!providerWs.length) {
             console.log(
                 red(
-                    `Debes de seleccionar una WS Provider. Tecla [Space] para seleccionar`
+                    `Debes seleccionar un proveedor de whatsapp. Tecla [Space] para seleccionar`
                 )
             )
             process.exit(1)
         }
-        console.log(yellow(`'Deberia crer una carpeta en root/provider'`))
-        return true
+        return answer
     }
 
+    /**
+     * Selecionar adaptador de base de datos
+     * @returns
+     */
     const dbProvider = async () => {
-        const answer = providerDb
+        const [answer] = providerDb
         if (!providerDb.length) {
             console.log(
                 red(
-                    `Debes de seleccionar una DB Provider. Tecla [Space] para seleccionar`
+                    `Debes seleccionar un proveedor de base de datos. Tecla [Space] para seleccionar`
                 )
             )
             process.exit(1)
         }
-        if (answer === 'json') {
-            console.log('Deberia crer una carpeta en root/data')
-            return 1
-        }
+        return answer
     }
 
-    await installOrUdpateDep()
-    await cleanAllSession()
-    await vendorProvider()
-    await dbProvider()
-    await jsonConfig()
+    const providerAdapter = await vendorProvider()
+    const dbAdapter = await dbProvider()
+    const NAME_DIR = ['base', providerAdapter, dbAdapter].join('-')
+    await createApp(NAME_DIR)
+    bannerDone()
 }
 
 module.exports = { startInteractive }

packages/cli/package.json

@@ -1,9 +1,8 @@
 {
     "name": "@bot-whatsapp/cli",
-    "version": "0.0.1",
+    "version": "0.0.28-alpha.0",
     "description": "",
     "main": "index.js",
-    "private": true,
     "devDependencies": {
         "cross-env": "^7.0.3",
         "cross-spawn": "^7.0.3",
@@ -11,6 +10,7 @@
         "kleur": "^4.1.5"
     },
     "files": [
+        "./starters/",
         "./lib/cli/bundle.cli.cjs"
     ],
     "bin": {

packages/cli/rollup-cli.config.js

@@ -1,4 +1,6 @@
+const banner = require('../../config/banner.rollup.json')
 const commonjs = require('@rollup/plugin-commonjs')
+const copy = require('rollup-plugin-copy')
 const { nodeResolve } = require('@rollup/plugin-node-resolve')
 const { join } = require('path')
 
@@ -7,8 +9,15 @@ const PATH = join(__dirname, 'lib', 'cli', 'bundle.cli.cjs')
 module.exports = {
     input: join(__dirname, 'index.js'),
     output: {
+        banner: banner['banner.output'].join(''),
         file: PATH,
         format: 'cjs',
     },
-    plugins: [commonjs(), nodeResolve()],
+    plugins: [
+        copy({
+            targets: [{ src: 'starters/*', dest: join(__dirname, 'starters') }],
+        }),
+        commonjs(),
+        nodeResolve(),
+    ],
 }

packages/create-bot-whatsapp/bin/create.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+const main = require('../lib/bundle.create-bot-whatsapp.cjs')
+main()

packages/create-bot-whatsapp/index.js

@@ -0,0 +1,10 @@
+const { startInteractive } = require('../cli')
+/**
+ * Voy a llamar directo a CLI
+ * Temporalmente luego mejoro esta
+ * parte
+ * @returns
+ */
+const main = () => startInteractive()
+
+module.exports = main

packages/create-bot-whatsapp/package.json

@@ -0,0 +1,15 @@
+{
+    "name": "create-bot-whatsapp",
+    "version": "0.0.39-alpha.0",
+    "description": "",
+    "main": "./lib/bundle.create-bot-whatsapp.cjs",
+    "files": [
+        "./starters/",
+        "./bin/create.js",
+        "./lib/bundle.create-bot-whatsapp.cjs"
+    ],
+    "bin": "./bin/create.js",
+    "dependencies": {
+        "@bot-whatsapp/cli": "*"
+    }
+}

packages/create-bot-whatsapp/rollup-create.config.js

@@ -0,0 +1,23 @@
+const banner = require('../../config/banner.rollup.json')
+const commonjs = require('@rollup/plugin-commonjs')
+const copy = require('rollup-plugin-copy')
+const { nodeResolve } = require('@rollup/plugin-node-resolve')
+const { join } = require('path')
+
+const PATH = join(__dirname, 'lib', 'bundle.create-bot-whatsapp.cjs')
+
+module.exports = {
+    input: join(__dirname, 'index.js'),
+    output: {
+        banner: banner['banner.output'].join(''),
+        file: PATH,
+        format: 'cjs',
+    },
+    plugins: [
+        copy({
+            targets: [{ src: 'starters/*', dest: join(__dirname, 'starters') }],
+        }),
+        commonjs(),
+        nodeResolve(),
+    ],
+}

packages/database/README.md

@@ -25,6 +25,28 @@ const main = async () => {
 }
 ```
 
+
+#### CTX
+```json
+ {
+    ref: 'ans_7d9981e5-5019-422c-a19a-565cbb021391',
+    keyword: 'ans_cfdad31b-ff6d-475f-873a-4ed6f8a79a43',
+    answer: 'Esperando respuesta...',
+    options: {
+      media: null,
+      buttons: [],
+      capture: true,
+      child: null,
+      nested: [Array],
+      keyword: {},
+      callback: true
+    },
+    refSerialize: '81f18f563fd26a6c6d12c62aed98095f',
+    from: 'NUMERO_PERSONA_QUE_ESCRIBE'
+  }
+```
+
+
 #### Video
 
 > Video explicando como debes de agregar nuevos adaptadores 

packages/database/package.json

@@ -1,19 +1,24 @@
 {
     "name": "@bot-whatsapp/database",
-    "version": "0.0.1",
+    "version": "0.0.20-alpha.0",
     "description": "Esto es el conector a  mysql, pg, mongo",
     "main": "./lib/mock/index.cjs",
-    "private": true,
     "keywords": [],
     "author": "",
     "license": "ISC",
-    "devDependencies": {},
+    "files": [
+        "./lib/"
+    ],
     "dependencies": {
         "dotenv": "^16.0.3",
-        "mongodb": "^4.11.0"
+        "mongodb": "^4.11.0",
+        "mysql2": "^2.3.3",
+        "stormdb": "^0.6.0"
     },
     "exports": {
         "./mock": "./lib/mock/index.cjs",
-        "./mongo": "./lib/mongo/index.cjs"
+        "./mongo": "./lib/mongo/index.cjs",
+        "./json-file": "./lib/json-file/index.cjs",
+        "./mysql": "./lib/mysql/index.cjs"
     }
 }

packages/database/rollup-database.config.js

@@ -1,3 +1,4 @@
+const banner = require('../../config/banner.rollup.json')
 const commonjs = require('@rollup/plugin-commonjs')
 const { join } = require('path')
 
@@ -5,6 +6,7 @@ module.exports = [
     {
         input: join(__dirname, 'src', 'mock', 'index.js'),
         output: {
+            banner: banner['banner.output'].join(''),
             file: join(__dirname, 'lib', 'mock', 'index.cjs'),
             format: 'cjs',
         },
@@ -13,9 +15,27 @@ module.exports = [
     {
         input: join(__dirname, 'src', 'mongo', 'index.js'),
         output: {
+            banner: banner['banner.output'].join(''),
             file: join(__dirname, 'lib', 'mongo', 'index.cjs'),
             format: 'cjs',
         },
         plugins: [commonjs()],
     },
+    {
+        input: join(__dirname, 'src', 'mysql', 'index.js'),
+        output: {
+            banner: banner['banner.output'].join(''),
+            file: join(__dirname, 'lib', 'mysql', 'index.cjs'),
+            format: 'cjs',
+        },
+        plugins: [commonjs()],
+    },
+    {
+        input: join(__dirname, 'src', 'json-file', 'index.js'),
+        output: {
+            banner: banner['banner.output'].join(''),
+            file: join(__dirname, 'lib', 'json-file', 'index.cjs'),
+        },
+        plugins: [commonjs()],
+    },
 ]

packages/database/src/json-file/index.js

@@ -0,0 +1,48 @@
+const path = require('path')
+const StormDB = require('stormdb')
+const engine = new StormDB.localFileEngine(
+    path.join(process.cwd(), './db.stormdb')
+)
+
+class JsonFileAdapter {
+    db
+    listHistory = []
+
+    constructor() {
+        this.init().then()
+    }
+
+    init() {
+        return new Promise((resolve) => {
+            this.db = new StormDB(engine)
+            this.db.default({ history: [] })
+            resolve(this.db)
+        })
+    }
+
+    getPrevByNumber = async (from) => {
+        const response = await this.db.get('history')
+        const { history } = response.state
+
+        if (!history.length) {
+            return null
+        }
+
+        const result = history.filter((res) => res.from === from).pop()
+
+        return {
+            ...result,
+        }
+    }
+
+    save = async (ctx) => {
+        await this.db
+            .get('history')
+            .push({ ...ctx })
+            .save()
+        console.log('Guardado en DB...', ctx)
+        this.listHistory.push(ctx)
+    }
+}
+
+module.exports = JsonFileAdapter

packages/database/src/mock/index.js

@@ -1,15 +1,20 @@
+/**
+ * Si necesitas saber que trae el "ctx"
+ * Puedes ver el README.md dentro packages/database
+ */
+
 class MockDatabase {
+    db
     listHistory = []
 
-    constructor() {
-        /**
-         * Se debe cargar listHistory con historial de mensajes
-         * para que se pueda continuar el flow
-         */
+    constructor() {}
+
+    getPrevByNumber = (from) => {
+        const history = this.listHistory.slice().reverse()
+        return history.find((a) => a.from === from)
     }
 
     save = (ctx) => {
-        console.log('Guardando DB...', ctx)
         this.listHistory.push(ctx)
     }
 }

packages/database/src/mysql/index.js

@@ -0,0 +1,106 @@
+const mysql = require('mysql2')
+
+class MyslAdapter {
+    db
+    listHistory = []
+    credentials = { host: null, user: null, database: null }
+
+    constructor(_credentials) {
+        this.credentials = _credentials
+        this.init().then()
+    }
+
+    async init() {
+        this.db = mysql.createConnection(this.credentials)
+
+        await this.db.connect(async (error) => {
+            if (!error) {
+                console.log(`Solicitud de conexión a base de datos exitosa`)
+                await this.checkTableExists()
+            }
+
+            if (error) {
+                console.log(`Solicitud de conexión fallida ${error.stack}`)
+            }
+        })
+    }
+
+    getPrevByNumber = (from) =>
+        new Promise((resolve, reject) => {
+            const sql = `SELECT * FROM history WHERE phone=${from} ORDER BY id DESC`
+            this.db.query(sql, (error, rows) => {
+                if (error) {
+                    reject(error)
+                }
+
+                if (rows.length) {
+                    const [row] = rows
+                    row.options = JSON.parse(row.options)
+                    resolve(row)
+                }
+
+                if (!rows.length) {
+                    resolve(null)
+                }
+            })
+        })
+
+    save = (ctx) => {
+        const values = [
+            [
+                ctx.ref,
+                ctx.keyword,
+                ctx.answer,
+                ctx.refSerialize,
+                ctx.from,
+                JSON.stringify(ctx.options),
+            ],
+        ]
+        const sql =
+            'INSERT INTO history (ref, keyword, answer, refSerialize, phone, options ) values ?'
+
+        this.db.query(sql, [values], (err) => {
+            if (err) throw err
+            console.log('Guardado en DB...', values)
+        })
+        this.listHistory.push(ctx)
+    }
+
+    createTable = () =>
+        new Promise((resolve) => {
+            const tableName = 'history'
+
+            const sql = `CREATE TABLE ${tableName} 
+        (id INT AUTO_INCREMENT PRIMARY KEY, 
+        ref varchar(255) NOT NULL,
+        keyword varchar(255) NOT NULL,
+        answer longtext NOT NULL,
+        refSerialize varchar(255) NOT NULL,
+        phone varchar(255) NOT NULL,
+        options longtext NOT NULL
+        )`
+
+            this.db.query(sql, (err) => {
+                if (err) throw err
+                console.log(`Tabla ${tableName} creada correctamente `)
+                resolve(true)
+            })
+        })
+
+    checkTableExists = () =>
+        new Promise((resolve) => {
+            const sql = "SHOW TABLES LIKE 'history'"
+
+            this.db.query(sql, (err, rows) => {
+                if (err) throw err
+
+                if (!rows.length) {
+                    this.createTable()
+                }
+
+                resolve(!!rows.length)
+            })
+        })
+}
+
+module.exports = MyslAdapter

packages/docs/.eslintrc.cjs

@@ -6,35 +6,35 @@ module.exports = {
     node: true,
   },
   extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:qwik/recommended',
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:qwik/recommended",
   ],
-  parser: '@typescript-eslint/parser',
+  parser: "@typescript-eslint/parser",
   parserOptions: {
     tsconfigRootDir: __dirname,
-    project: ['./tsconfig.json'],
+    project: ["./tsconfig.json"],
     ecmaVersion: 2021,
-    sourceType: 'module',
+    sourceType: "module",
     ecmaFeatures: {
       jsx: true,
     },
   },
-  plugins: ['@typescript-eslint'],
+  plugins: ["@typescript-eslint"],
   rules: {
-    '@typescript-eslint/no-explicit-any': 'off',
-    '@typescript-eslint/explicit-module-boundary-types': 'off',
-    '@typescript-eslint/no-inferrable-types': 'off',
-    '@typescript-eslint/no-non-null-assertion': 'off',
-    '@typescript-eslint/no-empty-interface': 'off',
-    '@typescript-eslint/no-namespace': 'off',
-    '@typescript-eslint/no-empty-function': 'off',
-    '@typescript-eslint/no-this-alias': 'off',
-    '@typescript-eslint/ban-types': 'off',
-    '@typescript-eslint/ban-ts-comment': 'off',
-    'prefer-spread': 'off',
-    'no-case-declarations': 'off',
-    'no-console': 'off',
-    '@typescript-eslint/no-unused-vars': ['error'],
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-inferrable-types": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/no-namespace": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-this-alias": "off",
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "prefer-spread": "off",
+    "no-case-declarations": "off",
+    "no-console": "off",
+    "@typescript-eslint/no-unused-vars": ["error"],
   },
 };

packages/docs/.gitignore

@@ -5,7 +5,7 @@
 /server
 
 # Development
-node_modules
+node_modules/
 
 # Cache
 .cache
@@ -37,5 +37,7 @@ lerna-debug.log*
 .yarn/*
 !.yarn/releases
 
+package-lock.json
+
 # Cloudflare
 functions/**/*.js

packages/docs/.stackblitzrc

@@ -0,0 +1,6 @@
+{
+  "startCommand": "npm start",
+  "env": {
+    "ENABLE_CJS_IMPORTS": true
+  }
+}

packages/docs/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 onWidget
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/docs/README.md

@@ -1,11 +1,240 @@
-### 😎 Documentación Bot-Whatsapp
+# 💠 Qwind
 
-👉 [https://bot-whatsapp.pages.dev/](https://bot-whatsapp.pages.dev/)
+**Qwind** is a free and open-source template to make your website using **[Qwik](https://qwik.builder.io/) + [Tailwind CSS](https://tailwindcss.com/)**. Ready to start a new project and designed taking into account best practices.
 
-Se esta iniciando una documentación oficial sobre como usar e implementar los diferentes funcionalidades del bot-wahtsapp
+## Features
 
+- ✅ Integration with **Tailwind CSS** supporting **Dark mode**.
+- ✅ **Production-ready** scores in [Lighthouse](https://web.dev/measure/) and [PageSpeed Insights](https://pagespeed.web.dev/) reports.
+- ✅ **Image optimization** and **Font optimization**.
 
-La idea es cada usuario pueda ir aportando a la documentacion y formar parte de este proyecto.
+<br>
 
+<img src="./screenshot.jpg" alt="Qwind Theme Screenshot">
 
-##### ¿Como agregar documentación? [Video]
+[![onWidget](https://custom-icon-badges.demolab.com/badge/made%20by%20-onWidget-556bf2?style=flat-square&logo=onwidget&logoColor=white&labelColor=101827)](https://onwidget.com)
+[![License](https://img.shields.io/github/license/onwidget/qwind?style=flat-square&color=dddddd&labelColor=000000)](https://github.com/onwidget/qwind/blob/main/LICENSE.md)
+[![Maintained](https://img.shields.io/badge/maintained%3F-yes-brightgreen.svg?style=flat-square)](https://github.com/onwidget)
+[![Contributions Welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat-square)](https://github.com/onwidget/qwind#contributing)
+[![Known Vulnerabilities](https://snyk.io/test/github/onwidget/qwind/badge.svg?style=flat-square)](https://snyk.io/test/github/onwidget/qwind)
+
+<br>
+
+<details open>
+<summary>Table of Contents</summary>
+
+- [Demo](#demo)
+- [Getting started](#getting-started)
+  - [Project structure](#project-structure)
+  - [Commands](#commands)
+  - [Configuration](#configuration)
+  - [Deploy](#deploy)
+- [Roadmap](#roadmap)
+- [Contributing](#contributing)
+- [Acknowledgements](#acknowledgements)
+- [License](#license)
+
+</details>
+
+<br>
+
+## Demo
+
+📌 [https://qwind.pages.dev/](https://qwind.pages.dev/)
+
+<br>
+
+## Getting started
+
+This project is using Qwik with [QwikCity](https://qwik.builder.io/qwikcity/overview/). QwikCity is just a extra set of tools on top of Qwik to make it easier to build a full site, including directory-based routing, layouts, and more.
+
+### Project structure
+
+Inside **Qwind** template, you'll see the following folders and files:
+
+```
+/
+├── adaptors/
+|   └── static/
+|       └── vite.config.ts
+├── public/
+│   ├── favicon.svg
+│   ├── manifest.json
+│   └── robots.txt
+├── src/
+│   ├── assets/
+│   │   ├── images/
+|   |   └── styles/
+|   |       └── global.css
+│   ├── components/
+│   │   ├── atoms/
+│   │   ├── core/
+│   │   ├── icons/
+|   |   └── widgets/
+|   |       ├── Header.astro
+|   |       ├── Footer.astro
+|   |       └── ...
+│   ├── routes/
+│   |   ├── blog/
+│   |   ├── index.astro
+|   |   ├── layout.tsx
+|   |   └-- service-worker.ts
+│   ├── config.mjs
+│   ├── entry.dev.tsx
+│   ├── entry.preview.tsx
+│   ├── entry.ssr.tsx
+│   └── root.tsx
+├── package.json
+└── ...
+```
+
+- `src/routes`: Provides the directory based routing, which can include a hierarchy of `layout.tsx` layout files, and an `index.tsx` file as the page. Additionally, `index.ts` files are endpoints. Please see the [routing docs](https://qwik.builder.io/qwikcity/routing/overview/) for more info.
+
+- `src/components`: Recommended directory for components.
+
+- `public`: Any static assets, like images, can be placed in the public directory. Please see the [Vite public directory](https://vitejs.dev/guide/assets.html#the-public-directory) for more info.
+
+[![Edit Qwind on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/onwidget/qwind/tree/main)
+
+> **Seasoned qwik expert?** Delete this file. Update `config.mjs` and contents. Have fun!
+
+<br>
+
+### Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command               | Action                                             |
+| :-------------------- | :------------------------------------------------- |
+| `npm install`         | Installs dependencies                              |
+| `npm run dev`         | Starts local dev server at `127.0.0.1:5173/`       |
+| `npm run build`       | Build your production site to `./dist/`            |
+| `npm run preview`     | Preview your build locally, before deploying       |
+| `npm run fmt`         | Format codes with Prettier                         |
+| `npm run lint`        | Run Eslint                                         |
+| `npm run qwik ...`    | Run CLI commands like `qwik add`, `qwik build` |
+
+<br>
+
+### Configuration
+
+Basic configuration file: `./src/config.mjs`
+
+```javascript
+export const SITE = {
+  name: 'Example',
+
+  origin: 'https://example.com',
+  basePathname: '/', // Change this if you need to deploy to Github Pages, for example
+  trailingSlash: true, // Generate permalinks with or without "/" at the end
+};
+```
+
+<br>
+
+### Deploy
+
+#### Deploy to production (manual)
+
+You can create an optimized production build with:
+
+```shell
+npm run build
+```
+
+Now, your website is ready to be deployed. All generated files are located at
+`dist` folder, which you can deploy the folder to any hosting service you
+prefer.
+
+#### Deploy to Netlify
+
+Clone this repository on own GitHub account and deploy to Netlify:
+
+[![Netlify Deploy button](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/onwidget/qwind)
+
+#### Deploy to Vercel
+
+Clone this repository on own GitHub account and deploy to Vercel:
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fonwidget%2Fqwind)
+
+<br>
+
+## Roadmap
+
+### Base
+- [ ] Create utilities to generate permalinks tailored to the domain and base pathname.
+- [ ] Simplify the way to optimize images.
+- [ ] Create component to make SEO simpler and more intuitive.
+- [ ] Create configurable blog with categories, tags and authors using MDX.
+- [ ] Add more frequently used pages (Portfolio, Services, Contact, Docs ...).
+- [ ] Find or create a library to have more icon sources available.
+- [ ] Refactor some code that doesn't follow Qwik conventions yet.
+
+### Advanced
+
+- [ ] Achieve perfect 100% Google Page Speed score.
+- [ ] Insert complex javascript example widget on home page to demonstrate Qwik features.
+- [ ] Create small illustrative admin backend.
+
+<br>
+
+## Contributing
+
+If you have any idea, suggestions or find any bugs, feel free to open a discussion, an issue or create a pull request.
+That would be very useful for all of us and we would be happy to listen and take action.
+
+## Acknowledgements
+
+Initially created by [onWidget](https://onwidget.com) and maintained by a community of [contributors](https://github.com/onwidget/qwind/graphs/contributors).
+
+## License
+
+**Qwind** is licensed under the MIT license — see the [LICENSE](https://github.com/onwidget/qwind/blob/main/LICENSE.md) file for details.
+
+## Cloudflare Pages
+
+Cloudflare's [wrangler](https://github.com/cloudflare/wrangler) CLI can be used to preview a production build locally. To start a local server, run:
+
+```
+npm run serve
+```
+
+Then visit [http://localhost:8787/](http://localhost:8787/)
+
+### Deployments
+
+[Cloudflare Pages](https://pages.cloudflare.com/) are deployable through their [Git provider integrations](https://developers.cloudflare.com/pages/platform/git-integration/).
+
+If you don't already have an account, then [create a Cloudflare account here](https://dash.cloudflare.com/sign-up/pages). Next go to your dashboard and follow the [Cloudflare Pages deployment guide](https://developers.cloudflare.com/pages/framework-guides/deploy-anything/).
+
+Within the projects "Settings" for "Build and deployments", the "Build command" should be `npm run build`, and the "Build output directory" should be set to `dist`.
+
+### Function Invocation Routes
+
+Cloudflare Page's [function-invocation-routes config](https://developers.cloudflare.com/pages/platform/functions/function-invocation-routes/) can be used to include, or exclude, certain paths to be used by the worker functions. Having a `_routes.json` file gives developers more granular control over when your Function is invoked.
+This is useful to determine if a page response should be Server-Side Rendered (SSR) or if the response should use a static-site generated (SSG) `index.html` file.
+
+By default, the Cloudflare pages adaptor _does not_ include a `public/_routes.json` config, but rather it is auto-generated from the build by the Cloudflare adaptor. An example of an auto-generate `dist/_routes.json` would be:
+
+```
+{
+  "include": [
+    "/*"
+  ],
+  "exclude": [
+    "/_headers",
+    "/_redirects",
+    "/build/*",
+    "/favicon.ico",
+    "/manifest.json",
+    "/service-worker.js",
+    "/about"
+  ],
+  "version": 1
+}
+```
+
+In the above example, it's saying _all_ pages should be SSR'd. However, the root static files such as `/favicon.ico` and any static assets in `/build/*` should be excluded from the Functions, and instead treated as a static file.
+
+In most cases the generated `dist/_routes.json` file is ideal. However, if you need more granular control over each path, you can instead provide you're own `public/_routes.json` file. When the project provides its own `public/_routes.json` file, then the Cloudflare adaptor will not auto-generate the routes config and instead use the committed one within the `public` directory.

packages/docs/adaptors/cloudflare-pages/vite.config.ts

@@ -1,19 +1,19 @@
-import { cloudflarePagesAdaptor } from '@builder.io/qwik-city/adaptors/cloudflare-pages/vite';
-import { extendConfig } from '@builder.io/qwik-city/vite';
-import baseConfig from '../../vite.config';
+import { cloudflarePagesAdaptor } from '@builder.io/qwik-city/adaptors/cloudflare-pages/vite'
+import { extendConfig } from '@builder.io/qwik-city/vite'
+import baseConfig from '../../vite.config'
 
 export default extendConfig(baseConfig, () => {
-  return {
-    build: {
-      ssr: true,
-      rollupOptions: {
-        input: ['src/entry.cloudflare-pages.tsx', '@qwik-city-plan'],
-      },
-    },
-    plugins: [
-      cloudflarePagesAdaptor({
-        staticGenerate: true,
-      }),
-    ],
-  };
-});
+    return {
+        build: {
+            ssr: true,
+            rollupOptions: {
+                input: ['src/entry.cloudflare-pages.tsx', '@qwik-city-plan'],
+            },
+        },
+        plugins: [
+            cloudflarePagesAdaptor({
+                staticGenerate: true,
+            }),
+        ],
+    }
+})

packages/docs/adaptors/static/vite.config.ts

@@ -0,0 +1,21 @@
+import { staticAdaptor } from '@builder.io/qwik-city/adaptors/static/vite'
+import { extendConfig } from '@builder.io/qwik-city/vite'
+import baseConfig from '../../vite.config'
+
+import { SITE } from '../../src/config.mjs'
+
+export default extendConfig(baseConfig, () => {
+    return {
+        build: {
+            ssr: true,
+            rollupOptions: {
+                input: ['@qwik-city-plan'],
+            },
+        },
+        plugins: [
+            staticAdaptor({
+                origin: SITE.origin,
+            }),
+        ],
+    }
+})

packages/docs/functions/[[path]].ts

@@ -2,4 +2,4 @@
 
 // Cloudflare Pages Functions
 // https://developers.cloudflare.com/pages/platform/functions/
-export { onRequest } from '../server/entry.cloudflare-pages';
+export { onRequest } from '../server/entry.cloudflare-pages'

packages/docs/package.json

@@ -1,13 +1,10 @@
 {
-  "name": "bot-whatsapp-docs",
-  "version": "0.0.1",
-  "description": "Basic start point to build a docs site with Qwik",
-  "engines": {
-    "node": ">=15.0.0"
-  },
+  "name": "qwind",
+  "description": "A template to make your website using Qwik + Tailwind CSS.",
+  "version": "0.1.1",
   "private": true,
   "scripts": {
-    "build": "qwik build",
+    "build": "qwik build && npm run subfont",
     "build.client": "vite build",
     "build.preview": "vite build --ssr src/entry.preview.tsx",
     "build.server": "vite build -c adaptors/cloudflare-pages/vite.config.ts",
@@ -20,22 +17,33 @@
     "lint": "eslint \"src/**/*.ts*\"",
     "preview": "qwik build preview && vite preview --open",
     "start": "vite --open --mode ssr",
+    "subfont": "subfont -i --inline-css --no-fallbacks --silent --root dist",
     "qwik": "qwik"
   },
   "devDependencies": {
-    "@builder.io/qwik": "0.14.1",
-    "@builder.io/qwik-city": "0.0.127",
+    "@builder.io/qwik": "0.15.0",
+    "@builder.io/qwik-city": "0.0.128",
+    "@fontsource/inter": "^4.5.14",
+    "@iconify-json/tabler": "^1.1.49",
     "@types/eslint": "8.4.10",
     "@types/node": "latest",
-    "@typescript-eslint/eslint-plugin": "5.43.0",
-    "@typescript-eslint/parser": "5.43.0",
-    "eslint": "8.28.0",
-    "eslint-plugin-qwik": "0.14.1",
+    "@typescript-eslint/eslint-plugin": "5.45.0",
+    "@typescript-eslint/parser": "5.45.0",
+    "autoprefixer": "10.4.13",
+    "eslint": "8.29.0",
+    "eslint-plugin-qwik": "0.15.0",
     "node-fetch": "3.3.0",
-    "prettier": "2.7.1",
-    "typescript": "4.9.3",
+    "postcss": "^8.4.19",
+    "prettier": "2.8.0",
+    "subfont": "^6.12.2",
+    "tailwindcss": "^3.1.8",
+    "typescript": "4.8.4",
     "vite": "3.2.4",
-    "vite-tsconfig-paths": "3.5.0",
+    "vite-imagetools": "^4.0.11",
+    "vite-tsconfig-paths": "3.6.0",
     "wrangler": "latest"
+  },
+  "engines": {
+    "node": ">=15.0.0"
   }
 }

packages/docs/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}

packages/docs/public/manifest.json

@@ -1,9 +1,9 @@
 {
-  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
-  "name": "qwik-project-name",
-  "short_name": "Welcome to Qwik",
-  "start_url": ".",
-  "display": "standalone",
-  "background_color": "#fff",
-  "description": "A Qwik project app."
+    "$schema": "https://json.schemastore.org/web-manifest-combined.json",
+    "name": "qwik-project-name",
+    "short_name": "Welcome to Qwik",
+    "start_url": ".",
+    "display": "standalone",
+    "background_color": "#fff",
+    "description": "A Qwik project app."
 }

packages/docs/sandbox.config.json

@@ -0,0 +1,11 @@
+{
+  "infiniteLoopProtection": true,
+  "hardReloadOnChange": false,
+  "view": "browser",
+  "template": "node",
+  "container": {
+    "port": 5173,
+    "startScript": "start",
+    "node": "16"
+  }
+}

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

@@ -0,0 +1,40 @@
+/**
+ * WHAT IS THIS FILE?
+ *
+ * Globally applied styles. No matter which components are in the page or matching route,
+ * the styles in here will be applied to the Document, without any sort of CSS scoping.
+ *
+ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+    .btn {
+        @apply inline-flex items-center justify-center rounded-md shadow-md border-gray-400 border bg-transparent font-medium text-center text-base text-gray-700 leading-snug transition py-3 px-6 md:px-8 ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2 hover:bg-gray-100 hover:border-gray-600 dark:text-slate-300 dark:border-slate-500 dark:hover:bg-slate-800 dark:hover:border-slate-800;
+    }
+
+    .btn-ghost {
+        @apply border-none shadow-none text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white;
+    }
+
+    .btn-primary {
+        @apply font-semibold bg-primary-600 text-white border-primary-600 hover:bg-primary-800 hover:border-primary-800 hover:text-white dark:text-white dark:bg-primary-700 dark:border-primary-700 dark:hover:border-primary-900 dark:hover:bg-primary-900;
+    }
+
+    [data-aw-toggle-menu] path {
+        @apply transition;
+    }
+    [data-aw-toggle-menu].expanded g > path:first-child {
+        @apply -rotate-45 translate-y-[15px] translate-x-[-3px];
+    }
+
+    [data-aw-toggle-menu].expanded g > path:last-child {
+        @apply rotate-45 translate-y-[-8px] translate-x-[14px];
+    }
+}
+
+.dropdown:hover .dropdown-menu {
+    display: block;
+}

packages/docs/src/components/atoms/Logo.tsx

@@ -0,0 +1,18 @@
+import { component$ } from '@builder.io/qwik'
+
+// @ts-ignore
+import logoSrc from '~/assets/images/logo.png?width=64&height=64&png'
+
+export default component$(() => (
+    <span class="self-center ml-2 text-2xl md:text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white flex items-center">
+        <img
+            src={logoSrc}
+            class="inline-block mr-1"
+            width={32}
+            height={32}
+            alt="Qwind Logo"
+            loading="lazy"
+        />
+        Qwind
+    </span>
+))

packages/docs/src/components/breadcrumbs/breadcrumbs.css

@@ -1,25 +0,0 @@
-nav.breadcrumbs {
-  padding: 5px;
-  border-bottom: 1px solid #ddd;
-}
-
-nav.breadcrumbs > span {
-  display: inline-block;
-  padding: 5px 0;
-  font-size: 12px;
-}
-
-nav.breadcrumbs > span a {
-  text-decoration: none;
-  color: inherit;
-}
-
-nav.breadcrumbs > span::after {
-  content: '>';
-  padding: 0 5px;
-  opacity: 0.4;
-}
-
-nav.breadcrumbs > span:last-child::after {
-  display: none;
-}

packages/docs/src/components/breadcrumbs/breadcrumbs.tsx

@@ -1,74 +0,0 @@
-import { component$, useStyles$ } from '@builder.io/qwik';
-import { useContent, useLocation, ContentMenu } from '@builder.io/qwik-city';
-import styles from './breadcrumbs.css?inline';
-
-export const Breadcrumbs = component$(() => {
-  useStyles$(styles);
-
-  const { menu } = useContent();
-  const loc = useLocation();
-
-  const breadcrumbs = createBreadcrumbs(menu, loc.pathname);
-  if (breadcrumbs.length === 0) {
-    return null;
-  }
-
-  return (
-    <nav class="breadcrumbs">
-      {breadcrumbs.map((b) => (
-        <span>{b.href ? <a href={b.href}>{b.text}</a> : b.text}</span>
-      ))}
-    </nav>
-  );
-});
-
-export function createBreadcrumbs(menu: ContentMenu | undefined, pathname: string) {
-  if (menu?.items) {
-    for (const indexA of menu.items) {
-      const breadcrumbA: ContentBreadcrumb = {
-        text: indexA.text,
-      };
-      if (typeof indexA.href === 'string') {
-        breadcrumbA.href = indexA.href;
-      }
-      if (indexA.href === pathname) {
-        return [breadcrumbA];
-      }
-
-      if (indexA.items) {
-        for (const indexB of indexA.items) {
-          const breadcrumbB: ContentBreadcrumb = {
-            text: indexB.text,
-          };
-          if (typeof indexB.href === 'string') {
-            breadcrumbB.href = indexB.href;
-          }
-          if (indexB.href === pathname) {
-            return [breadcrumbA, breadcrumbB];
-          }
-
-          if (indexB.items) {
-            for (const indexC of indexB.items) {
-              const breadcrumbC: ContentBreadcrumb = {
-                text: indexC.text,
-              };
-              if (typeof indexC.href === 'string') {
-                breadcrumbC.href = indexC.href;
-              }
-              if (indexC.href === pathname) {
-                return [breadcrumbA, breadcrumbB, breadcrumbC];
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  return [];
-}
-
-interface ContentBreadcrumb {
-  text: string;
-  href?: string;
-}

packages/docs/src/components/core/DarkThemeLauncher.tsx

@@ -0,0 +1,3 @@
+export const DarkThemeLauncher = () => (
+    <script>{`if(localStorage.theme==="dark"){document.documentElement.classList.add("dark");}else if(typeof localStorage.theme==="undefined"){if(window.matchMedia("(prefers-color-scheme: dark)").matches){document.documentElement.classList.add("dark");}}`}</script>
+)

packages/docs/src/components/core/RouterHead.tsx

@@ -0,0 +1,35 @@
+import { component$ } from '@builder.io/qwik'
+import { useDocumentHead, useLocation } from '@builder.io/qwik-city'
+
+/**
+ * The RouterHead component is placed inside of the document `<head>` element.
+ */
+export const RouterHead = component$(() => {
+    const head = useDocumentHead()
+    const loc = useLocation()
+
+    return (
+        <>
+            <title>{head.title}</title>
+
+            <link rel="canonical" href={loc.href} />
+            <meta
+                name="viewport"
+                content="width=device-width, initial-scale=1.0"
+            />
+            <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
+            {head.meta.map((m) => (
+                <meta {...m} />
+            ))}
+
+            {head.links.map((l) => (
+                <link {...l} />
+            ))}
+
+            {head.styles.map((s) => (
+                <style {...s.props} dangerouslySetInnerHTML={s.style} />
+            ))}
+        </>
+    )
+})

packages/docs/src/components/core/ToggleMenu.tsx

@@ -0,0 +1,38 @@
+import { component$, useStore } from '@builder.io/qwik'
+
+import { IconMenu } from '~/components/icons/IconMenu'
+
+interface ItemProps {
+    iconClass?: string
+}
+
+export default component$((props: ItemProps) => {
+    const { iconClass } = props
+
+    const store = useStore({
+        isExpanded: false,
+    })
+
+    return (
+        <button
+            type="button"
+            class={`ml-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center transition ${
+                store.isExpanded ? 'expanded' : ''
+            }`}
+            aria-label="Toggle Menu"
+            data-aw-toggle-menu={true}
+            onClick$={() => {
+                store.isExpanded = store.isExpanded ? false : true
+
+                // TODO:
+                document.body.classList.toggle('overflow-hidden')
+                document.getElementById('header')?.classList.toggle('h-screen')
+                document
+                    .querySelector('#header nav')
+                    ?.classList.toggle('hidden')
+            }}
+        >
+            <IconMenu class={iconClass} />
+        </button>
+    )
+})

packages/docs/src/components/core/ToggleTheme.tsx

@@ -0,0 +1,52 @@
+import { component$, useStore, useClientEffect$ } from '@builder.io/qwik'
+
+import { IconSun } from '~/components/icons/IconSun'
+import { IconMoon } from '../icons/IconMoon'
+
+interface ItemProps {
+    iconClass?: string
+}
+
+export default component$((props: ItemProps) => {
+    const { iconClass } = props
+    const store = useStore({
+        theme:
+            (typeof window !== 'undefined' && window?.localStorage?.theme) ||
+            undefined,
+    })
+
+    useClientEffect$(() => {
+        store.theme =
+            window.localStorage.theme === 'dark' ||
+            (!('theme' in window.localStorage) &&
+                window.matchMedia('(prefers-color-scheme: dark)').matches)
+                ? 'dark'
+                : 'light'
+    })
+
+    return (
+        <button
+            type="button"
+            class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
+            aria-label="Toggle between Dark and Light mode"
+            onClick$={() => {
+                switch (store.theme) {
+                    case 'dark':
+                        document.documentElement.classList.remove('dark')
+                        store.theme = window.localStorage.theme = 'light'
+                        break
+                    default:
+                        document.documentElement.classList.add('dark')
+                        store.theme = window.localStorage.theme = 'dark'
+                        break
+                }
+            }}
+        >
+            {store.theme == 'dark' ? (
+                <IconMoon class={iconClass} />
+            ) : (
+                <IconSun class={iconClass} />
+            )}
+        </button>
+    )
+})

packages/docs/src/components/footer/footer.css

@@ -1,22 +0,0 @@
-footer {
-  border-top: 0.5px solid #ddd;
-  margin-top: 40px;
-  padding: 20px;
-  text-align: center;
-}
-
-footer a {
-  color: #9e9e9e;
-  font-size: 12px;
-}
-
-footer ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-footer li {
-  display: inline-block;
-  padding: 6px 12px;
-}

packages/docs/src/components/footer/footer.tsx

@@ -1,36 +0,0 @@
-import { component$, useStyles$ } from '@builder.io/qwik';
-import styles from './footer.css?inline';
-
-export default component$(() => {
-  useStyles$(styles);
-
-  return (
-    <footer>
-      <ul>
-        <li>
-          <a href="/docs">Docs</a>
-        </li>
-        <li>
-          <a href="/about-us">About Us</a>
-        </li>
-        <li>
-          <a href="https://qwik.builder.io/">Qwik</a>
-        </li>
-        <li>
-          <a href="https://twitter.com/QwikDev">Twitter</a>
-        </li>
-        <li>
-          <a href="https://github.com/BuilderIO/qwik">GitHub</a>
-        </li>
-        <li>
-          <a href="https://qwik.builder.io/chat">Chat</a>
-        </li>
-      </ul>
-      <div>
-        <a href="https://www.builder.io/" target="_blank" class="builder">
-          Made with ♡ by Builder.io
-        </a>
-      </div>
-    </footer>
-  );
-});

packages/docs/src/components/header/header.css

@@ -1,34 +0,0 @@
-header {
-  position: sticky;
-  top: 0;
-  z-index: 11;
-  display: grid;
-  grid-template-columns: minmax(130px, auto) 1fr;
-  gap: 30px;
-  height: 80px;
-  width: 100%;
-  padding: 10px;
-  background-color: white;
-  overflow: hidden;
-}
-
-header a.logo {
-  display: block;
-}
-
-header a {
-  text-decoration: none;
-}
-
-header nav {
-  text-align: right;
-}
-
-header nav a {
-  display: inline-block;
-  padding: 5px 15px;
-}
-
-header nav a:hover {
-  text-decoration: underline;
-}

packages/docs/src/components/header/header.tsx

@@ -1,26 +0,0 @@
-import { component$, useStyles$ } from '@builder.io/qwik';
-import { useLocation } from '@builder.io/qwik-city';
-import { QwikLogo } from '../icons/qwik';
-import styles from './header.css?inline';
-
-export default component$(() => {
-  useStyles$(styles);
-
-  const { pathname } = useLocation();
-
-  return (
-    <header>
-      <a class="logo" href="/">
-        <QwikLogo />
-      </a>
-      <nav>
-        <a href="/docs" class={{ active: pathname.startsWith('/docs') }}>
-          Docs
-        </a>
-        <a href="/about-us" class={{ active: pathname.startsWith('/about-us') }}>
-          About Us
-        </a>
-      </nav>
-    </header>
-  );
-});

packages/docs/src/components/icons/IconArrowDownRight.tsx

@@ -0,0 +1,27 @@
+interface ItemProps {
+    class?: string
+}
+
+export const IconArrowDownRight = (props: ItemProps) => {
+    const { class: className } = props
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class={`icon icon-tabler icon-tabler-arrow-down-right ${
+                className || 'w-5 h-5'
+            }`}
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        >
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+            <line x1="7" y1="7" x2="17" y2="17"></line>
+            <polyline points="17 8 17 17 8 17"></polyline>
+        </svg>
+    )
+}

packages/docs/src/components/icons/IconFacebook.tsx

@@ -0,0 +1,17 @@
+export const IconFacebook = () => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon icon-tabler icon-tabler-brand-facebook w-5 h-5"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"></path>
+    </svg>
+)

packages/docs/src/components/icons/IconGithub.tsx

@@ -0,0 +1,17 @@
+export const IconGithub = () => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon icon-tabler icon-tabler-brand-github w-5 h-5"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"></path>
+    </svg>
+)

packages/docs/src/components/icons/IconInstagram.tsx

@@ -0,0 +1,19 @@
+export const IconInstagram = () => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon icon-tabler icon-tabler-brand-instagram w-5 h-5"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <rect x="4" y="4" width="16" height="16" rx="4"></rect>
+        <circle cx="12" cy="12" r="3"></circle>
+        <line x1="16.5" y1="7.5" x2="16.5" y2="7.501"></line>
+    </svg>
+)

packages/docs/src/components/icons/IconMenu.tsx

@@ -0,0 +1,30 @@
+interface ItemProps {
+    class?: string
+}
+
+export const IconMenu = (props: ItemProps) => {
+    const { class: className } = props
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            class={`icon icon-tabler icon-tabler-menu ${
+                className || 'w-5 h-5'
+            }`}
+            preserveAspectRatio="xMidYMid meet"
+            viewBox="0 0 24 24"
+        >
+            <g
+                class="icon-tabler"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            >
+                <path d="M4 8h16"></path>
+                <path d="M4 16h16"></path>
+            </g>
+        </svg>
+    )
+}

packages/docs/src/components/icons/IconMoon.tsx

@@ -0,0 +1,26 @@
+interface ItemProps {
+    class?: string
+}
+
+export const IconMoon = (props: ItemProps) => {
+    const { class: className } = props
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class={`icon icon-tabler icon-tabler-moon ${
+                className || 'w-5 h-5'
+            }`}
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        >
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+            <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path>
+        </svg>
+    )
+}

packages/docs/src/components/icons/IconStar.tsx

@@ -0,0 +1,17 @@
+export const IconStar = () => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon icon-tabler icon-tabler-star w-5 h-5"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path>
+    </svg>
+)

packages/docs/src/components/icons/IconSun.tsx

@@ -0,0 +1,25 @@
+interface ItemProps {
+    class?: string
+}
+
+export const IconSun = (props: ItemProps) => {
+    const { class: className } = props
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class={`icon icon-tabler icon-tabler-sun ${className || 'w-5 h-5'}`}
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        >
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+            <circle cx="12" cy="12" r="4"></circle>
+            <path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path>
+        </svg>
+    )
+}

packages/docs/src/components/icons/IconTwitter.tsx

@@ -0,0 +1,17 @@
+export const IconTwitter = () => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon icon-tabler icon-tabler-brand-twitter w-5 h-5"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z"></path>
+    </svg>
+)

packages/docs/src/components/icons/qwik.tsx

@@ -1,20 +0,0 @@
-export const QwikLogo = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 167 53">
-    <path
-      fill="#000"
-      d="M81.95 46.59h-6.4V35.4a12.25 12.25 0 0 1-7.06 2.17c-3.47 0-6.06-.94-7.67-2.92-1.6-1.96-2.42-5.45-2.42-10.43 0-5.1.95-8.62 2.87-10.67 1.96-2.08 5.1-3.09 9.43-3.09 4.1 0 7.82.57 11.25 1.67V46.6Zm-6.4-30.31a16.6 16.6 0 0 0-4.85-.66c-2.17 0-3.73.56-4.6 1.7-.85 1.17-1.32 3.38-1.32 6.65 0 3.08.41 5.14 1.26 6.26.86 1.1 2.33 1.67 4.5 1.67 2.84 0 5.01-1.17 5.01-2.62v-13Zm15.58-5.14c2.27 6.3 4.2 12.6 5.86 18.95 2.22-6.5 4.1-12.8 5.55-18.95h5.61a187.5 187.5 0 0 1 5.3 18.95c2.52-6.9 4.5-13.21 5.95-18.95h6.31a285.68 285.68 0 0 1-8.92 25.76h-7.53c-.86-4.6-2.22-10.14-4.04-16.75a151.51 151.51 0 0 1-4.89 16.75H92.8a287.88 287.88 0 0 0-8.17-25.76h6.5Zm41.7-3.58c-2.83 0-3.63-.7-3.63-3.59 0-2.57.82-3.18 3.63-3.18 2.83 0 3.63.6 3.63 3.18 0 2.89-.8 3.59-3.63 3.59Zm-3.18 3.58h6.4V36.9h-6.4V11.14Zm36.65 0c-4.54 6.46-7.72 10.39-9.49 11.8 1.46.95 5.36 5.95 10.2 13.98h-7.38c-6.02-9.13-8.89-13.07-10.3-13.67v13.67h-6.4V0h6.4v23.23c1.45-1.06 4.63-5.1 9.54-12.09h7.43Z"
-    />
-    <path
-      fill="#18B6F6"
-      d="M40.97 52.54 32.1 43.7l-.14.02v-.1l-18.9-18.66 4.66-4.5-2.74-15.7L2 20.87a7.14 7.14 0 0 0-1.03 8.52l8.11 13.45a6.81 6.81 0 0 0 5.92 3.3l4.02-.05 21.96 6.46Z"
-    />
-    <path
-      fill="#AC7EF4"
-      d="m45.82 20.54-1.78-3.3-.93-1.68-.37-.66-.04.04-4.9-8.47a6.85 6.85 0 0 0-5.99-3.43l-4.28.12-12.8.04a6.85 6.85 0 0 0-5.85 3.37L1.1 21.99 15 4.73l18.24 20.04L30 28.04l1.94 15.68.02-.04v.04h-.04l.04.04 1.51 1.47 7.36 7.19c.3.29.81-.06.6-.43l-4.54-8.93 7.91-14.63.26-.3a6.73 6.73 0 0 0 .76-7.6Z"
-    />
-    <path
-      fill="#fff"
-      d="M33.3 24.69 15.02 4.75l2.6 15.62-4.66 4.51L31.91 43.7l-1.7-15.62 3.1-3.4Z"
-    />
-  </svg>
-);

packages/docs/src/components/menu/menu.css

@@ -1,13 +0,0 @@
-.menu {
-  background: #eee;
-  padding: 20px 10px;
-}
-
-.menu h5 {
-  margin: 0;
-}
-
-.menu ul {
-  padding-left: 20px;
-  margin: 5px 0 25px 0;
-}

packages/docs/src/components/menu/menu.tsx

@@ -1,36 +0,0 @@
-import { component$, useStyles$ } from '@builder.io/qwik';
-import { useContent, Link, useLocation } from '@builder.io/qwik-city';
-import styles from './menu.css?inline';
-
-export default component$(() => {
-  useStyles$(styles);
-
-  const { menu } = useContent();
-  const loc = useLocation();
-
-  return (
-    <aside class="menu">
-      {menu
-        ? menu.items?.map((item) => (
-            <>
-              <h5>{item.text}</h5>
-              <ul>
-                {item.items?.map((item) => (
-                  <li>
-                    <Link
-                      href={item.href}
-                      class={{
-                        'is-active': loc.pathname === item.href,
-                      }}
-                    >
-                      {item.text}
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-            </>
-          ))
-        : null}
-    </aside>
-  );
-});

packages/docs/src/components/on-this-page/on-this-page.css

@@ -1,33 +0,0 @@
-.on-this-page {
-  padding-bottom: 20px;
-  font-size: 0.9em;
-}
-
-.on-this-page h6 {
-  margin: 10px 0;
-  font-weight: bold;
-  text-transform: uppercase;
-}
-
-.on-this-page ul {
-  margin: 0;
-  padding: 0 0 20px 0;
-  list-style: none;
-}
-
-.on-this-page a {
-  position: relative;
-  display: block;
-  border: 0 solid #ddd;
-  border-left-width: 2px;
-  padding: 4px 2px 4px 8px;
-  text-decoration: none;
-}
-
-.on-this-page a.indent {
-  padding-left: 30px;
-}
-
-.on-this-page a:hover {
-  border-color: var(--theme-accent);
-}

packages/docs/src/components/on-this-page/on-this-page.tsx

@@ -1,62 +0,0 @@
-import { useContent, useLocation } from '@builder.io/qwik-city';
-import { component$, useStyles$ } from '@builder.io/qwik';
-import styles from './on-this-page.css?inline';
-
-export default component$(() => {
-  useStyles$(styles);
-
-  const { headings } = useContent();
-  const contentHeadings = headings?.filter((h) => h.level === 2 || h.level === 3) || [];
-
-  const { pathname } = useLocation();
-  const editUrl = `#update-your-edit-url-for-${pathname}`;
-
-  return (
-    <aside class="on-this-page">
-      {contentHeadings.length > 0 ? (
-        <>
-          <h6>On This Page</h6>
-          <ul>
-            {contentHeadings.map((h) => (
-              <li>
-                <a
-                  href={`#${h.id}`}
-                  class={{
-                    block: true,
-                    indent: h.level > 2,
-                  }}
-                >
-                  {h.text}
-                </a>
-              </li>
-            ))}
-          </ul>
-        </>
-      ) : null}
-
-      <h6>More</h6>
-      <ul>
-        <li>
-          <a href={editUrl} target="_blank">
-            Edit this page
-          </a>
-        </li>
-        <li>
-          <a href="https://qwik.builder.io/chat" target="_blank">
-            Join our community
-          </a>
-        </li>
-        <li>
-          <a href="https://github.com/BuilderIO/qwik" target="_blank">
-            GitHub
-          </a>
-        </li>
-        <li>
-          <a href="https://twitter.com/QwikDev" target="_blank">
-            @QwikDev
-          </a>
-        </li>
-      </ul>
-    </aside>
-  );
-});

packages/docs/src/components/router-head/router-head.tsx

@@ -1,32 +0,0 @@
-import { component$ } from '@builder.io/qwik';
-import { useDocumentHead, useLocation } from '@builder.io/qwik-city';
-
-/**
- * The RouterHead component is placed inside of the document `<head>` element.
- */
-export const RouterHead = component$(() => {
-  const head = useDocumentHead();
-  const loc = useLocation();
-
-  return (
-    <>
-      <title>{head.title}</title>
-
-      <link rel="canonical" href={loc.href} />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-
-      {head.meta.map((m) => (
-        <meta {...m} />
-      ))}
-
-      {head.links.map((l) => (
-        <link {...l} />
-      ))}
-
-      {head.styles.map((s) => (
-        <style {...s.props} dangerouslySetInnerHTML={s.style} />
-      ))}
-    </>
-  );
-});

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

@@ -0,0 +1,37 @@
+import { component$ } from '@builder.io/qwik'
+
+export default component$(() => {
+    return (
+        <section class="relative">
+            <div class="max-w-6xl mx-auto px-4 sm:px-6">
+                <div class="py-12 md:py-20">
+                    <div class="max-w-3xl mx-auto text-center p-6 rounded-md shadow-xl dark:shadow-none">
+                        <h2 class="text-4xl md:text-4xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
+                            <span class="text-[#039de1]">Qwik</span> +{' '}
+                            <br class="block sm:hidden" />
+                            <span class="text-[#039de1] sm:whitespace-nowrap">
+                                Tailwind CSS
+                            </span>
+                        </h2>
+                        <p class="text-xl text-gray-600 dark:text-slate-400">
+                            Be very surprised by these huge fake numbers you are
+                            seeing on this page. <br class="hidden md:inline" />
+                            Don't waste more time!
+                        </p>
+
+                        <div class="mt-6">
+                            <a
+                                class="btn btn-primary mb-4 sm:mb-0 w-full sm:w-auto"
+                                href="https://github.com/onwidget/qwind"
+                                target="_blank"
+                                rel="noopener"
+                            >
+                                Get template
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+})

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

@@ -0,0 +1,84 @@
+import { component$ } from '@builder.io/qwik'
+import { IconArrowDownRight } from '../icons/IconArrowDownRight'
+
+export default component$(() => {
+    const items = [
+        [
+            {
+                question: 'What do I need to start?',
+                answer: `Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to explore strange new worlds.
+
+    Many say exploration is part of our destiny, but it’s actually our duty to future generations.`,
+            },
+            {
+                question: 'How to install the Qwik + Tailwind CSS template?',
+                answer: `Well, the way they make shows is, they make one show. That show's called a pilot.
+
+    Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.`,
+            },
+            {
+                question:
+                    "What's something that you completely don't understand?",
+                answer: `A flower in my garden, a mystery in my panties. Heart attack never stopped old Big Bear. I didn't even know we were calling him Big Bear.`,
+            },
+        ],
+        [
+            {
+                question: "What's an example of when you changed your mind?",
+                answer: `Michael Knight a young loner on a crusade to champion the cause of the innocent. The helpless. The powerless in a world of criminals who operate above the law. Here he comes Here comes Speed Racer. He's a demon on wheels.`,
+            },
+            {
+                question:
+                    'What is something that you would really like to try again?',
+                answer: `A business big enough that it could be listed on the NASDAQ goes belly up. Disappears!
+
+      It ceases to exist without me. No, you clearly don't know who you're talking to, so let me clue you in.`,
+            },
+            {
+                question:
+                    'If you could only ask one question to each person you meet, what would that question be?',
+                answer: `This is not about revenge. This is about justice. A lot of things can change in twelve years, Admiral. Well, that's certainly good to know. About four years. I got tired of hearing how young I looked.`,
+            },
+        ],
+    ]
+
+    return (
+        <section class="border-t border-gray-200 dark:border-slate-800">
+            <div class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
+                <div class="max-w-xl sm:mx-auto lg:max-w-2xl">
+                    <div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
+                        <p class="text-base text-primary-600 dark:text-purple-200 font-semibold tracking-wide uppercase">
+                            FAQs
+                        </p>
+                        <h2 class="max-w-lg mb-4 text-3xl font-bold leading-none tracking-tight sm:text-4xl md:mx-auto font-heading">
+                            Frequently Asked Questions
+                        </h2>
+                    </div>
+                </div>
+                <div class="max-w-screen-xl sm:mx-auto">
+                    <div class="grid grid-cols-1 gap-x-8 gap-y-8 lg:gap-x-16 md:grid-cols-2">
+                        {items.map((subitems) => (
+                            <div class="space-y-8">
+                                {subitems.map(({ question, answer }) => (
+                                    <div>
+                                        <p class="mb-4 text-xl font-bold">
+                                            <IconArrowDownRight class="w-7 h-7 text-secondary-500 inline-block" />
+                                            {question}
+                                        </p>
+                                        {answer
+                                            .split('\n\n')
+                                            .map((paragraph) => (
+                                                <p class="text-gray-700 dark:text-gray-400 mb-2">
+                                                    {paragraph}
+                                                </p>
+                                            ))}
+                                    </div>
+                                ))}
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+})

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

@@ -0,0 +1,91 @@
+import { component$ } from '@builder.io/qwik'
+import { IconStar } from '~/components/icons/IconStar'
+
+export default component$(() => {
+    const items = [
+        [
+            {
+                title: 'Qwik + Tailwind CSS Integration',
+                description:
+                    'A seamless integration between two great frameworks that offer high productivity, performance and versatility.',
+                icon: 'tabler:brand-tailwind',
+            },
+            {
+                title: 'Ready-to-use Components',
+                description:
+                    'Widgets made with Tailwind CSS ready to be used in Marketing Websites, SaaS, Blogs, Personal Profiles, Small Business...',
+                icon: 'tabler:components',
+            },
+            {
+                title: 'Best Practices',
+                description:
+                    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
+                icon: 'tabler:list-check',
+            },
+        ],
+        [
+            {
+                title: 'Excellent Page Speed',
+                description:
+                    'Having a good page speed impacts organic search ranking, improves user experience (UI/UX) and increase conversion rates.',
+                icon: 'tabler:rocket',
+            },
+            {
+                title: 'Search Engine Optimization (SEO)',
+                description:
+                    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
+                icon: 'tabler:arrows-right-left',
+            },
+            {
+                title: 'Open to new ideas and contributions',
+                description:
+                    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
+                icon: 'tabler:bulb',
+            },
+        ],
+    ]
+
+    return (
+        <section class="scroll-mt-16" id="features">
+            <div class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20">
+                <div class="mb-10 md:mx-auto sm:text-center md:mb-12 max-w-3xl">
+                    <p class="text-base text-primary-600 dark:text-purple-200 font-semibold tracking-wide uppercase">
+                        Features
+                    </p>
+                    <h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
+                        What you get with{' '}
+                        <span class="whitespace-nowrap">Qwind</span>
+                    </h2>
+                    <p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400">
+                        Sed ut perspiciatis unde omnis iste natus error sit
+                        voluptatem accusantium doloremque rem aperiam, eaque
+                        ipsa quae.
+                    </p>
+                </div>
+                <div class="grid mx-auto space-y-6 md:grid-cols-2 md:space-y-0">
+                    {items.map((subitems) => (
+                        <div class="space-y-8 sm:px-8">
+                            {subitems.map(({ title, description }) => (
+                                <div class="flex flex-row max-w-md">
+                                    <div class="mb-4 mr-4">
+                                        <div class="text-white flex items-center justify-center w-12 h-12 rounded-full bg-secondary-500 dark:bg-secondary-700">
+                                            <IconStar />
+                                        </div>
+                                    </div>
+                                    <div>
+                                        <h3 class="mb-3 text-xl font-bold">
+                                            {title}
+                                        </h3>
+                                        <p class="text-gray-600 dark:text-slate-400">
+                                            {description}
+                                        </p>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    )
+})