### TopNavStart Layout Example (React)

Source: https://atlassian.design/components/navigation-system/top-nav-items

Demonstrates the layout for the start section of the top navigation bar, including a toggle button for the side navigation, an app switcher, and an app logo. This component is built using React and leverages the @atlaskit/navigation-system library.

```jsx
import React from 'react';  import { ConfluenceIcon } from '@atlaskit/logo'; import { SideNavToggleButton } from '@atlaskit/navigation-system/layout/side-nav'; import { TopNavStart } from '@atlaskit/navigation-system/layout/top-nav'; import { AppLogo, AppSwitcher } from '@atlaskit/navigation-system/top-nav-items';  import { MockTopBar } from '../common/mock-top-bar';  export function TopNavStartLayoutExample() {  return (  <MockTopBar>  <TopNavStart sideNavToggleButton={null}>  <SideNavToggleButton  defaultCollapsed  collapseLabel="Collapse sidebar"  expandLabel="Expand sidebar"  />  <AppSwitcher label="App switcher" />  <AppLogo  href="https://jira.atlassian.com"  icon={ConfluenceIcon}  name="Confluence"  label="Home page"  />  </TopNavStart>  </MockTopBar>  ); }  export default TopNavStartLayoutExample;
```

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

### Customize Spotlight Action Button Appearance

Source: https://atlassian.design/components/onboarding

This example demonstrates how to change the appearance of action buttons within a Spotlight. It shows how to use 'subtle' and 'subtle-link' appearances in addition to the default. The example includes a button to trigger the spotlight.

```jsx
import React, { useState } from 'react';
import Button, { IconButton } from '@atlaskit/button/new';
import SearchIcon from '@atlaskit/icon/core/search';
import {
  Spotlight,
  SpotlightManager,
  SpotlightTarget,
  SpotlightTransition,
} from '@atlaskit/onboarding';
import { N0 } from '@atlaskit/theme/colors';
import { token } from '@atlaskit/tokens';

const SpotlightActionsAppearance = () => {
  const [isSpotlightActive, setIsSpotlightActive] = useState(false);

  const start = () => setIsSpotlightActive(true);
  const end = () => setIsSpotlightActive(false);

  return (
    <SpotlightManager>
      <SpotlightTarget name="action-button-appearances">
        <IconButton icon={SearchIcon} label="Example" />
      </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: 'Default' },
              {
                appearance: 'subtle',
                onClick: () => end(),
                text: 'Subtle',
              },
              {
                appearance: 'subtle-link',
                onClick: () => end(),
                text: 'Subtle link',
              },
            ]}
            heading="Action button appearances"
            key="action-button-appearances"
            target="action-button-appearances"
            targetRadius={3}
            targetBgColor={N0}
          >
            You can change the default action button appearance to `subtle` or `subtle-link`.
          </Spotlight>
        )}
      </SpotlightTransition>
    </SpotlightManager>
  );
};

export default SpotlightActionsAppearance;
```

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

### React Example with Configurable Delays for Animations

Source: https://atlassian.design/components/spinner

An interactive example allowing users to customize loading and spinner delays using `@atlaskit/select` components. This demonstrates how to manage and apply these delays to animations, influencing the user experience.

```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>
 ); 
 }

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)' },
 { value: '2000', label: 'Content load time: super long (2000ms)' },
];
const defaultContentDelay: Option = contentDelayOptions[1];

const spinnerDelayOptions: Option[] = [
 { value: '0', label: 'Spinner delay: none (default)' },
 { value: '100', label: 'Spinner delay: too short (100ms)' },
 { value: '500', label: 'Spinner delay: medium (500ms)' },
 { value: '1000', label: 'Spinner delay: long (1000ms)' },
];
const defaultSpinnerDelay: Option = spinnerDelayOptions[0];

function Example() {
 const [contentDelay, setContentDelay] = useState(Number(defaultContentDelay.value));
 const onContentDelayChange = useCallback((result: ValueType<Option>) => {
 if (result != null && !Array.isArray(result)) {
 // doing a cast to Option as Array.isArray is not narrowing the type
 setContentDelay(Number((result as Option).value));
 }
 }, []);

 const [spinnerDelay, setSpinnerDelay] = useState(Number(defaultContentDelay.value));
 const onSpinnerDelayChange = useCallback((result: ValueType<Option>) => {
 if (result != null && !Array.isArray(result)) {
 // doing a cast to Option as Array.isArray is not narrowing the type
 setSpinnerDelay(Number((result as Option).value));
 }
 }, []);

 const delay: Delays = useMemo(
 (() => ({ 
 			content: contentDelay,
 			spinner: spinnerDelay,
  })),
 [contentDelay, spinnerDelay],
 );

 return (
 <DelayCont
```

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

