### Install Dependencies

Source: https://github.com/cloudscape-design/components/blob/main/docs/SETUP.md

Run this command to install all project dependencies.

```bash
npm install
```

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

### Clone Repository and Install Dependencies

Source: https://github.com/cloudscape-design/components/blob/main/CONTRIBUTING.md

Use these commands to clone the repository and install the necessary dependencies to begin development.

```bash
git clone git@github.com:cloudscape-design/components.git
cd components
```

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

### Install ChromeDriver

Source: https://github.com/cloudscape-design/components/blob/main/docs/RUNNING_TESTS.md

Install the ChromeDriver executable globally, which is required for running integration and motion tests.

```bash
npm i -g chromedriver
```

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

### Run Development Server

Source: https://github.com/cloudscape-design/components/blob/main/docs/SETUP.md

Commands to start the local development server. The server runs at `http://localhost:8080` and serves pages from `pages/<component-name>/`.

```bash
npm run start
```

```bash
npm run start:react18
```

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

### Install Cloudscape Components and Global Styles

Source: https://github.com/cloudscape-design/components/blob/main/README.md

Install the Cloudscape components and global styles packages using npm. These are required for using Cloudscape components in your React application.

```sh
npm install @cloudscape-design/components @cloudscape-design/global-styles
```

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

### Render a Primary Cloudscape Button

Source: https://github.com/cloudscape-design/components/blob/main/README.md

A basic example demonstrating how to import and render a primary button component from the Cloudscape library. Ensure global styles are imported.

```jsx
import Button from '@cloudscape-design/components/button';
import '@cloudscape-design/global-styles/index.css';

function App() {
  return <Button variant="primary">Click me</Button>;
}
```

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

### Dialog Cell Example

Source: https://github.com/cloudscape-design/components/blob/main/src/table/table-role/grid-navigation.md

Use role="dialog" to wrap interactive elements within a table cell. This suppresses grid navigation focus and keyboard behaviors, preventing conflicts with cell-internal interactions.

```html
<td>
  <div role="dialog">
    <input value="editable cell value" />
    <button>save</button>
    <button>discard</button>
  </div>
</td>
```

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

### Build Project

Source: https://github.com/cloudscape-design/components/blob/main/docs/SETUP.md

Commands for building the project. Use `quick-build` for local development and `build` for a full production build.

```bash
npm run quick-build
```

```bash
npm run build
```

```bash
npm run build:react18
```

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

### Build Project for Snapshot Tests

Source: https://github.com/cloudscape-design/components/blob/main/docs/WRITING_TESTS.md

Before updating snapshots, ensure the project is fully built to generate necessary artifacts like documentation.

```bash
npm run build
```

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

### Run All and Specific Test Suites

Source: https://github.com/cloudscape-design/components/blob/main/docs/RUNNING_TESTS.md

Execute all tests or specific test suites like unit, integration, motion, or accessibility tests using npm scripts.

```bash
npm test               # all tests
npm run test:unit      # unit tests
npm run test:integ     # integration tests (starts dev server automatically)
npm run test:motion    # motion tests (starts dev server automatically)
npm run test:a11y      # accessibility tests
```

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

### Update Integration Test Snapshots

Source: https://github.com/cloudscape-design/components/blob/main/docs/WRITING_TESTS.md

Command to update integration test snapshots, particularly after design token changes. Requires Node.js experimental VM modules.

```bash
NODE_OPTIONS=--experimental-vm-modules npx jest -u -c jest.integ.config.js src/__integ__/
```

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

### Generate Content Security Policy (CSP) Meta Tag

Source: https://github.com/cloudscape-design/components/blob/main/pages/app/index.html

This script dynamically generates a Content Security Policy (CSP) meta tag. It configures CSP directives based on the environment (development or production) and specific URL hash parameters that enable certain component features. Use this to enhance your application's security by controlling resource loading.

```javascript
const isDevelopment = '<%= process.env.NODE_ENV %>' !== 'production';
const csp = { 'default-src': "'self'", 'font-src': 'data:', 'style-src': "'self'" };
if (isDevelopment) {
  csp['connect-src'] = `"'self' ws://${location.host}";`
}
// Theming generates inline styles in runtime
if (location.hash.includes('theming')) {
  csp['style-src'] = "'unsafe-inline' 'self'";
}
if (location.hash.includes('code-editor')) {
  csp['worker-src'] = 'blob:'; // ace uses web workers for syntax validation
  csp['img-src'] = 'data:'; // this component contains icons loaded this way
}
// Custom CSP required for thumbnails in FileUpload component
if (location.hash.includes('file-upload')) {
  csp['img-src'] = 'blob:';
}
const cspString = Object.entries(csp)
  .map(([key, value]) => `${key} ${value}`)
  .join('; ');
document.write('<meta http-equiv="Content-Security-Policy" content="' + cspString + '" />');
```

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

### Update Unit Test Snapshots

Source: https://github.com/cloudscape-design/components/blob/main/docs/WRITING_TESTS.md

Command to update unit test snapshots. Ensure the `TZ` environment variable is set to `UTC` for consistent results.

```bash
TZ=UTC npx jest -u -c jest.unit.config.js src/__tests__/
```

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

### Target Specific Test Files with Jest

Source: https://github.com/cloudscape-design/components/blob/main/docs/RUNNING_TESTS.md

Directly invoke Jest to run tests on specific files or directories, with appropriate configurations for unit, integration, and motion tests. Ensure the dev server is running for integration and motion tests.

```bash
# Unit
TZ=UTC node_modules/.bin/jest -c jest.unit.config.js src/button/__tests__/button.test.tsx

# Integration (requires dev server running via `npm start`)
NODE_OPTIONS=--experimental-vm-modules node_modules/.bin/jest -c jest.integ.config.js src/input/__integ__/

# Motion (requires dev server running via `npm start`)
NODE_OPTIONS=--experimental-vm-modules node_modules/.bin/jest -c jest.motion.config.js src/flashbar/__motion__/
```

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

### Update Test Snapshots

Source: https://github.com/cloudscape-design/components/blob/main/docs/RUNNING_TESTS.md

Update test snapshots for unit, integration, or component-specific tests using the `-u` flag with Jest. A full build is recommended before updating snapshots, especially when design tokens are involved.

```bash
# Unit snapshots
TZ=UTC npx jest -u -c jest.unit.config.js src/__tests__/snapshot-tests

# Integ snapshots (requires dev server running via `npm start`)
NODE_OPTIONS=--experimental-vm-modules npx jest -u -c jest.integ.config.js src/__integ__/

# Snapshots inside components, e.g. when custom-css-properties.js changes (runs all unit tests)
TZ=UTC npx jest -u -c jest.unit.config.js src/
```

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

### Define Component Forward Ref Type

Source: https://github.com/cloudscape-design/components/blob/main/docs/COMPONENT_CONVENTIONS.md

When a component accepts a ref, define its forward ref type using this pattern. This ensures proper typing for ref forwarding.

```typescript
interface MyComponentForwardRefType {
  <T>(props: MyComponentProps<T> & { ref?: React.Ref<MyComponentProps.Ref> }): JSX.Element;
}
```

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

### Validate Accessibility in Unit Tests

Source: https://github.com/cloudscape-design/components/blob/main/docs/WRITING_TESTS.md

Use the `toValidateA11y` Jest matcher to perform axe and HTML validation on rendered components within unit tests.

```tsx
const { container } = render(<MyComponent />);
await expect(container).toValidateA11y();
```

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