### Start Development Server

Source: https://github.com/xatomteam/docs/blob/main/build/guide/Installation/index.html

Commands to launch a local development server for real-time previews of changes. Requires being in the project directory.

```bash
npm run start
```

```bash
yarn start
```

```bash
pnpm start
```

--------------------------------

### xatom.json Configuration Example

Source: https://github.com/xatomteam/docs/blob/main/build/guide/Installation/index.html

An example of the xAtom configuration file, used to specify Webflow project details and local serving port.

```json
{
  "webflowProject": "your-webflow-project-id",
  "port": 3000
}
```

--------------------------------

### Run Development Server

Source: https://github.com/xatomteam/docs/blob/main/guide/Installation.mdx

Commands to start the local development server for xAtom projects. This allows for real-time previews of changes.

```bash
npm run start
```

```bash
yarn start
```

```bash
pnpm start
```

--------------------------------

### Create xAtom App

Source: https://github.com/xatomteam/docs/blob/main/build/guide/Installation/index.html

Commands to create a new xAtom project using different package managers.

```bash
npx create-xatom-app my-site
```

```bash
yarn create xatom-app my-site
```

```bash
pnpm create xatom-app my-site
```

--------------------------------

### Build for Production

Source: https://github.com/xatomteam/docs/blob/main/build/guide/Installation/index.html

Commands to generate production-ready, bundled, and optimized code for deployment. Requires being in the project directory.

```bash
npm run build
```

```bash
yarn build
```

```bash
pnpm build
```

--------------------------------

### Project Structure Overview

Source: https://github.com/xatomteam/docs/blob/main/build/guide/Installation/index.html

Details the key directories and files within the xAtom project, explaining their purpose in the development and build process.

```text
/dist/: Production-ready, minified, and transpiled JavaScript code.
/src/: Source directory housing TypeScript files.
/src/modules/: For organizing business logic modules.
/src/routes/: For defining application routes and paths.
/src/app.js: Application entry point.
/package.json: Manages npm packages.
/README.md: Project handbook and documentation.
/tsconfig.json: TypeScript configuration.
/xatom.json: xAtom specific configuration.
```

--------------------------------

### Build for Production

Source: https://github.com/xatomteam/docs/blob/main/guide/Installation.mdx

Commands to build the xAtom application for production. This process bundles and optimizes the code for deployment.

```bash
npm run build
```

```bash
yarn build
```

```bash
pnpm build
```

--------------------------------

### xAtom Project Structure

Source: https://github.com/xatomteam/docs/blob/main/build/guide/Installation/index.html

The typical directory and file structure generated for a new xAtom project.

```bash
my-site
├── node_modules
├── dist
├── src
│   ├── modules
│   │   └── index.ts
│   ├── routes
│   │   └── index.ts
│   ├── app.ts
├── package.json
├── README.md
├── tsconfig.json
└── xatom.json
```

--------------------------------

### Create xAtom Project

Source: https://github.com/xatomteam/docs/blob/main/guide/Installation.mdx

Commands to create a new xAtom project using different package managers (npm, yarn, pnpm). This initializes a new project with the specified name.

```bash
npx create-xatom-app my-site
```

```bash
yarn create xatom-app my-site
```

```bash
pnpm create xatom-app my-site
```

--------------------------------

### Start Local Development Server

Source: https://github.com/xatomteam/docs/blob/main/README.md

Starts a local development server for live previewing changes. Changes are reflected without server restart.

```bash
$ yarn start
```

--------------------------------

### Install Dependencies

Source: https://github.com/xatomteam/docs/blob/main/README.md

Installs project dependencies using Yarn.

```bash
$ yarn
```

--------------------------------

### Initialize and Use WFNav

Source: https://github.com/xatomteam/docs/blob/main/guide/reference/components/WFNav.mdx

Example demonstrating the initialization of WFNav, listening to nav state changes, and toggling the menu with a button click.

```typescript
import { WFNav } from "@xatom/nav";
import { onReady, WFComponent } from "@xatom/core";

// Wait until the webflow page has loaded
onReady(() => {
  // Initialize WFNav
  const nav = new WFNav(".w-nav");

  // Initialize WFComponent for the button on the page
  const button = new WFComponent(".button-on-page");

  // Listen to the state of the nav menu
  nav.onNavStateChange((isOpen) => {
    console.log("Is navbar opened:", isOpen);
  });

  // On button click, toggle nav menu
  button.on("click", () => {
    nav.toggle();
  });
});
```

--------------------------------

### Install @xatom/nav Package

Source: https://github.com/xatomteam/docs/blob/main/guide/reference/components/WFNav.mdx

Instructions for installing the @xatom/nav package using npm, yarn, or pnpm.

```bash
npm install @xatom/nav
```

```bash
yarn add @xatom/nav
```

```bash
pnpm add @xatom/nav
```

--------------------------------

### Install @xatom/image Package

Source: https://github.com/xatomteam/docs/blob/main/guide/reference/components/WFImage.mdx

Instructions for installing the @xatom/image package using npm, yarn, or pnpm.

```bash
npm install @xatom/image
```