### Position GridItem with an offset using the start prop

Source: https://atlassian.design/components/grid

Demonstrates how to position a GridItem with an offset using the `start` prop. If space is available on the same row, using `start` will keep the item on that row. The example shows two items, the second positioned towards the right side of the grid.

```jsx
import React from 'react';
import Grid, { GridItem } from '@atlaskit/grid';
import { SkeletonBox } from './shared/skeleton-box';

export default () => (
  <Grid>
    <GridItem span={4}>
      <SkeletonBox>(left)</SkeletonBox>
    </GridItem>

    <GridItem span={4} start={9}>
      <SkeletonBox>(right)</SkeletonBox>
    </GridItem>
  </Grid>
);
```

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

### Create Multi-Step Onboarding Tours with Spotlights

Source: https://atlassian.design/components/onboarding

Shows how to chain multiple spotlights together to create a multi-step onboarding tour. Manages active spotlight state and navigation between steps using SpotlightManager. Requires React and Atlassian Design System components.

```javascript
import React, { useState } from 'react';
import ButtonGroup from '@atlaskit/button/button-group';
import Button, { IconButton } from '@atlaskit/button/new';
import CommentAddIcon from '@atlaskit/icon/core/comment-add';
import CopyIcon from '@atlaskit/icon/core/copy';
import { Spotlight, SpotlightManager, SpotlightTarget, SpotlightTransition } from '@atlaskit/onboarding';
import { N0 } from '@atlaskit/theme/colors';
import { token } from '@atlaskit/tokens';

const SpotlightTourExample = () => {
  const [activeSpotlight, setActiveSpotlight] = useState<null | number>(null);
  const start = () => setActiveSpotlight(0);
  const next = () => setActiveSpotlight((activeSpotlight || 0) + 1);
  const back = () => setActiveSpotlight((activeSpotlight || 1) - 1);
  const end = () => setActiveSpotlight(null);

  const renderActiveSpotlight = () => {
    const spotlights = [
      <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 work item.
      </Spotlight>,
      <Spotlight
        actions={[
          { onClick: () => end(), text: 'OK' },
          { onClick: () => back(), text: 'Go back', 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>,
    ];

    if (activeSpotlight === null) {
      return null;
    }

    return spotlights[activeSpotlight];
  };

  return (
    <SpotlightManager>
      <ButtonGroup label="Choose spotlight options">
        <SpotlightTarget name="comment">
          <IconButton icon={CommentAddIcon} label="comment" />
        </SpotlightTarget>
        <SpotlightTarget name="copy">
          <IconButton icon={CopyIcon} label="Copy" />
        </SpotlightTarget>
      </ButtonGroup>
      {/* 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()}>
          Start example tour
        </Button>
      </div>
      <SpotlightTransition>{renderActiveSpotlight()}</SpotlightTransition>
    </SpotlightManager>
  );
};

export default SpotlightTourExample;
```

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

### Correct cssMap usage examples

Source: https://atlassian.design/components/eslint-plugin-design-system/no-invalid-css-map

Illustrates proper usage of the cssMap API, demonstrating that only literals (strings, numbers) or statically evaluable variables are permitted as values. These examples serve as a guide for correct implementation.

```javascript
import React from 'react';
import { cssMap } from '@compiled/react';

// Literals (strings, numbers, etc.) are used as values
// in cssMap.

const styles = cssMap({
    danger: {
        color: 'red',
        backgroundColor: 'red',
    },
    success: {
        color: 'green',
        backgroundColor: 'green',
    },
});
```

```javascript
import React from 'react';
import { cssMap } from '@compiled/react';

// A statically evaluable variable (known at build time)
// is used here.

const bap = 'blue';

const styles = cssMap({
    danger: {
        color: bap,
    },
});
```

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

### Implement a Single Spotlight with SpotlightManager

Source: https://atlassian.design/components/onboarding

Demonstrates how to use SpotlightManager, SpotlightTarget, Spotlight, and SpotlightTransition to display a single onboarding spotlight. Requires React and Atlassian Design System components.

