### Implementing Conditional Spotlight Targets with useSpotlight (JSX)

Source: https://github.com/jjcall/ads-docs-mirror/blob/main/docs/onboardingSpotlight.md

This React component demonstrates how to create a spotlight tour where the steps are dynamically determined based on whether their associated targets are rendered. It uses the `useSpotlight` hook to access `isTargetRendered`, filtering the list of potential spotlight steps before rendering the active one. Dependencies include React and several components from the @atlaskit library, particularly `@atlaskit/onboarding`. The example includes buttons that serve as targets and controls to start the tour and toggle the visibility of one target.

```jsx
import React, { useState } from 'react';

import ButtonGroup from '@atlaskit/button/button-group';
import Button, { IconButton } from '@atlaskit/button/new';
import CommentAddIcon from '@atlaskit/icon/glyph/media-services/add-comment';
import CopyIcon from '@atlaskit/icon/glyph/copy';
import FullscreenEnterIcon from '@atlaskit/icon/glyph/vid-full-screen-on';
import {
	Spotlight,
	SpotlightManager,
	SpotlightTarget,
	SpotlightTransition,
	useSpotlight,
} from '@atlaskit/onboarding';
import { N0 } from '@atlaskit/theme/colors';
import { token } from '@atlaskit/tokens';

const SpotlightWithConditionalTargets = () => {
	const [active, setActive] = useState<number | null>(null);
	const [isSecondTargetVisible, setIsSecondTargetVisible] = useState(true);
	const { isTargetRendered } = useSpotlight();

	const start = () => setActive(0);
	const next = () => setActive((active || 0) + 1);
	const back = () => setActive((active || 0) - 1);
	const end = () => setActive(null);

	const renderActiveSpotlight = () => {
		if (active == null) {
			return null;
		}

		const spotlights = [
			{
				target: 'comment',
				element: (
					<Spotlight
						actions={[
							{
								onClick: () => next(),
								text: 'Next',
							},
							{ onClick: () => end(), text: 'Dismiss', appearance: 'subtle' },
						]}
						heading="Add a comment"
						target="comment"
						key="comment"
						targetRadius={3}
						targetBgColor={N0}
					>
						Quickly add a comment to the issue.
					</Spotlight>
				),
			},
			{
				target: 'copy',
				element: (
					<Spotlight
						actions={[
							{ onClick: () => next(), text: 'Next' },
							{ onClick: () => back(), text: 'Go back', appearance: 'subtle' },
							{ onClick: () => end(), text: 'Dismiss', appearance: 'subtle' },
						]}
						heading="Copy code"
						target="copy"
						key="copy"
						targetRadius={3}
						targetBgColor={N0}
					>
						Trying to bring one of our components into your project? Click to copy the example code,
						then go ahead paste it in your editor.
					</Spotlight>
				),
			},
			{
				target: 'expand',
				element: (
					<Spotlight
						actions={[
							{ onClick: () => end(), text: 'OK' },
							{ onClick: () => back(), text: 'Go back', appearance: 'subtle' },
						]}
						heading="Expand to full screen"
						target="expand"
						key="expand"
						targetRadius={3}
						targetBgColor={N0}
					>
						For a focused view of the example, you can expand to full screen.
					</Spotlight>
				),
			},
		]
			.filter(({ target }) => isTargetRendered(target))
			.map(({ element }) => element);

		return spotlights[active];
	};

	return (
		<>
			<ButtonGroup label="Choose spotlight options">
				<SpotlightTarget name="comment">
					<IconButton icon={CommentAddIcon} label="comment" />
				</SpotlightTarget>
				{isSecondTargetVisible && (
					<SpotlightTarget name="copy">
						<IconButton icon={CopyIcon} label="Copy" />
					</SpotlightTarget>
				)}
				<SpotlightTarget name="expand">
					<IconButton icon={FullscreenEnterIcon} label="Full screen" />
				</SpotlightTarget>
			</ButtonGroup>
			{/* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */}
			<div style={{ marginTop: token('space.200') }}>
				<ButtonGroup label="Choose spotlight options">
					<Button appearance="primary" onClick={() => start()}>
						Start example tour
					</Button>
					<Button onClick={() => setIsSecondTargetVisible(!isSecondTargetVisible)}>
						Show/hide second spotlight target
					</Button>
				</ButtonGroup>
			</div>
			<SpotlightTransition>{renderActiveSpotlight()}</SpotlightTransition>
		</>
	);
};

export default function SpotlightWithConditionalTargetsExample() {
	return (
		<SpotlightManager>
			<SpotlightWithConditionalTargets />
		</SpotlightManager>
	);
}
```

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

### Install Project Dependencies (Shell)

Source: https://github.com/jjcall/ads-docs-mirror/blob/main/README.md

Installs the necessary Node.js dependencies for the project using npm.

```Shell
npm install
```

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

### Example Implementation of Delayed and Fading Spinners

Source: https://github.com/jjcall/ads-docs-mirror/blob/main/docs/spinner.md

This code provides a comprehensive example demonstrating how to use the @atlaskit/spinner component with the delay prop and how to integrate it with @atlaskit/motion components like FadeIn and ExitingPersistence for smooth transitions. It includes a context for managing delay values and a Harness component to wrap different spinner usage examples (basic delayed spinner and cross-fading spinner/content).

