### Component File Structure Example

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/docs/CONTRIBUTING.md

Illustrates the recommended directory and file organization for a new component within the Nimbus Design System. Includes source files, tests, stories, and configuration files.

```bash
component-name/
├── src/
│   ├── components/              # Optional directory for sub-components
│   │   └── ComponentNameSubComponentName/
│   │       ├── index.ts
│   │       ├── ComponentNameSubComponentName.tsx
│   │       ├── ComponentNameSubComponentName.spec.tsx
│   │       ├── ComponentNameSubComponentName.stories.tsx
│   │       └── ComponentNameSubComponentName.types.ts
│   ├── index.ts
│   ├── ComponentName.tsx
│   ├── ComponentName.spec.tsx
│   ├── ComponentName.stories.tsx
│   └── ComponentName.types.ts
├── CHANGELOG.md
├── package.json
├── README.md
├── tsconfig.json
└── webpack.config.ts
```

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

### Changelog Format Example

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/docs/CONTRIBUTING.md

Provides the standard markdown format for updating the CHANGELOG.md file, categorizing changes into breaking, new features, bug fixes, others, and 3rd party library updates.

```markdown
## YYYY-MM-DD `version`

#### 🛠 Breaking changes

- Breaking changes that require major version bump ([#PR](PR_URL) by [@author](AUTHOR_URL))

#### 🎉 New features

- New features that don't break existing functionality ([#PR](PR_URL) by [@author](AUTHOR_URL))

#### 🐛 Bug fixes

- Bug fixes and minor updates ([#PR](PR_URL) by [@author](AUTHOR_URL))

#### 💡 Others

- Documentation and build process changes ([#PR](PR_URL) by [@author](AUTHOR_URL))

#### 📚 3rd party library updates

- Updated `library@version` ([#PR](PR_URL) by [@author](AUTHOR_URL))
```

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

### Install @nimbus-ds/tokens

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/core/tokens/README.md

Installs the `@nimbus-ds/tokens` package using either npm or yarn. This is the primary step to start using the design tokens in your project.

```shell
$ npm install @nimbus-ds/tokens

// or

$ yarn add @nimbus-ds/tokens
```

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

### Install @nimbus-ds/progress-bar

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/atomic/ProgressBar/README.md

Commands to install the @nimbus-ds/progress-bar package using Yarn or npm.

```sh
yarn add @nimbus-ds/progress-bar
# or
npm install @nimbus-ds/progress-bar
```

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

### Install @nimbus-ds/select using Yarn or npm

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/atomic/Select/README.md

Instructions for installing the @nimbus-ds/select package using either the Yarn or npm package manager.

```sh
$ yarn add @nimbus-ds/select
# or
$ npm install @nimbus-ds/select
```

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

### Install @nimbus-ds/link using Yarn or npm

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/atomic/Link/README.md

Instructions for installing the @nimbus-ds/link package using either the Yarn or npm package managers.

```sh
$ yarn add @nimbus-ds/link
# or
$ npm install @nimbus-ds/link
```

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

### Install Nimbus Component Package

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/README.md

Installs the Nimbus design system component package using either npm or yarn. This is the primary step to start using Nimbus components in a project.

```shell
$ npm install @nimbus-ds/name-component
```

```shell
$ yarn add @nimbus-ds/name-component
```

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

### Cursor AI Prompt for New Component Creation

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/docs/CURSOR.md

This prompt is designed to guide Cursor AI in generating a new npm package component for the Nimbus Design System monorepo. It specifies the location, structure, and adherence to project conventions, including component specifications, usage examples, and prop definitions.

```markdown
Build me a new [ComponentName] package component in the Nimbus Design System monorepo. It should be located in packages/react/src/[atomic/composite]/[component-name].
It should be a new npm package in the Nimbus Design System monorepo, with the specific structure following the project conventions specified in the docs/CONTRIBUTING.md file.

/// Component specifications
The ComponentName component should be a [component-description], with a [component-description], composed of [component-description].
The use of the component, from the client side, should be in the following format:
/// Usage example

```tsx
    <ComponentName [propName]="[propValue]" [propName]="[propValue]" />
