### Install Dependencies and Run Dev Server

Source: https://github.com/razorpay/blade/blob/master/packages/blade-mcp/base-blade-template/README.md

Use these commands to install project dependencies and start the development server.

```sh
npm install # to install dependencies
```

```sh
npm run dev # to run the dev server
```

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

### Motion React Installation and Setup

Source: https://github.com/razorpay/blade/blob/master/packages/blade/src/components/BaseMotion/docs/MotionIntro.mdx

This section covers the installation and setup process for Motion React. It includes an alert for users who may have already completed parts of the setup.

```javascript
import { Meta } from '@storybook/addon-docs/blocks';
import {
  Alert,
  Text,
  Accordion,
  AccordionItem,
  AccordionItemHeader,
  AccordionItemBody,
  Heading,
  Box,
  Move,
  Display,
  Divider,
} from '../../index';
import { Motion as MotionTokensTable } from '../../../../docs/tokens/Motion.mdx';
import MotionInstallation from './MotionInstallation.mdx';

import { Showcase } from './MotionIntroUtils';
import {
  FadeIntro,
  MoveIntro,
  SlideIntro,
  ScaleIntro,
  ElevateIntro,
  MorphIntro,
  StaggerIntro,
  AnimateInteractionsIntro,
} from './introExamples';

<Meta title="Motion/Introduction to Motion" />

<Move>
  <Box>
    <Display>Introduction to Motion Presets at Razorpay</Display>

    [Motion Presets RFC](https://github.com/razorpay/blade/blob/master/rfcs/2024-08-21-motion-presets.md)

    We offer several easy-to-use motion presets to simplify integrating motion in your projects. This doc is one-stop documentation for everything related to motion presets. Checkout stories of individual motion components from storybook's sidebar to learn in details about each preset.

    <Showcase />

    <Box marginTop="spacing.8" marginBottom="spacing.5">
      <Heading size="2xlarge">Motion React Installation and Setup 📚</Heading>
    </Box>

    <Alert title="Note" description="If you've followed Step 3 from our Installation Guide and already have Motion React setup, you can skip this-" isFullWidth isDismissible={false} marginBottom="spacing.5" />

    <Accordion maxWidth="100%" variant="filled" marginBottom="spacing.8">
      <AccordionItem>
        <AccordionItemHeader title="Setting Up Motion React" />

        <AccordionItemBody>
          <MotionInstallation />
        </AccordionItemBody>
      </AccordionItem>
    </Accordion>

    <Box marginTop="spacing.11" marginBottom="spacing.8">
      <Heading size="2xlarge">Motion Preset Components ✨</Heading>
    </Box>

    <Box id="fade">
      <Heading size="large">1. Fade</Heading>

      <Text marginTop="spacing.1">
        The Fade component is a motion preset that animates the opacity of its children, allowing them to smoothly appear or disappear. It ensures seamless transitions while keeping the UI visually engaging.
      </Text>

      <FadeIntro />

      <p align="right">[View Fade Documentation](/?path=/docs/motion-fade--docs)</p>
    </Box>

    <Box id="move">
      <Heading size="large">2. Move</Heading>

      <Text marginTop="spacing.1">
        The Move component is a motion preset that animates the opacity and position of its children,
        allowing them to smoothly appear or disappear. It ensures seamless transitions while keeping the
        UI visually engaging.
      </Text>

      <MoveIntro />

      <p align="right">[View Move Documentation](/?path=/docs/motion-move--docs)</p>
    </Box>

    <Box id="move">
      <Heading size="large">3. Slide</Heading>

      <Text marginTop="spacing.1">
        The Slide component is a motion preset that animates the children by sliding them in from
        outside of viewport, allowing them to smoothly appear or disappear. Unlike Move, Slide is meant
        to animate components from outside of viewport
      </Text>

      <SlideIntro />

      <p align="right">[View Slide Documentation](/?path=/docs/motion-slide--docs)</p>
    </Box>

    <Box id="scale">
      <Heading size="large">4. Scale</Heading>

      <Text marginTop="spacing.1">
        Scale component animates over CSS `scale` property and allows you to enlarge or shrink element
        on certain interactions
      </Text>

      <ScaleIntro />

      <p align="right">[View Scale Documentation](/?path=/docs/motion-scale--docs)</p>
    </Box>

    <Box id="elevate">
      <Heading size="large">5. Elevate</Heading>

      <Text marginTop="spacing.1">
        Elevate component animates over CSS `box-shadow` property and allows you to highlight components
        by adding shadows to it
      </Text>

      <ElevateIntro />

      <p align="right">[View Elevate Documentation](/?path=/docs/motion-elevate--docs)</p>
    </Box>

    <Box id="morph">
      <Heading size="large">6. Morph</Heading>

      <Text marginTop="spacing.1">
        Morph component is a abstraction on motion react's layout animations. It allows you to morph
        between 2 elements
      </Text>

      <MorphIntro />

      <p align="right">[View Morph Documentation](/?path=/docs/motion-morph--docs)</p>
    </Box>

    <Box id="animateinteractions">
      <Heading size="large">7. AnimateInteractions</Heading>

      <Text marginTop="spacing.1">
        AnimateInteractions is a component that allows you to animate child components based on
        interactions on parent. This is similar to doing `.parent:hover .child {}` styling in CSS.
      </Text>

      <AnimateInteractionsIntro />

      <p align="right">
        [View AnimateInterations Documentation](/?path=/docs/motion-animateinteractions--docs)
      </p>
    </Box>

    <Box id="stagger">

```

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

### Motion Installation Documentation

Source: https://github.com/razorpay/blade/blob/master/packages/blade/docs/guides/Installation.mdx

Include the MotionInstallation documentation. This is typically used for providing detailed setup instructions for motion-related components.

