### Run Project with Bun

Source: https://github.com/m-yoshiro/storybook-mcp/blob/main/storybook-sample/README.md

Executes the main application file (`index.ts`) using the Bun runtime. This command starts the project's execution environment.

```bash
bun run index.ts

```

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

### Install Dependencies

Source: https://github.com/m-yoshiro/storybook-mcp/blob/main/README.md

Installs project dependencies using either Bun or npm. Bun is recommended for faster installation.

```bash
bun install
# or
npm install
```

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

### Install Dependencies with Bun

Source: https://github.com/m-yoshiro/storybook-mcp/blob/main/storybook-sample/README.md

Installs project dependencies using the Bun package manager. This command fetches and installs all packages listed in the project's dependency manifest.

```bash
bun install

```

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

### Server Configuration

Source: https://github.com/m-yoshiro/storybook-mcp/blob/main/README.md

Example configuration JSON for setting up the Storybook MCP server. It specifies the command to run and arguments, including an optional path to Storybook static JSON files.

```json
{
  "mcpServers": {
    "storybook-mcp": {
      "command": "node",
      "args": [
        "/< your path>/index.js",
        "/< your path>/index.json"
      ]
    }
  }
}
```

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

### Clone Repository

Source: https://github.com/m-yoshiro/storybook-mcp/blob/main/README.md

Clones the Storybook MCP server repository from GitHub. This is the first step to get the project code.

```bash
git clone https://github.com/m-yoshiro/storybook-mcp.git
cd storybook-mcp
```

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

### Handle Vite App Loading Errors in Storybook

Source: https://github.com/m-yoshiro/storybook-mcp/blob/main/storybook-sample/storybook-static/iframe.html

This JavaScript function intercepts Vite application loading errors within Storybook. It checks if the error occurs on a non-localhost hostname during development and provides informative console messages and in-page UI feedback to guide the user on resolving host configuration issues.

```javascript
// eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention
function __onViteAppLoadingError(event) {
    const hostname = globalThis.location.hostname;
    if (hostname !== 'localhost' && globalThis.CONFIG_TYPE === 'DEVELOPMENT') {
        const message = `Failed to load the Storybook preview file 'vite-app.js': It looks like you're visiting the Storybook development server on another hostname than localhost: '${hostname}', but you haven't configured the necessary security features to support this. Please re-run your Storybook development server with the '--host ${hostname}' flag, or manually configure your Vite allowedHosts configuration with viteFinal. See:`;
        const docs = [
            'https://storybook.js.org/docs/api/cli-options#dev',
            'https://storybook.js.org/docs/api/main-config/main-config-vite-final',
            'https://vite.dev/config/server-options.html#server-allowedhosts',
        ];
        console.error(`${message}\n${docs.map((doc) => `- ${doc}`).join('\n')}`);
        document.getElementById('storybook-root').innerHTML = `<p style="color: red; max-width: 70ch">${message.replaceAll( '\n', '<br/>' )}<ul>${docs.map((doc) => `<li><a href='${doc}' target='_blank'>${doc}</a></li>`).join('')}<ul></p>`;
        return;
    }
}
```

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

### Storybook Add-on Component Styles

Source: https://github.com/m-yoshiro/storybook-mcp/blob/main/storybook-sample/stories/Configure.mdx

Provides styling for Storybook add-on components, managing layout, image positioning, and responsiveness. It targets elements like `.sb-addon`, `.sb-addon-img`, and `.sb-addon-text` to ensure a consistent and adaptive user interface across different screen sizes.

```css
.sb-addon {
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: #EEF3F8;
    height: 180px;
    margin-bottom: 48px;
    overflow: hidden;
  }

  .sb-addon-text {
    padding-left: 48px;
    max-width: 240px;
  }

  .sb-addon-text h4 {
    padding-top: 0px;
  }

  .sb-addon-img {
    position: absolute;
    left: 345px;
    top: 0;
    height: 100%;
    width: 200%;
    overflow: hidden;
  }

  .sb-addon-img img {
    width: 650px;
    transform: rotate(-15deg);
    margin-left: 40px;
    margin-top: -72px;
    box-shadow: 0 0 1px rgba(255, 255, 255, 0);
    backface-visibility: hidden;
  }

  @media screen and (max-width: 800px) {
    .sb-addon-img {
      left: 300px;
    }
  }

  @media screen and (max-width: 600px) {
    .sb-section {
      flex-direction: column;
    }

    .sb-features-grid {
      grid-template-columns: repeat(1, 1fr);
    }

    .sb-socials {
      grid-template-columns: repeat(2, 1fr);
    }

    .sb-addon {
      height: 280px;
      align-items: flex-start;
      padding-top: 32px;
      overflow: hidden;
    }

    .sb-addon-text {
      padding-left: 24px;
    }

    .sb-addon-img {
      right: 0;
      left: 0;
      top: 130px;
      bottom: 0;
      overflow: hidden;
      height: auto;
      width: 124%;
    }

    .sb-addon-img img {
      width: 1200px;
      transform: rotate(-12deg);
      margin-left: 0;
      margin-top: 48px;
      margin-bottom: -40px;
      margin-left: -24px;
    }
  }

```

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