```

/// Component props
The props should be:

- [propName]: [propType] - [propDescription]

It is extremely important to follow the coding standards and guidelines set in the docs/CONTRIBUTING.md document!

The component should follow these requirements:

1. Component Structure:

- Create appropriate folder structure following project conventions
- Implement as a React functional component
- Define and export proper TypeScript types/interfaces for props
- Follow accessibility best practices

2. Styling:

- Use sprinkle CSS defined in @nimbus-ds/styles internal package
- Create component-specific styles in packages/core/styles/src/packages
- Place in appropriate atomic/composite folder
- Export types in packages/core/styles/src/index.ts

3. Documentation & Testing:

- Include comprehensive Storybook stories
- Write Jest unit tests with good coverage
- Update CHANGELOG.md following project conventions
- Ensure docs are generated correctly after build:docs

4. Dependencies:

- Avoid duplicating devDependencies from root package.json
- Only include dependencies needed for individual package installation

Please provide:

- Component implementation
- Types definition
- Tests
- Stories
- Style definitions
- Updated CHANGELOG
```

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

### Install @nimbus-ds/spinner

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/atomic/Spinner/README.md

Installs the spinner component using either Yarn or npm package managers.

```sh
yarn add @nimbus-ds/spinner
# or
npm install @nimbus-ds/spinner
```

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

### Install @nimbus-ds/text

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/atomic/Text/README.md

Installs the Text component using either Yarn or npm package managers.

```bash
$ yarn add @nimbus-ds/text
# or
$ npm install @nimbus-ds/text
```

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

### Install @nimbus-ds/list with Yarn or npm

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/atomic/List/README.md

Demonstrates how to install the `@nimbus-ds/list` package using either the Yarn or npm package managers.

```sh
yarn add @nimbus-ds/list
```

```sh
npm install @nimbus-ds/list
```

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

### Running Storybook

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/docs/CONTRIBUTING.md

Shows the Yarn command to launch Storybook, used for verifying component and icon rendering.

```bash
yarn storybook
```

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

### Install @nimbus-ds/file-uploader with Yarn or npm

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/atomic/FileUploader/README.md

Instructions for installing the File Uploader component using either Yarn or npm package managers.

```sh
$ yarn add @nimbus-ds/file-uploader
# or
$ npm install @nimbus-ds/file-uploader
```

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

### Install @nimbus-ds/collapsible

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/composite/Collapsible/README.md

Installs the `@nimbus-ds/collapsible` package using either Yarn or npm.

```sh
yarn add @nimbus-ds/collapsible
# or
npm install @nimbus-ds/collapsible
```

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

### Install @nimbus-ds/skeleton

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/atomic/Skeleton/README.md

Installs the Skeleton component using either Yarn or npm package managers.

```sh
yarn add @nimbus-ds/skeleton
# or
npm install @nimbus-ds/skeleton
```

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

### Building Icons Package

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/docs/CONTRIBUTING.md

Demonstrates the Yarn command to build the icons package, which generates updated .tsx files from .svg assets.

```bash
yarn build:icons
```

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

### Install @nimbus-ds/toggle

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/atomic/Toggle/README.md

Installs the @nimbus-ds/toggle package using either Yarn or npm. This is the first step to using the component in your project.

```sh
yarn add @nimbus-ds/checkbox
```

```sh
npm install @nimbus-ds/checkbox
```

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

### Modular Component Import Example

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/docs/BUILD_PROCESS.md

Demonstrates the recommended way to import Nimbus components for enhanced tree shaking. Importing directly from the component's modular entry point (`@nimbus-ds/components/Box`) allows bundlers to remove unused code more effectively.

```typescript
import Box from "@nimbus-ds/components/Box"; // Recommended for tree shaking
```

```typescript
import { Box } from "@nimbus-ds/components"; // Alternative, less granular import
```

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

### Yarn Commands for Version Bumping

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/docs/CONTRIBUTING.md

Illustrates the Yarn commands used for checking and performing package version updates within the project.

```bash
yarn bump:check --interactive
```

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

### Install `@nimbus-ds/components`

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/README.md

Provides commands to install the `@nimbus-ds/components` library using either Yarn or npm package managers.

```sh
$ yarn add @nimbus-ds/components
# or
$ npm install @nimbus-ds/components
```

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