```mdx
import MotionInstallation from '../../src/components/BaseMotion/docs/MotionInstallation.mdx';
```

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

### Implement a Basic Guided Tour with Custom Footer

Source: https://github.com/razorpay/blade/blob/master/packages/blade-mcp/knowledgebase/components/SpotlightPopoverTour.md

This example demonstrates a simple guided tour with three steps. It uses a custom footer component to control navigation between steps, allowing for 'Next', 'Prev', and 'Done' actions.

```tsx
import {
  SpotlightPopoverTour,
  SpotlightPopoverTourStep,
  SpotlightPopoverTourFooter,
  Box,
  Button,
  Text,
  Card,
  CardBody,
  InfoIcon,
  Amount,
} from '@razorpay/blade/components';
import type {
  SpotlightPopoverTourSteps,
  SpotlightPopoverStepRenderProps,
} from '@razorpay/blade/components';
import { useState } from 'react';

// Custom footer component that can control the tour
const CustomTourFooter = ({
  activeStep,
  totalSteps,
  goToNext,
  goToPrevious,
  stopTour,
}: SpotlightPopoverStepRenderProps): React.ReactElement => {
  const isLast = activeStep === totalSteps - 1;
  const isFirst = activeStep === 0;

  return (
    <SpotlightPopoverTourFooter
      activeStep={activeStep}
      totalSteps={totalSteps}
      actions={{
        primary: isLast
          ? {
              text: 'Done',
              onClick: stopTour,
            }
          : {
              text: 'Next',
              onClick: goToNext,
            },
        secondary: isFirst
          ? undefined
          : {
              text: 'Prev',
              onClick: goToPrevious,
            },
      }}
    />
  );
};

function BasicTourExample(): React.ReactElement {
  const [activeStep, setActiveStep] = useState(0);
  const [isOpen, setIsOpen] = useState(false);

  // Define the tour steps
  const steps: SpotlightPopoverTourSteps = [
    {
      name: 'refunds-step',
      title: 'Overview of Refunds',
      content: () => (
        <Box>
          <Text color="surface.text.gray.subtle">
            You can issue refunds for various reasons, like when a customer returns a product or
            cancels a service.
          </Text>
          <Text color="surface.text.gray.subtle" marginTop="spacing.2">
            You can also issue partial refunds - for example, if a customer purchased multiple
            items.
          </Text>
        </Box>
      ),
      placement: 'bottom' as const,
      footer: CustomTourFooter,
    },
    {
      name: 'disputes-step',
      title: 'Overview of Disputes',
      content: () => (
        <Box>
          <Text color="surface.text.gray.subtle">
            Disputes are raised by customers when they have a problem with a transaction.
          </Text>
        </Box>
      ),
      placement: 'bottom' as const,
      footer: CustomTourFooter,
    },
    {
      name: 'status-step',
      title: 'Dispute Statuses',
      content: () => (
        <Text color="surface.text.gray.subtle">
          Disputes which are open or under review will be shown here. You can also review them by
          clicking on the button.
        </Text>
      ),
      placement: 'bottom' as const,
      footer: CustomTourFooter,
    },
  ];

  return (
    <Box>
      <Button
        marginBottom="spacing.9"
        onClick={() => {
          setIsOpen(!isOpen);
        }}
      >
        {isOpen ? 'Tour In Progress' : 'Start Tour'}
      </Button>

      <SpotlightPopoverTour
        steps={steps}
        isOpen={isOpen}
        activeStep={activeStep}
        onFinish={() => {
          setActiveStep(0);
          setIsOpen(false);
        }}
        onOpenChange={({ isOpen }) => {
          setIsOpen(isOpen);
        }}
        onStepChange={(step) => {
          setActiveStep(step);
        }}
      >
        <Box
          display="flex"
          flexDirection={{ base: 'column', m: 'row' }}
          gap="spacing.4"
          alignItems="stretch"
        >
          <SpotlightPopoverTourStep name="refunds-step">
            <Box width="100%">
              <Card width="100%" height="100%">
                <CardBody>
                  <Box display="flex" flexDirection="column" gap="spacing.3">
                    <Box display="flex" alignItems="center" gap="spacing.3">
                      <Text>Refunds</Text>
                      <InfoIcon color="surface.icon.gray.muted" />
                    </Box>
                    <Amount value={40000} type="heading" size="large" />
                    <Text color="surface.text.gray.muted">3 Processed</Text>
                  </Box>
                </CardBody>
              </Card>
            </Box>
          </SpotlightPopoverTourStep>

          <SpotlightPopoverTourStep name="disputes-step">
            <Box width="100%">
              <Card width="100%" height="100%">
                <CardBody>
                  <Box display="flex" flexDirection="column" gap="spacing.3">
                    <Box display="flex" alignItems="center" gap="spacing.3">
                      <Text>Disputes</Text>
                      <InfoIcon color="interactive.icon.gray.muted" />
                    </Box>
                    <Amount value={0} type="heading" size="large" />

                    <SpotlightPopoverTourStep name="status-step">
                      <Box

```

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

### ConfirmationDialog Examples

Source: https://github.com/razorpay/blade/blob/master/packages/blade-mcp/knowledgebase/patterns/Confirmation.md

Shows how to use the ConfirmationDialog component for different actions like deleting an account, switching platforms, or starting a product tour. Includes examples of negative, neutral, and positive confirmation types, with options for icons or images, and handling loading states.

