### Install and Run Blueprint Development Server

Source: https://github.com/palantir/blueprint/blob/develop/packages/docs-app/README.md

Follow these steps to install dependencies, start the development server, and access the documentation locally. You can change the default port by setting the PORT environment variable.

```bash
pnpm install
```

```bash
pnpm dev
```

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

### Install Dependencies and Build Project

Source: https://github.com/palantir/blueprint/blob/develop/CONTRIBUTING.md

Clone the repository, install dependencies using pnpm, and compile the project. Ensure Node.js and pnpm are installed and an SSH key is set up with GitHub.

```shell
git clone git@github.com:<username>/blueprint.git
cd blueprint
pnpm install
pnpm compile
pnpm dist
```

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

### Register Package Examples in Docs App

Source: https://github.com/palantir/blueprint/wiki/Creating-a-new-package

Updates the React examples registry in the documentation application to include examples from the new package. This makes the examples discoverable and renderable.

```diff
 import * as SelectExamples from "../examples/select-examples";
+import * as TimeTravelExamples from "../examples/time-travel-examples";
 import * as TableExamples from "../examples/table-examples";

 ...

 ...getPackageExamples("select", SelectExamples as any);
+...getPackageExamples("time-travel", TimeTravelExamples as any);
 ...getPackageExamples("table", TableExamples as any);
```

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

### Install Blueprint Docs Theme

Source: https://github.com/palantir/blueprint/blob/develop/packages/docs-theme/README.md

Install the @blueprintjs/docs-theme package using npm.

```sh
npm install --save @blueprintjs/docs-theme
```

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

### Install @blueprintjs/table

Source: https://github.com/palantir/blueprint/blob/develop/packages/table/src/docs/table.mdx

Install the table package using npm.

```sh
npm install --save @blueprintjs/table
```

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

### Install Blueprint Stylelint Plugin

Source: https://github.com/palantir/blueprint/blob/develop/packages/stylelint-plugin/README.md

Install the stylelint plugin as a development dependency using pnpm.

```sh
pnpm add --save-dev @blueprintjs/stylelint-plugin
```

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

### Install @blueprintjs/eslint-config

Source: https://github.com/palantir/blueprint/blob/develop/packages/eslint-config/README.md

Install the ESLint configuration package as a development dependency.

```sh
pnpm add --save-dev @blueprintjs/eslint-config
```

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

### Install @blueprintjs/core

Source: https://github.com/palantir/blueprint/blob/develop/packages/docs-app/src/blueprint.mdx

Install the primary Blueprint UI components package along with React and ReactDOM using pnpm.

```sh
pnpm add @blueprintjs/core react react-dom
```

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

### Install TSLint Configuration

Source: https://github.com/palantir/blueprint/blob/develop/packages/tslint-config/README.md

Install the TSLint configuration package and TSLint itself as development dependencies.

```sh
pnpm add --save-dev @blueprintjs/tslint-config tslint
```

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

### Install Blueprint ESLint Plugin

Source: https://github.com/palantir/blueprint/blob/develop/packages/eslint-plugin/README.md

Install the ESLint plugin as a development dependency using pnpm.

```sh
pnpm add --save-dev @blueprintjs/eslint-plugin
```

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

### Install Blueprint Labs

Source: https://github.com/palantir/blueprint/blob/develop/packages/labs/README.md

Install the Blueprint Labs package using npm. This package contains experimental components.

```sh
npm install --save @blueprintjs/labs
```

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

### Install Blueprint Core Components

Source: https://github.com/palantir/blueprint/blob/develop/packages/core/README.md

Use npm to install the core Blueprint package. This command adds the necessary CSS and React code to your project.

```sh
npm install --save @blueprintjs/core
```

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

### Install Blueprint v6.16.0+ for React 19

Source: https://github.com/palantir/blueprint/wiki/React-19-Support

Use this command to install Blueprint v6.16.0 or newer, which includes React 19 in its peer dependency ranges. This is the recommended approach for a clean install experience.

```sh
npm install @blueprintjs/core@^6.16.0
```

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

### Run Blueprint Landing Page

Source: https://github.com/palantir/blueprint/blob/develop/packages/landing-app/README.md