### Install @nimbus-ds/popover with Yarn or npm

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/atomic/Popover/README.md

Provides instructions to install the @nimbus-ds/popover package using either Yarn or npm package managers.

```sh
yarn add @nimbus-ds/popover
# or
npm install @nimbus-ds/popover
```

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

### Install @nimbus-ds/multi-select with Yarn or npm

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/atomic/MultiSelect/README.md

Provides instructions for installing the `@nimbus-ds/multi-select` package using either the Yarn or npm package managers. This is the first step to using the multi-select component in your project.

```sh
$ yarn add @nimbus-ds/multi-select
```

```sh
# or
$ npm install @nimbus-ds/multi-select
```

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

### Install @nimbus-ds/pagination with Yarn or npm

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/composite/Pagination/README.md

Installs the Pagination component using either Yarn or npm package managers. This is the initial step before using the component in your project.

```sh
$ yarn add @nimbus-ds/pagination
# or
$ npm install @nimbus-ds/pagination
```

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

### Start Development Server

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/README.md

Starts the local development environment for the Nimbus Design System. This command typically launches a server with hot-reloading capabilities for rapid development.

```shell
$ yarn start:dev
```

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

### Install @nimbus-ds/textarea

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/atomic/Textarea/README.md

Installs the Textarea component using either Yarn or npm package managers. This is the initial step to include the component in your project.

```bash
yarn add @nimbus-ds/textarea
# or
npm install @nimbus-ds/textarea
```

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

### Install @nimbus-ds/stepper

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/composite/Stepper/README.md

Installs the Stepper component using either yarn or npm package managers.

```sh
$ yarn add @nimbus-ds/stepper
# or
$ npm install @nimbus-ds/stepper
```

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

### Install `@nimbus-ds/badge`

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/atomic/Badge/README.md

Installs the badge component using either Yarn or npm package managers.

```sh
$ yarn add @nimbus-ds/badge
# or
$ npm install @nimbus-ds/badge
```

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

### Install @nimbus-ds/tooltip using Yarn or npm

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/atomic/Tooltip/README.md

Installs the @nimbus-ds/tooltip package using either the Yarn or npm package manager. This is the first step to using the tooltip component in your project.

```sh
$ yarn add @nimbus-ds/tooltip
# or
$ npm install @nimbus-ds/tooltip
```

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

### Install @nimbus-ds/icons using Yarn or npm

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/icons/README.md

Installs the `@nimbus-ds/icons` package using either Yarn or npm, making the icon components available for use in your project.

```sh
$ yarn add @nimbus-ds/icons
# or
$ npm install @nimbus-ds/icons
```

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

### Install @nimbus-ds/card using Yarn or npm

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/composite/Card/README.md

Installs the @nimbus-ds/card package using either the Yarn or npm package managers. This is the first step to using the Card component in your project.

```sh
yarn add @nimbus-ds/card
# or
npm install @nimbus-ds/card
```

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

### Install @nimbus-ds/modal with Yarn or npm

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/composite/Modal/README.md

Provides the commands to install the @nimbus-ds/modal package using either Yarn or npm package managers.

```sh
yarn add @nimbus-ds/modal
# or
npm install @nimbus-ds/modal
```

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

### Install @nimbus-ds/alert using Yarn or npm

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/composite/Alert/README.md

This snippet shows how to install the @nimbus-ds/alert package using either the Yarn package manager or npm.

```sh
$ yarn add @nimbus-ds/alert
# or
$ npm install @nimbus-ds/alert
```

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

### Accessing Theme Tokens with Vanilla-Extract

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/docs/CONTRIBUTING.md

Demonstrates the correct method for accessing theme tokens using `varsThemeBase` from the internal `@nimbus-ds/styles` package for styling components. It contrasts this with incorrect direct token imports.

```typescript
import { varsThemeBase } from "../../../themes";

// ✅ Correct way - Use varsThemeBase to access tokens
const styles = {
  color: varsThemeBase.colors.neutral.textLow,
  spacing: varsThemeBase.spacing[1],
  borderRadius: varsThemeBase.shape.border.radius[2],
};

// ❌ Incorrect - Don't import tokens directly
import { tokens } from "../../../themes";
const styles = {
  color: tokens.colors.neutral100, // Don't do this
  spacing: tokens.space[1], // Don't do this
};
```

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