```javascript
import React, { useState } from 'react';
import Button, { IconButton } from '@atlaskit/button/new';
import CommentAddIcon from '@atlaskit/icon/core/comment-add';
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 work item.
          </Spotlight>
        )}
      </SpotlightTransition>
    </SpotlightManager>
  );
};

export default SpotlightTourExample;
```

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

### Default Spotlight Card Example in React

Source: https://atlassian.design/components/onboarding/spotlight-card

Demonstrates the basic usage of the SpotlightCard component to display simple onboarding messages. It requires the React library and the '@atlaskit/onboarding' package.

```jsx
import React from 'react';
import { SpotlightCard } from '@atlaskit/onboarding';

const SpotlightCardDefaultExample = () => {
  return (
    <SpotlightCard>
      Select the project name and icon to quickly switch between your most recent projects.
    </SpotlightCard>
  );
};

export default SpotlightCardDefaultExample;
```

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

### Stack Alignment Example - React

Source: https://atlassian.design/components/primitives/stack

Shows how to control the alignment of items within a Stack component using 'alignBlock' (vertical axis) and 'alignInline' (horizontal axis) props. This example demonstrates 'start', 'center', and 'end' alignments.

```jsx
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { cssMap, jsx } from '@atlaskit/css';
import Heading from '@atlaskit/heading';
import { Box, Inline, Stack } from '@atlaskit/primitives/compiled';

import ExampleBox from '../shared/example-box';

const styles = cssMap({
	container: {
		display: 'flex',
		height: '200px',
  },
});

export default function Example() {
  return (
    <Box testId="stack-example" padding="space.100">
      <Inline space="space.200" spread="space-between">
        <Stack alignInline="center" space="space.200">
          <Heading size="xsmall">Start alignment</Heading>
          <Box xcss={styles.container}>
            <Stack space="space.050" alignBlock="start">
              <ExampleBox />
              <ExampleBox />
              <ExampleBox />
            </Stack>
          </Box>
        </Stack>
        <Stack alignInline="center">
          <Heading size="xsmall">Center alignment</Heading>
          <Box xcss={styles.container}>
            <Stack space="space.050" alignBlock="center">
              <ExampleBox />
              <ExampleBox />
              <ExampleBox />
            </Stack>
          </Box>
        </Stack>
        <Stack alignInline="center">
          <Heading size="xsmall">End alignment</Heading>
          <Box xcss={styles.container}>
            <Stack space="space.050" alignBlock="end">
              <ExampleBox />
              <ExampleBox />
              <ExampleBox />
            </Stack>
          </Box>
        </Stack>
      </Inline>
    </Box>
  );
}
```

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

### Bash script to upgrade all Pragmatic Drag and Drop packages

Source: https://atlassian.design/components/pragmatic-drag-and-drop/core-package/upgrade-guides

This bash script automates the upgrade process for all installed Pragmatic Drag and Drop packages to version 1.0.0 using yarn. It checks if each package is installed before attempting to upgrade.

```bash
#!/bin/bash

PACKAGES=(
  "@atlaskit/pragmatic-drag-and-drop"
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll"
  "@atlaskit/pragmatic-drag-and-drop-hitbox"
  "@atlaskit/pragmatic-drag-and-drop-live-region"
  "@atlaskit/pragmatic-drag-and-drop-flourish"
  "@atlaskit/pragmatic-drag-and-drop-react-accessibility"
  "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration"
  "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll"
)
VERSION="^1.0.0"

for PACKAGE in "${PACKAGES[@]}"
do
  if grep -q "\"${PACKAGE}\"" ./package.json;
  then
    echo "${PACKAGE} is installed, upgrading to ${VERSION}..."
    yarn upgrade ${PACKAGE}@${VERSION}
    # for yarn@3, use:
    # yarn up ${PACKAGE}@${VERSION}
  else
    echo "${PACKAGE} is not installed, skipping upgrade."
  fi
done

```

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

### React Spotlight Target Replacement Example

Source: https://atlassian.design/components/onboarding

This React component demonstrates the use of the `targetReplacement` prop in the Spotlight component. It allows a custom `Replacement` component to be rendered instead of the original spotlight target. The example includes imports from '@compiled/react' and '@atlaskit/button/new', and utilizes React's `useState` hook for managing spotlight activity.