### Storybook Asset Loading Configuration

Source: https://github.com/m-yoshiro/storybook-mcp/blob/main/storybook-sample/stories/Configure.mdx

Demonstrates how to configure Storybook to load static files like fonts or images by specifying directories using the `staticDirs` option in the Storybook configuration file.

```javascript
// In your .storybook/main.js or .storybook/main.ts

module.exports = {
  // ... other configurations
  staticDirs: [
    '../public',
    '../src/assets'
  ]
};
```

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

### Build Project

Source: https://github.com/m-yoshiro/storybook-mcp/blob/main/README.md

Builds the Storybook MCP server project. This step compiles the TypeScript code into JavaScript.

```bash
bun run build
# or
npm run build
```

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

### MCP Server Tools

Source: https://github.com/m-yoshiro/storybook-mcp/blob/main/README.md

Lists the available tools provided by the Storybook MCP server for interacting with Storybook components. These tools allow AI agents to query component information and usage.

```APIDOC
Tool Name: `list-components`
Description: Lists all available components from Storybook.
Parameters:
  - `path` (optional): Path to the index.json or stories.json file (optional if default path is provided).

Tool Name: `find-components-by-name`
Description: Finds components based on a keyword (partial match supported).
Parameters:
  - `name`: Component name or keyword to search for.
  - `path` (optional): Path to the index.json or stories.json file (optional if default path is provided).
```

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

### Storybook Runtime Configuration (JavaScript)

Source: https://github.com/m-yoshiro/storybook-mcp/blob/main/storybook-sample/storybook-static/index.html

Sets various global configuration options and imports essential Storybook runtime modules and addons. This includes feature flags, reference configurations, logging levels, and builder/framework settings.

```javascript
window['FEATURES'] = { "argTypeTargetsV7": true, "legacyDecoratorFileOrder": false, "disallowImplicitActionsInRenderV8": true };
window['REFS'] = {};
window['LOGLEVEL'] = "info";
window['DOCS_OPTIONS'] = { "defaultName": "Docs", "autodocs": "tag" };
window['CONFIG_TYPE'] = "PRODUCTION";
window['TAGS_OPTIONS'] = { "dev-only": { "excludeFromDocsStories": true }, "docs-only": { "excludeFromSidebar": true }, "test-only": { "excludeFromSidebar": true, "excludeFromDocsStories": true } };
window['STORYBOOK_RENDERER'] = "react";
window['STORYBOOK_BUILDER'] = "@storybook/builder-vite";
window['STORYBOOK_FRAMEWORK'] = "@storybook/react-vite";

import './sb-manager/globals-runtime.js';
import './sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js';
import './sb-addons/essentials-controls-1/manager-bundle.js';
import './sb-addons/essentials-actions-2/manager-bundle.js';
import './sb-addons/essentials-docs-3/manager-bundle.js';
import './sb-addons/essentials-backgrounds-4/manager-bundle.js';
import './sb-addons/essentials-viewport-5/manager-bundle.js';
import './sb-addons/essentials-toolbars-6/manager-bundle.js';
import './sb-addons/essentials-measure-7/manager-bundle.js';
import './sb-addons/essentials-outline-8/manager-bundle.js';
import './sb-addons/onboarding-9/manager-bundle.js';
import './sb-addons/interactions-10/manager-bundle.js';
import './sb-manager/runtime.js';
```

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

### Storybook UI Styling

Source: https://github.com/m-yoshiro/storybook-mcp/blob/main/storybook-sample/stories/Configure.mdx

Provides CSS styles for layout, spacing, and visual presentation of Storybook features and community sections. Includes styles for grids, items, headings, paragraphs, images, and specific components like addons and social links.