Follow these steps to start the Blueprint landing page on your local machine. Ensure you are in the root of the repository before executing.

```bash
npm run bootstrap
npm start
http://localhost:8080
```

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

### Popover Dismiss Example

Source: https://github.com/palantir/blueprint/blob/develop/packages/core/src/components/popover/popover.mdx

A practical example showcasing the dismissal behavior of Popovers, likely demonstrating the use of `Classes.POPOVER_DISMISS` and related functionalities.

```tsx
import { Popover, Classes, Button, Menu, MenuItem } from "@blueprintjs/core";

function PopoverDismissExample() {
    const menu = (
        <Menu>
            <MenuItem
                icon="tick"
                text="Accept"
                className={Classes.POPOVER_DISMISS}
            />
            <MenuItem
                icon="cross"
                text="Cancel"
                className={Classes.POPOVER_DISMISS}
            />
            <MenuItem
                icon="trash"
                text="Delete"
                className={Classes.POPOVER_DISMISS}
            />
        </Menu>
    );

    return (
        <Popover content={menu} target={<Button text="Actions" />} />
    );
}
```

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

### Icon HTML Markup Example

Source: https://github.com/palantir/blueprint/blob/develop/packages/core/src/components/icon/icon.mdx

This is an example of the HTML markup rendered by the Icon component with a custom size.

```xml
<span class="@ns-icon @ns-icon-globe" aria-hidden="true">
    <svg data-icon="globe" width="30" height="30" viewBox="0 0 20 20" role="img">
        <path d="..."></path>
    </svg>
</span>
```

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

### Install Blueprint Icons

Source: https://github.com/palantir/blueprint/blob/develop/packages/icons/README.md

Install the Blueprint Icons package using npm. This command adds the necessary dependencies to your project.

```sh
npm install --save @blueprintjs/icons
```

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

### Install @blueprintjs/datetime

Source: https://github.com/palantir/blueprint/blob/develop/packages/datetime/README.md

Install the datetime package using npm. This package is a dependency for using the date and time components.

```sh
npm install --save @blueprintjs/datetime
```

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

### Install Blueprint Colors Package

Source: https://github.com/palantir/blueprint/blob/develop/packages/colors/README.md

Install the @blueprintjs/colors package using npm. This command adds the package as a dependency to your project.

```sh
npm install --save @blueprintjs/colors
```

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

### Lerna Interactive Version Prompt Example

Source: https://github.com/palantir/blueprint/wiki/Release-process

An example of the interactive prompt Lerna displays when prompting for new version numbers. Use the changelog to determine appropriate 'Patch', 'Minor', or 'Major' releases.

```sh
lerna notice cli v6.5.1
lerna info versioning independent
lerna info Looking for changed packages since @blueprintjs/core@5.1.4
? Select a new version for @blueprintjs/core (currently 5.1.4) (Use arrow keys)
  Patch (5.1.5)
  Minor (5.2.0)
  Major (6.0.0)
  Prepatch (5.1.5-alpha.0)
  Preminor (5.2.0-alpha.0)
  Premajor (6.0.0-alpha.0)
  Custom Prerelease
  Custom Version
```

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

### Install Blueprint Select Package

Source: https://github.com/palantir/blueprint/blob/develop/packages/select/README.md

Install the Blueprint Select package using npm. This command adds the necessary components for item selection UIs to your project.

```sh
npm install --save @blueprintjs/select
```

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

### Install Latest Blueprint 3.0.0 Packages

Source: https://github.com/palantir/blueprint/wiki/Blueprint-3.0

Use this command to install the latest version of Blueprint core and icons packages. Ensure you include other Blueprint packages as needed.

```sh
yarn upgrade @blueprintjs/core@latest @blueprintjs/icons@latest ...
```

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

### Install TypeScript Typings

Source: https://github.com/palantir/blueprint/blob/develop/packages/docs-app/src/getting-started.mdx

Install the necessary TypeScript typings for React and ReactDOM, which are required for all @blueprintjs packages when using TypeScript.

```sh
# required for all @blueprintjs packages:
npm install --save @types/react @types/react-dom
```

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

### Synchronous Toast Display Example