```jsx
/**  * @jsxRuntime classic  * @jsx jsx  */ import { type ImgHTMLAttributes, useState } from 'react';  import {css, jsx} from '@compiled/react';  import Button from '@atlaskit/button/new'; import {  Spotlight,  SpotlightManager,  SpotlightPulse,  SpotlightTarget,  SpotlightTransition, } from '@atlaskit/onboarding'; import { token } from '@atlaskit/tokens';  import logoInverted from '../assets/logo-inverted.png'; import logo from '../assets/logo.png';  const Replacement = (rect: any) => {  const style = { overflow: 'hidden', ...rect };   return (  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766  <SpotlightPulse style={style}>  <Image alt="I replace the target element." src={logoInverted} />  </SpotlightPulse>  ); };  const imageStyles = css({ 	width: '128px', 	height: '128px', });  const Image = ({ alt, src }: ImgHTMLAttributes<HTMLImageElement>) => (  <img src={src} alt={alt} css={imageStyles} /> );  const SpotlightTargetReplacementExample = () => {  const [isSpotlightActive, setIsSpotlightActive] = useState(false);  const start = () => setIsSpotlightActive(true);  const end = () => setIsSpotlightActive(false);  return (  <SpotlightManager>  {/* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */}  <img alt="hidden" src={logoInverted} style={{ display: 'none' }} />  <SpotlightTarget name="target-replacement-example">  <Image alt="I will be replaced..." src={logo} />  </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  targetReplacement={Replacement}  actions={[{ onClick: () => end(), text: 'OK' }]}  dialogPlacement="bottom left"  key="target-replacement-example"  heading="Target replacement"  target="target-replacement-example"  targetRadius={3}  > 										You can replace the original target with another component using the `targetReplacement` 										prop.  </Spotlight>  )}  </SpotlightTransition>  </SpotlightManager>  ); };  export default SpotlightTargetReplacementExample;
```

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

### Customize DateTimePicker Week Start Day in React

Source: https://atlassian.design/components/datetime-picker

Shows how to change the first day of the week displayed in the DateTimePicker's calendar using the `weekStartDay` prop. This example configures calendars to start on Sunday (0) and Monday (1). It utilizes the `@atlaskit/datetime-picker` and `@atlaskit/form` components.

```jsx
import React from 'react';
import { DateTimePicker } from '@atlaskit/datetime-picker';
import { Label } from '@atlaskit/form';
import { Box } from '@atlaskit/primitives/compiled';

const DateTimePickerWeekStartDayExample = () => (
  <>
    <Label htmlFor="datetime-1">Sunday example</Label>
    <DateTimePicker
      id="datetime-1"
      clearControlLabel="Clear Sunday example"
      datePickerProps={{
        weekStartDay: 0,
        shouldShowCalendarButton: true,
        label: 'Sunday example, date',
      }}
      timePickerProps={{ label: 'Sunday example, time' }}
    />
    <Box>
      <Label htmlFor="datetime-2">Monday example</Label>
      <DateTimePicker
        id="datetime-2"
        clearControlLabel="Clear Monday Example"
        datePickerProps={{
          weekStartDay: 1,
          shouldShowCalendarButton: true,
          label: 'Monday example, date',
        }}
        timePickerProps={{ label: 'Monday example, time' }}
      />
    </Box>
  </>
);

export default DateTimePickerWeekStartDayExample;
```

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

### Spotlight with Image using React

Source: https://atlassian.design/components/onboarding

This React component demonstrates how to include an image within an Atlassian Spotlight using the `image` prop. It shows a spotlight that appears when a 'Switch projects' button is clicked, with a relevant illustration to enhance the onboarding experience. This example depends on `@atlaskit/button` and `@atlaskit/onboarding`.

```jsx
import React, { useState } from 'react';
import Button from '@atlaskit/button/new';
import {
  Spotlight,
  SpotlightManager,
  SpotlightTarget,
  SpotlightTransition,
} from '@atlaskit/onboarding';
import { N0 } from '@atlaskit/theme/colors';
import { token } from '@atlaskit/tokens';

import spotlightImage from '../assets/this-is-new-jira.png';

const SpotlightImageExample = () => {
  const [isSpotlightActive, setIsSpotlightActive] = useState(false);

  const start = () => setIsSpotlightActive(true);
  const end = () => setIsSpotlightActive(false);

  return (
    <SpotlightManager>
      <SpotlightTarget name="switch">
        <Button>Switch projects</Button>
      </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
            image={spotlightImage}
            actions={[
              {
                onClick: () => end(),
								text: 'OK',
              },
            ]}
            target="switch"
            label="Switch projects"
            key="switch"
            targetRadius={3}
            targetBgColor={N0}
          >
						Select the project name and icon to quickly switch between your most recent projects.
					</Spotlight>
        )}
      </SpotlightTransition>
    </SpotlightManager>
  );
};

export default SpotlightImageExample;
```

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

