### Gallery Development Commands

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/CLAUDE.md

Commands for developing the gallery application, which showcases component usage. Includes installation, starting the dev server, building, testing, and linting.

```bash
yarn install
yarn start
yarn build
yarn test
yarn lint
```

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

### Grid Layout Examples

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/gallery/src/styles/NxGrid/NxGridExample.html

Demonstrates various grid layouts using percentage-based column widths. These examples showcase different combinations of column sizes to create responsive layouts.

```html
<!-- 50% width columns -->
<div class="nx-grid">
  <div class="nx-grid-column--50">...</div>
  <div class="nx-grid-column--50">...</div>
</div>

<!-- 25% width columns -->
<div class="nx-grid">
  <div class="nx-grid-column--25">...</div>
  <div class="nx-grid-column--25">...</div>
  <div class="nx-grid-column--25">...</div>
  <div class="nx-grid-column--25">...</div>
</div>

<!-- 33% and 67% width columns -->
<div class="nx-grid">
  <div class="nx-grid-column--33">...</div>
  <div class="nx-grid-column--67">...</div>
</div>

<!-- 200px custom column -->
<div class="nx-grid">
  <div class="nx-grid-column--200px">...</div>
  <div class="nx-grid-column--default">...</div>
</div>
```

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

### React 19 with TypeScript Setup

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/CLAUDE.md

Demonstrates the basic setup for a React 19 project using TypeScript, including necessary dependencies and configuration hints.

```typescript
import React from 'react';
import ReactDOM from 'react-dom/client';

const App: React.FC = () => {
  return (
    <div>
      <h1>Welcome to React 19!</h1>
    </div>
  );
};

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(<App />);

```

```json
{
  "compilerOptions": {
    "target": "es2020",
    "lib": ["dom", "dom.iterable", "esnext"],
    "jsx": "react-jsx",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}

```

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

### Install React Shared Components

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/README.md

Demonstrates how to install the `@sonatype/react-shared-components` npm package using Yarn.

```bash
yarn add @sonatype/react-shared-components
```

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

### Run Next.js Development Server

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/ssr-tests/README.md

Starts the Next.js development server for manual testing of the application. Assumes dependencies have been installed.

```bash
yarn dev
```

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

### Typical Development Setup

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/CLAUDE.md

Instructions for setting up the development environment by running the library's watch mode and the gallery's development server simultaneously.

```bash
# In lib/
yarn clean && rm -rf node_modules && yarn install && yarn watch

# In gallery/
yarn clean && rm -rf node_modules && yarn install && yarn start
```

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

### SCSS Styling Example

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/CLAUDE.md

An example of how SCSS can be used for styling React components, demonstrating basic nesting and variables.

```scss
$primary-color: #007bff;

.button {
  background-color: $primary-color;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

```

```typescript
import React from 'react';
import './Button.scss';

interface ButtonProps {
  children: React.ReactNode;
}

const Button: React.FC<ButtonProps> = ({ children }) => {
  return <button className="button">{children}</button>;
};

export default Button;

```

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

### Component Gallery Setup and Running

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/README.md

Instructions for building the component library and running the component gallery locally. This allows developers to view and interact with components in a browser.

```bash
yarn run build
# or
yarn run watch
```

```bash
cd gallery/
yarn install
```

```bash
cd gallery/
yarn start
```

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

### Build Process and Dependencies

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/README.md

Details the software requirements and installation steps for building the Sonatype React Shared Components library.

```markdown
### Required Software
* Node 20.x
* yarn 1.22.x
* git-lfs for visual test snapshots. For the command line git client, git-lfs is a separate program which functions as a
plugin; for graphical git clients, git-lfs support is often built-in. To check whether your checkout used git-lfs
successfully, check whether the files within `gallery/visualtests/__image_snapshots__` are actual pngs as opposed to
stub text files.

### Installation of Dependencies
In the lib/ directory, run `yarn install`

### Build
For a one-time build, `yarn run build` in the lib/ directory.

When developing, you probably want to use `yarn run watch` instead.
```

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

### Library Development Commands

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/CLAUDE.md

Commands for developing the React Shared Components library, including installation, building, testing, and linting.

```bash
yarn install
yarn build
yarn watch
yarn test
yarn test-watch
yarn jest
yarn lint
yarn ci-lint
yarn clean
```

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

### Docker Selenium Chrome Setup

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/ssr-tests/README.md

