open-index/open-npm huggingface dataset:
npm package: @kalamazoo/button
Description: A React component that is a base button.
Author: Steven J. Selcuk
Latest version: 1.0.2

# Button

Buttons are used as triggers for actions. They are used in forms, toolbars,
dialog footers and as stand-alone action triggers.

## Installation

```sh
yarn add @kalamazoo/button
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/button).
npm package: @kalamazoo/calendar
Description: A React component for displaying a calendar.
Author: Steven J. Selcuk
Latest version: 1.0.2

# Calendar

The calendar component displays a simple calendar that can be:

- Used to display a calendar of dates.
- Composed with other components to build a datepicker.

## Installation

```sh
yarn add @kalamazoo/calendar
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/calendar).
npm package: @kalamazoo/checkbox
Description: Checkbox component for use in forms
Author: Steven J. Selcuk
Latest version: 1.0.2

# Checkbox

A checkbox element for use in forms and elsewhere.

## Installation

```sh
yarn add @kalamazoo/checkbox
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/checkbox).
npm package: @kalamazoo/code
Description: Renders inline code snippets and code blocks
Author: Atlassian Pty. Ltd
Latest version: 1.0.2

# Code

Renders inline code snippets and code blocks.

## Installation

```sh
yarn add @kalamazoo/code
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/code).
npm package: @kalamazoo/code-insights
Description: Code insights reporting tool for FE (mono)repo's.
Author: Steven J. Selcuk
Latest version: 1.0.2

# `@kalamazoo/code-insights`

This is a tool that can be run on you checkout OR on CI to report on code problems.

## CLI Flags

`--commit` The commit to publish insights on [default=current head]

`--reporters` The reporters to run [default=console]

`--gitUrl` The git url of the repo [default=current origin url]

`--targetBranch` The branch with which to compare the current branch, when git reporting is enabled can detect PR target branch. [default=master]

## Reports

The tool is setup in a way that reports should be easy to add later. If you have a good idea for a report
go for it and submit a PR!

### yarn lock duplicates

This report compares the lock file of the current branch to the one on `origin/master`.
It then reports the new duplicate dependencies found compared to master.

#### Requirements

This report requires `origin/master` to be available. If you're getting the following error:

```
Command failed: git show origin/master:package.json
fatal: Invalid object name 'origin/master'.
```

Your CI job is probably running on a shallow clone. This error can be fixed on bamboo with the following commands:

```sh
git remote set-url origin "${bamboo_planRepository_repositoryUrl}"
git fetch origin
```

## Reporters

The tool is setup in a way that reporters should be easy to add later. If you have a good idea for a report
go for it and submit a PR!

### Bitbucket server code-insights (bbs)

This report uses the [Bitbucket server code insights](https://community.developer.atlassian.com/t/introducing-code-insights-for-bitbucket-server-continuously-improve-code-quality-with-quick-actionable-feedback-from-apps/23148) feature to show the code-insights report.

If this reporter is enabled and now `targetBranch` flag is provided, the reporter will try to detect the target branch of the PR the top commit is on. When targetting a different branch than `master` the report is generated using that branch instead.

#### Requirements

Authentication for BB server is required. The following options are provided:

#### API Key

The recommended way of authentication

`BITBUCKET_SERVER_TOKEN` : the BB server API token

#### Basic auth

`BITBUCKET_SERVER_USERNAME` : Bitbucket Server Username

`BITBUCKET_SERVER_PASSWORD` : Bitbucket Server Password

### Console (console)

This reporters just reports the result to the console. Handy when running locally.
npm package: @kalamazoo/color-picker
Description: Jira Color Picker Component
Author: Steven J. Selcuk
Latest version: 1.0.2

# Color picker

Buttons are used as triggers for actions. They are used in forms, toolbars,
dialog footers and as stand-alone action triggers.

## Installation

```sh
yarn add @kalamazoo/color-picker
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/jira/color-picker).
npm package: @kalamazoo/comment
Description: Comments enable discussions on an entity such as a page, blog post, issue or pull request
Author: Steven J. Selcuk
Latest version: 1.0.2

# Comment

Comments enable discussions on an entity such as a page, blog post, issue or pull request.

## Installation

```sh
yarn add @kalamazoo/comment
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/comment).
npm package: @kalamazoo/contextual-survey
Description: A React component used to ask the user for feedback
Author: Steven J. Selcuk
Latest version: 1.0.2

# Contextual Survey

This component is used to ask for feedback from the user, without blocking them from continuing using the product.

## Installation

```sh
yarn add @kalamazoo/contextual-survey
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/engagement-platform/contextual-survey).
npm package: @kalamazoo/datetime-picker
Description: A React component for picking date/time values
Author: Steven J. Selcuk
Latest version: 1.0.2

# Datetime-picker

A React component for picking date/time values.

## Installation

```sh
yarn add @kalamazoo/datetime-picker
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/datetime-picker).
npm package: @kalamazoo/dropdown-menu
Description: Creates a dropdown menu, with optional groups, headings, icons, checkbox items, radio group items and disabled items.
Author: Steven J. Selcuk
Latest version: 1.0.2