```javascript
const handleDelete = async () => {
    setIsDeleteLoading(true);
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 1000));
      setIsDeleteOpen(false);
    } finally {
      setIsDeleteLoading(false);
    }
  };

  return (
    <Box display="flex" flexDirection="column" gap="spacing.4">
      <Button
        color="negative"
        onClick={() => setIsDeleteOpen(true)}
        icon={TrashIcon}
        iconPosition="left"
      >
        Delete Account
      </Button>
      <ConfirmationDialog
        isOpen={isDeleteOpen}
        onDismiss={() => setIsDeleteOpen(false)}
        type="negative"
        icon={TrashIcon}
        title="Delete Account?"
        description="This action cannot be undone. All of your data will be permanently deleted. This includes your profile, settings, and all associated information."
        primaryButtonText="Delete Account"
        secondaryButtonText="Cancel"
        onConfirm={handleDelete}
        isLoading={isDeleteLoading}
      />

      <Button onClick={() => setIsSwitchOpen(true)}>Switch Platform</Button>
      <ConfirmationDialog
        isOpen={isSwitchOpen}
        onDismiss={() => setIsSwitchOpen(false)}
        type="neutral"
        image="https://logo.svgcdn.com/d/woocommerce-plain-wordmark.svg"
        title="Switch to WooCommerce?"
        description="Switching platforms will reset your current settings. Your existing data will be preserved but you'll need to reconfigure your platform-specific settings."
        primaryButtonText="Switch Platform"
        secondaryButtonText="Stay Here"
        onConfirm={() => setIsSwitchOpen(false)}
      />

      <Button onClick={() => setIsTourOpen(true)} icon={MapIcon} iconPosition="left">
        Start Product Tour
      </Button>
      <ConfirmationDialog
        isOpen={isTourOpen}
        onDismiss={() => setIsTourOpen(false)}
        type="positive"
        icon={MapIcon}
        title="Start Product Tour?"
        description="Take a guided tour of our platform's key features. Learn how to make the most of our tools and improve your workflow."
        primaryButtonText="Start Tour"
        secondaryButtonText="Maybe Later"
        onConfirm={() => setIsTourOpen(false)}
      />
    </Box>
  );
};

export default ConfirmationExample;
```

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

### Install Dependencies

Source: https://github.com/razorpay/blade/blob/master/packages/plugin-figma-blade-coverage/README.md

After cloning the repository, run this command to install all necessary project dependencies.

```bash
yarn install
```

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

### Start Development Server

Source: https://github.com/razorpay/blade/blob/master/packages/plugin-figma-blade-coverage/README.md

Run this command to start the development server, which will watch for changes and rebuild the plugin.

```bash
yarn watch
```

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

### React Router Setup for Mobile App Example

Source: https://github.com/razorpay/blade/blob/master/packages/blade-mcp/knowledgebase/components/BottomNav.md

This snippet demonstrates how to wrap a React component with BrowserRouter to enable routing for a complete mobile app example.

```javascript
import React from 'react';
import {
  BrowserRouter,
} from 'react-router-dom';

// Wrap with router for complete example
const App = () => (
  <BrowserRouter>
    <MobileAppExample />
  </BrowserRouter>
);

export default App;
```

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

### Install iOS Pods

Source: https://github.com/razorpay/blade/blob/master/CONTRIBUTING.md

Navigate to the `ios/` directory and run `pod install` to install the necessary pods for the iOS project. This command is for Intel machines; M1 users may need to follow specific notes.

```sh
pod install
```

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

### Start iOS Storybook

Source: https://github.com/razorpay/blade/blob/master/CONTRIBUTING.md

Run this command in the `packages/blade` directory to start the Storybook development server for iOS. The app should be installed and launched on the simulator.

```sh
yarn start:ios
```

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

### Promotional Toast Example

Source: https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Toast/_decisions/decisions.md

Provides an example of how to display a promotional toast with custom content, an action button, and an icon.

```APIDOC
## POST /promotional-toast (Conceptual)

### Description
This example demonstrates how to create and display a promotional toast using the `useToast` hook. Promotional toasts are typically used for more significant announcements or actions.

### Method
Imperative API call via `useToast` hook.

### Endpoint
N/A (Client-side hook)

### Parameters
Refer to the `ToastProps` in the 'Toast Component Usage' section for detailed parameters. Key differences for promotional toasts include:
- **type**: Should be set to 'promotional'.
- **autoDismiss**: Defaults to `false`.
- **duration**: Defaults to `8000`ms.

### Request Example
```jsx
import { Button, Box, Heading, Text, DollarIcon } from '@razorpay/blade/components';
import { BladeProvider, ToastContainer, useToast } from '@razorpay/blade/components';

const Example = () => {
  const toast = useToast();

  return (
    <Button
      onClick={() => {
        toast.show({
          type: 'promotional',
          content: (
            <Box>
              <Heading>Payment Successful</Heading>
              <Text>Amount: ₹100</Text>
            </Box>
          ),
          leading: <DollarIcon />,
          action: {
            text: 'Okay'
          }
        });
      }}
    >
      Do payment
    </Button>
  );
};

const App = () => {
  return (
    <BladeProvider>
      <ToastContainer position="bottom-left" />
      <Example />
    </BladeProvider>
  )
}
```

### Response
#### Success Response (200)
- **id** (string) - The unique identifier of the displayed toast.
```

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

### ActionListHeader Examples

Source: https://github.com/razorpay/blade/blob/master/packages/blade/src/components/BottomSheet/_decisions/api-revision-1.md

Examples of how to use ActionListHeader with different configurations for title, leading icon, and variant styling.

```jsx
<ActionListHeader
 title="Recent Searches"
 leading={<ActionListHeaderIcon icon={HistoryIcon} />}
/>

<ActionListHeader variant="body" weight="regular"/>
```

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

### Switch Component Examples

Source: https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Switch/_decisions/decisions.md

Code examples demonstrating basic, controlled, and uncontrolled usage of the Switch component.

