✨ add example to docs

Author: henrythierrydev

CODE_OF_CONDUCT.md

@@ -5,12 +5,10 @@
 We as members, contributors, and leaders pledge to make participation in our
 community a harassment-free experience for everyone, regardless of age, body
 size, visible or invisible disability, ethnicity, sex characteristics, gender
-identity and expression, level of experience, education, socio-economic status,
-nationality, personal appearance, race, religion, or sexual identity
+identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity
 and orientation.
 
-We pledge to act and interact in ways that contribute to an open, welcoming,
-diverse, inclusive, and healthy community.
+We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.
 
 ## Our Standards
 
@@ -20,8 +18,7 @@ community include:
 * Demonstrating empathy and kindness toward other people
 * Being respectful of differing opinions, viewpoints, and experiences
 * Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
-  and learning from the experience
+* Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
 * Focusing on what is best not just for us as individuals, but for the
   overall community
 
@@ -40,8 +37,7 @@ Examples of unacceptable behavior include:
 
 Community leaders are responsible for clarifying and enforcing our standards of
 acceptable behavior and will take appropriate and fair corrective action in
-response to any behavior that they deem inappropriate, threatening, offensive,
-or harmful.
+response to any behavior that they deem inappropriate, threatening, offensive, or harmful.
 
 Community leaders have the right and responsibility to remove, edit, or reject
 comments, commits, code, wiki edits, issues, and other contributions that are
@@ -52,8 +48,7 @@ decisions when appropriate.
 
 This Code of Conduct applies within all community spaces, and also applies when
 an individual is officially representing the community in public spaces.
-Examples of representing our community include using an official e-mail address,
-posting via an official social media account, or acting as an appointed
+Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed
 representative at an online or offline event.
 
 ## Enforcement
@@ -106,16 +101,15 @@ Violating these terms may lead to a permanent ban.
 ### 4. Permanent Ban
 
 **Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
+standards, including sustained inappropriate behavior, harassment of an
 individual, or aggression toward or disparagement of classes of individuals.
 
 **Consequence**: A permanent ban from any sort of public interaction within
 the community.
 
 ## Attribution
 
