### Getting Started with AddSelect

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products-web-components/src/components/add-select/add-select.mdx

A complete example demonstrating how to set up and use the AddSelect component with multiple items. Includes import and HTML structure.

```javascript
import '@carbon/ibm-products-web-components/es/components/add-select/index.js';
```

```html
<c4p-add-select multi>
  <c4p-add-select-body
    items-label="All items"
    global-search-label="Search"
    global-search-placeholder="Search items"
    item-count="5"
  >
    <c4p-add-select-content>
      <c4p-add-select-row
        item-id="1"
        title="Item 1"
        subtitle="Description"
        value="item-1"
      ></c4p-add-select-row>
      <c4p-add-select-row
        item-id="2"
        title="Item 2"
        subtitle="Description"
        value="item-2"
      ></c4p-add-select-row>
    </c4p-add-select-content>
  </c4p-add-select-body>
</c4p-add-select>
```

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

### Run Development Server with Yarn

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/patterns/CreateTearsheet/example/README.md

Execute this command to start the local development server for the example.

```bash
yarn dev
```

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

### Standard CreateFullPage Example

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/patterns/CreateFullPage/CreateFullPage.mdx

This example demonstrates the basic implementation of the CreateFullPage pattern for a standard multi-step workflow.

```jsx
import React from 'react';
import { CreateFullPage } from '@carbon/ibm-products';

const App = () => {
  return (
    <CreateFullPage>
      {/* Steps and content go here */}
    </CreateFullPage>
  );
};

export default App;
```

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

### Install @carbon/ibm-products with npm

Source: https://github.com/carbon-design-system/ibm-products/blob/main/README.md

Use this command to install the package if you prefer npm.

```bash
npm install @carbon/ibm-products
```

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

### Install @carbon/ibm-products-web-components

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products-web-components/README.md

Install the package using yarn or npm. This is the first step to using the web components.

```shell
yarn add @carbon/ibm-products-web-components
```

```shell
npm install @carbon/ibm-products-web-components
```

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

### Create Full Page HTML Structure

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products-web-components/src/patterns/create-full-page/create-full-page.mdx

Defines the HTML structure for the Create Full Page pattern, including steps, input fields, and configuration options. This example shows a basic setup with two steps: 'Partition' and 'Configuration'.

```html
<create-full-page
  secondary-title="Create topic"
  next-button-text="Next"
  back-button-text="Back"
  cancel-button-text="Cancel"
  submit-button-text="Create"
  modal-title="Are you sure you want to cancel?"
  modal-description="If you cancel, the information you have entered won't be saved."
  modal-danger-button-text="Cancel partition"
  modal-secondary-button-text="Return to form"
>
  <create-full-page-step
    slot="steps"
    title="Partition"
    subtitle="One or more partitions make up a topic."
    description="A partition is an ordered list of messages."
  >
    <cds-grid>
      <cds-column xlg="5" lg="5" md="4" sm="4">
        <cds-text-input
          id="topic-name"
          label="Topic name"
          placeholder="Enter topic name"
          required
        >
        </cds-text-input>
      </cds-column>
    </cds-grid>
  </create-full-page-step>

  <create-full-page-step
    slot="steps"
    title="Configuration"
    description="Configure your topic settings."
  >
    <cds-grid>
      <cds-column xlg="5" lg="5" md="4" sm="4">
        <p>Additional configuration options...</p>
      </cds-column>
    </cds-grid>
  </create-full-page-step>
</create-full-page>
```

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

### Install @carbon/ibm-products

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/README.md

Install the @carbon/ibm-products package using either yarn or npm.

```shell
$ yarn add @carbon/ibm-products
```

```shell
$ npm install @carbon/ibm-products
```

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

### Install @carbon/ibm-products with Yarn

Source: https://github.com/carbon-design-system/ibm-products/blob/main/README.md

Use this command to install the package if you prefer Yarn.

```bash
yarn add @carbon/ibm-products
```

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

### CreateFullPage with Sections Example

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/patterns/CreateFullPage/CreateFullPage.mdx

This example shows how to organize form fields into logical sections within a step of the CreateFullPage pattern.

```jsx
import React from 'react';
import { CreateFullPage, CreateFullPageStep } from '@carbon/ibm-products';
import { TextInput } from 'carbon-components-react';

const App = () => {
  return (
    <CreateFullPage>
      <CreateFullPageStep title="Step 1" description="Section example">
        <TextInput labelText="Section Input" id="section-input" />
      </CreateFullPageStep>
      {/* Other steps */}
    </CreateFullPage>
  );
};

export default App;
```

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