Starts a Docker container for Selenium Standalone Chrome, exposing port 4444 and mounting /dev/shm for shared memory, which is often required by Chrome in containerized environments.

```bash
docker run --name selenium-chrome -d -p 4444:4444 -v /dev/shm:/dev/shm selenium/standalone-chrome:127-20250202
```

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

### Run Gallery and Build Shared Components

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/gallery/README.md

Instructions for running the component gallery and building the shared component library. Running `yarn start` launches the gallery with webpack dev server. To see changes in shared components, run `npm run build` or `npm run watch` from the ../lib/ directory.

```bash
yarn start

npm run build
# or
npm run watch
```

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

### Dark Mode Toggle and Force Light Mode

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/gallery/src/styles/DarkMode/DarkModeLightOverrideExample.html

This example shows how to create a toggle for dark mode and a button to force the application into light mode using React hooks and context. It assumes a context provider is set up to manage the theme state.

```javascript
import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext'; // Assuming ThemeContext is defined elsewhere

function ThemeToggle() {
  const { theme, toggleTheme, forceLightMode } = useContext(ThemeContext);

  return (
    <div>
      <button onClick={toggleTheme}>
        Switch to {theme === 'light' ? 'Dark' : 'Light'} Mode
      </button>
      <button onClick={forceLightMode}>
        Force Light Mode
      </button>
      <p>Current theme: {theme}</p>
    </div>
  );
}

export default ThemeToggle;

// ThemeContext.js (Example implementation)
/*
import React, { createContext, useState, useEffect } from 'react';

export const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light'); // Default theme

  useEffect(() => {
    const storedTheme = localStorage.getItem('theme');
    if (storedTheme) {
      setTheme(storedTheme);
    }
  }, []);

  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };

  const forceLightMode = () => {
    setTheme('light');
    localStorage.setItem('theme', 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme, forceLightMode }}>
      {children}
    </ThemeContext.Provider>
  );
};
*/
```

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

### Emotion Styling Example

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/CLAUDE.md

Shows how to use Emotion, a CSS-in-JS library, for dynamic and component-level styling in React.

```javascript
/** @jsxImportSource @emotion/react */
import React from 'react';
import { css } from '@emotion/react';

const buttonStyle = css`
  background-color: hotpink;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: deeppink;
  }
`;

interface EmotionButtonProps {
  children: React.ReactNode;
}

const EmotionButton: React.FC<EmotionButtonProps> = ({ children }) => {
  return <button css={buttonStyle}>{children}</button>;
};

export default EmotionButton;

```

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

### Primary Button Example

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/gallery/src/styles/NxBtn/NxBtnPrimaryExample.html

Demonstrates the usage of the primary button component. This is the default state for a clickable primary action.

```javascript
import React from 'react';
import { Button } from '@sonatype/react-shared-components';

function App() {
  return (
    <Button type="primary">Primary Button</Button>
  );
}
```

```html
<button class="sonatype-button primary">Primary Button</button>
```

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

### Run Tests and Update Screenshots on Windows

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/README.md

Provides commands for Windows users to run tests and update screenshots (light and dark modes) using Docker. These commands ensure the execution environment matches the CI setup.

```bash
docker run --rm -it -w /home/jenkins/gallery -v %CD%:/home/jenkins docker-all.repo.sonatype.com/sonatype/react-shared-components-ci:latest yarn test
```

```bash
docker run --rm -it -w /home/jenkins/gallery -v %CD%:/home/jenkins docker-all.repo.sonatype.com/sonatype/react-shared-components-ci:latest yarn jest -u
```

```bash
docker run --rm -it -w /home/jenkins/gallery -v %CD%:/home/jenkins docker-all.repo.sonatype.com/sonatype/react-shared-components-ci:latest yarn jest-dark -u
```

```bash
docker run --rm -it -w /home/jenkins/gallery -v $pwd\:/home/jenkins docker-all.repo.sonatype.com/sonatype/react-shared-components-ci:latest yarn test
```

```bash
docker run --rm -it -w /home/jenkins/gallery -v $pwd\:/home/jenkins docker-all.repo.sonatype.com/sonatype/react-shared-components-ci:latest yarn jest -u
```

```bash
docker run --rm -it -w /home/jenkins/gallery -v $pwd\:/home/jenkins docker-all.repo.sonatype.com/sonatype/react-shared-components-ci:latest yarn jest-dark -u
```

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