# Dropdown-menu

Creates a dropdown menu, with optional groups, headings, icons, checkbox items, radio group items and disabled items.

## Installation

```sh
yarn add @kalamazoo/dropdown-menu
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/dropdown-menu).
npm package: @kalamazoo/droplist
Description: Droplist component
Author: Steven J. Selcuk
Latest version: 1.0.2

# Droplist

This is a base (internal) component which should be used to build all the 'dropdown' lists.

## Installation

```sh
yarn add @kalamazoo/droplist
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/droplist).
npm package: @kalamazoo/dynamic-table
Description: Table component with pagination and sorting functionality
Author: Steven J. Selcuk
Latest version: 1.0.2

# Dynamic-table

Table component with pagination and sorting functionality.

## Installation

```sh
yarn add @kalamazoo/dynamic-table
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/dynamic-table).
npm package: @kalamazoo/email-renderer
Description: Email renderer
Author: Steven J. Selcuk
Latest version: 1.0.2

# Email renderer

This package provides renderer that is capable of rendering email-friendly HTML from ADF documents.

## Usage

Use as follows:

```javascript
import { defaultSchema } from '@kalamazoo/adf-schema';
import { EmailSerializer } from '@kalamazoo/email-renderer';

const document = ... // Your ADF JSON document

const serializer = EmailSerializer.fromSchema(defaultSchema);
const node = defaultSchema.nodeFromJSON(document);
const result = serializer.serializeFragment(node.content);
```

## Development

Project consists of different `serializers` in order to render ADF into html

ADF `nodes` serializers are stored in `src/nodes`
ADF `marks` serializers are stored in `src/marks`

HTML rendering occurs via traversal of the ADF and calling the serializer corresponding to each visited ADF Node, as well as applying any `marks` that exist on a node.

### Adding new embedded images / icons

This will generate static image modules that can be used to easily embed inside of email as part of a ADF node serializer, etc.

Currently uses a custom build process, which like this: `SVG -> PNG -> Base64 -> TypeScript Module`

- Add the source image to `src/static/svg` folder and to generator config `src/static/image-sources.ts`
- run `bolt run build:images`
npm package: @kalamazoo/empty-state
Description: A React component used for presenting various empty states (no items, empty search, broken link, welcome screen etc.)
Author: Steven J. Selcuk
Latest version: 1.0.2

# Empty state

Empty State is used for various scenarios, for example: empty search, no items,
broken link, general error message, welcome screen etc. (usually it takes the
whole page).

## Installation

```sh
yarn add @kalamazoo/empty-state
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/empty-state).
npm package: @kalamazoo/feedback-collector
Description: A component that collects feedback across Atlassian products.
Author: Atlassian Pty. Ltd
Latest version: 1.0.2

# Feedback-collector

A component that creates and provide consistent feedback across Atlassian products.

## Installation

```sh
yarn add @kalamazoo/feedback-collector
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/feedback-collector).
npm package: @kalamazoo/field-base
Description: Wraps fields and provides styles for focus/hover states
Author: Steven J. Selcuk
Latest version: 1.0.2

# FieldBase

This component contains all the common behaviour and styles for fields

FieldBase provides an Atlassian Design Guidelines compatible implementation for:

- Labels: spacing, margins, accessibility.
- Fields: sizing, borders, colors, wrapping behaviour, hover/focus states.
- Validation: styles (built in validation coming soon!)

FieldBase components _will_ work by themselves, but are really meant to be extended into a full field component.

## Installation

```sh
yarn add @kalamazoo/field-base
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/field-base).
npm package: @kalamazoo/field-radio-group
Description: A radio group React component used for selecting discrete values in a form
Author: Steven J. Selcuk
Latest version: 1.0.2

# Radio-group

Provides a standard way to select a single option from a list.

## Installation

```sh
yarn add @kalamazoo/field-radio-group
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/field-radio-group).
npm package: @kalamazoo/field-range
Description: Component which renders a slider and is a substitute of the native input[range] element
Author: Steven J. Selcuk
Latest version: 1.0.2

# Field-range

Component which renders a Slider and is a substitute of the native input["range"] element.

## Installation

```sh
yarn add @kalamazoo/field-range
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/field-range).
npm package: @kalamazoo/field-text
Description: Field Text Component
Author: Steven J. Selcuk
Latest version: 1.0.2

# Field-text

Provides a standard way to create a text-based form input with an associated label.

## Installation

```sh
yarn add @kalamazoo/field-text
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/field-text).
npm package: @kalamazoo/field-text-area
Description: Field Text Component
Author: Steven J. Selcuk
Latest version: 1.0.2

# Field-text-area

The Text Field Area provides a standard way to create a text-based form input with an associated label.

## Installation

```sh
yarn add @kalamazoo/field-text-area
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/field-text-area).
npm package: @kalamazoo/flag
Description: Flags are used for confirmations, alerts, and acknowledgments that require minimal user interaction.
Author: Steven J. Selcuk
Latest version: 1.0.2