Source: https://github.com/palantir/blueprint/blob/develop/packages/core/src/components/toast/toast.mdx

Demonstrates how to handle the promise returned by `OverlayToaster.create()` in a synchronous function using `.then()` handlers.

```typescript
function synchronousFn() {
    const toasterPromise = OverlayToaster.create({});
    toasterPromise.then(toaster => toaster.show({ message: "Toast!" }));
}
```

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

### Basic Popover Example

Source: https://github.com/palantir/blueprint/blob/develop/packages/core/src/components/popover/popover.mdx

Demonstrates a basic Popover with a click interaction, custom content, and a primary button as the target. The `Classes.POPOVER_CONTENT_SIZING` class is applied to the popover for consistent padding.

```tsx
import { Button, Classes, Popover } from "@blueprintjs/core";

export class PopoverExample extends React.PureComponent {
    public render() {
        // popover content gets no padding by default; add the "@ns-popover-content-sizing"
        // class to the popover to set nice padding between its border and content.
        return (
            <Popover
                interactionKind="click"
                popoverClassName={Classes.POPOVER_CONTENT_SIZING}
                placement="bottom"
                content={
                    <div>
                        <h5>Popover title</h5>
                        <p>...</p>
                        <Button className={Classes.POPOVER_DISMISS} text="Dismiss" />
                    </div>
                }
                renderTarget={({ isOpen, ...targetProps }) => (
                    <Button {...targetProps} intent="primary" text="Popover target" />
                )}
            />
        );
    }
}
```

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

### Custom Loaders with Other Bundlers (Vite Example)

Source: https://github.com/palantir/blueprint/blob/develop/packages/icons/src/loading-icons.mdx

Illustrates how to use custom loaders with bundlers other than Webpack, using Vite as an example. This snippet shows the import of Icons and IconPaths.

```typescript
import { Icons, IconPaths } from "@blueprintjs/icons";

```

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

### Basic InputGroup Example

Source: https://github.com/palantir/blueprint/blob/develop/packages/core/src/components/forms/input-group.mdx

Demonstrates the basic usage of the InputGroup component, which functions similarly to a standard React input element.

```tsx
/**
 * Example of a basic InputGroup. 
 * This component can be used in controlled or uncontrolled fashion.
 */
const InputGroupExample = () => (
  <InputGroup
    placeholder="Type something..."
    leftIcon="search"
    rightElement={<Button icon="filter" minimal={true} />}
  />
);
```

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

### DatePicker Localized Example

Source: https://github.com/palantir/blueprint/blob/develop/packages/datetime/src/components/date-picker/date-picker.mdx

Example demonstrating the DatePicker component with localization applied. Note that built-in shortcut labels are not localized by default and require custom shortcuts for translation.

```tsx
import { DatePicker } from "@blueprintjs/datetime";
import enUS from "date-fns/locale/en-US";

export const DatePickerLocalizedExample: React.FC = () => {
    return <DatePicker locale={enUS} />; 
};

```

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

### Theme Override Example

Source: https://github.com/palantir/blueprint/blob/develop/packages/core/src/design-tokens/README.md

Illustrates how dark mode theme files override base tokens by redefining values and extensions.

```json
// base/surface.tokens.json
"strong": { "$value": "{intent.default.rest}", "$extensions": { "com.blueprint.derive": { "alpha": 0.25 } } }

// themes/dark/surface.tokens.json
"strong": { "$value": "{palette.white}", "$extensions": { "com.blueprint.derive": { "alpha": 0.3 } } }
```

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

### Basic Numeric Input Example

Source: https://github.com/palantir/blueprint/blob/develop/packages/core/src/components/forms/numeric-input.mdx

Demonstrates the default behavior of NumericInput, supporting standard keyboard and mouse interactions for number input.

```tsx
import { NumericInput } from "@blueprintjs/core";

export class NumericInputExample extends React.Component {
    public render() {
        return <NumericInput onValueChange={this.handleValueChange} />;
    }

    private handleValueChange = (valueAsNumber: number, valueAsString: string) => {
        console.log("Value as number:", valueAsNumber);
        console.log("Value as string:", valueAsString);
    };
}
```

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

### Controlled Tabs Example