```css
.sb-container {
    margin-bottom: 48px;
  }

  .sb-section {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 20px;
  }

  img {
    object-fit: cover;
  }

  .sb-section-title {
    margin-bottom: 32px;
  }

  .sb-section a:not(h1 a, h2 a, h3 a) {
    font-size: 14px;
  }

  .sb-section-item, .sb-grid-item {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .sb-section-item-heading {
    padding-top: 20px !important;
    padding-bottom: 5px !important;
    margin: 0 !important;
  }
  .sb-section-item-paragraph {
    margin: 0;
    padding-bottom: 10px;
  }

  .sb-chevron {
    margin-left: 5px;
  }

  .sb-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 32px 20px;
  }

  .sb-socials {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .sb-socials p {
    margin-bottom: 10px;
  }

  .sb-explore-image {
    max-height: 32px;
    align-self: flex-start;
  }

  .sb-addon {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    background-color: #EEF3F8;
    border-radius: 5px;

```

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

### Property Schema Definition

Source: https://github.com/m-yoshiro/storybook-mcp/blob/main/storybook-sample/storybook-static/iframe.html

Defines a schema for properties, including their name, description, default value, and control type. This structure is used for configuring UI components or API parameters.

```apidoc
propertyName*
  This is a short description
  summary: A more detailed explanation of the property's purpose.
  defaultValue: The default value if none is provided.
  Control: Set string
```

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

### Storybook CSS Animations and Styles

Source: https://github.com/m-yoshiro/storybook-mcp/blob/main/storybook-sample/storybook-static/iframe.html

Contains CSS rules for Storybook's UI elements, including animations like rotation and glowing effects, and styling for various components such as loaders, preview blocks, and argument tables.

```css
/* We display the preparing loaders */
/* over */
/* the rendering story */
.sb-preparing-story,
.sb-preparing-docs {
  background-color: white;
  /* Maximum possible z-index. It would be better to use stacking contexts to ensure it's always on top, but this isn't possible as it would require making CSS changes that could affect user code */
  z-index: 2147483647;
}

.sb-loader {
  -webkit-animation: sb-rotate360 0.7s linear infinite;
  animation: sb-rotate360 0.7s linear infinite;
  border-color: rgba(97, 97, 97, 0.29);
  border-radius: 50%;
  border-style: solid;
  border-top-color: #646464;
  border-width: 2px;
  display: inline-block;
  height: 32px;
  left: 50%;
  margin-left: -16px;
  margin-top: -16px;
  mix-blend-mode: difference;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transition: all 200ms ease-out;
  vertical-align: top;
  width: 32px;
  z-index: 4;
}

.sb-previewBlock {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0;
  margin: 25px auto 40px;
  max-width: 600px;
}

.sb-previewBlock_header {
  align-items: center;
  box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 0 0 inset;
  display: flex;
  gap: 14px;
  height: 40px;
  padding: 0 12px;
}

.sb-previewBlock_icon {
  -webkit-animation: sb-glow 1.5s ease-in-out infinite;
  animation: sb-glow 1.5s ease-in-out infinite;
  background: #e6e6e6;
  height: 14px;
  width: 14px;
}

.sb-previewBlock_icon:last-child {
  margin-left: auto;
}

.sb-previewBlock_body {
  -webkit-animation: sb-glow 1.5s ease-in-out infinite;
  animation: sb-glow 1.5s ease-in-out infinite;
  height: 182px;
  position: relative;
}

.sb-argstableBlock {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 13px;
  line-height: 20px;
  margin: 25px auto 40px;
  max-width: 600px;
  text-align: left;
  width: 100%;
}

.sb-argstableBlock th:first-of-type,
.sb-argstableBlock td:first-of-type {
  padding-left: 20px;
}

.sb-argstableBlock th:nth-of-type(2),
.sb-argstableBlock td:nth-of-type(2) {
  width: 35%;
}

.sb-argstableBlock th:nth-of-type(3),
.sb-argstableBlock td:nth-of-type(3) {
  width: 15%;
}

.sb-argstableBlock th:last-of-type,
.sb-argstableBlock td:last-of-type {
  padding-right: 20px;
}

.sb-argstableBlock th span,
.sb-argstableBlock td span {
  -webkit-animation: sb-glow 1.5s ease-in-out infinite;
  animation: sb-glow 1.5s ease-in-out infinite;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 0;
  box-shadow: none;
  color: transparent;
}

.sb-argstableBlock th {
  padding: 10px 15px;
}

.sb-argstableBlock-body {
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,
    rgba(0, 0, 0, 0.065) 0 0 0 1px;
}

.sb-argstableBlock-body tr {
  background: transparent;
  overflow: hidden;
}

.sb-argstableBlock-body tr:not(:first-child) {
  border-top: 1px solid #e6e6e6;
}

.sb-argstableBlock-body tr:first-child td:first-child {
  border-top-left-radius: 4px;
}

.sb-argstableBlock-body tr:first-child td:last-child {
  border-top-right-radius: 4px;
}

.sb-argstableBlock-body tr:last-child td:first-child {
  border-bottom-left-radius: 4px;
}

.sb-argstableBlock-body tr:last-child td:last-child {
  border-bottom-right-radius: 4px;
}

.sb-argstableBlock-body td {
  background: #fff;
  padding-bottom: 10px;
  padding-top: 10px;
  vertical-align: top;
}

.sb-argstableBlock-body td:not(:first-of-type) {
  padding-left: 15px;
  padding-right: 15px;
}

.sb-argstableBlock-body button {
  -webkit-animation: sb-glow 1.5s ease-in-out infinite;
  animation: sb-glow 1.5s ease-in-out infinite;
  background-color: rgba(0, 0, 0, 0.1);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: transparent;
  display: inline;
  font-size: 12px;
  line-height: 1;
  padding: 10px 16px;
}

.sb-argstableBlock-summary {
  margin-top: 4px;
}

.sb-argstableBlock-code {
  margin-right: 4px;
  margin-bottom: 4px;
  padding: 2px 5px;
}

/* Keyframes for animations */
@-webkit-keyframes sb-rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes sb-rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes sb-glow {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
@keyframes sb-glow {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
```

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