### Button with Icon Example

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/gallery/src/styles/NxBtn/NxBtnIconExample.html

Demonstrates how to use the Button component to display an icon alongside text. This includes importing the necessary component and providing the icon prop.

```javascript
import React from 'react';
import Button from '@sonatype/react-shared-components/Button';
import Icon from '@sonatype/react-shared-components/Icon';

function MyComponent() {
  return (
    <Button>
      <Icon name="add" />
      Add Item
    </Button>
  );
}
```

```typescript
import React from 'react';
import Button, { ButtonProps } from '@sonatype/react-shared-components/Button';
import Icon from '@sonatype/react-shared-components/Icon';

const MyComponent: React.FC = () => {
  return (
    <Button>
      <Icon name="add" />
      Add Item
    </Button>
  );
};
```

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

### Force Dark Mode without Opt-In

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/gallery/src/styles/DarkMode/DarkModeDarkOverrideNoOptInExample.html

This example shows how to apply dark mode to your React application globally, without relying on user preferences or a toggle switch. It's useful for scenarios where dark mode is the default or required theme. This implementation assumes you have a theming context or a similar mechanism in place within your Sonatype React shared components.

```javascript
import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext'; // Assuming ThemeContext is provided by Sonatype shared components

function App() {
  // Force dark mode by setting the theme value directly
  const { setTheme } = useContext(ThemeContext);

  React.useEffect(() => {
    setTheme('dark'); // Set the theme to 'dark'
  }, [setTheme]);

  return (
    <div>
      {/* Your application content here */}
      <h1>Welcome to the App</h1>
      <p>This application is currently in dark mode.</p>
    </div>
  );
}

export default App;
```

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

### Puppeteer Visual Regression Test

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/CLAUDE.md

Example of a visual regression test using Puppeteer and jest-image-snapshot to capture and compare component screenshots.

```javascript
const puppeteer = require('puppeteer');
const { toMatchImageSnapshot } = require('jest-image-snapshot');

expect.extend({ toMatchImageSnapshot });

describe('Visual Regression Tests', () => {
  let browser;
  let page;

  beforeAll(async () => {
    browser = await puppeteer.launch();
    page = await browser.newPage();
    await page.goto('http://localhost:3000'); // Assuming your component is served here
  });

  afterAll(async () => {
    await browser.close();
  });

  test('should match Button component snapshot', async () => {
    const image = await page.screenshot({ clip: { x: 0, y: 0, width: 200, height: 50 } }); // Adjust clip as needed
    expect(image).toMatchImageSnapshot();
  });
});

```

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

### NX Tile with Grid Header (Truncation Example)

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/gallery/src/styles/NxTile/NxTileGridExample.html

Illustrates an NX Tile component with a grid header featuring a long title, demonstrating how the grid system handles text truncation. This is useful for maintaining layout integrity with lengthy headings.

```HTML
<div class="nx-grid-header">
  <div class="nx-grid-column">50% width columns --- skyscraper weathered engine fetishism cardboard. bicycle knife refrigerator semiotics 3D-printed dome computer</div>
</div>
```

```CSS
.nx-grid-header {
  display: flex;
}

.nx-grid-column {
  flex: 1;
  padding: 10px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
```

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

### Stateless Component Design Example

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/README.md

Components are designed to be stateless first, accepting state and callbacks as props. A stateful wrapper can be created separately for traditional architectures. This promotes reusability in environments like Redux.

```TypeScript
interface NxCheckboxProps {
  isChecked: boolean;
  onToggle: () => void;
}

function NxCheckbox(props: NxCheckboxProps) {
  const handleClick = () => {
    props.onToggle();
  };

  return (
    <div onClick={handleClick} style={{ cursor: 'pointer' }}>
      {props.isChecked ? '[x]' : '[ ]'}
    </div>
  );
}

// Stateful wrapper example
function StatefulNxCheckbox() {
  const [checked, setChecked] = React.useState(false);

  const handleToggle = () => {
    setChecked(!checked);
  };

  return <NxCheckbox isChecked={checked} onToggle={handleToggle} />;
}
```

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

### Development Workflow (Linux/macOS)

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/README.md

Provides commands for setting up a development environment by running the library watch process and the gallery simultaneously.