### React Onboarding Tour with Step Numbers using actionsBeforeElement

Source: https://atlassian.design/components/onboarding

This React component demonstrates creating an onboarding tour using Atlassian's Spotlight component. The `actionsBeforeElement` prop is used to display step numbers (e.g., '1/3') before the action buttons within each spotlight, guiding users through the tour. It manages spotlight activation, navigation (next, back, dismiss), and integrates with other Atlassian UI components like ButtonGroup, Button, and Icons.

```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/core/comment-add';
import CopyIcon from '@atlaskit/icon/core/copy';
import FullscreenEnterIcon from '@atlaskit/icon/core/fullscreen-enter';
import {
  Spotlight,
  SpotlightManager,
  SpotlightTarget,
  SpotlightTransition,
} from '@atlaskit/onboarding';
import { N0 } from '@atlaskit/theme/colors';
import { token } from '@atlaskit/tokens';

const SpotlightActionsBefore = () => {
  const [activeSpotlight, setActiveSpotlight] = useState<null | number>(null);

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

  const renderActiveSpotlight = () => {
    const spotlights = [
      <Spotlight
        actionsBeforeElement="1/3"
        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 work item.
      </Spotlight>,
      <Spotlight
        actionsBeforeElement="2/3"
        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>,
      <Spotlight
        actionsBeforeElement="3/3"
        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>,
    ];

    if (activeSpotlight === null) {
      return null;
    }

    return spotlights[activeSpotlight];
  };

  return (
    <SpotlightManager>
      <ButtonGroup label="Choose spotlight options">
        <SpotlightTarget name="comment">
          <IconButton icon={CommentAddIcon} label="comment" />
        </SpotlightTarget>
        <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') }}>
        <Button appearance="primary" onClick={() => start()}>
          Start example tour
        </Button>
      </div>
      <SpotlightTransition>{renderActiveSpotlight()}</SpotlightTransition>
    </SpotlightManager>
  );
};

export default SpotlightActionsBefore;
```

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

### Default Pagination - React

Source: https://atlassian.design/components/pagination

Demonstrates the default implementation of the Pagination component. It requires React and the '@atlaskit/pagination' package. This example shows a basic setup for navigating through a list of pages.

```jsx
import React from 'react';
import Pagination from '@atlaskit/pagination';

export default function PaginationDefaultExample() {
  return (
    <Pagination
      nextLabel="Next"
      label="Page"
      pageLabel="Page"
      pages={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}
      previousLabel="Previous"
    />
  );
}
```

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

### Implement Spotlight Pulse with React

Source: https://atlassian.design/components/onboarding

This example shows how to use the SpotlightPulse component in React to create a pulsing outline around a target element. It utilizes state management to control the active state of the spotlight and pulse. Dependencies include @atlaskit/button, @atlaskit/onboarding, and @atlaskit/theme.

```javascript
import React, { useState } from 'react';
import ButtonGroup from '@atlaskit/button/button-group';
import Button from '@atlaskit/button/new';
import {
  Spotlight,
  SpotlightManager,
  SpotlightPulse,
  SpotlightTarget,
  SpotlightTransition,
} from '@atlaskit/onboarding';
import { N0 } from '@atlaskit/theme/colors';

const SpotlightPulseExample = () => {
  const [isSpotlightActive, setIsSpotlightActive] = useState(false);

  const start = () => setIsSpotlightActive(true);
  const end = () => setIsSpotlightActive(false);

  return (
    <SpotlightManager>
      <ButtonGroup label="Choose spotlight options">
        <SpotlightTarget name="new">
          <SpotlightPulse radius={3} pulse={isSpotlightActive ? false : true}>
            <Button onClick={() => start()}>New feature</Button>
          </SpotlightPulse>
        </SpotlightTarget>
        <SpotlightTarget name="copy">
          <Button>Existing feature</Button>
        </SpotlightTarget>
      </ButtonGroup>

      <SpotlightTransition>
        {isSpotlightActive && (
          <Spotlight
            actions={[
              {
                onClick: () => end(),
				text: 'OK',
              },
            ]}
            heading="Spotlight pulse"
            target="new"
            key="new"
            targetRadius={3}
            targetBgColor={N0}
          >
						Announcing new features with a spotlight pulse is an onboarding pattern that you can
						explore.
          </Spotlight>
        )}
      </SpotlightTransition>
    </SpotlightManager>
  );
};

export default SpotlightPulseExample;
```

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