```APIDOC
## Switch Component Examples

### Basic Usage

```jsx
// basic
<Switch value="dark-mode" />
```

### Controlled Component

```jsx
const Controlled = () => {
  const [checked, setChecked] = React.useState(false);

  return (
    <Switch
      isChecked={checked}
      onChange={({ isChecked }) => setChecked(isChecked)}
      value="dark-mode"
    />
  );
};
```

### Uncontrolled Component

```jsx
const Uncontrolled = () => {
  return (
    <Switch
      defaultChecked={true}
      onChange={({ isChecked }) => console.log(isChecked)}
      value="dark-mode"
    />
  );
};
```

### Custom Label

Switch by default does not render a `<label>` element internally. You can provide one externally:

```jsx
<Box as="label" display="flex">
  Dark mode
  <Switch id="dark-mode" />
</Box>
```
```

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

### Line Height Calculation Examples

Source: https://github.com/razorpay/blade/blob/master/rfcs/2021-01-05-typography-scaling.md

Examples demonstrating line height calculations for headings on desktop and mobile, illustrating the use of height-factors.

```CSS
.headingXXL-Desktop {
  line-height: 60px; /* (1.5) looks good on large screens */
  font-size: 40px;
}

.headingXXL-Mobile {
  line-height: 38px; /* (1.3) looks good on small screens */
  font-size: 28px;
}
```

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

### Avatar Usage Examples

Source: https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Avatar/_decisions/decisions.md

Examples demonstrating how to use the Avatar component for different scenarios.

```APIDOC
## Avatar Usage Examples

### Image Avatars
```tsx
<Avatar name="Remy Sharp" src="/static/images/avatar/1.jpg" />
<Avatar name="Travis Howard" src="/static/images/avatar/2.jpg" />
<Avatar name="Cindy Baker" src="/static/images/avatar/3.jpg" />
```

### Avatar Fallbacks
If an image fails to load, the avatar will fall back to displaying initials generated from the `name` prop, or a default avatar if `name` is not provided.

### Letter Avatars
```tsx
<Avatar color="primary" name="Nitin Kumar" />
<Avatar color="positive" name="Anurag" />
<Avatar color="negative" name="Saurabh Daware" />
```

### Icon Avatars
```tsx
<Avatar color="primary" icon={SearchIcon} />
<Avatar color="primary" icon={TransactionIcon} />
```
```

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

### Install @razorpay/blade-core

Source: https://github.com/razorpay/blade/blob/master/packages/blade-core/README.md

Install the core package using npm or yarn.

```bash
npm install @razorpay/blade-core
# or
yarn add @razorpay/blade-core
```

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

### Start Webpack Watch Mode

Source: https://github.com/razorpay/blade/blob/master/packages/plugin-figma-token-publisher/README.md

Run this command to start Webpack in watch mode for continuous building.

```bash
yarn build:watch
```

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

### Install framer-motion

Source: https://github.com/razorpay/blade/blob/master/packages/blade/docs/migration-docs/upgrade-v12.md

Install the framer-motion library as a development dependency. Use the specified version for compatibility.

```sh
yarn add framer-motion@^11 --dev # or pnpm install framer-motion --save-dev
```

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

### Card Component Usage Example

Source: https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Card/_decisions/decisions.md

A comprehensive example demonstrating the usage of the Card component and its sub-components.

```APIDOC
## Card Component Usage Example

### Description
This example showcases how to use the Card component along with its header, body, and footer sections, including various sub-components for content and actions.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
N/A

### Request Example
```jsx
import {
  Card,
  CardHeader,
  CardHeaderLeading,
  CardHeaderTrailing,
  CardHeaderBadge,
  CardHeaderIcon,
  CardHeaderCounter,
  CardBody,
  CardFooter,
  CardFooterLeading,
  CardFooterTrailing,
} from "@razorpay/blade"

<Card surfaceLevel={2}>
  <CardHeader>
    <CardHeaderLeading  
      title="Payments Links"
      subtitle="Share payment link via an email, SMS, messenger, chatbot etc."
      prefix={<CardHeaderIcon icon={DollarIcon} />}
      suffix={<CardHeaderCounter amount={20} />}
    />
    <CardHeaderTrailing 
      visual={<CardHeaderBadge variant="positive">NEW</CardHeaderBadge>}
    />
  </CardHeader>
  <CardBody>
    Card Body Content
  </CardBody>
  <CardFooter>
    <CardFooterLeading 
      title="Card Footer Title"
      subtitle="Card footer subtitle"
    />
    <CardFooterTrailing 
      actions={{
        primaryAction: { text: 'Know more', onClick: () => {} },
        secondaryAction: { text: 'Read Docs', onClick: () => {} },
      }}
    />
  </CardFooter>
</Card>
```

### Response
N/A (Component Usage)
```

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

### Minimal ListView Example

Source: https://github.com/razorpay/blade/blob/master/packages/blade-mcp/knowledgebase/patterns/ListView.md

A basic example demonstrating the implementation of a ListView component with Table and Box elements. This is useful for creating structured data displays.