```jsx
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';

import { css, jsx } from '@compiled/react';

import Avatar from '@atlaskit/avatar';
import Button from '@atlaskit/button/new';
import { Label } from '@atlaskit/form';
import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
import Select, { type ValueType } from '@atlaskit/select';
import Spinner from '@atlaskit/spinner';
import { token } from '@atlaskit/tokens';

type Delays = {
	spinner: number;
	content: number;
};
const DelayContext = React.createContext<Delays>({ spinner: 0, content: 0 });

type Phase = 'stopped' | 'loading' | 'ready';

const layoutStyles = css({
	display: 'grid',
	justifyContent: 'center',
	gridTemplateColumns: 'repeat(auto-fit, minmax(0, 300px))',
	marginBlockStart: token('space.400', '32px'),
});

const controlContainerStyles = css({
	display: 'flex',
	maxWidth: 300,
	margin: '0 auto',
	gap: token('space.100', '8px'),
	flexDirection: 'column',
});

const columnStyles = css({
	display: 'flex',
	alignItems: 'center',
	flexDirection: 'column',
	textAlign: 'center',
});

const columnInfoStyles = css({ minHeight: 70 });

const loadingContainerStyles = css({
	display: 'flex',
	width: 200,
	height: 200,
	alignItems: 'center',
	justifyContent: 'center',
});

const spinnerStyles = css({ position: 'absolute' });

function Harness({
	children,
	title,
	description,
}: {
	children: (phase: Phase, delays: Delays) => React.ReactElement;
	title: string;
	description: string;
}) {
	const [phase, setPhase] = useState<Phase>('stopped');
	const delays: Delays = useContext(DelayContext);

	useEffect(
		function onPhaseChange() {
			if (phase === 'loading') {
				const id = window.setTimeout(() => setPhase('ready'), delays.content);
				return () => window.clearTimeout(id);
			}
		},
		[delays.content, phase],
	);

	return (
		<div css={columnStyles}>
			<h4>{title}</h4>
			<p css={columnInfoStyles}>{description}</p>
			<Button onClick={() => setPhase('loading')} isDisabled={phase === 'loading'}>
				{phase === 'loading' ? 'running' : 'start'}
			</Button>
			<div css={loadingContainerStyles}>{children(phase, delays)}</div>
		</div>
	);
}

function Basic() {
	return (
		<Harness title="Default" description="No fadeout of spinner">
			{(phase: Phase, delays: Delays) => (
				<React.Fragment>
					{phase === 'ready' && <Avatar size="xlarge" />}
					{phase === 'loading' && (
						<span css={spinnerStyles}>
							<Spinner size="xlarge" delay={delays.spinner} label="Loading" />
						</span>
					)}
				</React.Fragment>
			)}
		</Harness>
	);
}

function CrossFade() {
	return (
		<Harness title="Cross fade" description="Cross fading out the spinners exit with content">
			{(phase: Phase, delays: Delays) => (
				<React.Fragment>
					<ExitingPersistence appear>
						{phase === 'ready' && (
							<FadeIn>
								{(props) => (
									<span {...props}>
										<Avatar size="xlarge" />
									</span>
								)}
							</FadeIn>
						)}
					</ExitingPersistence>
					<ExitingPersistence>
						{phase === 'loading' && (
							<FadeIn>
								{(props) => (
									<span {...props} css={spinnerStyles}>
										<Spinner size="xlarge" delay={delays.spinner} label="Loading" />
									</span>
								)}
							</FadeIn>
						)}
					</ExitingPersistence>
				</React.Fragment>
			)}
		</Harness>
	);
}

type Option = { value: string; label: string };

const contentDelayOptions: Option[] = [
	{ value: '10', label: 'Content load time: tiny (10ms)' },
	{ value: '50', label: 'Content load time: small (50ms)' },
	{ value: '100', label: 'Content load time: medium (100ms)' },
	{ value: '500', label: 'Content load time: long (500ms)' },

```

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

### Install Atlaskit Primitives Package

Source: https://github.com/jjcall/ads-docs-mirror/blob/main/docs/responsiveBreakpoints.md

Installs the @atlaskit/primitives package using Yarn, which provides access to design system primitives including breakpoints and media queries.

```Shell
yarn add @atlaskit/primitives
```

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

### Example using useCustomSkipLink with PageLayout

Source: https://github.com/jjcall/ads-docs-mirror/blob/main/docs/pageLayout.md

This example demonstrates how to use the `useCustomSkipLink` hook within a React application using `@atlaskit/page-layout`. It shows linking to an element inside the layout (`ListExample`) with dynamic ID/position updates, and linking to elements outside the layout (`#intro-section`, `#external-footer`) by calling the hook from a component rendered within `PageLayout`. It sets up a basic page structure with various PageLayout slots.