### Install Dependencies with Yarn

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/patterns/CreateTearsheet/example/README.md

Use this command to install project dependencies before running the development server.

```bash
yarn install
```

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

### Configure Example in gallery.config.json

Source: https://github.com/carbon-design-system/ibm-products/blob/main/examples/carbon-for-ibm-products/APIKeyModal/README.md

Use this JSON structure to define an example's label and package configuration, including component flags, feature flags, and template variations. All fields are optional, but a label is usually specified.

```json
{
  "label": "Name of example in gallery",
  "package-config": {
    "flags": {
      "component": {
        "MyComponent": true
      },
      "feature": {
        "MyFeature": true
      }
      "prefix": "alt-prefix",
    },
    "templates-variation": "templates-react-16"
  }
}
```

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

### Stackblitz Example with Animated Media

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/components/InlineTip/InlineTip.mdx

This link directs to a Stackblitz example demonstrating the InlineTip component integrated with animated media. It's useful for seeing a practical, interactive implementation.

```html
<a href="https://stackblitz.com/github/carbon-design-system/ibm-products/tree/main/examples/carbon-for-ibm-products/InlineTipWithAnimatedMedia" target="_blank">
  <img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt="Example with animated media" />
</a>
```

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

### Set of Actions Example

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products-web-components/examples/set-of-actions/index.html

Example demonstrating how to set actions data for a Set of Actions component. Ensure the 'actionsData' is imported and the target element is correctly selected.

```javascript
import { actionsData } from './src/example-data.ts'; const setOfActions = document.getElementById('setOfActions'); setOfActions.actionsData = actionsData;
```

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

### Import Guide Banner Component

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products-web-components/src/components/guide-banner/guide-banner.mdx

Import the Guide Banner component into your JavaScript project.

```javascript
import '@carbon/ibm-products-web-components/es/components/guide-banner/index.js';
```

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

### Guidebanner Collapsible Example

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/components/Guidebanner/Guidebanner.mdx

Demonstrates the collapsible functionality of the Guidebanner component. This example shows the default behavior where the banner can be expanded or collapsed.

```javascript
import { Story, Controls, Canvas } from '@storybook/addon-docs/blocks';
import { StackblitzLink } from '../../global/js/utils/story-helper';
import { Guidebanner } from '.';
import * as stories from './Guidebanner.stories';

<Canvas of={stories.collapsible} />
```

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

### CreateFullPage with Global Header Integration Example

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/patterns/CreateFullPage/CreateFullPage.mdx

This example shows how the CreateFullPage pattern integrates with Carbon's global header and side navigation for a cohesive user experience.

```jsx
import React from 'react';
import { CreateFullPage } from '@carbon/ibm-products';
import { Header, HeaderName, SideNav, SideNavItems, SideNavLink } from 'carbon-components-react';

const App = () => {
  return (
    <>
      <Header aria-label="IBM Platform">
        <HeaderName prefix="IBM">
          Platform
        </HeaderName>
      </Header>
      <SideNav isFixedNav expanded={true} aria-label="Side navigation">
        <SideNavItems>
          <SideNavLink href="#">Link 1</SideNavLink>
        </SideNavItems>
      </SideNav>
      <div className="content-wrapper">
        <CreateFullPage>
          {/* Steps and content go here */}
        </CreateFullPage>
      </div>
    </>
  );
};

export default App;
```

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

### Install Playwright Browsers

Source: https://github.com/carbon-design-system/ibm-products/blob/main/docs/e2e_testing.md

Install the necessary browser binaries for Playwright to execute tests. This command should be run if it's the first time using Playwright in the project.

```bash
yarn playwright install
```

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

### CreateFullPage with Header Example

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/patterns/CreateFullPage/CreateFullPage.mdx

This example demonstrates how to include breadcrumbs and a page title in the header of the CreateFullPage pattern.

```jsx
import React from 'react';
import { CreateFullPage, SimpleHeader } from '@carbon/ibm-products';
import { Breadcrumb, BreadcrumbItem } from 'carbon-components-react';

const App = () => {
  return (
    <CreateFullPage header={<SimpleHeader title="Create Resource" breadcrumbs={<Breadcrumb><BreadcrumbItem href="#">Home</BreadcrumbItem></Breadcrumb>} />} >
      {/* Steps and content go here */}
    </CreateFullPage>
  );
};

export default App;
```

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

### Add Select Component Usage Example

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products-web-components/src/components/add-select/README.md