```bash
yarn add @xatom/image
```

```bash
pnpm add @xatom/image
```

--------------------------------

### Install @xatom/tabs Package

Source: https://github.com/xatomteam/docs/blob/main/guide/reference/components/WFTabs.mdx

Instructions for installing the @xatom/tabs package using npm, yarn, or pnpm.

```bash
npm install @xatom/slider
```

```bash
yarn add @xatom/slider
```

```bash
pnpm add @xatom/slider
```

--------------------------------

### Install @xatom/slider Package

Source: https://github.com/xatomteam/docs/blob/main/guide/reference/components/WFSlider.mdx

Instructions for installing the @xatom/slider package using npm, yarn, or pnpm.

```bash
npm install @xatom/slider
```

```bash
yarn add @xatom/slider
```

```bash
pnpm add @xatom/slider
```

--------------------------------

### Install @xatom/cmslist Package

Source: https://github.com/xatomteam/docs/blob/main/guide/reference/components/WFCMSList.mdx

Instructions for installing the @xatom/cmslist package using npm, yarn, or pnpm.

```bash
npm install @xatom/cmslist
```

```bash
yarn add @xatom/cmslist
```

```bash
pnpm add @xatom/cmslist
```

--------------------------------

### WFComponent Initialization Examples

Source: https://github.com/xatomteam/docs/blob/main/build/guide/reference/components/WFComponent/index.html

Demonstrates initializing WFComponent using various CSS selectors and leveraging TypeScript for type safety.

```javascript
const buttonA = new WFComponent("#button");
const buttonB = new WFComponent(".button");
const buttonC = new WFComponent(`[xa-type="button"]`);
const buttonD = new WFComponent(".buttons > button");
```

```typescript
const container = new WFComponent<HTMLDivElement>(`.mydiv`);
```

--------------------------------

### Install @xatom/image Package

Source: https://github.com/xatomteam/docs/blob/main/build/guide/reference/components/WFImage/index.html

Instructions for installing the @xatom/image package using different package managers.

```bash
npm install @xatom/image
```

```bash
yarn add @xatom/image
```

```bash
pnpm add @xatom/image
```

--------------------------------

### xAtom Configuration File Example

Source: https://github.com/xatomteam/docs/blob/main/build/guide/Configuration/index.html

An example of the `xatom.json` configuration file. This file defines essential settings for an xAtom project, including Webflow subdomain, development server port, source and distribution directories, and script management.

```json
{
  "webflowSubdomain": "YOUR_WEBFLOW_SUBDOMAIN",
  "port": 3020,
  "source": "./src/app.ts",
  "dist": "./dist",
  "scriptList": ["app.js"],
  "scriptAttribute": "xa-script"
}
```

--------------------------------

### Initialize and Use WFTabs

Source: https://github.com/xatomteam/docs/blob/main/guide/reference/components/WFTabs.mdx

Example demonstrating the initialization of WFTabs and WFComponent, adding a new tab, navigating to a tab by index, and listening for tab change events.

```typescript
import { WFTabs } from "@xatom/tabs";
import { onReady, WFComponent } from "@xatom/core";

// Wait until the webflow page has loaded
onReady(() => {
  // Initialize WFTabs
  const tabs = new WFTabs(".tabs");
  const myButton = new WFComponent(".my-button");
  // Initialize WFComponent for the menu item
  const menuItem = new WFComponent(".menu-item");

  // Initialize WFComponent for the panel item
  const panelItem = new WFComponent(".panel-item");

  // Add a new tab
  tabs.addTab({
    menuItem: menuItem,
    panelItem: panelItem,
    index: 0,
  });

  // Handle button click to navigate to the tab by index
  myButton.on("click", () => {
    tabs.goToTabByIndex(2);
  });

  // Listen for tabs change events
  tabs.onTabChange((index) => {
    console.log(index);
  });
});
```

--------------------------------

### Initialize and Use WFNav

Source: https://github.com/xatomteam/docs/blob/main/build/guide/reference/components/WFNav/index.html

Example demonstrating how to initialize WFNav, toggle the menu, and listen for state changes. It also shows integration with WFComponent.

```javascript
import { WFNav } from "@xatom/nav";
import { onReady, WFComponent } from "@xatom/core";

// Wait until the webflow page has loaded
onReady(() => {
  // Initialize WFNav
  const nav = new WFNav(".w-nav");

  // Initialize WFComponent for the button on the page
  const button = new WFComponent(".button-on-page");

  // Listen to the state of the nav menu
  nav.onNavStateChange((isOpen) => {
    console.log("Is navbar opened:", isOpen);
  });

  // On button click, toggle nav menu
  button.on("click", () => {
    nav.toggle();
  });
});
```

--------------------------------

### Install XAtom CMSList

Source: https://github.com/xatomteam/docs/blob/main/build/guide/reference/components/WFCMSList/index.html

Instructions for installing the @xatom/cmslist package using different package managers.

```bash
npm install @xatom/cmslist
```

```bash
yarn add @xatom/cmslist
```

```bash
pnpm add @xatom/cmslist
```

--------------------------------

### Install @xatom/nav Package