```jsx
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

import { useState } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { jsx } from '@emotion/react';

import {
	Banner,
	Content,
	LeftSidebarWithoutResize,
	Main,
	PageLayout,
	RightPanel,
	TopNavigation,
	useCustomSkipLink,
} from '@atlaskit/page-layout';
import { token } from '@atlaskit/tokens';

import { SlotLabel, SlotWrapper } from '../common';

const baseId = 'list-example';
const ListExample = () => {
	const skipLinkCount = document.querySelectorAll('[data-skip-link-wrapper] a').length;
	const [id, setId] = useState(baseId);
	const [position, setPosition] = useState(2);
	useCustomSkipLink(id, 'List example', position);

	const moveDown = () => {
		setPosition((pos) => Math.min(pos + 1, skipLinkCount));
	};
	const moveUp = () => {
		setPosition((pos) => Math.max(pos - 1, 0));
	};
	const changeId = () => {
		setId(`${baseId}${Date.now()}`);
	};

	return (
		<ol id={id}>
			<li>
				This list is an example of an element that you can skipped to that is <em>nested inside</em>{' '}
				the PageLayout component using the useCustomSkipLink hook.
			</li>
			<li>
				Current position of <i>List example</i> skip link: <b>{position}</b>
				<button onClick={moveUp} type="button">
					Move up
				</button>
				<button onClick={moveDown} type="button">
					Move down
				</button>
			</li>
			<li>
				Current id: <b>{id}</b>
				<button onClick={changeId} type="button">
					Update the id of this section
				</button>
			</li>
		</ol>
	);
};

// Registering custom skip links
// whose targets live outside PageLayout
const RegisterCustomSkipLinks = () => {
	useCustomSkipLink('external-footer', 'External Footer', 7);
	useCustomSkipLink('intro-section', 'Intro section', 0);

	return null;
};

const BasicGrid = () => {
	return (
		<div>
			<section id="intro-section">
				<p>
					This section isn't part of PageLayout, but you can still use skip links to jump to it with
					the `useCustomSkipLink` hook that is exported from PageLayout.
				</p>
			</section>
			<PageLayout>
				<RegisterCustomSkipLinks />
				<Banner testId="banner" id="banner" skipLinkTitle="Banner" height={60} isFixed={false}>
					<SlotWrapper borderColor={token('color.border.accent.yellow')}>
						<SlotLabel>Banner</SlotLabel>
					</SlotWrapper>
				</Banner>
				<TopNavigation
					testId="topNavigation"
					id="product-navigation"
					skipLinkTitle="Product Navigation"
					height={60}
					isFixed={false}
				>
					<SlotWrapper borderColor={token('color.border.accent.blue')}>
						<SlotLabel>Product Navigation</SlotLabel>
					</SlotWrapper>
				</TopNavigation>
				<Content testId="content">
					<LeftSidebarWithoutResize
						testId="leftSidebar"
						id="space-navigation"
						skipLinkTitle="Project Navigation"
						isFixed={false}
						width={125}
					>
						<SlotWrapper borderColor={token('color.border.accent.green')} hasExtraPadding>
							<SlotLabel isSmall>Space Navigation</SlotLabel>
						</SlotWrapper>
					</LeftSidebarWithoutResize>
					<Main testId="main" id="main" skipLinkTitle="Main Content">
						<SlotWrapper borderColor={token('color.border')} minHeight={400}>
							<SlotLabel isSmall>Main Content</SlotLabel>
							<p>Visit the first focusable element on the page to see the skip links menu</p>
							<ListExample />
						</SlotWrapper>
					</Main>
				</Content>
				<RightPanel
					testId="rightPanel"
					id="help-panel"
					skipLinkTitle="Help Panel"
					isFixed={false}
					width={125}
				>
					<SlotWrapper borderColor={token('color.border.accent.orange')}>
						<SlotLabel>Help Panel</SlotLabel>
						<p>It's also possible to</p>
					</SlotWrapper>
				</RightPanel>
			</PageLayout>
			<footer id="external-footer">
				This footer isn't part of PageLayout, but you can still use skip links to jump to it with
				the `useCustomSkipLink` hook that is exported from PageLayout.
			</footer>
		</div>
	);
};

export default BasicGrid;
```

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

### Implementing Integrated Page Layout with Atlassian Navigation and Side Navigation - JSX

Source: https://github.com/jjcall/ads-docs-mirror/blob/main/docs/pageLayout.md

This snippet provides a comprehensive example of building a page layout using Atlassian UI components. It demonstrates the composition of PageLayout with TopNavigation, LeftSidebar, and Main content areas, integrating AtlassianNavigation for the top bar and SideNavigation for the left sidebar. It includes helper components for the navigation elements like product home, create button, and help popup.