Demonstrates how to use the c4p-add-select component with multiple items and search functionality. This example shows a multi-select configuration with predefined items.

```html
<c4p-add-select
  open
  title="Add items"
  description="Select items to add"
  multi
  items-label="Available items"
  global-search-label="Search items"
>
  <c4p-add-select-body>
    <c4p-add-select-list multi>
      <c4p-add-select-row
        item-id="item-1"
        title="Item 1"
        subtitle="Description for item 1"
        value="item-1"
      ></c4p-add-select-row>
      <c4p-add-select-row
        item-id="item-2"
        title="Item 2"
        subtitle="Description for item 2"
        value="item-2"
      ></c4p-add-select-row>
    </c4p-add-select-list>
  </c4p-add-select-body>
</c4p-add-select>
```

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

### Build and Run Storybook Locally

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products-web-components/README.md

Install dependencies, build the project, and then run Storybook locally. This is useful for development and testing.

```shell
yarn
yarn build
```

```shell
yarn storybook-wc
```

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

### Install @carbon/ibm-products-styles with npm

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products-styles/README.md

Use this command to add the styles package to your project using npm.

```shell
npm install @carbon/ibm-products-styles
```

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

### Start Storybook Locally

Source: https://github.com/carbon-design-system/ibm-products/blob/main/docs/e2e_testing.md

Start the Storybook service locally. This is a prerequisite for running Playwright tests against components in `@carbon/ibm-products`.

```bash
yarn
yarn storybook
```

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

### CreateFullPage with Step in Error State Example

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/patterns/CreateFullPage/CreateFullPage.mdx

This example illustrates how to handle and display errors within a step of the CreateFullPage pattern, indicating validation issues.

```jsx
import React from 'react';
import { CreateFullPage, CreateFullPageStep } from '@carbon/ibm-products';
import { TextInput } from 'carbon-components-react';

const App = () => {
  return (
    <CreateFullPage>
      <CreateFullPageStep title="Step 1" description="Error state example" invalid={true} invalidText="This field is required">
        <TextInput labelText="Input with Error" id="error-input" />
      </CreateFullPageStep>
      {/* Other steps */}
    </CreateFullPage>
  );
};

export default App;
```

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

### Basic Guide Banner HTML Structure

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products-web-components/src/components/guide-banner/guide-banner.mdx

Render a basic Guide Banner component with a title and a collapsible body.

```html
<c4p-guide-banner
  collapseButtonLabel="Read less"
  expandButtonLabel="Read more"
  titleText="Page-related heading that can stand on its own"
  open
>
  <div slot="body">
    <!-- Guide banner elements go here -->
  </div>
</c4p-guide-banner>
```

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

### Manual Saving Example

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/components/Saving/Saving.mdx

Example of using the Saving component for manual saving. This is used when the user explicitly triggers the save action.

```javascript
import { Story, Controls, Source, Canvas } from '@storybook/addon-docs/blocks';
import { 
  CodesandboxLink,
  stackblitzHref,
} from '../../global/js/utils/story-helper';
import { Saving } from '.';
import * as stories from './Saving.stories';
import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';

<Canvas
  of={stories.Manual}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () =>
        stackblitzPrefillConfig({
          story: stories.Manual,
          styles: stories.default.parameters.styles,
        }),
    },
  ]}
/>
```

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

### Install @carbon/ibm-products-styles with Yarn

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products-styles/README.md

Use this command to add the styles package to your project using Yarn.

```shell
yarn add @carbon/ibm-products-styles
```

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

### Generate API Key Modal Example

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/patterns/GenerateAnAPIKey/GenerateAnAPIKey.mdx

A React component example demonstrating the GenerateAnAPIKey pattern, handling both the input phase for a new key and the display of a generated key with download functionality.