```javascript
import * as React from "react";
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
  TableFooterRow,
} from "@razorpay/blade/components/Table";
import {
  Box
} from "@razorpay/blade/components/Box";
import {
  ListView
} from "@razorpay/blade/components/ListView";

const invoices = [
  {
    invoice: "INV001",
    paymentMethod: "Credit Card",
    amount: "$200.00",
    status: "Pending",
    actions: "View",
  },
  {
    invoice: "INV002",
    paymentMethod: "PayPal",
    amount: "$350.00",
    status: "Paid",
    actions: "View",
  },
  {
    invoice: "INV003",
    paymentMethod: "Bank Transfer",
    amount: "$500.00",
    status: "Failed",
    actions: "View",
  },
];

function MinimalListViewExample() {
  return (
    <Box padding="20px">
      <ListView>
        <Table>
          <TableCaption>Recent Invoices</TableCaption>
          <TableHeader>
            <TableRow>
              <TableHead>Invoice</TableHead>
              <TableHead>Payment Method</TableHead>
              <TableHead>Amount</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {invoices.map((invoice) => (
              <TableRow key={invoice.invoice}>
                <TableCell>{invoice.invoice}</TableCell>
                <TableCell>{invoice.paymentMethod}</TableCell>
                <TableCell>{invoice.amount}</TableCell>
                <TableCell>{invoice.status}</TableCell>
                <TableCell>{invoice.actions}</TableCell>
              </TableRow>
            ))}
          </TableBody>
          {true && (
            <>
              <TableFooter>
                <TableFooterRow>
                  <TableCell colSpan={5}>Footer Content</TableCell>
                </TableFooterRow>
              </TableFooter>
            </>
          )}
        </Table>
      </ListView>
    </Box>
  );
}

export default MinimalListViewExample;

```

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

### Start Android Storybook

Source: https://github.com/razorpay/blade/blob/master/CONTRIBUTING.md

Execute this command in the `packages/blade` directory to start the Storybook development server for Android. Ensure `$ANDROID_SDK_ROOT` is set.

```sh
yarn start:android
```

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

### AutoComplete Usage Examples

Source: https://github.com/razorpay/blade/blob/master/packages/blade/src/components/AutoComplete/_decisions/decisions.md

Examples demonstrating various ways to use the AutoComplete component, including basic usage, controlled state, and integration with other components.

```APIDOC
## AutoComplete Usage

AutoComplete will be built as a new trigger for existing Dropdown component.

Depending on where and how AutoComplete is used, the API can differ. Checkout examples below on how code will look like for a particular usage.

- [Basic Usage](#basic-usage)
- [Controlled AutoComplete](#controlled-autocomplete)
- [In BottomSheet](#in-bottomsheet)
- [With Tags Outside](#with-tags-outside)
- [With Different Inactive - Active States](#with-different-inactive---active-states)
```

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

### Install React Native Dependencies

Source: https://github.com/razorpay/blade/blob/master/packages/blade/docs/guides/Installation.mdx

Optional dependencies for React Native projects. Ensure you follow the specific installation guides for react-native-reanimated.

```shell
yarn add @floating-ui/react-native@0.10.0 react-native-reanimated@3.4.1 react-native-tab-view@3.5.2 react-native-pager-view@6.2.1 react-native-svg@12.3.0 react-native-gesture-handler@2.9.0 @gorhom/bottom-sheet@4.4.6 @gorhom/portal@1.0.1
```

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

### Basic ListView Example with Table

Source: https://github.com/razorpay/blade/blob/master/packages/blade-mcp/knowledgebase/patterns/ListView.md

This example demonstrates how to use the ListView and Table components together to display a list of items. Ensure necessary imports for Box, Table, and ListView are present.

```jsx
import React from "react";
import { Box, Table, ListView } from "@/components/ui";

function BasicListViewExample() {
  return (
    <Box>
      <ListView>
        <Table>
          {/* Table content goes here */}
        </Table>
      </ListView>
    </Box>
  );
}

export default BasicListViewExample;
```

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

### Controlled Image Gallery with LightBox

Source: https://github.com/razorpay/blade/blob/master/packages/blade-mcp/knowledgebase/components/LightBox.md

Demonstrates a controlled LightBox setup using explicit `activeIndex`, `onIndexChange`, and `accessibilityLabel`. This example utilizes `LightBoxItem` in image mode.

```tsx
import { useState } from 'react';
import { Box, Button, LightBox, LightBoxBody, LightBoxItem } from '@razorpay/blade/components';

const IMAGES = [
  { src: 'https://picsum.photos/seed/lightbox-doc-1/1200/800', alt: 'Invoice summary page' },
  { src: 'https://picsum.photos/seed/lightbox-doc-2/1200/800', alt: 'Payment receipt page' },
  { src: 'https://picsum.photos/seed/lightbox-doc-3/1200/800', alt: 'Settlement confirmation page' },
];

function ControlledLightBoxExample(): React.ReactElement {
  const [isOpen, setIsOpen] = useState(false);
  const [activeIndex, setActiveIndex] = useState(0);

  return (
    <Box>
      <Box display="flex" gap="spacing.3" flexWrap="wrap">
        {IMAGES.map((image, index) => (
          <Button
            key={image.src}
            onClick={() => {
              setActiveIndex(index);
              setIsOpen(true);
            }}
          >
            View media {index + 1}
          </Button>
        ))}
      </Box>

      <LightBox
        isOpen={isOpen}
        onDismiss={() => setIsOpen(false)}
        activeIndex={activeIndex}
        onIndexChange={({ index }) => setActiveIndex(index)}
        accessibilityLabel="Transaction media viewer"
      >
        <LightBoxBody>
          {IMAGES.map((image) => (
            <LightBoxItem key={image.src} src={image.src} alt={image.alt} />
          ))}
        </LightBoxBody>
      </LightBox>
    </Box>
  );
}
```

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

### ActionList - Simplest Usage

Source: https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Dropdown/_decisions/decisions.md

Demonstrates the basic implementation of the ActionList component with selectable items.