```jsx
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { useState } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { jsx } from '@emotion/react';

import {
	AtlassianNavigation,
	Create,
	Help,
	PrimaryButton,
	ProductHome,
} from '@atlaskit/atlassian-navigation';
import noop from '@atlaskit/ds-lib/noop';
import { ConfluenceIcon, ConfluenceLogo } from '@atlaskit/logo';
import { ButtonItem, MenuGroup, Section } from '@atlaskit/menu';
import { Content, LeftSidebar, Main, PageLayout, TopNavigation } from '@atlaskit/page-layout';
import Popup from '@atlaskit/popup';
import {
	Header,
	NavigationHeader,
	NestableNavigationContent,
	NestingItem,
	SideNavigation,
} from '@atlaskit/side-navigation';

import { SlotLabel, SlotWrapper } from '../common';

export default function ProductLayout() {
	return (
		<PageLayout>
			<TopNavigation
				isFixed={true}
				id="confluence-navigation"
				skipLinkTitle="Confluence Navigation"
			>
				<TopNavigationContents />
			</TopNavigation>
			<Content testId="content">
				<LeftSidebar
					isFixed={false}
					width={450}
					id="project-navigation"
					skipLinkTitle="Project Navigation"
					testId="left-sidebar"
					resizeGrabAreaLabel="Resize Current project sidebar"
					resizeButtonLabel="Current project sidebar"
					valueTextLabel="Width"
				>
					<SideNavigationContent />
				</LeftSidebar>
				<Main id="main-content" skipLinkTitle="Main Content">
					<SlotWrapper>
						<SlotLabel>Main Content</SlotLabel>
					</SlotWrapper>
				</Main>
			</Content>
		</PageLayout>
	);
}

function TopNavigationContents() {
	return (
		<AtlassianNavigation
			label="site"
			moreLabel="More"
			primaryItems={[
				<PrimaryButton isHighlighted>Item 1</PrimaryButton>,
				<PrimaryButton>Item 2</PrimaryButton>,
				<PrimaryButton>Item 3</PrimaryButton>,
				<PrimaryButton>Item 4</PrimaryButton>,
			]}
			renderProductHome={ProductHomeExample}
			renderCreate={DefaultCreate}
			renderHelp={HelpPopup}
		/>
	);
}

const SideNavigationContent = () => {
	return (
		<SideNavigation label="Project navigation" testId="side-navigation">
			<NavigationHeader>
				<Header description="Sidebar header description">Sidebar Header</Header>
			</NavigationHeader>
			<NestableNavigationContent initialStack={[]}>
				<Section>
					<NestingItem id="1" title="Nested Item">
						<Section title="Group 1">
							<ButtonItem>Item 1</ButtonItem>
							<ButtonItem>Item 2</ButtonItem>
						</Section>
					</NestingItem>
				</Section>
			</NestableNavigationContent>
		</SideNavigation>
	);
};

/*
 * Components for composing top and side navigation
 */

export const DefaultCreate = () => (
	<Create buttonTooltip="Create" iconButtonTooltip="Create" onClick={noop} text="Create" />
);

const ProductHomeExample = () => (
	<ProductHome
		onClick={console.log}
		icon={ConfluenceIcon}
		logo={ConfluenceLogo}
		siteTitle="Product"
	/>
);

export const HelpPopup = () => {
	const [isOpen, setIsOpen] = useState(false);

	const onClick = () => {
		setIsOpen(!isOpen);
	};

	const onClose = () => {
		setIsOpen(false);
	};

	return (
		<Popup
			shouldRenderToParent
			placement="bottom-start"
			content={HelpPopupContent}
			isOpen={isOpen}
			onClose={onClose}
			trigger={(triggerProps) => (
				<Help isSelected={isOpen} onClick={onClick} tooltip="Help" {...triggerProps} />
			)}
		/>
	);
};

const HelpPopupContent = () => (
	<MenuGroup>
		<Section title={'Menu Heading'}>
			<ButtonItem>Item 1</ButtonItem>
			<ButtonItem>Item 2</ButtonItem>
			<ButtonItem>Item 3</ButtonItem>
			<ButtonItem>Item 4</ButtonItem>
		</Section>
		<Section title="Menu Heading with separator" hasSeparator>
			<ButtonItem>Item 5</ButtonItem>
			<ButtonItem>Item 6</ButtonItem>
		</Section>
	</MenuGroup>
);
```

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

### React/JSX Example of Atlassian UI Component Layering

Source: https://github.com/jjcall/ads-docs-mirror/blob/main/docs/portal.md

This snippet provides a comprehensive example of how to integrate multiple Atlassian UI components that rely on portalling and layering. It includes components like ModalDialog, InlineDialog, Spotlight, Flag, and Tooltip, demonstrating their correct rendering order and interaction within a complex UI structure. Dependencies include various packages from `@atlaskit/*` and `@emotion/react` for styling.