### Install @nimbus-ds/thumbnail with Yarn or NPM

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/atomic/Thumbnail/README.md

Installs the @nimbus-ds/thumbnail component using either the Yarn or NPM package managers.

```sh
yarn add @nimbus-ds/thumbnail
# or
npm install @nimbus-ds/thumbnail
```

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

### Install @nimbus-ds/title

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/atomic/Title/README.md

Installs the @nimbus-ds/title component using either Yarn or npm package managers. This is the first step to integrating the title component into your project.

```bash
$ yarn add @nimbus-ds/title
# or
$ npm install @nimbus-ds/title
```

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

### Install @nimbus-ds/icon-button

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/atomic/IconButton/README.md

Installs the @nimbus-ds/icon-button package using either Yarn or npm. This is the first step to using the icon button component in your project.

```sh
$ yarn add @nimbus-ds/icon-button
# or
$ npm install @nimbus-ds/icon-button
```

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

### Install @nimbus-ds/segmented-control

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/composite/SegmentedControl/README.md

Installs the segmented-control component using Yarn. This is the primary method for adding the component to your project.

```sh
yarn add @nimbus-ds/segmented-control
```

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

### Install Project Dependencies

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/README.md

Installs all necessary dependencies for the Nimbus Design System project using yarn. This command is essential before running other development scripts.

```shell
$ yarn
```

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

### Install Nimbus Tag Component

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/atomic/Tag/README.md

Installs the Nimbus Tag component using either Yarn or npm package managers. This is the initial step before using the component in your project.

```bash
yarn add @nimbus-ds/tag
```

```bash
npm install @nimbus-ds/tag
```

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

### Install @nimbus-ds/icon with Yarn or npm

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/atomic/Icon/README.md

Shows how to install the @nimbus-ds/icon package using either the Yarn or npm package managers.

```sh
yarn add @nimbus-ds/icon
# or
$ npm install @nimbus-ds/icon
```

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

### Install @nimbus-ds/table with Yarn or NPM

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/composite/Table/README.md

Shows how to install the Table component from the Nimbus Design System using either Yarn or NPM package managers.

```shell
$ yarn add @nimbus-ds/table
# or
$ npm install @nimbus-ds/table
```

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

### Install @nimbus-ds/toast using Yarn or NPM

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/atomic/Toast/README.md

Provides the commands to install the `@nimbus-ds/toast` package using either Yarn or NPM package managers. This is the first step to integrating the toast component into a project.

```sh
$ yarn add @nimbus-ds/toast
# or
$ npm install @nimbus-ds/toast
```

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

### Install @nimbus-ds/chip using Yarn or npm

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/atomic/Chip/README.md

This snippet shows how to add the @nimbus-ds/chip package to your project using either Yarn or npm package managers.

```sh
$
yarn add @nimbus-ds/chip
# or
$ npm install @nimbus-ds/chip
```

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

### Install @nimbus-ds/label with Yarn or npm

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/atomic/Label/README.md

This snippet shows how to install the label component using either Yarn or npm package managers.

```shell
yarn add @nimbus-ds/label
# or
npm install @nimbus-ds/label
```

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

### Install @nimbus-ds/checkbox

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/atomic/Checkbox/README.md

Installs the Checkbox component for the Nimbus Design System using either Yarn or npm package managers.

```sh
$ yarn add @nimbus-ds/checkbox
# or
$ npm install @nimbus-ds/checkbox
```

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

### Install @nimbus-ds/sidebar

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/composite/Sidebar/README.md

Installs the Nimbus Sidebar component using either yarn or npm package managers. This is the initial step to integrate the sidebar into your project.

```bash
yarn add @nimbus-ds/sidebar
# or
npm install @nimbus-ds/sidebar
```

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

### Install @nimbus-ds/tabs using Yarn or npm

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/composite/Tabs/README.md

This snippet shows how to add the `@nimbus-ds/tabs` package to your project using either the Yarn or npm package managers.

```sh
$ yarn add @nimbus-ds/tabs
# or
$ npm install @nimbus-ds/tabs
```

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