Source: https://github.com/palantir/blueprint/blob/develop/packages/core/src/components/tabs/tabs.mdx

Illustrates how to use the Tabs component in a controlled manner, managing the selected tab ID externally and rendering the tab panel manually.

```APIDOC
## Controlled Tabs Example

### Description
This example demonstrates how to manage the `Tabs` component in a controlled mode. The `selectedTabId` state is managed externally, and the `TabPanel` is rendered separately, allowing for more flexible DOM manipulation of panels.

### Component Breakdown
- **Tabs**: Configured with `selectedTabId` and `onChange` to control the active tab.
- **Tab**: Defines the available tabs, each with a unique `id` and `title`. The `panel` prop is omitted here.
- **TabPanel**: Renders the content for the currently selected tab, linked via `id`, `selectedTabId`, and `parentId`.

### Code Example
```tsx
import * as React from "react";
import { Tab, Tabs, TabPanel, type TabId } from "@blueprintjs/core";

function TabsControlledExample() {
    const TABS_PARENT_ID = React.useId();
    const [selectedTabId, setSelectedTabId] = React.useState<TabId>("Home");

    return (
        <>
            <Tabs id={TABS_PARENT_ID} onChange={setSelectedTabId} selectedTabId={selectedTabId}>
                <Tab id="Home" title="Home" />
                <Tab id="Files" title="Files" />
            </Tabs>
            <TabPanel
                id={selectedTabId}
                selectedTabId={selectedTabId}
                parentId={TABS_PARENT_ID}
                panel={<p>The current panel id is: "{selectedTabId}"</p>}
            />
        </>
    );
}
```
```

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

### Simulate Popover Interactions in Tests

Source: https://github.com/palantir/blueprint/blob/develop/packages/core/src/components/popover/popover.mdx

This example demonstrates how to simulate mouse events on a Popover and its target in a test environment, including handling asynchronous rendering updates with `setTimeout`.

```tsx
import { Classes, Overlay2, Popover } from "@blueprintjs/core";
import { assert } from "chai";
import { mount } from "enzyme";
import { Target } from "react-popper";

wrapper = mount(
    <Popover usePortal={false} interactionKind="hover" content={<div>Content</div>}>
        <div>Target</div>
    </Popover>,
);

wrapper.find(Target).simulate("mouseenter");

// hostNodes() is an Enzyme 3 helper that retains only native-HTML nodes.
wrapper.find(`.${Classes.POPOVER}`).hostNodes().simulate("mouseenter");
wrapper.find(`.${Classes.POPOVER}`).hostNodes().simulate("mouseleave");

setTimeout(() => {
    // Popover delays closing using setTimeout, so need to defer this check too.
    const isOpen = wrapper.find(Overlay2).prop("isOpen");
    assert.equal(isOpen, false);
});
```

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

### Table Sorting Example

Source: https://github.com/palantir/blueprint/blob/develop/packages/table/src/docs/table-features.mdx

Demonstrates a sortable table with custom sorting operations for different column types. It also highlights cell selection and copying functionality.

```jsx
import { Table, Column, Cell } from "@blueprintjs/table";

const TableSortableExample = () => (
  <Table
    numRows={10}
    getCellClipboardData={(row, col) => `Cell ${row}, ${col}`}
    onCopy={({ regions }) => {
      // Handle copy logic here
      console.log("Copied regions:", regions);
    }}
  >
    <Column
      name="Column 1"
      renderCell={row => <Cell>{`Row ${row}, Col 1`}</Cell>}
      // Add sorting props here if needed
    />
    <Column
      name="Column 2"
      renderCell={row => <Cell>{`Row ${row}, Col 2`}</Cell>}
      // Add sorting props here if needed
    />
  </Table>
);
```

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

### Launch Local Documentation Server

Source: https://github.com/palantir/blueprint/wiki/Release-process

Run the documentation preparation task to copy assets and launch a local HTTP server for spot-checking the documentation site.

```sh
pnpm site
```

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

### Build Documentation and Bundles

Source: https://github.com/palantir/blueprint/blob/develop/CONTRIBUTING.md

Execute this command at the repository root to build the Blueprint documentation and other project bundles.

```shell
pnpm bundle
```

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