Source: https://github.com/xatomteam/docs/blob/main/build/guide/reference/components/WFNav/index.html

Instructions for installing the @xatom/nav package using npm, yarn, and pnpm.

```bash
npm install @xatom/nav
```

```bash
yarn add @xatom/nav
```

```bash
pnpm add @xatom/nav
```

--------------------------------

### Install @xatom/tabs Package

Source: https://github.com/xatomteam/docs/blob/main/build/guide/reference/components/WFTabs/index.html

Instructions for installing the @xatom/tabs package using npm, yarn, and pnpm.

```npm
npm install @xatom/tabs
```

```yarn
yarn add @xatom/tabs
```

```pnpm
pnpm add @xatom/tabs
```

--------------------------------

### Install @xatom/slider Package

Source: https://github.com/xatomteam/docs/blob/main/build/guide/reference/components/WFSlider/index.html

Instructions for installing the @xatom/slider package using npm, yarn, and pnpm.

```bash
npm install @xatom/slider
```

```bash
yarn add @xatom/slider
```

```bash
pnpm add @xatom/slider
```

--------------------------------

### WFInvisibleForm Initialization and Submission Example

Source: https://github.com/xatomteam/docs/blob/main/guide/reference/components/WFInvisibleForm.mdx

Demonstrates how to initialize WFInvisibleForm, set form data, and handle submission events (success and error) before submitting the form.

```typescript
import { WFInvisibleForm } from "@xatom/core";

// Initialize a new instance of WFInvisibleForm with form name
const invisibleForm = new WFInvisibleForm("My Form Name");

// Define your form data as an object
const formData = {
  fullname: "John Doe",
  email: "john@doe.com",
};

// Set form data
invisibleForm.setFormData(formData);

// Listen for successful form submissions
invisibleForm.onSuccess(() => {
  console.log("Form submission is successful");
});

// Listen for failed form submissions
invisibleForm.onError(() => {
  console.log("Form submission has encountered an error");
});

// Submit the form
invisibleForm.submitForm();
```

--------------------------------

### WFSlider Initialization and Usage Example

Source: https://github.com/xatomteam/docs/blob/main/guide/reference/components/WFSlider.mdx

Demonstrates how to initialize WFSlider, add/remove slides, navigate, and handle slide change events within an xAtom project.

```typescript
import { WFSlider } from "@xatom/slider";
import { onReady, WFComponent } from "@xatom/core";

// Wait until the webflow page has loaded
onReady(() => {
  // Initialize WFSlider
  const slider = new WFSlider(".slider");
  const myButton = new WFComponent(".my-button");
  const cmsItem = new WFComponent(".item");

  // Add a slide to the slider
  slider.addSlide(cmsItem);

  // Remove the first slide from the slider
  slider.removeSlide(0);

  // Handle button click to navigate to the next slide
  myButton.on("click", () => {
    slider.goNext();
  });
  
  // Listen for slide change events
  slider.onSlideChange((activeIndex, prevIndex) => {
    console.log(activeIndex, prevIndex);
  });

  // Configure the slider for infinite scrolling
  slider.getConfig().config.infinite = true;
});
```

--------------------------------

### Apollo Client Setup

Source: https://github.com/xatomteam/docs/blob/main/guide/reference/services/GraphQLClient.mdx

Demonstrates how to initialize and configure the Apollo Client with a GraphQL endpoint. This includes setting up the HttpLink and InMemoryCache.

```javascript
import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';

const client = new ApolloClient({
  link: new HttpLink({
    uri: 'https://your-graphql-endpoint.com/graphql',
  }),
  cache: new InMemoryCache(),
});

export default client;
```

--------------------------------

### Install @xatom/axios Package

Source: https://github.com/xatomteam/docs/blob/main/guide/reference/services/RESTAPIClient.mdx

Instructions for installing the @xatom/axios package using npm, yarn, or pnpm.

```bash
npm install @xatom/axios
```

```bash
yarn add @xatom/axios
```

```bash
pnpm add @xatom/axios
```

--------------------------------

### Install Axios Client

Source: https://github.com/xatomteam/docs/blob/main/build/guide/reference/services/RESTAPIClient/index.html

Instructions for installing the @xatom/axios package using npm, yarn, or pnpm.

```bash
npm install @xatom/axios
```

```bash
yarn add @xatom/axios
```

```bash
pnpm add @xatom/axios
```

--------------------------------

### WFImage getImageConfig Method Example

Source: https://github.com/xatomteam/docs/blob/main/guide/reference/components/WFImage.mdx

Demonstrates retrieving the current image configuration using the `getImageConfig` method after setting it with `setImage`.

```typescript
// Initialize a WFImage instance with the specified selector
const img = new WFImage(".img");

// Set the image URL
img.setImage("https://picsum.photos/id/237/200/300");

console.log(img.getImageConfig()); // Output: https://picsum.photos/id/237/200/300
```

--------------------------------

### WFImage Initialization and Usage Example

Source: https://github.com/xatomteam/docs/blob/main/guide/reference/components/WFImage.mdx

Demonstrates initializing WFImage, listening for image load events, setting image sources (simple URL and advanced configuration), and handling multiple WFImage instances.