### Install @nimbus-ds/accordion using Yarn or npm

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/composite/Accordion/README.md

Instructions for installing the Accordion component using either Yarn or npm package managers. This is the first step to using the component in your project.

```sh
yarn add @nimbus-ds/accordion
# or
npm install @nimbus-ds/accordion
```

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

### Install @nimbus-ds/radio using Yarn or npm

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/atomic/Radio/README.md

This snippet shows how to add the `@nimbus-ds/radio` package to your project using either Yarn or npm package managers.

```sh
yarn add @nimbus-ds/radio
# or
npm install @nimbus-ds/radio
```

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

### Configuring Third-Party Libraries as Externals

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/docs/CONTRIBUTING.md

Demonstrates how to include a third-party library, such as `library-name`, in the webpack externals configuration for efficient bundling and version management.

```typescript
export const externalLibs = {
  "library-name": "library-name",
  // ... other libraries
};
```

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

### Install @nimbus-ds/button using Yarn or NPM

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/atomic/Button/README.md

This snippet shows how to add the `@nimbus-ds/button` package to your project using either Yarn or npm package managers.

```sh
yarn add @nimbus-ds/button
# or
npm install @nimbus-ds/button
```

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

### Install @nimbus-ds/scroll-pane

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/composite/ScrollPane/README.md

Installs the ScrollPane component using either Yarn or npm package managers. This is the first step to integrate the component into your project.

```sh
yarn add @nimbus-ds/scroll-pane
# or
npm install @nimbus-ds/scroll-pane
```

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

### Install @nimbus-ds/webpack with Yarn or NPM

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/core/webpack/README.md

Installs the @nimbus-ds/webpack package using either Yarn or NPM package managers. This is the first step to integrate the webpack configuration into your project.

```sh
$ yarn add @nimbus-ds/webpack
```

```sh
# or
$ npm install @nimbus-ds/webpack
```

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

### Verify Component Rendering with Text Assertions (JavaScript)

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/README.md

This example demonstrates verifying the correct rendering of a component by asserting the presence of specific text content within its elements. It uses `render` to display the component and `screen.getByText` to find elements by their text content, ensuring the component behaves as expected.

```javascript
import { render, screen } from "@testing-library/react";
import { ComponentExample } from "./ComponentExample";

describe("GIVEN <ComponentExample />", () => {
  describe("WHEN rendered", () => {
    it("THEN should display the correct text", () => {
      render(<ComponentExample title="title" description="description" />);
      expect(screen.getByText(/title/i)).toBeInTheDocument();
      expect(screen.getByText(/description/i)).toBeInTheDocument();
    });
  });
});
```

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

### Install @nimbus-ds/input via Yarn or npm

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/atomic/Input/README.md

This snippet shows how to add the @nimbus-ds/input component to your project using either Yarn or npm package managers.

```bash
yarn add @nimbus-ds/input
```

```bash
npm install @nimbus-ds/input
```

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

### Prepare Git Hooks

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/README.md

Prepares the project's Git hooks, likely for performing pre-commit checks and other automated tasks. This setup ensures code quality and adherence to project standards.

```shell
$ yarn prepare-husky
```

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

### Conventional Commits - Feature Commit

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/README.md

Example of a commit message following the Conventional Commits specification for a new feature. This standardizes commit history and aids in automated changelog generation.

```shell
# commit
feat: description
```

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

### Configuring Internal Nimbus Packages as Externals

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/docs/CONTRIBUTING.md

Shows how to add an internal Nimbus Design System package, like `@nimbus-ds/your-component`, to the webpack externals configuration in `packages/core/webpack/src/config/external.ts`.

```typescript
export const externalPackages = {
  "@nimbus-ds/your-component": "@nimbus-ds/your-component",
  // ... other packages
};
```

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

### Run Nimbus Build Command

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/docs/BUILD_PROCESS.md

Initiates the sequential build process for all Nimbus projects, including tokens, icons, components, and core packages. It relies on Yarn as the package manager.

```bash
yarn build
```

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

### Publish Stable Release (Manual)

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/docs/RELEASE_PROCESS.md