### Prepare and Build Documentation Site

Source: https://github.com/palantir/blueprint/wiki/Release-process

Clean previous builds, clear the Nx cache, compile the project, and prepare the site for deployment. This is a prerequisite for updating the documentation site.

```sh
pnpm clean && pnpm nx clear-cache && pnpm compile && pnpm dist
```

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

### Compile All Libraries

Source: https://github.com/palantir/blueprint/blob/develop/CONTRIBUTING.md

Run this command at the repository root to build all libraries within the Blueprint project.

```shell
pnpm compile
```

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

### Use useOverlayStack Hook

Source: https://github.com/palantir/blueprint/blob/develop/packages/core/src/hooks/overlays/use-overlay-stack.mdx

Demonstrates how to use the useOverlayStack hook to open and close overlays. This example shows the typical lifecycle management of an overlay instance, including registration on mount and unregistration on unmount.

```tsx
import { OverlayInstance, OverlayProps, Portal, useOverlayStack, usePrevious } from "@blueprintjs/core";
import * as React from "react";

export function Example(props: OverlayProps) {
    const { autoFocus, children, enforceFocus, hasBackdrop, isOpen, usePortal } = props;
    const { openOverlay, closeOverlay } = useOverlayStack();

    const containerElement = React.useRef<HTMLDivElement>(null);

    const bringFocusInsideOverlay = React.useCallback(() => {
        // TODO: implement
    }, []);

    const handleDocumentFocus = React.useCallback((e: FocusEvent) => {
        // TODO: implement
    }, []);

    const id = React.useId();
    const instance = React.useMemo<OverlayInstance>( 
        () => ({
            bringFocusInsideOverlay,
            containerElement,
            handleDocumentFocus,
            id,
            props: {
                autoFocus,
                enforceFocus,
                hasBackdrop,
                usePortal,
            },
        }),
        [autoFocus, bringFocusInsideOverlay, enforceFocus, handleDocumentFocus, hasBackdrop, id, usePortal],
    );

    const prevIsOpen = usePrevious(isOpen) ?? false;
    React.useEffect(() => {
        if (!prevIsOpen && isOpen) {
            // just opened
            openOverlay(instance);
        }

        if (prevIsOpen && !isOpen) {
            // just closed
            closeOverlay(instance);
        }
    }, [isOpen, openOverlay, closeOverlay, prevIsOpen, instance]);

    // run once on unmount
    React.useEffect(() => {
        return () => {
            if (isOpen) {
                closeOverlay(instance);
            }
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    return usePortal ? <Portal>{children}</Portal> : children;
}
```

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

### Build Design Tokens

Source: https://github.com/palantir/blueprint/blob/develop/packages/core/src/design-tokens/README.md

Run this command to generate the design tokens from source files.

```bash
pnpm run build:tokens  # Generate tokens
```

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

### DatePicker Custom Modifiers

Source: https://github.com/palantir/blueprint/blob/develop/packages/datetime/src/components/date-picker/date-picker.mdx

Example of adding custom modifiers to the DatePicker using `dayPickerProps`. This example highlights every odd-numbered day.

```tsx
import { DatePicker } from "@blueprintjs/datetime";

const Example: React.FC = () => {
    return (
        <DatePicker
            dayPickerProps={{
                modifiers: {
                    oddDay: (date) => date.getDate() % 2 !== 0,
                },
                className: "bp4-date-picker-modifier-example",
            }}
        />
    );
};

export default Example;

```

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

### Run Development Server

Source: https://github.com/palantir/blueprint/blob/develop/README.md

Use this command from the root directory to watch for changes across all packages and run the docs application with webpack-dev-server.

```bash
pnpm dev
```

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

### Create and Show Toast with OverlayToaster

Source: https://github.com/palantir/blueprint/blob/develop/packages/core/src/components/toast/toast.mdx

Use the static `create` method to instantiate an OverlayToaster and then use its `show` method to display a toast. This is the recommended approach for managing toasts throughout an application.

```typescript
const myToaster: Toaster = await OverlayToaster.create({ position: "bottom" });
myToaster.show({ ...toastOptions });
```

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

### DateInput2 Migration Utilities Example