```bash
In `lib`:
```bash
yarn clean && rm -rf node_modules && yarn install && yarn watch
```

In `gallery`:
```bash
yarn clean && rm -rf node_modules && yarn install && yarn start
```
```

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

### Visual Testing with Docker

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/CLAUDE.md

Commands to run visual regression tests using Docker for consistent environments. Includes commands for running tests and updating snapshots in both light and dark modes.

```bash
# Run visual tests
docker run --rm -it -w /home/jenkins/gallery -v $PWD:/home/jenkins docker-all.repo.sonatype.com/sonatype/react-shared-components-ci:latest yarn test

# Update snapshots (light mode)
docker run --rm -it -w /home/jenkins/gallery -v $PWD:/home/jenkins docker-all.repo.sonatype.com/sonatype/react-shared-components-ci:latest yarn jest -u

# Update snapshots (dark mode)
docker run --rm -it -w /home/jenkins/gallery -v $PWD:/home/jenkins docker-all.repo.sonatype.com/sonatype/react-shared-components-ci:latest yarn jest-dark -u
```

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

### Development Workflow (Windows)

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/README.md

Provides PowerShell commands for setting up a development environment on Windows by running the library watch process and the gallery simultaneously.

```powershell
In `lib`:
```powershell
yarn clean; Remove-Item -Recurse -Force -Path .\node_modules; yarn install; yarn watch
```

In `gallery`:
```powershell
yarn clean; Remove-Item -Recurse -Force -Path .\node_modules; yarn install; yarn start
```
```

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

### Running Unit Tests

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/README.md

Instructions for executing unit tests for the Sonatype React Shared Components library, including single runs and watch mode.

```bash
Run the following commands in the lib/ directory

### Single run
`yarn run test`

### Watch in console
`yarn run test-watch`
```

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

### Component Export Pattern

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/CLAUDE.md

Illustrates the standard pattern for exporting React components and their associated props from the library's main entry point.

```typescript
export { default as ComponentName, Props as ComponentNameProps } from './components/ComponentName/ComponentName';
```

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

### Library Structure Overview

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/README.md

Describes the general layout of the Sonatype React Shared Components library, including the location of source code, static assets, SCSS files, and icon handling strategies.

```markdown
* Source code lives in src/. Typescript components live within src/components
  * The main entrypoint for the library is src/index.ts (which compiles to index.js). All react components
    are re-exported from this file. Consuming projects should import the components here, not from their individual
    source files.

* Static assets live in src/assets, which is copied wholesale to dist/assets and thus included in the package

* scss files are also all copied into dist, preserving their directory structure and thus their relative paths to
  components, static assets, and each other. This facilitates a consuming project using its own scss build and
  provides a sane starting point for relative path references

* Icons are intended to be done using SVG, though an icon font would also work (the same way as any other static asset).
  SVG icons will be encapsulated as react components that render the icon's SVG nodes inline in the document. This
  provides maximum power to style the icons. The inline rendering may be mildly duplicative, compared to a separate SVG
  "sprite" in conjunction with SVG `<use>` tags, but the latter setup can't really be accomplished without making far
  more assumptions about the consuming project's tooling.
  * Font Awesome 5 provides icons via @fortawesome/react-fontawesome, @fortawesome/free-solid-svg-icons, and similar
    packages
  * Custom SVG icons can be converted to react components either manually or via tooling like
    [svgr](https://www.smooth-code.com/open-source/svgr/)
* Styles have the following directory structure
  * Component-specific stylesheets live alongside their respective component ts files
  * Non-emitting scss partials, such as files that only define variables and mixins, are in src/scss-shared. Because
    they are non-emitting, these files can be imported freely and should be imported where needed (ie if you need a
    mixin in a given file, don't just assume it's already been imported elsewhere, go ahead and import it yourself)
  * Styles which form a foundation which other stylesheets assume is already in place go in src/base-styles. Within
    this directory is a _base.scss file which serves as a centralized import. Any other files created in this
    directory should be imported by that file, and that file is then imported by index.ts so that any use of the library
    will pick it up
    * All "non-component" styles are also considered to be base styles, so that future components can make use of them
      without needing to re-arrange things
* A precompiled stylesheet including all of the styles is built as react-shared-components.css. The build of this file
  is performed via webpack using an entrypoint of src/react-shared-components-css.ts, which has typescript imports of
  index.ts (in order to get the base and component styles). URL references within react-shared-components.css are
  correct to its location within the built package relative to the things being referenced.
```

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