# Flag

Flags are used for confirmations, alerts, and acknowledgments that require minimal user interaction.

## Installation

```sh
yarn add @kalamazoo/flag
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/flag).
npm package: @kalamazoo/form
Description: Form package provides layout & validation for form fields
Author: Steven J. Selcuk
Latest version: 1.0.2

# Form

Form package provides layout & validation for form fields.

## Installation

```sh
yarn add @kalamazoo/form
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/form).
npm package: @kalamazoo/global-navigation
Description: Global navigation component for Atlassian
Author: Steven J. Selcuk
Latest version: 1.0.2

# Global-navigation

Global navigation component for Atlassian.

## Installation

```sh
yarn add @kalamazoo/global-navigation
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/global-navigation).
npm package: @kalamazoo/i18n-tools
Description: A tool for extracting, pushing and pulling translation strings from react components
Author: Steven J. Selcuk
Latest version: 1.0.0

## i18n-tools

This is a tool for extracting, pulling and pushing i18n translation strings from React components.

It works using the [babel-plugin-react-intl](https://github.com/yahoo/babel-plugin-react-intl), [babel-plugin-react-intl-pot](https://npm.im/babel-plugin-react-intl-pot) and [transifex](https://npm.im/transifex) to generate POT and push it to Transifex.

Some notes to consider:

- This tool expects a `TRANSIFEX_API_TOKEN` environment variable. You can obtain a token from [here](https://www.transifex.com/user/settings/api/).
- This tool will technically work on `JS` packages `src/` files, but will not work in `Typescript` `src/` files. For that reason, we recommend pointing it at the built `./` directories instead.

Usage info can be found by running the tool with the `--help` flag.
npm package: @kalamazoo/inline-dialog
Description: An inline dialog React component for secondary content and controls that are displayed on user request
Author: Steven J. Selcuk
Latest version: 1.0.2

# Inline-dialog

An inline dialog React component for secondary content and controls that are displayed on user request.

## Installation

```sh
yarn add @kalamazoo/inline-dialog
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/inline-dialog).
npm package: @kalamazoo/inline-edit
Description: A base component used to build inline-editable components that match the Atlassian Design Guidelines
Author: Steven J. Selcuk
Latest version: 1.0.2

# Inline-edit

A component for displaying and editing values in fields.

## Installation

yarn add @kalamazoo/inline-edit

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/inline-edit).
npm package: @kalamazoo/inline-message
Description: A React component for displaying a clickable message which triggers an inline dialog
Author: Steven J. Selcuk
Latest version: 1.0.2

# Inline-message

A React component for displaying a clickable message which triggers an inline dialog.

## Installation

yarn add @kalamazoo/inline-message

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/inline-message).
npm package: @kalamazoo/input
Description: Internal component used by field-base to create field-text. DO NOT USE DIRECTLY
Author: Steven J. Selcuk
Latest version: 1.0.2

# Input

**YOU SHOULD ALMOST DEFINITELY NOT BE USING THIS COMPONENT DIRECTLY**

**USE @kalamazoo/field-text INSTEAD**

## SingleLineTextInput

A text input component with extremely basic styling that supports read/edit modes.

Designed for use within other components, e.g. for the read/edit views required by
ak-inline-edit, or within table cells.

Note: In addition the props described below, all other props passed to this
component will be forwarded to the underlying HTML 'input'. This allows change
handlers, placeholders, etc, to be attached to it.

**Kind**: global variable

- Properties