```APIDOC
## ActionList - Simplest Usage

### Description
This example shows the most straightforward way to use the `ActionList` component. It includes items with titles, descriptions, and optional leading/trailing elements, and handles click events.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Props for `ActionList`:
- **surfaceLevel** (number) - Optional - Changes the background surface level color. Defaults to 2.
- **onChange** (function) - Optional - Callback that gets called when an item is checked or clicked. Receives an object with `name` and `values`.

#### Props for `ActionListItem`:
- **title** (string) - Required - The main text displayed for the item.
- **value** (string) - Required - The unique identifier for the item.
- **description** (string) - Optional - Additional descriptive text for the item.
- **leading** (ReactNode) - Optional - Content to display before the item's title (e.g., an icon).
- **trailing** (ReactNode) - Optional - Content to display after the item's title (e.g., text or an icon).
- **intent** (string) - Optional - Specifies the intent of the item (e.g., 'negative' for destructive actions).
- **onClick** (function) - Optional - Handler for the item's click event.

### Request Example
```jsx
<ActionList
  surfaceLevel={2}
  onChange={(e) => {
    console.log({ name: e.name, values: e.values });
  }}
>
  <ActionListItem
    title="Accept API"
    value="accept"
    description="Accept this API"
    leading={<ActionListItemIcon icon={StarIcon} />}
    trailing={<ActionListItemText>⌘ + Space + A</ActionListItemText>}
    onClick={() => {}}
  />
  <ActionListItem
    title="Delete"
    description="Delete this value"
    value="delete"
    intent="negative"
    leading={<ActionListItemIcon icon={TrashIcon} />}
    trailing={<ActionListItemText>⌘ + Space + D</ActionListItemText>}
    onClick={() => {}}
  />
</ActionList>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Start Web Storybook

Source: https://github.com/razorpay/blade/blob/master/CONTRIBUTING.md

Execute this command to run the Storybook development server for web components. Access Storybook at http://localhost:9009.

```sh
yarn start:web
```

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

### BottomNav with BottomNavItem Examples

Source: https://github.com/razorpay/blade/blob/master/packages/blade/src/components/BottomNav/_decisions/decisions.md

Demonstrates how to use the BottomNav component with multiple BottomNavItem elements, including navigation links and click handlers. Ensure react-router-dom is installed for NavLink usage.

```jsx
import { NavLink } from 'react-router-dom';

<BottomNav>
  <BottomNavItem 
    as={NavLink} 
    isActive={true}
    title="Payments"
    icon={WalletIcon}
    href="/payments"
  />
  <BottomNavItem 
    as={NavLink} 
    title="Transactions"
    icon={TransactionsIcon}
    href="/transactions"
  />
  <BottomNavItem 
    as={NavLink} 
    title="Links"
    icon={PaymentLinksIcon}
    href="/links"
  />
  <BottomNavItem 
    title="More"
    icon={MoreIcons}
    onClick={() => {
      // This can be used to open SideNav drawer
      setIsSideNavOpen(true)
    }}
  />
</BottomNav>
```

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

### Install Blade Fonts via Unpkg for No Bundler Setups

Source: https://github.com/razorpay/blade/blob/master/packages/blade/docs/guides/Installation.mdx

For projects without bundlers or using no-code tools, include this script tag in your HTML to load Blade fonts from unpkg. Replace `<blade-version>` with your specific Blade version.

```html
<link rel="stylesheet" href="https://unpkg.com/@razorpay/blade@<blade-version>/fonts.css" />
<!--
  Replace <blade-version> in the URL with the version of Blade you're using
  E.g. https://unpkg.com/@razorpay/blade@11.3.1/fonts.css
-->
```

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

### Blade Table Component Implementation

Source: https://github.com/razorpay/blade/blob/master/packages/blade/codemods/aicodemod/knowledge/Table.md

This snippet shows a full example of how to implement a Blade Table component. It includes data generation, toolbar configuration, sort functions, pagination setup, and row/cell rendering. Ensure all necessary Blade components are imported.