Source: https://github.com/palantir/blueprint/wiki/datetime2-component-migration

Shows how to use DateInput2MigrationUtils to adapt existing DateInput value and onChange handlers to the new ISO string-based API. This utility helps in smoothly transitioning to the updated component.

```ts
import { DateInput2, DateInput2MigrationUtils } from "@blueprintjs/datetime2";
import React, { useCallback, useState } from "react";

function Example() {
  const [dateValue, setDateValue] = useState<Date | null>(null);
  const handleChange = useCallback(setDateValue, [setDateValue]);
  const formatDate = useCallback((date: Date) => date.toLocaleString(), []);
  const parseDate = useCallback((str: string) => new Date(str), []);

  return (
    <DateInput2
      formatDate={formatDate}
      onChange={DateInput2MigrationUtils.onChangeAdapter(handleChange)}
      parseDate={parseDate}
      placeholder="M/D/YYYY"
      value={DateInput2MigrationUtils.valueAdapter(dateValue)}
    />
  );
}
```

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

### SCSS Example: Stacking Primary Tint on Default Surface

Source: https://github.com/palantir/blueprint/blob/develop/packages/core/src/design-tokens/USAGE.md

Illustrates how to apply a primary tint layer on top of the default surface background using CSS variables for background-color and background-image.

```scss
background-color: var(--bp-surface-background-color-default-rest);
background-image: var(--bp-surface-layer-primary);
```

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

### Import Datetime Stylesheet (HTML)

Source: https://github.com/palantir/blueprint/blob/develop/packages/datetime/src/index.mdx

Include the Blueprint Datetime stylesheet in your HTML.

```html
<link href="path/to/node_modules/@blueprintjs/datetime/lib/css/blueprint-datetime.css" rel="stylesheet" />
```

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

### Migrating ContextMenu.show() to showContextMenu

Source: https://github.com/palantir/blueprint/wiki/ContextMenu2-migration

This example demonstrates migrating from the imperative ContextMenu.show() API to the new showContextMenu function from @blueprintjs/popover2. It shows how to replace the old method call with the new function, including event handling and menu content definition.

```diff
- import { ContextMenu, Menu, MenuItem } from "@blueprintjs/core";
+ import { Menu, MenuItem } from "@blueprintjs/core";
+ import { showContextMenu, hideContextMenu } from "@blueprintjs/popover2";

const menu = (
  <Menu>
    <MenuItem text="first" />
    {/* more items... */}
-     <MenuItem text="close" onClick={() => ContextMenu.hide()} />
+     <MenuItem text="close" onClick={hideContextMenu} />
  </Menu>
);

function MyComponent() {
  const handleContextMenuClosed = React.useCallback(() => {
    console.info("closed context menu");
  }, []);
  const handleContextMenu = React.useCallback((event: React.MouseEvent<HTMLElement>) => {
    event.preventDefault();
-     ContextMenu.show(menu, { left: e.clientX, top: e.clientY }, handleContextMenuClosed);
+     showContextMenu({
+       content: menu,
+       targetOffset: {
+         left: e.clientX,
+         top: e.clientY
+       },
+       onClose: handleContextMenuClosed,
+     });
  }, []);

  return (
    <div onContextMenu={handleContextMenu}>
      {/* interactive content */}
    </div>
  );
}
```

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

### npm Install with Legacy Peer Dependencies

Source: https://github.com/palantir/blueprint/wiki/React-19-Support

When using older versions of Blueprint v6 (prior to v6.16.0) with React 19, npm may fail with an ERESOLVE error. Use this flag to proceed with the installation.

```sh
npm install --legacy-peer-deps
```

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

### Basic Callout Example

Source: https://github.com/palantir/blueprint/blob/develop/packages/core/src/components/callout/callout.mdx

Render a simple Callout with a title and basic content.

```tsx
<Callout title="Our generic title">This is an example callout, with simple content</Callout>
```

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

### Custom Class Styling

Source: https://github.com/palantir/blueprint/blob/develop/packages/core/src/docs/classes.mdx

Example of styling a custom class added to a Blueprint component.

```scss
.my-custom-class {
    width: 4000px;
}
```

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

### Checkout and Pull Latest Develop Branch