```typescript
import { WFImage } from "@xatom/image";
import { onReady } from "@xatom/core";

// Wait until the webflow page has been loaded
onReady(() => {
  // Initialize WFImage
  const img = new WFImage(".img");

  // Listen for when the image has been loaded
  img.onLoad(() => {
    console.log("Image is loaded");
  });

  // Set the image source
  img.setImage("https://picsum.photos/id/237/200/300");

  // Initialize another WFImage
  const anotherImg = new WFImage(".other-img");

  // Listen for when the image has been loaded
  anotherImg.onLoad(() => {
    console.log("Image is loaded");
  });

  // Advance image source configuration
  anotherImg.setImage({
    src: "https://picsum.photos/id/237/800/800",
    loading: "lazy",
    sizes: "(max-width: 642px) 100vw, 642px",
    srcSet: [
      {
        size: "500w",
        url: "https://picsum.photos/id/237/500/500",
      },
      {
        size: "642w",
        url: "https://picsum.photos/id/237/800/800",
      },
    ],
  });
});
```

--------------------------------

### tsconfig.json Configuration

Source: https://github.com/xatomteam/docs/blob/main/build/guide/Installation/index.html

The TypeScript configuration file for the xAtom project, providing essential settings for TypeScript compilation.

```json
{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}
```

--------------------------------

### Get Form Data Example

Source: https://github.com/xatomteam/docs/blob/main/guide/reference/components/WFInvisibleForm.mdx

Demonstrates how to retrieve the form data that will be submitted to Webflow using the `getFormData()` method.

```typescript
const invisibleForm = new WFInvisibleForm({
  fullname: "John Doe",
  email: "john@doe.com",
});

const formData = invisibleForm.getFormData();
console.log(formData);
```

--------------------------------

### WFInvisibleForm Get Form Name Example

Source: https://github.com/xatomteam/docs/blob/main/guide/reference/components/WFInvisibleForm.mdx

Demonstrates how to retrieve the currently set form name using the `getFormName` method.

```typescript
// Initialize a new instance of WFInvisibleForm
const invisibleForm = new WFInvisibleForm<{ 
  fullname: string;
  email: string;
}>();

// Set the form name
invisibleForm.setFormName("Newsletter Form");

// Get the form name
const formName = invisibleForm.getFormName();
console.log(formName); // Newsletter Form
```

--------------------------------

### Get Webflow Object Example

Source: https://github.com/xatomteam/docs/blob/main/build/guide/reference/components/WFNav/index.html

Demonstrates how to initialize the WFNav class and retrieve the Webflow `.wNav` jQuery object.

```javascript
const nav = new WFNav(".w-nav");
const wNavConfig = nav.getWebflowObject();
console.log(wNavConfig);
```

--------------------------------

### Build Static Website

Source: https://github.com/xatomteam/docs/blob/main/README.md

Generates the static website content into the 'build' directory, ready for hosting.

```bash
$ yarn build
```

--------------------------------

### Initialize and Use AxiosClient

Source: https://github.com/xatomteam/docs/blob/main/build/guide/reference/services/RESTAPIClient/index.html

Example of initializing AxiosClientConfigurator and AxiosClient, making a GET request, and handling loading, data, and error events.

```javascript
import {  AxiosClient,  AxiosClientConfigurator,} from "@xatom/axios";
import { onReady } from "@xatom/core";

// Configure the base URL for your API
const axiosConfigurator = new AxiosClientConfigurator(
  "https://your-api-base-url.com"
);
const axiosClient = new AxiosClient(axiosConfigurator);

onReady(() => {
  // Define an API request to get users with pagination
  const getUsers = axiosClient.get<MyUserType>("/users?page=2");

  // Listen to loading state changes
  getUsers.onLoadingChange((status) => {
    console.log("Is loading:", status); // true or false
  });

  // Listen to successful response
  getUsers.onData((data) => {
    console.log("Response:", data);
  });

  // Listen to errors
  getUsers.onError((error) => {
    console.error("Error:", error);
  });

  // Initiate the API request
  getUsers.fetch();
});
```

--------------------------------

### AxiosClient Initialization and Usage Example

Source: https://github.com/xatomteam/docs/blob/main/guide/reference/services/RESTAPIClient.mdx

Demonstrates how to initialize AxiosClientConfigurator and AxiosClient, make a GET request to fetch users with pagination, and listen to loading, data, and error states.

```typescript
import {
  AxiosClient,
  AxiosClientConfigurator,
} from "@xatom/axios";
import { onReady } from "@xatom/core";

// Configure the base URL for your API
const axiosConfigurator = new AxiosClientConfigurator(
  "https://your-api-base-url.com"
);

const axiosClient = new AxiosClient(axiosConfigurator);

onReady(() => {
  // Define an API request to get users with pagination
  const getUsers = axiosClient.get<MyUserType>("/users?page=2");

  // Listen to loading state changes
  getUsers.onLoadingChange((status) => {
    console.log("Is loading:", status); // true or false
  });

  // Listen to successful response
  getUsers.onData((data) => {
    console.log("Response:", data);
  });

  // Listen to errors
  getUsers.onError((error) => {
    console.error("Error:", error);
  });

  // Initiate the API request
  getUsers.fetch();
});
```