-This Code of Conduct is adapted from the [Contributor Covenant][homepage],
-version 2.0, available at
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.0, available at
 https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
 
 Community Impact Guidelines were inspired by [Mozilla's code of conduct

en/cli/cli-database.mdx

@@ -15,24 +15,24 @@ The command accepts an optional ORM argument to skip the first selection step. W
 
 ## When to use
 
-Use this command at the beginning of a project or when adding database access to an existing Spraxium application. It is the equivalent of manually installing packages, writing connection boilerplate, and registering the module , all collapsed into a single interactive flow. Run it once per database integration; for schema changes or migrations, use the ORM tooling directly after setup.
+Use this command at the beginning of a project or when adding database access to an existing Spraxium application. It is the equivalent of manually installing packages, writing connection boilerplate, and registering the module, all collapsed into a single interactive flow. Run it once per database integration; for schema changes or migrations, use the ORM tooling directly after setup.
 
 ## Supported ORMs
 
 <DropdownGroup>
-  <Dropdown title="Prisma , schema-first with auto-generated client">
+  <Dropdown title="Prisma, schema-first with auto-generated client">
     Prisma is the best choice when you want a strongly typed query client generated from a declarative schema file. It supports PostgreSQL, MySQL, and SQLite out of the box. After the wizard runs, define your models in `prisma/schema.prisma` and run `npx prisma migrate dev` to apply changes. Prisma is ideal for teams that prefer schema-as-source-of-truth workflows, readable migration history, and full TypeScript type safety from database to application layer.
   </Dropdown>
-  <Dropdown title="Drizzle , lightweight SQL-native TypeScript ORM">
+  <Dropdown title="Drizzle, lightweight SQL-native TypeScript ORM">
     Drizzle is suited for projects that value small bundle size, direct SQL control, and schema defined in TypeScript rather than a separate file. It supports PostgreSQL, MySQL, and SQLite. The generated *DatabaseService* exposes a `.getDb()` method that returns the Drizzle query builder, ready to use. Choose Drizzle when you want minimal abstraction with full TypeScript inference and prefer defining tables as TypeScript objects over `.prisma` syntax.
   </Dropdown>
-  <Dropdown title="TypeORM , decorator-based with Active Record or Data Mapper">
+  <Dropdown title="TypeORM, decorator-based with Active Record or Data Mapper">
     TypeORM is the established choice for teams coming from NestJS or Spring backgrounds who are comfortable with class decorators such as *@Entity*, *@Column*, and *@Repository*. It supports PostgreSQL, MySQL, and SQLite. Use TypeORM when your team prefers entity classes as the source of truth and wants a familiar pattern for migrations and relation management.
   </Dropdown>
-  <Dropdown title="Mongoose , document model for MongoDB">
+  <Dropdown title="Mongoose, document model for MongoDB">
     Mongoose is the right pick when your data is document-oriented and MongoDB is your database. It has a single database target, so the wizard skips the engine selection step. The generated module includes a schema definition and a service that wraps the Mongoose model. Choose Mongoose for applications that need flexible schemas, embedded documents, or MongoDB-specific query operators.
   </Dropdown>
-  <Dropdown title="Mikro-ORM , versatile ORM with Unit of Work pattern">
+  <Dropdown title="Mikro-ORM, versatile ORM with Unit of Work pattern">
     Mikro-ORM is a strong choice for advanced use cases that benefit from the Unit of Work pattern and Identity Map. It supports PostgreSQL, MySQL, SQLite, and MongoDB. Mikro-ORM is well suited for complex domain models with deep relation graphs, where controlled change tracking across a request lifecycle matters more than simplicity of setup.
   </Dropdown>
 </DropdownGroup>

en/cli/cli-dev.mdx

@@ -24,12 +24,7 @@ spraxium dev
 ```typescript filename="spraxium.config.ts"
 export default {
   dev: {
-    entrypoint: 'src/main.ts',
-    include: ['src/**'],
-    exclude: ['src/**/*.spec.ts'],
-    debounce: 300,
-  },
-};
+    entrypoint: 'src/main.ts', include: ['src/**'], exclude: ['src/**/*.spec.ts'], debounce: 300, }, };
 ```
 
 <DropdownGroup>

en/components/components-buttons.mdx

@@ -49,11 +49,7 @@ A static button is the simplest interactive component. You decorate a class with
 import { Button } from '@spraxium/components';
 
 @Button({
-  customId: 'confirm_action',
-  label: 'Confirm',
-  style: 'success',
-  emoji: '✅',
-})
+  customId: 'confirm_action', label: 'Confirm', style: 'success', emoji: '✅', })
 export class ConfirmButton {}
 ```
   </Tab>
@@ -134,10 +130,7 @@ Link buttons open a URL in the user's browser without firing any handler on the
 import { LinkButton } from '@spraxium/components';
 
 @LinkButton({
-  url: 'https://docs.example.com',
-  label: 'View Documentation',
-  emoji: '📖',
-})
+  url: 'https://docs.example.com', label: 'View Documentation', emoji: '📖', })
 export class DocsLinkButton {}
 ```
 
@@ -188,19 +181,15 @@ import { ModerationCommand } from './moderation.command';
 @SlashCommandHandler(ModerationCommand)
 export class ModerationCommandHandler {
   constructor(
-    private readonly buttons: ButtonService,
-    private readonly context: ContextService,
-  ) {}
+    private readonly buttons: ButtonService, private readonly context: ContextService, ) {}
 
   async handle(@Ctx() interaction: ChatInputCommandInteraction): Promise<void> {
     const ctx = await this.context.create({ targetUserId: '123456' });
     const actionRow = this.buttons.rowWithContext(ctx, ConfirmButton, CancelButton);
     const linkRow = this.buttons.build(DocsLinkButton);
 
     await interaction.reply({
-      content: 'Review the moderation action below.',
-      components: [actionRow, linkRow],
-    });
+      content: 'Review the moderation action below.', components: [actionRow, linkRow], });
   }
 }
 ```
@@ -258,11 +247,7 @@ import { UserBanButtonHandler } from './components/user-ban.handler';
 
 @Module({
   handlers: [
-    ConfirmButtonHandler,
-    CancelButtonHandler,
-    UserBanButtonHandler,
-  ],
-})
+    ConfirmButtonHandler, CancelButtonHandler, UserBanButtonHandler, ], })
 export class ModerationModule {}
 ```
 