```jsx
<GenerateAnAPIKey
  open={open}
  onRequestClose={toggleModal}
  primaryButtonDisabled={loading || name.length === 0}
  secondaryButtonText="Close"
  loadingDescription="Loading"
  onLoadingSuccess={() => {}}
  {...modalProps}
>
  {key ? (
    <>
      <PasswordInput
        id="generated-api-key"
        labelText="Unique API key"
        value={key}
        readOnly
        showPasswordLabel="Show key"
        hidePasswordLabel="Hide key"
        tooltipPosition="left"
        helperText="This is your unique API key and is non-recoverable. If you lose this API key, you will have to reset it."
      />
      <div className={`${blockClass}__messaging`}>
        <InformationFilled size={16} />
        <APIKeyDownloader
          apiKey={key}
          body="This is your unique API key and is non-recoverable. If you lose this API key, you will have to reset it."
          fileName="apikey"
          linkText="Download as JSON"
          fileType="json"
          downloadLinkLabel="Download API Key in Java Script File format"
        />
      </div>
       <div className={`${blockClass}__messaging`}>
      <CheckmarkFilled
        size={20}
        className={`${blockClass}__checkmark-icon`}
      />
      <p
        className={`${blockClass}__messaging-text`}
        role="alert"
        aria-live="assertive"
      >
        API key successfully created
      </p>
      </div>
    </>
  ) : (
    <>
      <p style={{ marginBlockEnd: '1rem' }}>
        (Optional description text) To connect securely to [product name],
        your application or tool needs an API key with permission to
        access resources such as [product resource name].
      </p>
      <TextInput
        id="app-name"
        labelText="Name your application"
        placeholder="Application name"
        value={name}
        onChange={handleName}
        disabled={loading}
        helperText="Providing the application name will help you identify your API key later."
      />
    </>
  )}
</GenerateAnAPIKey>
```

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

### Basic InterstitialScreen Usage Example

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/components/InterstitialScreen/InterstitialScreen.mdx

This example shows the basic structure of an InterstitialScreen with header, body, and footer components, including custom labels for footer buttons.

```jsx
<InterstitialScreen open >
  <InterstitialScreen.Header
    headerTitle={'headerTitle'}
    headerSubTitle={'headerSubTitle'}
  ></InterstitialScreen.Header>
  <InterstitialScreen.Body
    contentRenderer={(internalConfig) => {
      return (
        <InterstitialScreenView
          className="NoImageExampleModal"
          stepTitle="Step 1"
        >
          Step 1 content
        </InterstitialScreenView>
         <InterstitialScreenView
          className="NoImageExampleModal"
          stepTitle="Step 2"
        >
          Step 2 content
        </InterstitialScreenView>
      );
    }}
  />
  <InterstitialScreen.Footer
    nextButtonLabel="Next"
    previousButtonLabel="Back"
    skipButtonLabel="Skip"
    startButtonLabel="Get started"
  />
</InterstitialScreen>
```

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

### Tearsheet Header Configuration

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/components/Tearsheet/next/Tearsheet.mdx

Example of configuring the header with actions and a navigation bar.

```jsx
<Tearsheet.Header>
  <Tearsheet.HeaderContent
    {...headerContentProps}
    headerActions={
      <Tearsheet.HeaderActions>
        <Tearsheet.HeaderActionItem>
          <Button kind="tertiary" size="sm">
            Action 1
          </Button>
        </Tearsheet.HeaderActionItem>
        ...
      </Tearsheet.HeaderActions>
    }
  ></Tearsheet.HeaderContent>
  Any extra content like ProgressIndicator, notifications etc can go here
  <Tearsheet.NavigationBar
    scroller={<Tearsheet.ScrollButton />}
  ></Tearsheet.NavigationBar>
</Tearsheet.Header>
```

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

### Error Empty State with Action

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.mdx

Configures the empty state to include a primary action button. Ideal for guiding users to resolve the empty state, e.g., by adding data. Requires Storybook setup.

```javascript
import { Story, Controls, Source, Canvas } from '@storybook/addon-docs/blocks';
import * as stories from './ErrorEmptyState.stories';
import { stackblitzPrefillConfig } from '../../../../previewer/codePreviewer';

<Canvas
  of={stories.withAction}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () =>
        stackblitzPrefillConfig({
          story: stories.withAction,
        }),
    },
  ]}
/>
```

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

### Build Project

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products-utilities/README.md

Command to build the project.

```bash
yarn build
```

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

### Component Folder Structure Example

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/AGENTS.md

Illustrates the standard directory structure for components within `packages/ibm-products/src/components/`. This includes the main component file, stories, tests, and documentation.

```bash
ComponentName/
├── index.tsx // Re-exports
├── ComponentName.tsx // Main component
├── ComponentName.stories.js // Storybook stories
├── component-name-story.scss // Styling for storybook stories
├── ComponentName.mdx // Storybook mdx docs
└── __tests__/
│ └── ComponentName-test.js // Unit tests
└── docs/
  └── overview.mdx // Demo file consumed by external documentation
```

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

### Build All Packages

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/README.md

Run this command to build all the packages within the project.

```shell
yarn build
```

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

### Import Preview components from @carbon/ibm-products

Source: https://github.com/carbon-design-system/ibm-products/blob/main/README.md