### Storybook Global JavaScript Configuration

Source: https://github.com/m-yoshiro/storybook-mcp/blob/main/storybook-sample/storybook-static/iframe.html

Sets global JavaScript variables for Storybook, including configuration type, log level, feature flags, and story definitions. This configuration is essential for Storybook's runtime behavior.

```javascript
window.CONFIG_TYPE = 'PRODUCTION';
window.LOGLEVEL = 'info';
window.FRAMEWORK_OPTIONS = {};
window.CHANNEL_OPTIONS = {};
window.FEATURES = {"argTypeTargetsV7":true,"legacyDecoratorFileOrder":false,"disallowImplicitActionsInRenderV8":true};
window.STORIES = [
  {"titlePrefix":"","directory":"./stories","files":"**/*.mdx","importPathMatcher":"^\\.["\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.mdx)$"},
  {"titlePrefix":"","directory":"./stories","files":"**/*.stories.@(js|jsx|mjs|ts|tsx)","importPathMatcher":"^\\.["\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|mjs|ts|tsx))$"}
];
window.DOCS_OPTIONS = {"defaultName":"Docs","autodocs":"tag"};
window.TAGS_OPTIONS = {"dev-only":{"excludeFromDocsStories":true},"docs-only":{"excludeFromSidebar":true},"test-only":{"excludeFromSidebar":true,"excludeFromDocsStories":true}};

// We do this so that "module && module.hot" etc. in Storybook source code
// doesn't fail (it will simply be disabled)
window.module = undefined;
window.global = window;
```

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

### Storybook CSS Styling

Source: https://github.com/m-yoshiro/storybook-mcp/blob/main/storybook-sample/storybook-static/iframe.html

Defines CSS rules for Storybook's UI, including font face declarations for 'Nunito Sans' and various class selectors for layout, centering, and error display.

