chore(docs): examples

Author: egorprnn

.npmignore

@@ -4,6 +4,7 @@
 /src
 /build
 /scripts
+/examples
 .eslintrc.json
 .gitignore
 tsconfig.json

README.md

@@ -9,8 +9,8 @@
     <img src="https://badge.fury.io/js/discord.js-pages.svg" alt="npm version" height="18">
   </a>
 
-| 📖 [Documentation](https://mrzillagold.github.io/discord.js-pages/index.html) |
-| ---------------------------------------------------------------------------- |
+| 📖 [Documentation](https://mrzillagold.github.io/discord.js-pages/index.html) | [🤖 Examples](https://github.com/MrZillaGold/discord.js-pages) |
+| --- | --- |
 
 </p>
 
@@ -19,7 +19,7 @@
 
 ### Usage 📦
 ```js
-import { PagesBuilder } from 'discord.js-pages';
+import { PagesBuilder, PagesManager } from 'discord.js-pages';
 import { Client, MessageEmbed } from 'discord.js';
 
 const client = new Client({
@@ -28,6 +28,8 @@ const client = new Client({
     ]
 });
 
+const pagesManager = new PagesManager();
+
 // Middleware is useful in bots with modular commands
 client.on('interactionCreate', (interaction) => {
     pagesManager.middleware(interaction);

docs/classes/PagesBuilder.html

@@ -3978,9 +3978,9 @@ <h3>set<wbr>Default<wbr>Buttons</h3>
 							<dl class="tsd-comment-tags">
 								<dt>example</dt>
 								<dd><pre><code><span style="color: #001080">builder</span><span style="color: #000000">.</span><span style="color: #795E26">setDefaultButtons</span><span style="color: #000000">([</span><span style="color: #A31515">&#039;first&#039;</span><span style="color: #000000">, {</span>
-<span style="color: #000000">  </span><span style="color: #A31515">&#039;stop&#039;</span><span style="color: #001080">:</span><span style="color: #000000"> </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #795E26">MessageButton</span><span style="color: #000000">()</span>
-<span style="color: #000000">  .</span><span style="color: #795E26">setLabel</span><span style="color: #000000">(</span><span style="color: #A31515">&#039;Stop&#039;</span><span style="color: #000000">)</span>
-<span style="color: #000000">  .</span><span style="color: #795E26">setStyle</span><span style="color: #000000">(</span><span style="color: #A31515">&#039;PRIMARY&#039;</span><span style="color: #000000">)</span>
+<span style="color: #000000">  </span><span style="color: #001080">stop:</span><span style="color: #000000"> </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #795E26">MessageButton</span><span style="color: #000000">()</span>
+<span style="color: #000000">     .</span><span style="color: #795E26">setLabel</span><span style="color: #000000">(</span><span style="color: #A31515">&#039;Stop&#039;</span><span style="color: #000000">)</span>
+<span style="color: #000000">     .</span><span style="color: #795E26">setStyle</span><span style="color: #000000">(</span><span style="color: #A31515">&#039;PRIMARY&#039;</span><span style="color: #000000">)</span>
 <span style="color: #000000">}]);</span>
 </code></pre>
 								</dd>

docs/index.html

@@ -2738,7 +2738,7 @@ <h1 align="center">
 					<thead>
 						<tr>
 							<th>📖 <a href="https://mrzillagold.github.io/discord.js-pages/index.html">Documentation</a></th>
-							<th>🤖 <a href="docs/examples">Examples</a></th>
+							<th><a href="https://github.com/MrZillaGold/discord.js-pages">🤖 Examples</a></th>
 						</tr>
 					</thead>
 				</table>
@@ -2750,7 +2750,7 @@ <h3>Install 📦</h3>
 			<a href="#usage-📦" id="usage-📦" style="color: inherit; text-decoration: none;">
 				<h3>Usage 📦</h3>
 			</a>
-			<pre><code class="language-js"><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">PagesBuilder</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;discord.js-pages&#039;</span><span style="color: #000000">;</span>
+			<pre><code class="language-js"><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">PagesBuilder</span><span style="color: #000000">, </span><span style="color: #001080">PagesManager</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;discord.js-pages&#039;</span><span style="color: #000000">;</span>
 <span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">Client</span><span style="color: #000000">, </span><span style="color: #001080">MessageEmbed</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;discord.js&#039;</span><span style="color: #000000">;</span>
 
 <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">client</span><span style="color: #000000"> = </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #795E26">Client</span><span style="color: #000000">({</span>
@@ -2759,6 +2759,8 @@ <h3>Usage 📦</h3>
 <span style="color: #000000">    ]</span>
 <span style="color: #000000">});</span>
 
+<span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">pagesManager</span><span style="color: #000000"> = </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #795E26">PagesManager</span><span style="color: #000000">();</span>
+
 <span style="color: #008000">// Middleware is useful in bots with modular commands</span>
 <span style="color: #001080">client</span><span style="color: #000000">.</span><span style="color: #795E26">on</span><span style="color: #000000">(</span><span style="color: #A31515">&#039;interactionCreate&#039;</span><span style="color: #000000">, (</span><span style="color: #001080">interaction</span><span style="color: #000000">) </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
 <span style="color: #000000">    </span><span style="color: #001080">pagesManager</span><span style="color: #000000">.</span><span style="color: #795E26">middleware</span><span style="color: #000000">(</span><span style="color: #001080">interaction</span><span style="color: #000000">);</span>

docs/modules.html

@@ -2738,7 +2738,7 @@ <h1 align="center">
 					<thead>
 						<tr>
 							<th>📖 <a href="https://mrzillagold.github.io/discord.js-pages/index.html">Documentation</a></th>
-							<th>🤖 <a href="docs/examples">Examples</a></th>
+							<th><a href="https://github.com/MrZillaGold/discord.js-pages">🤖 Examples</a></th>
 						</tr>
 					</thead>
 				</table>
@@ -2750,7 +2750,7 @@ <h3>Install 📦</h3>
 			<a href="#usage-📦" id="usage-📦" style="color: inherit; text-decoration: none;">
 				<h3>Usage 📦</h3>
 			</a>
-			<pre><code class="language-js"><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">PagesBuilder</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;discord.js-pages&#039;</span><span style="color: #000000">;</span>
+			<pre><code class="language-js"><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">PagesBuilder</span><span style="color: #000000">, </span><span style="color: #001080">PagesManager</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;discord.js-pages&#039;</span><span style="color: #000000">;</span>
 <span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">Client</span><span style="color: #000000">, </span><span style="color: #001080">MessageEmbed</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;discord.js&#039;</span><span style="color: #000000">;</span>
 
 <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">client</span><span style="color: #000000"> = </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #795E26">Client</span><span style="color: #000000">({</span>
@@ -2759,6 +2759,8 @@ <h3>Usage 📦</h3>
 <span style="color: #000000">    ]</span>
 <span style="color: #000000">});</span>
 
+<span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">pagesManager</span><span style="color: #000000"> = </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #795E26">PagesManager</span><span style="color: #000000">();</span>
+
 <span style="color: #008000">// Middleware is useful in bots with modular commands</span>
 <span style="color: #001080">client</span><span style="color: #000000">.</span><span style="color: #795E26">on</span><span style="color: #000000">(</span><span style="color: #A31515">&#039;interactionCreate&#039;</span><span style="color: #000000">, (</span><span style="color: #001080">interaction</span><span style="color: #000000">) </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
 <span style="color: #000000">    </span><span style="color: #001080">pagesManager</span><span style="color: #000000">.</span><span style="color: #795E26">middleware</span><span style="color: #000000">(</span><span style="color: #001080">interaction</span><span style="color: #000000">);</span>

examples/buttons/customButtons.js

@@ -0,0 +1,64 @@
+import { Client, MessageEmbed, MessageButton, MessageActionRow } from 'discord.js';
+import { PagesBuilder } from 'discord.js-pages';
+
+const client = new Client({
+    intents: [
+        'GUILDS'
+    ]
+});
+
+client.on('interactionCreate', (interaction) => {
+    // Custom buttons & select
+    new PagesBuilder(interaction)
+        .setTitle('Global title')
+        .setPages([
+            new MessageEmbed()
+                .setDescription('First page'),
+            new MessageEmbed()
+                .setDescription('Second page')
+        ])
+        .setComponents([
+            new MessageActionRow()
+                .setComponents(
+                    new MessageButton()
+                        .setCustomId('custom')
+                        .setLabel('Custom button')
+                        .setStyle('PRIMARY')
+                )
+        ])
+        // You can add buttons/selects to the end of the list.
+        // The library itself will find the component in which there is a place or create new for the element and add it.
+        // Support array.
+        .addComponents(
+            new MessageButton()
+                .setCustomId('awesome')
+                .setLabel('Awesome button')
+                .setStyle('SECONDARY')
+        )
+        // Add triggers for handling interactions with buttons/selects.
+        // Support array.
+        .setTriggers({
+            name: 'custom',
+            callback(interactionCallback, button) {
+                button.setDisabled(true);
+
+                interaction.followUp({
+                    content: 'Custom button callback!'
+                });
+            }
+        })
+        .addTriggers({
+            name: 'awesome',
+            callback(interactionCallback, button) {
+                button.setDisabled(true)
+                    .setLabel('¯\\_(ツ)_/¯');
+
+                interaction.followUp({
+                    content: 'Awesome button callback!'
+                });
+            }
+        })
+        .build();
+});
+
+client.login(process.env.TOKEN);

examples/buttons/dynamicUpdate.js

@@ -0,0 +1,45 @@
+import { Client, MessageEmbed, MessageButton, MessageActionRow } from 'discord.js';
+import { PagesBuilder } from 'discord.js-pages';
+
+const client = new Client({
+    intents: [
+        'GUILDS'
+    ]
+});
+
+client.on('interactionCreate', (interaction) => {
+    const link = new MessageButton()
+        .setLabel('Dynamic link')
+        .setStyle('LINK');
+
+    // Dynamic buttons update
+    const builder = new PagesBuilder(interaction)
+        .setTitle('Global title');
+
+    builder.setPages([
+        () => {
+            link.setURL('https://google.com/');
+
+            builder.setComponents(
+                new MessageActionRow()
+                    .addComponents(link)
+            );
+
+            return new MessageEmbed()
+                .setDescription('First page');
+        },
+        () => {
+            link.setURL('https://discord.com/');
+
+            builder.setComponents(
+                new MessageActionRow()
+                    .addComponents(link)
+            );
+
+            return new MessageEmbed()
+                .setDescription('Second page');
+        }
+    ]);
+});
+
+client.login(process.env.TOKEN);

examples/buttons/quickActions.js

@@ -0,0 +1,30 @@
+import { Client, MessageEmbed, MessageButton } from 'discord.js';
+import { PagesBuilder } from 'discord.js-pages';
+
+const client = new Client({
+    intents: [
+        'GUILDS'
+    ]
+});
+
+client.on('interactionCreate', (interaction) => {
+    // Quick actions
+    new PagesBuilder(interaction)
+        .setTitle('Global title')
+        .setPages([
+            new MessageEmbed()
+                .setDescription('First page'),
+            new MessageEmbed()
+                .setDescription('Second page')
+        ])
+        // Add buttons with quick pagination actions, also you can customize it.
+        // There is no need to set customId, the library does it for you.
+        .setDefaultButtons(['first', {
+            stop: new MessageButton()
+                .setLabel('Stop')
+                .setStyle('PRIMARY')
+        }])
+        .build();
+});
+
+client.login(process.env.TOKEN);