### Inline Code Styling

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/gallery/src/styles/NxCode/NxCodeExample.html

Shows how to apply inline styling to elements, specifically noting the use of the '.nx-code' class for inline code presentation.

```html
<span class="nx-code">This is inline code.</span>
```

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

### Running Visual Tests in Custom Docker Image

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/README.md

Executes visual regression tests using a custom-built Docker image ('rsc-visualtesting'). Similar to the CI image execution, it mounts the current directory and sets the working directory.

```bash
docker run --rm -it -w /home/jenkins/gallery -v $PWD:/home/jenkins rsc-visualtesting yarn test
```

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

### Version Management Command

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/CLAUDE.md

Command to increment the version of the shared components library without creating a Git tag, specifying patch, minor, or major increments.

```bash
yarn version --no-git-tag-version --patch
```

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

### Building Custom Docker Image for Visual Tests

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/README.md

Builds a custom Docker image named 'rsc-visualtesting' from the current directory's Dockerfile. This is an alternative for users without access to the Sonatype CI image. It's recommended to modify the Dockerfile for public base images if not using Sonatype infrastructure.

```bash
docker build -t rsc-visualtesting .
```

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

### Running Visual Tests in Docker (CI Image)

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/README.md

Executes visual regression tests within a Docker container using the official Sonatype CI image. This ensures consistency with the CI environment. It mounts the current directory and sets the working directory inside the container.

```bash
docker login docker-all.repo.sonatype.com
docker run --rm -it -w /home/jenkins/gallery -v $PWD:/home/jenkins docker-all.repo.sonatype.com/sonatype/react-shared-components-ci:latest yarn test
```

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

### Import React Shared Components

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/README.md

Shows how to import components from the `@sonatype/react-shared-components` library in JavaScript.

```javascript
import { NxButton } from '@sonatype/react-shared-components';
```

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

### Updating Visual Test Screenshots (Light Mode)

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/README.md

Updates the baseline screenshots for light mode visual tests within the Docker container. This command uses the CI image and the Jest update flag (`-u`).

```bash
docker run --rm -it -w /home/jenkins/gallery -v $PWD:/home/jenkins docker-all.repo.sonatype.com/sonatype/react-shared-components-ci:latest yarn jest -u
```

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

### Jest and React Testing Library Unit Test

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/CLAUDE.md

A basic unit test for a React component using Jest and React Testing Library, focusing on rendering and interaction.

```javascript
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

describe('Button Component', () => {
  test('renders with children', () => {
    render(<Button>Click Me</Button>);
    expect(screen.getByText('Click Me')).toBeInTheDocument();
  });

  test('calls onClick handler when clicked', () => {
    const handleClick = jest.fn();
    render(<Button onClick={handleClick}>Click Me</Button>);
    fireEvent.click(screen.getByText('Click Me'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

```

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

### Run Test Suite

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/ssr-tests/README.md

Executes the automated test suite. Requires a Selenium server running on port 4444 with Chrome browser instances available. The TEST_IP environment variable must be set to a non-localhost IP address for the Docker container to connect to the Next.js server.

```bash
yarn test
```

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

### NX Tile with Grid Header

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/gallery/src/styles/NxTile/NxTileGridExample.html

Demonstrates an NX Tile component with a grid header, utilizing 50% width columns for content layout. This structure is suitable for displaying related information side-by-side.

```HTML
<div class="nx-grid-header">
  <div class="nx-grid-column">50% width column content</div>
  <div class="nx-grid-column">50% width column content</div>
</div>
```

```CSS
.nx-grid-header {
  display: flex;
}

.nx-grid-column {
  flex: 1;
  padding: 10px;
  box-sizing: border-box;
}
```

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

### Button Bar Layout with nx-btn-bar

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/gallery/src/styles/NxBtn/NxBtnDefaultExample.html

Demonstrates how the nx-btn-bar class is used to ensure proper spacing for buttons within a layout. It also shows how buttons can be styled as disabled, both through a class and an attribute.

```html
<div class="nx-btn-bar">
  Some preceding content. nx-btn-bar ensures that the buttons are spaced appropriately from adjacent block elements such as this

  <button>Button</button> Some other inline content. <button disabled class="disabled-button">Button disabled by class</button> <button disabled>Button disabled by attribute</button>
</div>
```

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