Import components with the 'preview__' prefix, which are production-ready but may have minor API changes.

```js
import { preview__Coachmark } from '@carbon/ibm-products';
```

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

### Install Storybook Addon for Carbon Themes

Source: https://github.com/carbon-design-system/ibm-products/blob/main/config/storybook-addon-carbon-theme/README.md

Install the addon using npm or yarn. This package is a dev dependency.

```sh
npm install --save-dev @carbon/storybook-addon-theme
yarn install --dev @carbon/storybook-addon-theme
```

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

### Import and Upload Storybook Setup

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/patterns/ImportAndUpload/ImportAndUpload.mdx

Sets up Storybook for the Import and Upload pattern, including necessary imports from '@storybook/addon-docs/blocks' and local utility files. This is boilerplate for Storybook integration.

```javascript
import { Story, Controls, Source, Canvas } from '@storybook/addon-docs/blocks';
import { CodesandboxLink } from '../../global/js/utils/story-helper';
import * as stories from './ImportAndUpload.stories';

```

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

### Run Playwright Tests

Source: https://github.com/carbon-design-system/ibm-products/blob/main/docs/e2e_testing.md

Execute all Playwright end-to-end tests. Ensure Playwright browsers are installed via 'yarn playwright install'.

```bash
yarn playwright test
```

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

### FullPageError Component - Stackblitz Example Link

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/components/FullPageError/FullPageError.mdx

Provides a direct link to an interactive example of the FullPageError component on Stackblitz for further exploration and modification.

```html
<a href={stackblitzHref('FullPageError')}>Stackblitz example</a>
```

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

### Full Tearsheet Usage Example

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/components/Tearsheet/next/Tearsheet.mdx

Provides a comprehensive example of the Tearsheet component structure including header actions, navigation, and content areas.

```jsx
<Tearsheet {...props}>
  <Tearsheet.Header>
    <Tearsheet.HeaderContent
      {...headerContentProps}
      headerActions={
        <Tearsheet.HeaderActions
          menuButtonProps={{ label: 'Actions', kind: 'tertiary' }}
        >
          <Tearsheet.HeaderActionItem overflowItemLabel="Action 1">
            <Button kind="tertiary" size="sm">
              Action 1
            </Button>
          </Tearsheet.HeaderActionItem>
          ...
        </Tearsheet.HeaderActions>
      }
    ></Tearsheet.HeaderContent>
    Any extra content like ProgressIndicator, notifications etc can go here
    <Tearsheet.NavigationBar scroller={<Tearsheet.ScrollButton />}>
      This sticks to bottom of the header , so tablist, tags etc can be rendered
      here
    </Tearsheet.NavigationBar>
  </Tearsheet.Header>

  <Tearsheet.Influencer>
    Rendered on the left, spanning the full height. Can be used to display a
    vertical progress indicator or similar elements.
  </Tearsheet.Influencer>

  <Tearsheet.Body>
    <Tearsheet.MainContent>
      This is the main content area.
    </Tearsheet.MainContent>
    <Tearsheet.SummaryContent>
      // Rendered next to the main content area, this section can be used to
      display summary details or related information.
    </Tearsheet.SummaryContent>
  </Tearsheet.Body>

  <Tearsheet.Footer>Footer buttons can be rendered here</Tearsheet.Footer>
</Tearsheet>
```

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

### Import Preview Candidate components from @carbon/ibm-products

Source: https://github.com/carbon-design-system/ibm-products/blob/main/README.md

Import components with the 'previewCandidate__' prefix, which are feature-complete and undergoing validation.

```js
import {
  previewCandidate__Toolbar,
  previewCandidate__SearchBar,
} from '@carbon/ibm-products';
```

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

### Auto Saving Example

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/components/Saving/Saving.mdx

Example of using the Saving component for automatic saving. This is typically used when the saving action is handled implicitly by the system.

```javascript
import { Story, Controls, Source, Canvas } from '@storybook/addon-docs/blocks';
import { 
  CodesandboxLink,
  stackblitzHref,
} from '../../global/js/utils/story-helper';
import { Saving } from '.';
import * as stories from './Saving.stories';
import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';

<Canvas
  of={stories.Auto}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () =>
        stackblitzPrefillConfig({
          story: stories.Auto,
          styles: stories.default.parameters.styles,
        }),
    },
  ]} 
/>
```

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

### Example Release Candidate Announcement

Source: https://github.com/carbon-design-system/ibm-products/blob/main/docs/guides/publishing-releases.md