```css
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: italic; font-weight: 700; font-display: swap; src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2'); }

/* While we aren't showing the main block yet, but still preparing, we want everything the user has rendered, which may or may not be in #storybook-root, to be display none */
.sb-show-preparing-story:not(.sb-show-main) > :not(.sb-preparing-story) { display: none; }
.sb-show-preparing-docs:not(.sb-show-main) > :not(.sb-preparing-docs) { display: none; }
/* Hide our own blocks when we aren't supposed to be showing them */
:not(.sb-show-preparing-story) > .sb-preparing-story, :not(.sb-show-preparing-docs) > .sb-preparing-docs, :not(.sb-show-nopreview) > .sb-nopreview, :not(.sb-show-errordisplay) > .sb-errordisplay { display: none; }
.sb-show-main.sb-main-centered {
  margin: 0;
  display: flex;
  align-items: center;
  min-height: 100vh;
}
.sb-show-main.sb-main-centered #storybook-root {
  box-sizing: border-box;
  margin: auto;
  padding: 1rem;
  max-height: 100%;
  /* Hack for centering correctly in IE11 */
}
/* Vertical centering fix for IE11 */
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .sb-show-main.sb-main-centered:after {
    content: '';
    min-height: inherit;
    font-size: 0;
  }
}
.sb-show-main.sb-main-fullscreen {
  margin: 0;
  padding: 0;
  display: block;
}
.sb-show-main.sb-main-padded {
  margin: 0;
  padding: 1rem;
  display: block;
  box-sizing: border-box;
}
.sb-wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  padding: 40px;
  font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: auto;
}
@media (max-width: 700px) {
  .sb-wrapper {
    padding: 20px;
  }
}
@media (max-width: 500px) {
  .sb-wrapper {
    padding: 10px;
  }
}
.sb-heading {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  margin: 10px 0;
  padding-right: 25px;
}
.sb-nopreview {
  display: flex;
  align-content: center;
  justify-content: center;
  box-sizing: border-box;
}
.sb-nopreview_main {
  margin: auto;
  padding: 30px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.03);
}
.sb-nopreview_heading {
  text-align: center;
}
.sb-errordisplay {
  background: #f6f9fc;
  color: black;
  z-index: 999999;
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
}
.sb-errordisplay ol {
  padding-left: 18px;
  margin: 0;
}
.sb-errordisplay h1 {
  font-family: Nunito Sans;
  font-size: 22px;
  font-weight: 400;
  line-height: 30px;
  font-weight: normal;
  margin: 0;
}
.sb-errordisplay h1::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background: #ff4400;
  border-radius: 50%;
  margin-right: 8px;
}
.sb-errordisplay p, .sb-errordisplay ol {
  font-family: Nunito Sans;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  margin: 0;
}
.sb-errordisplay li + li {
  margin: 0;
  padding: 0;
  padding-top: 12px;
}
.sb-errordisplay a {
  color: currentColor;
}
.sb-errordisplay_main {
  margin: auto;
  padding: 24px;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  min-height: 100%;
  width: 100%;
  border-radius: 6px;
  background: white;
  border: 1px solid #ff0000;
  box-shadow: 0 0 64px rgba(0, 0, 0, 0.1);
  gap: 24px;
}
.sb-errordisplay_code {
  padding: 10px;
  flex: 1;
  background: #242424;
  color: #c6c6c6;
  box-sizing: border-box;
  font-size: 14px;
  font-wei
```

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

### Storybook Meta Configuration

Source: https://github.com/m-yoshiro/storybook-mcp/blob/main/storybook-sample/stories/Configure.mdx

Sets the title for a Storybook page or section, often used in MDX files to organize documentation.

```jsx
<Meta title="Configure your project" />
```

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

### Connect React/Vue DevTools to Top Frame

Source: https://github.com/m-yoshiro/storybook-mcp/blob/main/storybook-sample/storybook-static/iframe.html

JavaScript code to synchronize React and Vue development tools hooks between frames, ensuring proper integration when Storybook is embedded in an iframe.

```javascript
/* globals window */
/* eslint-disable no-underscore-dangle */
try {
  if (window.top !== window) {
    window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;
    window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.top.__VUE_DEVTOOLS_GLOBAL_HOOK__;
    window.top.__VUE_DEVTOOLS_CONTEXT__ = window.document;
  }
} catch (e) {
  // eslint-disable-next-line no-console
  console.warn('unable to connect to top frame for connecting dev tools');
}
```

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

### React SVG Icon Component

Source: https://github.com/m-yoshiro/storybook-mcp/blob/main/storybook-sample/stories/Configure.mdx

A simple React functional component to render an SVG icon, commonly used for navigation elements like arrows. It includes inline styles for presentation.

```jsx
import React from 'react';

export const RightArrow = () => (
  <svg 
    viewBox="0 0 14 14" 
    width="8px" 
    height="14px" 
    style={{
      marginLeft: '4px',
      display: 'inline-block',
      shapeRendering: 'inherit',
      verticalAlign: 'middle',
      fill: 'currentColor',
      'path fill': 'currentColor'
    }}
  >
    <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
  </svg>
);
```

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

### Storybook Font Definitions (CSS)

Source: https://github.com/m-yoshiro/storybook-mcp/blob/main/storybook-sample/storybook-static/index.html

Defines the 'Nunito Sans' font family with different weights and styles using CSS @font-face rules. These are typically used for UI elements within the Storybook environment.

```css
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: italic; font-weight: 700; font-display: swap; src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2'); }
```

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