### React Testing Library and jest-dom Usage

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/README.md

Demonstrates the integration of React Testing Library for component testing and jest-dom for custom DOM element matchers. These libraries are foundational for writing efficient and readable unit tests for React components.

```javascript
// Example usage of React Testing Library and jest-dom would go here.
// import { render, screen } from '@testing-library/react';
// import '@testing-library/jest-dom';
// 
// test('renders component', () => {
//   render(<MyComponent />);
//   expect(screen.getByText('Hello')).toBeInTheDocument();
// });
```

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

### FontAwesome Icon Usage

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/CLAUDE.md

Demonstrates how to integrate and use FontAwesome icons within a React component.

```javascript
import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

const CoffeeButton: React.FC = () => {
  return (
    <button>
      <FontAwesomeIcon icon={faCoffee} /> Coffee
    </button>
  );
};

export default CoffeeButton;

```

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

### Updating Visual Test Screenshots (Dark Mode)

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/README.md

Updates the baseline screenshots for dark mode visual tests within the Docker container. This command uses the CI image and a specific Jest command for dark mode (`jest-dark`) with the update flag (`-u`).

```bash
docker run --rm -it -w /home/jenkins/gallery -v $PWD:/home/jenkins docker-all.repo.sonatype.com/sonatype/react-shared-components-ci:latest yarn jest-dark -u
```

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

### Modular Import Strategy

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/README.md

Dependencies are imported where they are used, not in a single top-level file. This allows consuming code to import modules individually, ensuring all their dependencies are included.

```JavaScript
// Instead of:
// import { Button, Input, Checkbox } from './components';

// Import individual components:
import Button from './components/Button';
import Input from './components/Input';
import Checkbox from './components/Checkbox';

// Usage:
function App() {
  return (
    <div>
      <Button />
      <Input />
      <Checkbox />
    </div>
  );
}
```

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

### Debugging Jest Tests

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/README.md

Instructions for debugging Jest tests in a Node.js environment using Chrome DevTools. This involves running tests in watch mode with a debug flag and connecting to the Node process via `chrome://inspect`.

```bash
yarn run test-watch-debug
```

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

### Webpack Configuration for RSC

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/README.md

Illustrates the necessary Webpack configuration to handle non-JavaScript file imports used by RSC, such as `sass-loader` and `file-loader`.

```json
{
  // ... other webpack configurations
  module: {
    rules: [
      // ... other rules
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[hash].[ext]'
            }
          }
        ]
      }
    ]
  }
}
```

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

### Button Components

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/gallery/src/styles/NxBtn/NxBtnLinkExample.html

Demonstrates various button styles and their disabled states. These components are likely built using React and styled with CSS or a UI library.

```HTML
<a href="#/">[Primary]</a> <a href="#/">[Secondary]</a> <a href="#/">[Tertiary]</a> <a href="#/">[Error]</a>

<a href="#/">[Small]</a>

<a href="#/">[Primary Disabled]</a> <a href="#/">[Secondary Disabled]</a> <a href="#/">[Tertiary Disabled]</a> <a href="#/">[Error Disabled]</a>

<a href="#/">[Small Disabled]</a>
```

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

### SCSS and CSS Export Strategy

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/README.md

Component styles are written in SCSS, with original SCSS files included in the build output for projects that use SCSS. A compiled CSS file is also provided for projects that do not use SCSS.

```SCSS
// Example SCSS file (e.g., _button.scss)
.sonatype-button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

// Example usage in a JS/TS file
import './_button.scss';

function MyButton() {
  return <button className="sonatype-button">Click Me</button>;
}
```

```CSS
/* Compiled CSS equivalent */
.sonatype-button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}
```

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

### Incrementing Version for CI/Releases

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/README.md

Command to increment the version number of the project for CI builds and releases. This ensures proper semantic versioning is maintained.

```bash
yarn version --no-git-tag-version (--patch|--minor|--major)
```

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

### Sonatype Public Key

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/SECURITY.md

This is the public key provided by Sonatype for securely communicating security vulnerability reports via email.