### Force GridItem to a new row using start={1}

Source: https://atlassian.design/components/grid

Shows how to force a GridItem onto a new row by setting its `start` prop to `1`. This is effective when the preceding item occupies space that would prevent the current item from starting at column 1 on the same row. The example places one item on the first line and another forcefully on the second line.

```jsx
import React from 'react';
import Grid, { GridItem } from '@atlaskit/grid';
import { SkeletonBox } from './shared/skeleton-box';

export default () => (
  <Grid>
    <GridItem span={4}>
      <SkeletonBox>Line 1</SkeletonBox>
    </GridItem>

    <GridItem span={4} start={1}>
      <SkeletonBox>Forced to Line 2</SkeletonBox>
    </GridItem>
  </Grid>
);
```

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

### Block Alignment Example with React Primitives

Source: https://atlassian.design/components/primitives/inline

Demonstrates different block alignment options ('start', 'center', 'end', 'baseline', 'stretch') for Flex and Inline components. It utilizes React, @atlaskit/css, and @atlaskit/primitives.

```jsx
/**  * @jsxRuntime classic  * @jsx jsx  */ import { type ReactNode } from 'react';  import { cssMap, jsx } from '@atlaskit/css'; import { Box, Flex, Inline, Stack } from '@atlaskit/primitives/compiled'; import { token } from '@atlaskit/tokens';  import ExampleBox from '../shared/example-box';  const styles = cssMap({
	flex: {
		flexDirection: 'column',
 '@media (min-width: 90rem)': {
			flexDirection: 'row',
 }
  },
  	visualContainer: {
		display: 'flex',
		borderRadius: token('radius.xsmall'),
		height: '6rem'
  }
});  export default function Example() {
  return (
  <Flex xcss={styles.flex} justifyContent="space-between">
  <Stack alignInline="center">
				"start" (default)
  <VisualContainer>
  <Inline space="space.050" alignBlock="start">
  <ExampleBox />
  <ExampleBox />
  <ExampleBox padding="space.300" />
  </Inline>
  </VisualContainer>
  </Stack>
  <Stack alignInline="center">
				"center"
  <VisualContainer>
  <Inline space="space.050" alignBlock="center">
  <ExampleBox />
  <ExampleBox />
  <ExampleBox padding="space.300" />
  </Inline>
  </VisualContainer>
  </Stack>
  <Stack alignInline="center">
				"end"
  <VisualContainer>
  <Inline space="space.050" alignBlock="end">
  <ExampleBox />
  <ExampleBox />
  <ExampleBox padding="space.300" />
  </Inline>
  </VisualContainer>
  </Stack>
  <Stack alignInline="center">
				"baseline"
  <VisualContainer>
  <Inline space="space.050" alignBlock="baseline">
  <ExampleBox />
  <ExampleBox />
  <ExampleBox padding="space.300" />
  </Inline>
  </VisualContainer>
  </Stack>
  <Stack alignInline="center">
				"stretch"
  <VisualContainer>
  <Inline space="space.050" alignBlock="stretch">
  <ExampleBox />
  <ExampleBox />
  <ExampleBox padding="space.300" />
  </Inline>
  </VisualContainer>
  </Stack>
  </Flex>
  );
}

const VisualContainer = ({ children }: { children: ReactNode }) => (
  <Box backgroundColor="color.background.neutral" padding="space.050" xcss={styles.visualContainer}>
  {children}
  </Box>
);
```

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

### Update Pragmatic Drag and Drop Entry Point Paths

Source: https://atlassian.design/components/pragmatic-drag-and-drop/core-package/upgrade-guides

This snippet shows the changes in entry point paths for various utilities within the '@atlaskit/pragmatic-drag-and-drop' package. The functionality remains the same, but the import locations have been updated for better organization.