--------------------------------

### WFTabs Initialization and Usage Example

Source: https://github.com/xatomteam/docs/blob/main/build/guide/reference/components/WFTabs/index.html

Demonstrates how to initialize WFTabs, add new tabs, navigate between them, and listen for tab change events. It also shows integration with WFComponent for handling clicks and managing menu/panel items.

```javascript
import { WFTabs } from "@xatom/tabs";
import { onReady, WFComponent } from "@xatom/core";

// Wait until the webflow page has loaded
onReady(() => {
  // Initialize WFTabs
  const tabs = new WFTabs(".tabs");
  const myButton = new WFComponent(".my-button");
  // Initialize WFComponent for the menu item
  const menuItem = new WFComponent(".menu-item");
  // Initialize WFComponent for the panel item
  const panelItem = new WFComponent(".panel-item");

  // Add a new tab
  tabs.addTab({
    menuItem: menuItem,
    panelItem: panelItem,
    index: 0,
  });

  // Handle button click to navigate to the tab by index
  myButton.on("click", () => {
    tabs.goToTabByIndex(2);
  });

  // Listen for tabs change events
  tabs.onTabChange((index) => {
    console.log(index);
  });
});
```

--------------------------------

### Making HTTP Requests with AxiosClient

Source: https://github.com/xatomteam/docs/blob/main/build/guide/reference/services/RESTAPIClient/index.html

Demonstrates how to use the `AxiosClient` to perform various HTTP requests. It shows examples for GET, POST, PATCH, PUT, and DELETE methods, including how to pass endpoint paths and request data.

```javascript
const axiosClient = new AxiosClient(axiosConfigurator);

// GET request
const getUser = axiosClient.get("/user", { id: 1 });

// POST request
const postUser = axiosClient.post("/create/user", {
  fullName: "John doe",
  age: 21,
});

// PATCH request
const patchUser = axiosClient.patch("/user", { id: 1, age: 22 });

// PUT request
const putUser = axiosClient.put("/user", {
  id: 1,
  bio: "I ❤️ xAtom",
});

// DELETE request
const deleteUser = axiosClient.delete("/user", { id: 1 });
```

--------------------------------

### Basic WFRoute Initialization and Execution

Source: https://github.com/xatomteam/docs/blob/main/guide/reference/routing/WFRoute.mdx

Demonstrates how to create and execute basic routes using the WFRoute class. Includes examples for simple paths, routes with URL parameters, grouping routes with regex, and using variable routes with dynamic segments.

```typescript
import { WFRoute } from "@xatom/core";
import { settingPage } from "../modules/setting";

// Define a simple route for sign-up page
new WFRoute("/sign-up").execute(() => {
  // Execute your logic for /sign-up
});

// Create routes with URL parameters, such as the invite page with a token parameter
// URL: /invite?token=XYZ
new WFRoute("/invite").execute((params: { token: string }) => {
  // Execute your logic for /invite
  console.log(params.token); // XYZ
});

// Group your routes using (.*) expressions to manage all routes under /dashboard
new WFRoute("/dashboard/(.*)").execute(() => {
  // Handle child routes

  // Create a route for the profile page
  new WFRoute("/dashboard/profile").execute(() => {
    // Define logic for your profile page
  });

  // Execute logic from an imported function for the /dashboard/settings route
  new WFRoute("/dashboard/settings").execute(settingPage);
});

// Utilize variable routes to apply a single business logic to all blog posts
// Example URL: /blogs/how-get-started
new WFRoute("/blogs/:post").execute(
  (params: { post: string }) => {
    // Execute logic for your post page
    console.log(params.post); // how-get-started
  }
);
```

--------------------------------

### xAtom API Reference - Utilities

Source: https://github.com/xatomteam/docs/blob/main/build/guide/reference/Overview/index.html

Utility APIs for common development tasks. onReady executes code when the site loads. navigate facilitates programmatic navigation. createComponent is used for dynamic component creation.

```APIDOC
onReady:
  Description: Executes code precisely when the Webflow site loads.
  Usage:
    onReady(() => {
      // Your code here
    });

navigate:
  Description: Facilitates programmatic navigation.
  Usage:
    navigate('/your-page');

createComponent:
  Description: API for dynamic component creation.
  Usage:
    createComponent('YourComponentName', { props });
```

--------------------------------

### WFAuthMiddleware Initialization and Usage

Source: https://github.com/xatomteam/docs/blob/main/guide/reference/auth/WFAuthMiddleware.mdx

Demonstrates how to initialize WFAuth and WFAuthMiddleware, set user roles and information, and apply middleware to a WFRoute for access control.