```text
-----BEGIN PUBLIC KEY BLOCK-----
mQENBFF+a9ABCADQWSAAU7w9i71Zn3TQ6k7lT9x57cRdtX7V709oeN/c/1it+gCw
onmmCyf4ypor6XcPSOasp/x0s3hVuf6YfMbI0tSwJUWWihrmoPGIXtmiSOotQE0Q
Sav41xs3YyI9LzQB4ngZR/nhp4YhioD1dVorD6LGXk08rvl2ikoqHwTagbEXZJY7
3VYhW6JHbZTLwCsfyg6uaSYF1qXfUxHPOiHYKNbhK/tM3giX+9f4zEFQ
eX9wcRTdgdDOAqDOK7MV30KXagSqvW0MgEYtKX6q4KjjRzBYjkiTdFW/yMXub/Bs
5UckxHTCuAmvpr5J0HIUeLtXi1QCkijyn8HJABEBAAG0KVNvbmF0eXBlIFNlY3Vy
aXR5IDxzZWN1cml0eUBzb25hdHlwZS5jb20+iQE4BBMBAgAiBQJRfmvQAhsDBgsJ
CAcDAgYVCAIJCgsEFgIDAQIeAQIXgAAKCRAgkmxsNtgwfUzbCACLtCgieq1kJOqo
2i136ND5ZOj31zIzNENLn8dhSg5zQwTHOcntWAtS8uCNq4fSlslwvlbPYWTLD7fE
iJn1z7BCU8gBk+pkAJJFWEPweMVt+9bYQ4HfKceGbJeuwBBhS34SK9ZIp9gfxxfA
oTm0aGYwKR5wH3sqL/mrhwKhPt9wXR4qwlE635STEX8wzJ5SBqf3ArJUtCp1rzgR
Dx+DiZed5HE1pOI2Kyb6O80bm485WThPXxpvp3bfzTNYoGzeLi/F7WkmgggkXxsT
Pyd0sSx0B/MO4lJtQvEBlIHDFno9mXa30fKl+rzp2geG5UxNHJUjaC5JhfWLEXEX
wV0ErBsmuQENBFF+a9ABCADXj04+GLIz8VCaZH554nUHEhaKoiIXH3Tj7UiMZDqy
o4WIw2RFaCQNA8T0R5Q0yxINU146JQMbA2SN59AGcGYZcajyEvTR7tLG0meMO6S0
JWpkX7s3xaC0s+5SJ/ba00oHGzW0aotgzG9BWA5OniNHK7zZKMVu7M80M/wB1RvK
x775hAeJ+8F9MDJ+ijydBtaOfDdkbg+0kU1xR6Io+vVLPk38ghlWU8QFP4/B0oWi
jK4xiDqK6cG7kyH9kC9nau+ckH8MrJ/RzEpsc4GRwqS4IEnvHWe7XbgydWS1bCp6
8uP5ma3d02elQmSEa+PABIPKnZcAf1YKLr9O/+IzEdOhABEBAAGJAR8EGAECAAkF
AlF+a9ACGwwACgkQIJJsbDbYMH3WzAf/XOm4YQZFOgG2h9d03m8me8d1vrYico+0
pBYU9iCozLgamM4er9Efb+XzfLvNVKuqyR0cgvGszukIPQYeX58DMrZ07C+E0wDZ
bG+ZAYXT5GqsHkSVnMCVIfyJNLjR4sbVzykyVtnccBL6bP3jxbCP1jJdT7bwiKre
1jQjvyoL0yIegdiN/oEdmx52Fqjt4NkQsp4sk625UBFTVISr22bnf60ZIGgrRbAP
DU1XMdIrmqmhEEQcXMp4CeflDMksOmaIeAUkZY7eddnXMwQDJTnz5ziCal+1r0R3
dh0XISRG0NkiLEXeGkrs7Sn7BAAsTsaH/1zU6YbvoWlMlHYT6EarFQ== =sFGt
-----END PUBLIC KEY BLOCK-----
```

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

### Tertiary Button Component

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/gallery/src/styles/NxBtn/NxBtnTertiaryExample.html

Demonstrates the usage of the tertiary button component, including its disabled states managed via class and attribute.

```javascript
import React from 'react';

function TertiaryButton({
  children,
  disabled,
  className,
  ...props
}) {
  const disabledClass = disabled ? 'disabled-button-class' : '';
  return (
    <button
      className={`tertiary-button ${disabledClass} ${className || ''}`}
      disabled={disabled}
      {...props}
    >
      {children}
    </button>
  );
}

export default TertiaryButton;

// Usage Example:
// <TertiaryButton disabled={true}>Click Me</TertiaryButton>
// <TertiaryButton className="custom-style">Click Me</TertiaryButton>
```

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