```jsx
import {
  Table,
  TableEditableCell,
  TableHeader,
  TableHeaderRow,
  TableHeaderCell,
  TableBody,
  TableRow,
  TableCell,
  TableToolbar,
  TableToolbarActions,
  TableFooter,
  TableFooterRow,
  TableFooterCell,
  TablePagination,
} from '@razorpay/blade/components';

const nodes: Item[] = [
  ...Array.from({ length: 100 }, (_, i) => ({
    id: (i + 1).toString(),
    paymentId: `rzp${Math.floor(Math.random() * 1000000)}`,
    amount: Number((Math.random() * 10000).toFixed(2)),
    status: ['Completed', 'Pending', 'Failed'][Math.floor(Math.random() * 3)],
    date: new Date(2021, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1),
    type: ['Payout', 'Refund'][Math.floor(Math.random() * 2)],
    method: ['Bank Transfer', 'Credit Card', 'PayPal'][Math.floor(Math.random() * 3)],
    bank: ['HDFC', 'ICICI', 'SBI'][Math.floor(Math.random() * 3)],
    account: Math.floor(Math.random() * 1000000000).toString(),
    name: [
      'John Doe',
      'Jane Doe',
      'Bob Smith',
      'Alice Smith',
      'John Smith',
      'Jane Smith',
      'Bob Doe',
      'Alice Doe',
    ][Math.floor(Math.random() * 8)],
  })),
];

type Item = {
  id: string,
  paymentId: string,
  amount: number,
  status: string,
  date: Date,
  type: string,
  method: string,
  bank: string,
  account: string,
  name: string,
};
type TableData<T> = {
  nodes: T[];
};
const data: TableData<Item> = {
  nodes,
};

const TableComponent: StoryFn<typeof Table> = ({ ...args }) => {
  return (
    <Box
      backgroundColor={args.backgroundColor ?? 'surface.background.gray.intense'}
      padding="spacing.5"
      overflow="auto"
      minHeight="400px"
    >
      <Table
        {...args}
        data={data}
        toolbar={
          <TableToolbar title="Showing 1-10 [Items]" selectedTitle="Showing 1-10 [Items]">
            <TableToolbarActions>
              <Button variant="secondary" marginRight="spacing.2">
                Export
              </Button>
              <Button>Refund</Button>
            </TableToolbarActions>
          </TableToolbar>
        }
        sortFunctions={{
          ID: (array) => array.sort((a, b) => Number(a.id) - Number(b.id)),
          AMOUNT: (array) => array.sort((a, b) => a.amount - b.amount),
          PAYMENT_ID: (array) => array.sort((a, b) => a.paymentId.localeCompare(b.paymentId)),
          DATE: (array) => array.sort((a, b) => a.date.getTime() - b.date.getTime()),
          STATUS: (array) => array.sort((a, b) => a.status.localeCompare(b.status)),
        }}
        pagination={
          <TablePagination
            onPageChange={console.log}
            defaultPageSize={10}
            onPageSizeChange={console.log}
            showPageSizePicker
            showPageNumberSelector
          />
        }
      >
        {/* tableData variables has things that you passed from data.nodes in Table component */}
        {(tableData) => (
          <>
            {/* Add when you need header */}
            <TableHeader>
              <TableHeaderRow>
                <TableHeaderCell headerKey="PAYMENT_ID">ID</TableHeaderCell>
                <TableHeaderCell headerKey="AMOUNT">Amount</TableHeaderCell>
                <TableHeaderCell headerKey="ACCOUNT">Account</TableHeaderCell>
                <TableHeaderCell headerKey="DATE">Date</TableHeaderCell>
                <TableHeaderCell headerKey="METHOD">Method</TableHeaderCell>
                <TableHeaderCell headerKey="STATUS">Status</TableHeaderCell>
              </TableHeaderRow>
            </TableHeader>
            <TableBody>
              {tableData.map((tableItem, index) => (
                <TableRow key={index} item={tableItem}>
                  <TableCell>
                    <Code size="medium">{tableItem.paymentId}</Code>
                  </TableCell>
                  <TableEditableCell
                    accessibilityLabel="Amount"
                    placeholder="Enter text"
                    successText="Amount is valid"
                  />
                  <TableCell>{tableItem.account}</TableCell>
                  <TableCell>
                    {tableItem.date?.toLocaleDateString('en-IN', {
                      year: 'numeric',
                      month: '2-digit',
                      day: '2-digit',
                    })}
                  </TableCell>
                  <TableCell>{tableItem.method}</TableCell>
                  <TableCell>
                    <Badge
                      size="medium"
                      color={
                        tableItem.status === 'Completed'
                          ? 'positive'
                          : tableItem.status === 'Pending'
                          ? 'notice'
                          : tableItem.status === 'Failed'
                          ? 'negative'
                          : 'primary'
                      }
                    >
                      {tableItem.status}
                    </Badge>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </>
        )}
      </Table>
    </Box>
  );
};

```

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

### Get Blade Coverage Metrics

Source: https://github.com/razorpay/blade/blob/master/packages/blade/docs/utils/coverge.mdx

This utility function calculates the percentage of DOM elements on a web page that are built using Blade components. It returns the coverage percentage, total DOM nodes, and the count of Blade nodes. Consider installing the Blade Coverage Chrome Extension for a more convenient visualization.

```javascript
import { getBladeCoverage } from '@razorpay/blade/coverageUtils';

const { bladeCoverage, totalNodes, bladeNodes } = getBladeCoverage();
```

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

### Interruptible Tour Example

Source: https://github.com/razorpay/blade/blob/master/packages/blade-mcp/knowledgebase/components/SpotlightPopoverTour.md

This component demonstrates an interruptible tour. It uses SpotlightPopoverTour to manage tour steps and allows dynamic modification of the steps array. The tour's state (e.g., 'Tour In Progress' vs. 'Start Tour') is controlled by the isOpen state, which is toggled by a button click. The onStepChange callback updates the active step.

```javascript
function InterruptibleTourExample() {
  const [isOpen, setIsOpen] = React.useState(false);
  const [activeStep, setActiveStep] = React.useState(0);

  return (
    <Box>
      <SpotlightPopoverTour
        initialStep={0}
        steps={[
          { name: 'final-step', title: 'Final Step', description: 'This is the final step.' },
          { name: 'step-1', title: 'Step 1', description: 'This is step 1.' },
          { name: 'step-2', title: 'Step 2', description: 'This is step 2.' },
        ]}
        onStepChange={(step) => {
          setActiveStep(step);
        }}
      >
        <SpotlightPopoverTourStep name="final-step">
          <Button
            marginBottom="spacing.5"
            onClick={() => {
              setIsOpen(!isOpen);
            }}
          >
            {isOpen ? 'Tour In Progress' : 'Start Tour'}
          </Button>
        </SpotlightPopoverTourStep>

        <Text>
          You can create complex flows like interruptible tours by dynamically modifying the steps
          array, and changing its contents.
        </Text>

        <Text>
          Compose and make use of methods provided by the tour component like{' '}
          <Code size="medium">stopTour</Code>, <Code size="medium">goToStep</Code>,
          <Code size="medium">goToNext</Code> etc to control the behavior of the current tour step
        </Text>

        <Box display="flex" gap="spacing.4" alignItems="stretch" marginTop="spacing.6">
          <SpotlightPopoverTourStep name="step-1">
            <Box padding="spacing.4" backgroundColor="surface.background.gray.intense">
              Step 1
            </Box>
          </SpotlightPopoverTourStep>

          <SpotlightPopoverTourStep name="step-2">
            <Box padding="spacing.4" backgroundColor="surface.background.gray.intense">
              Step 2
            </Box>
          </SpotlightPopoverTourStep>
        </Box>
      </SpotlightPopoverTour>
    </Box>
  );
}

export default InterruptibleTourExample;
```

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

### BladeProvider Setup