en/components/components-context.mdx

@@ -29,22 +29,16 @@ import { SetupWizardCommand } from './setup-wizard.command';
 @SlashCommandHandler(SetupWizardCommand)
 export class SetupWizardCommandHandler {
   constructor(
-    private readonly context: ContextService,
-    private readonly buttons: ButtonService,
-  ) {}
+    private readonly context: ContextService, private readonly buttons: ButtonService, ) {}
 
   async handle(@Ctx() interaction: ChatInputCommandInteraction): Promise<void> {
     const ctx = await this.context.create(
-      { step: 1, guildId: interaction.guildId, settings: {} },
-      { ttl: 600, restrictedTo: interaction.user.id },
-    );
+      { step: 1, guildId: interaction.guildId, settings: {} }, { ttl: 600, restrictedTo: interaction.user.id }, );
 
     const row = this.buttons.rowWithContext(ctx, NextStepButton);
 
     await interaction.reply({
-      content: 'Welcome to the setup wizard. Click Next to begin.',
-      components: [row],
-    });
+      content: 'Welcome to the setup wizard. Click Next to begin.', components: [row], });
   }
 }
 ```
@@ -114,14 +108,10 @@ interface WizardData {
 @ButtonHandler(NextStepButton)
 export class NextStepButtonHandler {
   async handle(
-    @Ctx() interaction: ButtonInteraction,
-    @FlowContext() ctx: SpraxiumContext<WizardData>,
-  ): Promise<void> {
+    @Ctx() interaction: ButtonInteraction, @FlowContext() ctx: SpraxiumContext<WizardData>, ): Promise<void> {
     const { step, settings } = ctx.data;
     await interaction.reply({
-      content: `You are on step ${step}. Current settings: ${JSON.stringify(settings)}`,
-      ephemeral: true,
-    });
+      content: `You are on step ${step}. Current settings: ${JSON.stringify(settings)}`, ephemeral: true, });
   }
 }
 ```
@@ -148,18 +138,12 @@ export class StepTwoButtonHandler {
   constructor(private readonly context: ContextService) {}
 
   async handle(
-    @Ctx() interaction: ButtonInteraction,
-    @FlowContext() ctx: SpraxiumContext<WizardData>,
-  ): Promise<void> {
+    @Ctx() interaction: ButtonInteraction, @FlowContext() ctx: SpraxiumContext<WizardData>, ): Promise<void> {
     await this.context.update<WizardData>(ctx.id, {
-      step: 2,
-      settings: { ...ctx.data.settings, language: 'en' },
-    });
+      step: 2, settings: { ...ctx.data.settings, language: 'en' }, });
 
     await interaction.reply({
-      content: 'Step 2 complete. Proceeding to step 3.',
-      ephemeral: true,
-    });
+      content: 'Step 2 complete. Proceeding to step 3.', ephemeral: true, });
   }
 }
 ```
@@ -180,9 +164,7 @@ export class FinishWizardHandler {
   constructor(private readonly context: ContextService) {}
 
   async handle(
-    @Ctx() interaction: ButtonInteraction,
-    @FlowContext() ctx: SpraxiumContext<unknown>,
-  ): Promise<void> {
+    @Ctx() interaction: ButtonInteraction, @FlowContext() ctx: SpraxiumContext<unknown>, ): Promise<void> {
     await this.context.delete(ctx.id);
     await interaction.reply({ content: 'Setup complete!', ephemeral: true });
   }
@@ -235,10 +217,7 @@ import { defineComponents } from '@spraxium/components';
 
 export const componentsPlugin = defineComponents({
   context: {
-    storage: 'redis',
-    defaultTtl: 600,
-  },
-});
+    storage: 'redis', defaultTtl: 600, }, });
 ```
 
 ## ContextService API reference