```typescript
import { WFAuth, WFAuthMiddleware, WFRoute } from "@xatom/core";

// Initialize the WFAuth instance with user data, roles, and configuration
const userAuth = new WFAuth<
  {
    fullName: string;
    email: string;
  },
  "GUEST" | "USER",
  {
    token: string;
  }
>();

// Set the default role after initialization
userAuth.setRole("USER");

// Set user information
userAuth.setUser({
  fullName: "John Doe",
  email: "john@doe.com",
});

// Create a userMiddleware instance with the WFAuth instance
const userMiddleware = new WFAuthMiddleware(userAuth);

// Define a WFRoute that allows only non-logged-in users to access the sign-up page
new WFRoute("/sign-up")
  .withMiddleware(userMiddleware, "GUEST", "allow", {
    onError: () => {
      // If the user's role is not guest, navigate to the dashboard
      window.location = "/dashboard";
    },
  })
  .execute(() => {
    // Execute your logic for /sign-up
  });
```

--------------------------------

### WFAuthMiddleware Syntax

Source: https://github.com/xatomteam/docs/blob/main/guide/reference/auth/WFAuthMiddleware.mdx

Provides the syntax for initializing the WFAuthMiddleware class.

```APIDOC
WFAuthMiddleware(auth:WFAuth);
```

--------------------------------

### Deploy Website

Source: https://github.com/xatomteam/docs/blob/main/README.md

Deploys the website, typically to GitHub Pages. Supports deployment with or without SSH.

```bash
$ USE_SSH=true yarn deploy
```

```bash
$ GIT_USER=<Your GitHub username> yarn deploy
```

--------------------------------

### WFComponent Initialization with Various Selectors

Source: https://github.com/xatomteam/docs/blob/main/guide/reference/components/WFComponent.mdx

Illustrates different ways to initialize WFComponent using various CSS selectors and demonstrates TypeScript type support for specific element types.

```typescript
// Initialize WFComponent using different selectors
const buttonA = new WFComponent("#button");
const buttonB = new WFComponent(".button");
const buttonC = new WFComponent(`[xa-type="button"]`);
const buttonD = new WFComponent(".buttons > button");
// Benefit from TypeScript type support
const container = new WFComponent<HTMLDivElement>(`.mydiv`);
```

--------------------------------

### WFImage Initialization and Usage

Source: https://github.com/xatomteam/docs/blob/main/build/guide/reference/components/WFImage/index.html

Demonstrates how to initialize WFImage, set image sources, and handle image loading events.

```javascript
import { WFImage } from "@xatom/image";
import { onReady } from "@xatom/core";

// Wait until the webflow page has been loaded
onReady(() => {
  // Initialize WFImage
  const img = new WFImage(".img");

  // Listen for when the image has been loaded
  img.onLoad(() => {
    console.log("Image is loaded");
  });

  // Set the image source
  img.setImage("https://picsum.photos/id/237/200/300");

  // Initialize another WFImage
  const anotherImg = new WFImage(".other-img");

  // Listen for when the image has been loaded
  anotherImg.onLoad(() => {
    console.log("Image is loaded");
  });

  // Advance image source configuration
  anotherImg.setImage({
    src: "https://picsum.photos/id/237/800/800",
    loading: "lazy",
    sizes: "(max-width: 642px) 100vw, 642px",
    srcSet: [
      {
        size: "500w",
        url: "https://picsum.photos/id/237/500/500",
      },
      {
        size: "642w",
        url: "https://picsum.photos/id/237/800/800",
      },
    ],
  });
});
```

--------------------------------

### WFCMSList Integration Example

Source: https://github.com/xatomteam/docs/blob/main/build/guide/reference/components/WFCMSList/index.html

Example demonstrating the integration of WFCMSList into an xAtom project, including item manipulation, pagination, and filtering.

```typescript
import { WFCMSList } from "@xatom/cmslist";
import { onReady, WFComponent, createComponent } from "@xatom/core";

// Wait until the webflow page has loaded
onReady(() => {
  // Initialize WFCMSList with configuration object
  const cms = new WFCMSList(".cms", {
    numberOfItemPerPage: 10,
    removeNativePaginationElements: true,
  });

  // Clone an item as a template
  const itemClone = cms.getInitialItemAsTemplate();

  // Update the text content of the cloned item
  itemClone.updateTextViaAttrVar({
    title: "Hello World",
  });

  // Create a custom item using createComponent
  const myItem = createComponent("div");
  myItem.setTextContent("Another Item");

  // Wait for all collection items to be fetched
  cms.onAllCollectionItemsReady(() => {
    // Add the cloned item and the custom item to the CMS list
    cms.addItem(itemClone, 0); // Add to zeroth index
    cms.addItem(myItem, 1); // Add to first index
  });

  // Initialize WFComponent for the next button
  const nextBtn = new WFComponent(".next-btn");
  // Event listener for the next button to navigate to the next page
  nextBtn.on("click", () => {
    cms.goToNextPageIndex();
  });

  // Initialize WFComponent for the filter button
  const filterBtn = new WFComponent(".filter-btn");
  // Event listener for the filter button to apply a filter and render the list
  filterBtn.on("click", () => {
    cms.setFilterSortConfig({
      filter: (item, dataset) => {
        return dataset.title.includes("Hello");
      },
    });
    cms.goToPageIndex(0);
    cms.forceRenderList();
  });

  // Initialize WFComponent for the reset button
  const resetBtn = new WFComponent(".reset-btn");
  // Event listener for the reset button to clear the filter and render the list
  resetBtn.on("click", () => {
    cms.setFilterSortConfig({});
    cms.goToPageIndex(0);
    cms.forceRenderList();
  });
});

```