```jsx
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { Fragment, type ReactNode, useState } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';

import Button from '@atlaskit/button/new';
import Flag, { FlagGroup } from '@atlaskit/flag';
import EmojiIcon from '@atlaskit/icon/glyph/emoji';
import InlineDialog from '@atlaskit/inline-dialog';
import ModalDialog, {
	ModalBody,
	ModalFooter,
	ModalHeader,
	ModalTitle,
	ModalTransition,
} from '@atlaskit/modal-dialog';
import {
	Spotlight,
	SpotlightManager,
	SpotlightTarget,
	SpotlightTransition,
} from '@atlaskit/onboarding';
import { token } from '@atlaskit/tokens';
import Tooltip from '@atlaskit/tooltip';

const tooltipContainerStyles = css({
	backgroundColor: token('color.background.neutral'),
});

const TooltipButton = ({
	children,
	onClick,
	id,
}: {
	children: ReactNode;
	onClick: () => void;
	id?: string;
}) => (
	<div css={tooltipContainerStyles}>
		<Tooltip content="Click me">
			<Button id={id} onClick={onClick}>
				{children}
			</Button>
		</Tooltip>
	</div>
);

const spotlightContainerStyles = css({
	display: 'flex',
	padding: token('space.300'),
	justifyContent: 'space-between',
});

type SpotlightProps = {
	stepOne: ReactNode;
	stepTwo: ReactNode;
	stepThree: ReactNode;
	isOpen: boolean;
	onFinish: () => void;
};

const ThreeStepSpotlight = (props: SpotlightProps) => {
	const [step, setStep] = useState(1);
	const { stepOne, stepTwo, stepThree, isOpen, onFinish } = props;

	const next = () => {
		const nextStep = step + 1;
		if (nextStep > 3) {
			setStep(1);
			onFinish();
		} else {
			setStep(nextStep);
		}
	};

	return (
		<SpotlightManager>
			<div css={spotlightContainerStyles}>
				<SpotlightTarget name="1">{stepOne}</SpotlightTarget>
				<SpotlightTarget name="2">{stepTwo}</SpotlightTarget>
				<SpotlightTarget name="3">{stepThree}</SpotlightTarget>
			</div>
			<SpotlightTransition>
				{isOpen && (
					<Spotlight
						actions={[{ onClick: next, text: step === 3 ? 'Close' : 'Next' }]}
						heading={`Here is step ${step} of 3`}
						key={`${step}`}
						target={`${step}`}
					/>
				)}
			</SpotlightTransition>
		</SpotlightManager>
	);
};

type ModalProps = {
	onClose: () => void;
};

const Modal = (props: ModalProps) => {
	const [onboardingOpen, setOnboardingOpen] = useState(false);
	const [inlineOpen, setInlineOpen] = useState(false);
	const [flags, setFlags] = useState<number[]>([]);

	const toggleOnboarding = (onboardingOpen: boolean) => setOnboardingOpen(onboardingOpen);

	const toggleInline = (inlineOpen: boolean) => setInlineOpen(inlineOpen);

	const addFlag = () => setFlags([flags.length, ...flags]);

	const removeFlag = (id: number | string) => setFlags(flags.filter((v) => v !== id));

	const { onClose } = props;

	return (
		<Fragment>
			<ModalDialog onClose={onClose} testId="modal">
				<ModalHeader hasCloseButton>
					<ModalTitle>Modal dialog</ModalTitle>
				</ModalHeader>
				<ModalBody>
					<p>This dialog has three great features:</p>
					<ThreeStepSpotlight
						isOpen={onboardingOpen}
						onFinish={() => toggleOnboarding(false)}
						stepOne={
							<TooltipButton onClick={() => toggleOnboarding(true)} id={'showOnboardingBtn'}>
								Show onboarding
							</TooltipButton>
						}
						stepTwo={
							<InlineDialog content="This button is very nice" isOpen={inlineOpen}>
								<TooltipButton onClick={() => toggleInline(!inlineOpen)}>
									Show an inline dialog
								</TooltipButton>
							</InlineDialog>
						}
						stepThree={
							<TooltipButton onClick={() => addFlag()} id={'showFlagBtn'}>
								Show a flag
							</TooltipButton>
						}
					/>
				</ModalBody>
				<ModalFooter>
					<Button appearance="primary" onClick={onClose}>
						Close
					</Button>
				</ModalFooter>
			</ModalDialog>
			<FlagGroup onDismissed={(id: number | string) => removeFlag(id)}>
				{flags.map((id) => (
					<Flag
						id={id}
						key={`${id}`}
						icon={<EmojiIcon label="Smiley face" />}
						title={`${id + 1}: Whoa a new flag!`}
					/>
				))}
			</FlagGroup>
		</Fragment>
	);
};

const PortalComplexLayeringExample = () => {
	const [modals, setModals] = useState<number[]>([]);

	return (
		<Fragment>
			<ModalTransition>
				{modals.map((id: number) => (
					<Modal key={id} onClose={() => setModals(modals.filter((i: number) => i !== id))} />
				))}
			</ModalTransition>
			<TooltipButton id={'openDialogBtn'} onClick={() => setModals([1])}>
				Open Dialog
			</TooltipButton>
		</Fragment>
	);
};

export default PortalComplexLayeringExample;
```

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

### Rendering an Integration Layout with Atlassian UI Components

Source: https://github.com/jjcall/ads-docs-mirror/blob/main/docs/navigationSystem.md

This React functional component `IntegrationLayoutExample` demonstrates how to construct a typical application layout using components from `@atlassian/navigation-system` and `@atlaskit`. It includes a top bar with actions, a side navigation panel, and a main content area, managing panel visibility and settings popup state using `useReducer`. It serves as a comprehensive example of integrating various UI elements like buttons, menus, popups, and navigation items within a structured layout.