@@ -300,22 +279,16 @@ import { VerificationCommand } from './verification.command';
 @SlashCommandHandler(VerificationCommand)
 export class VerificationCommandHandler {
   constructor(
-    private readonly context: ContextService,
-    private readonly buttons: ButtonService,
-  ) {}
+    private readonly context: ContextService, private readonly buttons: ButtonService, ) {}
 
   async handle(@Ctx() interaction: ChatInputCommandInteraction): Promise<void> {
     const ctx = await this.context.create(
-      { userId: interaction.user.id },
-      { ttl: 300, restrictedTo: interaction.user.id },
-    );
+      { userId: interaction.user.id }, { ttl: 300, restrictedTo: interaction.user.id }, );
 
     const row = this.buttons.rowWithContext(ctx, VerifyButton);
 
     await interaction.reply({
-      content: 'Click the button to verify your identity.',
-      components: [row],
-    });
+      content: 'Click the button to verify your identity.', components: [row], });
   }
 }
 ```

en/components/components-embeds.mdx

@@ -23,12 +23,7 @@ The simplest embed uses the *@Embed* class decorator with a static schema. This
 import { Embed } from '@spraxium/components';
 
 @Embed({
-  title: 'Welcome',
-  description: 'Welcome to the server! Please read the rules.',
-  color: 0x5865F2,
-  footer: { text: 'Spraxium Bot' },
-  timestamp: true,
-})
+  title: 'Welcome', description: 'Welcome to the server! Please read the rules.', color: 0x5865F2, footer: { text: 'Spraxium Bot' }, timestamp: true, })
 export class WelcomeEmbed {}
 ```
 
@@ -63,10 +58,7 @@ export class UserProfileEmbed {
   level!: never;
 
   @EmbedField<ProfileData>({
-    name: 'Status',
-    value: (data) => (data.isPremium ? '⭐ Premium' : 'Free'),
-    inline: true,
-  })
+    name: 'Status', value: (data) => (data.isPremium ? '⭐ Premium' : 'Free'), inline: true, })
   status!: never;
 
   @EmbedFooter<ProfileData>((data) => ({ text: `ID: ${data.username}` }))
@@ -216,15 +208,13 @@ export class PremiumProfileEmbed {
 
   @EmbedWhen<ProfileData>((d) => d.isPremium)
   @EmbedField<ProfileData>({
-    name: 'Premium Since',
-    value: (d) => d.premiumSince ?? 'Unknown',
-  })
+    name: 'Premium Since', value: (d) => d.premiumSince ?? 'Unknown', })
   premiumField!: never;
 }
 ```
 
 <Callout type="warning">
-  Always apply *@EmbedWhen* before *@EmbedField* on the same property. The decorator stacking order matters — if the predicate returns false, the field metadata is skipped entirely during rendering.
+  Always apply *@EmbedWhen* before *@EmbedField* on the same property. The decorator stacking order matters, if the predicate returns false, the field metadata is skipped entirely during rendering.
 </Callout>
 
 ## DescriptionBuilder
@@ -287,11 +277,7 @@ export class ProfileCommandHandler {
 
   async handle(@Ctx() interaction: ChatInputCommandInteraction): Promise<void> {
     const profileData = {
-      username: interaction.user.username,
-      level: 42,
-      isPremium: true,
-      avatarUrl: interaction.user.displayAvatarURL(),
-    };
+      username: interaction.user.username, level: 42, isPremium: true, avatarUrl: interaction.user.displayAvatarURL(), };
 
     const embed = this.embeds.build(UserProfileEmbed, profileData);
     await interaction.reply({ embeds: [embed] });
@@ -308,8 +294,7 @@ import { Module } from '@spraxium/common';
 import { ProfileCommand } from './commands/profile.command';
 
 @Module({
-  commands: [ProfileCommand],
-})
+  commands: [ProfileCommand], })
 export class ProfileModule {}
 ```