```diff
- @atlaskit/pragmatic-drag-and-drop/adapter/element
+ @atlaskit/pragmatic-drag-and-drop/element/adapter

- @atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview
+ @atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview

- @atlaskit/pragmatic-drag-and-drop/util/offset-from-pointer
+ @atlaskit/pragmatic-drag-and-drop/element/offset-from-pointer

- @atlaskit/pragmatic-drag-and-drop/util/center-under-pointer
+ @atlaskit/pragmatic-drag-and-drop/element/center-under-pointer

- @atlaskit/pragmatic-drag-and-drop/util/disable-native-drag-preview
+ @atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview

- @atlaskit/pragmatic-drag-and-drop/util/scroll-just-enough-into-view
+ @atlaskit/pragmatic-drag-and-drop/element/scroll-just-enough-into-view

- @atlaskit/pragmatic-drag-and-drop/util/combine
+ @atlaskit/pragmatic-drag-and-drop/combine

- @atlaskit/pragmatic-drag-and-drop/util/once
+ @atlaskit/pragmatic-drag-and-drop/once

- @atlaskit/pragmatic-drag-and-drop/util/reorder
+ @atlaskit/pragmatic-drag-and-drop/reorder

- @atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge
+ @atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge
```

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

### React: Conditional Spotlight Tour with useSpotlight Hook

Source: https://atlassian.design/components/onboarding

This React component demonstrates a spotlight tour where steps are conditionally rendered based on whether their associated targets are visible. It uses the `useSpotlight` hook to check target rendering status and manages the tour's active step. Dependencies include `@atlaskit/button`, `@atlaskit/icon`, `@atlaskit/onboarding`, and `@atlaskit/theme`.

```javascript
import React, { useState } from 'react';
import ButtonGroup from '@atlaskit/button/button-group';
import Button, { IconButton } from '@atlaskit/button/new';
import CommentAddIcon from '@atlaskit/icon/core/comment-add';
import CopyIcon from '@atlaskit/icon/core/copy';
import FullscreenEnterIcon from '@atlaskit/icon/core/fullscreen-enter';
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 work item.
          </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>
  );
}

```

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

### Text Component Alignment Variations

Source: https://atlassian.design/components/primitives/text

Provides examples of aligning Text content using the `align` prop. It shows how to set text alignment to 'start', 'center', and 'end'. This is useful for controlling the layout and readability of text blocks.

```jsx
import React from 'react';
import { Stack, Text } from '@atlaskit/primitives/compiled';

export default () => {
  return (
    <Stack space="space.100">
      <Stack space="space.0">
        <Text align="start" as="p">
          Text alignment:
        </Text>
        <Text align="start" as="p">
          Start
        </Text>
      </Stack>
      <Stack space="space.0">
        <Text align="center" as="p">
          Text alignment:
        </Text>
        <Text align="center" as="p">
          Center
        </Text>
      </Stack>
      <Stack space="space.0">
        <Text align="end" as="p">
          Text alignment:
        </Text>
        <Text align="end" as="p">
          End
        </Text>
      </Stack>
    </Stack>
  );
};
```

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

### Inline Alignment Control with React

Source: https://atlassian.design/components/primitives/inline

This example demonstrates dynamic control over inline alignment using React state and event handling. It allows users to cycle through alignment options ('start', 'center', 'end') for Inline components.

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

import Button from '@atlaskit/button/new';
import Heading from '@atlaskit/heading';
import { Box, Inline, Stack } from '@atlaskit/primitives/compiled';

import ExampleBox from '../shared/example-box';

const alignmentValues = ['start', 'center', 'end'] as const;

export default function Example() {
  const [alignmentIndex, setAlignmentIndex] = useState<0 | 1 | 2>(0);

  const nextIndex = ((alignmentIndex + 1) % alignmentValues.length) as 0 | 1 | 2;

  const changeAlignment = useCallback(() => {
    setAlignmentIndex(nextIndex);
  }, [nextIndex]);

  return (
  <Stack space="space.300">
  <Heading size="small">Inline alignment</Heading>
  <Box>
  <Button appearance="primary" onClick={changeAlignment}>
					Change alignment to "{alignmentValues[nextIndex]}"
  </Button>
  </Box>
  <Stack space="space.100">
  <Inline space="space.100" alignInline={alignmentValues[alignmentIndex]}>
  <ExampleBox />
  <ExampleBox />
  <ExampleBox />
  </Inline>
  </Stack>
  </Stack>
  );
}
```