--------------------------------

### MDX Code Block Example

Source: https://github.com/xatomteam/docs/blob/main/guide/reference/Overview.mdx

An example of an MDX code block used for importing components, specifically DocCardList, which is utilized for organizing documentation.

```mdx
import DocCardList from '@theme/DocCardList';
```

--------------------------------

### JavaScript WFTabs Usage Example

Source: https://github.com/xatomteam/docs/blob/main/build/guide/reference/components/WFTabs/index.html

Demonstrates the initialization and basic usage of the WFTabs class in JavaScript, including adding a tab with associated menu and panel components.

```javascript
const tabs = new WFTabs('.tabs');
const menuItem = new WFComponent('.menu-item');
const panelItem = new WFComponent('.panel-item');

tabs.addTab({
    menuItem: menuItem,
    panelItem: panelItem,
});
```

--------------------------------

### Get Content Container

Source: https://github.com/xatomteam/docs/blob/main/build/guide/reference/components/WFTabs/index.html

Retrieves the container element that holds all the tab content panels.

```javascript
const tabs = new WFTabs(".tabs");
const contentContainer = tabs.getContentContainer();
console.log(contentContainer);
```

--------------------------------

### Get Menu Container

Source: https://github.com/xatomteam/docs/blob/main/build/guide/reference/components/WFTabs/index.html

Retrieves the container element that holds all the tab menu items.

```javascript
const tabs = new WFTabs(".tabs");
const menuContainer = tabs.getMenuContainer();
console.log(menuContainer);
```

--------------------------------

### Get Initial Item Template

Source: https://github.com/xatomteam/docs/blob/main/build/guide/reference/components/WFCMSList/index.html

Illustrates how to obtain a template of the first item in the collection list.

```javascript
const list = new WFCMSList(".cms");
const itemTemplate = list.getInitialItemAsTemplate();
```

--------------------------------

### Get Active Panel

Source: https://github.com/xatomteam/docs/blob/main/build/guide/reference/components/WFTabs/index.html

Retrieves the currently active panel component within the WFTabs instance.

```javascript
const tabs = new WFTabs(".tabs");
const activePanel = tabs.getActivePanel();
console.log(activePanel);
```

--------------------------------

### WFAuthMiddleware Initialization and Usage

Source: https://github.com/xatomteam/docs/blob/main/build/guide/reference/auth/WFAuthMiddleware/index.html

Demonstrates how to initialize WFAuth and WFAuthMiddleware, and then use WFAuthMiddleware to protect a WFRoute based on user roles. It shows how to set user data, roles, and handle errors when access is denied.

```javascript
import { WFAuth, WFAuthMiddleware, WFRoute } from "@xatom/core";

// Initialize the WFAuth instance with user data, roles, and configuration
const userAuth = new WFAuth<
  {
    fullName: string;
    email: string;
  },
  "GUEST" | "USER",
  {
    token: string;
  }
>();

// Set the default role after initialization
userAuth.setRole("USER");

// Set user information
userAuth.setUser({
  fullName: "John Doe",
  email: "john@doe.com",
});

// Create a userMiddleware instance with the WFAuth instance
const userMiddleware = new WFAuthMiddleware(userAuth);

// Define a WFRoute that allows only non-logged-in users to access the sign-up page
new WFRoute("/sign-up")
  .withMiddleware(userMiddleware, "GUEST", "allow", {
    onError: () => {
      // If the user's role is not guest, navigate to the dashboard
      window.location = "/dashboard";
    },
  })
  .execute(() => {
    // Execute your logic for /sign-up
  });
```

--------------------------------

### Initialize and Get Current Page Index

Source: https://github.com/xatomteam/docs/blob/main/build/guide/reference/components/WFCMSList/index.html

Demonstrates how to initialize the WFCMSList and retrieve the index of the current page.

```javascript
const list = new WFCMSList(".cms");
const currentPageIndex = list.getCurrentPageIndex();
console.log("Current page index:", currentPageIndex);
```

--------------------------------

### WFInvisibleForm Set Form Data Example

Source: https://github.com/xatomteam/docs/blob/main/guide/reference/components/WFInvisibleForm.mdx

Shows how to populate the invisible form with data using the `setFormData` method.

```typescript
// Initialize a new instance of WFInvisibleForm
const invisibleForm = new WFInvisibleForm<{ 
  fullname: string;
  email: string;
}>("Newsletter Form");

// Set the form data
invisibleForm.setFormData({
  fullname: "John Doe",
  email: "john@doe.com",
});
```

--------------------------------

### Utility APIs

Source: https://github.com/xatomteam/docs/blob/main/guide/reference/Overview.mdx

Utility functions for common development tasks. 'onReady' executes code upon site load, 'navigate' handles programmatic navigation, and 'createComponent' is used for dynamic component creation.