Source: https://github.com/razorpay/blade/blob/master/packages/blade-mcp/knowledgebase/general/Tokens.md

Wrap your entire application with BladeProvider to enable theming. Ensure you import BladeProvider and the default bladeTheme.

```jsx
import { BladeProvider } from '@razorpay/blade/components';
import { bladeTheme } from '@razorpay/blade/tokens';

function App() {
  return (
    <BladeProvider themeTokens={bladeTheme} colorScheme="light">
      <YourApp />
    </BladeProvider>
  );
}
```

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

### Basic Desktop TopNav Usage

Source: https://github.com/razorpay/blade/blob/master/packages/blade/src/components/TopNav/_decisions/decisions.md

Demonstrates the structure of a desktop navigation bar using TopNav, TopNavBrand, TopNavContent with TabNav, and TopNavActions. Includes examples of search, tooltips, buttons, and menus.

```jsx
// Desktop Navigation Bar
<TopNav>
  <TopNavBrand>
    <img src="razorpay-logo" />
  </TopNavBrand>
  <TopNavContent>
    <TabNav
      items={[
        { href: '/home', title: 'Home' },
        { href: '/payroll', title: 'Payroll' },
        { href: '/payments', title: 'Payments', isAlwaysOverflowing: true, },
      ]}>
      {({ items, overflowingItems }) => {
        return (
          <>
            <TabNavItems>
              {items.map((item) => (
                <TabNavItem href={item.href} title={title} />
              ))}
            </TabNavItems>
            <Menu>
              <TabNavItem title="More" />
              {overflowingItems.map((item) => {
                return (
                  <MenuItem key={item.title}>
                    <CustomExploreItem
                      icon={item.icon}
                      title={item.title}
                      description={item.description}
                    />
                  </MenuItem>
                );
              })}
            </Menu>
          </>
        );
      }}
    </TabNav>
  </TopNavContent>
  <TopNavActions>
    <SearchInput />
    <Tooltip content="View Ecosystem Health">
      <Button icon={ActivityIcon} />
    <Tooltip>
    <Tooltip content="View Announcements">
      <Button icon={AnnouncementIcon} />
    </Tooltip>
    <Tooltip content="Ask Ray">
      <Button icon={RayIcon} />
    </Tooltip>
    <Menu>
      <Avatar />
      <MenuOverlay>
        { /* Avatar Menu Items */ }
      </MenuOverlay>
    </Menu>
  </TopNavActions>
</TopNav>
```

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

### Start Native Storybook (iOS & Android)

Source: https://github.com/razorpay/blade/blob/master/CONTRIBUTING.md

Use this command to run Storybook development servers for both iOS and Android simultaneously. This is an alternative to running `yarn start:ios` and `yarn start:android` separately.

```sh
yarn start:native
```

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

### Basic Drawer Implementation

Source: https://github.com/razorpay/blade/blob/master/packages/blade-mcp/knowledgebase/components/Drawer.md

Demonstrates a standard drawer with header, body, and footer content. Use this to control the drawer's open/close state and manage footer visibility.

```tsx
import React, { useState } from 'react';
import {
  Drawer,
  DrawerBody,
  DrawerHeader,
  DrawerFooter,
  Box,
  Button,
  Badge,
  TextInput,
  Heading,
  Text,
  DownloadIcon,
} from '@razorpay/blade/components';

const BasicDrawer = () => {
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const [showFooter, setShowFooter] = useState(true);

  const handleOpenDrawer = () => setIsDrawerOpen(true);
  const handleCloseDrawer = () => setIsDrawerOpen(false);

  return (
    <Box>
      <Box display="flex" gap="spacing.4" marginBottom="spacing.4">
        <Button onClick={handleOpenDrawer}>Open Drawer</Button>
        <Button variant="secondary" onClick={() => setShowFooter(!showFooter)}>
          {showFooter ? 'Hide Footer' : 'Show Footer'}
        </Button>
      </Box>

      <Drawer
        isOpen={isDrawerOpen}
        onDismiss={handleCloseDrawer}
        accessibilityLabel="Vendor payment details drawer"
      >
        <DrawerHeader
          title="Vendor Payment Details"
          titleSuffix={<Badge color="positive">New</Badge>}
          subtitle="See your payment details here"
          trailing={<Button icon={DownloadIcon} accessibilityLabel="Download details" />}
        />
        <DrawerBody>
          <Box display="flex" alignItems="center">
            <Heading>Starters' CFP Private Limited</Heading>
            <Badge size="small" color="primary" marginLeft="spacing.3">
              Vendor
            </Badge>
          </Box>

          <Box marginTop="spacing.6" marginBottom="spacing.8">
            <TextInput
              label="Email"
              type="email"
              placeholder="Enter your email"
              accessibilityLabel="Email address input"
            />
            <TextInput
              marginTop="spacing.4"
              label="Phone Number"
              type="telephone"
              placeholder="Enter your phone number"
              accessibilityLabel="Phone number input"
            />
          </Box>

          <Box>
            <Button accessibilityLabel="Process payout">Payout</Button>
            <Button
              marginLeft="spacing.2"
              variant="tertiary"
              accessibilityLabel="Send invitation to vendor"
            >
              Invite Vendor
            </Button>
          </Box>
        </DrawerBody>

        {showFooter && (
          <DrawerFooter>
            <Box display="flex" gap="spacing.3">
              <Button
                variant="tertiary"
                isFullWidth
                onClick={handleCloseDrawer}
                accessibilityLabel="Cancel and close drawer"
              >
                Cancel
              </Button>
              <Button variant="primary" isFullWidth accessibilityLabel="Process payment for vendor">
                Process Payment
              </Button>
            </Box>
          </DrawerFooter>
        )}
      </Drawer>
    </Box>
  );
};

export default BasicDrawer;
```