Use this template to announce a release candidate in the Slack channel. It includes details about what a release candidate is, a link to the changelog, and the staging environment.

```text
:ibm-products::ibm-products::ibm-products::ibm-products::ibm-products::ibm-products::ibm-products:

Hi all! Release candidate v2.45.0-rc.0 of `@carbon/ibm-products` has been created and is ready for testing!

What is a release candidate? Before releasing a full version (ie. v2.45.0), we publish prerelease versions / release candidates for testing purposes. This helps to prevent any major bugs making their way to our full versions. If you find any issues with this release candidate, you can report any issues here: https://github.com/carbon-design-system/ibm-products/issues/new/choose.

Changelog: https://github.com/carbon-design-system/ibm-products/releases/tag/%40carbon%2Fibm-products%402.45.0-rc.0
Storybook environment for react (Staging): https://carbon-design-system.github.io/ibm-products/staging/react/
```

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

### CoachmarkFixed Example Usage

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/components/CoachmarkFixed/CoachmarkFixed.mdx

Renders the CoachmarkFixed component within a div for example usage. This snippet is typically used within a Storybook Canvas.

```javascript
<div className="CoachmarkBaseExampleUsage">
    <Story of={CoachmarkFixedStories.coachmarkFixed} />
  </div>
```

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

### TagSet Component - Many Tags Example

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/components/TagSet/TagSet.mdx

Example usage of the TagSet component with more than 10 tags. This showcases how the component handles a larger number of tags.

```javascript
import { Story, Controls, Source, Canvas } from '@storybook/addon-docs/blocks';
import { CodesandboxLink } from '../../global/js/utils/story-helper';
import { TagSet } from '.';
import * as stories from './TagSet.stories';

<Canvas>
  <Story of={stories.ManyTags} />
</Canvas>
```

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

### Basic Create Tearsheet Narrow Example

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/patterns/CreateTearsheetNarrow/CreateTearsheet.mdx

Demonstrates the fundamental structure of the Create Tearsheet Narrow pattern. Includes a button to open the tearsheet and the Tearsheet component itself with header, body, and footer configurations.

```html
<div className="app">
  <Button onClick={() => setOpen(true)}>
    Create partition
  </Button>
  <Tearsheet
    open={open}
    variant="narrow"
    onClose={() => setOpen(false)}
    preventCloseOnClickOutside
  >
    <Tearsheet.Header hideCloseButton={true}>
      <Tearsheet.HeaderContent
        label="Test label"
        title="Create partition"
        description="Select the number of partitions you want to create"
      />
    </Tearsheet.Header>
    <Tearsheet.Body className="create-tearsheet-narrow__body">
      <Tearsheet.MainContent isFlush={true}>
        <h3 className="create-tearsheet-narrow__form-title">
          Core configuration
        </h3>
        <p className="create-tearsheet-narrow__form-description">
          We recommend you fill out and evaluate these details at a minimum before deploying your topic.
        </p>
        <Form onSubmit={handleSubmit}>
          <FormGroup legendText="Topic information">
            <TextInput
              labelText="Topic name"
              id="topic-name"
              value={topicName}
              placeholder="Enter topic name"
              onChange={(e) => setTopicName(e.target.value)}
            />
            <NumberInput
              id="partition-count"
              min={1}
              max={100}
              value={partitionCount}
              label="Partitions"
              onChange={(e) => setPartitionCount(e.imaginaryTarget.value)}
            />
          </FormGroup>
        </Form>
      </Tearsheet.MainContent>
    </Tearsheet.Body>
    <Tearsheet.Footer actions={actions} buttonSize="2xl" />
  </Tearsheet>
</div>
```

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

### TagSet Component - Hundreds of Tags Example

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/components/TagSet/TagSet.mdx

Example usage of the TagSet component with hundreds of tags. This configuration includes a searchable modal to display all tags effectively.

```javascript
import { Story, Controls, Source, Canvas } from '@storybook/addon-docs/blocks';
import { CodesandboxLink } from '../../global/js/utils/story-helper';
import { TagSet } from '.';
import * as stories from './TagSet.stories';

<Canvas>
  <Story of={stories.HundredsOfTags} />
</Canvas>
```

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

### TagSet Component - Five Tags Example

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/components/TagSet/TagSet.mdx

Example usage of the TagSet component with five tags, demonstrating no overflow. Adjust 'max-visible' to observe overflow behavior.