While stable versions are typically published automatically upon merging to 'master', this command can be used for manual publishing. It follows the release candidate process but uses `yarn publish:stable` instead of `yarn publish:next`.

```bash
yarn publish:stable <packageName> [version]
```

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

### Webpack Plugin for Moving Files to Dist Folder

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/docs/BUILD_PROCESS.md

A custom Webpack plugin designed to move specified files (like README.md, CHANGELOG.md) into the distribution ('dist') folder after the build process. It can also optionally transform the content of package.json before outputting.

```javascript
// Example usage within webpack.config.ts
// Assumes MoveFilesIntoDistFolderPlugin is imported and instantiated
// Example: new MoveFilesIntoDistFolderPlugin({
//   filesToMove: [
//     { from: 'README.md', to: 'dist/README.md' },
//     { from: 'CHANGELOG.md', to: 'dist/CHANGELOG.md' }
//   ],
//   transformPackageJson: true
// })

```

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

### Webpack Plugin for Client Injection ('use client')

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/docs/BUILD_PROCESS.md

A specialized Webpack plugin that automatically injects the 'use client;' directive at the beginning of compiled assets if a non-commented 'use client' directive is found in the component's main index.ts file. This is crucial for React Server Components hydration.

```javascript
// Example usage within webpack.config.ts for a React component
// Assumes UseClientInjectionPlugin is imported and instantiated
// Example: new UseClientInjectionPlugin()

```

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

### Structure Tests using Given-When-Then (JavaScript)

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/README.md

Test cases should follow the Given-When-Then structure for clarity and maintainability. 'Given' sets preconditions, 'When' describes an action, and 'Then' asserts the expected outcome or user acceptance criteria. 'And' and 'But' can be used for additional conditions.

```javascript
import { render, screen } from "@testing-library/react";
import { ComponentExample } from "./ComponentExample";

describe("GIVEN <ComponentExample />", () => {
  describe("WHEN rendered", () => {
      it("THEN should display the correct text", () => {
        ...
      });
  });
});
```

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

### Check for version bumps

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/docs/RELEASE_PROCESS.md

This command prompts the user to update the semantic versioning (semver) based on modified files and stores the update information in `.yarn/versions/`. These files are used later during the publishing process. It's important to commit these files along with code changes.

```bash
yarn bump:check --i
```

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

### Build Nimbus Tokens

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/core/tokens/README.md

Executes the build command to compile design tokens from their source JSON files into various formats (CSS, SCSS, JS). This command is essential after making modifications to the token definitions.

```shell
$ yarn build
```

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

### Run Tests and Generate Coverage Report

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/README.md

Executes all unit tests and generates a code coverage report in the 'coverage' folder at the project's root. This helps assess the thoroughness of test suites.

```shell
$ yarn test:coverage
```

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

### Basic Usage of `Button` Component

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/README.md

Demonstrates how to import and use the `Button` component from the `@nimbus-ds/components` library in a React application.

```jsx
import { Button } from "@nimbus-ds/components";

const ComponentExample = () => <Button>Hello World</Button>;
```

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

### Publish Release Candidate (RC)

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/docs/RELEASE_PROCESS.md

Used to publish Release Candidate versions of packages for testing before stable releases. It supports specifying the package name, version (base version, exact RC, or bump type like major, minor, patch), and options to skip the build process or provide an OTP for npm publish.

```bash
yarn publish:rc <packageName> [version] [--skip-build] [--otp=123456]
```

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

### Run Tests, Generate Coverage, and Watch

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/README.md

Runs all unit tests, generates a code coverage report, and watches for changes in related files to re-run tests. This combines the benefits of continuous testing and coverage analysis.

```shell
$ yarn test:watch:coverage
```

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

### TypeScript Declaration File Bundling with dts-bundle-generator

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/docs/BUILD_PROCESS.md

Bundles multiple TypeScript declaration files (.d.ts) into a single output file, simplifying type distribution for components and packages. This process is managed by the dtsBundleGeneratorPlugin within the Webpack configuration.

```typescript
// Example configuration snippet within webpack.config.ts
// Assumes dtsBundleGeneratorPlugin is imported and configured
// Options for dtsBundleGeneratorPlugin would be defined here.
// For example:
/*
new dtsBundleGeneratorPlugin({
  input: 'path/to/input/files.ts',
  output: 'path/to/output/index.d.ts',
  ...
})
*/
```

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