```jsx
import React, { useReducer } from 'react';



import Breadcrumbs, { BreadcrumbsItem } from '@atlaskit/breadcrumbs';

import { IconButton } from '@atlaskit/button/new';

import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';

import Heading from '@atlaskit/heading';

import CloseIcon from '@atlaskit/icon/glyph/cross';

import NotificationIcon from '@atlaskit/icon/glyph/notification';

import PageIcon from '@atlaskit/icon/glyph/page';

import PersonIcon from '@atlaskit/icon/glyph/person';

import ProjectIcon from '@atlaskit/icon/core/project';

import IssuesIcon from '@atlaskit/icon/glyph/issues';

import { JiraIcon, JiraLogo } from '@atlaskit/logo';

import { LinkItem, MenuGroup, Section } from '@atlaskit/menu';

import PageHeader from '@atlaskit/page-header';

import { Popup, PopupContent, PopupTrigger } from '@atlaskit/popup/experimental';

import { Box, Inline, Stack } from '@atlaskit/primitives';

import Skeleton from '@atlaskit/skeleton';

import {
	CreateButton,
	Help,
	NavLogo,
	Root,
	SideNav,
	SideNavContent,
	SideNavFooter,
} from '@atlassian/navigation-system';

import { Aside } from '@atlassian/navigation-system/layout/aside';

import { Main } from '@atlassian/navigation-system/layout/main';

import { Panel } from '@atlassian/navigation-system/layout/panel';

import { PanelSplitter } from '@atlassian/navigation-system/layout/panel-splitter';

import { SideNavToggleButton } from '@atlassian/navigation-system/layout/side-nav';

import { TopBar } from '@atlassian/navigation-system/layout/top-bar';

import {
	ExpandableMenuItem,
	ExpandableMenuItemContent,
	ExpandableMenuItemTrigger,
} from '@atlassian/navigation-system/side-nav/expandable-menu-item';

import { MenuLinkItem } from '@atlassian/navigation-system/side-nav/menu-link-item';

import { MenuList } from '@atlassian/navigation-system/side-nav/menu-list';

import {
	CommonActions,
	HomeActions,
	Search,
	Settings,
	UserActions,
} from '@atlassian/navigation-system/top-nav';



export const IntegrationLayoutExample = () => {
	const [isPanelVisible, toggleIsPanelVisible] = useReducer((isVisible) => !isVisible, true);
	const [isSettingsOpen, toggleIsSettingsOpen] = useReducer((isOpen) => !isOpen, false);



	return (
		<Root>
			<TopBar>
				<HomeActions>
					<SideNavToggleButton collapseLabel="Collapse sidebar" expandLabel="Expand sidebar" />
					<NavLogo
						href="https://jira.atlassian.com"
						logo={JiraLogo}
						icon={JiraIcon}
						label="Home page"
					/>
				</HomeActions>
				<CommonActions>

					<Search label="Search" />
					<CreateButton>Create</CreateButton>
				</CommonActions>
				<UserActions>
					<Help label="Help" onClick={toggleIsPanelVisible} />
					<Popup isOpen={isSettingsOpen}>
						<PopupTrigger>
							{({ ref }) => <Settings ref={ref} onClick={toggleIsSettingsOpen} label="Settings" />}
						</PopupTrigger>
						<PopupContent onClose={toggleIsSettingsOpen} placement="bottom">
							{() => (
								<MenuGroup>
									<Section title="Personal Jira settings">
										<LinkItem
											href="/"
											description="Manage language, time zone, and other personal preferences"
											iconBefore={<PersonIcon label="" />}
										>
											General settings
										</LinkItem>
										<LinkItem
											href="/"
											description="Manage email and in-product notifications from Jira"
											iconBefore={<NotificationIcon label="" />}
										>
											Notification settings
										</LinkItem>
									</Section>
									<Section title="Atlassian admin settings">
										<LinkItem
											href="/"
											description="Update your billing details, manage subscriptions, and more"
											iconBefore={<PageIcon label="" />}
										>
											Billing
										</LinkItem>
									</Section>
								</MenuGroup>
							)}
						</PopupContent>
					</Popup>
				</UserActions>
			</TopBar>
			<SideNav defaultWidth={100}>
				<SideNavContent>
					<MenuList>
						<MenuLinkItem href="#">Your work</MenuLinkItem>
						<ExpandableMenuItem isDefaultExpanded>
							<ExpandableMenuItemTrigger
								elemBefore={
									<ProjectIcon label="" LEGACY_fallbackIcon={IssuesIcon} color="currentColor" />
								}
							>
								Projects
							</ExpandableMenuItemTrigger>
							<ExpandableMenuItemContent>
								<MenuLinkItem href="#" isSelected>
									Design System
								</MenuLinkItem>
							</ExpandableMenuItemContent>
						</ExpandableMenuItem>
					</MenuList>
				</SideNavContent>
				<SideNavFooter>Give feedback</SideNavFooter>
				<PanelSplitter label="Resize side nav" />
			</SideNav>
			<Main>
				<Box paddingInline="space.300">
					<PageHeader
						breadcrumbs={
							<Breadcrumbs>
								<BreadcrumbsItem text="Projects" key="Projects" />

```

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

### Atlaskit PageLayout Server Rendering Example - JSX

Source: https://github.com/jjcall/ads-docs-mirror/blob/main/docs/pageLayout.md