```javascript
import { Story, Controls, Source, Canvas } from '@storybook/addon-docs/blocks';
import { CodesandboxLink } from '../../global/js/utils/story-helper';
import { TagSet } from '.';
import * as stories from './TagSet.stories';

<Canvas>
  <Story of={stories.FiveTags} />
</Canvas>
```

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

### Configure Storybook Preview File with Global Decorator

Source: https://github.com/carbon-design-system/ibm-products/blob/main/config/storybook-addon-carbon-theme/README.md

Set up the global decorator and default theme in your Storybook preview file (`.storybook/preview.js`). This enables the theme switching functionality and sets an initial theme.

```javascript
import { withCarbonTheme } from '@carbon/storybook-addon-theme/withCarbonTheme';
import {
  PARAM_KEY as CARBON_THEME_PARAM_KEY,
  CARBON_THEMES,
} from '@carbon/storybook-addon-theme/constants';

const decorators = [
  /// other decorators...
  withCarbonTheme,
];

const globals = {
  // other globals...
  // default value of the theme selector
  [CARBON_THEME_PARAM_KEY]: CARBON_THEMES.g10,
};

export { decorators, globals };
```

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

### Guidebanner Few Insights Example

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/components/Guidebanner/Guidebanner.mdx

Shows the Guidebanner component configured to display a limited number of insights. This is useful for pages with concise introductory information.

```javascript
import { Story, Controls, Canvas } from '@storybook/addon-docs/blocks';
import { StackblitzLink } from '../../global/js/utils/story-helper';
import { Guidebanner } from '.';
import * as stories from './Guidebanner.stories';

<Canvas of={stories.fewInsights} />
```

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

### Import Preview Candidate Components

Source: https://github.com/carbon-design-system/ibm-products/blob/main/docs/guides/COMPONENT_STATUS_DEFINITIONS.md

Use the 'previewCandidate__' prefix for components that are candidates for preview. These require careful consideration before use.

```typescript
// Use previewCandidate__ prefix
import {
  previewCandidate__Toolbar,
  previewCandidate__SearchBar,
} from '@carbon/ibm-products';
```

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

### Configure Storybook Main File

Source: https://github.com/carbon-design-system/ibm-products/blob/main/config/storybook-addon-carbon-theme/README.md

Add the theme addon preset to your Storybook's main configuration file (`.storybook/main.js`).

```javascript
module.exports = {
  // other addons...
  addons: ['@carbon/storybook-addon-theme/preset.js'],
};
```

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

### Import Preview Components

Source: https://github.com/carbon-design-system/ibm-products/blob/main/docs/guides/COMPONENT_STATUS_DEFINITIONS.md

Use the 'preview__' prefix when importing components that are in preview. These are not yet production-ready.

```typescript
// Use preview__ prefix
import { preview__PageHeader, preview__Coachmark } from '@carbon/ibm-products';
```

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

### Initializing the Carousel

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/patterns/Carousel/Carousel.mdx

Demonstrates how to initialize the carousel component with basic configuration and event handlers.

```APIDOC
## initCarousel(container, config)

### Description
Initializes a carousel on the specified container element.

### Parameters
#### Path Parameters
* **container** (HTMLElement) - Required - The container element that holds the carousel items
* **config** (Object) - Optional - Configuration options
  * **onViewChangeStart** (Function) - Callback fired when transition starts
  * **onViewChangeEnd** (Function) - Callback fired when transition completes
  * **excludeSwipeSupport** (Boolean) - Disable swipe gesture support (default: `false`)
  * **useMaxHeight** (Boolean) - Use maximum item height instead of minimum (default: `false`)

### Returns
Object with methods:

* `next()`: Navigate to the next item
* `prev()`: Navigate to the previous item (or back in history for ViewStack)
* `goToIndex(index)`: Navigate to a specific index
* `reset()`: Reset to the first item
* `getActiveItem()`: Get the currently active item
* `destroyEvents()`: Clean up event listeners

### Callback Response
Both `onViewChangeStart` and `onViewChangeEnd` receive an object with:

* `currentIndex` (Number): Index of the current item
* `lastIndex` (Number): Index of the last item
* `totalViews` (Number): Total number of items
* `historyStack` (Array): Array of history entries with `{id, title}` objects
```

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

### Example Import Transformation

Source: https://github.com/carbon-design-system/ibm-products/blob/main/docs/guides/CANARY_MIGRATION_GUIDE.md

Illustrates how the automated tool transforms non-stable component imports by adding PDLC status prefixes and preserving local variable names with aliases.

