### Install and Run Storybook with Yarn

Source: https://github.com/canonical/react-components/blob/main/HACKING.md

Install dependencies and start Storybook using Yarn commands. This is an alternative to using `dotrun`.

```shell
yarn install
yarn docs
```

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

### Run Storybook Locally

Source: https://github.com/canonical/react-components/blob/main/HACKING.md

Start Storybook to develop new components locally. Ensure you have run `yarn install` first.

```shell
dotrun
```

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

### Install with NPM

Source: https://github.com/canonical/react-components/blob/main/src/docs/getting-started.mdx

Use this command to add the library to your project if you are using NPM as your package manager.

```shell
npm install @canonical/react-components
```

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

### Install with Yarn

Source: https://github.com/canonical/react-components/blob/main/src/docs/getting-started.mdx

Use this command to add the library to your project if you are using Yarn as your package manager.

```shell
yarn add @canonical/react-components
```

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

### Start Local Storybook

Source: https://github.com/canonical/react-components/blob/main/HACKING.md

Start the local Storybook instance for development and testing. Replace <PORT> with the desired port number.

```shell
PORT=<PORT> yarn docs
```

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

### Install linked dependencies in project

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

After linking packages in the react-components repository, run these commands in your project to link the necessary dependencies.

```shell
yarn install
yarn link react
yarn link react-dom
yarn link @canonical/react-components
```

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

### Build and Watch Components for Yarn 3 Projects

Source: https://github.com/canonical/react-components/blob/main/HACKING.md

Commands to clean, install, build, and watch components when linking with a project using Yarn 3. Run these in the `react-components` directory.

```shell
yarn clean
yarn install
yarn build
yarn build-watch
```

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

### Link Components in a Yarn 3 Project

Source: https://github.com/canonical/react-components/blob/main/HACKING.md

Commands to clean, install, and link the `react-components` package into your project when using Yarn 3. Ensure you replace `path_to_react_components` with the actual path.

```shell
yarn clean
yarn install
yarn link path_to_react_components
```

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

### Override SCSS Variables with Vite

Source: https://github.com/canonical/react-components/blob/main/HACKING.md

Example of how to pass custom SCSS variable values to `react-components` using Vite's `additionalData` option in `vite.config.ts`.

```typescript
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          $color-brand: #bada55;
          $breakpoint-large: 1234px;
        `,
      },
    },
  },
});
```

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

### Open Interactive Cypress Environment

Source: https://github.com/canonical/react-components/blob/main/HACKING.md

Launch the interactive Cypress test runner. Specify the Storybook port using the '--env port=<PORT>' flag.

```shell
yarn cypress:open --env port=<PORT>
```

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

### Link local packages for development

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

Run this command within the cloned repository to set up a local yarn registry for linked packages.

```shell
yarn run link-packages
```

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

### Clone the react-components repository

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

Clone the repository to your local workspace for local development.

```shell
git clone https://github.com/canonical/react-components
```

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

### Link React and Components (Older Yarn)

Source: https://github.com/canonical/react-components/blob/main/HACKING.md

Commands to link React and the `react-components` package in a project using an older version of Yarn. These commands should be run in the project directory.

```shell
dotrun clean
dotrun exec yarn link "@canonical/react-components"
dotrun exec yarn link "react"
dotrun exec yarn install
dotrun
```

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

### Build and Watch Components (Older Yarn)

Source: https://github.com/canonical/react-components/blob/main/HACKING.md

Continuously build and watch component files for changes when developing with older Yarn versions. This command is run in the `react-components` directory.

```shell
dotrun build-watch
```

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

### Run Cypress Tests in CI

Source: https://github.com/canonical/react-components/blob/main/HACKING.md

Execute Cypress integration tests within a Continuous Integration environment. Ensure the correct port is specified.

```shell
PORT=<PORT> yarn test-cypress
```

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

### Link Package for Older Yarn Versions

Source: https://github.com/canonical/react-components/blob/main/HACKING.md

Command to link the `react-components` package when using an older version of Yarn. This helps prevent multiple copies of React from being loaded.

```shell
dotrun link-package
```

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

### Reading SCSS Variables for Build Configuration

Source: https://github.com/canonical/react-components/blob/main/HACKING.md

Read SCSS variable definitions from a file to be used in build tool configurations like Webpack or Vite. Changes to the SCSS file require a project rebuild.

```javascript
// Read the file contents
const scssSettings = fs.readFileSync("templates/sass/_settings.scss", "utf-8").trim();

// ...

// and then in your Vite or Webpack configuration pass the file contents instead:
{
  // ...
  additionalData: scssSettings,
}
```

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

### Unlink local packages

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

When finished with local development, navigate to the react-components folder and run this command to unlink packages.

```shell
cd react-components
yarn run unlink-packages
```

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

### Vite Configuration for Linked Components

Source: https://github.com/canonical/react-components/blob/main/HACKING.md

Temporary Vite configuration options required when using `yarn link` with `react-components` to resolve dependency conflicts.

```javascript
resolve: {
  dedupe: ["react", "react-dom", "formik"],
  preserveSymlinks: true,
}
```

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

### Webpack Configuration for SCSS

Source: https://github.com/canonical/react-components/blob/main/HACKING.md

Configure Webpack to process SCSS files, including the use of 'style-loader', 'css-loader', and 'sass-loader'. Use the 'additionalData' option to inject custom SCSS variables.

```javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              additionalData: `
                $color-brand: #bada55;
                $breakpoint-large: 1234px;
              `,
            },
          },
        ],
      },
    ],
  },
};
```

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

### Yarn 3 Resolutions for Linked Components

Source: https://github.com/canonical/react-components/blob/main/HACKING.md

Add these resolutions to your project's `package.json` to ensure correct dependency linking when using `yarn link` with `react-components`.

```json
"resolutions": {
    "@canonical/react-components": "portal:path_to_react_components",
    "formik": "portal:path_to_react_components/node_modules/formik",
    "react": "portal:path_to_react_components/node_modules/react",
    "react-dom": "portal:path_to_react_components/node_modules/react-dom"
}
```

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

### Unlink React and Components (Older Yarn)

Source: https://github.com/canonical/react-components/blob/main/HACKING.md

Commands to unlink React and the `react-components` package from your project after development is complete, when using older Yarn versions.

```shell
dotrun exec yarn unlink react
dotrun exec yarn unlink "@canonical/react-components"
dotrun unlink-package
```

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