### Import render and screen from Testing Library (JavaScript)

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/README.md

To write tests for React components, it is necessary to import the `render` and `screen` functions from the `@testing-library/react` library. These utilities are fundamental for interacting with and querying the rendered component in a test environment.

```javascript
import { render, screen } from "@testing-library/react";
```

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

### Import Component for Testing (JavaScript)

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/README.md

Before testing a component, it must be imported into the test file along with the necessary testing utilities like `render` and `screen`. This makes the component available for rendering and assertion within the test suite.

```javascript
import { render, screen } from "@testing-library/react";
import { ComponentExample } from "./ComponentExample";
```

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

### Stepper with Card Wrapper

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/composite/Stepper/README.md

Illustrates using the Stepper component within a `Stepper.Card` wrapper, providing a card-style container for the steps. Includes three items.

```jsx
<Stepper.Card>
  <Stepper activeStep={1}>
    <Stepper.Item label="Start" />
    <Stepper.Item label="Process" />
    <Stepper.Item label="Finish" />
  </Stepper>
</Stepper.Card>
```

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

### Lint Project Code

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/README.md

Runs the linter to find potential problems in the project's code. This helps maintain code quality and consistency.

```shell
$ yarn lint
```

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

### Component with Props from .definitions.ts File (JSX)

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/README.md

Components can accept props defined in a separate `.definitions.ts` file. Props are imported with a prefix indicating their type (e.g., I for interface, T for type, E for enum). This promotes type safety and modularity.

```jsx
import React from "react";
import { ComponentExampleProps } from "./componentExampleProps.types";

const ComponentExample: React.FC<ComponentExampleProps> = ({
    title,
    description,
  }) => (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  );

export { ComponentExample };
```

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

### Run Unit Tests

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/README.md

Executes all unit tests for the Nimbus Design System. This is crucial for ensuring the stability and correctness of components.

```shell
$ yarn test
```

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

### Mobile-Friendly Stepper (No Labels)

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/composite/Stepper/README.md

Demonstrates a mobile-friendly Stepper configuration that hides labels to save space, showing only step indicators. Includes three steps.

```jsx
<Stepper activeStep={0}>
  <Stepper.Item />
  <Stepper.Item />
  <Stepper.Item />
</Stepper>
```

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

### Run Tests on Staged Files

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/README.md

Executes unit tests only on the files that are currently staged. This is often used in conjunction with pre-commit hooks to ensure only relevant tests are run before committing.

```shell
$ yarn test:staged
```

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

### Import Tokens in JavaScript

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/core/tokens/README.md

Imports the JavaScript token object from the `@nimbus-ds/tokens` package. This provides access to all design tokens as a JavaScript object for use in frontend frameworks or build processes.

```javascript
import tokens from "@nimbus-ds/tokens/dist/js/tokens";
```

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

### Run Tests and Watch for Changes

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/README.md

Runs all unit tests and continues to watch for changes in related files, automatically re-running tests when modifications are detected. This aids in TDD or continuous testing during development.

```shell
$ yarn test:watch
```

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

### Import Tokens in SCSS

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/core/tokens/README.md

Imports the SCSS variables from the `@nimbus-ds/tokens` package. This enables the use of Nimbus design tokens within SCSS or Sass projects.

```scss
@import "@nimbus-ds/tokens/dist/scss/_variables";
```

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

### Basic Uncontrolled Stepper Usage

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/composite/Stepper/README.md

Demonstrates basic uncontrolled usage of the Stepper component with four items. The `activeStep` prop defines the currently active step.

```jsx
<Stepper activeStep={2}>
  <Stepper.Item label="Setup" />
  <Stepper.Item label="Configuration" />
  <Stepper.Item label="Review" />
  <Stepper.Item label="Deploy" />
</Stepper>
```

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

### Import Tokens in CSS

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/core/tokens/README.md

Imports the generated CSS variables from the `@nimbus-ds/tokens` package. This allows you to use the design tokens directly in your CSS stylesheets.