This React component demonstrates how to integrate a server-rendered element into an Atlaskit PageLayout structure. It defines styles for the server-rendered content and includes state management and toggle components to control the visibility and fixed positioning of various PageLayout slots.

```jsx
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { Fragment, useCallback, useState } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';

import {
	Banner,
	BANNER_HEIGHT,
	Content,
	LEFT_PANEL_WIDTH,
	LEFT_SIDEBAR_WIDTH,
	LeftPanel,
	LeftSidebar,
	Main,
	PageLayout,
	RIGHT_PANEL_WIDTH,
	RIGHT_SIDEBAR_WIDTH,
	RightPanel,
	RightSidebar,
	TOP_NAVIGATION_HEIGHT,
	TopNavigation,
} from '@atlaskit/page-layout';
import { token } from '@atlaskit/tokens';

import { ScrollableContent, SlotLabel, SlotWrapper, Toggle, ToggleBox } from '../common';

type SlotName =
	| 'Banner'
	| 'TopNavigation'
	| 'LeftPanel'
	| 'LeftSidebar'
	| 'Main'
	| 'RightSidebar'
	| 'RightPanel';

const serverRenderedStyles = css({
	height: 'auto',
	position: 'absolute',
	backgroundColor: token('color.background.neutral.subtle'),
	insetBlockEnd: 0,
	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
	insetBlockStart: `calc(${TOP_NAVIGATION_HEIGHT} + ${BANNER_HEIGHT})`,
	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
	insetInlineEnd: `calc(${RIGHT_PANEL_WIDTH} + ${RIGHT_SIDEBAR_WIDTH})`,
	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
	insetInlineStart: `calc(${LEFT_PANEL_WIDTH} + ${LEFT_SIDEBAR_WIDTH})`,
	transition: 'left 300ms',
});

const draggingStyles = css({
	// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
	[`[data-is-sidebar-dragging] &`]: {
		transition: 'none',
	},
});

const ServerRenderedPage = () => {
	return (
		<SlotWrapper borderColor={token('color.border')} css={[serverRenderedStyles, draggingStyles]}>
			Server rendered page. Added as a sibling to Grid componenet
		</SlotWrapper>
	);
};

const initialState = {
	isBannerShown: true,
	isTopNavigationShown: true,
	isLeftPanelShown: true,
	isLeftSidebarShown: true,
	isRightSidebarShown: true,
	isRightPanelShown: true,
	isBannerFixed: false,
	isTopNavigationFixed: false,
	isLeftPanelFixed: false,
	isLeftPanelScrollable: false,
	isLeftSidebarFixed: false,
	isLeftSidebarScrollable: false,
	isRightSidebarFixed: false,
	isRightSidebarScrollable: false,
	isRightPanelFixed: false,
	isRightPanelScrollable: false,
};

const BasicGrid = () => {
	const [gridState, setGridState] = useState(initialState);

	const ToggleFixed = useCallback(
		({ slotName }: { slotName: SlotName }) => {
			const gridKey = `is${slotName}Fixed` as keyof typeof gridState;
			return (
				<Toggle
					id={`${slotName}--fixed`}
					isChecked={gridState[gridKey]}
					onChange={() => setGridState({ ...gridState, [gridKey]: !gridState[gridKey] })}
				>
					Toggle fixed
				</Toggle>
			);
		},
		[gridState],
	);

	const ToggleScrollable = useCallback(
		({ slotName }: { slotName: SlotName }) => {
			const gridKey = `is${slotName}Scrollable` as keyof typeof gridState;
			return (
				<Fragment>
					<Toggle
						id={`${slotName}--scrollable`}
						isChecked={gridState[gridKey]}
						onChange={() => setGridState({ ...gridState, [gridKey]: !gridState[gridKey] })}
					>
						Toggle scrollable content
					</Toggle>
					{gridState[gridKey] && <ScrollableContent />}
				</Fragment>
			);
		},
		[gridState],
	);

	const ToggleShown = useCallback(
		({ slotName }: { slotName: SlotName }) => {
			const gridKey = `is${slotName}Shown` as keyof typeof gridState;
			return (
				<Toggle
					id={`${slotName}--shown`}
					onChange={() => setGridState({ ...gridState, [gridKey]: !gridState[gridKey] })}
					isChecked={!gridState[gridKey]}
				>{`${gridState[gridKey] ? 'Hide' : 'Show'} ${slotName}`}</Toggle>
			);
		},
		[gridState],
	);

	return (
		<Fragment>
			<PageLayout>
				{gridState.isBannerShown && (
					<Banner isFixed={gridState.isBannerFixed}>
						<SlotWrapper borderColor={token('color.border.accent.yellow')}>
							<SlotLabel>Banner</SlotLabel>
							<ToggleFixed slotName="Banner" />
						</SlotWrapper>
					</Banner>
				)}
				{gridState.isTopNavigationShown && (
					<TopNavigation isFixed={gridState.isTopNavigationFixed}>
						<SlotWrapper borderColor={token('color.border.accent.blue')}>
							<SlotLabel>TopNavigation</SlotLabel>
							<ToggleFixed slotName="TopNavigation" />
						</SlotWrapper>
					</TopNavigation>
				)}
				{gridState.isLeftPanelShown && (

```

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