```APIDOC
onReady:
  Description: Executes a callback function precisely when the Webflow site has finished loading.
  Usage: onReady(() => { /* your code here */ });

navigate:
  Description: Facilitates programmatic navigation to different routes within the application.
  Usage: navigate('/path/to/page');

createComponent:
  Description: An API for dynamically creating components during runtime.
  Usage: const myComponent = createComponent('ComponentName', { props });
```

--------------------------------

### Get Active Menu Item

Source: https://github.com/xatomteam/docs/blob/main/build/guide/reference/components/WFTabs/index.html

Retrieves the currently active menu item component within the WFTabs instance.

```javascript
const tabs = new WFTabs(".tabs");
const activeMenuItem = tabs.getActiveMenuItem();
console.log(activeMenuItem);
```

--------------------------------

### WFRoute withMiddleware Method Signature

Source: https://github.com/xatomteam/docs/blob/main/guide/reference/routing/WFRoute.mdx

API documentation for the withMiddleware method of WFRoute, detailing its syntax and parameters.

```APIDOC
withMiddleware(
  middleware: WFAuthMiddleware,
  role: string,
  permission: "allow" | "disallow",
  config: { onError: () => void }
): WFRoute
  Parameters:
    middleware: An instance of WFAuthMiddleware.
    role: The role specified when initializing WFAuthMiddleware.
    permission: The middleware permission (allow or disallow).
    config: Middleware configuration, including an onError function to handle errors.
```

--------------------------------

### Submit Form Example

Source: https://github.com/xatomteam/docs/blob/main/guide/reference/components/WFInvisibleForm.mdx

Shows how to submit a form to Webflow by attaching the `submitForm()` method to a component's click event.

```typescript
const invisibleForm = new WFInvisibleForm({
  fullname: "John Doe",
  email: "john@doe.com",
});
const submitBtn = new WFComponent(".submit-btn");

submitBtn.on("click", () => {
  invisibleForm.submitForm();
});
```

--------------------------------

### WFImage Class Documentation

Source: https://github.com/xatomteam/docs/blob/main/build/guide/reference/components/WFImage/index.html

Provides details on the WFImage class for managing image properties, responsive sets, and load events. Includes initialization instructions and usage examples.

```APIDOC
WFImage:
  Description: The WFImage class allows you to manage image properties, including responsive image sets, and listen for when an image has been loaded.
  Getting Started:
    Initialization: To begin using the WFImage class in your xAtom project, you'll first need to install the `@xatom/image` package. After installation, you can initialize WFImage following the example below:
  Dependencies: @xatom/image
  Usage:
    Example:
      // Assuming you have installed the package:
      // npm install @xatom/image
      // or
      // yarn add @xatom/image
      
      import { WFImage } from '@xatom/image';
      
      // Initialize WFImage with an element or selector
      const myImage = new WFImage('#my-image-element');
      
      // You can also pass an actual DOM element:
      // const imageElement = document.getElementById('my-image-element');
      // const myImage = new WFImage(imageElement);
      
      // Listen for the image load event
      myImage.onLoad(() => {
        console.log('Image has loaded!');
      });
      
      // Set responsive image sources (example)
      myImage.setSources({
        'default': 'path/to/default.jpg',
        '2x': 'path/to/2x.jpg',
        'mobile': 'path/to/mobile.jpg'
      });
```

--------------------------------

### WFInvisibleForm Set Form Name Example

Source: https://github.com/xatomteam/docs/blob/main/guide/reference/components/WFInvisibleForm.mdx

Illustrates how to set a specific name for the invisible form using the `setFormName` method.

```typescript
// Initialize a new instance of WFInvisibleForm
const invisibleForm = new WFInvisibleForm<{ 
  fullname: string;
  email: string;
}>();

// Set the form name
invisibleForm.setFormName("Newsletter Form");
```

--------------------------------

### WFComponent Initialization with Different Selector Types

Source: https://github.com/xatomteam/docs/blob/main/guide/reference/components/WFComponent.mdx

Shows how to initialize WFComponent using a CSS selector string, an HTMLElement, or an existing WFComponent instance.

```typescript
// Example: Initialize WFComponent with a CSS selector
const myComponentBySelector = new WFComponent(".btn");

// Example: Initialize WFComponent with an HTMLElement
const myDiv = document.getElementById("myDiv");
const myComponentByElement = new WFComponent(myDiv);

// Example: Initialize WFComponent with an existing WFComponent instance
const existingComponent = new WFComponent(".existing");
const myComponentByInstance = new WFComponent(existingComponent);
```

--------------------------------

### WFImage onLoad() Method

Source: https://github.com/xatomteam/docs/blob/main/guide/reference/components/WFImage.mdx

Registers a callback function to be executed when the image loads successfully. Includes an example of setting the image source.

```typescript
const img = new WFImage(".img");

img.onLoad(() => {
  console.log("Image loaded successfully");
});

// Set the image source
img.setImage("https://picsum.photos/id/237/200/300");
```

```APIDOC
onLoad(cb: (event: Event) => void): void;
  - Registers a callback for successful image load.
  - Parameters:
    - cb: The callback function to execute on image load.
```