```css
@import var("@nimbus-ds/tokens/dist/css/variables.css");
```

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

### Declare React Component with Pascal Case and Arrow Function (JSX)

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/README.md

Components should be named using Pascal Case and declared as Arrow Functions. They must include type annotations for expected return values and a default export at the end of the file. This ensures consistency and predictability in component structure.

```jsx
import React from "react";

const ComponentExample: React.FC = () => <div>...</div>;

export { ComponentExample };
```

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

### Use Nimbus Icons in React Components

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/icons/README.md

Demonstrates how to import and use specific icons from the `@nimbus-ds/icons` package in React applications. Icons can be customized with 'size' and 'aria-label' props.

```jsx
import { CloudIcon, AlertIcon, StoreIcon } from "@nimbus-ds/icons";

<CloudIcon />
<AlertIcon size="large" />
<StoreIcon size="medium" aria-label="Store" />
```

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

### Fix Linting Issues

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/README.md

Automatically fixes problems identified by the linter. This command helps enforce coding standards and resolve style issues.

```shell
$ yarn lint:fix
```

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

### Controlled Stepper Usage with Navigation

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/composite/Stepper/README.md

Shows controlled usage of the Stepper component with navigation enabled. The `activeStep`, `selectedStep`, and `onSelectStep` props manage the step state externally.

```jsx
<Stepper 
  activeStep={activeStep}
  selectedStep={selectedStep}
  onSelectStep={setSelectedStep}
>
  <Stepper.Item label="Select audience" />
  <Stepper.Item label="Create content" />
  <Stepper.Item label="Define budget" />
  <Stepper.Item label="Review" />
  <Stepper.Item label="Publish" />
</Stepper>
```

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

### Segmented Control Skeleton Loader

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/composite/SegmentedControl/README.md

Displays a skeleton loader for the SegmentedControl.Button, commonly used to indicate that content is loading.

```jsx
import { SegmentedControl } from "@nimbus-ds/segmented-control";

// Loading state
const LoadingExample = () => (
  <SegmentedControl.Button.Skeleton />
);
```

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

### Segmented Control with Full Width

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/composite/SegmentedControl/README.md

Shows how to make the SegmentedControl component occupy the full available width using the `fullWidth` prop. This is useful for responsive layouts.

```jsx
import { SegmentedControl } from "@nimbus-ds/segmented-control";

// With fullWidth property
const FullWidthExample = () => (
  <SegmentedControl fullWidth>
    {["First", "Second", "Third"].map((name) => (
      <SegmentedControl.Button key={name} label={name} id={name}>
        {name}
      </SegmentedControl.Button>
    ))}
  </SegmentedControl>
);
```

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

### Basic Uncontrolled Segmented Control

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/composite/SegmentedControl/README.md

Demonstrates the basic, uncontrolled usage of the SegmentedControl component. It renders a group of buttons where the selection state is managed internally by the component.

```jsx
import { SegmentedControl } from "@nimbus-ds/segmented-control";

// Basic uncontrolled usage
const BasicExample = () => (
  <SegmentedControl>
    {["First", "Second", "Third"].map((name) => (
      <SegmentedControl.Button key={name} label={name} id={name}>
        {name}
      </SegmentedControl.Button>
    ))}
  </SegmentedControl>
);
```

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

### Controlled Segmented Control with State Management

Source: https://github.com/tiendanube/nimbus-design-system/blob/master/packages/react/src/composite/SegmentedControl/README.md

Illustrates a controlled usage of the SegmentedControl, where the selected state is managed externally using React's useState hook. This allows for programmatic control over the component's selection.

```jsx
import { SegmentedControl } from "@nimbus-ds/segmented-control";
import { useState } from "react";

// Controlled usage
const ControlledExample = () => {
  const [selectedSegments, setSelectedSegments] = useState([0]);
  
  return (
    <SegmentedControl 
      selectedSegments={selectedSegments}
      onSegmentsSelect={setSelectedSegments}
    >
      {["Option 1", "Option 2", "Option 3"].map((name, index) => (
        <SegmentedControl.Button 
          key={name} 
          label={name}
          id={name}
        >
          {name}
        </SegmentedControl.Button>
      ))}
    </SegmentedControl>
  );
};
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.