### Example HTML Markup for Code Block

Source: https://github.com/jjcall/ads-docs-mirror/blob/main/docs/cssReset.md

This HTML snippet is used within a <pre><code> block to demonstrate how multi-line code markup is rendered.

```html
<div class="foo">
  <h1>Example markup snippet</h1>
  <p>Sona si Latine loqueris. Sentio aliquos togatos contra me conspirare.</p>
  </div>
```

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

### Demonstrating TextArea Resize Options (React/JSX)

Source: https://github.com/jjcall/ads-docs-mirror/blob/main/docs/textArea.md

This example shows how to use the `resize` prop on the Atlaskit `TextArea` component to control its resizing behavior. It includes examples for `auto`, `vertical`, `horizontal`, `smart` (default), and `none` resize options, wrapped within a `Box` and using `Label` from `@atlaskit/form`.

```jsx
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { cssMap, cx, jsx } from '@compiled/react';

import { Label } from '@atlaskit/form';
import { Box } from '@atlaskit/primitives/compiled';
import TextArea from '@atlaskit/textarea';

const wrapperStyles = cssMap({
	root: {
		maxWidth: '500px',
	},
});

export default () => (
	<Box id="resize" xcss={cx(wrapperStyles.root)}>
		<Label htmlFor="resize-auto">Resize: auto</Label>
		<TextArea resize="auto" name="resize-auto" id="resize-auto" testId="autoResizeTextArea" />
		<Label htmlFor="resize-vertical">Resize: vertical</Label>
		<TextArea
			resize="vertical"
			name="resize-vertical"
			id="resize-vertical"
			testId="verticalResizeTextArea"
		/>
		<Label htmlFor="resize-horizontal">Resize: horizontal</Label>
		<TextArea
			resize="horizontal"
			name="resize-horizontal"
			id="resize-horizontal"
			testId="horizontalResizeTextArea"
		/>
		<Label htmlFor="resize-smart">Resize: smart (default)</Label>
		<TextArea name="resize-smart" id="resize-smart" testId="smartResizeTextArea" />
		<Label htmlFor="resize-none">Resize: none</Label>
		<TextArea resize="none" name="resize-none" id="resize-none" testId="noneResizeTextArea" />
	</Box>
);
```

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

### Positioning Grid Items with start Column (React/JSX)

Source: https://github.com/jjcall/ads-docs-mirror/blob/main/docs/layoutGrid.md

Shows how to use the `start` prop to define the starting column for a GridItem. Explains the 1-indexed range (1-12) and the default 'auto' behavior. Includes examples using a fixed number and a responsive object.

```jsx
import React from 'react';

import Grid, { GridItem } from '@atlaskit/grid';

import { SkeletonBox } from './shared/skeleton-box';

export default () => (
	<Grid>
		<GridItem span={8} start={3}>
			<SkeletonBox>centered</SkeletonBox>
		</GridItem>

		<GridItem span={8} start={{ lg: 3 }}>
			<SkeletonBox>centered on desktop</SkeletonBox>
		</GridItem>

		<GridItem span={{ xxs: 6 }} start={7}>
			<SkeletonBox>forced right</SkeletonBox>
		</GridItem>
	</Grid>
);
```

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

### Implementing Default Single Spotlight with React/JSX

Source: https://github.com/jjcall/ads-docs-mirror/blob/main/docs/onboardingSpotlight.md

This snippet demonstrates how to create a basic, single onboarding spotlight using @atlaskit components. It utilizes `useState` to control the visibility of the spotlight, `SpotlightManager` as a context provider, `SpotlightTarget` to wrap the element the spotlight points to, `SpotlightTransition` for animation, and `Spotlight` itself to define the content and actions.

```jsx
import React, { useState } from 'react';

import Button, { IconButton } from '@atlaskit/button/new';
import CommentAddIcon from '@atlaskit/icon/glyph/media-services/add-comment';
import {
	Spotlight,
	SpotlightManager,
	SpotlightTarget,
	SpotlightTransition,
} from '@atlaskit/onboarding';
import { N0 } from '@atlaskit/theme/colors';
import { token } from '@atlaskit/tokens';

const SpotlightTourExample = () => {
	const [isSpotlightActive, setIsSpotlightActive] = useState(false);
	const start = () => setIsSpotlightActive(true);
	const end = () => setIsSpotlightActive(false);
	return (
		<SpotlightManager>
			<SpotlightTarget name="comment">
				<IconButton icon={CommentAddIcon} label="comment" />
			</SpotlightTarget>
			{/* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */}
			<div style={{ marginTop: token('space.200') }}>
				<Button appearance="primary" onClick={() => start()}>
					Show example spotlight
				</Button>
			</div>
			<SpotlightTransition>
				{isSpotlightActive && (
					<Spotlight
						actions={[
							{
								onClick: () => end(),
								text: 'OK',
							},
						]}
						heading="Add a comment"
						target="comment"
						key="comment"
						targetRadius={3}
						targetBgColor={N0}
					>
						Quickly add a comment to the issue.
					</Spotlight>
				)}
			</SpotlightTransition>
		</SpotlightManager>
	);
};

export default SpotlightTourExample;
```