Source: https://github.com/palantir/blueprint/wiki/Release-process

Ensure you are on the latest commit of the develop branch before starting the release process.

```sh
git checkout develop
git pull
```

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

### KSS Section Example with @react-example Flag

Source: https://github.com/palantir/blueprint/wiki/KSS-documentation

This SCSS comment block demonstrates the structure of a KSS section, including a title, Markdown description, and the use of the @react-example flag to specify a React component for rendering.

```scss
/*
Section title

Markdown description...

@react-example DialogExample

Styleguide ref.ref.ref
*/
```

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

### Convert Icon Component to Literal

Source: https://github.com/palantir/blueprint/blob/develop/packages/tslint-config/README.md

Example of converting a JSX Icon component to an icon string literal using the fixer.

```diff
-<Button icon={<GraphIcon />} />
+<Button icon="graph" />
```

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

### Convert Icon Literal to Component

Source: https://github.com/palantir/blueprint/blob/develop/packages/tslint-config/README.md

Example of converting an icon string literal to a JSX Icon component using the fixer.

```diff
-<Button icon="tick" />
+<Button icon={<TickIcon />} />
```

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

### Object Card Layout with Box

Source: https://github.com/palantir/blueprint/blob/develop/packages/labs/src/components/box/box.mdx

A practical example of composing a card layout using Box with multiple layout props.

```jsx
<Box
  display="flex"
  flexDirection="column"
  alignItems="center"
  padding="medium"
  border="1px solid #ccc"
  borderRadius="medium"
  boxShadow="small"
>
  <Box component="img" src="/path/to/image.png" width="100%" borderRadius="medium" />
  <Box marginTop="medium">
    <Box fontSize="large" fontWeight="bold">Card Title</Box>
    <Box marginTop="small" color="gray">
      A brief description of the card content.
    </Box>
  </Box>
</Box>
```

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

### Auto-fix Blueprint Icon Components to Literal

Source: https://github.com/palantir/blueprint/blob/develop/packages/eslint-plugin/README.md

Example of the '@blueprintjs/icon-components' rule auto-fixing code to use IconName string literals.

```diff
```diff
-<Button icon={<GraphIcon />} />
+<Button icon="graph" />
```
```

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

### Auto-fix Blueprint Icon Components to Component

Source: https://github.com/palantir/blueprint/blob/develop/packages/eslint-plugin/README.md

Example of the '@blueprintjs/icon-components' rule auto-fixing code to use JSX Icon components.

```diff
```diff
-<Button icon="tick" />
+<Button icon={<TickIcon />} />
```
```

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

### Lint Project

Source: https://github.com/palantir/blueprint/blob/develop/CONTRIBUTING.md

Run this command to ensure the project adheres to linting standards. Editor integration provides real-time feedback.

```shell
pnpm lint
```

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

### Configure Popover for Testing with Zero Delays

Source: https://github.com/palantir/blueprint/blob/develop/packages/core/src/components/popover/popover.mdx

In tests, set `usePortal={false}` and zero out `hoverCloseDelay` and `hoverOpenDelay` to simplify interactions and avoid issues with transitions and delays.

```tsx
<Popover {...yourProps} usePortal={false} hoverCloseDelay={0} hoverOpenDelay={0}>
    {yourTarget}
</Popover>
```

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

### Update Popper.js modifier options

Source: https://github.com/palantir/blueprint/wiki/Popover2-migration

Modifier options in Popover2 are now nested under an 'options' property. For example, 'padding' for the 'flip' modifier.

```javascript
modifiers={{ flip: { options: { padding: 10 }}}}
```

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

### Import Collapse Component

Source: https://github.com/palantir/blueprint/blob/develop/packages/core/src/components/collapse/collapse.mdx

Import the Collapse component from the Blueprint UI library.

```ts
import { Collapse } from "@blueprintjs/core";
```

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

### Import Breadcrumbs Component

Source: https://github.com/palantir/blueprint/blob/develop/packages/core/src/components/breadcrumbs/breadcrumbs.mdx

Import the Breadcrumbs component from the Blueprint core package. This is a required setup step for using the component.

```ts
import { Breadcrumbs } from "@blueprintjs/core";
```