```javascript
// Before
import { Toolbar, SearchBar, InlineTip } from '@carbon/ibm-products';

// After
import {
  previewCandidate__Toolbar as Toolbar,
  previewCandidate__SearchBar as SearchBar,
  previewCandidate__InlineTip as InlineTip,
} from '@carbon/ibm-products';
```

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

### Import all @carbon/ibm-products styles

Source: https://github.com/carbon-design-system/ibm-products/blob/main/README.md

Include all styles, including Carbon and experimental styles, by using this import statement.

```scss
@use '@carbon/ibm-products/css/index.min.css';
```

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

### Example Usage of useOverflowItems

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/global/js/hooks/useOverflowItems/useOverflowItems.mdx

Demonstrates how to use the useOverflowItems hook in a React component.

```APIDOC
## Example Usage of useOverflowItems

### Description
This section shows a typical usage pattern for the `useOverflowItems` hook within a React component.

### Method
```jsx
const { visibleItems, hiddenItems, itemRefHandler, offsetRefHandler } = useOverflowItems(items, containerRef, offsetRef, maxVisible, onChange);
```

### Parameters
- **items** (Array) - The array of items to be managed.
- **containerRef** (RefObject) - A ref to the container element.
- **offsetRef** (RefObject) - An optional ref to an offset element.
- **maxVisible** (number) - The maximum number of items to display.
- **onChange** (Function) - A callback function for when the visible items change.

### Returns
- **visibleItems** (Array) - Items that are currently visible.
- **hiddenItems** (Array) - Items that are hidden due to overflow.
- **itemRefHandler** (Function) - Handler to attach refs to individual items.
- **offsetRefHandler** (Function) - Handler to attach refs to the offset element.
```

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

### Get All Descendant IDs

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products-utilities/src/utils/add-select/add-select-data.md

Retrieve an array of all IDs belonging to an item and its descendants.

```typescript
const allIds = dataManager.getAllDescendantIds('parent-id');
```

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

### Guidebanner Many Insights Example

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/components/Guidebanner/Guidebanner.mdx

Illustrates the Guidebanner component when displaying a large number of insights. This configuration is suitable for pages with extensive introductory content.

```javascript
import { Story, Controls, Canvas } from '@storybook/addon-docs/blocks';
import { StackblitzLink } from '../../global/js/utils/story-helper';
import { Guidebanner } from '.';
import * as stories from './Guidebanner.stories';

<Canvas of={stories.manyInsights} />
```

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

### Basic Tearsheet Preview Implementation

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products-web-components/src/components/tearsheet-preview/tearsheet.mdx

A standard implementation featuring a header, body content with form inputs, and a footer with action buttons.

```html
<c4p-preview-tearsheet open>
  <c4p-tearsheet-header slot="header">
    <c4p-tearsheet-header-content 
      slot="header-content"
      title="Create resource">
      <div slot="description"> description</div>
    </c4p-tearsheet-header-content>
  </c4p-tearsheet-header>

  <c4p-tearsheet-body slot="body">
    <div slot="main-content">
      <cds-text-input label="Resource name"></cds-text-input>
      <cds-textarea label="Description"></cds-textarea>
    </div>
  </c4p-tearsheet-body>

  <c4p-tearsheet-footer slot="footer">
    <cds-button kind="secondary">Cancel</cds-button>
    <cds-button kind="primary">Create</cds-button>
  </c4p-tearsheet-footer>
</c4p-preview-tearsheet>
```

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

### DateTimeFormat Usage Example

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/patterns/DateTimeFormat/DateTimeFormat.mdx

Displays the standard implementation of the dateTimeFormat utility via Storybook.

```javascript
<Canvas of={DateTimeFormatStories.DateTimeFormat} />
```

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

### Get All Descendants

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products-utilities/src/utils/add-select/add-select-data.md

Retrieve all items that are descendants of a given item, including children and grandchildren.

```typescript
const descendants = dataManager.getItemDescendants('parent-id');
```

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

### Initialize Set of Tags Component

Source: https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products-web-components/examples/set-of-tags/index.html

Import example data and assign it to the tagsData property of the Set of Tags component. Ensure the component is present in the DOM.

```javascript
import { tagsData } from './src/example-data.ts';
const setOfTags = document.getElementById('setOfTags');
setOfTags.tagsData = tagsData;
```

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

### Import Stable components from @carbon/ibm-products

Source: https://github.com/carbon-design-system/ibm-products/blob/main/README.md

Import production-ready components that have no prefix.

```js
import { PageHeader, SidePanel, Tearsheet } from '@carbon/ibm-products';
```