Wai Toolkit

Accelerate your development workflow and boost productivity by 3x. This comprehensive suite of tools streamlines coding, debugging, and deployment processes, enabling developers to work more efficiently and effectively.

Unlock your full potential with Wai Toolkit – where innovation meets efficiency.

🚀 Toolkit Actions

This helps to display the Command Line Interface (CLI) menu, providing a brief, expanded view of available options and functionalities in a concise format.

Create New Solution

The command initializes a new project with necessary structures and configurations. Access it via the command palette by typing "Create New Solution" or by clicking the node in the Development tree view. You can specify the name of the solution, choose a template, and define the target directory. Additional options allow you to force creation even if the target directory is not empty. This command simplifies the process of starting a new project by providing a ready-to-use structure.

Generate Proxy

The command creates proxies to interact with external services or APIs. This step generates backend proxies and requires the backend to be up and running for successful execution. Access it via the command palette or the Development tree view.

Create Slice File

The command facilitates the creation of slice files used for state management. It provides a GUI (Graphical User Interface) that guides the user through the process. Slice files are instrumental in structuring and managing application state, making it easier to handle data flow and application logic.

✨ New Release

Quick Notes for Files

You can now use Quick Notes inside files of Project or Custom Location to maintain personal logs or share notes . This feature is integrated into our extension, allowing you to Create and Delete Notes from Side Nav and Top Nav (using Commands) through Wai Toolkit itself.

Intellisense Capabilities using Raaghu Themes

You can now use intellisense capabilties to implement color and typography using Raaghu Themes. This feature is integrated into our extension, allowing you to type different colors and typography to get recommendation through Wai Toolkit itself.

You can now share code to Raaghu Design System and become a contributor to it directly from Visual Studio Code. This feature is integrated into our extension, allowing you to share code for newly created elements, components, layouts, charts and maps through Wai Toolkit itself. Simply click on "Share Code" on Development Section in the sidebar and select what you would like to share and a Pull Request will be automatically be created using Pundit AI Services.

Code Snippets

You can now use code snippets which provides you with code skeleton for React application. This feature is integrated into our extension, allowing you to utilise our snippets for tsx and jsx files to generate boiler plate codes for different scenarios, creating code skeleton which can be used in your project.

Snippets	Description
rfc	Stateless functional component. A simple component that does not manage state.
rtstate	Boilerplate for a functional component using `useState` and `useEffect` hooks for state management and side effects.
rtcontext	Boilerplate for a functional component utilizing React Context API and `useMemo` for optimizing context value.
clg	Console log snippet. Quickly log output to the console for debugging purposes.
imp	Generic import snippet. A placeholder for importing various modules.
imd	`import { } from 'module';` Template for named imports from a specified module.
ipt	`import PropTypes from 'prop-types';` Import statement for the PropTypes library for type-checking React props.
imr	`import React from 'react'` Standard import statement for React library.
rccp	Class component skeleton with PropTypes. Provides a basic structure for a class component, including PropTypes validation.
rfcp	Function component with PropTypes skeleton. Basic structure for a functional component with PropTypes validation.
est	Empty state object. Placeholder for initializing an empty state object in a component.
cdm	`componentDidMount` method. Lifecycle method in class components that runs after the component mounts.
scu	`shouldComponentUpdate` method. Lifecycle method to control if a component should re-render.
cdu	`componentDidUpdate` method. Lifecycle method invoked after a component updates.
cwu	`componentWillUnmount` method. Lifecycle method called before a component unmounts and is destroyed.
gsb	`getSnapshotBeforeUpdate` method. Lifecycle method to capture a snapshot of the DOM before it updates.
gds	`static getDerivedStateFromProps` method. A static lifecycle method to update state based on props.
cdc	`componentDidCatch` method. Error boundary method for catching errors in child components.
sst	`this.setState` with object as parameter. Updates component state with a new state object.
ssf	`this.setState` with function as parameter. Updates component state based on the previous state using a function.
props	`this.props` Accessor for props passed to a class component.
state	`this.state` Accessor for the state object in a class component.
bnd	Binds `this` for a method in the constructor. Ensures the correct context for a method when used as an event handler.

Story Preview

You can now preview your stories directly within Visual Studio Code. This feature is integrated into our extension, allowing you to see your stories without needing to switch applications. Simply navigate to the "Story Preview" section in the sidebar to access and manage your stories.

🕙 Coming Soon

History for API Viewer Request

Wai Toolkit

Wai-Technologies

Wai Toolkit

🚀 Toolkit Actions

Create New Solution

Generate Proxy

Create Slice File

✨ New Release

Quick Notes for Files

Intellisense Capabilities using Raaghu Themes

Share Code to Raaghu Design System

Code Snippets

Story Preview

🕙 Coming Soon