- [SingleLineTextInput](#SingleLineTextInput)
  - [.value](#SingleLineTextInput.value) : <code>string</code>
  - [.style](#SingleLineTextInput.style) : <code>object</code>
  - [.isInitiallySelected](#SingleLineTextInput.isInitiallySelected) : <code>boolean</code>
  - [.isEditing](#SingleLineTextInput.isEditing) : <code>boolean</code>
  - [.onConfirm](#SingleLineTextInput.onConfirm) : <code>function</code>
  - [.onKeyDown](#SingleLineTextInput.onKeyDown) : <code>function</code>

<a name="SingleLineTextInput.value"></a>

### SingleLineTextInput.value : <code>string</code>

The value of the input field.

**Kind**: static property of <code>[SingleLineTextInput](#SingleLineTextInput)</code>
<a name="SingleLineTextInput.style"></a>

### SingleLineTextInput.style : <code>object</code>

Custom styles that will be applied to the read and edit views.

Typical use would be to specify a custom font size.

**Kind**: static property of <code>[SingleLineTextInput](#SingleLineTextInput)</code>
<a name="SingleLineTextInput.isInitiallySelected"></a>

### SingleLineTextInput.isInitiallySelected : <code>boolean</code>

Whether the input text will initially be selected/highlighted.

**Kind**: static property of <code>[SingleLineTextInput](#SingleLineTextInput)</code>
**Default**: <code>false</code>
<a name="SingleLineTextInput.isEditing"></a>

### SingleLineTextInput.isEditing : <code>boolean</code>

Whether the component is in edit mode or read mode.

**Kind**: static property of <code>[SingleLineTextInput](#SingleLineTextInput)</code>
<a name="SingleLineTextInput.onConfirm"></a>

### SingleLineTextInput.onConfirm : <code>function</code>

Called when the user confirms input by pressing the enter key

**Kind**: static property of <code>[SingleLineTextInput](#SingleLineTextInput)</code>
<a name="SingleLineTextInput.onKeyDown"></a>

### SingleLineTextInput.onKeyDown : <code>function</code>

Regular onKeyDown handler passed to the input

**Kind**: static property of <code>[SingleLineTextInput](#SingleLineTextInput)</code>
npm package: @kalamazoo/item
Description: A generic item component to be used within other components
Author: Steven J. Selcuk
Latest version: 1.0.2

# Item

**YOU SHOULD ALMOST DEFINITELY NOT BE USING THIS COMPONENT DIRECTLY**

This is a generic Item component, designed to be composed declaratively into other components.

Item is generally a layout component, concerned with visual presentation of the content provided via props.

## Installation

```sh
yarn add @kalamazoo/item
```

## Extending Item behaviour

If you need the Item component to have additional behaviour, it is recommended that you wrap Item in a [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html).
npm package: @kalamazoo/layer-manager
Description: A React Component for managing layers
Author: Steven J. Selcuk
Latest version: 1.0.2

# Layer Manager

The layer manager is used to render React DOM into a new context (aka "Portal"). This can be used to implement various UI components such as modals.

## Installation

```sh
yarn add @kalamazoo/layer-manager
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/layer-manager).
npm package: @kalamazoo/local-linking
Description: Link atlaskit components into other repos
Author: Steven J. Selcuk
Latest version: 1.0.0

# @atlaskit/local-linking

This build package encapsulates the dev workflow of linking Atlaskit packages to other repos.

You can read more about it in the [Contributing guide](../../CONTRIBUTING.md#linking-packages).

Supported workflows:

- Linking a direct dependency into a product repo

Unsupported workflows (coming soon):

- Linking transitive dependencies into a product repo
npm package: @kalamazoo/locale
Description: Utility functions for handling localization
Author: Steven J. Selcuk
Latest version: 1.0.2

# Locale

Utility functions for handling localization.

## Installation

```sh
yarn add @kalamazoo/locale
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/helpers/locale).
npm package: @kalamazoo/logo
Description: A React component that highlights status for quick recognition
Author: Steven J. Selcuk
Latest version: 1.0.2

# Logo

This package contains the Atlassian logo and a range of product logos as components which render an SVG.

## Installation

```sh
yarn add @kalamazoo/logo
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/logo).
npm package: @kalamazoo/lozenge
Description: A React component that highlights status for quick recognition
Author: Steven J. Selcuk
Latest version: 1.0.2

# Lozenge

Use lozenges to highlight an item's status for quick recognition. Lozenges can
be emphasised and can use color to help convey meanings that users can learn
and recognize across our products. Use subtle lozenges by default and in
instances where they may dominate the screen, such as in long tables.

## Installation

```sh
yarn add @kalamazoo/lozenge
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/lozenge).
npm package: @kalamazoo/measure
Description: Tool for measuring bundle size of an individual package in Atlaskit
Author: Steven J. Selcuk
Latest version: 1.0.0

# Atlaskit Measure Tool

The Atlaskit measure tool is effectively a quick script to analyze the webpack bundle for a package. This is incredibly useful both to get the bundle size at-a-glance as well as when doing deep dives into bundle size.

For further details on how we measure the bundle size in Atlaskit, please read this [documentation](https://atlaskit.atlassian.com/docs/guides/bundle-size).

## Usage

```
    Usage
        $ measure <[paths]>

      Options
        --analyze               Opens bundle analyzer report
        --json                  Outputs measure stats as json
        --lint                  Lint mode fails build if size has been increased beyond threshold
        --updateSnapshot        Update measure snapshots
        --s3                    Run S3 flow

      Examples
        $ measure button badge
        $ measure button --updateSnapshot
        $ measure button --analyze
```

This prints output just to the terminal which will look like:

![measure output](./screenshots/measure-output.png)

As you can see, we have split our code into different chunks to better understand where weight is. Most importantly, you can see if atlaskit, the code's own source, or external dependencies are the things weighing the package down.

The ratchet files are now stored into s3.

## Exceptions

It is important to know that we filter out some 'common packages' that are a cost that will be paid by almost everyone using atlaskit. Including these common packages in each output would distort information.

The excluded packages are:

- `react` 5.9kb (2.5kb)
- `react-dom` 96.5kb (30.9kb)
- `styled-components` 43.1kb (16kb)
- `tslib` 5.6kb (2kb)
- `prop-types` 829B (502B)

## Adding a new package or a new team folder in Atlaskit

Now that the ratchet are stored on s3, if you have to add a new package or a new team folder, you need to follow the below steps:

- If you are adding a new package under an existing team folder, the current workflow should handle it. If any issues, please jump on [#bundle-size-addon](https://app.slack.com/client/TFCUTJ0G5/CJETTKT63/details/pins).

- If your adding a new team folder,
  ** Find the custom build `push-bundle-size-to-s3` in the `bitbucket-pipelines.yml`.
  ** In the step name `Bundle size update for all other packages`, add your team folder name to the list `export input=`
  ** Rebase your branch on top of latest master.
  ** In Bitbucket, find your [branch](https://bitbucket.org/atlassian/atlaskit-mk-2/branches/).
  ** Click on the `...` and select from `Run pipeline for a branch` the custom build `push-bundle-size-to-s3`.
  ** Run the build

## A note on this package

The way this package is currently written it is **heavily** tied to the Atlaskit code-base. If you wish to use it elsewhere, we strongly recommend making sure you understand why each piece of the code exists when rolling your own version.
npm package: @kalamazoo/modal-dialog
Description: A React component that displays content in a layer blocking the interaction with the page.
Author: Steven J. Selcuk
Latest version: 1.0.2

# ModalDialog

This component displays content in a layer that sits above the rest of the page content. Users won't be able to interact with the page until the dialog is closed.

# Installation

```sh
yarn add @kalamazoo/modal-dialog
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/modal-dialog).
npm package: @kalamazoo/motion
Description: Atlassian motion variables, components and more.
Author: Steven J. Selcuk
Latest version: 1.0.2

# Motion

Atlassian motion variables, components and more.

## Installation

```sh
yarn add @kalamazoo/motion
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/utils/motion).
npm package: @kalamazoo/navigation
Description: A React component that renders a sidebar, for navigation purposes.
Author: Steven J. Selcuk
Latest version: 1.0.2

# Navigation

**DEPRECATED** - This package is deprecated. We recommend using [@kalamazoo/navigation-next](https://atlaskit.atlassian.com/packages/core/navigation-next) instead.

This component is displayed as a sidebar and it contains two sections: "global" and "container". Both sections are used for navigating through different views and containers in a product.
npm package: @kalamazoo/navigation-next
Description: Kalamazoo Quick Switch component.
Author: Steven J. Selcuk
Latest version: 1.0.7

# Navigation-next

# Entrypoints

These are entrypoints for specific components to be used carefully by the consumers. If you're using one of these entrypoints we are assuming you know what you are doing. So it means that code-splitting and tree-shaking should be done on the consumer/product side.

## How to use it

```js
import LayoutManagerWithViewController from '@kalamazoo/navigation-next/LayoutManagerWithViewController';
```

## Exposed entrypoints

- `atlaskit/navigation-next/LayoutManagerWithViewController`
- `atlaskit/navigation-next/ItemsRenderer`
- `atlaskit/navigation-next/SkeletonContainerView`
- `atlaskit/navigation-next/NavigationProvider`
- `atlaskit/navigation-next/AsyncLayoutManagerWithViewController`
- `atlaskit/navigation-next/GlobalNavigationSkeleton`
- `atlaskit/navigation-next/view-controller`
- `atlaskit/navigation-next/ui-controller`
npm package: @kalamazoo/nps
Description: React component for displaying an NPS survey dialog
Author: Steven J. Selcuk
Latest version: 1.0.2

# NPS

React component for rendering an NPS survery dialog

## Installation

```sh
yarn add @kalamazoo/nps
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/nps).
npm package: @kalamazoo/onboarding
Description: Highlight elements of the UI to the user and display a complementary dialog.
Author: Steven J. Selcuk
Latest version: 1.0.2

# Onboarding

Highlight elements of the UI to the user and display a complementary dialog.

## Installation

```sh
yarn add @kalamazoo/onboarding
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/onboarding).
npm package: @kalamazoo/page
Description: A component for building page layouts. Also includes the Grid and GridColumn components.
Author: Steven J. Selcuk
Latest version: 1.0.2

# Page

Provides Grid layouts for content & components

## Installation

yarn add @kalamazoo/page

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/page).
npm package: @kalamazoo/page-header
Description: A React component that represents Header of an application page
Author: Steven J. Selcuk
Latest version: 1.0.2

# Page-header

The page header pattern is a template that helps combine other components (breadcrumbs, headings, actions, and selects) to create a consistent user experience.

## Installation

```sh
yarn add @kalamazoo/page-header
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/page-header).
npm package: @kalamazoo/pagination
Description: A react component to be used for pagination in components like tables.
Author: Steven J. Selcuk
Latest version: 1.0.2

# Pagination

This package provides component used for pagination. It truncates the total number of pages and shows ellipsis when needed.

## Installation

```sh
yarn add @kalamazoo/pagination
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/pagination).
npm package: @kalamazoo/pipelines-docker-image
Description: Docker image used to set up the Atlaskit repo in pipelines
Author: Luke Batchelor
Latest version: 1.0.0

# Pipelines Docker Image (atlassianlabs/atlaskit-mk-2)

This docker image is used to set up Atlaskit builds in CI. It's primarily been put in place so that
we aren't reinstalling yarn every single build because it's become quite flakey (returning 520 errors from cloudflare).

We've kept it as light as possible by just extending from the `node:10.13.0` image, just as we used to.

Note that we are hosting this image on the public dockerhub, not our internal one because we need to access it from pipelines.

# Updating image

First you'll need a dockerhub account with access to the atlassianlabs repository (log in to https://hub.docker.com/ and check if you see it in the dropdown).

Now you can login to the registry

```
docker login
# enter name and password
```

You'll see a script in the `package.json` called `get-image-name` which is used to create the name of the image when creating and pushing (i.e `atlassianlabs/atlaskit-mk-2:1.0.1`). The tag (the `1.0.1` in this case) comes from this packages `package.json`. This must be manually bumped when creating a new version of the image. This allows you to test changes to the image in a pullrequest without updating it for everyone.

> Note: You'll need to bump the tag in `bitbucket-pipelines.yml` as well.

Once you've made your changes to the `Dockerfile` you can run

```
yarn build-image
```

to build the image and

```
yarn push-image
```

to push it to dockerhub. To test the changes, simply bump the tag in `bitbucket-pipelines.yml` and push a branch to Bitbucket.
npm package: @kalamazoo/polyfills
Description: A package containing polyfills for native methods.
Author: Steven J. Selcuk
Latest version: 1.0.2

# Polyfills

**This module has been deprecated**

Instead we now recommend Atlaskit consumers to support fetch, ES6 & ES7 using babel-preset-env & babel-polyfill.
The supported browser-list most Atlassian products use is:

```
  "ie >= 11",
  "last 2 Edge version",
  "last 2 Firefox version",
  "last 2 Chrome version",
  "last 2 Safari version",
  "last 2 iOS version",
  "last 2 Android version",
  "last 2 ChromeAndroid version"
```

This package contains @kalamazoo/polyfills for native methods which are unsupported by some of the browsers that we target.

## Installation

```sh
yarn add @kalamazoo/polyfills
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/polyfills).
npm package: @kalamazoo/popper
Description: Wrapper for react-popper with common config and some helpers
Author: Steven J. Selcuk
Latest version: 1.0.2

# Popup

Wrapper for react-popper with common config and some helpers

## Installation

```sh
yarn add @kalamazoo/popper
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/popper).
npm package: @kalamazoo/popup
Description: Renders a portaled popup component in reference to a trigger.
Author: Steven J. Selcuk
Latest version: 1.0.2

# popup

Creates a simple and lightweight inline Popup.

## Installation

```sh
yarn add @kalamazoo/popup
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/popup).
npm package: @kalamazoo/portal
Description: Atlaskit wrapper for rendering components in React portals
Author: Steven J. Selcuk
Latest version: 1.0.2

# Portal

An Atlaskit wrapper for rendering components in React Portals.

## Installation

yarn add @kalamazoo/portal

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/portal).
npm package: @kalamazoo/profilecard
Description: A React component to display a card with user information.
Author: Atlassian Pty. Ltd
Latest version: 1.0.2

# `@kalamazoo/profilecard`

## i18n

`src/i18n` is generated folder by `yarn i18:pull`, so don't update any files in that folder manually.
Contact Atlaskit team to get `TRANSIFEX_API_TOKEN` as a global variable

### Pushing translation

In `atlaskit-mk-2/packages/people-and-teams/profilecard` folder:

- Run `yarn i18n:push` to build and then find messages in `dis/esm/src` and push them to Transifex

### Pulling translation

In `atlaskit-mk-2/packages/people-and-teams/profilecard` folder:

- Run `yarn i18n:pull` to delete current `src/i18n` folder and download all messages from Transifex and generate `src/i18n` again.
npm package: @kalamazoo/progress-bar
Description: A React component that is a progress bar
Author: Steven J. Selcuk
Latest version: 1.0.2

# Progress Bar

Provides a standard way to indicate progress.

## Installation

```sh
yarn add @kalamazoo/progress-bar
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/server/progress-bar).
npm package: @kalamazoo/progress-indicator
Description: A set of UI elements for indicating progress through a user journey
Author: Steven J. Selcuk
Latest version: 1.0.2

# Progress-indicator

A set of UI elements for indicating progress through a user journey.

## Installation

```sh
yarn add @kalamazoo/progress-indicator
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/progress-indicator).
npm package: @kalamazoo/progress-tracker
Description: A React component that shows the steps and progress in a journey
Author: Steven J. Selcuk
Latest version: 1.0.2

# Progress-tracker

A React component that shows the steps and progress through a user journey.

## Installation

```sh
yarn add @kalamazoo/progress-tracker
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/progress-tracker).
npm package: @kalamazoo/radio
Description: A radio group React component used for selecting discrete values in a form
Author: Steven J. Selcuk
Latest version: 1.0.2

# Radio

Provides a standard way to select a single option from a list.

## Installation

```sh
yarn add @kalamazoo/radio
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/radio).
npm package: @kalamazoo/range
Description: A styled version of the native input[range] element.
Author: Steven J. Selcuk
Latest version: 1.0.2

# Field-range

Component which renders a Slider and is a substitute of the native input["range"] element.

## Installation

```sh
yarn add @kalamazoo/range
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/range).
npm package: @kalamazoo/react-experiment-framework
Description: Experimentation React components
Author: Steven J. Selcuk
Latest version: 1.0.2

# README

## What is this package for?

A set of React components that facilitate experimentation in product, by allowing React
components to be swapped dynamically at run-time.

## Installing the framework

```sh
npm i -S @kalamazoo/react-experiment-framework
```

## Usage

Wrap your React app in the ExperimentController component

```js
import { ExperimentController } from '@kalamazoo/react-experiment-framework';

ReactDOM.render(
  <ExperimentController experimentEnrollmentConfig={experimentEnrollmentConfig}>
    <App />
  </ExperimentController>,
  document.getElementById('root'),
);
```

The experimentEnrollmentConfig prop provided to the ExperimentController should be a map of experimentKey (string) to an enrollmentResolver. The resolver should return a promise that resolves to a cohort and provide eligiblity details of the user for the experiment

```js

// example of a resolver
import type { EnrollmentDetails, ExperimentEnrollmentConfig } from '@kalamazoo/react-experiment-framework';

const experimentEnrollmentResolver = async (): EnrollmentDetails => {
    // example where the cohort is provided by an async feature flag fetch, e.g., LD client, or graphql query
    const featureFlagValue = await getFeatureFlag('myExperimentFeatureFlag');

    return {
        cohort: featureFlagValue,
        isEligble: true,
        ineligibilityReasons: null
    };
}

// example of experiment enrollment config
const experimentEnrollmentConfig: ExperimentEnrollmentConfig = {
    myExperimentKey: experimentEnrollmentResolver,
    ...,
};
```

The above sets up the react context provider for experimentation.

Then to set up your experiment, wrap an existing React Component in your app with the Higher Order Component / function, asExperiment.

```js

// Your original component that provides the current experience you intend to swap with the experiment
class ExistingComponent extends React.Component {
    ...
}

// Your new component that provides the experimental experience
class ExperimentReplacementComponent extends React.Component {
    ...
}

export default asExperiment({
    // example cohort names used here, control and variant, but they can be whatever you like
    control: ExistingComponent,
    variant: ExperimentReplacementComponent,

    // fallback is not optional, however, this is what is rendered in the event of a error encountered or when the user
    // is ineligible
    fallback: ExistingComponent,
}, 'myExperimentKey',
{
    // callbacks to trigger tracking on exposure and errors, these are just examples provide your own
    onExposure: (data) => analyticsClient.trigger('experiment-exposure', data),
    onError: (data) => analyticsClient.trigger('experiment-error', data)
},
    // optional component to show while enrollment is being resolved. When absent, renders null during resolution.
    Spinner,
);
```
npm package: @kalamazoo/reduced-ui-pack
Description: CSS classes which provide styling for a reduced number of Atlaskit components.
Author: Steven J. Selcuk
Latest version: 1.0.2

# Reduced UI Pack

This package exports a CSS file which includes some CSS classes that provide
styling for a reduced number of Atlaskit components.

There is also an icon SVG sprite sheet included. See the "Try it out" section
below for usage instructions.

## Installation

```sh
npm install reduced-ui-pack
```

Make sure you're also including the `css-reset` stylesheet before these styles.
The `css-reset` stylesheet provides the core typography rules which
`reduced-ui-pack` builds upon. Install it with:

```sh
npm install @kalamazoo/css-reset
```

## Using the component

### Importing

The `reduced-ui-pack` package can be consumed via the dist, or in Webpack.

#### Importing in Webpack

```js
import 'reduced-ui-pack';
```

The Webpack style loader should then place the CSS within the HEAD of your HTML
element.

#### Importing in HTML

```html
<html>
  <head>
    <link
      rel="stylesheet"
      href="node_modules/@kalamazoo/css-reset/dist/bundle.css"
    />
    <link
      rel="stylesheet"
      href="node_modules/reduced-ui-pack/dist/bundle.css"
    />
  </head>
  <body>
    <!-- ... -->
  </body>
</html>
```
npm package: @kalamazoo/refinement-bar
Description: Jira Refinement Bar Component
Author: Steven J. Selcuk
Latest version: 1.0.2

# Refinement Bar

The elements for refining filters within Jira's issue views.

## Installation

```sh
yarn add @kalamazoo/refinement-bar
```

## Usage

Docs and examples can be found on [the atlaskit website](https://atlaskit.atlassian.com/packages/jira/refinement-bar).
npm package: @kalamazoo/right-side-panel
Description: A cross-product right-side-panel component
Author: Steven J. Selcuk
Latest version: 1.0.2

# Right Side Panel

## Installation

```sh
yarn add @kalamazoo/right-side-panel
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/right-side-panel).
npm package: @kalamazoo/section-message
Description: A react component used to alert users of a particular screen area that needs user action
Author: Steven J. Selcuk
Latest version: 1.0.2

# Section Message

A react component used to alert users of a particular screen area that needs user action

## Installation

```sh
yarn add @kalamazoo/section-message
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/section-message).
npm package: @kalamazoo/select
Description: React component which allows selection of item(s) from a dropdown list.
Author: Steven J. Selcuk
Latest version: 1.0.2

# Select

React component which allows selection of an item or items from a dropdown list. Substitute for the native select element.

## Installation

```sh
yarn add @kalamazoo/select
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/select).
npm package: @kalamazoo/single-select
Description: React component which allows selection of a single item from a dropdown list. Substitute for the native select element
Author: Steven J. Selcuk
Latest version: 1.0.2

# SingleSelect

React component which allows selection of a single item from a dropdown list. Substitute for the native select element

## Try it out

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com).
npm package: @kalamazoo/size-detector
Description: Wrapper for components that need to respond to size changes
Author: Steven J. Selcuk
Latest version: 1.0.2

# Size-detector

This is a utility component that informs the child function of the available width and height.

## Installation

```sh
yarn add @kalamazoo/size-detector
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/size-detector).

## Acknowledgements

This size detection method used by this component is inspired by Federico Zivolo's awesome [react-resize-aware][react-resize-aware-repo] project, which Atlassian has contributed a PR back to.

[react-resize-aware-repo]: https://github.com/FezVrasta/react-resize-aware
npm package: @kalamazoo/spinner
Description: A React component that displays a spinning icon to show a loading state
Author: Steven J. Selcuk
Latest version: 1.0.2

# Spinner

A React component that displays a spinning icon to show a loading state.

## Installation

```sh
yarn add @kalamazoo/spinner
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/spinner)
npm package: @kalamazoo/table-tree
Description: A React Component for displaying expandable tables with tree-like hierarchies
Author: Steven J. Selcuk
Latest version: 1.0.2

# Table-tree

Use this component to display an expandable table with a tree-like hierarchy.

## Installation

```sh
yarn add @kalamazoo/table-tree
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/table-tree).
npm package: @kalamazoo/tabs
Description: A React component for displaying multiple panels within a single window
Author: Steven J. Selcuk
Latest version: 1.0.2

# Tabs

A tab is a simple graphical element that allows to contain multiple panels within a single window, and provides an easy way to switch between panels of similar content.

## Installation

```sh
yarn add @kalamazoo/tabs
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/tabs).
npm package: @kalamazoo/tag
Description: This component displays as a tag with an optional link and/or button to remove the given tag.
Author: Steven J. Selcuk
Latest version: 1.0.2

# Tag

This component is displayed as an accessible tag with an optional link and/or
button to remove it.

Although the `tag` component can be used by itself, it works best in
conjunction with the [`@kalamazoo/tag-group`](https://www.npmjs.com/package/@kalamazoo/tag-group)
component.

## Installation

```sh
yarn add @kalamazoo/tag
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/tag).
npm package: @kalamazoo/tag-group
Description: A React component used for grouping and controlling @atlskit/tag components
Author: Steven J. Selcuk
Latest version: 1.0.2

# Tag-group

This component displays an arbitrary number of
[`@kalamazoo/tag`](https://www.npmjs.com/package/@kalamazoo/tag)s in a grouped
manner. The group manages spacing and animation direction and allows for some
alignment options.

## Installation

```sh
yarn add @kalamazoo/tag-group
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/tag-group).
npm package: @kalamazoo/textfield
Description: Text Field Component
Author: Steven J. Selcuk
Latest version: 1.0.2

# Textfield

Provides a standard way to create a text-based form input.

## Installation

```sh
yarn add @kalamazoo/textfield
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/textfield).
npm package: @kalamazoo/theme
Description: The Atlaskit theme framework
Author: Steven J. Selcuk
Latest version: 1.0.1

# Theme

The Atlaskit theme framework, helpers and the ADG color palette.

## Installation

```sh
yarn add @kalamazoo/theme
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/theme).
npm package: @kalamazoo/toggle
Description: A component to view and switch between enabled or disabled states
Author: Steven J. Selcuk
Latest version: 1.0.2

# Toggle

A component to view and switch between enabled or disabled states.

## Installation

```sh
yarn add @kalamazoo/toggle
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/toggle).
npm package: @kalamazoo/tooltip
Description: A React Component for displaying Tooltips
Author: Steven J. Selcuk
Latest version: 1.0.2

# Tooltip

Use this component to display extra information about an element by displaying a floating description.

## Installation

```sh
yarn add @kalamazoo/tooltip
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/tooltip).
npm package: @kalamazoo/width-detector
Description: Wrapper for components that need to respond to width changes
Author: Steven J. Selcuk
Latest version: 1.0.2

# Width-detector

This is a utility component that informs the child function of the available width.

## Installation

```sh
yarn add @kalamazoo/width-detector
```

## Usage

Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/width-detector).

## Acknowledgements

This size detection method used by this component is inspired by Federico Zivolo's awesome [react-resize-aware][react-resize-aware-repo] project, which Atlassian has contributed a PR back to.

[react-resize-aware-repo]: https://github.com/FezVrasta/react-resize-aware