### TypeScript and JavaScript Compatibility

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/README.md

Components are written in TypeScript but exported as JavaScript with TypeScript definition (.d.ts) files. This ensures compatibility for projects written in either language. React propTypes are also provided for runtime type checking in non-TypeScript environments.

```TypeScript
export interface MyComponentProps {
  // component props
}

// In a separate file, e.g., MyComponent.jsx
import React from 'react';
import PropTypes from 'prop-types';

function MyComponent(props) {
  // ... component implementation
  return <div>Hello</div>;
}

MyComponent.propTypes = {
  // prop type definitions
};

export default MyComponent;
```

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

### Button Component Variants

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/gallery/src/styles/NxBtn/NxBtnSmallExample.html

Demonstrates the usage of the Button component with various predefined styles and states. These include primary, secondary, tertiary, error, small, and disabled button variants, showcasing the component's flexibility for different UI contexts.

```react
import React from 'react';
import Button from './Button';

function App() {
  return (
    <div>
      <Button variant="primary">Primary button</Button>
      <Button variant="secondary">Secondary button</Button>
      <Button variant="tertiary">Tertiary button</Button>
      <Button variant="error">Error button</Button>
      <Button size="small">Small button</Button>
      <Button disabled>Disabled button</Button>
      <Button icon="star">Button with icon</Button>
    </div>
  );
}

export default App;
```

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

### Escaping HTML Tags in React

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/gallery/src/styles/NxCode/NxCodeExample.html

Demonstrates how to correctly escape HTML tags when rendering them within a React application to prevent rendering issues or security vulnerabilities.

```javascript
function renderHtmlTags() {
  // When you wrap HTML tags <HTML> remember to escape <>
  return (
    <div>
      {'<HTML>'} content
    </div>
  );
}
```

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

### RSC Stylesheet Usage (CSS)

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/README.md

Provides the alternative method for including RSC styles if not using SASS, by referencing the `react-shared-components.css` file.

```css
/* The full set of RSC styles is available in CSS form */
@import 'react-shared-components.css';
```

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

### RSC Stylesheet Usage (SASS)

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/README.md

Explains how to include RSC styles automatically when using SASS in your build process. Each component has an ES6 import for its SCSS file.

```javascript
// Example of an ES6 import for SCSS within a component
import './NxButton.scss';
```

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

### CSS Mixin for Font Size Adjustment

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/gallery/src/styles/NxFontSize/NxFontSizeHtmlExample.html

Demonstrates a CSS mixin used to adjust font sizes, specifically showing how to change text from 16px to 12px. While shown on a div for illustration, it's intended for use on the body tag in practice.

```css
/* Example CSS Mixin */

@mixin adjust-font-size($size) {
  font-size: $size;
}

/* Usage Example */
div {
  @include adjust-font-size(12px);
}

/* Recommended Usage */
/*
body {
  @include adjust-font-size(12px);
}
*/
```

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

### NX Tile with Grid Cell (Multiple Sections)

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/gallery/src/styles/NxTile/NxTileGridExample.html

Shows an NX Tile component structured as a grid cell containing multiple distinct content sections. This pattern allows for organizing diverse information within a single grid item.

```HTML
<div class="nx-grid-cell">
  <div class="nx-grid-section">
    <h3>Section Title 1</h3>
    <p>Content for the first section...</p>
  </div>
  <div class="nx-grid-section">
    <h3>Section Title 2</h3>
    <p>Content for the second section...</p>
  </div>
</div>
```

```CSS
.nx-grid-cell {
  border: 1px solid #ccc;
  padding: 15px;
  margin-bottom: 15px;
}

.nx-grid-section {
  margin-bottom: 10px;
}

.nx-grid-section:last-child {
  margin-bottom: 0;
}
```

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

### Primary Button Disabled (by attribute)

Source: https://github.com/sonatype/sonatype-react-shared-components/blob/main/gallery/src/styles/NxBtn/NxBtnPrimaryExample.html

Illustrates disabling a primary button using the standard HTML 'disabled' attribute, a common method for controlling interactive elements.

```javascript
import React from 'react';
import { Button } from '@sonatype/react-shared-components';

function App() {
  return (
    <Button type="primary" disabled>Primary Disabled</Button>
  );
}
```

```html
<button class="sonatype-button primary" disabled>Primary Disabled</button>
```